mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
105 lines
2.9 KiB
SCSS
105 lines
2.9 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;
|
|
$color: #222222;
|
|
|
|
// 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
|
|
$light: 300;
|
|
$normal: 400;
|
|
$medium: 500;
|
|
$bold: 700;
|
|
|
|
// Transitions
|
|
// =============================================================================
|
|
|
|
$speed: 0.3s;
|
|
$easing: $Power2EaseOut;
|
|
|
|
// 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;
|
|
|
|
// Z-indexes
|
|
// =============================================================================
|
|
|
|
$layers: (
|
|
"goku" : 9000,
|
|
"loader" : 500,
|
|
"modal" : 300,
|
|
"header" : 200,
|
|
"dropdown" : 100,
|
|
"default" : 1,
|
|
"limbo" : -999
|
|
);
|