gitea_admin/Styleguide
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up multiselect pattern token cascade

Browse Source
This commit is contained in:
gitea_admin committed 2026-10-14 13:32:56 +02:00
1 parent 9cbd5eaadd
commit 8021af7203
6 files changed
+42 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

styles/25-patterns-form-sections.css
+31 -18
View File
@@ -75,8 +75,21 @@
padding-left: var(--layout-form-sections-interaction-indent);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] {
--layout-multiselect-panel-width: var(--layout-multiselect-pulldown-panel-desktop-width);
--layout-multiselect-panel-available-width: calc(100vw - (2 * var(--spacing-large)));
--layout-multiselect-chapter-gap: var(--spacing-large);
--layout-multiselect-column-gap: var(--spacing-large);
--layout-multiselect-control-gap: var(--spacing-small);
--layout-multiselect-visual-control-gap: calc(var(--spacing-small) * 2);
--layout-multiselect-control-row-height: var(--interaction-height);
--layout-multiselect-value-min-width: calc(var(--interaction-height) * 1.25);
--typography-multiselect-label-line-height: var(--line-height-base);
--opacity-multiselect-disabled: var(--disabled-opacity);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > * + * {
margin-top: var(--spacing-large);
margin-top: var(--layout-multiselect-chapter-gap);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-options-row__left > .sg-pulldown-demo {
@@ -90,14 +103,14 @@
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
width: min(
var(--layout-multiselect-pulldown-panel-desktop-width),
calc(100vw - (2 * var(--spacing-large)))
var(--layout-multiselect-panel-width),
var(--layout-multiselect-panel-available-width)
);
min-width: min(
var(--layout-multiselect-pulldown-panel-desktop-width),
calc(100vw - (2 * var(--spacing-large)))
var(--layout-multiselect-panel-width),
var(--layout-multiselect-panel-available-width)
);
max-width: calc(100vw - (2 * var(--spacing-large)));
max-width: var(--layout-multiselect-panel-available-width);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card-wrapper,
@@ -117,8 +130,8 @@
display: grid;
grid-template-columns: max-content minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--spacing-large);
row-gap: var(--spacing-small);
column-gap: var(--layout-multiselect-column-gap);
row-gap: var(--layout-multiselect-control-gap);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable {
@@ -126,14 +139,14 @@
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider {
opacity: var(--disabled-opacity);
opacity: var(--opacity-multiselect-disabled);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider-value,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
opacity: var(--disabled-opacity);
opacity: var(--opacity-multiselect-disabled);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
@@ -159,7 +172,7 @@
grid-column: 3;
grid-row: 2;
margin: 0;
min-width: calc(var(--interaction-height) * 1.25);
min-width: var(--layout-multiselect-value-min-width);
line-height: 1;
align-self: center;
white-space: nowrap;
@@ -173,8 +186,8 @@
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
column-gap: var(--spacing-large);
row-gap: calc(var(--spacing-small) * 2);
column-gap: var(--layout-multiselect-column-gap);
row-gap: var(--layout-multiselect-visual-control-gap);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
@@ -207,8 +220,8 @@
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--interaction-height) auto;
row-gap: calc(var(--spacing-small) * 2);
grid-template-rows: var(--layout-multiselect-control-row-height) auto;
row-gap: var(--layout-multiselect-visual-control-gap);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header {
@@ -216,14 +229,14 @@
grid-column: 1;
grid-row: 1;
align-items: center;
gap: var(--spacing-large);
gap: var(--layout-multiselect-column-gap);
min-width: 0;
}
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label {
margin: 0;
min-width: 0;
line-height: var(--line-height-base);
line-height: var(--typography-multiselect-label-line-height);
}
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
@@ -237,7 +250,7 @@
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
opacity: var(--disabled-opacity);
opacity: var(--opacity-multiselect-disabled);
}
.sg-form-sections-card__actions {