From ced67f4f7f863d289e6a9c622c1939ab6d6c31a9 Mon Sep 17 00:00:00 2001 From: Bailey McKelway Date: Tue, 16 Mar 2021 18:10:09 -0400 Subject: [PATCH 1/2] fix: range slider vertical alignment, fixes #1005 --- components/slider/index.css | 22 +++++++++++++--------- yarn.lock | 6 +++--- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/components/slider/index.css b/components/slider/index.css index a1f3c3462e7..bd924983df3 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../vars/css/components/spectrum-slider.css"; +@import '../vars/css/components/spectrum-slider.css'; .spectrum-Slider { @remapvars { @@ -62,7 +62,9 @@ governing permissions and limitations under the License. --spectrum-slider-ramp-margin-top: 0; --spectrum-slider-range-track-reset: 0; - --spectrum-slide-label-text-size: var(--spectrum-global-dimension-font-size-75); + --spectrum-slide-label-text-size: var( + --spectrum-global-dimension-font-size-75 + ); --spectrum-slide-label-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -118,7 +120,7 @@ governing permissions and limitations under the License. margin-inline-start: var(--spectrum-slider-track-margin-offset); &::before { - content: ""; + content: ''; display: block; block-size: 100%; @@ -177,7 +179,6 @@ governing permissions and limitations under the License. inset-inline-start: auto; inset-inline-end: auto; margin-inline: var(--spectrum-slider-range-track-reset); - margin-block: var(--spectrum-slider-range-track-reset); } &:last-of-type { padding-block: 0; @@ -245,7 +246,7 @@ governing permissions and limitations under the License. } &:before { - content: " "; + content: ' '; display: block; position: absolute; left: 50%; @@ -321,7 +322,7 @@ governing permissions and limitations under the License. flex-grow: 0; padding-inline-end: 0; cursor: default; - font-feature-settings: "tnum"; + font-feature-settings: 'tnum'; text-align: end; } @@ -354,7 +355,7 @@ governing permissions and limitations under the License. inset-inline-start: calc( 50% - calc(var(--spectrum-slider-tick-mark-width) / 2) ); - content: ""; + content: ''; inline-size: var(--spectrum-slider-tick-mark-width); block-size: var(--spectrum-slider-tick-mark-height); @@ -366,7 +367,11 @@ governing permissions and limitations under the License. align-items: center; justify-content: center; - margin-block: calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height)) 0; + margin-block: calc( + var(--spectrum-slider-label-gap-y) + + var(--spectrum-slider-tick-mark-height) + ) + 0; margin-inline: calc(var(--spectrum-slider-label-gap-x) * -1) calc(var(--spectrum-slider-label-gap-x) * -1); @@ -396,7 +401,6 @@ governing permissions and limitations under the License. } } - .spectrum-Slider { &.is-disabled { cursor: default; diff --git a/yarn.lock b/yarn.lock index 3d2c8538505..3dae4daa1f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1387,9 +1387,9 @@ integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ== "@spectrum-css/spectrum-css-vr-test-assets-essential@^1.0.21": - version "1.0.21" - resolved "https://registry.yarnpkg.com/@spectrum-css/spectrum-css-vr-test-assets-essential/-/spectrum-css-vr-test-assets-essential-1.0.21.tgz#8343aec99cd548daa67f63dd1ef32a95a9b06096" - integrity sha512-m1jIGmTTp03HTUE+H+5VKDcGbmWasdccfteYcZI+d+X9nWaAu0oReIIzm1DDwLdhe29xpQF0R3BYnBdWYlipzA== + version "1.0.28" + resolved "https://registry.yarnpkg.com/@spectrum-css/spectrum-css-vr-test-assets-essential/-/spectrum-css-vr-test-assets-essential-1.0.28.tgz#6eaf34bb3bb68673281bae45ae13ffb6d6aa09a9" + integrity sha512-f/qQ/BmDjL5nKvulOwQONTKChWbOlKhjO4CNo5lOK5AKnnZTRJaDDM7lkVAGc3MCvi7+pPdH3vnPgM+D7F7Iew== "@szmarczak/http-timer@^1.1.2": version "1.1.2" From f4537cb7be917dc2985fcb04e18ceac23134d912 Mon Sep 17 00:00:00 2001 From: Bailey McKelway Date: Tue, 16 Mar 2021 20:36:08 -0400 Subject: [PATCH 2/2] fix: range slider vertical alignment, fixes #1005 --- components/slider/index.css | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/components/slider/index.css b/components/slider/index.css index bd924983df3..213c0cce73f 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import '../vars/css/components/spectrum-slider.css'; +@import "../vars/css/components/spectrum-slider.css"; .spectrum-Slider { @remapvars { @@ -62,9 +62,7 @@ governing permissions and limitations under the License. --spectrum-slider-ramp-margin-top: 0; --spectrum-slider-range-track-reset: 0; - --spectrum-slide-label-text-size: var( - --spectrum-global-dimension-font-size-75 - ); + --spectrum-slide-label-text-size: var(--spectrum-global-dimension-font-size-75); --spectrum-slide-label-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -120,7 +118,7 @@ governing permissions and limitations under the License. margin-inline-start: var(--spectrum-slider-track-margin-offset); &::before { - content: ''; + content: ""; display: block; block-size: 100%; @@ -246,7 +244,7 @@ governing permissions and limitations under the License. } &:before { - content: ' '; + content: " "; display: block; position: absolute; left: 50%; @@ -322,7 +320,7 @@ governing permissions and limitations under the License. flex-grow: 0; padding-inline-end: 0; cursor: default; - font-feature-settings: 'tnum'; + font-feature-settings: "tnum"; text-align: end; } @@ -355,7 +353,7 @@ governing permissions and limitations under the License. inset-inline-start: calc( 50% - calc(var(--spectrum-slider-tick-mark-width) / 2) ); - content: ''; + content: ""; inline-size: var(--spectrum-slider-tick-mark-width); block-size: var(--spectrum-slider-tick-mark-height); @@ -367,11 +365,7 @@ governing permissions and limitations under the License. align-items: center; justify-content: center; - margin-block: calc( - var(--spectrum-slider-label-gap-y) + - var(--spectrum-slider-tick-mark-height) - ) - 0; + margin-block: calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height)) 0; margin-inline: calc(var(--spectrum-slider-label-gap-x) * -1) calc(var(--spectrum-slider-label-gap-x) * -1);