[people/shoehn/ipfire.org.git] / static / scss / bootstrap-4.0.0-alpha.6 / scss / _custom.scss

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

// Colors added for IPFire branding
$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: rgba(38, 50, 56, 1);
$blue_grey_700: rgba(38, 50, 56, .7);
$blue_grey_600: rgba(38, 50, 56, .6);
$blue_grey_300: rgba(38, 50, 56, .3);
$blue_grey_50: #eceff1;
$deep_orange_a400: #ff3d00;
$cyan: #00bcd4;

// Reassign color vars to semantic color scheme
$brand-primary:             $blue !default;
$brand-success:             $green !default;
$brand-info:                $teal !default;
$brand-warning:             $orange !default;
$brand-danger:              $red !default;
$brand-inverse:             $gray-dark !default;

// Spacing
$spacer:   8px;
$spacer-x: $spacer;
$spacer-y: $spacer;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 2),
    y: ($spacer-y * 2)
  ),
  6: (
    x: ($spacer-x * 6),
    y: ($spacer-y * 6)
  )
);

$border-width: 2px;

// Body
//
// Settings for the `<body>` element.
$body-bg:       $blue_grey_50;
$body-color:    $blue_grey_900;
$inverse-bg:    $gray-dark !default;
$inverse-color: $gray-lighter !default;

// Links
$link-color:            $red_900;
$link-hover-color:      darken($link-color, 15%);
$link-hover-decoration: none;

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

// Grid
$grid-columns:               12 !default;
$grid-gutter-width-base:     24px;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
);

// Fonts
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500');
$font-family-sans-serif: 'Ubuntu', sans-serif;
$font-family-base:       $font-family-sans-serif;

$font-size-lg:   20px;

$font-weight-normal: 400;
$font-weight-bold: 500;

$font-weight-base: $font-weight-normal;

$font-size-h1: 36px;
$font-size-h2: 32px;
$font-size-h3: 24px;
$font-size-h4: 20px;
$font-size-h5: 16px;
$font-size-h6: 12px;

$headings-font-weight:   400;

$display1-size: 120px;
$display2-size: 48px;
$display3-size: 32px;
$display4-size: 24px;

$lead-font-size:   24px;

$small-font-size: 14px;


// Buttons
$btn-padding-x:                  16px;
$btn-padding-y:                  8px;
$btn-line-height:                .95;
$btn-font-weight:                600;
$btn-box-shadow:                 none;
$btn-focus-box-shadow:           none;
$btn-active-box-shadow:          none;

$btn-primary-bg:                 $red_900;
$btn-primary-border:             $red_900;

$btn-secondary-color:            $blue_grey_600;
$btn-secondary-bg:               $white !default;
$btn-secondary-border:           $blue_grey_600;

$btn-info-color:                 $white !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                $btn-info-bg !default;

$btn-success-color:              $white !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

$btn-warning-color:              $white !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             $btn-warning-bg !default;

$btn-danger-color:               $white !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              $btn-danger-bg !default;

$btn-red900-color:				 $white !important;
$btn-red900-bg:					 $red_900;
$btn-red900-border:				 $btn-red900-bg;

$btn-white-color:				 $red_900;
$btn-white-bg:					 $white;
$btn-white-border:				 $btn-white-bg;

$btn-bluegrey900-color:			 $white;
$btn-bluegrey900-bg:			 $blue_grey_900;
$btn-bluegrey900-border:		 $btn-bluegrey900-bg;

$btn-link-disabled-color:        $gray-light !default;

$btn-padding-x-sm:               8px;
$btn-padding-y-sm:               4px;

$btn-padding-x-lg:               32px;
$btn-padding-y-lg:               12px;

$btn-block-spacing-y:            8px;
$btn-toolbar-margin:             8px;

// Allows for customizing button radius independently from global border radius
$btn-border-radius-lg:           2px;


$input-btn-border-width:         $border-width;

// Navs
$nav-item-margin:               24px;
$nav-item-inline-spacer:        16px;
$nav-link-padding:              8px 24px;
$nav-link-hover-bg:             $gray-lighter !default;
$nav-disabled-link-color:       $gray-light !default;

// Navbar
$navbar-padding-x:                  $spacer;
$navbar-padding-y:                  $spacer;

// Badges

$badge-default-bg:            $gray-light !default;
$badge-primary-bg:            $brand-primary !default;
$badge-success-bg:            $brand-success !default;
$badge-info-bg:               $brand-info !default;
$badge-warning-bg:            $brand-warning !default;
$badge-danger-bg:             $brand-danger !default;

$badge-color:                 $white !default;
$badge-link-hover-color:      $white !default;
$badge-font-size:             100%;
$badge-font-weight:           $font-weight-bold !default;
$badge-padding-x:             .4em !default;
$badge-padding-y:             .25em !default;

