mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
109 lines
3.1 KiB
SCSS
109 lines
3.1 KiB
SCSS
// ==========================================================================
|
|
// Settings / Config
|
|
// ==========================================================================
|
|
|
|
// Context
|
|
// =============================================================================
|
|
|
|
// The current stylesheet context. Available values: frontend, editor.
|
|
$context: frontend !default;
|
|
|
|
// Path is relative to the stylesheets directory.
|
|
$assets-path: "../" !default;
|
|
|
|
// Typefaces
|
|
// =============================================================================
|
|
|
|
$font-dir: "../fonts/";
|
|
|
|
$font-families: (
|
|
"sans": ("Webfont Sans", "Helvetica Neue", Arial, sans-serif),
|
|
// "serif": ("Webfont Serif", Georgia, serif)
|
|
);
|
|
|
|
$font-faces: (
|
|
// "Webfont Sans" "webfont-sans_regular" 400 normal,
|
|
// "Webfont Sans" "webfont-sans_regular-italic" 400 italic,
|
|
// "Webfont Serif" "webfont-sans_bold" 700 normal,
|
|
);
|
|
|
|
// Typography
|
|
// =============================================================================
|
|
|
|
// Base
|
|
$font-size: 16px;
|
|
$line-height: 24px / $font-size;
|
|
$font-color: $color-darkest;
|
|
|
|
// Headings
|
|
$font-size-h1: 36px !default;
|
|
$font-size-h2: 28px !default;
|
|
$font-size-h3: 24px !default;
|
|
$font-size-h4: 20px !default;
|
|
$font-size-h5: 18px !default;
|
|
$font-size-h6: 16px !default;
|
|
$line-height-h: $line-height;
|
|
|
|
// Weights
|
|
$font-weight-light: 300;
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-bold: 700;
|
|
|
|
// Transitions
|
|
// =============================================================================
|
|
|
|
$speed: 0.3s;
|
|
$easing: $ease-power2-out;
|
|
|
|
// Spacing Units
|
|
// =============================================================================
|
|
|
|
$unit: 60px;
|
|
$unit-small: 30px;
|
|
|
|
// Container
|
|
// =============================================================================
|
|
|
|
$container-width: 2000px;
|
|
$padding: $unit;
|
|
|
|
// Breakpoints
|
|
// =============================================================================
|
|
|
|
$from-tiny: 500px !default;
|
|
$to-tiny: $from-tiny - 1 !default;
|
|
$from-small: 700px !default;
|
|
$to-small: $from-small - 1 !default;
|
|
$from-medium: 1000px !default;
|
|
$to-medium: $from-medium - 1 !default;
|
|
$from-large: 1200px !default;
|
|
$to-large: $from-large - 1 !default;
|
|
$from-big: 1400px !default;
|
|
$to-big: $from-big - 1 !default;
|
|
$from-huge: 1600px !default;
|
|
$to-huge: $from-huge - 1 !default;
|
|
$from-enormous: 1800px !default;
|
|
$to-enormous: $from-enormous - 1 !default;
|
|
$from-gigantic: 2000px !default;
|
|
$to-gigantic: $from-gigantic - 1 !default;
|
|
$from-colossal: 2400px !default;
|
|
$to-colossal: $from-colossal - 1 !default;
|
|
|
|
// Master z-indexe
|
|
// =============================================================================
|
|
|
|
$z-indexes: (
|
|
"goku": 9000,
|
|
"transition": 500,
|
|
"toast": 400,
|
|
"popover": 300,
|
|
"modal": 250,
|
|
"sheet": 200,
|
|
"fixed": 150,
|
|
"sticky": 100,
|
|
"dropdown": 50,
|
|
"default": 1,
|
|
"limbo": -999
|
|
);
|