@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
62 lines (51 loc) • 1.15 kB
text/less
.esl-select {
display: inline-block;
position: relative;
min-width: 150px;
max-width: 100%;
& [esl-select-target] {
/* Visually hidden */
position: absolute;
border: 0;
padding: 0;
overflow: hidden;
opacity: 0;
clip: rect(0, 0, 0, 0);
width: 100%;
height: 100%;
pointer-events: none;
}
&[disabled] {
pointer-events: none;
color: @esl-select-disabled;
.esl-select-text,
.esl-select-renderer::after {
color: @esl-select-disabled;
}
.esl-select-clear-btn {
display: none;
}
}
.esl-select-renderer::after {
content: '\2BC6';
display: inline-block;
flex: 0 0 auto;
width: 20px;
height: 27px;
z-index: 1;
padding: 0;
pointer-events: none;
color: @esl-select-primary;
vertical-align: middle;
text-align: center;
font-weight: bold ;
transition: transform 0.2s linear;
transform-origin: center center;
}
&[open] .esl-select-renderer::after {
transform: rotateX(180deg);
}
[esl-select-target]:invalid + .esl-select-renderer {
border: @esl-select-invlalid-border;
}
}