diff options
author | sadbeast <sadbeast@sadbeast.com> | 2024-01-31 17:47:56 -0800 |
---|---|---|
committer | sadbeast <sadbeast@sadbeast.com> | 2024-01-31 17:47:56 -0800 |
commit | 332ec93366315fa1ed7b4acd7a3407c96e8ddfa7 (patch) | |
tree | 6ae553317f12a7a6a29c849c8805ffab96436dc2 /app/assets/stylesheets/_variables.scss | |
download | td-332ec93366315fa1ed7b4acd7a3407c96e8ddfa7.tar.gz td-332ec93366315fa1ed7b4acd7a3407c96e8ddfa7.tar.bz2 |
Diffstat (limited to 'app/assets/stylesheets/_variables.scss')
-rw-r--r-- | app/assets/stylesheets/_variables.scss | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss new file mode 100644 index 0000000..e2f653e --- /dev/null +++ b/app/assets/stylesheets/_variables.scss @@ -0,0 +1,69 @@ +// Config +// –––––––––––––––––––– + +// Set the root element for $enable-semantic-container and $enable-responsive-spacings +$semantic-root-element: "body" !default; + +// Enable <header>, <main>, <footer> inside $semantic-root-element as containers +$enable-semantic-container: false !default; + +// Enable .container and .container-fluid +$enable-class-container: true !default; + +// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container +// Fluid layout if disabled +$enable-viewport: true !default; + +// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article> +// Fixed spacings if disabled +$enable-responsive-spacings: true !default; + +// Enable responsive typography +// Fixed root element size if disabled +$enable-responsive-typography: true !default; + +// Enable .classes +// .classless version if disabled +$enable-classes: true !default; + +// Enable .grid class +$enable-grid: true !default; + +// Enable transitions +$enable-transitions: true !default; + +// Enable overriding with !important +$enable-important: true !default; + +// Responsive +// –––––––––––––––––––– + +// xs: Extra small (portrait phones) +// sm: Small(landscape phones) +// md: Medium(tablets) +// lg: Large(desktops) +// xl: Extra large (large desktops) + +// NOTE: +// To provide an easy and fine styling on each breakpoint +// we didn't use @each, @mixin or @include. +// That means you need to edit each CSS selector file to add a breakpoint + +// Breakpoints +// 'null' disable the breakpoint +$breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, +) !default; + +// Viewports +$viewports: ( + // 'null' disable the viewport on a breakpoint + sm: 510px, + md: 700px, + lg: 920px, + xl: 1130px +) !default; |