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  content: '';
147}
148
149/* Show check mark */
150.control-check input:checked ~ .control__indicator:after {
151  display: block;
152}
153
154/* Checkbox tick */
155.control-check .control__indicator:after {
156  top: 3px;
157  left: 7px;
158  width: 5px;
159  height: 10px;
160  transform: rotate(45deg);
161  border: solid $primary-light;
162  border-width: 0 2px 2px 0;
163}
164
165/* Disabled tick colour */
166.control-check input:disabled ~ .control__indicator:after {
167  border-color: $primary-light;
168  color: $primary-light;
169}
170
171// Radio Buttons
172.control-radio {
173  padding-left: 3em;
174}
175.control-radio.disabled:hover {
176  cursor: default;
177}
178.control-radio .control__indicator {
179  position: absolute;
180  top: 2px;
181  left: 0;
182  width: 30px;
183  height: 30px;
184  background: $primary-light;
185  border: 2px solid $border-color-02;
186}
187.control-radio input{
188  position: absolute;
189  z-index: -1;
190  opacity: 0;
191}
192
193.control-radio .control__indicator {
194  border-radius: 50%;
195}
196
197/* Hover and focus states */
198.control-radio input:focus ~ .control__indicator {
199  background: $primary-accent;
200  outline: 1px solid $primary-accent;
201  outline-offset: 3px;
202}
203
204.control-radio input:checked ~ .control__indicator {
205  background: $background-02;
206  border: 2px solid $primary-accent;
207}
208
209/* Disabled state */
210.control-radio input:disabled ~ .control__indicator{
211  pointer-events: none;
212  opacity: .6;
213  background: $base-02--04;
214  border: 1px solid $border-color-01;
215}
216
217.control-radio:hover > input:disabled ~ .control__indicator{
218  outline: 0;
219}
220
221.control-radio:hover input:disabled {
222  cursor: default;
223}
224
225/* mark */
226.control__indicator:after {
227  position: absolute;
228  display: none;
229  content: '';
230}
231
232/* Show mark */
233.control-radio input:checked ~ .control__indicator:after {
234  display: block;
235}
236
237/* Disabled tick colour */
238.control-radio input:disabled ~ .control__indicator:after{
239  border-color: $primary-light;
240  color: $primary-light;
241}
242
243/* Radio button inner circle */
244.control-radio .control__indicator:after {
245  top: 4px;
246  left: 4px;
247  width: 18px;
248  height: 18px;
249  border-radius: 50%;
250  background: $primary-accent;
251}
252
253.control-radio:hover .control__indicator:after {
254  display: block;
255}
256
257/* Disabled circle colour */
258.control-radio input:disabled ~ .control__indicator:after {
259  background: $base-02--03;
260  width: 20px;
261  height: 20px;
262}