diff --git a/postcss.config.cjs b/postcss.config.cjs index b3da3fe8..5fb9e65f 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,7 +1,7 @@ // @ts-nocheck -const csso = require('postcss-csso'); +const csso = require("postcss-csso"); module.exports = { // Restructure false, otherwise FFG site breaks - plugins: [require("autoprefixer"), csso({restructure: false})], + plugins: [require("autoprefixer"), csso({ restructure: false })], }; diff --git a/src/components/collection-card/collection-card.module.scss b/src/components/collection-card/collection-card.module.scss index 0f723055..fde07355 100644 --- a/src/components/collection-card/collection-card.module.scss +++ b/src/components/collection-card/collection-card.module.scss @@ -50,7 +50,7 @@ margin-left: var(--collection-card_content_padding-left); margin-right: var(--collection-card_content_padding-right); - &> div { + & > div { // prevent div from expanding beyond container size due to text overflow min-width: 0; } @@ -61,7 +61,8 @@ margin-bottom: var(--collection-card_title_padding-bottom); } -.title, .description { +.title, +.description { // prevents text overflow when the container is smaller than a single word (issue #620) // - this otherwise has no effect, since the container can always expand vertically overflow: hidden; diff --git a/src/styles/button.scss b/src/styles/button.scss index f18af5d1..99b504db 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -187,7 +187,8 @@ background-color: var(--btn_primary_background-color_emphasized_hovered); } - &:focus-visible, &.focusVisible { + &:focus-visible, + &.focusVisible { box-shadow: 0 0 0 var(--btn_primary_focus-outline_width) var(--btn_primary_focus-oultine_color); } @@ -205,7 +206,8 @@ background-color: var(--btn_secondary_background-color_emphasized_hovered); } - &:focus-visible, &.focusVisible { + &:focus-visible, + &.focusVisible { box-shadow: 0 0 0 var(--btn_secondary_focus-outline_width) var(--btn_secondary_focus-oultine_color); } @@ -223,7 +225,8 @@ background-color: var(--btn_primary_background-color_default_hovered); } - &:focus-visible, &.focusVisible { + &:focus-visible, + &.focusVisible { box-shadow: 0 0 0 var(--btn_primary_focus-outline_width) var(--btn_primary_focus-oultine_color); } @@ -241,7 +244,8 @@ background-color: var(--btn_secondary_background-color_default_hovered); } - &:focus-visible, &.focusVisible { + &:focus-visible, + &.focusVisible { box-shadow: 0 0 0 var(--btn_secondary_focus-outline_width) var(--btn_secondary_focus-oultine_color); } diff --git a/src/views/collections/framework-field-guide/segments/pricing.module.scss b/src/views/collections/framework-field-guide/segments/pricing.module.scss index c7162815..8f6615dc 100644 --- a/src/views/collections/framework-field-guide/segments/pricing.module.scss +++ b/src/views/collections/framework-field-guide/segments/pricing.module.scss @@ -1,75 +1,75 @@ -@import "../tokens/utils"; -@import "../tokens/breakpoints.scss"; - -.pricingContainer { - padding: var(--section-ver-padding) var(--section-hor-padding); - max-width: var(--max-width_large); - margin: 0 auto; - text-align: center; - display: flex; - flex-direction: column; - gap: var(--spc-1x); - /* Specifically for the "Sale" price to avoid overflow */ - overflow: hidden; -} - -.pricingTitle { - color: var(--on-dark-emphasis-high); - margin: 0; -} - -.pricingSubtitle { - color: var(--on-dark-emphasis-medium); - margin: 0; -} - -.pricingSubsubtitle { - color: var(--on-dark-emphasis-low); - margin: 0; -} - -.pricingCardContainer { - margin: 0; - padding: 0; - list-style: none; - margin-top: var(--spc-3x); - display: flex; - flex-direction: column; - gap: var(--section-hor-padding); -} - -.fundamentalsPricingCard { -} - -.ecosystemPricingCard { -} - -.internalsPricingCard { -} - -@include from($desktop) { - .pricingCardContainer { - gap: 0; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - margin-top: var(--spc-6x) - } - - .fundamentalsPricingCard { - order: 2; - z-index: 1; - } - - .ecosystemPricingCard { - order: 1; - margin-right: calc(0px - var(--pricing-container-radius)); - height: fit-content; - } - - .internalsPricingCard { - order: 3; - margin-left: calc(0px - var(--pricing-container-radius)); - height: fit-content; - } -} +@import "../tokens/utils"; +@import "../tokens/breakpoints.scss"; + +.pricingContainer { + padding: var(--section-ver-padding) var(--section-hor-padding); + max-width: var(--max-width_large); + margin: 0 auto; + text-align: center; + display: flex; + flex-direction: column; + gap: var(--spc-1x); + /* Specifically for the "Sale" price to avoid overflow */ + overflow: hidden; +} + +.pricingTitle { + color: var(--on-dark-emphasis-high); + margin: 0; +} + +.pricingSubtitle { + color: var(--on-dark-emphasis-medium); + margin: 0; +} + +.pricingSubsubtitle { + color: var(--on-dark-emphasis-low); + margin: 0; +} + +.pricingCardContainer { + margin: 0; + padding: 0; + list-style: none; + margin-top: var(--spc-3x); + display: flex; + flex-direction: column; + gap: var(--section-hor-padding); +} + +.fundamentalsPricingCard { +} + +.ecosystemPricingCard { +} + +.internalsPricingCard { +} + +@include from($desktop) { + .pricingCardContainer { + gap: 0; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + margin-top: var(--spc-6x); + } + + .fundamentalsPricingCard { + order: 2; + z-index: 1; + } + + .ecosystemPricingCard { + order: 1; + margin-right: calc(0px - var(--pricing-container-radius)); + height: fit-content; + } + + .internalsPricingCard { + order: 3; + margin-left: calc(0px - var(--pricing-container-radius)); + height: fit-content; + } +} diff --git a/src/views/collections/framework-field-guide/segments/what-do-i-get.module.scss b/src/views/collections/framework-field-guide/segments/what-do-i-get.module.scss index e9bd24ec..22498ad0 100644 --- a/src/views/collections/framework-field-guide/segments/what-do-i-get.module.scss +++ b/src/views/collections/framework-field-guide/segments/what-do-i-get.module.scss @@ -138,7 +138,13 @@ left: 0; width: 100%; height: 100%; - background: linear-gradient(90deg, var(--section-background) 0%, transparent 33.33%, transparent 66.67%, var(--section-background) 100%); + background: linear-gradient( + 90deg, + var(--section-background) 0%, + transparent 33.33%, + transparent 66.67%, + var(--section-background) 100% + ); } .calendar { diff --git a/src/views/collections/framework-field-guide/styles/global-ffg.css b/src/views/collections/framework-field-guide/styles/global-ffg.css index d9b825d2..bfe569d5 100644 --- a/src/views/collections/framework-field-guide/styles/global-ffg.css +++ b/src/views/collections/framework-field-guide/styles/global-ffg.css @@ -26,7 +26,8 @@ body { text-decoration: none; background: none; border: none; - transition: background var(--animSpeed) var(--animStyle), + transition: + background var(--animSpeed) var(--animStyle), box-shadow var(--animSpeed) var(--animStyle), border-color var(--animSpeed) var(--animStyle), color var(--animStyle) var(--animSpeed); diff --git a/src/views/collections/framework-field-guide/styles/shiki.scss b/src/views/collections/framework-field-guide/styles/shiki.scss index d82d6974..22d9e8b1 100644 --- a/src/views/collections/framework-field-guide/styles/shiki.scss +++ b/src/views/collections/framework-field-guide/styles/shiki.scss @@ -18,7 +18,9 @@ code .line::before { :root, .darkTheme { - &, & .shiki, &.shiki { + &, + & .shiki, + &.shiki { --cardActiveBackground: #163954; --white: black; --textColor: var(--on-dark-emphasis-medium); diff --git a/src/views/collections/framework-field-guide/tokens/dimensions.scss b/src/views/collections/framework-field-guide/tokens/dimensions.scss index 08730053..83e9524b 100644 --- a/src/views/collections/framework-field-guide/tokens/dimensions.scss +++ b/src/views/collections/framework-field-guide/tokens/dimensions.scss @@ -1,43 +1,43 @@ -:root { - --spc-1x: 8px; - --spc-2x: 16px; - --spc-3x: 24px; - --spc-4x: 32px; - --spc-5x: 40px; - --spc-6x: 48px; - - /* MAX WIDTHS */ - --max-width_xsmall: 640px; - --max-width_small: 960px; - --max-width_large: 1280px; - - /* BORDER WIDTH */ - - --border-1x: 1px; - --border-2x: 2px; - --border-3x: 3px; - --border-4x: 4px; - - /* AVATARS */ - - --avatar-size_huge: 96px; - --avatar-size_large: 72px; - --avatar-size_medium: 40px; - --avatar-size_small: 24px; - - /* CORNER RADIUS */ - - --corner-radius-1x: 8px; - --corner-radius-2x: 16px; - --corner-radius-3x: 24px; - --corner-radius-4x: 32px; - --corner-radius-5x: 40px; - --corner-radius-6x: 48px; - --corner-radius-circular: 999999px; - --corner-radius-circle: 50%; - - /* FOCUS */ - - --focus-border_gap: 4px; - --focus-border_width: var(--border-4x); -} +:root { + --spc-1x: 8px; + --spc-2x: 16px; + --spc-3x: 24px; + --spc-4x: 32px; + --spc-5x: 40px; + --spc-6x: 48px; + + /* MAX WIDTHS */ + --max-width_xsmall: 640px; + --max-width_small: 960px; + --max-width_large: 1280px; + + /* BORDER WIDTH */ + + --border-1x: 1px; + --border-2x: 2px; + --border-3x: 3px; + --border-4x: 4px; + + /* AVATARS */ + + --avatar-size_huge: 96px; + --avatar-size_large: 72px; + --avatar-size_medium: 40px; + --avatar-size_small: 24px; + + /* CORNER RADIUS */ + + --corner-radius-1x: 8px; + --corner-radius-2x: 16px; + --corner-radius-3x: 24px; + --corner-radius-4x: 32px; + --corner-radius-5x: 40px; + --corner-radius-6x: 48px; + --corner-radius-circular: 999999px; + --corner-radius-circle: 50%; + + /* FOCUS */ + + --focus-border_gap: 4px; + --focus-border_width: var(--border-4x); +} diff --git a/src/views/search/components/filter-dialog.tsx b/src/views/search/components/filter-dialog.tsx index 0b0a564c..d898c8e4 100644 --- a/src/views/search/components/filter-dialog.tsx +++ b/src/views/search/components/filter-dialog.tsx @@ -56,9 +56,7 @@ const FilterDialogMobile = ({ return (
-

