13a0d471cSMichael Davis// Drop downs 23a0d471cSMichael Davis.dropdown__button { 33a0d471cSMichael Davis position: relative; 4de382089SYoshie Muranaka padding-top: .5em; 5de382089SYoshie Muranaka padding-bottom: .5em; 6de382089SYoshie Muranaka padding-left: .5em; 7de382089SYoshie Muranaka padding-right: 1.5em; 82d289422SMichael Davis margin-top: 0; 96f7ec80eSYoshie Muranaka border: 1px solid $border-color-02; 1051946552SMichael Davis min-width: 70px; 1151946552SMichael Davis font-weight: 400; 12de382089SYoshie Muranaka @include bgImage__arrowDown-primary; 13de382089SYoshie Muranaka &[disabled] { 14de382089SYoshie Muranaka @include bgImage__arrowDown-disabled; 153a0d471cSMichael Davis } 163a0d471cSMichael Davis} 173a0d471cSMichael Davis 183a0d471cSMichael Davis.dropdown__wrapper { 193a0d471cSMichael Davis position: relative; 203a0d471cSMichael Davis display: inline-block; 213a0d471cSMichael Davis} 223a0d471cSMichael Davis 233a0d471cSMichael Davis.dropdown__list { 243a0d471cSMichael Davis position: absolute; 253a0d471cSMichael Davis z-index: 100; 263a0d471cSMichael Davis right: 0; 273a0d471cSMichael Davis top: 100%; 286f7ec80eSYoshie Muranaka background: $primary-light; 293a0d471cSMichael Davis padding: 0; 303a0d471cSMichael Davis width: 100%; 316f7ec80eSYoshie Muranaka border: 1px solid $border-color-02; 323a0d471cSMichael Davis margin-top: -5px; 336f7ec80eSYoshie Muranaka box-shadow: 0 4px 10px -2px $base-02--02; 343a0d471cSMichael Davis li { 353a0d471cSMichael Davis list-style-type: none; 363a0d471cSMichael Davis } 373a0d471cSMichael Davis button { 383a0d471cSMichael Davis padding: 1em 1em 1em 1.8em; 393a0d471cSMichael Davis text-align: left; 403a0d471cSMichael Davis width: 100%; 4151946552SMichael Davis font-weight: 400; 423a0d471cSMichael Davis &:hover { 436f7ec80eSYoshie Muranaka background: $background-02; 443a0d471cSMichael Davis } 453a0d471cSMichael Davis } 463a0d471cSMichael Davis} 473a0d471cSMichael Davis 483a0d471cSMichael Davis.dropdown__list { 493a0d471cSMichael Davis min-width: 230px; 503a0d471cSMichael Davis} 513a0d471cSMichael Davis.dropdown__list.multi-select { 523a0d471cSMichael Davis > .active { 533a0d471cSMichael Davis position: relative; 543a0d471cSMichael Davis &:before { 553a0d471cSMichael Davis content: '\2713'; 563a0d471cSMichael Davis position: absolute; 573a0d471cSMichael Davis display: inline-block; 583a0d471cSMichael Davis top: 50%; 593a0d471cSMichael Davis left: .6em; 606f7ec80eSYoshie Muranaka color: $primary-accent; 613a0d471cSMichael Davis transform: translateY(-50%); 623a0d471cSMichael Davis } 633a0d471cSMichael Davis } 643a0d471cSMichael Davis} 653a0d471cSMichael Davis 663a0d471cSMichael Davis.dropdown__date { 673a0d471cSMichael Davis width: 430px; 683a0d471cSMichael Davis .row { 693a0d471cSMichael Davis padding: 1em; 703a0d471cSMichael Davis margin-right: 0; 713a0d471cSMichael Davis } 723a0d471cSMichael Davis input { 733a0d471cSMichael Davis max-width: 170px; 746f7ec80eSYoshie Muranaka color: $text-01; 753a0d471cSMichael Davis } 763a0d471cSMichael Davis} 773a0d471cSMichael Davis 783a0d471cSMichael Davis 793a0d471cSMichael Davis 803a0d471cSMichael Davis// Checkbox 8151946552SMichael Davis.control-check, 8251946552SMichael Davis.control-radio { 833a0d471cSMichael Davis position: relative; 843a0d471cSMichael Davis display: inline-block; 853a0d471cSMichael Davis margin-bottom: 15px; 863a0d471cSMichael Davis padding-top: 7px; 873a0d471cSMichael Davis cursor: pointer; 8851946552SMichael Davis line-height: initial; 893a0d471cSMichael Davis} 903a0d471cSMichael Davis 913a0d471cSMichael Davis.control-check input { 923a0d471cSMichael Davis position: absolute; 933a0d471cSMichael Davis z-index: -1; 943a0d471cSMichael Davis opacity: 0; 953a0d471cSMichael Davis} 963a0d471cSMichael Davis 973a0d471cSMichael Davis.control__indicator { 983a0d471cSMichael Davis position: absolute; 993a0d471cSMichael Davis top: 2px; 1003a0d471cSMichael Davis left: 0; 1013a0d471cSMichael Davis width: 20px; 1023a0d471cSMichael Davis height: 20px; 1036f7ec80eSYoshie Muranaka background: $primary-light; 1046f7ec80eSYoshie Muranaka border: 1px solid $border-color-02; 105b8a41c18SMichael Davis font-size: 0; 1063a0d471cSMichael Davis} 1073a0d471cSMichael Davis 108*5e258e43Sbeccabroek.control__label { 109*5e258e43Sbeccabroek display: inline-block; 110*5e258e43Sbeccabroek margin-left: 26px; 111*5e258e43Sbeccabroek user-select: none; 112*5e258e43Sbeccabroek} 113*5e258e43Sbeccabroek 1143a0d471cSMichael Davis/* Hover and focus states */ 1153a0d471cSMichael Davis.control-check:hover input ~ .control__indicator, 1163a0d471cSMichael Davis.control-check input:focus ~ .control__indicator { 1176f7ec80eSYoshie Muranaka border: 1px solid $primary-accent; 1186f7ec80eSYoshie Muranaka background-color: $primary-accent; 1193a0d471cSMichael Davis} 1203a0d471cSMichael Davis 1213a0d471cSMichael Davis/* Checked state */ 1223a0d471cSMichael Davis.control-check input:checked ~ .control__indicator { 1236f7ec80eSYoshie Muranaka background: $primary-accent; 1243a0d471cSMichael Davis} 1253a0d471cSMichael Davis 1263a0d471cSMichael Davis/* Hover state whilst checked */ 1273a0d471cSMichael Davis.control-check:hover input:not([disabled]):checked ~ .control__indicator { 1286f7ec80eSYoshie Muranaka background: $primary-accent; 1293a0d471cSMichael Davis} 1303a0d471cSMichael Davis 1313a0d471cSMichael Davis/* Disabled state */ 1323a0d471cSMichael Davis.control-check input:disabled ~ .control__indicator { 1333a0d471cSMichael Davis pointer-events: none; 1343a0d471cSMichael Davis opacity: .6; 1356f7ec80eSYoshie Muranaka background: $base-02--04; 1366f7ec80eSYoshie Muranaka border: 1px solid $primary-light; 1373a0d471cSMichael Davis} 1383a0d471cSMichael Davis 1393a0d471cSMichael Davis.control-check:hover > input:disabled ~ .control__indicator { 1403a0d471cSMichael Davis outline: 0; 1413a0d471cSMichael Davis} 1423a0d471cSMichael Davis 1433a0d471cSMichael Davis/* Check mark */ 1443a0d471cSMichael Davis.control__indicator:after, 1453a0d471cSMichael Davis.control-check input:not(:checked){ 1463a0d471cSMichael Davis content: ''; 1473a0d471cSMichael Davis} 1483a0d471cSMichael Davis 1493a0d471cSMichael Davis/* Show check mark */ 1503a0d471cSMichael Davis.control-check input:checked ~ .control__indicator:after { 1513a0d471cSMichael Davis display: block; 1523a0d471cSMichael Davis} 1533a0d471cSMichael Davis 1543a0d471cSMichael Davis/* Checkbox tick */ 1553a0d471cSMichael Davis.control-check .control__indicator:after { 1563a0d471cSMichael Davis top: 3px; 1573a0d471cSMichael Davis left: 7px; 1583a0d471cSMichael Davis width: 5px; 1593a0d471cSMichael Davis height: 10px; 1603a0d471cSMichael Davis transform: rotate(45deg); 1616f7ec80eSYoshie Muranaka border: solid $primary-light; 1623a0d471cSMichael Davis border-width: 0 2px 2px 0; 1633a0d471cSMichael Davis} 1643a0d471cSMichael Davis 1653a0d471cSMichael Davis/* Disabled tick colour */ 1663a0d471cSMichael Davis.control-check input:disabled ~ .control__indicator:after { 1676f7ec80eSYoshie Muranaka border-color: $primary-light; 1686f7ec80eSYoshie Muranaka color: $primary-light; 1693a0d471cSMichael Davis} 17051946552SMichael Davis 17151946552SMichael Davis// Radio Buttons 17251946552SMichael Davis.control-radio { 17351946552SMichael Davis padding-left: 3em; 17451946552SMichael Davis} 17551946552SMichael Davis.control-radio.disabled:hover { 17651946552SMichael Davis cursor: default; 17751946552SMichael Davis} 17851946552SMichael Davis.control-radio .control__indicator { 17951946552SMichael Davis position: absolute; 18051946552SMichael Davis top: 2px; 18151946552SMichael Davis left: 0; 18251946552SMichael Davis width: 30px; 18351946552SMichael Davis height: 30px; 1846f7ec80eSYoshie Muranaka background: $primary-light; 1856f7ec80eSYoshie Muranaka border: 2px solid $border-color-02; 18651946552SMichael Davis} 18751946552SMichael Davis.control-radio input{ 18851946552SMichael Davis position: absolute; 18951946552SMichael Davis z-index: -1; 19051946552SMichael Davis opacity: 0; 19151946552SMichael Davis} 19251946552SMichael Davis 19351946552SMichael Davis.control-radio .control__indicator { 19451946552SMichael Davis border-radius: 50%; 19551946552SMichael Davis} 19651946552SMichael Davis 19751946552SMichael Davis/* Hover and focus states */ 19851946552SMichael Davis.control-radio input:focus ~ .control__indicator { 1996f7ec80eSYoshie Muranaka background: $primary-accent; 2006f7ec80eSYoshie Muranaka outline: 1px solid $primary-accent; 20151946552SMichael Davis outline-offset: 3px; 20251946552SMichael Davis} 20351946552SMichael Davis 20451946552SMichael Davis.control-radio input:checked ~ .control__indicator { 2056f7ec80eSYoshie Muranaka background: $background-02; 2066f7ec80eSYoshie Muranaka border: 2px solid $primary-accent; 20751946552SMichael Davis} 20851946552SMichael Davis 20951946552SMichael Davis/* Disabled state */ 21051946552SMichael Davis.control-radio input:disabled ~ .control__indicator{ 21151946552SMichael Davis pointer-events: none; 21251946552SMichael Davis opacity: .6; 2136f7ec80eSYoshie Muranaka background: $base-02--04; 2146f7ec80eSYoshie Muranaka border: 1px solid $border-color-01; 21551946552SMichael Davis} 21651946552SMichael Davis 21751946552SMichael Davis.control-radio:hover > input:disabled ~ .control__indicator{ 21851946552SMichael Davis outline: 0; 21951946552SMichael Davis} 22051946552SMichael Davis 22151946552SMichael Davis.control-radio:hover input:disabled { 22251946552SMichael Davis cursor: default; 22351946552SMichael Davis} 22451946552SMichael Davis 22551946552SMichael Davis/* mark */ 22651946552SMichael Davis.control__indicator:after { 22751946552SMichael Davis position: absolute; 22851946552SMichael Davis display: none; 22951946552SMichael Davis content: ''; 23051946552SMichael Davis} 23151946552SMichael Davis 23251946552SMichael Davis/* Show mark */ 23351946552SMichael Davis.control-radio input:checked ~ .control__indicator:after { 23451946552SMichael Davis display: block; 23551946552SMichael Davis} 23651946552SMichael Davis 23751946552SMichael Davis/* Disabled tick colour */ 23851946552SMichael Davis.control-radio input:disabled ~ .control__indicator:after{ 2396f7ec80eSYoshie Muranaka border-color: $primary-light; 2406f7ec80eSYoshie Muranaka color: $primary-light; 24151946552SMichael Davis} 24251946552SMichael Davis 24351946552SMichael Davis/* Radio button inner circle */ 24451946552SMichael Davis.control-radio .control__indicator:after { 24551946552SMichael Davis top: 4px; 24651946552SMichael Davis left: 4px; 24751946552SMichael Davis width: 18px; 24851946552SMichael Davis height: 18px; 24951946552SMichael Davis border-radius: 50%; 2506f7ec80eSYoshie Muranaka background: $primary-accent; 25151946552SMichael Davis} 25251946552SMichael Davis 25351946552SMichael Davis.control-radio:hover .control__indicator:after { 25451946552SMichael Davis display: block; 25551946552SMichael Davis} 25651946552SMichael Davis 25751946552SMichael Davis/* Disabled circle colour */ 25851946552SMichael Davis.control-radio input:disabled ~ .control__indicator:after { 2596f7ec80eSYoshie Muranaka background: $base-02--03; 26051946552SMichael Davis width: 20px; 26151946552SMichael Davis height: 20px; 26251946552SMichael Davis}