chore: run formatter

This commit is contained in:
Corbin Crutchley
2023-08-09 03:54:51 -07:00
parent 713f3bd3f9
commit 3ba9627390
11 changed files with 190 additions and 171 deletions

View File

@@ -1,7 +1,7 @@
// @ts-nocheck // @ts-nocheck
const csso = require('postcss-csso'); const csso = require("postcss-csso");
module.exports = { module.exports = {
// Restructure false, otherwise FFG site breaks // Restructure false, otherwise FFG site breaks
plugins: [require("autoprefixer"), csso({restructure: false})], plugins: [require("autoprefixer"), csso({ restructure: false })],
}; };

View File

@@ -50,7 +50,7 @@
margin-left: var(--collection-card_content_padding-left); margin-left: var(--collection-card_content_padding-left);
margin-right: var(--collection-card_content_padding-right); margin-right: var(--collection-card_content_padding-right);
&> div { & > div {
// prevent div from expanding beyond container size due to text overflow // prevent div from expanding beyond container size due to text overflow
min-width: 0; min-width: 0;
} }
@@ -61,7 +61,8 @@
margin-bottom: var(--collection-card_title_padding-bottom); 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) // 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 // - this otherwise has no effect, since the container can always expand vertically
overflow: hidden; overflow: hidden;

View File

@@ -187,7 +187,8 @@
background-color: var(--btn_primary_background-color_emphasized_hovered); 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) box-shadow: 0 0 0 var(--btn_primary_focus-outline_width)
var(--btn_primary_focus-oultine_color); var(--btn_primary_focus-oultine_color);
} }
@@ -205,7 +206,8 @@
background-color: var(--btn_secondary_background-color_emphasized_hovered); 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) box-shadow: 0 0 0 var(--btn_secondary_focus-outline_width)
var(--btn_secondary_focus-oultine_color); var(--btn_secondary_focus-oultine_color);
} }
@@ -223,7 +225,8 @@
background-color: var(--btn_primary_background-color_default_hovered); 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) box-shadow: 0 0 0 var(--btn_primary_focus-outline_width)
var(--btn_primary_focus-oultine_color); var(--btn_primary_focus-oultine_color);
} }
@@ -241,7 +244,8 @@
background-color: var(--btn_secondary_background-color_default_hovered); 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) box-shadow: 0 0 0 var(--btn_secondary_focus-outline_width)
var(--btn_secondary_focus-oultine_color); var(--btn_secondary_focus-oultine_color);
} }

View File

