wdt-combobox
Version:
53 lines (51 loc) • 1.33 kB
CSS
:host .selected-items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 0;
margin-top: 0;
margin-bottom: 5px; }
:host .selected-items li {
color: #9e9e9e;
border-radius: 4px;
margin: 3px;
padding: 5px;
font-size: 12px;
background-color: #fafafa;
box-shadow: 0 0 1px #cfcfcf; }
:host .selected-items li a {
margin: 0 5px;
opacity: .6; }
:host .selected-items li a:hover {
opacity: 1; }
:host .items input {
display: none; }
:host .items label {
position: relative;
padding-right: 40px ; }
:host .items label:before, :host .items label:after {
content: '';
position: absolute;
top: 50%;
border-style: solid; }
:host .items label:before {
width: 18px;
height: 18px;
right: 10px;
border-width: 1px;
border-color: #e3e3e3;
transform: translateY(-50%); }
:host .items label:after {
width: 5px;
height: 12px;
right: 22px;
opacity: 0;
border-width: 0 2px 2px 0;
border-color: #2bb391;
transform: rotate(35deg) translateY(calc(-50% - 3px));
transition: opacity 300ms ease,transform 300ms ease; }
:host .items input:checked + label:after {
opacity: 1; }
/*# sourceMappingURL=multiple.component.css.map */