1// Drop downs
2.dropdown__button {
3  position: relative;
4  padding-top: .5em;
5  padding-bottom: .5em;
6  padding-left: .5em;
7  padding-right: 1.5em;
8  margin-top: 0;
9  border: 1px solid $border-color-02;
10  min-width: 70px;
11  font-weight: 400;
12  @include bgImage__arrowDown-primary;
13  &[disabled] {
14    @include bgImage__arrowDown-disabled;
15  }
16}
17
18.dropdown__wrapper {
19  position: relative;
20  display: inline-block;
21}
22
23.dropdown__list {
24  position: absolute;
25  z-index: 100;
26  right: 0;
27  top: 100%;
28  background: $primary-light;
29  padding: 0;
30  width: 100%;
31  border: 1px solid $border-color-02;
32  margin-top: -5px;
33  box-shadow: 0 4px 10px -2px $base-02--02;
34  li {
35    list-style-type: none;
36  }
37  button {
38    padding: 1em 1em 1em 1.8em;
39    text-align: left;
40    width: 100%;
41    font-weight: 400;
42    &:hover {
43      background: $background-02;
44    }
45  }
46}
47
48.dropdown__list {
49  min-width: 230px;
50}
51.dropdown__list.multi-select {
52  > .active {
53    position: relative;
54    &:before {
55      content: '\2713';
56      position: absolute;
57      display: inline-block;
58      top: 50%;
59      left: .6em;
60      color: $primary-accent;
61      transform: translateY(-50%);
62    }
63  }
64}
65
66.dropdown__date {
67  width: 430px;
68  .row {
69    padding: 1em;
70    margin-right: 0;
71  }
72  input {
73    max-width: 170px;
74    color: $text-01;
75  }
76}
77
78
79
80// Checkbox
81.control-check,
82.control-radio {
83  position: relative;
84  display: inline-block;
85  margin-bottom: 15px;
86  padding-top: 7px;
87  cursor: pointer;
88  line-height: initial;
89}
90
91.control-check input {
92  position: absolute;
93  z-index: -1;
94  opacity: 0;
95}
96
97.control__indicator {
98  position: absolute;
99  top: 2px;
100  left: 0;
101  width: 20px;
102  height: 20px;
103  background: $primary-light;
104  border: 1px solid $border-color-02;
105  font-size: 0;
106}
107
108.control__label {
109  display: inline-block;
110  margin-left: 26px;
111  user-select: none;
112}
113
114/* Hover and focus states */
115.control-check:hover input ~ .control__indicator,
116.control-check input:focus ~ .control__indicator {
117  border: 1px solid $primary-accent;
118  background-color: $primary-accent;
119}
120
121/* Checked state */
122.control-check input:checked ~ .control__indicator {
123  background: $primary-accent;
124}
125
126/* Hover state whilst checked */
127.control-check:hover input:not([disabled]):checked ~ .control__indicator {
128  background: $primary-accent;
129}
130
131/* Disabled state */
132.control-check input:disabled ~ .control__indicator {
133  pointer-events: none;
134  opacity: .6;
135  background: $base-02--04;
136  border: 1px solid $primary-light;
137}
138
139.control-check:hover > input:disabled ~ .control__indicator {
140  outline: 0;
141}
142
143/* Check mark */
144.control__indicator:after,
145.control-check input:not(:checked){
146  position: absolute;
147  display: none;
148  content: '';
149}
150
151/* Show check mark */
152.control-check input:checked ~ .control__indicator:after {
153  display: block;
154}
155
156/* Checkbox tick */
157.control-check .control__indicator:after {
158  top: 3px;
159  left: 7px;
160  width: 5px;
161  height: 10px;
162  transform: rotate(45deg);
163  border: solid $primary-light;
164  border-width: 0 2px 2px 0;
165}
166
167/* Disabled tick colour */
168.control-check input:disabled ~ .control__indicator:after {
169  border-color: $primary-light;
170  color: $primary-light;
171}
172
173// Radio Buttons
174.control-radio {
175  padding-left: 3em;
176}
177.control-radio.disabled:hover {
178  cursor: default;
179}
180.control-radio .control__indicator {
181  position: absolute;
182  top: 2px;
183  left: 0;
184  width: 30px;
185  height: 30px;
186  background: $primary-light;
187  border: 2px solid $border-color-02;
188}
189.control-radio input{
190  position: absolute;
191  z-index: -1;
192  opacity: 0;
193}
194
195.control-radio .control__indicator {
196  border-radius: 50%;
197}
198
199/* Hover and focus states */
200.control-radio input:focus ~ .control__indicator {
201  background: $primary-accent;
202  outline: 1px solid $primary-accent;
203  outline-offset: 3px;
204}
205
206.control-radio input:checked ~ .control__indicator {
207  background: $background-02;
208  border: 2px solid $primary-accent;
209}
210
211/* Disabled state */
212.control-radio input:disabled ~ .control__indicator{
213  pointer-events: none;
214  opacity: .6;
215  background: $base-02--04;
216  border: 1px solid $border-color-01;
217}
218
219.control-radio:hover > input:disabled ~ .control__indicator{
220  outline: 0;
221}
222
223.control-radio:hover input:disabled {
224  cursor: default;
225}
226
227/* mark */
228.control__indicator:after {
229  position: absolute;
230  display: none;
231  content: '';
232}
233
234/* Show mark */
235.control-radio input:checked ~ .control__indicator:after {
236  display: block;
237}
238
239/* Disabled tick colour */
240.control-radio input:disabled ~ .control__indicator:after{
241  border-color: $primary-light;
242  color: $primary-light;
243}
244
245/* Radio button inner circle */
246.control-radio .control__indicator:after {
247  top: 4px;
248  left: 4px;
249  width: 18px;
250  height: 18px;
251  border-radius: 50%;
252  background: $primary-accent;
253}
254
255.control-radio:hover .control__indicator:after {
256  display: block;
257}
258
259/* Disabled circle colour */
260.control-radio input:disabled ~ .control__indicator:after {
261  background: $base-02--03;
262  width: 20px;
263  height: 20px;
264}