glass-app-manager
Version:
Informatica's Glass Framework CLI for bootstrapping
86 lines (83 loc) • 2.19 kB
text/stylus
@require '../../../node_modules/@informatica/archipelago-icons/dist/archipelago_icons.css';
.dropdown {
display: flex;
flex-wrap: wrap;
min-height: 24px;
overflow: visible;
position: relative;
&__bar {
border: 1px solid color--grey--3;
border-radius: (3 / 16) * 1rem;
display: flex;
flex-direction: row;
flex-grow: 1;
overflow: hidden;
}
&__pills {
display: flex;
flex-flow: wrap;
margin: 0px 1px;
width: 100%;
}
&__pill {
height: 18px ;
margin: 1px 1px 0px 0px ;
}
&__search {
border: none;
flex: 1;
line-height: 1;
min-height: 20px;
min-width: 10px;
padding-left: 10px;
}
&__button {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
margin-left: auto;
min-height: 22px;
min-width: 22px;
text-align: center;
}
button { -webkit-appearance: none; }
&__button-icon {
@extend .aicon;
font-size: 7px;
&:before {
@extend .aicon__expand-collapse:before;
}
}
&__menu {
background-color: white;
border: 1px solid color--grey--3;
border-radius: 2px;
border-top: 0;
display: flex;
flex-wrap: wrap;
max-height: 400px;
overflow-y: auto;
position: absolute;
top: 100%;
width: 100%;
z-index: 2000;
}
&__item {
border: 1px solid transparent;
border-radius: 2px;
margin: 0 10px;
padding: 4.5px 10px;
width: 100%;
&:first-child { margin-top: 10px; }
&:last-child { margin-bottom: 10px; }
&--active {
background-color: color--blue--1;
border-color: color--blue--3;
}
&--selected { font-weight: bold; }
}
&__checkbox { display: flex; }
.highlighted { background-color: color--yellow--2; }
.selected { font-weight: bold; }
}