discourse/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
Joffrey JAFFEUX cb59681d86
DEV: select-kit third major update with focus on accessibility (#13303)
Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row
2021-08-23 10:44:19 +02:00

59 lines
1.1 KiB
SCSS

.select-kit {
&.dropdown-select-box {
&.toolbar-popup-menu-options {
.select-kit-body {
box-shadow: none;
width: 230px;
border-radius: 0;
}
.select-kit-header {
width: 30px;
display: flex;
align-items: center;
justify-content: center;
&:focus {
border-color: var(--tertiary);
}
.d-icon {
color: var(--primary-medium);
}
&:hover {
.d-icon {
color: var(--primary-low);
}
}
}
.select-kit-row {
padding: 0.75em 0.5em;
border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
&:last-child {
border: none;
}
.texts .name,
.icons .d-icon {
font-size: $font-0;
font-weight: normal;
}
.d-icon {
color: var(--primary-medium);
}
&.is-highlighted,
&.is-selected,
&:hover {
background: var(--tertiary-low);
color: var(--primary);
}
}
}
}
}