open-nomad/ui/app/styles/components/dropdown.scss

199 lines
3.7 KiB
SCSS
Raw Normal View History

.ember-power-select-trigger,
.dropdown-trigger {
position: relative;
2019-11-12 01:02:13 +00:00
display: flex;
align-items: center;
padding: 0.375em 16px 0.375em 0.3em;
line-height: 1;
2018-08-03 17:11:47 +00:00
border-radius: $radius;
box-shadow: $button-box-shadow-standard;
background: $white-bis;
border: 1px solid $grey-light;
height: 2.25em;
font-size: 1rem;
outline: none;
cursor: pointer;
&:focus {
box-shadow: $button-box-shadow-standard, inset 0 0 0 2px $grey-lighter;
}
2018-08-03 17:11:47 +00:00
&.is-outlined {
border-color: rgba($white, 0.5);
color: $white;
background: transparent;
box-shadow: $button-box-shadow-standard, 0 0 2px 2px rgba($black, 0.1);
.ember-power-select-status-icon {
border-top-color: rgba($white, 0.75);
}
.ember-power-select-prefix {
color: rgba($white, 0.75);
}
}
&.is-compact {
margin: -0.25em 0;
&.pull-right {
margin-right: -1em;
}
&.pull-left {
margin-left: -1em;
}
}
2018-08-03 17:11:47 +00:00
}
2019-01-12 00:40:28 +00:00
.button-bar {
display: inline-flex;
flex-direction: row;
box-shadow: $button-box-shadow-standard;
2020-06-17 07:19:13 +00:00
.dropdown,
.button {
2019-01-12 00:40:28 +00:00
display: flex;
position: relative;
2020-06-17 07:19:13 +00:00
& + .dropdown,
& + .button {
2019-01-12 00:40:28 +00:00
margin-left: -1px;
}
}
.ember-power-select-trigger,
2020-06-17 07:19:13 +00:00
.dropdown-trigger,
.button {
2019-01-12 00:40:28 +00:00
border-radius: 0;
box-shadow: none;
&:focus {
box-shadow: inset 0 0 0 2px $grey-lighter;
}
2019-01-12 00:40:28 +00:00
}
// Buttons have their own focus treatment that needs to be overrided here.
// Since .button.is-color takes precedence over .button-bar .button, each
// color needs the override.
.button {
@each $name, $pair in $colors {
&.is-#{$name}:focus {
box-shadow: inset 0 0 0 2px $grey-lighter;
}
}
}
2020-06-17 07:19:13 +00:00
.dropdown:first-child .ember-power-select-trigger,
.dropdown:first-child .dropdown-trigger,
.button:first-child {
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
2019-01-12 00:40:28 +00:00
}
2020-06-17 07:19:13 +00:00
.dropdown:last-child .ember-power-select-trigger,
.dropdown:last-child .dropdown-trigger,
.button:last-child {
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
2019-01-12 00:40:28 +00:00
}
&.is-shadowless {
box-shadow: none;
}
// Used to minimize any extra height the buttons would add to an otherwise
// text only container.
&.is-text {
margin-top: -0.5em;
margin-bottom: -0.5em;
vertical-align: middle;
}
2019-01-12 00:40:28 +00:00
}
2020-03-31 04:14:44 +00:00
.ember-power-select-selected-item,
.dropdown-trigger-label {
margin-left: 8px;
margin-right: 8px;
display: inline-block;
white-space: nowrap;
}
.ember-power-select-selected-item,
.dropdown-item {
2018-08-03 17:11:47 +00:00
text-overflow: ellipsis;
overflow: hidden;
2018-08-03 17:11:47 +00:00
white-space: nowrap;
}
.ember-power-select-prefix,
.dropdown-prefix {
2018-08-03 17:11:47 +00:00
color: $grey;
}
.ember-power-select-option,
.dropdown-option {
.ember-power-select-prefix,
.dropdown-prefix {
2018-08-03 17:11:47 +00:00
display: none;
}
}
.dropdown-options,
.ember-power-select-options {
margin: 0;
padding: 0;
}
// Bulma override
.menu-list li ul.ember-power-select-options {
margin: 0;
padding: 0;
}
.dropdown-options {
border: 1px solid $grey-light;
margin-top: -1px;
2019-01-12 00:40:28 +00:00
max-height: 400px;
overflow: auto;
& > ul {
width: 100%;
}
.dropdown-option {
margin: 0;
padding: 0;
white-space: nowrap;
line-height: 1.75;
label {
display: block;
padding: 3px 8px;
min-width: 100px;
cursor: pointer;
}
& + .dropdown-option {
border-top: 1px solid $grey-lighter;
}
&:hover,
&:focus {
background: $white-bis;
outline: none;
border-left: 2px solid $blue;
label {
padding-left: 6px;
min-width: 98px;
}
}
}
2019-01-23 00:29:09 +00:00
.dropdown-empty {
display: block;
padding: 8px 12px;
color: $grey-light;
}
}