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
82.control-check,
83.control-radio {
84  position: relative;
85  display: inline-block;
86  margin-bottom: 15px;
87  padding-top: 7px;
88  cursor: pointer;
89  line-height: initial;
90}
91
92.control-check input {
93  position: absolute;
94  z-index: -1;
95  opacity: 0;
96}
97
98.control__indicator {
99  position: absolute;
100  top: 2px;
101  left: 0;
102  width: 20px;
103  height: 20px;
104  background: $primary-light;
105  border: 1px solid $border-color-02;
106  font-size: 0;
107}
108
109/* Hover and focus states */
110.control-check:hover input ~ .control__indicator,
111.control-check input:focus ~ .control__indicator {
112  border: 1px solid $primary-accent;
113  background-color: $primary-accent;
114}
115
116/* Checked state */
117.control-check input:checked ~ .control__indicator {
118  background: $primary-accent;
119}
120
121/* Hover state whilst checked */
122.control-check:hover input:not([disabled]):checked ~ .control__indicator {
123  background: $primary-accent;
124}
125
126/* Disabled state */
127.control-check input:disabled ~ .control__indicator {
128  pointer-events: none;
129  opacity: .6;
130  background: $base-02--04;
131  border: 1px solid $primary-light;
132}
133
134.control-check:hover > input:disabled ~ .control__indicator {
135  outline: 0;
136}
137
138/* Check mark */
139.control__indicator:after,
140.control-check input:not(:checked){
141  position: absolute;
142  display: none;
143  content: '';
144}
145
146/* Show check mark */
147.control-check input:checked ~ .control__indicator:after {
148  display: block;
149}
150
151/* Checkbox tick */
152.control-check .control__indicator:after {
153  top: 3px;
154  left: 7px;
155  width: 5px;
156  height: 10px;
157  transform: rotate(45deg);
158  border: solid $primary-light;
159  border-width: 0 2px 2px 0;
160}
161
162/* Disabled tick colour */
163.control-check input:disabled ~ .control__indicator:after {
164  border-color: $primary-light;
165  color: $primary-light;
166}
167
168// Radio Buttons
169.control-radio {
170  padding-left: 3em;
171}
172.control-radio.disabled:hover {
173  cursor: default;
174}
175.control-radio .control__indicator {
176  position: absolute;
177  top: 2px;
178  left: 0;
179  width: 30px;
180  height: 30px;
181  background: $primary-light;
182  border: 2px solid $border-color-02;
183}
184.control-radio input{
185  position: absolute;
186  z-index: -1;
187  opacity: 0;
188}
189
190.control-radio .control__indicator {
191  border-radius: 50%;
192}
193
194/* Hover and focus states */
195.control-radio input:focus ~ .control__indicator {
196  background: $primary-accent;
197  outline: 1px solid $primary-accent;
198  outline-offset: 3px;
199}
200
201.control-radio input:checked ~ .control__indicator {
202  background: $background-02;
203  border: 2px solid $primary-accent;
204}
205
206/* Disabled state */
207.control-radio input:disabled ~ .control__indicator{
208  pointer-events: none;
209  opacity: .6;
210  background: $base-02--04;
211  border: 1px solid $border-color-01;
212}
213
214.control-radio:hover > input:disabled ~ .control__indicator{
215  outline: 0;
216}
217
218.control-radio:hover input:disabled {
219  cursor: default;
220}
221
222/* mark */
223.control__indicator:after {
224  position: absolute;
225  display: none;
226  content: '';
227}
228
229/* Show mark */
230.control-radio input:checked ~ .control__indicator:after {
231  display: block;
232}
233
234/* Disabled tick colour */
235.control-radio input:disabled ~ .control__indicator:after{
236  border-color: $primary-light;
237  color: $primary-light;
238}
239
240/* Radio button inner circle */
241.control-radio .control__indicator:after {
242  top: 4px;
243  left: 4px;
244  width: 18px;
245  height: 18px;
246  border-radius: 50%;
247  background: $primary-accent;
248}
249
250.control-radio:hover .control__indicator:after {
251  display: block;
252}
253
254/* Disabled circle colour */
255.control-radio input:disabled ~ .control__indicator:after {
256  background: $base-02--03;
257  width: 20px;
258  height: 20px;
259}