select.uniformSelect{ display:none; } .uniformSelect-edit{ @include text-overflow; position:relative; text-align: left; padding-right: 1.8em; &.active{ z-index: 10000; .uniformSelect-edit-icon{ svg{ transform: rotate(180deg); } } } .uniformSelect-edit-icon{ font-size:2em; @include position-v-center(); right:0; z-index:0; line-height: 0; svg{ fill: color('gray'); transition: transform 0.2s; } } &.-invert{ background: color('gray'); color: white; border-color: color('gray-dark'); .uniformSelect-edit-icon{ svg { fill: white; } } } } .uniformSelect-options{ @include text-overflow; position: absolute; background: white; z-index: 9999; box-shadow: 0 0 15px 1px rgba(black, 0.2), 0 0 2px 1px rgba(black, 0.1) ; button{ appearance: none; outline: none; border: none; background: none; width: 100%; padding: 0.5em; &:hover{ background: lighten(color('blue'), 45); } } .uniformSelect-options-actions{ border-top: 1px solid color('gray-light'); border-bottom: 1px solid color('gray-light'); background: color('background'); padding: 0.5em; &:empty{ display:none; } } .uniformSelect-show-all { color: color('blue'); background: none; &:hover{ background: none; } } .uniformSelect-done{ border-radius: 0.25em; border: 1px solid color('gray-light'); background: white; } } .uniformSelect-option{ position:relative; cursor: pointer; &.active{ box-shadow:none; color: color('green-dark'); padding-left: 2.5em !important; font-weight: bold; } .uniformSelect-option-icon{ fill: color('green'); position: absolute; top: 0.2em; left: 0.2em; font-size: 1.5em; } } @include size-rule('sm'){ .uniformSelect-options{ top: 0 !important; left: 0 !important; min-height: 100vh; width: 100vw; padding: 1em; button{ margin-bottom: 0.5em; border: 1px solid lighten(color('gray'), 40); &.uniformSelect-done{ margin-bottom: 0; } } .uniformSelect-options-actions{ margin: 0 -1em; } } body.uniformModal-hideBody{ & > *:not(.uniformSelect-options):not(.uniformDropdown-dropdown) { position: fixed; } } }