opal-components
Version:
[Rionite](https://github.com/Riim/Rionite) component set.
63 lines (55 loc) • 1.11 kB
CSS
@component OpalAutosuggest {
position: relative;
display: inline-block;
vertical-align: middle;
@el text-input {
display: block;
}
@el text-input-control-icon {
}
@el menu {
}
@el list {
}
@el list-item {
position: relative;
padding: 7px 22px;
background: #fff;
color: #000;
text-align: left;
text-shadow: none;
white-space: nowrap;
font: 16px/24px Verdana, Geneva, sans-serif;
font-weight: normal;
cursor: pointer;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
&:hover,
&[focused] {
background: hsl(0,0%,90%);
}
&:active {
background: hsl(0,0%,80%);
}
}
@el nothing-found-message {
display: none;
padding: 10px;
text-align: center;
white-space: nowrap;
opacity: .6;
}
@el nothing-found-message {
@mod shown {
display: block;
}
}
/* Combinations */
.OpalTextInputValidator & {
display: block;
}
}