From deaf69ffd8f9b97b4b8c29a244a79969ff14c80a Mon Sep 17 00:00:00 2001 From: Milos Djermanovic Date: Fri, 26 Aug 2022 18:51:29 +0200 Subject: [PATCH] chore: fix off-by-one `min-width: 1023px` media queries (#15974) --- docs/src/assets/scss/components/docs-index.scss | 6 +++--- docs/src/assets/scss/components/docs-navigation.scss | 10 +++++----- docs/src/assets/scss/components/index.scss | 6 +++--- docs/src/assets/scss/components/search.scss | 2 +- docs/src/assets/scss/docs.scss | 8 ++++---- docs/src/assets/scss/tokens/spacing.scss | 2 +- docs/src/assets/scss/utilities.scss | 4 ++-- 7 files changed, 19 insertions(+), 19 deletions(-) diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss index 2a4b86d140f..b9f04525b3a 100644 --- a/docs/src/assets/scss/components/docs-index.scss +++ b/docs/src/assets/scss/components/docs-index.scss @@ -76,7 +76,7 @@ &[data-open="false"] { display: none; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: block; } } @@ -84,7 +84,7 @@ &[data-open="true"] { display: block; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: block; } } @@ -109,7 +109,7 @@ background-color: var(--secondary-button-hover-color); } - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: none; } diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss index f42a2ee17c5..1a8ee504073 100644 --- a/docs/src/assets/scss/components/docs-navigation.scss +++ b/docs/src/assets/scss/components/docs-navigation.scss @@ -14,7 +14,7 @@ margin-block-end: 2rem; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { font-size: var(--step-0); margin-top: 0; margin-block-start: 0; @@ -52,7 +52,7 @@ .docs-nav-panel { - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: flex; flex-direction: row; justify-content: center; @@ -63,7 +63,7 @@ } &[data-open="true"] { - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: flex; flex-direction: row; justify-content: center; @@ -72,7 +72,7 @@ } .docs-nav-panel .mobile-only { - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: none; } } @@ -130,7 +130,7 @@ -@media all and (min-width: 1023px) { +@media all and (min-width: 1024px) { .docs-site-nav { flex-direction: row; grid-column: auto; diff --git a/docs/src/assets/scss/components/index.scss b/docs/src/assets/scss/components/index.scss index a1b79a733f9..ea9bd3b1eef 100644 --- a/docs/src/assets/scss/components/index.scss +++ b/docs/src/assets/scss/components/index.scss @@ -45,7 +45,7 @@ background-color: var(--secondary-button-hover-color); } - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: none; } @@ -95,7 +95,7 @@ &[data-open="false"] { display: none; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: block; } } @@ -103,7 +103,7 @@ &[data-open="true"] { display: block; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: block; } } diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss index 8038e3a2cd4..2b92b2ee6b3 100644 --- a/docs/src/assets/scss/components/search.scss +++ b/docs/src/assets/scss/components/search.scss @@ -75,7 +75,7 @@ max-height: 400px; overflow-y: auto; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { box-shadow: var(--shadow-lg); position: absolute; top: calc(100% + .25rem); diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss index a9a07349728..d2e17042d71 100644 --- a/docs/src/assets/scss/docs.scss +++ b/docs/src/assets/scss/docs.scss @@ -19,7 +19,7 @@ html { display: flex; flex-direction: column; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); align-items: stretch; @@ -37,7 +37,7 @@ html { grid-auto-rows: max-content; align-items: start; - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { padding: var(--space-l-xl) 0; padding-right: var(--space-s-l); padding-inline-end: var(--space-s-l); @@ -58,7 +58,7 @@ html { grid-gap: 1rem; } - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { padding: 0; } @@ -78,7 +78,7 @@ html { border-inline-end: 1px solid var(--divider-color); } - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { padding: var(--space-l-xl) var(--space-l-2xl); } } diff --git a/docs/src/assets/scss/tokens/spacing.scss b/docs/src/assets/scss/tokens/spacing.scss index 173401c043a..1f5549b8e70 100644 --- a/docs/src/assets/scss/tokens/spacing.scss +++ b/docs/src/assets/scss/tokens/spacing.scss @@ -8,7 +8,7 @@ --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); } -@media screen and (min-width: 1023px) { +@media screen and (min-width: 1024px) { :root { --fluid-screen: calc(var(--fluid-max-width) * 1px); } diff --git a/docs/src/assets/scss/utilities.scss b/docs/src/assets/scss/utilities.scss index ede62ca53a9..ac400649936 100644 --- a/docs/src/assets/scss/utilities.scss +++ b/docs/src/assets/scss/utilities.scss @@ -1,5 +1,5 @@ .grid { - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 2rem; @@ -23,7 +23,7 @@ } .mobile-only { - @media all and (min-width: 1023px) { + @media all and (min-width: 1024px) { display: none; } }