From c0493dcd007341b2b486c83d665ba276089b3234 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 07:40:23 -0500 Subject: [PATCH 01/16] Inner scroll in big screen - fix issue --- src/scss/9-grids/_grid-huge-navs.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index 7d2a7ade99..43fb500a20 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -138,7 +138,10 @@ @media #{$break5open} { .#{$p}-references-menu { #refOpen, #refClose { display:none; } - &-content { position:sticky; inset-block-start:pxToRem(213); } + &-content { + @include scroll(); + position:sticky; inset-block-start:pxToRem(213); max-block-size:calc(100dvh - #{pxToRem(213)}); + } } } @media #{$break6open} { From d160aa67e494b869c5b68b7e8d88ccefc0414bcd Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 15:33:53 -0500 Subject: [PATCH 02/16] Fix stretch in grid-huge-nav --- src/scss/7-components/_main-header.scss | 10 ++-------- src/scss/9-grids/_grid-huge-navs.scss | 2 ++ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 7c51d5fee3..33db50f863 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -16,14 +16,8 @@ } &-wrapper { - display: flex; - justify-content: center; - margin-inline: auto; - - max-width: pxToRem(1728); - padding-block: var(--p-main-header-padding-block); - flex-wrap: wrap; - gap: 1rem; + display:flex; flex-wrap:wrap; justify-content:center; gap:pxToRem(16); margin-inline:auto; + max-inline-size:pxToRem(1728); padding-block:var(--p-main-header-padding-block); } &-start { display:flex; align-items:center; } &-end { display:flex; margin-inline-start:auto; align-items:center; gap:pxToRem(8) } diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index 43fb500a20..a24667769c 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -20,6 +20,8 @@ .#{$p}-icon-button [class*="icon"]{transition:var(--transition); } + .#{$p}-main-header-wrapper { max-inline-size:none; } + @media #{$break1} { --p-grid-huge-navs-padding-inline: #{pxToRem(20)}; padding-inline:var(--p-grid-huge-navs-padding-inline); From c30e5c7cebb9d8e2c9a92bf51b8f9dc5c22f0df0 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 15:38:22 -0500 Subject: [PATCH 03/16] fix roate button in side nav --- src/scss/9-grids/_grid-huge-navs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index a24667769c..12a1504f35 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -133,7 +133,7 @@ &-button { > *:not(:first-child) { opacity:1; } } - .#{$p}-icon-button [class*="icon"]{ rotate:180deg; } + .#{$p}-icon-button { transform-origin:center; rotate:180deg; } } } } From d833811c6e8a676dc71c70165a8f474318352eab Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 15:38:31 -0500 Subject: [PATCH 04/16] fix roate button in side nav --- src/scss/9-grids/_grid-huge-navs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index 12a1504f35..94a5fc649b 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -133,7 +133,7 @@ &-button { > *:not(:first-child) { opacity:1; } } - .#{$p}-icon-button { transform-origin:center; rotate:180deg; } + .#{$p}-icon-button { rotate:180deg; } } } } From 58c240dde2d73cf47cfdf8eb993cfe22934ddf3e Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 17:23:26 -0500 Subject: [PATCH 05/16] Plans box - fix some style --- src/lib/components/PreFooter.svelte | 2 +- src/scss/7-components/_strip-plans.scss | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/lib/components/PreFooter.svelte b/src/lib/components/PreFooter.svelte index c53668fdca..b70d08019e 100644 --- a/src/lib/components/PreFooter.svelte +++ b/src/lib/components/PreFooter.svelte @@ -48,7 +48,7 @@

Pro

$15
-
per org member/month
+
per user/month

