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/lib/components/Select.svelte b/src/lib/components/Select.svelte index 8285d9293c..a8764abc8f 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 group.options as option} +
+ +
-
-
+
+
-
-
- - Go to console - - -
-
-
-
-
- - - - - -
- -
+
+ {#if isMac()} + ⌘ + {:else} + Ctrl + {/if} + K +
+
-
-
- - - - Go to console - - -
+
+
+
+ + + + Go to console + +
-
+
+ +
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte index 680a503d43..88fec00ab5 100644 --- a/src/lib/layouts/Main.svelte +++ b/src/lib/layouts/Main.svelte @@ -163,7 +163,7 @@
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 @@ - - - + + + 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); } diff --git a/src/scss/6-elements/_select.scss b/src/scss/6-elements/_select.scss index 7fc8b5803b..7cc250dfa9 100644 --- a/src/scss/6-elements/_select.scss +++ b/src/scss/6-elements/_select.scss @@ -114,25 +114,13 @@ .#{$p}-select-menu { - all: unset; - display: flex; - flex-direction: column; - gap: pxToRem(8); - position: relative; - line-height: 1; - user-select: none; - - color: hsl(var(--aw-color-primary)); - font-size: pxToRem(14); - - border-radius: pxToRem(8); - line-height: 1.2; - padding-inline: pxToRem(4); - padding-block: pxToRem(4); - box-sizing: border-box; + all:unset; position:relative; display:flex; flex-direction:column; gap:pxToRem(8); + user-select:none; color:hsl(var(--aw-color-primary)); font-size:pxToRem(14); + border-radius:pxToRem(12); line-height:1.2; + box-sizing:border-box; padding-inline:pxToRem(4); padding-block: pxToRem(4); + max-block-size:pxToRem(300)!important; overflow-y:auto; + user-select: none; - max-height: pxToRem(290) !important; - overflow-y: auto; @mixin light-mode() { --p-select-menu-bg-color: var(--aw-color-white); @@ -140,7 +128,7 @@ --p-select-menu-box-shadow-color: var(--transparent); } @mixin dark-mode() { - --p-select-menu-bg-color: var(--aw-color-greyscale-800); + --p-select-menu-bg-color: var(--aw-color-greyscale-850); --p-select-menu-border-color: var(--aw-color-white) / 0.10; --p-select-menu-box-shadow-color: var(--transparent); } @@ -176,7 +164,7 @@ padding-block: pxToRem(4); padding-inline: pxToRem(4); - border-radius: pxToRem(6); + border-radius: pxToRem(8); scroll-margin-block: pxToRem(8); cursor: pointer; diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 7c51d5fee3..4cd98aab1a 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -7,23 +7,22 @@ --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); - - &.is-docs { - padding-inline: pxToRem(32); + 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); } + } + &.is-reference { + .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); } } &-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/7-components/_strip-plans.scss b/src/scss/7-components/_strip-plans.scss index 04598ec3fc..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); } @@ -11,18 +12,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 */ diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index 7d2a7ade99..41d01c4a28 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; } @@ -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); @@ -41,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 { @@ -81,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; @@ -100,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"; } @@ -131,14 +131,17 @@ &-button { > *:not(:first-child) { opacity:1; } } - .#{$p}-icon-button [class*="icon"]{ rotate:180deg; } + .#{$p}-icon-button { rotate:180deg; } } } } @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} { 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); } 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 {