[ipfire.org.git] / src / scss / _variables.scss

// Global Settings
$enable-shadows:			true;
$shadow-1:					0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
$shadow-2:					0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
$shadow-3:					0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
$shadow-4:					0 10px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 6px 0 rgba(0, 0, 0, 0.26);
$shadow-5:					0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26);
$shadow-6:					0 19px 38px 0 rgba(0, 0, 0, 0.3), 0 15px 12px 0 rgba(0, 0, 0, 0.22);

/*
	Colours
*/
$red-900:   				#b71c1c;
$red-600:   				#e53935;

$amber-800: 				#ff8f00;
$yellow-700:				#fbc02d;

$blue-700:					#1976d2;
$blue-400:					#42a5f5;

$green-600:					#43a047;
$green-400:					#66bb6a;

$blue-grey-900:				#263238;
$blue-grey-700:				#455a64;
$blue-grey-600:				#546e7a;
$blue-grey-300:				#90a4ae;
$blue-grey-50:				#eceff1;

$orange-a400:				#ff3d00;

$cyan:						#00bcd4;

// Theme
$primary:					$red-900;
$secondary:					white;
$light:						$blue-grey-50;
$dark:						$blue-grey-900;

$yiq-text-dark:				$primary;
$yiq-text-light:			$secondary;

$body-bg:					$blue-grey-50;
$body-color:				$blue-grey-900;

// Breakpoints
$grid-breakpoints: (
	xs: 0,
	sm: 600px,
	md: 768px,
	lg: 1024px,
	xl: 1280px
);

$border-radius:				2px;
$border-radius-lg:			2px;

// Fonts
$font-family-sans-serif:	"Ubuntu", sans-serif;

$font-weight-light:			300;
$font-weight-normal:		400;
$font-weight-bold:			700;

// Typo
$font-size-base:			1rem;
$lead-font-size:			1.5rem;
$small-font-size:			87.5%;

// Headings
$headings-font-weight:		400;
$headings-line-height:		1.5;
$headings-margin-bottom:	1.5rem;
$headings-color:			$blue-grey-900;

$h1-font-size:				3rem;
$h2-font-size:				2.5rem;
$h3-font-size:				2.25rem;
$h4-font-size:				2rem;
$h5-font-size:				1.5rem;
$h6-font-size:				1.25rem;

$display1-size:				7.5rem;

// Links
$link-color:				$primary;

// Navbar
$navbar-brand-font-size:	36px;
$navbar-brand-height:		32px;

$nav-link-height:			24px;
$navbar-nav-link-padding-x:	16px;

$navbar-padding-y:			1.1rem;

// Input
$input-btn-padding-x:		1rem;
$input-btn-padding-y:		.5rem;

$input-btn-focus-box-shadow:	$shadow-3;

// Shadows
$box-shadow:				$shadow-1;
$box-shadow-sm:				$box-shadow;
$box-shadow-lg:				$shadow-6;

// Buttons
$btn-border-width:			2px;

$btn-box-shadow:			0 2px 0 rgba(black, .16), 0 1px 2px rgba(black, .23);
$btn-active-box-shadow:		$input-btn-focus-box-shadow;
Commit	Line	Data
09ecfb11	1	// Global Settings
4c660a9c	2	$enable-shadows: true;
cc59f0e1 MT	3	$shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	4	$shadow-2: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
	5	$shadow-3: 0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
	6	$shadow-4: 0 10px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 6px 0 rgba(0, 0, 0, 0.26);
	7	$shadow-5: 0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26);
	8	$shadow-6: 0 19px 38px 0 rgba(0, 0, 0, 0.3), 0 15px 12px 0 rgba(0, 0, 0, 0.22);
09ecfb11	9
bc5b7100 MT	10	/*
	11	Colours
	12	*/
