webpack-bootstrap-ui-kit/src/scss/_variables.scss

106 lines
2.7 KiB
SCSS
Executable File

@import '_mixings';
//@import '_colors';
// screen size - 32px (ex. 1400 - 32 = 1368)
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1168px,
xxl: 1368px,
xxxl: 1568px,
xxxxl: 1868px
) !default;
// screen size - (32px * 2) (ex. 1400 - 64 = 1336)
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1136px,
xxl: 1336px,
xxxl: 1536px,
xxxxl: 1836px
) !default;
$full-body-min-width: map-get($grid-breakpoints, 'lg') !default;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !default;
$font-family-base: 'Lato', $font-family-sans-serif !default;
$font-size-base: 1rem !default;
// start font-sizing from h2
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $h1-font-size !default;
$h3-font-size: $font-size-base * 2 !default;
$h4-font-size: $font-size-base * 1.75 !default;
$h5-font-size: $font-size-base * 1.5 !default;
$h6-font-size: $font-size-base * 1.25 !default;
$grid-gutter-width: 2rem !default;
$grid-gutter-height: 2rem !default;
$grid-gutter-xs-width: $grid-gutter-width / 2 !default;
$grid-gutter-element-height: $grid-gutter-height !default;
$field-gutter-height: $grid-gutter-height / 2 !default;
$col-block-gutter-height: $grid-gutter-height / 4 !default;
$footer-size: 18.5rem !default;
$footer-bar-size: 2.5rem !default;
/*
* bootstrap includes
* keep it at the end
*/
// bootstrap minify bugfix:
$navbar-dark-toggler-icon-bg: none !default;
$navbar-light-toggler-icon-bg: none !default;
// IE > 9
$enable-flex: true !default;
$enable-responsive-font-sizes: true !default;
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Add your site-wide + content editor typography styling
$nav-link-hover-bg: darken($body-bg, 10%);
$nav-link-hover-color: lighten($body-color, 10%);
$full-body-min-width: map-get($grid-breakpoints, 'lg');
$header-bg: $dark;
$header-color: darken($white, 5%);
$header-link: $white;
$main-nav-link-color: $white;
$main-nav-link-bg: none;
$main-nav-toggler-size: 2rem;
$main-nav-link-hover-bg: none;
$main-nav-link-hover-color: $primary;
$main-nav-dropdown-bg: $header-bg;
$main-nav-dropdown-color: $header-link;
$main-nav-dropdown-hover-bg: darken($header-bg, 10%);
$main-nav-dropdown-hover-color: $primary;
$footer-size: 7rem;
$footer-bar-size: 2rem;
$footer-bg: $dark;
$footer-color: darken($white, 5%);
$footer-link: $white;
$footer-footer-bg: darken($dark, 5%);