From 332ec93366315fa1ed7b4acd7a3407c96e8ddfa7 Mon Sep 17 00:00:00 2001 From: sadbeast Date: Wed, 31 Jan 2024 17:47:56 -0800 Subject: initial mistake --- app/assets/stylesheets/themes/default/_styles.scss | 247 +++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 app/assets/stylesheets/themes/default/_styles.scss (limited to 'app/assets/stylesheets/themes/default/_styles.scss') diff --git a/app/assets/stylesheets/themes/default/_styles.scss b/app/assets/stylesheets/themes/default/_styles.scss new file mode 100644 index 0000000..3a0a46d --- /dev/null +++ b/app/assets/stylesheets/themes/default/_styles.scss @@ -0,0 +1,247 @@ +// Commons Styles +:root { + // Typography + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", + "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + + // Responsive typography + @if $enable-responsive-typography { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --font-size: 17px; + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --font-size: 18px; + } + } + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --font-size: 19px; + } + } + + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --font-size: 20px; + } + } + } + + // Borders + --border-radius: 0.25rem; + --border-width: 1px; + --outline-width: 3px; + + // Spacings + --spacing: 1rem; + + // Spacings for typography elements + --typography-spacing-vertical: 1.5rem; + + // Spacings for body > header, body > main, body > footer, section, article + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + + @if ($enable-classes and $enable-grid) { + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + } + + // Spacings for form elements and button + --form-element-spacing-vertical: 0.75rem; + --form-element-spacing-horizontal: 1rem; + + // Spacings for nav component + --nav-element-spacing-vertical: 1rem; + --nav-element-spacing-horizontal: 0.5rem; + --nav-link-spacing-vertical: 0.5rem; + --nav-link-spacing-horizontal: 0.5rem; + + // Font weight for form labels & fieldsets legend + --form-label-font-weight: var(--font-weight); + + // Transitions + --transition: 0.2s ease-in-out; + + // Modal () + --modal-overlay-backdrop-filter: blur(0.25rem); +} + +// Responsives spacings +@if $enable-responsive-spacings { + // Sectioning + #{$semantic-root-element} > header, + #{$semantic-root-element} > main, + #{$semantic-root-element} > footer, + section { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --block-spacing-vertical: calc(var(--spacing) * 3); + } + } + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } + } + + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --block-spacing-vertical: calc(var(--spacing) * 4); + } + } + } + + // Card (
) + article { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } + } + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } + } + + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } + } + } + + // Modal + dialog > article { + + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --block-spacing-vertical: calc(var(--spacing) * 3); + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } + } + } +} + +// Link +a { + --text-decoration: none; + + // Secondary & Contrast + @if $enable-classes { + &.secondary, + &.contrast { + --text-decoration: underline; + } + } +} + +// Small +small { + --font-size: 0.875em; +} + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +// Forms elements +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +// Table +thead, +tfoot { + th, + td { + --border-width: 3px; + } +} + +:not(thead, tfoot) > * > td { + --font-size: 0.875em; +} + +// Code +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", + "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; +} -- cgit v1.2.3