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}