From de5da4d73a1158cb7640b05240c40f5c0d2f223a Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Thu, 19 Oct 2023 15:56:43 +0200 Subject: [PATCH 1/3] style correction --- src/components/iconButton/iconButton.css.ts | 7 +++---- src/components/sidenav/sidenav.css.ts | 7 +++---- src/routes/header.css.ts | 7 +++---- src/routes/layout.css.ts | 12 +++++------- src/routes/main.css.ts | 7 +++---- src/routes/nav.css.ts | 7 +++---- 6 files changed, 20 insertions(+), 27 deletions(-) diff --git a/src/components/iconButton/iconButton.css.ts b/src/components/iconButton/iconButton.css.ts index 041ced5..956f55e 100644 --- a/src/components/iconButton/iconButton.css.ts +++ b/src/components/iconButton/iconButton.css.ts @@ -9,7 +9,7 @@ const desktop: ComplexStyleRule = { padding: "8px", }; -export const button = style({ +export const button = style([mobile, { display: "grid", justifyItems: "center", alignItems: "center", @@ -22,10 +22,9 @@ export const button = style({ }, cursor: "pointer", "@media": { - "screen and (min-width: 769px)": desktop, - "screen and (max-width: 768px)": mobile, + "screen and (min-width: 768px)": desktop, }, -}); +}]); export const iconSlot = style({ width: "24px", diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts index ac1a0de..353818c 100644 --- a/src/components/sidenav/sidenav.css.ts +++ b/src/components/sidenav/sidenav.css.ts @@ -8,13 +8,12 @@ const desktop: ComplexStyleRule = { gridTemplateRows: "repeat(6, 1fr)", }; -export const sidenav = style({ +export const sidenav = style([mobile, { display: "grid", gap: "2px", justifyItems: "center", justifyContent: "center", "@media": { - "screen and (min-width: 769px)": desktop, - "screen and (max-width: 768px)": mobile, + "screen and (min-width: 768px)": desktop, }, -}); +}]); diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts index 3ffe1c3..3904be4 100644 --- a/src/routes/header.css.ts +++ b/src/routes/header.css.ts @@ -9,10 +9,9 @@ const desktop: ComplexStyleRule = { gridTemplateColumns: "auto 1fr", }; -export const header = style({ +export const header = style([mobile, { backgroundColor: vars.color.background, "@media": { - "screen and (min-width: 769px)": desktop, - "screen and (max-width: 768px)": mobile, + "screen and (min-width: 768px)": desktop, }, -}); +}]); diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts index bb6eea0..81fa7aa 100644 --- a/src/routes/layout.css.ts +++ b/src/routes/layout.css.ts @@ -9,7 +9,7 @@ const layoutRowDesktop: ComplexStyleRule = { gridTemplateRows: "auto 1fr", }; -export const layoutRow = style({ +export const layoutRow = style([layoutRowMobile, { height: "100%", display: "grid", gridAutoFlow: "row", @@ -17,9 +17,8 @@ export const layoutRow = style({ gap: "1px", "@media": { "screen and (min-width: 768px)": layoutRowDesktop, - "screen and (max-width: 768px)": layoutRowMobile, }, -}); +}]); const layoutColumnMobile: ComplexStyleRule = { gridTemplateRows: "1fr auto", @@ -31,12 +30,11 @@ const layoutColumnDesktop: ComplexStyleRule = { gridAutoFlow: "column", }; -export const layoutColumn = style({ +export const layoutColumn = style([layoutColumnMobile, { display: "grid", backgroundColor: vars.color.backgroundHighlight, gap: "1px", "@media": { - "screen and (min-width: 769px)": layoutColumnDesktop, - "screen and (max-width: 768px)": layoutColumnMobile, + "screen and (min-width: 768px)": layoutColumnDesktop, }, -}); +}]); diff --git a/src/routes/main.css.ts b/src/routes/main.css.ts index 8236b1c..9bc5ee5 100644 --- a/src/routes/main.css.ts +++ b/src/routes/main.css.ts @@ -11,10 +11,9 @@ const desktop: ComplexStyleRule = { gridColumnEnd: "3", }; -export const main = style({ +export const main = style([mobile, { backgroundColor: vars.color.background, "@media": { - "screen and (min-width: 769px)": desktop, - "screen and (max-width: 768px)": mobile, + "screen and (min-width: 768px)": desktop, }, -}); +}]); diff --git a/src/routes/nav.css.ts b/src/routes/nav.css.ts index c496ddc..915d6f7 100644 --- a/src/routes/nav.css.ts +++ b/src/routes/nav.css.ts @@ -11,10 +11,9 @@ const desktop: ComplexStyleRule = { gridColumnEnd: "2", }; -export const nav = style({ +export const nav = style([mobile, { backgroundColor: vars.color.background, "@media": { - "screen and (min-width: 769px)": desktop, - "screen and (max-width: 768px)": mobile, + "screen and (min-width: 768px)": desktop, }, -}); +}]); From 76d9942bba448700dad4da813b2a6ded28e2de50 Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Thu, 19 Oct 2023 16:27:31 +0200 Subject: [PATCH 2/3] media query vars --- src/breakpoint.css.ts | 7 +++++++ src/components/iconButton/iconButton.css.ts | 3 ++- src/components/sidenav/sidenav.css.ts | 5 ++++- src/routes/header.css.ts | 5 ++++- src/routes/layout.css.ts | 7 +++++-- src/routes/main.css.ts | 7 ++++++- src/routes/nav.css.ts | 7 ++++++- src/theme.css.ts | 2 +- 8 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 src/breakpoint.css.ts diff --git a/src/breakpoint.css.ts b/src/breakpoint.css.ts new file mode 100644 index 0000000..8cb0c61 --- /dev/null +++ b/src/breakpoint.css.ts @@ -0,0 +1,7 @@ +export const breakpoints = { + desktop: '768px', +}; + +export const mediaQuery = { + desktop: `screen and (min-width: ${breakpoints.desktop})`, +}; \ No newline at end of file diff --git a/src/components/iconButton/iconButton.css.ts b/src/components/iconButton/iconButton.css.ts index 956f55e..120251d 100644 --- a/src/components/iconButton/iconButton.css.ts +++ b/src/components/iconButton/iconButton.css.ts @@ -1,4 +1,5 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; +import { mediaQuery } from "~/breakpoint.css"; import { vars } from "~/theme.css"; const mobile: ComplexStyleRule = { @@ -22,7 +23,7 @@ export const button = style([mobile, { }, cursor: "pointer", "@media": { - "screen and (min-width: 768px)": desktop, + [mediaQuery.desktop]: desktop, }, }]); diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts index 353818c..a9f96ca 100644 --- a/src/components/sidenav/sidenav.css.ts +++ b/src/components/sidenav/sidenav.css.ts @@ -1,10 +1,13 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; +import { mediaQuery } from "~/breakpoint.css"; const mobile: ComplexStyleRule = { gridTemplateColumns: "repeat( auto-fit, minmax(60px, 1fr) )", + gridTemplateRows: "none", }; const desktop: ComplexStyleRule = { + gridTemplateColumns: "none", gridTemplateRows: "repeat(6, 1fr)", }; @@ -14,6 +17,6 @@ export const sidenav = style([mobile, { justifyItems: "center", justifyContent: "center", "@media": { - "screen and (min-width: 768px)": desktop, + [mediaQuery.desktop]: desktop, }, }]); diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts index 3904be4..fd017fd 100644 --- a/src/routes/header.css.ts +++ b/src/routes/header.css.ts @@ -1,17 +1,20 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; +import { mediaQuery } from "~/breakpoint.css"; import { vars } from "~/theme.css"; const mobile: ComplexStyleRule = { display: "none", + gridTemplateColumns: "1fr", }; const desktop: ComplexStyleRule = { + display: "block", gridTemplateColumns: "auto 1fr", }; export const header = style([mobile, { backgroundColor: vars.color.background, "@media": { - "screen and (min-width: 768px)": desktop, + [mediaQuery.desktop]: desktop, }, }]); diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts index 81fa7aa..36bc9ea 100644 --- a/src/routes/layout.css.ts +++ b/src/routes/layout.css.ts @@ -1,4 +1,5 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; +import { mediaQuery } from "~/breakpoint.css"; import { vars } from "~/theme.css"; const layoutRowMobile: ComplexStyleRule = { @@ -16,16 +17,18 @@ export const layoutRow = style([layoutRowMobile, { backgroundColor: vars.color.backgroundHighlight, gap: "1px", "@media": { - "screen and (min-width: 768px)": layoutRowDesktop, + [mediaQuery.desktop]: layoutRowDesktop }, }]); const layoutColumnMobile: ComplexStyleRule = { gridTemplateRows: "1fr auto", + gridTemplateColumns: "1fr", gridAutoFlow: "row", }; const layoutColumnDesktop: ComplexStyleRule = { + gridTemplateRows: "1fr", gridTemplateColumns: "auto 1fr", gridAutoFlow: "column", }; @@ -35,6 +38,6 @@ export const layoutColumn = style([layoutColumnMobile, { backgroundColor: vars.color.backgroundHighlight, gap: "1px", "@media": { - "screen and (min-width: 768px)": layoutColumnDesktop, + [mediaQuery.desktop]: layoutColumnDesktop }, }]); diff --git a/src/routes/main.css.ts b/src/routes/main.css.ts index 9bc5ee5..c50c1db 100644 --- a/src/routes/main.css.ts +++ b/src/routes/main.css.ts @@ -1,12 +1,17 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; +import { mediaQuery } from "~/breakpoint.css"; import { vars } from "~/theme.css"; const mobile: ComplexStyleRule = { gridRowStart: "1", gridRowEnd: "2", + gridColumnStart: "1", + gridColumnEnd: "2", }; const desktop: ComplexStyleRule = { + gridRowStart: "1", + gridRowEnd: "2", gridColumnStart: "2", gridColumnEnd: "3", }; @@ -14,6 +19,6 @@ const desktop: ComplexStyleRule = { export const main = style([mobile, { backgroundColor: vars.color.background, "@media": { - "screen and (min-width: 768px)": desktop, + [mediaQuery.desktop]: desktop }, }]); diff --git a/src/routes/nav.css.ts b/src/routes/nav.css.ts index 915d6f7..f159306 100644 --- a/src/routes/nav.css.ts +++ b/src/routes/nav.css.ts @@ -1,12 +1,17 @@ import { type ComplexStyleRule, style } from "@vanilla-extract/css"; +import { mediaQuery } from "~/breakpoint.css"; import { vars } from "~/theme.css"; const mobile: ComplexStyleRule = { gridRowStart: "2", gridRowEnd: "3", + gridColumnStart: "1", + gridColumnEnd: "2", }; const desktop: ComplexStyleRule = { + gridRowStart: "1", + gridRowEnd: "2", gridColumnStart: "1", gridColumnEnd: "2", }; @@ -14,6 +19,6 @@ const desktop: ComplexStyleRule = { export const nav = style([mobile, { backgroundColor: vars.color.background, "@media": { - "screen and (min-width: 768px)": desktop, + [mediaQuery.desktop]: desktop }, }]); diff --git a/src/theme.css.ts b/src/theme.css.ts index 6dd3580..1a766b2 100644 --- a/src/theme.css.ts +++ b/src/theme.css.ts @@ -32,4 +32,4 @@ export const lightTheme = createTheme(vars, { duration: "0.1s", timingFunction: "ease-in-out", }, -}); +}); \ No newline at end of file From 63d0af7dc57cf3befe5230aee207a31a6b79f495 Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Thu, 19 Oct 2023 16:30:34 +0200 Subject: [PATCH 3/3] lint --- src/breakpoint.css.ts | 6 ++-- src/components/iconButton/iconButton.css.ts | 33 ++++++++++-------- src/components/sidenav/sidenav.css.ts | 19 ++++++----- src/routes/header.css.ts | 13 ++++--- src/routes/layout.css.ts | 38 ++++++++++++--------- src/routes/main.css.ts | 13 ++++--- src/routes/nav.css.ts | 13 ++++--- src/theme.css.ts | 2 +- 8 files changed, 79 insertions(+), 58 deletions(-) diff --git a/src/breakpoint.css.ts b/src/breakpoint.css.ts index 8cb0c61..aaa6615 100644 --- a/src/breakpoint.css.ts +++ b/src/breakpoint.css.ts @@ -1,7 +1,7 @@ export const breakpoints = { - desktop: '768px', + desktop: "768px", }; export const mediaQuery = { - desktop: `screen and (min-width: ${breakpoints.desktop})`, -}; \ No newline at end of file + desktop: `screen and (min-width: ${breakpoints.desktop})`, +}; diff --git a/src/components/iconButton/iconButton.css.ts b/src/components/iconButton/iconButton.css.ts index 120251d..147c180 100644 --- a/src/components/iconButton/iconButton.css.ts +++ b/src/components/iconButton/iconButton.css.ts @@ -10,22 +10,25 @@ const desktop: ComplexStyleRule = { padding: "8px", }; -export const button = style([mobile, { - display: "grid", - justifyItems: "center", - alignItems: "center", - borderRadius: "8px", - transition: "background-color", - transitionDuration: vars.transitions.duration, - transitionTimingFunction: vars.transitions.timingFunction, - ":hover": { - backgroundColor: vars.color.backgroundHighlight, - }, - cursor: "pointer", - "@media": { - [mediaQuery.desktop]: desktop, +export const button = style([ + mobile, + { + display: "grid", + justifyItems: "center", + alignItems: "center", + borderRadius: "8px", + transition: "background-color", + transitionDuration: vars.transitions.duration, + transitionTimingFunction: vars.transitions.timingFunction, + ":hover": { + backgroundColor: vars.color.backgroundHighlight, + }, + cursor: "pointer", + "@media": { + [mediaQuery.desktop]: desktop, + }, }, -}]); +]); export const iconSlot = style({ width: "24px", diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts index a9f96ca..e72f5d9 100644 --- a/src/components/sidenav/sidenav.css.ts +++ b/src/components/sidenav/sidenav.css.ts @@ -11,12 +11,15 @@ const desktop: ComplexStyleRule = { gridTemplateRows: "repeat(6, 1fr)", }; -export const sidenav = style([mobile, { - display: "grid", - gap: "2px", - justifyItems: "center", - justifyContent: "center", - "@media": { - [mediaQuery.desktop]: desktop, +export const sidenav = style([ + mobile, + { + display: "grid", + gap: "2px", + justifyItems: "center", + justifyContent: "center", + "@media": { + [mediaQuery.desktop]: desktop, + }, }, -}]); +]); diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts index fd017fd..0ee836c 100644 --- a/src/routes/header.css.ts +++ b/src/routes/header.css.ts @@ -12,9 +12,12 @@ const desktop: ComplexStyleRule = { gridTemplateColumns: "auto 1fr", }; -export const header = style([mobile, { - backgroundColor: vars.color.background, - "@media": { - [mediaQuery.desktop]: desktop, +export const header = style([ + mobile, + { + backgroundColor: vars.color.background, + "@media": { + [mediaQuery.desktop]: desktop, + }, }, -}]); +]); diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts index 36bc9ea..c4f72f2 100644 --- a/src/routes/layout.css.ts +++ b/src/routes/layout.css.ts @@ -10,16 +10,19 @@ const layoutRowDesktop: ComplexStyleRule = { gridTemplateRows: "auto 1fr", }; -export const layoutRow = style([layoutRowMobile, { - height: "100%", - display: "grid", - gridAutoFlow: "row", - backgroundColor: vars.color.backgroundHighlight, - gap: "1px", - "@media": { - [mediaQuery.desktop]: layoutRowDesktop +export const layoutRow = style([ + layoutRowMobile, + { + height: "100%", + display: "grid", + gridAutoFlow: "row", + backgroundColor: vars.color.backgroundHighlight, + gap: "1px", + "@media": { + [mediaQuery.desktop]: layoutRowDesktop, + }, }, -}]); +]); const layoutColumnMobile: ComplexStyleRule = { gridTemplateRows: "1fr auto", @@ -33,11 +36,14 @@ const layoutColumnDesktop: ComplexStyleRule = { gridAutoFlow: "column", }; -export const layoutColumn = style([layoutColumnMobile, { - display: "grid", - backgroundColor: vars.color.backgroundHighlight, - gap: "1px", - "@media": { - [mediaQuery.desktop]: layoutColumnDesktop +export const layoutColumn = style([ + layoutColumnMobile, + { + display: "grid", + backgroundColor: vars.color.backgroundHighlight, + gap: "1px", + "@media": { + [mediaQuery.desktop]: layoutColumnDesktop, + }, }, -}]); +]); diff --git a/src/routes/main.css.ts b/src/routes/main.css.ts index c50c1db..31fa456 100644 --- a/src/routes/main.css.ts +++ b/src/routes/main.css.ts @@ -16,9 +16,12 @@ const desktop: ComplexStyleRule = { gridColumnEnd: "3", }; -export const main = style([mobile, { - backgroundColor: vars.color.background, - "@media": { - [mediaQuery.desktop]: desktop +export const main = style([ + mobile, + { + backgroundColor: vars.color.background, + "@media": { + [mediaQuery.desktop]: desktop, + }, }, -}]); +]); diff --git a/src/routes/nav.css.ts b/src/routes/nav.css.ts index f159306..8af4178 100644 --- a/src/routes/nav.css.ts +++ b/src/routes/nav.css.ts @@ -16,9 +16,12 @@ const desktop: ComplexStyleRule = { gridColumnEnd: "2", }; -export const nav = style([mobile, { - backgroundColor: vars.color.background, - "@media": { - [mediaQuery.desktop]: desktop +export const nav = style([ + mobile, + { + backgroundColor: vars.color.background, + "@media": { + [mediaQuery.desktop]: desktop, + }, }, -}]); +]); diff --git a/src/theme.css.ts b/src/theme.css.ts index 1a766b2..6dd3580 100644 --- a/src/theme.css.ts +++ b/src/theme.css.ts @@ -32,4 +32,4 @@ export const lightTheme = createTheme(vars, { duration: "0.1s", timingFunction: "ease-in-out", }, -}); \ No newline at end of file +});