mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-06 04:21:55 +00:00
chore: run formatter
This commit is contained in:
Corbin Crutchley
@@ -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 })],
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -18,7 +18,9 @@ code .line::before {
|
||||
|
||||
:root,
|
||||
.darkTheme {
|
||||
&, & .shiki, &.shiki {
|
||||
&,
|
||||
& .shiki,
|
||||
&.shiki {
|
||||
--cardActiveBackground: #163954;
|
||||
--white: black;
|
||||
--textColor: var(--on-dark-emphasis-medium);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -56,9 +56,7 @@ const FilterDialogMobile = ({
|
||||
return (
|
||||
<div class={styles.mobileDialogContainer}>
|
||||
<div class={styles.dialogTitleContainer}>
|
||||
<h1 class={`text-style-headline-4 ${styles.dialogTitle}`}>
|
||||
Filter
|
||||
</h1>
|
||||
<h1 class={`text-style-headline-4 ${styles.dialogTitle}`}>Filter</h1>
|
||||
</div>
|
||||
<FilterSection
|
||||
title={"Tag"}
|
||||
@@ -149,15 +147,18 @@ const FilterDialogSmallTablet = ({
|
||||
return (
|
||||
<div class={styles.tabletDialogContainer}>
|
||||
<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
|
||||
class={styles.closeIcon}
|
||||
dangerouslySetInnerHTML={{ __html: close }}
|
||||
/>
|
||||
</LargeIconOnlyButton>
|
||||
<h1 class={`text-style-headline-4 ${styles.dialogTitle}`}>
|
||||
Filter
|
||||
</h1>
|
||||
<h1 class={`text-style-headline-4 ${styles.dialogTitle}`}>Filter</h1>
|
||||
<LargeButton
|
||||
variant="primary-emphasized"
|
||||
tag="button"
|
||||
|
||||
@@ -24,15 +24,15 @@ export const FilterSection = ({
|
||||
|
||||
const { setEl, size } = useElementSize();
|
||||
|
||||
const onScroll = (e: MouseEvent) => {
|
||||
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 (
|
||||
<div
|
||||
@@ -79,7 +79,11 @@ export const FilterSection = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.sectionContent} aria-hidden={collapsed} onScroll={onScroll}>
|
||||
<div
|
||||
className={styles.sectionContent}
|
||||
aria-hidden={collapsed}
|
||||
onScroll={onScroll}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user