notification-admin/app/assets/stylesheets/tailwind/elements/form-multiple-choice.css at 86ca4bd1643da8d355ce692040151e21423c0630 · cds-snc/notification-admin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
@layer components {
  /*! purgecss start ignore */
  .multiple-choice {
    @apply block float-none clear-left relative p-0 mb-4;
    padding-left: 38px;
  }
  @variant sm {
    .multiple-choice {
      @apply float-left;
    }
  }

  .multiple-choice [type="radio"],
  .multiple-choice [type="checkbox"] {
    @apply absolute cursor-pointer left-0 top-0 outline-none opacity-0;
    width: 38px;
    height: 38px;
    z-index: 1;
  }

  .multiple-choice > label {
    @apply cursor-pointer block;
    /* remove 300ms pause on mobile */
    padding: 8px 15px 9px 12px;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }

  @variant sm {
    .mutiple-choice label {
      @apply float-left;
      padding-top: 7px;
      padding-bottom: 7px;
    }
  }

  .multiple-choice [type="radio"] + label:before {
    content: "";
    @apply bg-transparent border-2 border-solid border-black box-content absolute top-0 left-0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
  }
  .multiple-choice [type="radio"] + label:after {
    content: "";
    @apply border-10 border-solid border-black w-0 h-0 absolute opacity-0;
    top: 9px;
    left: 9px;
    border-radius: 50%;
  }

  .multiple-choice [type="checkbox"] + label:before {
    content: "";
    width: 34px;
    height: 34px;
    @apply bg-transparent absolute top-0 left-0 border-2 border-solid border-black box-content;
  }
  .multiple-choice [type="checkbox"] + label:after {
    content: "";
    border-width: 0 0 5px 5px;
    width: 17px;
    height: 7px;
    top: 10px;
    left: 8px;
    border-top-color: transparent;
    @apply border-solid border-black box-content bg-transparent absolute opacity-0 transform -rotate-45;
  }

  /* Focus state */
  .multiple-choice [type="radio"]:focus + label:before {
    @apply shadow-outline4;
  }
  .multiple-choice [type="checkbox"]:focus + label:before {
    @apply shadow-outline;
  }

  /* Selected state */
  .multiple-choice input:checked + label:after {
    @apply opacity-100;
  }

  /* disabled state */
  .multiple-choice input:disabled {
    @apply cursor-default;
  }
  .multiple-choice input:disabled + label {
    @apply opacity-50 cursor-default;
  }

  .multiple-choice:last-child,
  .multiple-choice:last-of-type {
    @apply mb-0;
  }

  .inline .multiple-choice {
    @apply clear-none;
  }
  @variant sm {
    .inline .multiple-choice {
      @apply mb-0 mr-gutter;
    }
  }
  /* When multiple choice has an image */
  fieldset:has(img) {
    @apply grid gap-gutterHalf;
  }
  fieldset:has(img):has(.multiple-choice:nth-of-type(5)) {
    @apply grid gap-gutterHalf;
  }
  @variant md {
    fieldset:has(img):has(.multiple-choice:nth-of-type(5)) {
      @apply grid-cols-2;
    }
  }

  .multiple-choice:has(img) {
    --multiple-choice-img-padding: 1.5rem;
    padding-left: calc(38px + var(--multiple-choice-img-padding));
    padding-top: var(--multiple-choice-img-padding);
    max-width: 600px;
    @apply border-2 border-gray-300 m-0;
  }
  .multiple-choice:has(img):hover {
    @apply border-gray-500;
  }

  .multiple-choice:has(img) [type="radio"] {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .multiple-choice:has(img) [type="radio"] + label {
    padding-bottom: var(--multiple-choice-img-padding);
    padding-right: var(--multiple-choice-img-padding);
  }

  .multiple-choice:has(img) [type="radio"] + label::before {
    top: var(--multiple-choice-img-padding);
    left: var(--multiple-choice-img-padding);
    @apply bg-white;
  }
  .multiple-choice:has(img) [type="radio"] + label::after {
    top: calc(9px + var(--multiple-choice-img-padding));
    left: calc(9px + var(--multiple-choice-img-padding));
  }
  .multiple-choice:has(img):focus-within {
    box-shadow: 0 2px 0 0 black;
    @apply bg-yellow border-yellow;
  }
  .multiple-choice:has(img):has(input:checked) {
    box-shadow: none;
    @apply border-black;
  }

  .multiple-choice:has(img) img {
    max-height: 108px;
    background-size: 10px 10px;
    background-position:
      0 0,
      5px 5px;
    background-image:
      linear-gradient(
        45deg,
        #cfd5dd 25%,
        transparent 25%,
        transparent 75%,
        #cfd5dd 75%,
        #cfd5dd
      ),
      linear-gradient(
        45deg,
        #cfd5dd 25%,
        transparent 25%,
        transparent 75%,
        #cfd5dd 75%,
        #cfd5dd
      );
    @apply border-1 border-gray-300 bg-white mt-gutterHalf;
  }

  /*! purgecss end ignore */
}