UNPKG

@exadel/esl

Version:

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

105 lines (104 loc) 2.1 kB
esl-select-item { display: block; cursor: pointer; position: relative; padding: 15px 15px 15px 45px; line-height: 20px; vertical-align: middle; } esl-select-item::before { content: ''; cursor: pointer; position: absolute; top: 15px; left: 15px; width: 20px; height: 20px; border: 2px solid #0097e7; border-radius: 4px; background-color: #fff; } esl-select-item::after { content: ''; cursor: pointer; position: absolute; top: 20px; left: 19px; width: 12px; height: 6px; border: 2px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg); opacity: 0; transition: opacity 0.4s ease-in; } esl-select-item[selected]::before { background-color: #0097e7; } esl-select-item[selected]::after { opacity: 1; } esl-select-item.last-in-group:not(:last-of-type) { border-bottom: 1px solid #ccc; } esl-select-item[disabled], [disabled] esl-select-item { pointer-events: none; color: #aaa; } esl-select-item[disabled]::before, [disabled] esl-select-item::before { border-color: #aaa; } esl-select-item[disabled][selected]::before, [disabled] esl-select-item[selected]::before { background-color: #aaa; } .esl-select-list { display: flex; flex-flow: column; position: relative; overflow: hidden; background: #fff; border: 1px solid #ccc; min-height: 50px; height: auto; max-height: 400px; } .esl-select-list > [esl-select-target] { /* Visually hidden */ position: absolute; width: 0; height: 0; border: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .esl-select-list esl-scrollbar { top: 5px; bottom: 5px; right: 10px; } .esl-select-list[multiple] esl-scrollbar { top: 60px; } .esl-select-list .esl-select-list-container { flex: 1 1 auto; height: 100%; margin-right: 16px; } .esl-select-list .esl-select-item.esl-select-all-item { flex: 0 0 auto; border-bottom: 1px solid #ccc; } .esl-select-list:not([multiple]) .esl-select-all-item { display: none; } /* stylelint-disable */ _:-ms-fullscreen, :root .esl-select-list { height: 400px; } /* stylelint-enable */