@@ -53,7 +53,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
margin-top: var(--spc-6x) margin-top: var(--spc-6x);
} }
.fundamentalsPricingCard { .fundamentalsPricingCard {

View File

@@ -138,7 +138,13 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 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 { .calendar {

View File

@@ -26,7 +26,8 @@ body {
text-decoration: none; text-decoration: none;
background: none; background: none;
border: none; border: none;
transition: background var(--animSpeed) var(--animStyle), transition:
background var(--animSpeed) var(--animStyle),
box-shadow var(--animSpeed) var(--animStyle), box-shadow var(--animSpeed) var(--animStyle),
border-color var(--animSpeed) var(--animStyle), border-color var(--animSpeed) var(--animStyle),
color var(--animStyle) var(--animSpeed); color var(--animStyle) var(--animSpeed);

View File

@@ -18,7 +18,9 @@ code .line::before {
:root, :root,
.darkTheme { .darkTheme {
&, & .shiki, &.shiki { &,
& .shiki,
&.shiki {
--cardActiveBackground: #163954; --cardActiveBackground: #163954;
--white: black; --white: black;
--textColor: var(--on-dark-emphasis-medium); --textColor: var(--on-dark-emphasis-medium);

View File

@@ -56,9 +56,7 @@ const FilterDialogMobile = ({
return ( return (
<div class={styles.mobileDialogContainer}> <div class={styles.mobileDialogContainer}>
<div class={styles.dialogTitleContainer}> <div class={styles.dialogTitleContainer}>
<h1 class={`text-style-headline-4 ${styles.dialogTitle}`}> <h1 class={`text-style-headline-4 ${styles.dialogTitle}`}>Filter</h1>
Filter
</h1>
</div> </div>
<FilterSection <FilterSection
title={"Tag"} title={"Tag"}
@@ -149,15 +147,18 @@ const FilterDialogSmallTablet = ({
return ( return (
<div class={styles.tabletDialogContainer}> <div class={styles.tabletDialogContainer}>
<div class={styles.dialogTitleContainer}> <div class={styles.dialogTitleContainer}>
<LargeIconOnlyButton tag="button" type="button" onClick={onCancel} class={styles.closeButton}> <LargeIconOnlyButton
tag="button"
type="button"
onClick={onCancel}
class={styles.closeButton}
>
<span <span
class={styles.closeIcon} class={styles.closeIcon}
dangerouslySetInnerHTML={{ __html: close }} dangerouslySetInnerHTML={{ __html: close }}
/> />
</LargeIconOnlyButton> </LargeIconOnlyButton>
<h1 class={`text-style-headline-4 ${styles.dialogTitle}`}> <h1 class={`text-style-headline-4 ${styles.dialogTitle}`}>Filter</h1>
Filter
</h1>
<LargeButton <LargeButton
variant="primary-emphasized" variant="primary-emphasized"
tag="button" tag="button"

View File

@@ -24,15 +24,15 @@ export const FilterSection = ({
const { setEl, size } = useElementSize(); const { setEl, size } = useElementSize();
const onScroll = (e: MouseEvent) => { const onScroll = (e: Event) => {
const target = (e.target as HTMLElement); const target = e.target as HTMLElement;
const scrollAmount = target.scrollTop; const scrollAmount = target.scrollTop;
if (scrollAmount > 0) { if (scrollAmount > 0) {
target.classList.add("scrolled") target.classList.add("scrolled");
return; return;
} }
target.classList.remove("scrolled") target.classList.remove("scrolled");
} };
return ( return (
<div <div
@@ -79,7 +79,11 @@ export const FilterSection = ({
</div> </div>
)} )}
</div> </div>
<div className={styles.sectionContent} aria-hidden={collapsed} onScroll={onScroll}> <div
className={styles.sectionContent}
aria-hidden={collapsed}
onScroll={onScroll}
>
{children} {children}
</div> </div>
</div> </div>

View File

@@ -1,40 +1,40 @@
@import "src/tokens/index"; @import "src/tokens/index";
:root { :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_max-width: 320px;
--search-page_filter_sidebar_padding-top: var(--spc-4x); --search-page_filter_sidebar_padding-top: var(--spc-4x);
--search-page_filter_sidebar_padding-bottom: var(--site-spacing); --search-page_filter_sidebar_padding-bottom: var(--site-spacing);
--search-page_filter_sidebar_padding-start: var(--site-spacing); --search-page_filter_sidebar_padding-start: var(--site-spacing);
--search-page_filter_sidebar_gap: var(--spc-4x); --search-page_filter_sidebar_gap: var(--spc-4x);
--search-page_filter_sidebar_order-btn-gap: var(--spc-2x); --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_min-height: var(--min-target-size_l);
--search-page_filter_list_header_gap: var(--spc-1x); --search-page_filter_list_header_gap: var(--spc-1x);
--search-page_filter_list_header_title_padding: 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-start: var(--spc-3x);
--search-page_filter_list_header_padding-end: var(--spc-2x); --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_padding-vertical: var(--spc-2x);
--search-page_filter_list_header_title_color: var(--foreground_emphasis-high); --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_count_color: var(--primary_default);
--search-page_filter_list_header_icon_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_icon_size: var(--icon-size_regular);
--search-page_filter_list_divider_color: var(--background_disabled); --search-page_filter_list_divider_color: var(--background_disabled);
--search-page_filter_list_divider_width: var(--border-width_s); --search-page_filter_list_divider_width: var(--border-width_s);
@include from($tabletLarge) { @include from($tabletLarge) {
--search-page_search-bar_max-height: var(--min-target-size_m); --search-page_search-bar_max-height: var(--min-target-size_m);
--search-page_filter_sidebar_max-width: 288px; --search-page_filter_sidebar_max-width: 288px;
} }
@include from($desktopLarge) { @include from($desktopLarge) {
--search-page_search-bar_max-height: var(--min-target-size_m); --search-page_search-bar_max-height: var(--min-target-size_m);
--search-page_filter_sidebar_max-width: 360px; --search-page_filter_sidebar_max-width: 360px;
--search-page_filter_sidebar_padding-end: var(--site-spacing); --search-page_filter_sidebar_padding-end: var(--site-spacing);
} }
} }