MIF_E31211879/desain/dist/scss/variable.scss

212 lines
5.6 KiB
SCSS

// Custom Variables
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);
/*Theme Colors*/
$themecolor: #fb9678;
$themecolor-alt: #26c6da;
$sidebar: #fff;
$sidebar-alt:#f9f9f9;
$sidebar-text: #8d97ad;
$sidebar-icons: #787f91;
$shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
$lft:left;
$rgt:right;
// Bootstrap overrides
/**
* Table Of Content
*
* 1. Color system
* 2. Options
* 3. Body
* 4. Typography
* 5. Breadcrumbs
* 6. Cards
* 7. Dropdowns
* 8. Buttons
* 9. Typography
* 10. Progress bars
* 11. Tables
* 12. Forms
* 14. Component
*/
//
// Color system
//
$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: #6c757d !default;
$gray-700: #4F5467 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$blue: #03a9f3 !default;
$indigo: #6610f2 !default;
$purple: #ab8ce4 !default;
$pink: #e83e8c !default;
$red: #e46a76 !default;
$orange: #fb9678 !default;
$yellow: #fec107 !default;
$green: #00c292 !default;
$teal: #20c997 !default;
$cyan: #01c0c8 !default;
$primary: #fb9678 !default;
$text-muted: $gray-600 !default;
$colors: (
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
white: $white,
gray: $gray-600,
gray-dark: $gray-800
);
$theme-colors: (
primary: $orange,
secondary: $gray-100,
success: $green,
info: $blue,
warning: $yellow,
danger: $red,
light: $gray-100,
cyan: $cyan,
dark: $gray-800,
purple: $purple
);
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: #edf1f5;
$body-color: $gray-900 !default;
$grid-gutter-width: 20px !default;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-size-base: 0.875rem;
$font-family-sans-serif: 'Poppins', sans-serif !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$h1-font-size: 36px !default;
$h2-font-size: 30px !default;
$h3-font-size: 24px !default;
$h4-font-size: 18px !default;
$h5-font-size: 16px !default;
$h6-font-size: 14px !default;
$headings-margin-bottom: (1rem / 2) !default;
$headings-font-family: 'Poppins', sans-serif !default;
$headings-font-weight: 300 !default;
$headings-color: inherit !default;
// Breadcrumbs
$breadcrumb-bg: #fff;
$breadcrumb-margin-bottom: 1.5rem;
// Cards
$card-border-width: 0px!default
$card-border-color: transparent!default;
$card-border-radius: 0px !default;
// Dropdowns
$dropdown-item-padding-y: .65rem !default;
$dropdown-border-color: $gray-200;
$dropdown-divider-bg: $gray-100;
// Buttons
$btn-secondary-border: $gray-300;
// Progress bars
$progress-bg: $gray-100;
// Tables
$table-bg-accent: $gray-100;
$table-bg-hover: $gray-100;
$table-hover-bg: $gray-100 !default;
$table-cell-padding: 1rem !default;
$table-bg-level: -10 !default;
$table-bg-level2: 1 !default;
$table-bg-level3: -5 !default;
// Components
$component-active-color: $white !default;
$component-active-bg: $themecolor !default;
$badge-pill-padding-x: .2em !default;
$badge-pill-padding-y: 1em !default;
// Forms
$input-group-addon-bg: $gray-100;
$input-border-color: $gray-200;
$input-group-addon-border-color: $gray-200;
$input-btn-focus-color: rgba(0, 0, 0, .25) !default;
$input-focus-border-color: rgba(0,0,0, 0.1) !default;
$custom-control-indicator-active-bg: rgba(0,0,0, 35%) !default;
$input-btn-focus-box-shadow: transparent !default;
$custom-select-focus-box-shadow: transparent !default;
$custom-select-indicator: str-replace(url(""), "%23") !default;
//
// Define common padding and border radius sizes and more.
$border-width: 1px !default;
$border-color: $gray-200 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
// Progress bars
$progress-height: auto !default;
//Tabs
$nav-tabs-link-active-bg: $white !default;