_variables.scss

//variables

//responsive sizes
$screen-width-sm: 576;
$screen-width-md: 768;
$screen-width-lg: 992;
$screen-width-xl: 1200;

$breakpoints: ('': 0,
	'sm' : $screen-width-sm,
	'md': $screen-width-md,
	'lg': $screen-width-lg,
	'xl': $screen-width-xl);

$columns: 12;

//colours
$black: #222 !default;
$white: #FFF !default;

$default: $black !default;
$error: #E00 !default;
$success: #060 !default;

$bg: #EBEBEB !default;

$input-bg: #D6D6D6 !default;
$input-border: #808080 !default;

$colour-contrast-dark: $black;
$colour-contrast-light: $white;
$min-contrast-ratio: 4.5 !default;

$disable-opacity: 0.7; //how much to fade disabled controls

//put in an array so we can loop over contextual stylings etc
$colours: ("default": $default,
	"error": $error,
	"success": $success,
	"dark": $black,
	"light": $white);

//spacing
$spacer: 1rem;
$spacer-half: $spacer * 0.5;

$radius-small: 10px;
$radius-large: 20px;

//fonts
$font-size: 1rem;
$line-height: $font-size * 1.5;
$heading-font: "Asket" !default;
$body-font: "Open Sans" !default;

$heading-sizes: (1: $font-size * 2.6,
	2: $font-size * 2.1,
	3: $font-size * 1.85,
	4: $font-size * 1.6,
	5: $font-size * 1.35,
	6: $font-size * 1.1);

$button-weight: 400;

//element selectors
//style "textual" inputs - single line text, multi-line text, dropdown
$text-input: 'textarea, select, input:not([type=hidden]):not([type=checkbox]):not([type=radio])';

//utility variables
$display-types: ('none', 'block', 'inline', 'inline-block', 'flex');
$text-alignments: ('start', 'center', 'end'); //LTR/RTL accessible - go us!

$margin-names: (
	"margin": "m",
	"margin-top": "mt",
	"margin-bottom": "mb",
	"margin-left": "ml",
	"margin-right": "mr"
);

$margins: (0, $spacer * 0.5, $spacer, $spacer * 2);