Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
39 lines (29 sloc) 1.15 KB
// Select elements
.select {
appearance: none; // reset standard
-moz-appearance: none; // reset firefox
cursor: pointer;
//background-image: url('#{$svg-triangle}');
$tri-color: 'var(--color, var(--color-main-5))';
$tri-size: 14px;
$tri-half: $tri-size/4;
@mixin triangle($bg-color) {
background-image:
linear-gradient( 45deg, transparent 50%, #{$bg-color} 50%),
linear-gradient(-45deg, transparent 50%, #{$bg-color} 50%),
linear-gradient(to top, #{$tri-color}, #{$tri-color});
}
@include triangle('var(--color-bg-1, var(--color-prime-1))');
&:hover { @include triangle('var(--color-bg-2, var(--color-prime-2))') }
background-size: $tri-size $tri-size;
background-repeat: no-repeat;
background-position: right .8rem top calc(50% - #{$tri-half}); // hide the arrow below firefox UI
position: relative;
&:disabled {
background-size: 100% 100%; // reset
background-position: left top; // reset
}
optgroup { color: var(--colored-5, var(--color-main-5)) }
option:disabled { color: var(--color-main-3) } // wishful thinking
&:-ms-expand { display: none } // IE reset
}