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