diff --git a/styleguide.css b/styleguide.css index e7fa2f9..c329149 100644 --- a/styleguide.css +++ b/styleguide.css @@ -1624,14 +1624,18 @@ section + section { } .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { - min-width: 0; - flex: 0 0 auto; + min-width: 100%; + flex: 0 0 100%; + grid-column: 1 / -1; + grid-row: 1; } .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { min-width: 0; max-width: 100%; width: 100%; + grid-column: 1; + grid-row: 2; } .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { @@ -1639,33 +1643,13 @@ section + section { justify-self: end; align-self: center; white-space: nowrap; + grid-column: 2; + grid-row: 2; } .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { position: static; transform: none; - grid-column: 3; - grid-row: 1; - } - - .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-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { - grid-column: 1; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { - grid-column: 2; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { grid-column: 3; grid-row: 2; }