For pro developers and teams that need to scale their products. diff --git a/src/scss/7-components/_strip-plans.scss b/src/scss/7-components/_strip-plans.scss index 04598ec3fc..45d6772e68 100644 --- a/src/scss/7-components/_strip-plans.scss +++ b/src/scss/7-components/_strip-plans.scss @@ -11,18 +11,19 @@ container-name:strip-plans; container-type:inline-size; padding-block:pxToRem(32); &:nth-child(n + 2) { border-block-start:solid pxToRem(1) rgba(255, 255, 255, 0.12); } + &:last-child { padding-block-end:0; } &-wrapper { display:flex; justify-content:space-between; align-items:end; gap:pxToRem(48); } } &-plan { display:flex; flex-direction:column; gap:pxToRem(4); - flex:1; flex-basis:pxToRem(103); + flex:1; flex-basis:pxToRem(103); flex-shrink:0; .title { color:rgb(255 255 255 / 0.64); } .price { } - .info { color:rgb(255 255 255 / 0.64); } + .info { white-space:nowrap; color:rgb(255 255 255 / 0.64); } } - &-info { flex:2.5; flex-basis:pxToRem(230); } + &-info { flex:2.5; flex-basis:pxToRem(230); color:rgb(255 255 255 / 0.64); } .#{$p}-button { flex:1; white-space:nowrap; } /* responsive according container size */ From 62784de1a37c9577b30adeab258c8508b0312b51 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 17:35:42 -0500 Subject: [PATCH 06/16] Collapsible partial - update some styles --- src/scss/_10-utilities.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss index 3466c1221a..6866a93212 100644 --- a/src/scss/_10-utilities.scss +++ b/src/scss/_10-utilities.scss @@ -239,8 +239,9 @@ } /* override partial styles */ -.collapsible-button { - padding-block:pxToRem(14); +.collapsible { + &-button { padding-block:pxToRem(24); } + &-content { margin-block-start:pxToRem(-8); } } .#{$p}-u-flip-x { From 7310526fa766d32e2b18dff05cbaa15153e069ac Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 16 Oct 2023 17:58:21 -0500 Subject: [PATCH 07/16] Select - update some styles --- src/lib/components/Select.svelte | 2 +- src/scss/6-elements/_select.scss | 28 +++++++--------------------- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte index 16d34b0b1a..39ac4fa506 100644 --- a/src/lib/components/Select.svelte +++ b/src/lib/components/Select.svelte @@ -105,7 +105,7 @@ {#each groups as group} {@const isDefault = group.label === DEFAULT_GROUP} {#if isDefault} -

