Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Options Row */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-options-row {
|
||||
--surface-control-default: var(--surface-options-row-control);
|
||||
--surface-control-active: var(--surface-options-row-control-selected);
|
||||
--surface-input-clear: var(--surface-options-row-input-clear);
|
||||
--surface-toggle-track: var(--surface-options-row-toggle-track);
|
||||
--surface-toggle-handle: var(--surface-options-row-toggle-handle);
|
||||
--surface-help-icon: var(--surface-options-row-help-icon);
|
||||
--surface-help-panel: var(--surface-options-row-help-panel);
|
||||
--text-control-default: var(--text-options-row-default);
|
||||
--text-control-disabled: var(--text-options-row-placeholder);
|
||||
--text-help-icon: var(--text-options-row-help-icon);
|
||||
--text-help-panel: var(--text-options-row-help-panel);
|
||||
--layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width);
|
||||
--layout-help-panel-width: var(--layout-options-row-help-panel-width);
|
||||
margin-top: var(--layout-options-row-margin-top);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--layout-options-row-main-gap);
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--layout-page-content-inset-inline);
|
||||
border: var(--border-none);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-none);
|
||||
background: var(--surface-options-row);
|
||||
}
|
||||
|
||||
.sg-options-row__left,
|
||||
.sg-options-row__right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--layout-options-row-group-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sg-options-row__left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.sg-options-row__right {
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sg-options-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-options-row__right,
|
||||
.sg-options-row__left {
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--card-segment-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-options-row__right {
|
||||
order: 1;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sg-options-row__left {
|
||||
order: 2;
|
||||
box-shadow: inset 0 1px 0 var(--divider-options-row-mobile);
|
||||
}
|
||||
|
||||
.sg-options-row__left > .sg-pulldown-demo,
|
||||
.sg-options-row__left > .sg-input-single-line-wrap,
|
||||
.sg-options-row__left > .sg-search-field-row {
|
||||
flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-options-row__left > .sg-input-single-line-wrap,
|
||||
.sg-options-row__left > .sg-search-field-row {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input .sg-input-single-line {
|
||||
padding-right: var(--interaction-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line {
|
||||
border-radius: var(--radius-interaction) 0 0 var(--radius-interaction);
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input .sg-input-clear-button {
|
||||
position: static;
|
||||
flex: 0 0 var(--interaction-height);
|
||||
height: auto;
|
||||
border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
|
||||
}
|
||||
|
||||
.sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
|
||||
.sg-options-row__left > .sg-pulldown-demo .sg-pulldown {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
|
||||
width: min(
|
||||
var(--layout-pulldown-panel-form-mobile-width),
|
||||
calc(100vw - (2 * var(--spacing-large)))
|
||||
);
|
||||
min-width: 0;
|
||||
max-width: calc(100vw - (2 * var(--spacing-large)));
|
||||
}
|
||||
|
||||
.sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper,
|
||||
.sg-options-row .sg-pulldown-panel .sg-form-sections-card {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-large);
|
||||
row-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
|
||||
min-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
|
||||
min-width: calc(var(--interaction-height) * 1.25);
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel__row {
|
||||
grid-template-columns: minmax(0, 1fr) var(--interaction-height);
|
||||
}
|
||||
|
||||
.sg-pulldown-panel__label {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user