165 lines
4.4 KiB
CSS
165 lines
4.4 KiB
CSS
/* ========================================================= */
|
|
/* 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-only {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.sg-options-row__left > .sg-search-field-row {
|
|
flex: 0 0 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-only {
|
|
flex-direction: row;
|
|
gap: var(--layout-options-row-main-gap);
|
|
padding:
|
|
var(--card-segment-padding-vertical)
|
|
var(--layout-page-content-inset-inline);
|
|
}
|
|
|
|
.sg-options-row--left-only .sg-options-row__left {
|
|
order: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.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-search-field-row {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|