+
{#each options as option}
+
+ + Go to console + + -
- -
-
-
- - + + +
+ +
+
+
+ + - + - - -
- -
+
+ {#if isMac()} + ⌘ + {:else} + Ctrl + {/if} + K +
+
-
-
- +
+
+ - - - Go to console - -
+ > +
-
+
+
+
diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 33db50f863..1030f8dfa3 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -7,12 +7,14 @@ --p-main-header-border-color: rgb(0,0,0, 0.1); position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color)); - border-block-end: solid 1px var(--p-main-header-border-color); - padding-inline: clamp(1.25rem, 4vw, 120rem); + border-block-end: solid pxToRem(1) var(--p-main-header-border-color); + min-block-size:pxToRem(73); &.is-docs { - padding-inline: pxToRem(32); - + .#{$p}-main-header-wrapper { padding-inline:pxToRem(32); max-inline-size:var(--container-size-large); } + } + &.is-reference { + .#{$p}-main-header-wrapper { padding-inline:pxToRem(32); max-inline-size:var(--container-size-huge); } } &-wrapper { diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index 94a5fc649b..ab43b1b8d0 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -10,8 +10,8 @@ --p-grid-huge-navs-side-nav-width-opened: #{pxToRem(280)}; max-inline-size:var(--container-size-huge); margin-inline:auto; - .#{$p}-mobile-header { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); } - .#{$p}-main-header { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); /*padding-inline:var(--p-grid-huge-navs-padding-inline);*/ } + //.#{$p}-mobile-header { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); } + //.#{$p}-main-header { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); /*padding-inline:var(--p-grid-huge-navs-padding-inline);*/ } .#{$p}-article-header { grid-area:a-header; } .#{$p}-side-nav { grid-area:side-a; } .#{$p}-article { grid-area:main; } @@ -43,8 +43,7 @@ @media #{$break2} { display: grid; grid-template-columns: 1fr auto; - grid-template-areas: "header header" - "a-header a-header" + grid-template-areas: "a-header a-header" "main side-b" "footer footer"; .#{$p}-side-nav { @@ -102,8 +101,7 @@ display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto 1fr auto; /* header article-header content footer */ - grid-template-areas: "header header header" - "side-a a-header a-header" + grid-template-areas: "side-a a-header a-header" "side-a main side-b" "side-a footer footer"; } diff --git a/src/scss/9-grids/_grid-two-side-navs.scss b/src/scss/9-grids/_grid-two-side-navs.scss index edd99bd390..ab252e4fea 100644 --- a/src/scss/9-grids/_grid-two-side-navs.scss +++ b/src/scss/9-grids/_grid-two-side-navs.scss @@ -37,8 +37,7 @@ @media #{$break2} { display: grid; grid-template-columns: 1fr auto; - grid-template-areas: "header header" - "a-header side-b" + grid-template-areas: "a-header side-b" "main side-b" "footer footer"; .#{$p}-side-nav { @@ -80,8 +79,7 @@ display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto 1fr auto; /* header article-header content footer */ - grid-template-areas: "header header header" - "side-a a-header side-b" + grid-template-areas: "side-a a-header side-b" "side-a main side-b" "side-a footer footer"; .#{$p}-side-nav { inline-size:var(--p-grid-huge-navs-side-nav-width-opened); } From f09c38c515257d5b3e8f49b10ac5cacf7a2402ab Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 17 Oct 2023 09:11:41 -0500 Subject: [PATCH 09/16] Grid pages - refactor all pages grids in order main-header to stretch the page --- src/scss/7-components/_main-header.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 1030f8dfa3..7a739fb320 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -7,14 +7,14 @@ --p-main-header-border-color: rgb(0,0,0, 0.1); position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color)); - border-block-end: solid pxToRem(1) var(--p-main-header-border-color); + padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color); min-block-size:pxToRem(73); &.is-docs { - .#{$p}-main-header-wrapper { padding-inline:pxToRem(32); max-inline-size:var(--container-size-large); } + .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-large); } } &.is-reference { - .#{$p}-main-header-wrapper { padding-inline:pxToRem(32); max-inline-size:var(--container-size-huge); } + .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); } } &-wrapper { From f5d760c25208377886fe498b8929f8006491c6e0 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 18 Oct 2023 07:29:55 -0500 Subject: [PATCH 10/16] update color --- src/scss/1-css-variables/_colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/1-css-variables/_colors.scss b/src/scss/1-css-variables/_colors.scss index 5dd9697c4a..710b717723 100644 --- a/src/scss/1-css-variables/_colors.scss +++ b/src/scss/1-css-variables/_colors.scss @@ -12,7 +12,7 @@ --aw-color-card: var(--aw-color-white) / 0.9; --aw-color-smooth: var(--aw-color-greyscale-900) / 0.04; --aw-color-subtle: var(--aw-color-greyscale-50); - --aw-color-offset: var(--aw-color-black) / 0.06; + --aw-color-offset: var(--aw-color-black) / 0.08; --aw-color-border: var(--aw-color-greyscale-50); } From b165b116f0c7ee41398dffc8a8044bc4c5df6208 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 18 Oct 2023 11:20:46 -0500 Subject: [PATCH 11/16] Strip Plans - add more gap netween header to content --- src/scss/7-components/_strip-plans.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/7-components/_strip-plans.scss b/src/scss/7-components/_strip-plans.scss index 45d6772e68..dc611ea255 100644 --- a/src/scss/7-components/_strip-plans.scss +++ b/src/scss/7-components/_strip-plans.scss @@ -3,6 +3,7 @@ .#{$p}-strip-plans { &-header { container-name:strip-plans; container-type:inline-size; + margin-block-end:pxToRem(32); &-wrapper { display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16); } From 72bd42090bd00fb026bac08bbf99b626e0b63429 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 18 Oct 2023 18:42:09 -0500 Subject: [PATCH 12/16] Main Header - add extra padding in content pages for main-header - revert to changes of Thomas, onlt for those pages --- src/lib/layouts/Main.svelte | 2 +- src/scss/7-components/_main-header.scss | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte index 5a9d95427f..547d8d8c51 100644 --- a/src/lib/layouts/Main.svelte +++ b/src/lib/layouts/Main.svelte @@ -172,7 +172,7 @@
diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 7a739fb320..4cd98aab1a 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -9,7 +9,10 @@ position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color)); padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color); min-block-size:pxToRem(73); - + + &.is-special-padding { + padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */ + } &.is-docs { .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-large); } } From 96e79d453fe99e4abdfe140496352844037c4048 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 18 Oct 2023 18:50:44 -0500 Subject: [PATCH 13/16] Main Header - add extra padding in content pages for main-header - revert to changes of Thomas, onlt for those pages --- src/scss/7-components/_main-header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 4cd98aab1a..376469472e 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -12,6 +12,7 @@ &.is-special-padding { padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */ + } &.is-docs { .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-large); } From c0156229d20eb7d9f57ce623743e87f12a37ee09 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 18 Oct 2023 18:50:54 -0500 Subject: [PATCH 14/16] Main Header - add extra padding in content pages for main-header - revert to changes of Thomas, onlt for those pages --- src/scss/7-components/_main-header.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 376469472e..4cd98aab1a 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -12,7 +12,6 @@ &.is-special-padding { padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */ - } &.is-docs { .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-large); } From 6c7bb22aae048f21183155fca029d9b72c393190 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 23 Oct 2023 17:56:27 +0100 Subject: [PATCH 15/16] ref class --- src/lib/layouts/Docs.svelte | 78 ++++----- src/routes/docs/references/+layout.svelte | 184 +++++++++++----------- 2 files changed, 131 insertions(+), 131 deletions(-) diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte index d3eec47445..d88008be32 100644 --- a/src/lib/layouts/Docs.svelte +++ b/src/lib/layouts/Docs.svelte @@ -38,6 +38,7 @@ import { isMac } from '$lib/utils/platform'; export let variant: DocsLayoutVariant = 'default'; + export let isReferences = false; const variantClasses: Record = { default: 'aw-grid-side-nav aw-container u-padding-inline-0', @@ -64,18 +65,18 @@
@@ -83,32 +84,31 @@ Go to console - -
+
+ on:click={toggleSidenav} + class="aw-button is-text aw-is-not-desktop" + aria-label="open navigation" + > + +
diff --git a/src/routes/docs/references/+layout.svelte b/src/routes/docs/references/+layout.svelte index 3c13a1f3ae..965ffd6917 100644 --- a/src/routes/docs/references/+layout.svelte +++ b/src/routes/docs/references/+layout.svelte @@ -1,102 +1,102 @@ - - - + + + From bc394d27bdb2ac505e66524e88c29c910e774fdb Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 23 Oct 2023 12:15:20 -0500 Subject: [PATCH 16/16] Grid Huge Navs - small fix for secondary adder --- src/scss/9-grids/_grid-huge-navs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index ab43b1b8d0..41d01c4a28 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -82,7 +82,7 @@ .#{$p}-article { &-header { block-size:var(--p-grid-huge-navs-secondary-header-height); - margin-inline:var(--p-grid-huge-navs-padding-inline); + margin-inline-start:var(--p-grid-huge-navs-padding-inline); inset-block-start:var(--p-grid-huge-navs-main-header-height); //&::after { // content:""; display:block; block-size:pxToRem(24); position:absolute; inset-block-start:calc(100% + pxToRem(0.9)); inset-inline:0;