diff --git a/styleguide.css b/styleguide.css index c329149..4b4bc05 100644 --- a/styleguide.css +++ b/styleguide.css @@ -981,7 +981,7 @@ section + section { min-width: 0; } - #component-slider .sg-slider-row { + .sg-slider-row { flex-direction: row; flex-wrap: wrap; align-items: center; @@ -989,27 +989,36 @@ section + section { max-width: 100%; } - #component-slider .sg-slider-row .sg-label { + .sg-slider-row .sg-label { min-width: 100%; flex: 0 0 100%; } - #component-slider .sg-slider { + .sg-slider { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; } - #component-slider .sg-slider-value { + .sg-slider-value { flex: 0 0 auto; align-self: center; white-space: nowrap; } - #component-slider .sg-slider-row[data-activatable="true"] { + .sg-slider-row[data-activatable="true"] { padding-right: 0; } + + .sg-slider-row[data-activatable="true"] .sg-activatable-remove { + position: static; + top: auto; + right: auto; + transform: none; + align-self: center; + margin-left: calc(var(--spacing-small) * 1.5); + } } .sg-sandwich-button { @@ -1615,7 +1624,7 @@ section + section { max-width: 100%; } - .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--interaction-height); align-items: center; @@ -1623,14 +1632,14 @@ section + section { padding-right: 0; } - .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + .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 .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { min-width: 0; max-width: 100%; width: 100%; @@ -1638,7 +1647,7 @@ section + section { grid-row: 2; } - .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { min-width: calc(var(--interaction-height) * 1.25); justify-self: end; align-self: center; @@ -1647,7 +1656,7 @@ section + section { grid-row: 2; } - .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { position: static; transform: none; grid-column: 3;