diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte index 75fc926904..ac012c6a34 100644 --- a/src/lib/components/Select.svelte +++ b/src/lib/components/Select.svelte @@ -136,7 +136,7 @@ {/if}
{#if selectedOption?.icon} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 483eb82daa..8be83881f9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -583,7 +583,7 @@

Allowing you to innovate without limits diff --git a/src/routes/company/+page.svelte b/src/routes/company/+page.svelte index a95a24f9e3..7c01f8fa81 100644 --- a/src/routes/company/+page.svelte +++ b/src/routes/company/+page.svelte @@ -74,7 +74,7 @@

diff --git a/src/routes/contact-us/+page.svelte b/src/routes/contact-us/+page.svelte index 2c32dad07c..3a4e8c55e0 100644 --- a/src/routes/contact-us/+page.svelte +++ b/src/routes/contact-us/+page.svelte @@ -196,7 +196,7 @@

--> diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte index b27f934d0d..a2f4342ac0 100644 --- a/src/routes/docs/+page.svelte +++ b/src/routes/docs/+page.svelte @@ -69,7 +69,7 @@
-
+
diff --git a/src/scss/6-elements/_card.scss b/src/scss/6-elements/_card.scss index dbe14dcd20..4897ca540a 100644 --- a/src/scss/6-elements/_card.scss +++ b/src/scss/6-elements/_card.scss @@ -95,7 +95,7 @@ } } - @media #{$break1} { + @media #{$break1}, #{$break2} { --p-card-padding: var(--card-padding-mobile, #{pxToRem(24)}); } } \ No newline at end of file diff --git a/src/scss/6-elements/_container.scss b/src/scss/6-elements/_container.scss index fb3d136d92..89cb04bdf6 100644 --- a/src/scss/6-elements/_container.scss +++ b/src/scss/6-elements/_container.scss @@ -6,7 +6,7 @@ max-inline-size: var(--p-container-size); padding-inline: pxToRem(32); margin-inline: auto; - @media #{$break1} { padding-inline: pxToRem(20); } + @media #{$break1}, #{$break2} { padding-inline: pxToRem(20); } } .#{$p}-main-section { @@ -20,11 +20,11 @@ grid-template-columns: minmax(0, 1fr); &-level-1 { - @media #{$break1} { + @media #{$break1}, #{$break2} { padding-block:pxToRem(0); &:first-child { padding-block-start:pxToRem(0); } } - @media #{$break2open} { + @media #{$break3open} { padding-block:pxToRem(40); &:first-child { padding-block-start:pxToRem(0); } } @@ -35,13 +35,13 @@ } &-level-2 { /* level 2 */ - @media #{$break1} { margin-block:pxToRem(48); } - @media #{$break2open} { margin-block:pxToRem(120); } + @media #{$break1}, #{$break2} { margin-block:pxToRem(48); } + @media #{$break3open} { margin-block:pxToRem(120); } &.is-margin-replace-padding { margin-block:0; - @media #{$break1} { padding-block:pxToRem(48); } - @media #{$break2open} { padding-block:pxToRem(120); } + @media #{$break1}, #{$break2} { padding-block:pxToRem(48); } + @media #{$break3open} { padding-block:pxToRem(120); } } } diff --git a/src/scss/6-elements/_input-text.scss b/src/scss/6-elements/_input-text.scss index 2f4d55ca8e..81f0703bfd 100644 --- a/src/scss/6-elements/_input-text.scss +++ b/src/scss/6-elements/_input-text.scss @@ -142,13 +142,13 @@ textarea.#{$p}-input-text { &-list { display:grid; &.is-two-columns { - @media #{$break2open} { + @media #{$break3open} { grid-template-columns: repeat(2, 1fr); } } } &-item { - @media #{$break2open} { + @media #{$break3open} { &.is-column-span-2 { grid-column:span 2;} } } diff --git a/src/scss/6-elements/_snap-location.scss b/src/scss/6-elements/_snap-location.scss index 9d5e4418d5..fe04b32421 100644 --- a/src/scss/6-elements/_snap-location.scss +++ b/src/scss/6-elements/_snap-location.scss @@ -10,5 +10,5 @@ .#{$p}-snap-location-references { scroll-snap-align: start; scroll-margin-top: 7.5rem; - @media #{$break2open} { scroll-margin-top: 12.5rem; } + @media #{$break3open} { scroll-margin-top: 12.5rem; } } \ No newline at end of file diff --git a/src/scss/6-elements/text-tokens/_caption-400.scss b/src/scss/6-elements/text-tokens/_caption-400.scss index 0e7f0d138d..087535954b 100644 --- a/src/scss/6-elements/text-tokens/_caption-400.scss +++ b/src/scss/6-elements/text-tokens/_caption-400.scss @@ -13,7 +13,7 @@ font-weight: var(--p-font-weight); text-transform: none; /* optional */ - @media #{$break2open} { + @media #{$break3open} { } } \ No newline at end of file diff --git a/src/scss/6-elements/text-tokens/_caption-500.scss b/src/scss/6-elements/text-tokens/_caption-500.scss index 385a7e8356..9e7f93edc5 100644 --- a/src/scss/6-elements/text-tokens/_caption-500.scss +++ b/src/scss/6-elements/text-tokens/_caption-500.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { } } \ No newline at end of file diff --git a/src/scss/6-elements/text-tokens/_code.scss b/src/scss/6-elements/text-tokens/_code.scss index 669655c186..04a9483012 100644 --- a/src/scss/6-elements/text-tokens/_code.scss +++ b/src/scss/6-elements/text-tokens/_code.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-tiny); --p-line-height: var(--aw-line-height-xs); } diff --git a/src/scss/6-elements/text-tokens/_description.scss b/src/scss/6-elements/text-tokens/_description.scss index f2700189bb..da0904a78c 100644 --- a/src/scss/6-elements/text-tokens/_description.scss +++ b/src/scss/6-elements/text-tokens/_description.scss @@ -13,7 +13,7 @@ font-weight: var(--p-font-weight); color: hsl(var(--aw-color-secondary)); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-large); --p-line-height: var(--aw-line-height-md); } diff --git a/src/scss/6-elements/text-tokens/_display.scss b/src/scss/6-elements/text-tokens/_display.scss index 356ec0056f..5464aa9309 100644 --- a/src/scss/6-elements/text-tokens/_display.scss +++ b/src/scss/6-elements/text-tokens/_display.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-super); --p-line-height: var(--aw-line-height-xxxl); } diff --git a/src/scss/6-elements/text-tokens/_headline.scss b/src/scss/6-elements/text-tokens/_headline.scss index a2a7453904..1fa70349b8 100644 --- a/src/scss/6-elements/text-tokens/_headline.scss +++ b/src/scss/6-elements/text-tokens/_headline.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-giant); --p-line-height: var(--aw-line-height-xxxxl); } diff --git a/src/scss/6-elements/text-tokens/_label.scss b/src/scss/6-elements/text-tokens/_label.scss index 0d24155be7..7e0ab8165b 100644 --- a/src/scss/6-elements/text-tokens/_label.scss +++ b/src/scss/6-elements/text-tokens/_label.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { } } \ No newline at end of file diff --git a/src/scss/6-elements/text-tokens/_main-body-400.scss b/src/scss/6-elements/text-tokens/_main-body-400.scss index 56eccd8700..a333ecf4c6 100644 --- a/src/scss/6-elements/text-tokens/_main-body-400.scss +++ b/src/scss/6-elements/text-tokens/_main-body-400.scss @@ -13,7 +13,7 @@ font-weight: var(--p-font-weight); text-transform: none; /* optional */ - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-medium); --p-line-height: var(--aw-line-height-sm); --p-letter-spacing: var(--aw-letter-spacing-tight); diff --git a/src/scss/6-elements/text-tokens/_main-body-500.scss b/src/scss/6-elements/text-tokens/_main-body-500.scss index 7d9314541a..8ab8d5c51b 100644 --- a/src/scss/6-elements/text-tokens/_main-body-500.scss +++ b/src/scss/6-elements/text-tokens/_main-body-500.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-medium); --p-line-height: var(--aw-line-height-sm); } diff --git a/src/scss/6-elements/text-tokens/_sub-body-400.scss b/src/scss/6-elements/text-tokens/_sub-body-400.scss index 8a550ce6a9..48ede9319e 100644 --- a/src/scss/6-elements/text-tokens/_sub-body-400.scss +++ b/src/scss/6-elements/text-tokens/_sub-body-400.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-small); --p-letter-spacing: var(--aw-letter-spacing-tight); } diff --git a/src/scss/6-elements/text-tokens/_sub-body-500.scss b/src/scss/6-elements/text-tokens/_sub-body-500.scss index 8814007c7b..775c5d0cf3 100644 --- a/src/scss/6-elements/text-tokens/_sub-body-500.scss +++ b/src/scss/6-elements/text-tokens/_sub-body-500.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break2open} { + @media #{$break3open} { --p-font-size: var(--aw-font-size-small); --p-letter-spacing: var(--aw-letter-spacing-tight); } diff --git a/src/scss/6-elements/text-tokens/_title.scss b/src/scss/6-elements/text-tokens/_title.scss index 17fc8372ba..9bf12139e5 100644 --- a/src/scss/6-elements/text-tokens/_title.scss +++ b/src/scss/6-elements/text-tokens/_title.scss @@ -12,7 +12,7 @@ letter-spacing: var(--p-letter-spacing); font-weight: var(--p-font-weight); - @media #{$break3open} { + @media #{$break4open} { --p-line-height: var(--aw-line-height-big); --p-font-size: var(--aw-font-size-xxxl); } diff --git a/src/scss/7-components/_article.scss b/src/scss/7-components/_article.scss index db957dbba1..0b7318f6c3 100644 --- a/src/scss/7-components/_article.scss +++ b/src/scss/7-components/_article.scss @@ -41,12 +41,12 @@ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:pxToRem(16); .#{$p}-numeric-badge { - @media #{$break2open} { position:absolute; transform:translateX(calc(calc(-100% - pxToRem(16) ) * var(--transform-direction) )); } + @media #{$break3open} { position:absolute; transform:translateX(calc(calc(-100% - pxToRem(16) ) * var(--transform-direction) )); } } } &-section { position:relative; display:flex; flex-direction:column; gap:pxToRem(24); - @media #{$break2open} { + @media #{$break3open} { &.is-with-line::before { content:""; display:block; position:absolute; inset-block-start:pxToRem(24); inset-inline-start:pxToRem(-30); @@ -62,13 +62,13 @@ */ &-grid-6-4 { > * { min-inline-size:0; } - @media #{$break1} { display:flex; flex-direction:column; gap:pxToRem(32); } - @media #{$break2open} { display:grid; grid-template-columns:6fr 5.7fr; gap:pxToRem(32); } + @media #{$break1}, #{$break2} { display:flex; flex-direction:column; gap:pxToRem(32); } + @media #{$break3open} { display:grid; grid-template-columns:6fr 5.7fr; gap:pxToRem(32); } } } .tabs-list { block-size:pxToRem(40); } - @media #{$break1} { + @media #{$break1}, #{$break2} { &-header { position:relative; z-index:1; flex-direction:column-reverse; padding-block-start:pxToRem(16); &-end { align-self:initial; } diff --git a/src/scss/7-components/_big-list-info.scss b/src/scss/7-components/_big-list-info.scss index 3615a7204b..e36e5e0421 100644 --- a/src/scss/7-components/_big-list-info.scss +++ b/src/scss/7-components/_big-list-info.scss @@ -4,5 +4,5 @@ display:flex; flex-direction:column; gap:pxToRem(64); &-item { padding-block-start:pxToRem(16); border-block-start:solid 1px hsl(var(--aw-color-smooth));} .text { color:hsl(var(--aw-color-greyscale-300)); } - @media #{$break2open} { inline-size:pxToRem(480); max-inline-size:pxToRem(480); } + @media #{$break3open} { inline-size:pxToRem(480); max-inline-size:pxToRem(480); } } \ No newline at end of file diff --git a/src/scss/7-components/_compare-table.scss b/src/scss/7-components/_compare-table.scss index f8934264df..af22fc9d09 100644 --- a/src/scss/7-components/_compare-table.scss +++ b/src/scss/7-components/_compare-table.scss @@ -10,7 +10,7 @@ backdrop-filter:blur(pxToRem(8)); &-button { padding-block:pxToRem(16); } - @media #{$break1} { + @media #{$break1}, #{$break2} { inset-block-start:pxToRem(120); &-button { display:flex; justify-content:space-between; gap:pxToRem(16); inline-size:100%; @@ -18,7 +18,7 @@ [class*="icon-"]:last-child { transition:var(--transition); } } } - @media #{$break2open} { z-index:5; max-inline-size:pxToRem(276); } + @media #{$break3open} { z-index:5; max-inline-size:pxToRem(276); } } tr { display:grid; gap:pxToRem(32); grid-auto-columns:1fr; grid-auto-flow:column; border-block-start:solid pxToRem(1) hsl(var(--aw-color-smooth)); @@ -26,7 +26,7 @@ } th, td { padding-block:pxToRem(16); } td:nth-child(n + 2) { padding-inline-start:pxToRem(8); } - @media #{$break1} { + @media #{$break1}, #{$break2} { margin-block-start:pxToRem(16); &-body { display:none; } &.is-open-in-mobile { @@ -46,7 +46,7 @@ &.is-selected { display:table-cell; } } } - @media #{$break2open} { + @media #{$break3open} { margin-block-start:pxToRem(64); } } \ No newline at end of file diff --git a/src/scss/7-components/_content-footer.scss b/src/scss/7-components/_content-footer.scss index a3e5b7a9a2..a242a9818a 100644 --- a/src/scss/7-components/_content-footer.scss +++ b/src/scss/7-components/_content-footer.scss @@ -6,12 +6,12 @@ &-header { display:flex; justify-content:space-between; &-start { display:flex; gap:pxToRem(16); } - @media #{$break1} { flex-direction:column-reverse; gap:pxToRem(32); } - @media #{$break2open} { justify-items:center; gap:pxToRem(16); } + @media #{$break1}, #{$break2} { flex-direction:column-reverse; gap:pxToRem(32); } + @media #{$break3open} { justify-items:center; gap:pxToRem(16); } } .#{$p}-card { - @media #{$break1} { margin-block-start:pxToRem(16); } - @media #{$break2open} { margin-block-start:pxToRem(32); } + @media #{$break1}, #{$break2} { margin-block-start:pxToRem(16); } + @media #{$break3open} { margin-block-start:pxToRem(32); } } } \ No newline at end of file diff --git a/src/scss/7-components/_content.scss b/src/scss/7-components/_content.scss index a9063a2d91..28a9d7fe49 100644 --- a/src/scss/7-components/_content.scss +++ b/src/scss/7-components/_content.scss @@ -36,7 +36,7 @@ } } - @media #{$break1} { + @media #{$break1}, #{$break2} { --p-section-gap: #{pxToRem(24)}; --p-content-gap: #{pxToRem(16)}; } diff --git a/src/scss/7-components/_footer-nav.scss b/src/scss/7-components/_footer-nav.scss index 94b268996e..747934285a 100644 --- a/src/scss/7-components/_footer-nav.scss +++ b/src/scss/7-components/_footer-nav.scss @@ -15,7 +15,7 @@ &-item {} } - @media #{$break1} { + @media #{$break1}, #{$break2} { flex-direction:column; gap:pxToRem(40); &-main { &-list { display:flex; flex-direction:column; gap:pxToRem(12); flex-basis:0; } diff --git a/src/scss/7-components/_hero.scss b/src/scss/7-components/_hero.scss index 7a4944f3bd..19f3f3a790 100644 --- a/src/scss/7-components/_hero.scss +++ b/src/scss/7-components/_hero.scss @@ -7,11 +7,6 @@ display:flex; flex-direction:column; gap:var(--p-hero-gap); text-align:center; max-inline-size:var(--p-hero-max-inline-size); margin-inline:auto; .#{$p}-sub-title { margin-block-end:pxToRem(4); } - - :where(.#{$p}-title, .#{$p}-display, .#{$p}-headline):not(:frist-child) { - color:hsl(var(--aw-color-primary)); margin-block-start:pxToRem(8); - } - .#{$p}-description { margin-block-start:pxToRem(20); color:hsl(var(--aw-color-secondary)); } &.is-align-start { @@ -21,15 +16,15 @@ &.is-horizontal { display:flex; flex-direction:column; margin-inline:initial; text-align:start; - @media #{$break1} { max-inline-size:initial; } - @media #{$break2open} { max-inline-size:pxToRem(650); } - @media #{$break3open} { + @media #{$break1}, #{$break2} { max-inline-size:initial; } + @media #{$break3open} { max-inline-size:pxToRem(650); } + @media #{$break4open} { flex-direction:row; gap:pxToRem(32); text-align:start; margin-inline:0; max-inline-size:none; >:nth-child(1) { flex:1.3; } >:nth-child(2) { flex:1; } } - @media #{$break1}, #{$break2}, #{$break3} { overflow:hidden; } + @media #{$break1}, #{$break2}, #{$break3}, #{$break4} { overflow:hidden; } } &.is-no-max-width { max-inline-size:initial; } diff --git a/src/scss/7-components/_info-boxes.scss b/src/scss/7-components/_info-boxes.scss index e06f041e0d..50f93c3b85 100644 --- a/src/scss/7-components/_info-boxes.scss +++ b/src/scss/7-components/_info-boxes.scss @@ -25,7 +25,10 @@ margin-block-start:pxToRem(16); color:hsl(var(--aw-color-primary)); } &-content { margin-block-start:pxToRem(4); color:hsl(var(--aw-color-secondary)); } - @media #{$break1} { + @media (max-width: 450px) { grid-template-columns: repeat(auto-fill, minmax(pxToRem(146), 1fr)); } + @media (min-width: 450.1px) and (max-width: 630px) { + grid-template-columns: repeat(auto-fill, minmax(pxToRem(210), 1fr)); + } } \ No newline at end of file diff --git a/src/scss/7-components/_info-table.scss b/src/scss/7-components/_info-table.scss index bd078c88d3..9e894ff0d0 100644 --- a/src/scss/7-components/_info-table.scss +++ b/src/scss/7-components/_info-table.scss @@ -21,7 +21,7 @@ &-scroll { border-radius:pxToRem(8); border:solid pxToRem(1) hsl(var(--aw-color-smooth)); overflow-x:auto; - @media #{$break1} { + @media #{$break1}, #{$break2} { min-inline-size: calc(100vw - #{pxToRem(32)}); border-start-end-radius:0; border-end-end-radius:0; diff --git a/src/scss/7-components/_investor-cards.scss b/src/scss/7-components/_investor-cards.scss index 175af907d3..fd91058ea3 100644 --- a/src/scss/7-components/_investor-cards.scss +++ b/src/scss/7-components/_investor-cards.scss @@ -4,11 +4,11 @@ display: flex; .#{$p}-card { display:grid; place-content:center; } - @media #{$break1} { + @media #{$break1}, #{$break2} { flex-direction:column; gap:pxToRem(20); > * { flex:1; } } - @media #{$break2open} { + @media #{$break3open} { max-inline-size:pxToRem(994); margin-inline:auto; flex-wrap:wrap; justify-content:center; gap:pxToRem(32); > * { min-inline-size:pxToRem(310); } diff --git a/src/scss/7-components/_main-footer.scss b/src/scss/7-components/_main-footer.scss index 7ee16f5c88..f07250ab2f 100644 --- a/src/scss/7-components/_main-footer.scss +++ b/src/scss/7-components/_main-footer.scss @@ -1,19 +1,19 @@ @use '../abstract' as *; .#{$p}-main-footer { - display:flex; justify-content:space-between; gap:pxToRem(16); font-size:pxToRem(14); + display:flex; justify-content:space-between; gap:pxToRem(16); padding-block:pxToRem(24); border-block-start:solid pxToRem(1) hsl(var(--aw-color-border)); font-size:var(--aw-font-size-tiny); color:hsl(var(--aw-color-secondary)); &-links { display:flex; gap:pxToRem(16); - @media #{$break1}, #{$break2} { flex-direction:column; } - @media #{$break3open} { } + @media #{$break1}, #{$break2}, #{$break3} { flex-direction:column; } + @media #{$break4open} { } } &.is-with-bg-color { z-index:25; background-color:hsl(var(--p-body-bg-color)); } - @media #{$break1}, #{$break2} { + @media #{$break1}, #{$break2}, #{$break3} { flex-direction: column; &-grid-1 { display: grid; @@ -29,7 +29,7 @@ } } - @media #{$break3open} { + @media #{$break4open} { &-grid-1 { display:flex; align-items:center; gap:pxToRem(32); inline-size:100%; &-column-1 { margin-inline-end:auto; } diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 1dce88d556..c1e64c9608 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -63,7 +63,7 @@ --p-main-header-border-color: rgb(0,0,0, 0.1); } - @media #{$break1}, #{$break2}{ + @media #{$break1}, #{$break2}, #{$break3} { display:none; } diff --git a/src/scss/7-components/_mobile-header.scss b/src/scss/7-components/_mobile-header.scss index 362a6a570a..1ac1d02770 100644 --- a/src/scss/7-components/_mobile-header.scss +++ b/src/scss/7-components/_mobile-header.scss @@ -11,7 +11,7 @@ &-start { display:flex; align-items: center; } &-end { display:flex; align-items: center; gap: pxToRem(8) } &.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(8)); backdrop-filter:blur(pxToRem(8)); } - @media #{$break3open} { display:none; } + @media #{$break4open} { display:none; } #{$theme-dark} &, &#{$theme-dark} { diff --git a/src/scss/7-components/_page-steps.scss b/src/scss/7-components/_page-steps.scss index 8d53e9fb1a..f2474c5a2c 100644 --- a/src/scss/7-components/_page-steps.scss +++ b/src/scss/7-components/_page-steps.scss @@ -16,8 +16,8 @@ } &-list { display:flex; flex-direction:column; gap:pxToRem(20); } .is-selected { color:hsl(var(--aw-color-primary)); } - @media #{$break1} {} - @media #{$break2open} { + @media #{$break1}, #{$break2} {} + @media #{$break3open} { position:sticky; inset-block-start: pxToRem(110); inline-size:pxToRem(280); /* was 236px. But to small for privacy page*/ } diff --git a/src/scss/7-components/_pricing-cards.scss b/src/scss/7-components/_pricing-cards.scss index 2a03b9bde6..787da06f20 100644 --- a/src/scss/7-components/_pricing-cards.scss +++ b/src/scss/7-components/_pricing-cards.scss @@ -4,10 +4,10 @@ &-header { padding-block-end:pxToRem(32); border-block-end:solid pxToRem(1) hsl(var(--aw-color-border)); } &-content { display:flex; flex-direction:column; gap:pxToRem(20); padding-block-start:pxToRem(32); } - @media #{$break1} { + @media #{$break1}, #{$break2} { &-list { display:flex; flex-direction:column; gap:pxToRem(32); } } - @media #{$break2open} { + @media #{$break3open} { &-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:pxToRem(32); } } } \ No newline at end of file diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss index 60d8d7627c..e7674737b6 100644 --- a/src/scss/7-components/_side-nav.scss +++ b/src/scss/7-components/_side-nav.scss @@ -85,7 +85,7 @@ } &-mobile-footer-buttons { display:none; } - @media #{$break1} { + @media #{$break1}, #{$break2} { &-open { overflow:hidden; } &-wrapper { padding-inline:0; } &-mobile-footer-buttons { diff --git a/src/scss/7-components/_timeline-content.scss b/src/scss/7-components/_timeline-content.scss index 6522280417..e973ecc166 100644 --- a/src/scss/7-components/_timeline-content.scss +++ b/src/scss/7-components/_timeline-content.scss @@ -3,14 +3,14 @@ .#{$p}-timeline-content { &-list { display:flex; flex-direction:column; - @media #{$break1} { gap:pxToRem(68); } - @media #{$break2open} { gap:pxToRem(180); } + @media #{$break1}, #{$break2} { gap:pxToRem(68); } + @media #{$break3open} { gap:pxToRem(180); } } &-item { display:flex; flex-direction:column; gap:pxToRem(180); &-top {} &-bottom { - @media #{$break1} { display:none; } + @media #{$break1}, #{$break2} { display:none; } } } } diff --git a/src/scss/8-sequences/_category-header.scss b/src/scss/8-sequences/_category-header.scss index 25df63e725..60767e03ee 100644 --- a/src/scss/8-sequences/_category-header.scss +++ b/src/scss/8-sequences/_category-header.scss @@ -5,11 +5,11 @@ &-content { display:flex; gap:pxToRem(24); } &-description { max-inline-size:pxToRem(892); } - @media #{$break1} { + @media #{$break1}, #{$break2} { &-content { flex-direction:column; } .#{$p}-input-text-search-wrapper { margin-block-start:pxToRem(24); } } - @media #{$break2open} { + @media #{$break3open} { &-content { justify-content:space-between; } .#{$p}-input-text-search-wrapper { align-self:end; margin-block-start:pxToRem(40); } } diff --git a/src/scss/8-sequences/_feature-article.scss b/src/scss/8-sequences/_feature-article.scss index fd482d1bce..da3441bd86 100644 --- a/src/scss/8-sequences/_feature-article.scss +++ b/src/scss/8-sequences/_feature-article.scss @@ -6,7 +6,7 @@ } &-content { display:flex; flex-direction:column; max-inline-size:pxToRem(450); } - @media #{$break1} { + @media #{$break1}, #{$break2} { display:flex; flex-direction:column; gap:pxToRem(24); &-header { display:flex; flex-direction:column; gap:pxToRem(4); } &-content { @@ -15,7 +15,7 @@ } .#{$p}-button { margin-block-start:pxToRem(32); } } - @media #{$break2open} { + @media #{$break3open} { display:grid; grid-template-columns:repeat(2, 1fr); gap:pxToRem(32); &-content { padding:pxToRem(24); gap:pxToRem(16); diff --git a/src/scss/8-sequences/_grid-articles.scss b/src/scss/8-sequences/_grid-articles.scss index 3cb75afbc9..b876dd3440 100644 --- a/src/scss/8-sequences/_grid-articles.scss +++ b/src/scss/8-sequences/_grid-articles.scss @@ -85,10 +85,10 @@ --p-grid-articles-item-bg-color-default: var(--aw-color-white) / 0.06; } - @media #{$break1} { + @media #{$break1}, #{$break2} { gap:pxToRem(32); } - @media #{$break2open} { + @media #{$break3open} { gap:pxToRem(48); } } diff --git a/src/scss/8-sequences/_main-article.scss b/src/scss/8-sequences/_main-article.scss index fdc85a67ee..d8e788eabc 100644 --- a/src/scss/8-sequences/_main-article.scss +++ b/src/scss/8-sequences/_main-article.scss @@ -5,10 +5,10 @@ position:relative; display:flex; flex-direction:column; gap:pxToRem(8); margin-block-end:pxToRem(32); - @media #{$break2open} { + @media #{$break3open} { padding-block-end:pxToRem(32); border-block-end:solid pxToRem(1) hsl(var(--aw-color-border)); } - @media #{$break3open} { + @media #{$break4open} { .#{$p}-link { position:absolute; inset-inline-end:calc(100% + #{pxToRem(74)}); @@ -17,7 +17,7 @@ } } - @media #{$break2open} { + @media #{$break3open} { .#{$p}-media-container { margin-inline:pxToRem(-55); } } } \ No newline at end of file diff --git a/src/scss/9-grids/_grid-1-1.scss b/src/scss/9-grids/_grid-1-1.scss index df374fc1a1..718b8d980e 100644 --- a/src/scss/9-grids/_grid-1-1.scss +++ b/src/scss/9-grids/_grid-1-1.scss @@ -5,7 +5,7 @@ display: grid; gap: var(--p-grid-1-1-gap); - @media #{$break3open} { + @media #{$break4open} { --p-grid-1-1-gap-desktop: var(--grid-1-1-gap-desktop, 0); gap: var(--p-grid-1-1-gap-desktop); @@ -15,7 +15,7 @@ .#{$p}-grid-1-1-opt-2 { display: grid; - @media #{$break2open} { + @media #{$break3open} { grid-template-columns: repeat(2, 1fr); } diff --git a/src/scss/9-grids/_grid-120-1fr-auto.scss b/src/scss/9-grids/_grid-120-1fr-auto.scss index f2cf8198fe..b8e89b6954 100644 --- a/src/scss/9-grids/_grid-120-1fr-auto.scss +++ b/src/scss/9-grids/_grid-120-1fr-auto.scss @@ -6,11 +6,11 @@ &-side { grid-area:side; } &-main { grid-area:main; } - @media #{$break1} { + @media #{$break1}, #{$break2} { padding-block-start:pxToRem(40); &-header { padding-block-end:pxToRem(24); } } - @media #{$break2open} { + @media #{$break3open} { display: grid; grid-template-columns:pxToRem(276) max(#{pxToRem(680)}) auto; grid-template-areas: ". header header" diff --git a/src/scss/9-grids/_grid-15-25-desktop.scss b/src/scss/9-grids/_grid-15-25-desktop.scss index acb6315702..9faaa1f7cf 100644 --- a/src/scss/9-grids/_grid-15-25-desktop.scss +++ b/src/scss/9-grids/_grid-15-25-desktop.scss @@ -2,10 +2,10 @@ .#{$p}-grid-15-25-desktop { display:flex; - @media #{$break1} { + @media #{$break1}, #{$break2} { flex-direction:column; } - @media #{$break2open} { + @media #{$break3open} { >:nth-child(1) {flex:1.5; } >:nth-child(2) {flex:2.5; } } diff --git a/src/scss/9-grids/_grid-2c-4c.scss b/src/scss/9-grids/_grid-2c-4c.scss index 68d8c4ca92..b639651577 100644 --- a/src/scss/9-grids/_grid-2c-4c.scss +++ b/src/scss/9-grids/_grid-2c-4c.scss @@ -7,12 +7,12 @@ --p-column-gap-desktop: var(--column-gap-desktop, #{pxToRem(32)}); --p-row-gap-desktop: var(--row-gap-desktop, #{pxToRem(48)}); display: grid; - @media #{$break1} { + @media #{$break1}, #{$break2} { grid-template-columns: repeat(2, 1fr); column-gap: var(--p-column-gap-mobile); row-gap: var(--p-row-gap-mobile); } - @media #{$break2open} { + @media #{$break3open} { grid-template-columns: repeat(4, 1fr); column-gap: var(--p-column-gap-desktop); row-gap: var(--p-row-gap-desktop); diff --git a/src/scss/9-grids/_grid-3-desktop-1-mobile.scss b/src/scss/9-grids/_grid-3-desktop-1-mobile.scss index e4adff939c..df18003df9 100644 --- a/src/scss/9-grids/_grid-3-desktop-1-mobile.scss +++ b/src/scss/9-grids/_grid-3-desktop-1-mobile.scss @@ -3,7 +3,7 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: pxToRem(32); - @media #{$break1} { + @media #{$break1}, #{$break2} { grid-template-columns:1fr; } } \ No newline at end of file diff --git a/src/scss/9-grids/_grid-3c-4c-6c.scss b/src/scss/9-grids/_grid-3c-4c-6c.scss index cf3c45ebf5..d38f81b92c 100644 --- a/src/scss/9-grids/_grid-3c-4c-6c.scss +++ b/src/scss/9-grids/_grid-3c-4c-6c.scss @@ -2,9 +2,9 @@ .#{$p}-grid-3c-4c-6c { display: grid; - @media #{$break1} { grid-template-columns: repeat(3, 1fr); gap:pxToRem(40); } - @media #{$break2} { grid-template-columns: repeat(4, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); } - @media #{$break3open} { grid-template-columns: repeat(6, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); } + @media #{$break1}, #{$break2} { grid-template-columns: repeat(3, 1fr); gap:pxToRem(40); } + @media #{$break3} { grid-template-columns: repeat(4, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); } + @media #{$break4open} { grid-template-columns: repeat(6, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); } &.is-for-logos { text-align:center; diff --git a/src/scss/9-grids/_grid-4-6.scss b/src/scss/9-grids/_grid-4-6.scss index 9d0eafad99..25ae6a7f98 100644 --- a/src/scss/9-grids/_grid-4-6.scss +++ b/src/scss/9-grids/_grid-4-6.scss @@ -2,10 +2,10 @@ .#{$p}-grid-4-6 { > * { min-inline-size:0; } - @media #{$break1}, #{$break2} { + @media #{$break1}, #{$break2}, #{$break3} { display:flex; flex-direction:column; gap:pxToRem(64); } - @media #{$break3open} { + @media #{$break4open} { display:grid; grid-template-columns:4fr 6fr; gap:pxToRem(80); } } \ No newline at end of file diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index 73e9c7a3fc..b58092fe29 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -22,7 +22,7 @@ .#{$p}-main-header-wrapper { max-inline-size:none; } - @media #{$break1} { + @media #{$break1}, #{$break2} { --p-grid-huge-navs-padding-inline: #{pxToRem(20)}; padding-inline:var(--p-grid-huge-navs-padding-inline); .#{$p}-mobile-header { margin-inline: calc(var(--p-grid-huge-navs-padding-inline) * -1); } @@ -34,13 +34,13 @@ .#{$p}-references-menu { display:none!important; } } - @media #{$break1}, #{$break2}, #{$break6open} { + @media #{$break1}, #{$break2}, #{$break3}, #{$break7open} { .#{$p}-side-nav { .#{$p}-icon-button {display:none; } } } - @media #{$break2} { + @media #{$break3} { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "a-header a-header" @@ -56,7 +56,7 @@ } } - @media #{$break2}, #{$break3}, #{$break4} { + @media #{$break3}, #{$break4}, #{$break5} { .#{$p}-references-menu { #refOpen { position:sticky; inset-block-start:pxToRem(213); } &-content { @@ -77,7 +77,7 @@ } } - @media #{$break2open} { + @media #{$break3open} { .#{$p}-side-nav-wrapper { border-inline-end:solid pxToRem(1) hsl(var(--aw-color-border)); } .#{$p}-article { &-header { @@ -97,7 +97,7 @@ &-content { position:sticky; inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position); } } } - @media #{$break3open} { + @media #{$break4open} { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto 1fr auto; /* header article-header content footer */ @@ -105,7 +105,7 @@ "side-a main side-b" "side-a footer footer"; } - @media #{$break3}, #{$break4}, #{$break5} { + @media #{$break4}, #{$break5}, #{$break6} { .#{$p}-side-nav { max-inline-size:var(--p-grid-huge-navs-side-nav-width-closed); &-wrapper { @@ -135,7 +135,7 @@ } } } - @media #{$break5open} { + @media #{$break6open} { .#{$p}-references-menu { #refOpen, #refClose { display:none; } &-content { @@ -144,7 +144,7 @@ } } } - @media #{$break6open} { + @media #{$break7open} { .#{$p}-side-nav { inline-size:var(--p-grid-huge-navs-side-nav-width-opened); &-wrapper { padding-block:0; } diff --git a/src/scss/9-grids/_grid-row-2.scss b/src/scss/9-grids/_grid-row-2.scss index b6cfbd1339..a6f27b963c 100644 --- a/src/scss/9-grids/_grid-row-2.scss +++ b/src/scss/9-grids/_grid-row-2.scss @@ -3,8 +3,8 @@ .#{$p}-grid-row-2 { display:grid; gap:pxToRem(32); li > * { min-block-size:100%; } - @media #{$break1} {} - @media #{$break2open} { + @media #{$break1}, #{$break2} {} + @media #{$break3open} { grid-template-columns: repeat(2, 1fr); } } \ No newline at end of file diff --git a/src/scss/9-grids/_grid-row-4.scss b/src/scss/9-grids/_grid-row-4.scss index bfd8864594..42db10a196 100644 --- a/src/scss/9-grids/_grid-row-4.scss +++ b/src/scss/9-grids/_grid-row-4.scss @@ -7,7 +7,7 @@ li > * { min-block-size:100%; } - @media #{$break1} { + @media #{$break1}, #{$break2} { &-mobile-2 { --p-gap-mobile: var(--gap-mobile); gap: var(--gap-mobile, var(--p-gap)); @@ -15,7 +15,7 @@ .is-mobile-col-span-2 { grid-column:span 2; } } } - @media #{$break2open} { + @media #{$break3open} { grid-template-columns: repeat(4, 1fr); } } \ No newline at end of file diff --git a/src/scss/9-grids/_grid-side-nav.scss b/src/scss/9-grids/_grid-side-nav.scss index 947e886ea9..b5bda80a56 100644 --- a/src/scss/9-grids/_grid-side-nav.scss +++ b/src/scss/9-grids/_grid-side-nav.scss @@ -7,7 +7,7 @@ .#{$p}-main-section { grid-area:main; } //.#{$p}-main-footer { grid-area:footer; } - @media #{$break1} { + @media #{$break1}, #{$break2} { &.#{$p}-container { padding-inline:pxToRem(20); } .#{$p}-side-nav { display:none; max-inline-size:none; padding-inline:pxToRem(16); } .#{$p}-main-section { padding-inline:pxToRem(20); padding-block-start:pxToRem(32); } @@ -18,7 +18,7 @@ .#{$p}-side-nav { display:block!important; } } } - @media #{$break2} { + @media #{$break3} { .#{$p}-side-nav { display:none; position:fixed; inset-inline-start:0; inset-block-start:pxToRem(73); inset-block-end:0; background:hsl(var(--aw-color-background)); inline-size:pxToRem(280); block-size:initial; border-inline-end:solid pxToRem(1) hsl(var(--color-border)); @@ -27,7 +27,7 @@ .#{$p}-side-nav { display:block!important; } } } - @media #{$break2open} { + @media #{$break3open} { .#{$p}-main-section { inline-size:100%; max-inline-size:pxToRem(1102); padding-inline:pxToRem(24); margin-inline:auto; .#{$p}-hero:first-child { @@ -36,7 +36,7 @@ > *:not(:first-child):where(:not(.u-position-absolute)) { margin-block-start:pxToRem(160); } } } - @media #{$break3open} { + @media #{$break4open} { display:grid; grid-template-columns: pxToRem(280) minmax(0, 1fr); grid-template-areas: "header header" "side main"; diff --git a/src/scss/9-grids/_grid-two-side-navs.scss b/src/scss/9-grids/_grid-two-side-navs.scss index ee9b511f3b..7a17b59929 100644 --- a/src/scss/9-grids/_grid-two-side-navs.scss +++ b/src/scss/9-grids/_grid-two-side-navs.scss @@ -25,7 +25,7 @@ &-header { margin-block-start: var(--p-grid-huge-navs--margin-top-content-side-b); } } - @media #{$break1} { + @media #{$break1}, #{$break2} { //--p-grid-huge-navs-padding-inline: #{pxToRem(20)}; padding-inline:var(--p-grid-huge-navs-padding-inline); .#{$p}-mobile-header { margin-inline: calc(var(--p-grid-huge-navs-padding-inline) * -1); } @@ -38,7 +38,7 @@ .#{$p}-references-menu { display:none!important; } } - @media #{$break2} { + @media #{$break3} { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "a-header side-b" @@ -54,7 +54,7 @@ } } - @media #{$break2open} { + @media #{$break3open} { .#{$p}-side-nav-wrapper { border-inline-end:solid pxToRem(1) hsl(var(--aw-color-border)); } .#{$p}-article { &-header { @@ -78,7 +78,7 @@ } } } - @media #{$break3open} { + @media #{$break4open} { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto 1fr auto; /* header article-header content footer */ diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss index 07a746a55c..098d652953 100644 --- a/src/scss/_10-utilities.scss +++ b/src/scss/_10-utilities.scss @@ -1,19 +1,19 @@ @use "abstract" as *; -.#{$p}-u-hide-mobile { @media #{$break1}{ display:none!important; } } -.#{$p}-u-opacity-40-mobile { @media #{$break1}{ opacity:0.4; } } +.#{$p}-u-hide-mobile { @media #{$break1}, #{$break2} { display:none!important; } } +.#{$p}-u-opacity-40-mobile { @media #{$break1}, #{$break2} { opacity:0.4; } } .#{$p}-u-opacity-64 { opacity:0.64!important; } .#{$p}-u-opacity-90 { opacity:0.9!important; } -.#{$p}-u-overflow-hidden-break1-to-break3 { - @media #{$break1}, #{$break2}, #{$break3} { +.#{$p}-u-overflow-hidden-break1-to-break4 { + @media #{$break1}, #{$break2}, #{$break3}, #{$break4} { overflow:hidden; } } .#{$p}-u-flex-vertical {display:flex!important; flex-direction:column!important; } -.#{$p}-u-flex-vertical-mobile { @media #{$break1} { flex-direction:column!important; } } -.#{$p}-u-flex-vertical-reverse-mobile { @media #{$break1} { flex-direction:column-reverse!important; } } +.#{$p}-u-flex-vertical-mobile { @media #{$break1}, #{$break2} { flex-direction:column!important; } } +.#{$p}-u-flex-vertical-reverse-mobile { @media #{$break1}, #{$break2} { flex-direction:column-reverse!important; } } .#{$p}-u-padding-20 { padding:pxToRem(20); } @@ -33,30 +33,30 @@ .#{$p}-u-padding-block-end-40 { padding-block-end:pxToRem(40); } .#{$p}-u-padding-block-end-56 { padding-block-end:pxToRem(56); } .#{$p}-u-padding-block-end-d-160-m-80 { - @media #{$break1} { padding-block-end:pxToRem(80); } - @media #{$break2open} { padding-block-end:pxToRem(160); } + @media #{$break1}, #{$break2} { padding-block-end:pxToRem(80); } + @media #{$break3open} { padding-block-end:pxToRem(160); } } .#{$p}-u-padding-inline-8 { padding-inline:pxToRem(8); } .#{$p}-u-padding-inline-16 { padding-inline:pxToRem(16); } -.#{$p}-u-padding-inline-start-48-not-break1 { @media #{$break2open} { padding-inline-start:pxToRem(48); } } +.#{$p}-u-padding-inline-start-48-not-break1 { @media #{$break3open} { padding-inline-start:pxToRem(48); } } -.#{$p}-u-margin-inline-auto-mobile { @media #{$break1}{ margin-inline:auto;} } +.#{$p}-u-margin-inline-auto-mobile { @media #{$break1}, #{$break2} { margin-inline:auto;} } .#{$p}-u-margin-inline-8-negative { margin-inline:pxToRem(-8); } .#{$p}-u-margin-inline-20-negative { margin-inline:pxToRem(-20); } .#{$p}-u-margin-inline-32-negative { margin-inline:pxToRem(-32); } .#{$p}-u-margin-block-0 { margin-block:0; } .#{$p}-u-margin-block-start-40 { margin-block-start:pxToRem(40); } -.#{$p}-u-margin-block-start-40-mobile { @media #{$break1} {margin-block-start:pxToRem(40);} } +.#{$p}-u-margin-block-start-40-mobile { @media #{$break1}, #{$break2} {margin-block-start:pxToRem(40);} } .#{$p}-u-sep { border:solid pxToRem(1) hsl(var(--aw-color-smooth));} .#{$p}-u-sep-block { border-block:solid pxToRem(1) hsl(var(--aw-color-smooth));} .#{$p}-u-sep-block-start { border-block-start:solid pxToRem(1) hsl(var(--aw-color-smooth));} -.#{$p}-u-sep-inline-start-not-break1{ @media #{$break2open} { border-inline-start:solid pxToRem(1) hsl(var(--aw-color-smooth)); } } +.#{$p}-u-sep-inline-start-not-break1-or-break2{ @media #{$break3open} { border-inline-start:solid pxToRem(1) hsl(var(--aw-color-smooth)); } } -.#{$p}-u-padding-block-end-136-not-mobile { @media #{$break2open} { padding-block-end:pxToRem(136)!important;} } +.#{$p}-u-padding-block-end-136-not-mobile { @media #{$break3open} { padding-block-end:pxToRem(136)!important;} } .#{$p}-u-border-radius-8 { border-radius:pxToRem(8); } @@ -74,7 +74,7 @@ .#{$p}-u-max-height-300 { max-block-size:pxToRem(300); } -.#{$p}-u-trim-1 { @include trim(1); } +.#{$p}-u-trim-1 { @include trim(1); } .#{$p}-u-line-height-1-2 { line-height:1.2!important; } .#{$p}-u-line-height-2 { line-height:2!important; } @@ -82,23 +82,23 @@ .#{$p}-u-block-size-48 { block-size:pxToRem(48); } .#{$p}-u-block-size-160 { block-size:pxToRem(160); } -.#{$p}-u-inline-width-100-percent-mobile { @media #{$break1}, #{$break2} { inline-size:100%; } } -.#{$p}-u-inline-width-100-percent-mobile-break1 { @media #{$break1} { inline-size:100%; } } -.#{$p}-u-max-inline-size-none-mobile { @media #{$break1} { max-inline-size:none;} } -.#{$p}-u-max-inline-width-584-mobile{ @media #{$break1}, #{$break2} { max-inline-size:pxToRem(584);} } -.#{$p}-u-margin-inline-20 { margin-inline:pxToRem(20); } -.#{$p}-u-margin-inline-auto-mobile { @media #{$break1}, #{$break2} { margin-inline:auto; } } +.#{$p}-u-inline-width-100-percent-mobile { @media #{$break1}, #{$break2}, #{$break3} { inline-size:100%; } } +.#{$p}-u-inline-width-100-percent-mobile-break1-and-break2 { @media #{$break1}, #{$break2} { inline-size:100%; } } +.#{$p}-u-max-inline-size-none-mobile { @media #{$break1}, #{$break2} { max-inline-size:none;} } +.#{$p}-u-max-inline-width-584-mobile { @media #{$break1}, #{$break2}, #{$break3} { max-inline-size:pxToRem(584);} } +.#{$p}-u-margin-inline-20 { margin-inline:pxToRem(20); } +.#{$p}-u-margin-inline-auto-mobile { @media #{$break1}, #{$break2}, #{$break3} { margin-inline:auto; } } -.#{$p}-u-margin-block-32-mobile { @media #{$break1} { margin-block:pxToRem(32);} } -.#{$p}-u-margin-block-40-not-mobile { @media #{$break2open} { margin-block:pxToRem(40);} } +.#{$p}-u-margin-block-32-mobile { @media #{$break1}, #{$break2} { margin-block:pxToRem(32);} } +.#{$p}-u-margin-block-40-not-mobile { @media #{$break3open} { margin-block:pxToRem(40);} } .#{$p}-u-cross-start { align-items:start!important; } .#{$p}-u-cross-center{ align-items:center!important; } .#{$p}-u-margin-block-120w-80s { - @media #{$break1} { margin-block:pxToRem(80)!important; } - @media #{$break2open} { margin-block:pxToRem(120)!important; } + @media #{$break1}, #{$break2} { margin-block:pxToRem(80)!important; } + @media #{$break3open} { margin-block:pxToRem(120)!important; } } .#{$p}-u-margin-block-start-2 { margin-block-start:pxToRem(2); } .#{$p}-u-margin-block-start-6 { margin-block-start:pxToRem(6); } @@ -128,7 +128,7 @@ .#{$p}-u-min-block-size-320 { min-block-size:#{pxToRem(320)}!important; } -.#{$p}-u-flex-direction-column-mobile { @media #{$break1} { flex-direction:column; } } +.#{$p}-u-flex-direction-column-mobile { @media #{$break1}, #{$break2} { flex-direction:column; } } .#{$p}-u-flex-basis-200 { flex-basis:pxToRem(200); } .#{$p}-u-flex-basis-300 { flex-basis:pxToRem(300); } .#{$p}-u-flex-basis-400 { flex-basis:pxToRem(400); } @@ -136,7 +136,7 @@ .#{$p}-u-gap-6 { gap:pxToRem(6); } .#{$p}-u-gap-20 { gap:pxToRem(20)!important; } -.#{$p}-u-gap-20-mobile { @media #{$break1} { gap:pxToRem(20)!important; } } +.#{$p}-u-gap-20-mobile { @media #{$break1}, #{$break2} { gap:pxToRem(20)!important; } } .#{$p}-u-gap-32 { gap:pxToRem(32)!important; } .#{$p}-u-gap-80 { gap:pxToRem(80); } .#{$p}-u-gap-96 { gap:pxToRem(96); } @@ -150,7 +150,7 @@ .#{$p}-u-text-align-start { text-align:start!important; } .#{$p}-u-text-align-center { text-align:center!important; } -.#{$p}-u-mobile-align-text-center { @media #{$break1} { text-align:center!important;} } +.#{$p}-u-mobile-align-text-center { @media #{$break1}, #{$break2} { text-align:center!important;} } .#{$p}-u-padding-inline-0 { padding-inline:0!important; } .#{$p}-u-padding-inline-12 { padding-inline:pxToRem(12)!important; } .#{$p}-u-padding-inline-64 { padding-inline:pxToRem(64)!important; } @@ -210,30 +210,30 @@ /* functional */ .#{$p}-is-mobile-closed { - @media #{$break1} { + @media #{$break1}, #{$break2} { display:none!important; } } /* responsive global state classes */ .#{$p}-is-only-mobile { - @media #{$break2open} { display:none!important; } + @media #{$break3open} { display:none!important; } } .#{$p}-is-only-tablet { - @media #{$break1}, #{$break3open} { display:none!important; } + @media #{$break1}, #{$break4open} { display:none!important; } } .#{$p}-is-only-desktop { - @media #{$break1}, #{$break2} { display:none!important; } + @media #{$break1}, #{$break2}, #{$break3} { display:none!important; } } .#{$p}-is-not-mobile { - @media #{$break1} { display:none!important; } + @media #{$break1}, #{$break2} { display:none!important; } } .#{$p}-is-not-desktop { - @media #{$break3open} { display:none!important; } + @media #{$break4open} { display:none!important; } } .#{$p}-u-gradient-mobile-align { diff --git a/src/scss/abstract/variables/_devices.scss b/src/scss/abstract/variables/_devices.scss index e665e37b8c..161a492fc2 100644 --- a/src/scss/abstract/variables/_devices.scss +++ b/src/scss/abstract/variables/_devices.scss @@ -1,11 +1,13 @@ // Responsive Variables -$break1: "(max-width:1023.9px)"; -$break2: "(min-width:1024px) and (max-width:1279.9px)"; -$break2open: "(min-width:1024px)"; -$break3: "(min-width:1280px) and (max-width:1439.9px)"; -$break3open: "(min-width:1280px)"; -$break4: "(min-width:1440px) and (max-width:1727.9px)"; -$break4open: "(min-width:1440px)"; -$break5: "(min-width:1728px) and (max-width:1919.9px)"; -$break5open: "(min-width:1728px)"; -$break6open: "(min-width:1920px)"; \ No newline at end of file +$break1: "(max-width:767.9px)"; +$break2: "(min-width:768px) and (max-width:1023.9px)"; +$break2open: "(min-width:768px)"; +$break3: "(min-width:1024px) and (max-width:1279.9px)"; +$break3open: "(min-width:1024px)"; +$break4: "(min-width:1280px) and (max-width:1439.9px)"; +$break4open: "(min-width:1280px)"; +$break5: "(min-width:1440px) and (max-width:1727.9px)"; +$break5open: "(min-width:1440px)"; +$break6: "(min-width:1728px) and (max-width:1919.9px)"; +$break6open: "(min-width:1728px)"; +$break7open: "(min-width:1920px)"; \ No newline at end of file