4c660a9c MT	13	$red-900: #b71c1c;
4c660a9c MT	14	$red-600: #e53935;
bc5b7100	15
4c660a9c MT	16	$amber-800: #ff8f00;
4c660a9c MT	17	$yellow-700: #fbc02d;
bc5b7100	18
4c660a9c MT	19	$blue-700: #1976d2;
4c660a9c MT	20	$blue-400: #42a5f5;
bc5b7100	21
4c660a9c MT	22	$green-600: #43a047;
4c660a9c MT	23	$green-400: #66bb6a;
bc5b7100	24
4c660a9c MT	25	$blue-grey-900: #263238;
	26	$blue-grey-700: #455a64;
	27	$blue-grey-600: #546e7a;
	28	$blue-grey-300: #90a4ae;
	29	$blue-grey-50: #eceff1;
bc5b7100	30
4c660a9c	31	$orange-a400: #ff3d00;
bc5b7100	32
4c660a9c	33	$cyan: #00bcd4;
b564c283 MT	34
b564c283 MT	35	// Theme
4c660a9c MT	36	$primary: $red-900;
4c660a9c MT	37	$secondary: white;
95b30f84	38	$light: $blue-grey-50;
4c660a9c	39	$dark: $blue-grey-900;
6cee9198	40
af7f1277 MT	41	$yiq-text-dark: $primary;
	42	$yiq-text-light: $secondary;
	43
cc59f0e1 MT	44	$body-bg: $blue-grey-50;
	45	$body-color: $blue-grey-900;
	46
6cee9198 MT	47	// Breakpoints
	48	$grid-breakpoints: (
	49	xs: 0,
	50	sm: 600px,
	51	md: 768px,
	52	lg: 1024px,
	53	xl: 1280px
	54	);
	55
	56	$border-radius: 2px;
41f3d31d	57	$border-radius-lg: 2px;
6cee9198 MT	58
6cee9198 MT	59	// Fonts
cf0c8875	60	$font-family-sans-serif: "Ubuntu", sans-serif;
6cee9198	61
cf0c8875	62	$font-weight-light: 300;
616bd6a5	63	$font-weight-normal: 400;
d7ffd81a MT	64	$font-weight-bold: 700;
d7ffd81a MT	65
41f3d31d	66	// Typo
e434c81f MT	67	$font-size-base: 1rem;
	68	$lead-font-size: 1.5rem;
	69	$small-font-size: 87.5%;
	70
	71	// Headings
95b30f84	72	$headings-font-weight: 400;
e434c81f	73	$headings-line-height: 1.5;
8d7dd2e9	74	$headings-margin-bottom: 1.5rem;
319dd276 MT	75	$headings-color: $blue-grey-900;
319dd276 MT	76
e434c81f MT	77	$h1-font-size: 3rem;
	78	$h2-font-size: 2.5rem;
	79	$h3-font-size: 2.25rem;
	80	$h4-font-size: 2rem;
	81	$h5-font-size: 1.5rem;
	82	$h6-font-size: 1.25rem;
	83
	84	$display1-size: 7.5rem;
41f3d31d	85
9f043320 MT	86	// Links
	87	$link-color: $primary;
	88
6cee9198 MT	89	// Navbar
	90	$navbar-brand-font-size: 36px;
	91	$navbar-brand-height: 32px;
	92
	93	$nav-link-height: 24px;
	94	$navbar-nav-link-padding-x: 16px;
	95
	96	$navbar-padding-y: 1.1rem;
	97
41f3d31d MT	98	// Input
	99	$input-btn-padding-x: 1rem;
	100	$input-btn-padding-y: .5rem;
	101
cc59f0e1	102	$input-btn-focus-box-shadow: $shadow-3;
09ecfb11 MT	103
09ecfb11 MT	104	// Shadows
cc59f0e1	105	$box-shadow: $shadow-1;
09ecfb11	106	$box-shadow-sm: $box-shadow;
cc59f0e1	107	$box-shadow-lg: $shadow-6;
09ecfb11	108
6cee9198 MT	109	// Buttons
6cee9198 MT	110	$btn-border-width: 2px;
09ecfb11 MT	111
	112	$btn-box-shadow: 0 2px 0 rgba(black, .16), 0 1px 2px rgba(black, .23);
	113	$btn-active-box-shadow: $input-btn-focus-box-shadow;