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