You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.0 KiB
63 lines
2.0 KiB
4 years ago
|
// --------------------------------------------------
|
||
|
|
// reflex variables
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
// Prefix
|
||
|
|
// -------------------------
|
||
|
|
// You can optionally namespace reflex classes to avoid clashing with other css frameworks
|
||
|
|
// e.g. setting $reflex-prefix as "reflex-" here would cause col-sm-6 to become reflex-col-sm-6
|
||
|
|
// Example: $reflex-prefix: reflex-;
|
||
|
|
// By default this is an empty string
|
||
|
|
$reflex-prefix: null !default;
|
||
|
|
|
||
|
|
|
||
|
|
// Legacy support
|
||
|
|
// -------------------------
|
||
|
|
// Reflex adds a lot of css propertie to support older browsers that don't support flexbox layout.
|
||
|
|
// If you prefer to use this as a purely flexbox grid without legacy support then set this to false
|
||
|
|
$legacy-support: true !default;
|
||
|
|
|
||
|
|
// Responsive visibility helpers
|
||
|
|
// -------------------------
|
||
|
|
// Reflex has some generic visibility classes to hide elements at different breakpoints.
|
||
|
|
// If you want to disable these then set this to false
|
||
|
|
$visibility-helpers: true !default;
|
||
|
|
|
||
|
|
// Grid
|
||
|
|
// -------------------------
|
||
|
|
$reflex-columns: 12 !default; // number of columns
|
||
|
|
|
||
|
|
// Breakpoints
|
||
|
|
// -------------------------
|
||
|
|
$reflex-xs: 576px !default;
|
||
|
|
$reflex-sm: 768px !default;
|
||
|
|
$reflex-md: 992px !default;
|
||
|
|
$reflex-lg: 1200px !default;
|
||
|
|
$reflex-xlg: 1600px !default;
|
||
|
|
|
||
|
|
$reflex-xxs-max: ($reflex-xs - 1);
|
||
|
|
$reflex-xs-max: ($reflex-sm - 1);
|
||
|
|
$reflex-sm-max: ($reflex-md - 1);
|
||
|
|
$reflex-md-max: ($reflex-lg - 1);
|
||
|
|
$reflex-lg-max: ($reflex-xlg - 1);
|
||
|
|
|
||
|
|
// Spacing
|
||
|
|
// -------------------------
|
||
|
|
$reflex-grid-spacing: 15px !default;
|
||
|
|
|
||
|
|
// Custom properties so others can reference the variables.
|
||
|
|
:root {
|
||
|
|
--reflex-columns: #{ $reflex-columns };
|
||
|
|
--reflex-grid-spacing: #{ $reflex-grid-spacing };
|
||
|
|
--reflex-xs: #{ $reflex-xs };
|
||
|
|
--reflex-sm: #{ $reflex-sm };
|
||
|
|
--reflex-md: #{ $reflex-md };
|
||
|
|
--reflex-lg: #{ $reflex-lg };
|
||
|
|
--reflex-xlg: #{ $reflex-xlg };
|
||
|
|
--reflex-xxs-max: #{ $reflex-xxs-max };
|
||
|
|
--reflex-xs-max: #{ $reflex-xs-max };
|
||
|
|
--reflex-sm-max: #{ $reflex-sm-max };
|
||
|
|
--reflex-md-max: #{ $reflex-md-max };
|
||
|
|
--reflex-lg-max: #{ $reflex-lg-max };
|
||
|
|
}
|