discourse/app/assets/stylesheets/common/select-kit/select-kit.scss
Penar Musaraj 4e1b9a225e
DEV: Reduce width calculations for SK dropdowns (#18263)
Previously we were calculating both the minimum and maximum widths for
SK dropdowns using this Popper modifier. The max. width calculation was
causing issues with dropdowns in Firefox and was also sluggish when
rendering.

This switches to using CSS calculations for max. widths. It adds a 600px
global maximum and targeted maximums for the category composer dropdown
and the bookmark list dropdowns.
2022-09-20 22:59:47 -04:00

352 lines
6.3 KiB
SCSS

.select-kit {
@include unselectable;
border: none;
box-sizing: border-box;
display: inline-block;
flex-direction: column;
position: relative;
vertical-align: middle;
&.is-hidden {
display: none !important;
}
> summary {
list-style-type: none;
display: block;
&:before {
content: none !important;
margin: 0;
}
}
> summary::marker {
display: none !important;
}
&.is-disabled {
pointer-events: none;
}
&.is-expanded {
z-index: z("dropdown");
.select-kit-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 0;
border: none;
border: 1px solid var(--primary-low);
box-shadow: shadow("dropdown");
background: var(--secondary);
max-width: 600px;
}
.select-kit-collection {
box-sizing: border-box;
width: 100%;
}
.select-kit-filter.is-expanded {
padding: 0.25em 0.5em;
}
}
&.is-loading {
.select-kit-collection {
overflow: hidden;
}
}
.d-icon {
color: var(--primary-high);
}
.select-kit-header {
@include form-item-sizing;
font-weight: 500;
overflow: hidden;
transition: all 0.25s;
cursor: pointer;
display: flex;
align-items: stretch;
&:not(.btn) {
padding-left: 0.5em;
padding-right: 0.5em;
}
/* hide native indicator */
&::-webkit-details-marker {
display: none;
}
.select-kit-header-wrapper {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
}
.d-icon-spinner {
-webkit-animation: rotate-forever 1s infinite linear;
animation: rotate-forever 1s infinite linear;
}
.selected-name {
text-align: left;
flex: 0 1 auto;
align-items: center;
color: inherit;
display: flex;
outline: none;
&:focus .d-icon-times {
color: var(--danger);
}
.d-icon + .name {
margin-left: 0.5em;
}
.name {
display: inline-block;
> .d-icon {
margin-left: 0.5em;
margin-right: 0;
}
}
> .d-icon {
margin-right: 0;
}
&.select-kit-selected-color {
border-bottom-width: 5px;
border-bottom-style: solid;
}
.badge-wrapper {
font-size: inherit;
}
}
.btn-clear {
margin-left: 0.25em;
padding: 0.25em;
border: 0;
background: none;
min-height: auto;
}
.icon {
margin-right: 5px;
}
.caret-icon {
margin-left: auto;
margin-right: 0;
padding-left: 5px;
pointer-events: none;
color: inherit;
}
.d-button-label {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
line-height: $line-height-medium;
.d-icon {
margin-left: 5px;
margin-right: 0;
}
}
}
.select-kit-body {
display: none;
background: var(--secondary);
box-sizing: border-box;
.selected-content {
max-height: 300px;
overflow-y: auto;
}
&[data-popper-reference-hidden] {
html:not(.ios-device) & {
visibility: hidden;
pointer-events: none;
}
}
}
.select-kit-row {
cursor: pointer;
outline: none;
display: flex;
flex: 1 0 auto;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
padding: 0.5em;
> * {
pointer-events: none;
}
.name {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 0%;
}
.d-icon + .name,
.svg-icon-title + .name {
margin-left: 0.5em;
}
&.is-highlighted {
background: var(--highlight-medium);
}
&.is-selected {
background: var(--tertiary-low);
}
&.is-selected.is-highlighted {
background: var(--highlight-medium);
}
.discourse-tag,
.discourse-tag:visited,
.discourse-tag:hover {
color: var(--primary-high);
}
&.create-color-row {
border-left-style: solid;
border-left-width: 5px;
}
}
.select-kit-collection {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
max-height: 250px;
width: 100%;
&:hover .select-kit-row.is-highlighted:hover {
background: var(--highlight-medium);
}
.validation-message {
white-space: nowrap;
color: var(--danger);
flex: 1 0 auto;
margin: 5px;
padding: 0 2px;
}
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
&::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: var(--primary-med-or-secondary-med);
}
&::-webkit-scrollbar-track {
background: transparent;
border-radius: 0;
}
}
.select-kit-filter {
box-sizing: border-box;
align-items: center;
justify-content: space-between;
width: 100%;
.filter-input {
background: none;
margin: 0;
padding: 0;
flex: 1 0 0px;
outline: none;
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
box-sizing: border-box;
min-height: 30px;
}
&.is-hidden {
width: 1px;
height: 1px;
border: 0;
margin: -1px;
padding: 0;
overflow: hidden;
position: fixed;
outline: 0;
left: 0;
top: 0;
}
}
.select-kit-errors-collection {
background: var(--danger);
padding: 0.25em 1em;
margin: 0;
width: 100%;
box-sizing: border-box;
.select-kit-error {
list-style: none;
color: var(--secondary);
}
}
.no-content,
.is-loading,
.results-count {
display: flex;
flex: 1 0 auto;
padding: 0.5em;
width: 100%;
box-sizing: border-box;
background: var(--secondary);
}
.results-count {
font-size: var(--font-down-1);
color: var(--primary-med-or-secondary-med);
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
}
.is-loading {
align-items: flex-start;
justify-content: center;
}
}