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