2019-11-27 15:31:49 +07:00
|
|
|
|
// Config
|
|
|
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
|
|
|
|
|
|
// Enable <header>, <main>, <footer> inside <body> as a container
|
|
|
|
|
|
$enable-semantic-container: false !default;
|
|
|
|
|
|
|
2019-11-30 12:43:20 +07:00
|
|
|
|
// Enable .container and .container-fluid
|
2019-11-27 15:31:49 +07:00
|
|
|
|
$enable-class-container: true !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Enable a centered viewport
|
|
|
|
|
|
// 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 base font if disabled
|
|
|
|
|
|
$enable-responsive-typography: true !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Enable .classes
|
|
|
|
|
|
// .classless version if disabled
|
|
|
|
|
|
$enable-classes: true !default;
|
|
|
|
|
|
|
2019-12-02 23:22:13 +07:00
|
|
|
|
// Enable validation states for <input>
|
2019-12-02 11:52:26 +07:00
|
|
|
|
$enable-input-states: true !default;
|
|
|
|
|
|
|
2019-12-08 10:35:18 +07:00
|
|
|
|
// Enable transitions for <a>, <button>, <input>
|
2019-12-02 23:22:13 +07:00
|
|
|
|
$enable-transitions: true !default;
|
|
|
|
|
|
|
2019-11-27 15:31:49 +07:00
|
|
|
|
|
|
|
|
|
|
// Spacings
|
|
|
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
|
|
|
|
|
|
// Gutters and horizontals margins
|
2019-11-28 07:20:36 +07:00
|
|
|
|
// For <body>, .grid, <nav>, <table>
|
2019-11-27 15:31:49 +07:00
|
|
|
|
$spacing-gutter: 1rem !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Blocks verticals margins and paddings
|
|
|
|
|
|
// For <header>, <main>, <footer>, <section>, <article>
|
|
|
|
|
|
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
|
|
|
|
|
$spacing-block: 2rem !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Vertical margins for Typography and Form elements
|
|
|
|
|
|
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
|
|
|
|
|
$spacing-typography: 1.5rem !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Padding for <input> and <button>
|
|
|
|
|
|
$spacing-input-button: .75rem 1rem !default;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Typography
|
|
|
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
|
|
|
|
|
|
// Sans serif native font stack
|
2020-09-11 23:22:50 +07:00
|
|
|
|
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
|
|
|
|
|
$sans-serif:
|
|
|
|
|
|
system-ui,
|
|
|
|
|
|
-apple-system, // macOS 10.11-10.12
|
|
|
|
|
|
"Segoe UI", // Windows 6+
|
|
|
|
|
|
"Roboto", // Android 4+
|
|
|
|
|
|
"Ubuntu", // Ubuntu 10.10+
|
|
|
|
|
|
"Cantarell", // Gnome 3+
|
|
|
|
|
|
"Noto Sans", // KDE Plasma 5+
|
|
|
|
|
|
sans-serif, // Fallback
|
|
|
|
|
|
"Apple Color Emoji", // macOS emoji
|
|
|
|
|
|
"Segoe UI Emoji", // Windows emoji
|
|
|
|
|
|
"Segoe UI Symbol", // Windows emoji
|
|
|
|
|
|
"Noto Color Emoji" // Linux emoji
|
|
|
|
|
|
!default;
|
2019-11-27 15:31:49 +07:00
|
|
|
|
|
|
|
|
|
|
// Monospace native font stack
|
2020-09-11 23:22:50 +07:00
|
|
|
|
// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
|
|
|
|
|
$monospace:
|
|
|
|
|
|
"Menlo", // macOS 10.10+
|
|
|
|
|
|
"Consolas", // Windows 6+
|
|
|
|
|
|
"Roboto Mono", // Android 4+
|
|
|
|
|
|
"Ubuntu Monospace", // Ubuntu 10.10+
|
|
|
|
|
|
"Noto Mono", // KDE Plasma 5+
|
|
|
|
|
|
"Oxygen Mono", // KDE Plasma 4+
|
|
|
|
|
|
"Liberation Mono", // Linux/OpenOffice fallback
|
|
|
|
|
|
monospace, // Fallback
|
|
|
|
|
|
"Apple Color Emoji", // macOS emoji
|
|
|
|
|
|
"Segoe UI Emoji", // Windows emoji
|
|
|
|
|
|
"Segoe UI Symbol", // Windows emoji
|
|
|
|
|
|
"Noto Color Emoji" // Linux emoji
|
|
|
|
|
|
!default;
|
2019-11-27 15:31:49 +07:00
|
|
|
|
|
|
|
|
|
|
$line-height: 1.5 !default;
|
|
|
|
|
|
$text-weight: 400 !default;
|
|
|
|
|
|
$heading-weight: 700 !default;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Blocks
|
|
|
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
|
2019-11-28 07:20:36 +07:00
|
|
|
|
// For <form> elements, <button>, <article>, <details> inlined code, tooltips
|
2019-11-27 15:31:49 +07:00
|
|
|
|
$round: .25rem !default;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Transitions
|
|
|
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
|
|
|
|
|
|
// For <a>, <form> elements and <button>
|
|
|
|
|
|
$transition: .2s ease-in-out !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
|
|
|
|
|
|
// You can disable any viewports, base-font and spacing-factor with 'null'
|
|
|
|
|
|
|
|
|
|
|
|
// Breakpoints
|
|
|
|
|
|
// 'null' disable the breakpoint
|
|
|
|
|
|
$breakpoints: (
|
|
|
|
|
|
xs: 0,
|
|
|
|
|
|
sm: 576px,
|
|
|
|
|
|
md: 768px,
|
|
|
|
|
|
lg: 992px,
|
|
|
|
|
|
xl: 1200px
|
|
|
|
|
|
) !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Viewports
|
|
|
|
|
|
$viewports: (
|
2019-11-28 07:20:36 +07:00
|
|
|
|
// 'null' disable the viewport on a breakpoint
|
2019-11-27 15:31:49 +07:00
|
|
|
|
sm: 510px,
|
|
|
|
|
|
md: 700px,
|
|
|
|
|
|
lg: 920px,
|
|
|
|
|
|
xl: 1130px
|
|
|
|
|
|
) !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Base font for .rem
|
|
|
|
|
|
// 'null' disable the base font on a breakpoint
|
|
|
|
|
|
// 'xs' should not be 'null'
|
|
|
|
|
|
$base-font: (
|
|
|
|
|
|
xs: 16px,
|
|
|
|
|
|
sm: 17px,
|
|
|
|
|
|
md: 18px,
|
|
|
|
|
|
lg: 19px,
|
|
|
|
|
|
xl: 20px
|
|
|
|
|
|
) !default;
|
|
|
|
|
|
|
|
|
|
|
|
// Multiplication factor for spacings
|
|
|
|
|
|
// 'null' disable spacing factor on a breakpoint
|
|
|
|
|
|
$spacing-factor: (
|
|
|
|
|
|
xs: 1,
|
|
|
|
|
|
sm: 1.25,
|
|
|
|
|
|
md: 1.5,
|
|
|
|
|
|
lg: 1.75,
|
|
|
|
|
|
xl: 2
|
|
|
|
|
|
) !default;
|
