1// Drop downs
2.dropdown__button {
3  position: relative;
4  padding: .5em .8em;
5  margin-top: -10px;
6  border: 1px solid $darkgrey;
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 $lightgrey;
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}
116
117/* Hover and focus states */
118.control-check:hover input ~ .control__indicator,
119.control-check input:focus ~ .control__indicator {
120  border: 1px solid $primebtn__bg;
121  background-color: $primebtn__bg;
122}
123
124/* Checked state */
125.control-check input:checked ~ .control__indicator {
126  background: $primebtn__bg;
127
128}
129
130/* Hover state whilst checked */
131.control-check:hover input:not([disabled]):checked ~ .control__indicator {
132  background: $primebtn__bg;
133}
134
135/* Disabled state */
136.control-check input:disabled ~ .control__indicator {
137  pointer-events: none;
138  opacity: .6;
139  background: #ccc;
140  border: 1px solid $white;
141}
142
143.control-check:hover > input:disabled ~ .control__indicator {
144  outline: 0;
145}
146
147/* Check mark */
148.control__indicator:after,
149.control-check input:not(:checked){
150  position: absolute;
151  display: none;
152  content: '';
153}
154
155/* Show check mark */
156.control-check input:checked ~ .control__indicator:after {
157  display: block;
158}
159
160/* Checkbox tick */
161.control-check .control__indicator:after {
162  top: 3px;
163  left: 7px;
164  width: 5px;
165  height: 10px;
166  transform: rotate(45deg);
167  border: solid $white;
168  border-width: 0 2px 2px 0;
169}
170
171/* Disabled tick colour */
172.control-check input:disabled ~ .control__indicator:after {
173  border-color: $white;
174  color: $white;
175}
176
177// Radio Buttons
178.control-radio {
179  padding-left: 3em;
180}
181.control-radio.disabled:hover {
182  cursor: default;
183}
184.control-radio .control__indicator {
185  position: absolute;
186  top: 2px;
187  left: 0;
188  width: 30px;
189  height: 30px;
190  background: $white;
191  border: 2px solid $darkgrey;
192}
193.control-radio input{
194  position: absolute;
195  z-index: -1;
196  opacity: 0;
197}
198
199.control-radio .control__indicator {
200  border-radius: 50%;
201}
202
203/* Hover and focus states */
204.control-radio input:focus ~ .control__indicator {
205  background: $primebtn__bg;
206  outline: 1px solid $primebtn__bg;
207  outline-offset: 3px;
208}
209
210.control-radio input:checked ~ .control__indicator {
211  background: $lightbg__accent;
212  border: 2px solid $primebtn__bg;
213}
214
215/* Disabled state */
216.control-radio input:disabled ~ .control__indicator{
217  pointer-events: none;
218  opacity: .6;
219  background: #ccc;
220  border: 1px solid $medgrey;
221}
222
223.control-radio:hover > input:disabled ~ .control__indicator{
224  outline: 0;
225}
226
227.control-radio:hover input:disabled {
228  cursor: default;
229}
230
231/* mark */
232.control__indicator:after {
233  position: absolute;
234  display: none;
235  content: '';
236}
237
238/* Show mark */
239.control-radio input:checked ~ .control__indicator:after {
240  display: block;
241}
242
243/* Disabled tick colour */
244.control-radio input:disabled ~ .control__indicator:after{
245  border-color: $white;
246  color: $white;
247}
248
249/* Radio button inner circle */
250.control-radio .control__indicator:after {
251  top: 4px;
252  left: 4px;
253  width: 18px;
254  height: 18px;
255  border-radius: 50%;
256  background: $primebtn__bg;
257}
258
259.control-radio:hover .control__indicator:after {
260  display: block;
261}
262
263/* Disabled circle colour */
264.control-radio input:disabled ~ .control__indicator:after {
265  background: #7b7b7b;
266  width: 20px;
267  height: 20px;
268}