LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: run formatter

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
postcss.config.cjs
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 })],
}; };

5
src/components/collection-card/collection-card.module.scss
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;

12
src/styles/button.scss
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);
} }

150
src/views/collections/framework-field-guide/segments/pricing.module.scss
View File

@@ -1,75 +1,75 @@
@import "../tokens/utils"; @import "../tokens/utils";
@import "../tokens/breakpoints.scss"; @import "../tokens/breakpoints.scss";
.pricingContainer { .pricingContainer {
padding: var(--section-ver-padding) var(--section-hor-padding); padding: var(--section-ver-padding) var(--section-hor-padding);
max-width: var(--max-width_large); max-width: var(--max-width_large);
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spc-1x); gap: var(--spc-1x);
/* Specifically for the "Sale" price to avoid overflow */ /* Specifically for the "Sale" price to avoid overflow */
overflow: hidden; overflow: hidden;
} }
.pricingTitle { .pricingTitle {
color: var(--on-dark-emphasis-high); color: var(--on-dark-emphasis-high);
margin: 0; margin: 0;
} }
.pricingSubtitle { .pricingSubtitle {
color: var(--on-dark-emphasis-medium); color: var(--on-dark-emphasis-medium);
margin: 0; margin: 0;
} }
.pricingSubsubtitle { .pricingSubsubtitle {
color: var(--on-dark-emphasis-low); color: var(--on-dark-emphasis-low);
margin: 0; margin: 0;
} }
.pricingCardContainer { .pricingCardContainer {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
margin-top: var(--spc-3x); margin-top: var(--spc-3x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--section-hor-padding); gap: var(--section-hor-padding);
} }
.fundamentalsPricingCard { .fundamentalsPricingCard {
} }
.ecosystemPricingCard { .ecosystemPricingCard {
} }
.internalsPricingCard { .internalsPricingCard {
} }
@include from($desktop) { @include from($desktop) {
.pricingCardContainer { .pricingCardContainer {
gap: 0; gap: 0;
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 {
order: 2; order: 2;
z-index: 1; z-index: 1;
} }
.ecosystemPricingCard { .ecosystemPricingCard {
order: 1; order: 1;
margin-right: calc(0px - var(--pricing-container-radius)); margin-right: calc(0px - var(--pricing-container-radius));
height: fit-content; height: fit-content;
} }
.internalsPricingCard { .internalsPricingCard {
order: 3; order: 3;
margin-left: calc(0px - var(--pricing-container-radius)); margin-left: calc(0px - var(--pricing-container-radius));
height: fit-content; height: fit-content;
} }
} }

8
src/views/collections/framework-field-guide/segments/what-do-i-get.module.scss
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 {

3
src/views/collections/framework-field-guide/styles/global-ffg.css
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);

4
src/views/collections/framework-field-guide/styles/shiki.scss
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);

86
src/views/collections/framework-field-guide/tokens/dimensions.scss
View File

@@ -1,43 +1,43 @@
:root { :root {
--spc-1x: 8px; --spc-1x: 8px;
--spc-2x: 16px; --spc-2x: 16px;
--spc-3x: 24px; --spc-3x: 24px;
--spc-4x: 32px; --spc-4x: 32px;
--spc-5x: 40px; --spc-5x: 40px;
--spc-6x: 48px; --spc-6x: 48px;
/* MAX WIDTHS */ /* MAX WIDTHS */
--max-width_xsmall: 640px; --max-width_xsmall: 640px;
--max-width_small: 960px; --max-width_small: 960px;
--max-width_large: 1280px; --max-width_large: 1280px;
/* BORDER WIDTH */ /* BORDER WIDTH */
--border-1x: 1px; --border-1x: 1px;
--border-2x: 2px; --border-2x: 2px;
--border-3x: 3px; --border-3x: 3px;
--border-4x: 4px; --border-4x: 4px;
/* AVATARS */ /* AVATARS */
--avatar-size_huge: 96px; --avatar-size_huge: 96px;
--avatar-size_large: 72px; --avatar-size_large: 72px;
--avatar-size_medium: 40px; --avatar-size_medium: 40px;
--avatar-size_small: 24px; --avatar-size_small: 24px;
/* CORNER RADIUS */ /* CORNER RADIUS */
--corner-radius-1x: 8px; --corner-radius-1x: 8px;
--corner-radius-2x: 16px; --corner-radius-2x: 16px;
--corner-radius-3x: 24px; --corner-radius-3x: 24px;
--corner-radius-4x: 32px; --corner-radius-4x: 32px;
--corner-radius-5x: 40px; --corner-radius-5x: 40px;
--corner-radius-6x: 48px; --corner-radius-6x: 48px;
--corner-radius-circular: 999999px; --corner-radius-circular: 999999px;
--corner-radius-circle: 50%; --corner-radius-circle: 50%;
/* FOCUS */ /* FOCUS */
--focus-border_gap: 4px; --focus-border_gap: 4px;
--focus-border_width: var(--border-4x); --focus-border_width: var(--border-4x);
} }

15
src/views/search/components/filter-dialog.tsx
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"

16
src/views/search/components/filter-section.tsx
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>

58
src/views/search/components/filter-sidebar-props.scss
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);
} }
} }