Revert "Add Multiselektionspulldown pattern based on form sections structure"
This reverts commit ba31de8870.
This commit is contained in:
-140
@@ -150,14 +150,6 @@
|
||||
--layout-options-row-group-gap: var(--spacing-small);
|
||||
--layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
|
||||
--layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
|
||||
--surface-multiselect-pulldown: var(--color-light-grey);
|
||||
--surface-multiselect-pulldown-shell: var(--color-light-grey);
|
||||
--surface-multiselect-pulldown-control: var(--surface-control-default);
|
||||
--surface-multiselect-pulldown-control-selected: var(--surface-control-active);
|
||||
--text-multiselect-pulldown-default: var(--text-control-default);
|
||||
--text-multiselect-pulldown-muted: var(--text-control-disabled);
|
||||
--layout-multiselect-pulldown-width: var(--dimension-multiselect-pulldown-width);
|
||||
--layout-multiselect-pulldown-row-label-width: var(--dimension-multiselect-pulldown-row-label-width);
|
||||
--layout-object-card-min-width: var(--dimension-object-card-min-width);
|
||||
--layout-object-card-max-width: var(--dimension-object-card-max-width);
|
||||
--layout-object-card-height: var(--dimension-object-card-height);
|
||||
@@ -230,8 +222,6 @@
|
||||
--dimension-search-field-width: 15.3rem;
|
||||
--dimension-options-row-mode-toggle-width: 7rem;
|
||||
--dimension-options-row-help-panel-width: 16rem;
|
||||
--dimension-multiselect-pulldown-width: 48rem;
|
||||
--dimension-multiselect-pulldown-row-label-width: 15rem;
|
||||
--dimension-card-list-drawer-width: 40%;
|
||||
--dimension-slider-track-height: 6px;
|
||||
--dimension-slider-thumb-size: 22px;
|
||||
@@ -1626,136 +1616,6 @@ section + section {
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Patterns: Multiselektionspulldown */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-multiselect-pulldown-demo {
|
||||
width: var(--layout-multiselect-pulldown-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown-demo__controls {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-small);
|
||||
padding: var(--spacing-small);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-multiselect-pulldown-shell);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown-demo__search-wrap {
|
||||
flex: 0 1 15rem;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown-demo__results {
|
||||
color: var(--text-multiselect-pulldown-default);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown {
|
||||
--surface-pulldown-panel: var(--surface-multiselect-pulldown);
|
||||
--surface-control-default: var(--surface-multiselect-pulldown-control);
|
||||
--surface-control-active: var(--surface-multiselect-pulldown-control-selected);
|
||||
--text-control-default: var(--text-multiselect-pulldown-default);
|
||||
--text-control-disabled: var(--text-multiselect-pulldown-muted);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown > .sg-pulldown-demo__trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown > .sg-pulldown-panel {
|
||||
position: static;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__form-wrapper,
|
||||
.sg-multiselect-pulldown__form {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__form {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__form-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
padding: 0;
|
||||
background: var(--surface-multiselect-pulldown);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__actions-segment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section .sg-slider-row,
|
||||
.sg-multiselect-pulldown__row-label,
|
||||
.sg-multiselect-pulldown__radio-row {
|
||||
display: grid;
|
||||
grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section .sg-slider-row .sg-label,
|
||||
.sg-multiselect-pulldown__row-label .sg-label,
|
||||
.sg-multiselect-pulldown__radio-row > .sg-label {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section .sg-slider-row .sg-slider {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section .sg-slider-row .sg-slider-value {
|
||||
min-width: calc(var(--interaction-height) * 1.25);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__radio-row {
|
||||
grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) auto auto;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__compact-pulldown {
|
||||
width: max-content;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sg-multiselect-pulldown-demo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-multiselect-pulldown__section .sg-slider-row,
|
||||
.sg-multiselect-pulldown__row-label,
|
||||
.sg-multiselect-pulldown__radio-row {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: var(--spacing-small);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Patterns: Object Card */
|
||||
/* ========================================================= */
|
||||
|
||||
Reference in New Issue
Block a user