$badge-pill-padding-x:        .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius:    10rem !default;
Commit	Line	Data
b2051dd7 S	1	// Bootstrap overrides
	2	//
	3	// Copy variables from `_variables.scss` to this file to override default values
	4	// without modifying source files.
	5
	6	// Colors added for IPFire branding
	7	$red_900: #b71c1c;
	8	$red_600: #e53935;
	9	$amber_800: #ff8f00;
	10	$yellow_700: #fbc02d;
	11	$blue_700: #1976d2;
	12	$blue_400: #42a5f5;
	13	$green_600: #43a047;
	14	$green_400: #66bb6a;
bf75d6d5 S	15	$blue_grey_900: rgba(38, 50, 56, 1);
	16	$blue_grey_700: rgba(38, 50, 56, .7);
	17	$blue_grey_600: rgba(38, 50, 56, .6);
	18	$blue_grey_300: rgba(38, 50, 56, .3);
b2051dd7 S	19	$blue_grey_50: #eceff1;
	20	$deep_orange_a400: #ff3d00;
	21	$cyan: #00bcd4;
	22
97ed546d S	23	// Reassign color vars to semantic color scheme
	24	$brand-primary: $blue !default;
	25	$brand-success: $green !default;
	26	$brand-info: $teal !default;
	27	$brand-warning: $orange !default;
	28	$brand-danger: $red !default;
	29	$brand-inverse: $gray-dark !default;
b2051dd7	30
97ed546d	31	// Spacing
49baba87	32	$spacer: 8px;
1e5bc9c9 S	33	$spacer-x: $spacer;
1e5bc9c9 S	34	$spacer-y: $spacer;
97ed546d S	35	$spacers: (
	36	0: (
	37	x: 0,
	38	y: 0
	39	),
	40	1: (
	41	x: ($spacer-x * .25),
	42	y: ($spacer-y * .25)
	43	),
	44	2: (
	45	x: ($spacer-x * .5),
	46	y: ($spacer-y * .5)
	47	),
	48	3: (
	49	x: $spacer-x,
	50	y: $spacer-y
	51	),
	52	4: (
	53	x: ($spacer-x * 1.5),
	54	y: ($spacer-y * 1.5)
	55	),
	56	5: (
b6d1f3b7 S	57	x: ($spacer-x * 2),
b6d1f3b7 S	58	y: ($spacer-y * 2)
1e5bc9c9 S	59	),
1e5bc9c9 S	60	6: (
b6d1f3b7 S	61	x: ($spacer-x * 6),
b6d1f3b7 S	62	y: ($spacer-y * 6)
97ed546d	63	)
1e5bc9c9	64	);
b2051dd7	65
97ed546d S	66	$border-width: 2px;
97ed546d S	67
22cfab2d S	68	// Body
	69	//
	70	// Settings for the `<body>` element.
22cfab2d S	71	$body-bg: $blue_grey_50;
	72	$body-color: $blue_grey_900;
	73	$inverse-bg: $gray-dark !default;
	74	$inverse-color: $gray-lighter !default;
	75
97ed546d	76	// Links
1e5bc9c9	77	$link-color: $red_900;
9ce2074c S	78	$link-hover-color: darken($link-color, 15%);
9ce2074c S	79	$link-hover-decoration: none;
97ed546d	80
49baba87 S	81	// Grid breakpoints
	82	//
	83	// Define the minimum dimensions at which your layout will change,
	84	// adapting to different screen sizes, for use in media queries.
	85	$grid-breakpoints: (
	86	xs: 0,
	87	sm: 576px,
	88	md: 768px,
	89	lg: 992px,
	90	xl: 1200px
	91	) !default;
	92	@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
	93	@include _assert-starts-at-zero($grid-breakpoints);
97ed546d	94
49baba87	95	// Grid
22cfab2d	96	$grid-columns: 12 !default;
97ed546d	97	$grid-gutter-width-base: 24px;
22cfab2d S	98	$grid-gutter-widths: (
	99	xs: $grid-gutter-width-base,
	100	sm: $grid-gutter-width-base,
	101	md: $grid-gutter-width-base,
	102	lg: $grid-gutter-width-base,
	103	xl: $grid-gutter-width-base
	104	);
97ed546d	105
b2051dd7	106	// Fonts
d40f9b8d	107	@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500');
97ed546d S	108	$font-family-sans-serif: 'Ubuntu', sans-serif;
	109	$font-family-base: $font-family-sans-serif;
	110
49baba87	111	$font-size-lg: 20px;
97ed546d	112
2d8cbd13	113	$font-weight-normal: 400;
55edf6f3 S	114	$font-weight-bold: 500;
	115
	116	$font-weight-base: $font-weight-normal;
b6d1f3b7	117
49baba87 S	118	$font-size-h1: 36px;
	119	$font-size-h2: 32px;
	120	$font-size-h3: 24px;
	121	$font-size-h4: 20px;
	122	$font-size-h5: 16px;
	123	$font-size-h6: 12px;
