354 lines
9.6 KiB
SCSS
Executable File
354 lines
9.6 KiB
SCSS
Executable File
// Light theme variables
|
|
|
|
|
|
|
|
// Bootstrap base colors
|
|
$white: #fff !default;
|
|
$gray-100: #f8f9fa !default;
|
|
$gray-200: #e9ecef !default;
|
|
$gray-300: #dee2e6 !default;
|
|
$gray-400: #ced4da !default;
|
|
$gray-500: #adb5bd !default;
|
|
$gray-600: #7987a1 !default;
|
|
$gray-700: #495057 !default;
|
|
$gray-800: #212a3a !default;
|
|
$gray-900: #060c17 !default;
|
|
$black: #000 !default;
|
|
$text-muted: $gray-600 !default;
|
|
|
|
|
|
// Bootstrap custom colors
|
|
$blue: #0d6efd !default;
|
|
$indigo: #6610f2 !default;
|
|
$purple: #6f42c1 !default;
|
|
$pink: #d63384 !default;
|
|
$red: #dc3545 !default;
|
|
$orange: #fd7e14 !default;
|
|
$yellow: #ffc107 !default;
|
|
$green: #198754 !default;
|
|
$teal: #20c997 !default;
|
|
$cyan: #0dcaf0 !default;
|
|
|
|
|
|
|
|
// --- Bootstrap Theme Colors --- //
|
|
//
|
|
$primary: #6571ff !default;
|
|
$secondary: $gray-600 !default;
|
|
$success: #05a34a !default;
|
|
$info: #66d1d1 !default;
|
|
$warning: #fbbc06 !default;
|
|
$danger: #ff3366 !default;
|
|
$light: $gray-200 !default;
|
|
$dark: $gray-900 !default;
|
|
//
|
|
// --- Bootstrap Theme Colors --- //
|
|
|
|
|
|
|
|
// Social colors
|
|
$social-colors: (
|
|
"facebook": #3b5998,
|
|
"twitter": #1da1f2,
|
|
"google": #dc4e41,
|
|
"youtube": #f00,
|
|
"vimeo": #1ab7ea,
|
|
"dribbble": #ea4c89,
|
|
"github": #181717,
|
|
"instagram": #e4405f,
|
|
"pinterest": #bd081c,
|
|
"flickr": #0063dc,
|
|
"bitbucket": #0052cc,
|
|
"linkedin": #0077b5
|
|
) !default;
|
|
|
|
|
|
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
|
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
|
$min-contrast-ratio: 3 !default;
|
|
|
|
|
|
// Options
|
|
//
|
|
// Quickly modify global styling by enabling or disabling optional features.
|
|
$enable-gradients: false !default;
|
|
$enable-negative-margins: true !default;
|
|
|
|
|
|
// Spacing
|
|
//
|
|
// Control the default styling of most Bootstrap elements by modifying these
|
|
// variables. Mostly focused on spacing.
|
|
// You can add more entries to the $spacers map, should you need more variation.
|
|
$spacer: 1rem !default;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * .25,
|
|
2: $spacer * .5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
6: ($spacer * 4.5),
|
|
7: ($spacer * 6)
|
|
);
|
|
|
|
|
|
// Position
|
|
//
|
|
// Define the edge positioning anchors of the position utilities.
|
|
$position-values: (
|
|
0: 0,
|
|
10: 10%,
|
|
20: 20%,
|
|
25: 25%,
|
|
30: 30%,
|
|
40: 40%,
|
|
50: 50%,
|
|
60: 60%,
|
|
70: 70%,
|
|
75: 75%,
|
|
80: 80%,
|
|
90: 90%,
|
|
100: 100%
|
|
) !default;
|
|
|
|
|
|
// Body
|
|
//
|
|
// Settings for the `<body>` element.
|
|
$body-bg: #f9fafb !default;
|
|
$body-color: $black !default;
|
|
|
|
|
|
// Links
|
|
//
|
|
// Style anchor elements.
|
|
$link-decoration: none !default;
|
|
// $link-hover-decoration: underline !default;
|
|
|
|
|
|
// Paragraphs
|
|
//
|
|
// Style p element.
|
|
$paragraph-margin-bottom: 0 !default;
|
|
|
|
|
|
// Grid columns
|
|
$grid-gutter-width: 1.5rem !default;
|
|
|
|
|
|
// Components
|
|
//
|
|
// Define common padding and border radius sizes and more.
|
|
|
|
// Border
|
|
$border-color: $gray-200 !default;
|
|
|
|
// Border Radiues
|
|
$border-radius: .25rem !default;
|
|
|
|
|
|
$action-transition-duration: 0.2s;
|
|
$action-transition-timing-function: ease;
|
|
|
|
|
|
// Typography
|
|
//
|
|
// Font, line-height, and color for body text, headings, and more.
|
|
|
|
// Font family
|
|
$font-family-sans-serif: "Roboto", Helvetica, sans-serif !default;
|
|
|
|
$font-size-base: 0.875rem !default; // 14px
|
|
$font-size-lg: 1rem !default; // 16px
|
|
$font-size-sm: 0.812rem !default; // 13px
|
|
|
|
$font-weight-lighter: lighter !default;
|
|
$font-weight-light: 300 !default;
|
|
$font-weight-normal: 400 !default;
|
|
$font-weight-bold: 500 !default;
|
|
$font-weight-bolder: 700 !default;
|
|
$font-weight-boldest: 900 !default;
|
|
|
|
$font-weight-base: $font-weight-normal !default;
|
|
|
|
|
|
// Heading sizes
|
|
$h1-font-size: 2.5rem !default;
|
|
$h2-font-size: 2rem !default;
|
|
$h3-font-size: 1.5rem !default;
|
|
$h4-font-size: 1.25rem !default;
|
|
$h5-font-size: 1rem !default;
|
|
$h6-font-size: $font-size-base !default;
|
|
|
|
$headings-margin-bottom: 0 !default;
|
|
$headings-font-weight: 500 !default;
|
|
|
|
|
|
$hr-opacity: .1 !default;
|
|
|
|
|
|
// Tables
|
|
//
|
|
// Customizes the `.table` component with basic values, each used across all table variations.
|
|
|
|
$table-cell-padding-y: .85rem !default;
|
|
$table-cell-padding-x: .85rem !default;
|
|
$table-cell-padding-y-sm: .55rem !default;
|
|
$table-cell-padding-x-sm: .55rem !default;
|
|
|
|
$table-striped-bg: $gray-200 !default;
|
|
$table-active-bg: $gray-300 !default;
|
|
$table-hover-bg: $gray-200 !default;
|
|
|
|
$table-group-separator-color: $border-color;
|
|
|
|
|
|
// Buttons + Forms
|
|
//
|
|
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
|
|
|
$input-btn-padding-y: .469rem !default;
|
|
$input-btn-padding-x: .8rem !default;
|
|
|
|
$input-btn-focus-box-shadow: none !default;
|
|
$input-btn-focus-width: 0 !default;
|
|
|
|
$input-placeholder-color: $gray-500 !default;
|
|
|
|
$input-btn-padding-y-xs: .313rem !default;
|
|
$input-btn-padding-x-xs: .8rem !default;
|
|
$input-btn-font-size-xs: .75rem !default;
|
|
|
|
$input-btn-padding-y-sm: .391rem !default;
|
|
$input-btn-padding-x-sm: .8rem !default;
|
|
$input-btn-font-size-sm: $font-size-sm !default;
|
|
|
|
$input-btn-padding-y-lg: .5rem !default;
|
|
$input-btn-padding-x-lg: .8rem !default;
|
|
$input-btn-font-size-lg: $font-size-lg !default;
|
|
|
|
|
|
// Buttons
|
|
//
|
|
// For each of Bootstrap's buttons, define text, background, and border color.
|
|
|
|
$btn-font-weight: $font-weight-normal !default;
|
|
|
|
$btn-padding-y-xs: $input-btn-padding-y-xs !default;
|
|
$btn-padding-x-xs: $input-btn-padding-x-xs !default;
|
|
$btn-font-size-xs: $input-btn-font-size-xs !default;
|
|
|
|
// Allows for customizing button radius independently from global border radius
|
|
$btn-border-radius: $border-radius !default;
|
|
$btn-border-radius-sm: $border-radius !default;
|
|
$btn-border-radius-lg: $border-radius !default;
|
|
|
|
|
|
// Forms
|
|
|
|
$input-padding-y-xs: $input-btn-padding-y-xs !default;
|
|
$input-padding-x-xs: $input-btn-padding-x-xs !default;
|
|
$input-font-size-xs: $input-btn-font-size-xs !default;
|
|
|
|
$input-bg: $white !default;
|
|
$input-border-color: $border-color !default;
|
|
$input-focus-border-color: $gray-400 !default;
|
|
|
|
$input-border-radius: $btn-border-radius !default;
|
|
$input-border-radius-sm: $btn-border-radius-sm !default;
|
|
$input-border-radius-lg: $btn-border-radius-lg !default;
|
|
|
|
// form-check
|
|
$form-check-input-width: 1.3em !default;
|
|
$form-check-input-border-radius: .15em !default;
|
|
|
|
// Input-group
|
|
$input-group-addon-padding-x: .563rem !default;
|
|
$input-group-addon-bg: $gray-100 !default;
|
|
|
|
|
|
|
|
// Navs
|
|
$nav-tabs-link-bg: $gray-100; // custom variable
|
|
$nav-tabs-link-border-color: $border-color $border-color $gray-300; // custom variable
|
|
$nav-tabs-link-active-bg: $white;
|
|
|
|
|
|
// Dropdowns
|
|
$dropdown-border-color: #f2f4f9;
|
|
$dropdown-box-shadow: 0 5px 10px 0 rgba(183,192,206,.2);
|
|
|
|
|
|
// Pagination
|
|
$pagination-padding-y: .469rem !default;
|
|
$pagination-padding-x: 1rem !default;
|
|
$pagination-padding-y-sm: .391rem !default;
|
|
$pagination-padding-x-sm: .75rem !default;
|
|
$pagination-padding-y-lg: .5rem !default;
|
|
$pagination-padding-x-lg: 1.1rem !default;
|
|
$pagination-color: $primary;
|
|
$pagination-active-bg: $primary;
|
|
$pagination-active-border-color: $primary;
|
|
|
|
|
|
// Cards
|
|
$card-box-shadow: 0 0 10px 0 rgba(183,192,206,.2); // custom variable
|
|
$card-spacer-y: 1.5rem !default;
|
|
$card-spacer-x: 1.5rem !default;
|
|
$card-title-spacer-y: .875rem !default;
|
|
$card-border-color: #f2f4f9 !default;
|
|
$card-cap-padding-y: .875rem !default;
|
|
$card-cap-padding-x: $card-spacer-x !default;
|
|
$card-cap-bg: rgba($black, .01) !default;
|
|
|
|
|
|
// Accordion
|
|
$accordion-bg: $white !default;
|
|
$accordion-border-color: $border-color !default;
|
|
$accordion-icon-width: .875rem !default;
|
|
|
|
|
|
// Popovers
|
|
$popover-border-color: $border-color !default;
|
|
$popover-header-bg: $gray-200 !default;
|
|
|
|
|
|
|
|
// Badges
|
|
$badge-font-size: .8em !default;
|
|
$badge-font-weight: $font-weight-bold !default;
|
|
|
|
|
|
// Modals
|
|
$modal-content-border-color: $border-color !default;
|
|
$modal-fade-transform: scale(.8) !default;
|
|
$modal-transition: transform .4s ease !default;
|
|
// Modals
|
|
|
|
|
|
// List group
|
|
$list-group-item-padding-y: .75rem !default;
|
|
$list-group-item-padding-x: 1.25rem !default;
|
|
|
|
|
|
// Close
|
|
$btn-close-width: .8em !default;
|
|
$btn-close-color: $black !default;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Navbar
|
|
$navbar-height: 60px;
|
|
|
|
// Sidebar
|
|
$sidebar-width-lg: 240px;
|
|
$sidebar-folded-width: 70px;
|
|
$sidebar-dark-bg: #0c1427;
|