1// Drop downs
2.dropdown__button {
3  position: relative;
4  padding: .5em .8em;
5  margin-top: -10px;
6  border: 1px solid $lightgrey;
7  &.active,
8  &:hover {
9    background: $dropdown__focus-bg;
10  }
11  &:after {
12    content: '\25B8';
13    display: inline-block;
14    margin-left: 5px;
15    font-size: .8em;
16    transform: rotate(90deg);
17    color: $lightbg__primary;
18  }
19}
20
21.dropdown__wrapper {
22  position: relative;
23  display: inline-block;
24}
25
26.dropdown__list {
27  position: absolute;
28  z-index: 100;
29  right: 0;
30  top: 100%;
31  background: $white;
32  padding: 0;
33  width: 100%;
34  border: 1px solid $lightbg__grey;
35  margin-top: -5px;
36  box-shadow: 0 4px 10px -2px $lightgrey;
37  li {
38    list-style-type: none;
39  }
40  button {
41    padding: 1em 1em 1em 1.8em;
42    text-align: left;
43    width: 100%;
44    &:hover {
45      background: $dropdown__focus-bg;
46    }
47  }
48}
49
50.dropdown__list {
51  min-width: 230px;
52}
53.dropdown__list.multi-select {
54  > .active {
55    position: relative;
56    &:before {
57      content: '\2713';
58      position: absolute;
59      display: inline-block;
60      top: 50%;
61      left: .6em;
62      color: $lightbg__primary;
63      transform: translateY(-50%);
64    }
65  }
66}
67
68.dropdown__date {
69  width: 430px;
70  .row {
71    padding: 1em;
72    margin-right: 0;
73  }
74  input {
75    max-width: 170px;
76    color: $darkgrey;
77  }
78}
79
80
81
82// Checkbox
83
84.control-check {
85  font-size: 18px;
86  position: relative;
87  display: inline-block;
88  margin-bottom: 15px;
89  padding-left: 1em;
90  padding-top: 7px;
91  cursor: pointer;
92  line-height: .5;
93}
94
95.control-check input {
96  position: absolute;
97  z-index: -1;
98  opacity: 0;
99}
100
101.control__indicator {
102  position: absolute;
103  top: 2px;
104  left: 0;
105  width: 20px;
106  height: 20px;
107  background: $white;
108  border: 1px solid $lightgrey;
109}
110
111.control--radio .control__indicator {
112  border-radius: 50%;
113}
114
115/* Hover and focus states */
116.control-check:hover input ~ .control__indicator,
117.control-check input:focus ~ .control__indicator {
118  border: 1px solid $primebtn__bg;
119}
120
121/* Checked state */
122.control-check input:checked ~ .control__indicator {
123  background: $primebtn__bg;
124
125}
126
127/* Hover state whilst checked */
128.control-check:hover input:not([disabled]):checked ~ .control__indicator {
129  background: $primebtn__bg;
130}
131
132/* Disabled state */
133.control-check input:disabled ~ .control__indicator {
134  pointer-events: none;
135  opacity: .6;
136  background: #ccc;
137  border: 1px solid $white;
138}
139
140.control-check:hover > input:disabled ~ .control__indicator {
141  outline: 0;
142}
143
144/* Check mark */
145.control__indicator:after,
146.control-check input:not(:checked){
147  position: absolute;
148  display: none;
149  content: '';
150}
151
152/* Show check mark */
153.control-check input:checked ~ .control__indicator:after {
154  display: block;
155}
156
157/* Checkbox tick */
158.control-check .control__indicator:after {
159  top: 3px;
160  left: 7px;
161  width: 5px;
162  height: 10px;
163  transform: rotate(45deg);
164  border: solid $white;
165  border-width: 0 2px 2px 0;
166}
167
168/* Disabled tick colour */
169.control-check input:disabled ~ .control__indicator:after {
170  border-color: $white;
171  color: $white;
172}