diff --git a/styleguide.css b/styleguide.css index 599e67e..328de49 100644 --- a/styleguide.css +++ b/styleguide.css @@ -1654,36 +1654,35 @@ section + section { width: 100%; } - .sg-options-row .sg-pulldown-panel:has(.sg-form-sections-card-wrapper) { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { width: calc(100vw - (2 * var(--spacing-large))); min-width: 0; max-width: calc(100vw - (2 * var(--spacing-large))); - } - - .sg-options-row .sg-pulldown-demo .sg-pulldown-panel { left: 0; right: auto; + box-sizing: border-box; } - .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper, - .sg-options-row .sg-pulldown-panel .sg-form-sections-card { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card-wrapper, + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card, + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card__chapter { min-width: 0; width: 100%; max-width: 100%; } - .sg-pulldown-panel__row { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel__row { grid-template-columns: minmax(0, 1fr) var(--interaction-height); row-gap: var(--spacing-small); } - .sg-pulldown-panel__label { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel__label { grid-column: 1 / -1; grid-row: 1; min-width: 0; } - .sg-pulldown-panel__row .sg-pulldown { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel__row .sg-pulldown { grid-column: 1; grid-row: 2; width: 100%; @@ -1691,28 +1690,30 @@ section + section { max-width: 100%; } - .sg-pulldown-panel__row .sg-pulldown-panel__remove { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel__row .sg-pulldown-panel__remove { grid-column: 2; grid-row: 2; justify-self: end; } - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--interaction-height); align-items: center; column-gap: var(--spacing-small); padding-right: 0; + width: 100%; + max-width: 100%; } - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { min-width: 100%; flex: 0 0 100%; grid-column: 1 / -1; grid-row: 1; } - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { min-width: 0; max-width: 100%; width: 100%; @@ -1720,8 +1721,8 @@ section + section { grid-row: 2; } - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { - min-width: calc(var(--interaction-height) * 1.25); + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.1); justify-self: end; align-self: center; white-space: nowrap; @@ -1729,13 +1730,28 @@ section + section { grid-row: 2; } - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { position: static; transform: none; margin-left: 0; grid-column: 3; grid-row: 2; } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > :not(.sg-form-sections-card__chapter-title) + :not(.sg-form-sections-card__chapter-title) { + margin-top: var(--spacing-large); + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-form-sections-card__chapter-title + * { + margin-top: var(--spacing-large); + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-slider-row + .sg-slider-row, + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-checkbox-field-option + .sg-checkbox-field-option, + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-pulldown-panel__row + .sg-pulldown-panel__row, + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-radio-activatable-group + .sg-radio-activatable-group { + margin-top: var(--spacing-small); + } } /* ========================================================= */