forked from BobsonLin/custom-bootstrap4
Adjust argon varialbes.scss file
parent
14ba8a51eb
commit
20511304b7
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
// Bootstrap functions
|
||||||
|
@import '../../node_modules/bootstrap/scss/functions';
|
||||||
|
|
||||||
|
// Argon varialbes
|
||||||
|
@import "../../node_modules/bootstrap/scss/variables";
|
||||||
|
// @import "argon/variables";
|
||||||
|
@import "argon/argon_variables";
|
||||||
|
|
||||||
|
// Argon mixins
|
||||||
|
// @import "argon/mixins";
|
||||||
|
@import "../../node_modules/bootstrap/scss/mixins";
|
||||||
|
|
||||||
|
// Bootstrap components
|
||||||
|
@import "../../node_modules/bootstrap/scss/root";
|
||||||
|
@import "../../node_modules/bootstrap/scss/reboot";
|
||||||
|
@import "../../node_modules/bootstrap/scss/type";
|
||||||
|
@import "../../node_modules/bootstrap/scss/images";
|
||||||
|
@import "../../node_modules/bootstrap/scss/grid";
|
||||||
|
@import "../../node_modules/bootstrap/scss/buttons";
|
||||||
|
@import "../../node_modules/bootstrap/scss/card";
|
||||||
|
@import "../../node_modules/bootstrap/scss/utilities";
|
||||||
|
|
||||||
|
// Argon components
|
||||||
|
@import 'argon/custom/buttons';
|
||||||
|
@import 'argon/custom/cards';
|
||||||
|
|
@ -1,222 +1,60 @@
|
|||||||
|
|
||||||
// Color system
|
// Color system
|
||||||
$white: #fff !default;
|
|
||||||
$gray-100: #f6f9fc !default;
|
|
||||||
$gray-200: #e9ecef !default;
|
|
||||||
$gray-300: #dee2e6 !default;
|
|
||||||
$gray-400: #ced4da !default;
|
|
||||||
$gray-500: #adb5bd !default;
|
|
||||||
$gray-600: #8898aa !default; // Line footer color
|
|
||||||
$gray-700: #525f7f !default; // Line p color
|
|
||||||
$gray-800: #32325d !default; // Line heading color
|
|
||||||
$gray-900: #212529 !default;
|
|
||||||
$black: #000 !default;
|
|
||||||
|
|
||||||
$blue: #5e72e4 !default;
|
|
||||||
$indigo: #5603ad !default;
|
|
||||||
$purple: #8965e0 !default;
|
|
||||||
$pink: #f3a4b5 !default;
|
|
||||||
$red: #f5365c !default;
|
|
||||||
$orange: #fb6340 !default;
|
|
||||||
$yellow: #ffd600 !default;
|
|
||||||
$green: #2dce89 !default;
|
|
||||||
$teal: #11cdef !default;
|
|
||||||
$cyan: #2bffc6 !default;
|
|
||||||
|
|
||||||
$colors: () !default;
|
|
||||||
$colors: map-merge((
|
|
||||||
"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,
|
|
||||||
"light": $gray-400,
|
|
||||||
"lighter": $gray-200,
|
|
||||||
"gray-dark": $gray-800
|
|
||||||
), $colors);
|
|
||||||
|
|
||||||
$default: #172b4d !default;
|
|
||||||
$primary: #5e72e4 !default;
|
|
||||||
$secondary: #f4f5f7 !default;
|
|
||||||
$success: $green !default;
|
|
||||||
$info: $teal !default;
|
|
||||||
$warning: $orange !default;
|
|
||||||
$danger: $red !default;
|
|
||||||
$light: $gray-500 !default;
|
|
||||||
$dark: $gray-900 !default;
|
|
||||||
$darker: darken($gray-900, 15%) !default;
|
|
||||||
|
|
||||||
$theme-colors: () !default;
|
|
||||||
$theme-colors: map-merge((
|
|
||||||
"default": $default,
|
|
||||||
"primary": $primary,
|
|
||||||
"secondary": $secondary,
|
|
||||||
"success": $success,
|
|
||||||
"info": $info,
|
|
||||||
"warning": $warning,
|
|
||||||
"danger": $danger,
|
|
||||||
"white": $white,
|
|
||||||
"neutral": $white,
|
|
||||||
"dark": $dark,
|
|
||||||
"darker": $darker
|
|
||||||
), $theme-colors);
|
|
||||||
|
|
||||||
|
$white: #fff;
|
||||||
|
$gray-100: #f6f9fc;
|
||||||
|
$gray-200: #e9ecef;
|
||||||
|
$gray-300: #dee2e6;
|
||||||
|
$gray-400: #ced4da;
|
||||||
|
$gray-500: #adb5bd;
|
||||||
|
$gray-600: #8898aa; // Line footer color
|
||||||
|
$gray-700: #525f7f; // Line p color
|
||||||
|
$gray-800: #32325d; // Line heading color
|
||||||
|
$gray-900: #212529;
|
||||||
|
$black: #000;
|
||||||
|
|
||||||
|
$blue: #5e72e4;
|
||||||
|
$indigo: #5603ad;
|
||||||
|
$purple: #8965e0;
|
||||||
|
$pink: #f3a4b5;
|
||||||
|
$red: #f5365c;
|
||||||
|
$orange: #fb6340;
|
||||||
|
$yellow: #ffd600;
|
||||||
|
$green: #2dce89;
|
||||||
|
$teal: #11cdef;
|
||||||
|
$cyan: #2bffc6;
|
||||||
|
|
||||||
// Options
|
|
||||||
|
|
||||||
$enable-caret: true !default;
|
|
||||||
$enable-rounded: true !default;
|
|
||||||
$enable-shadows: true !default; ///
|
|
||||||
$enable-gradients: false !default;
|
|
||||||
$enable-transitions: true !default;
|
|
||||||
$enable-prefers-reduced-motion-media-query: true !default;
|
|
||||||
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
|
|
||||||
$enable-grid-classes: true !default;
|
|
||||||
$enable-pointer-cursor-for-buttons: true !default;
|
|
||||||
$enable-print-styles: true !default;
|
|
||||||
$enable-responsive-font-sizes: false !default;
|
|
||||||
$enable-validation-icons: true !default;
|
|
||||||
$enable-deprecation-messages: true !default;
|
|
||||||
|
|
||||||
|
// Options
|
||||||
|
|
||||||
// Grid columns
|
$enable-shadows: true; /// Adjust
|
||||||
|
|
||||||
$grid-columns: 12 !default;
|
|
||||||
$grid-gutter-width: 30px !default;
|
|
||||||
$grid-row-columns: 6 !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
|
||||||
$line-height-lg: 1.5 !default;
|
$border-radius: .25rem; /// Adjust
|
||||||
$line-height-sm: 1.5 !default;
|
$border-radius-xl: .35rem; /// New
|
||||||
|
$border-radius-lg: .3rem; /// Adjust
|
||||||
$border-width: 1px !default;
|
$border-radius-sm: .2rem; /// Adjust
|
||||||
$border-color: $gray-300 !default;
|
|
||||||
|
|
||||||
$border-radius: .25rem !default; /// Adjust
|
|
||||||
$border-radius-xl: .35rem !default; /// New
|
|
||||||
$border-radius-lg: .3rem !default; /// Adjust
|
|
||||||
$border-radius-sm: .2rem !default; /// Adjust
|
|
||||||
|
|
||||||
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
|
|
||||||
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
|
|
||||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
|
|
||||||
|
|
||||||
$component-active-color: $white !default;
|
|
||||||
$component-active-bg: theme-color("primary") !default;
|
|
||||||
|
|
||||||
$transition-base: all .15s ease !default;
|
|
||||||
$transition-fade: opacity .15s linear !default;
|
|
||||||
$transition-collapse: height .35s ease !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
|
|
||||||
$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: $font-family-sans-serif !default;
|
|
||||||
|
|
||||||
$font-size-base: 1rem !default;
|
|
||||||
$font-size-lg: $font-size-base * 1.25 !default;
|
|
||||||
$font-size-sm: $font-size-base * .875 !default;
|
|
||||||
|
|
||||||
$font-weight-lighter: lighter !default;
|
|
||||||
$font-weight-light: 300 !default;
|
|
||||||
$font-weight-normal: 400 !default;
|
|
||||||
$font-weight-bold: 700 !default;
|
|
||||||
$font-weight-bolder: bolder !default;
|
|
||||||
|
|
||||||
$font-weight-base: $font-weight-normal !default;
|
|
||||||
$line-height-base: 1.5 !default;
|
|
||||||
|
|
||||||
|
$box-shadow: 0 .5rem 1rem rgba($black, .15);
|
||||||
|
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
|
||||||
|
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
|
||||||
|
|
||||||
// Buttons + Forms
|
$transition-base: all .15s ease; /// Adjust
|
||||||
|
|
||||||
$input-btn-padding-y: .375rem !default;
|
|
||||||
$input-btn-padding-x: .75rem !default;
|
|
||||||
$input-btn-font-family: null !default;
|
|
||||||
$input-btn-font-size: $font-size-base !default;
|
|
||||||
$input-btn-line-height: $line-height-base !default;
|
|
||||||
|
|
||||||
$input-btn-focus-width: .2rem !default;
|
|
||||||
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
|
|
||||||
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
|
|
||||||
|
|
||||||
$input-btn-padding-y-sm: .25rem !default;
|
|
||||||
$input-btn-padding-x-sm: .5rem !default;
|
|
||||||
$input-btn-font-size-sm: $font-size-sm !default;
|
|
||||||
$input-btn-line-height-sm: $line-height-sm !default;
|
|
||||||
|
|
||||||
$input-btn-padding-y-lg: .5rem !default;
|
|
||||||
$input-btn-padding-x-lg: 1rem !default;
|
|
||||||
$input-btn-font-size-lg: $font-size-lg !default;
|
|
||||||
$input-btn-line-height-lg: $line-height-lg !default;
|
|
||||||
|
|
||||||
$input-btn-border-width: $border-width !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
|
|
||||||
$btn-padding-y: $input-btn-padding-y !default;
|
$btn-text-transform: none; /// New
|
||||||
$btn-padding-x: $input-btn-padding-x !default;
|
$btn-letter-spacing: .025em; /// New
|
||||||
$btn-font-family: $input-btn-font-family !default;
|
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
|
||||||
$btn-font-size: $input-btn-font-size !default;
|
$btn-focus-box-shadow: $btn-hover-box-shadow;
|
||||||
$btn-line-height: $input-btn-line-height !default;
|
|
||||||
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
|
|
||||||
|
|
||||||
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
|
|
||||||
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
|
|
||||||
$btn-font-size-sm: $input-btn-font-size-sm !default;
|
|
||||||
$btn-line-height-sm: $input-btn-line-height-sm !default;
|
|
||||||
|
|
||||||
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
|
|
||||||
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
|
|
||||||
$btn-font-size-lg: $input-btn-font-size-lg !default;
|
|
||||||
$btn-line-height-lg: $input-btn-line-height-lg !default;
|
|
||||||
|
|
||||||
$btn-border-width: $input-btn-border-width !default;
|
|
||||||
|
|
||||||
$btn-font-weight: $font-weight-normal !default;
|
|
||||||
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
|
|
||||||
$btn-focus-width: $input-btn-focus-width !default;
|
|
||||||
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
|
||||||
|
|
||||||
|
|
||||||
$btn-text-transform: none !default; /// New
|
|
||||||
$btn-letter-spacing: .025em !default; /// New
|
|
||||||
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !default;
|
|
||||||
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
|
|
||||||
|
|
||||||
|
|
||||||
/// Cards
|
/// Cards
|
||||||
|
|
||||||
$card-spacer-y: 1.25rem !default; /// Adjust
|
$card-spacer-y: 1.25rem; /// Adjust
|
||||||
$card-spacer-x: 1.5rem !default; /// Adjust
|
$card-spacer-x: 1.5rem; /// Adjust
|
||||||
$card-border-width: $border-width !default;
|
|
||||||
$card-border-radius: $border-radius !default;
|
|
||||||
$card-border-color: rgba($black, .05) !default;
|
|
||||||
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
|
||||||
$card-cap-bg: rgba($black, .03) !default;
|
|
||||||
$card-cap-color: null !default;
|
|
||||||
$card-height: null !default;
|
|
||||||
$card-color: null !default;
|
|
||||||
$card-bg: $white !default;
|
|
||||||
|
|
||||||
$card-img-overlay-padding: 1.25rem !default;
|
|
||||||
|
|
||||||
$card-group-margin: $grid-gutter-width / 2 !default;
|
|
||||||
$card-deck-margin: $card-group-margin !default;
|
|
||||||
|
|
||||||
$card-columns-count: 3 !default;
|
|
||||||
$card-columns-gap: 1.25rem !default;
|
|
||||||
$card-columns-margin: $card-spacer-y !default;
|
|
||||||
|
|
||||||
$card-box-shadow: $box-shadow !default; /// New
|
$card-box-shadow: $box-shadow; /// New
|
||||||
|
Loading…
Reference in New Issue