97ed546d	124
b6d1f3b7 S	125	$headings-font-weight: 400;
b6d1f3b7 S	126
49baba87 S	127	$display1-size: 120px;
	128	$display2-size: 48px;
	129	$display3-size: 32px;
	130	$display4-size: 24px;
97ed546d	131
49baba87	132	$lead-font-size: 24px;
1e5bc9c9	133
49baba87	134	$small-font-size: 14px;
b6d1f3b7	135
97ed546d S	136
97ed546d S	137	// Buttons
49baba87 S	138	$btn-padding-x: 16px;
49baba87 S	139	$btn-padding-y: 8px;
69a9b33d	140	$btn-line-height: .95;
22cfab2d	141	$btn-font-weight: 600;
9ce2074c S	142	$btn-box-shadow: none;
	143	$btn-focus-box-shadow: none;
	144	$btn-active-box-shadow: none;
97ed546d	145
97ed546d S	146	$btn-primary-bg: $red_900;
	147	$btn-primary-border: $red_900;
	148
	149	$btn-secondary-color: $blue_grey_600;
	150	$btn-secondary-bg: $white !default;
	151	$btn-secondary-border: $blue_grey_600;
	152
	153	$btn-info-color: $white !default;
	154	$btn-info-bg: $brand-info !default;
	155	$btn-info-border: $btn-info-bg !default;
	156
	157	$btn-success-color: $white !default;
	158	$btn-success-bg: $brand-success !default;
	159	$btn-success-border: $btn-success-bg !default;
	160
	161	$btn-warning-color: $white !default;
	162	$btn-warning-bg: $brand-warning !default;
	163	$btn-warning-border: $btn-warning-bg !default;
	164
	165	$btn-danger-color: $white !default;
	166	$btn-danger-bg: $brand-danger !default;
	167	$btn-danger-border: $btn-danger-bg !default;
	168
b6d1f3b7 S	169	$btn-red900-color: $white !important;
b6d1f3b7 S	170	$btn-red900-bg: $red_900;
9ce2074c S	171	$btn-red900-border: $btn-red900-bg;
	172
	173	$btn-white-color: $red_900;
	174	$btn-white-bg: $white;
	175	$btn-white-border: $btn-white-bg;
	176
	177	$btn-bluegrey900-color: $white;
	178	$btn-bluegrey900-bg: $blue_grey_900;
	179	$btn-bluegrey900-border: $btn-bluegrey900-bg;
b6d1f3b7	180
97ed546d S	181	$btn-link-disabled-color: $gray-light !default;
97ed546d S	182
49baba87 S	183	$btn-padding-x-sm: 8px;
49baba87 S	184	$btn-padding-y-sm: 4px;
97ed546d	185
49baba87 S	186	$btn-padding-x-lg: 32px;
49baba87 S	187	$btn-padding-y-lg: 12px;
97ed546d	188
49baba87 S	189	$btn-block-spacing-y: 8px;
49baba87 S	190	$btn-toolbar-margin: 8px;
97ed546d S	191
97ed546d S	192	// Allows for customizing button radius independently from global border radius
49baba87	193	$btn-border-radius-lg: 2px;
97ed546d S	194
	195
	196	$input-btn-border-width: $border-width;
	197
	198	// Navs
49baba87 S	199	$nav-item-margin: 24px;
	200	$nav-item-inline-spacer: 16px;
	201	$nav-link-padding: 8px 24px;
97ed546d S	202	$nav-link-hover-bg: $gray-lighter !default;
97ed546d S	203	$nav-disabled-link-color: $gray-light !default;
1e5bc9c9 S	204
1e5bc9c9 S	205	// Navbar
1e5bc9c9 S	206	$navbar-padding-x: $spacer;
1e5bc9c9 S	207	$navbar-padding-y: $spacer;
3c77f292 SH	208
	209	// Badges
	210
	211	$badge-default-bg: $gray-light !default;
	212	$badge-primary-bg: $brand-primary !default;
	213	$badge-success-bg: $brand-success !default;
	214	$badge-info-bg: $brand-info !default;
	215	$badge-warning-bg: $brand-warning !default;
	216	$badge-danger-bg: $brand-danger !default;
	217
	218	$badge-color: $white !default;
	219	$badge-link-hover-color: $white !default;
	220	$badge-font-size: 100%;
	221	$badge-font-weight: $font-weight-bold !default;
	222	$badge-padding-x: .4em !default;
	223	$badge-padding-y: .25em !default;
	224
	225	$badge-pill-padding-x: .6em !default;
	226	// Use a higher than normal value to ensure completely rounded edges when
	227	// customizing padding or font-size on labels.
	228	$badge-pill-border-radius: 10rem !default;