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.
112 lines
4.7 KiB
112 lines
4.7 KiB
7 years ago
|
// Variables
|
||
|
|
// --------------------------------------------------
|
||
|
|
//== Colors
|
||
|
|
//
|
||
|
|
$ma-green: #80bb41;
|
||
|
|
$ma-grey: #414144;
|
||
|
|
$ma-md-grey: #797a7c;
|
||
|
|
$ma-lightgrey: #dddede;
|
||
|
|
$ma-teal: #009579;
|
||
|
|
$ma-blue: #2474bb;
|
||
|
|
$ma-darkblue: darken(#2474bb, 20%);
|
||
|
|
$ma-red: #c03b44;
|
||
|
|
$ma-white: #fff;
|
||
|
|
$ma-black: #2d2926;
|
||
|
|
$ma-evergreen: #16433c;
|
||
|
|
|
||
|
|
// Fonts
|
||
|
|
//
|
||
|
|
$ma-sans-serif: 'Boxed Bold', Helvetica, Arial, sans-serif;
|
||
|
|
$ma-body-sans-serif: 'Roboto', Helvetica, sans-serif;
|
||
|
|
// Bootstrap Variables:
|
||
|
|
$bootstrap-sass-asset-helper: false;
|
||
|
|
//## Gray and brand colors for use across Bootstrap.
|
||
|
|
$gray-base: #000 !default;
|
||
|
|
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
|
||
|
|
$gray-dark: lighten($gray-base, 20%) !default;
|
||
|
|
// #333
|
||
|
|
$gray: lighten($gray-base, 33.5%) !default; // #555
|
||
|
|
$gray-light: lighten($gray-base, 46.7%) !default; // #777
|
||
|
|
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
|
||
|
|
$brand-primary: $ma-blue;
|
||
|
|
$brand-success: $ma-green;
|
||
|
|
$brand-info: #5bc0de !default;
|
||
|
|
$brand-warning: #f0ad4e !default;
|
||
|
|
$brand-danger: $ma-red;
|
||
|
|
//== Scaffolding
|
||
|
|
//
|
||
|
|
//## Settings for some of the most global styles.
|
||
|
|
//** Background color for `<body>`.
|
||
|
|
$body-bg: #fff !default; //** Global text color on `<body>`.
|
||
|
|
$text-color: $gray-dark !default;
|
||
|
|
$text-inactive: $ma-lightgrey;
|
||
|
|
//** Global textual link color.
|
||
|
|
$link-color: $ma-darkblue!default; //** Link hover color set via `darken()` function.
|
||
|
|
$link-hover-color: darken($link-color, 15%) !default; //** Link hover decoration.
|
||
|
|
$link-hover-decoration: underline !default;
|
||
|
|
//== Typography
|
||
|
|
//
|
||
|
|
//## Font, line-height, and color for body text, headings, and more.
|
||
|
|
$font-family-sans-serif: "Boxed Bold", Helvetica, Arial, sans-serif !default;
|
||
|
|
$font-family-body-san-serif: "Roboto", Helvetica, Arial, sans-serif !default; //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||
|
|
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
||
|
|
$font-family-base: $font-family-sans-serif !default;
|
||
|
|
//** Unit-less `line-height` for use in components like buttons.
|
||
|
|
$line-height-base: 1.428571429 !default; // 20/14
|
||
|
|
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||
|
|
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
||
|
|
//** By default, this inherits from the `<body>`.
|
||
|
|
$headings-font-family: inherit !default;
|
||
|
|
$headings-font-weight: 500 !default;
|
||
|
|
$headings-line-height: 1.1 !default;
|
||
|
|
$headings-color: inherit !default;
|
||
|
|
|
||
|
|
//== Media queries breakpoints
|
||
|
|
//
|
||
|
|
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||
|
|
// Extra small screen / phone
|
||
|
|
//** Deprecated `$screen-xs` as of v3.0.1
|
||
|
|
$screen-xs: 480px !default; //** Deprecated `$screen-xs-min` as of v3.2.0
|
||
|
|
$screen-xs-min: $screen-xs !default; //** Deprecated `$screen-phone` as of v3.0.1
|
||
|
|
$screen-phone: $screen-xs-min !default;
|
||
|
|
// Small screen / tablet
|
||
|
|
//** Deprecated `$screen-sm` as of v3.0.1
|
||
|
|
$screen-sm: 768px !default;
|
||
|
|
$screen-sm-min: $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1
|
||
|
|
$screen-tablet: $screen-sm-min !default;
|
||
|
|
// Medium screen / desktop
|
||
|
|
//** Deprecated `$screen-md` as of v3.0.1
|
||
|
|
$screen-md: 992px !default;
|
||
|
|
$screen-md-min: $screen-md !default; //** Deprecated `$screen-desktop` as of v3.0.1
|
||
|
|
$screen-desktop: $screen-md-min !default;
|
||
|
|
// Large screen / wide desktop
|
||
|
|
//** Deprecated `$screen-lg` as of v3.0.1
|
||
|
|
$screen-lg: 1200px !default;
|
||
|
|
$screen-lg-min: $screen-lg !default; //** Deprecated `$screen-lg-desktop` as of v3.0.1
|
||
|
|
$screen-lg-desktop: $screen-lg-min !default;
|
||
|
|
// So media queries don't overlap when required, provide a maximum
|
||
|
|
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||
|
|
$screen-sm-max: ($screen-md-min - 1) !default;
|
||
|
|
$screen-md-max: ($screen-lg-min - 1) !default;
|
||
|
|
//== Grid system
|
||
|
|
//
|
||
|
|
//## Define your custom responsive grid.
|
||
|
|
//** Number of columns in the grid.
|
||
|
|
$grid-columns: 12 !default; //** Padding between columns. Gets divided in half for the left and right.
|
||
|
|
$grid-gutter-width: 30px !default; // Navbar collapse
|
||
|
|
//** Point at which the navbar becomes uncollapsed.
|
||
|
|
$grid-float-breakpoint: $screen-sm-min !default; //** Point at which the navbar begins collapsing.
|
||
|
|
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
|
||
|
|
//== Container sizes
|
||
|
|
//
|
||
|
|
//## Define the maximum width of `.container` for different screen sizes.
|
||
|
|
// Small screen / tablet
|
||
|
|
$container-tablet: (720px + $grid-gutter-width) !default; //** For `$screen-sm-min` and up.
|
||
|
|
$container-sm: $container-tablet !default;
|
||
|
|
// Medium screen / desktop
|
||
|
|
$container-desktop: (940px + $grid-gutter-width) !default; //** For `$screen-md-min` and up.
|
||
|
|
$container-md: $container-desktop !default;
|
||
|
|
// Large screen / wide desktop
|
||
|
|
$container-large-desktop: (1140px + $grid-gutter-width) !default; //** For `$screen-lg-min` and up.
|
||
|
|
$container-lg: $container-large-desktop !default;
|