- Filter -

+

Filter

- + -

- Filter -

+

Filter

{ - const target = (e.target as HTMLElement); + const onScroll = (e: Event) => { + const target = e.target as HTMLElement; const scrollAmount = target.scrollTop; if (scrollAmount > 0) { - target.classList.add("scrolled") + target.classList.add("scrolled"); return; } - target.classList.remove("scrolled") - } + target.classList.remove("scrolled"); + }; return (
)}
-
+
{children}
diff --git a/src/views/search/components/filter-sidebar-props.scss b/src/views/search/components/filter-sidebar-props.scss index 5e9b166b..72355c24 100644 --- a/src/views/search/components/filter-sidebar-props.scss +++ b/src/views/search/components/filter-sidebar-props.scss @@ -1,40 +1,40 @@ @import "src/tokens/index"; :root { - --search-page_filter_sidebar_padding-end: 0px; + --search-page_filter_sidebar_padding-end: 0px; - --search-page_search-bar_max-height: var(--min-target-size_l); + --search-page_search-bar_max-height: var(--min-target-size_l); - --search-page_filter_sidebar_max-width: 320px; - --search-page_filter_sidebar_padding-top: var(--spc-4x); - --search-page_filter_sidebar_padding-bottom: var(--site-spacing); - --search-page_filter_sidebar_padding-start: var(--site-spacing); - --search-page_filter_sidebar_gap: var(--spc-4x); - --search-page_filter_sidebar_order-btn-gap: var(--spc-2x); + --search-page_filter_sidebar_max-width: 320px; + --search-page_filter_sidebar_padding-top: var(--spc-4x); + --search-page_filter_sidebar_padding-bottom: var(--site-spacing); + --search-page_filter_sidebar_padding-start: var(--site-spacing); + --search-page_filter_sidebar_gap: var(--spc-4x); + --search-page_filter_sidebar_order-btn-gap: var(--spc-2x); - --search-page_filter_list_header_min-height: var(--min-target-size_l); - --search-page_filter_list_header_gap: var(--spc-1x); - --search-page_filter_list_header_title_padding: var(--spc-1x); - --search-page_filter_list_header_padding-start: var(--spc-3x); - --search-page_filter_list_header_padding-end: var(--spc-2x); - --search-page_filter_list_header_padding-vertical: var(--spc-2x); + --search-page_filter_list_header_min-height: var(--min-target-size_l); + --search-page_filter_list_header_gap: var(--spc-1x); + --search-page_filter_list_header_title_padding: var(--spc-1x); + --search-page_filter_list_header_padding-start: var(--spc-3x); + --search-page_filter_list_header_padding-end: var(--spc-2x); + --search-page_filter_list_header_padding-vertical: var(--spc-2x); - --search-page_filter_list_header_title_color: var(--foreground_emphasis-high); - --search-page_filter_list_header_count_color: var(--primary_default); - --search-page_filter_list_header_icon_color: var(--primary_default); - --search-page_filter_list_header_icon_size: var(--icon-size_regular); + --search-page_filter_list_header_title_color: var(--foreground_emphasis-high); + --search-page_filter_list_header_count_color: var(--primary_default); + --search-page_filter_list_header_icon_color: var(--primary_default); + --search-page_filter_list_header_icon_size: var(--icon-size_regular); - --search-page_filter_list_divider_color: var(--background_disabled); - --search-page_filter_list_divider_width: var(--border-width_s); + --search-page_filter_list_divider_color: var(--background_disabled); + --search-page_filter_list_divider_width: var(--border-width_s); - @include from($tabletLarge) { - --search-page_search-bar_max-height: var(--min-target-size_m); - --search-page_filter_sidebar_max-width: 288px; - } + @include from($tabletLarge) { + --search-page_search-bar_max-height: var(--min-target-size_m); + --search-page_filter_sidebar_max-width: 288px; + } - @include from($desktopLarge) { - --search-page_search-bar_max-height: var(--min-target-size_m); - --search-page_filter_sidebar_max-width: 360px; - --search-page_filter_sidebar_padding-end: var(--site-spacing); - } + @include from($desktopLarge) { + --search-page_search-bar_max-height: var(--min-target-size_m); + --search-page_filter_sidebar_max-width: 360px; + --search-page_filter_sidebar_padding-end: var(--site-spacing); + } }