diff --git a/hypha/static_src/src/sass/public/components/_select2.scss b/hypha/static_src/src/sass/public/components/_select2.scss index 54147955936b9ec77cc96fd6bab97db832395664..024fda44cd97191d2fd68755a487f7a68792a76c 100644 --- a/hypha/static_src/src/sass/public/components/_select2.scss +++ b/hypha/static_src/src/sass/public/components/_select2.scss @@ -1,3 +1,5 @@ +$dropdown-height: 45px; + .select2 { &-container { z-index: 99995; // to override any modals @@ -8,7 +10,7 @@ width: 100% !important; // sass-lint:disable-line no-important .select2-selection--single { - height: 55px; + height: $dropdown-height; border: 1px solid $color--mid-grey; border-radius: 0; @@ -18,27 +20,22 @@ } .select2-selection__clear { - position: absolute; - right: 35px; display: none; - float: none; - - @include media-query(small-tablet) { - display: block; - } } .select2-selection__rendered { padding-left: 15px; - line-height: 55px; + padding-right: 30px; + line-height: $dropdown-height; } .select2-selection__arrow { right: 15px; - height: 53px; + height: $dropdown-height; pointer-events: none; background: url('./../../images/dropdown.svg') transparent no-repeat 95% center; background-size: 8px; + width: 8px; b[role='presentation'] { display: none; @@ -71,30 +68,24 @@ } .select2-results__option { - padding: 0; - - &[aria-selected='true'] { - .wrap { - &::before { - background: url('./../../images/tick.svg') $color--dark-blue center no-repeat; - background-size: 12px; - border: 1px solid $color--dark-blue; - content: ''; - } - } + display: flex; + align-items: center; + padding: 6px; + + &::before { + min-width: 20px; + height: 20px; + margin-right: 10px; + background: $color--white; + border: 1px solid $color--mid-grey; + content: ''; } - .wrap { - display: flex; - align-items: center; - padding: 6px; - + &[aria-selected='true'] { &::before { - width: 20px; - height: 20px; - margin-right: 10px; - background: $color--white; - border: 1px solid $color--mid-grey; + background: url('./../../images/tick.svg') $color--dark-blue center no-repeat; + background-size: 12px; + border: 1px solid $color--dark-blue; content: ''; } }