ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add dedicated scss config files

Browse Source
This commit is contained in:
Lucas Vallenet
2023-06-08 11:48:00 +02:00
parent 217a1adba7
commit 99801a2d8b
15 changed files with 5405 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
assets/styles/settings/_config.breakpoints.scss Normal file
View File

@@ -0,0 +1,95 @@
// ==========================================================================
// Settings / Config / Breakpoints
// ==========================================================================
// Breakpoints
// ==========================================================================
$breakpoints: (
"tiny": 500px,
"small": 700px,
"medium": 1000px,
"large": 1200px,
"big": 1400px,
"huge": 1600px,
"enormous": 1800px,
"gigantic": 2000px,
"colossal": 2400px
);
// Functions
// ==========================================================================
// Creates a min-width or max-width media query expression.
//
// @param {string} $breakpoint The breakpoint.
// @param {string} $type Either "min" or "max".
// @return {string}
@function mq($breakpoint, $type: "min") {
@if not map-has-key($breakpoints, $breakpoint) {
@warn "Unknown media query breakpoint: `#{$breakpoint}`";
}
$value: map-get($breakpoints, $breakpoint);
@if ($type == "min") {
@return "(min-width: #{$value})";
}
@if ($type == "max") {
@return "(max-width: #{$value - 1px})";
}
@error "Unknown media query type: #{$type}";
}
// Creates a min-width media query expression.
//
// @param {string} $breakpoint The breakpoint.
// @return {string}
@function mq-min($breakpoint) {
@return mq($breakpoint, "min");
}
// Creates a max-width media query expression.
//
// @param {string} $breakpoint The breakpoint.
// @return {string}
@function mq-max($breakpoint) {
@return mq($breakpoint, "max");
}
// Creates a min-width and max-width media query expression.
//
// @param {string} $from The min-width breakpoint.
// @param {string} $until The max-width breakpoint.
// @return {string}
@function mq-between($breakpointMin, $breakpointMax) {
@return "#{mq-min($breakpointMin)} and #{mq-max($breakpointMax)}";
}
// Legacy
// ==========================================================================
$from-tiny: map-get($breakpoints, "tiny") !default;
$to-tiny: map-get($breakpoints, "tiny") - 1 !default;
$from-small: map-get($breakpoints, "small") !default;
$to-small: map-get($breakpoints, "small") - 1 !default;
$from-medium: map-get($breakpoints, "medium") !default;
$to-medium: map-get($breakpoints, "medium") - 1 !default;
$from-large: map-get($breakpoints, "large") !default;
$to-large: map-get($breakpoints, "large") - 1 !default;
$from-big: map-get($breakpoints, "big") !default;
$to-big: map-get($breakpoints, "big") - 1 !default;
$from-huge: map-get($breakpoints, "huge") !default;
$to-huge: map-get($breakpoints, "huge") - 1 !default;
$from-enormous: map-get($breakpoints, "enormous") !default;
$to-enormous: map-get($breakpoints, "enormous") - 1 !default;
$from-gigantic: map-get($breakpoints, "gigantic") !default;
$to-gigantic: map-get($breakpoints, "gigantic") - 1 !default;
$from-colossal: map-get($breakpoints, "colossal") !default;
$to-colossal: map-get($breakpoints, "colossal") - 1 !default;