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.
plain-ui/src/includes/_variables.scss

72 lines
2.1 KiB

// --------------------------------------------------
// 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);
$reflex-breakpoints: (
xxs: 0px,
xs: $reflex-xs,
sm: $reflex-sm,
md: $reflex-md,
lg: $reflex-lg,
xlg: $reflex-xlg
);
// 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 };
}