danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-26 20:14:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

add namespace to sizes to be consistent with colors

Browse Source
This commit is contained in:
Stacy Kvernmo 2023-03-13 15:46:22 -05:00
parent f82e4c8a68
commit 90c9eedefa
3 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
source/assets/sass/_breakpoints.scss
View File

@ -3,10 +3,10 @@
$sl-breakpoints: (
// for mixins to span across breakpoints and without one
none: 0,
small: config.$breakpoint--small,
medium: config.$breakpoint--medium,
large: config.$breakpoint--large,
x-large: config.$breakpoint--x-large
small: config.$sl-breakpoint--small,
medium: config.$sl-breakpoint--medium,
large: config.$sl-breakpoint--large,
x-large: config.$sl-breakpoint--x-large
);
@mixin sl-breakpoint($breakpoint) {
@ -22,49 +22,49 @@ $sl-breakpoints: (
}
@mixin sl-breakpoint--small {
@include sl-breakpoint(config.$breakpoint--small) {
@include sl-breakpoint(config.$sl-breakpoint--small) {
@content;
}
}
@mixin sl-breakpoint--small-max {
@include sl-breakpoint-max(config.$breakpoint--small) {
@include sl-breakpoint-max(config.$sl-breakpoint--small) {
@content;
}
}
@mixin sl-breakpoint--medium {
@include sl-breakpoint(config.$breakpoint--medium) {
@include sl-breakpoint(config.$sl-breakpoint--medium) {
@content;
}
}
@mixin sl-breakpoint--medium-max {
@include sl-breakpoint-max(config.$breakpoint--medium) {
@include sl-breakpoint-max(config.$sl-breakpoint--medium) {
@content;
}
}
@mixin sl-breakpoint--large {
@include sl-breakpoint(config.$breakpoint--large) {
@include sl-breakpoint(config.$sl-breakpoint--large) {
@content;
}
}
@mixin sl-breakpoint--large-max {
@include sl-breakpoint-max(config.$breakpoint--large) {
@include sl-breakpoint-max(config.$sl-breakpoint--large) {
@content;
}
}
@mixin sl-breakpoint--x-large {
@include sl-breakpoint(config.$breakpoint--x-large) {
@include sl-breakpoint(config.$sl-breakpoint--x-large) {
@content;
}
}
@mixin sl-breakpoint--x-large-max {
@include sl-breakpoint-max(config.$breakpoint--x-large) {
@include sl-breakpoint-max(config.$sl-breakpoint--x-large) {
@content;
}
}

76
source/assets/sass/config/_scale.scss
View File

@ -1,55 +1,55 @@
// Spacing Sizes
// -------------
$gutter: 1rem; // ~16px
$gutter--quarter: calc(var(--sl-gutter) * 0.25); // ~4px
$gutter--half: calc(var(--sl-gutter) * 0.5); // ~8px
$gutter--minus: calc(var(--sl-gutter) * 0.75); // ~12px
$gutter--plus: calc(var(--sl-gutter) * 1.25); // ~20px
$gutter--sesqui: calc(var(--sl-gutter) * 1.5); // ~24px
$gutter--double: calc(var(--sl-gutter) * 2); // ~32px
$gutter--double-sesqui: calc(var(--sl-gutter) * 2.5); // ~40px
$gutter--triple: calc(var(--sl-gutter) * 3); // ~48px
$sl-gutter: 1rem; // ~16px
$sl-gutter--quarter: calc(var(--sl-gutter) * 0.25); // ~4px
$sl-gutter--half: calc(var(--sl-gutter) * 0.5); // ~8px
$sl-gutter--minus: calc(var(--sl-gutter) * 0.75); // ~12px
$sl-gutter--plus: calc(var(--sl-gutter) * 1.25); // ~20px
$sl-gutter--sesqui: calc(var(--sl-gutter) * 1.5); // ~24px
$sl-gutter--double: calc(var(--sl-gutter) * 2); // ~32px
$sl-gutter--double-sesqui: calc(var(--sl-gutter) * 2.5); // ~40px
$sl-gutter--triple: calc(var(--sl-gutter) * 3); // ~48px
// Negative Spacing Sizes
// ----------------------
$gutter--negative: calc(var(--sl-gutter) * -1);
$gutter--quarter-negative: calc(var(--sl-gutter--quarter) * -1);
$gutter--half-negative: calc(var(--sl-gutter--half) * -1);
$gutter--minus-negative: calc(var(--sl-gutter--minus) * -1);
$gutter--plus-negative: calc(var(--sl-gutter--plus) * -1);
$gutter--sesqui-negative: calc(var(--sl-gutter--sesqui) * -1);
$gutter--double-negative: calc(var(--sl-gutter--double) * -1);
$gutter--double-sesqui-negative: calc(var(--sl-gutter--double-sesqui) * -1);
$gutter--triple-negative: calc(var(--sl-gutter--triple) * -1);
$sl-gutter--negative: calc(var(--sl-gutter) * -1);
$sl-gutter--quarter-negative: calc(var(--sl-gutter--quarter) * -1);
$sl-gutter--half-negative: calc(var(--sl-gutter--half) * -1);
$sl-gutter--minus-negative: calc(var(--sl-gutter--minus) * -1);
$sl-gutter--plus-negative: calc(var(--sl-gutter--plus) * -1);
$sl-gutter--sesqui-negative: calc(var(--sl-gutter--sesqui) * -1);
$sl-gutter--double-negative: calc(var(--sl-gutter--double) * -1);
$sl-gutter--double-sesqui-negative: calc(var(--sl-gutter--double-sesqui) * -1);
$sl-gutter--triple-negative: calc(var(--sl-gutter--triple) * -1);
// UI Sizes
// --------
$border-radius--large: 0.25rem;
$border-radius--small: 0.125rem;
$border--small: 1px;
$column--medium: 30rem;
$column--small: 15rem;
$table-cell-padding: var(--sl-gutter--half);
$sl-border-radius--large: 0.25rem;
$sl-border-radius--small: 0.125rem;
$sl-border--small: 1px;
$sl-column--medium: 30rem;
$sl-column--small: 15rem;
$sl-table-cell-padding: var(--sl-gutter--half);
// Layout Sizes
// ------------
$breakpoint--small: 30em; // 480px
$breakpoint--medium: 40em; // 640px
$breakpoint--large: 60em; // 960px
$breakpoint--x-large: 80em; // 1280px
$sl-breakpoint--small: 30em; // 480px
$sl-breakpoint--medium: 40em; // 640px
$sl-breakpoint--large: 60em; // 960px
$sl-breakpoint--x-large: 80em; // 1280px
// Font Sizes Generic
// ------------------
$font-size--smaller: 90%;
$font-size--x-small: 0.875rem; // 14px
$font-size--small: 1rem; // 16px
$font-size--medium: 1.125rem; // 18px
$font-size--large: 1.25rem; // 20px
$font-size--x-large: 1.5rem; // 22px
$font-size--xx-large: 1.75rem; // 28px
$font-size--xxx-large: 2rem; // 32px
$font-size--xxxx-large: 5rem; // 80px
$sl-font-size--smaller: 90%;
$sl-font-size--x-small: 0.875rem; // 14px
$sl-font-size--small: 1rem; // 16px
$sl-font-size--medium: 1.125rem; // 18px
$sl-font-size--large: 1.25rem; // 20px
$sl-font-size--x-large: 1.5rem; // 22px
$sl-font-size--xx-large: 1.75rem; // 28px
$sl-font-size--xxx-large: 2rem; // 32px
$sl-font-size--xxxx-large: 5rem; // 80px
// Font Sizes Custom
// -----------------
$status-text-size: 0.8em;
$sl-status-text-size: 0.8em;

2
source/assets/sass/visual-design/_theme.scss
View File

@ -3,7 +3,7 @@
@use '../config/color/brand';
html {
@include config.tokens(config.$scale, 'sl-');
@include config.tokens(config.$scale);
@include config.tokens(config.$brand-colors);
@include config.tokens(config.$content-colors);