From 98edcba762be158fb916dde0855b25bce0d909f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E4=BC=AF=E7=87=8A?= Date: Mon, 7 Dec 2020 11:28:10 +0800 Subject: [PATCH 1/3] WIP: argon scss --- src/index.html | 9 +++++ src/main.js | 2 +- src/scss/argon.scss | 14 ++++++++ src/scss/argon/_variables.scss | 63 ++++++++++++++++++++++++++++++++++ 4 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/scss/argon.scss create mode 100644 src/scss/argon/_variables.scss diff --git a/src/index.html b/src/index.html index c92e0a4..2c95ee5 100644 --- a/src/index.html +++ b/src/index.html @@ -14,6 +14,15 @@

World

+ +
+ ... +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
diff --git a/src/main.js b/src/main.js index fa91f38..3cfe192 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1 @@ -import './scss/all.scss'; +import './scss/argon.scss'; diff --git a/src/scss/argon.scss b/src/scss/argon.scss new file mode 100644 index 0000000..aadf799 --- /dev/null +++ b/src/scss/argon.scss @@ -0,0 +1,14 @@ +@import "~bootstrap/scss/functions"; +@import "argon/variables"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; + + + +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/type"; +@import "~bootstrap/scss/images"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/card"; \ No newline at end of file diff --git a/src/scss/argon/_variables.scss b/src/scss/argon/_variables.scss new file mode 100644 index 0000000..30cdcfa --- /dev/null +++ b/src/scss/argon/_variables.scss @@ -0,0 +1,63 @@ +// Cards + +// $card-spacer-y: .75rem !default; +// $card-spacer-x: 1.25rem !default; +// $card-border-width: $border-width !default; +// $card-border-radius: $border-radius !default; +// $card-border-color: rgba($black, .125) !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; + + +/// Cards + +$card-spacer-y: 1.25rem !default; +$card-spacer-x: 1.5rem !default; +// $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-spacer-y: 1.25rem !default; +// $card-spacer-x: 1.5rem !default; +// $card-border-width: $border-width !default; +// $card-border-radius: $border-radius !default; +// $card-border-color: rgba($black, .05) !default; +// $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; +// $card-cap-bg: $white !default; +// $card-bg: $white !default; +// $card-box-shadow: $box-shadow !default; + +// $card-img-overlay-padding: 1.25rem !default; + +// $card-columns-count: 3 !default; +// $card-columns-gap: 1.25rem !default; +// $card-columns-margin: $card-spacer-y !default; From 14ba8a51eb06c6cdc78870cf49358582d7bd0c49 Mon Sep 17 00:00:00 2001 From: Bobson Lin Date: Tue, 8 Dec 2020 09:52:28 +0800 Subject: [PATCH 2/3] Adjust argon main scss file 1. Adjust _variables scss file 2. Adjust _buttons and _cards scss file --- package.json | 3 +- src/index.html | 43 +++-- src/scss/argon.scss | 20 ++- src/scss/argon/_variables.scss | 269 ++++++++++++++++++++++------ src/scss/argon/custom/_buttons.scss | 28 +++ src/scss/argon/custom/_cards.scss | 28 +++ 6 files changed, 321 insertions(+), 70 deletions(-) create mode 100644 src/scss/argon/custom/_buttons.scss create mode 100644 src/scss/argon/custom/_cards.scss diff --git a/package.json b/package.json index 04e399b..c3a877b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "scripts": { "compile:sass": "node-sass src/scss/custom.scss css/style.css", - "build": "webpack --mode development" + "build:dev": "webpack --mode=development", + "watch": "webpack --mode=development --watch" }, "dependencies": { "bootstrap": "^4.5.3" diff --git a/src/index.html b/src/index.html index 2c95ee5..010bd29 100644 --- a/src/index.html +++ b/src/index.html @@ -10,17 +10,40 @@
-

Hello

-

World

- - +
+ + + + + + + +
-
- ... -
-
Card title
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Go somewhere +
+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+

Last updated 3 mins ago

+
diff --git a/src/scss/argon.scss b/src/scss/argon.scss index aadf799..67a7d4f 100644 --- a/src/scss/argon.scss +++ b/src/scss/argon.scss @@ -1,14 +1,26 @@ -@import "~bootstrap/scss/functions"; + +// Bootstrap functions +@import '~bootstrap/scss/functions'; + +// Argon varialbes @import "argon/variables"; @import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/mixins"; - +// Argon mixins +// @import "argon/mixins"; +@import "~bootstrap/scss/mixins"; +// Bootstrap components @import "~bootstrap/scss/root"; @import "~bootstrap/scss/reboot"; @import "~bootstrap/scss/type"; @import "~bootstrap/scss/images"; @import "~bootstrap/scss/grid"; @import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/card"; \ No newline at end of file +@import "~bootstrap/scss/card"; +@import "~bootstrap/scss/utilities"; + +// Argon components +@import 'argon/custom/buttons'; +@import 'argon/custom/cards'; + diff --git a/src/scss/argon/_variables.scss b/src/scss/argon/_variables.scss index 30cdcfa..446ae8d 100644 --- a/src/scss/argon/_variables.scss +++ b/src/scss/argon/_variables.scss @@ -1,63 +1,222 @@ -// Cards -// $card-spacer-y: .75rem !default; -// $card-spacer-x: 1.25rem !default; -// $card-border-width: $border-width !default; -// $card-border-radius: $border-radius !default; -// $card-border-color: rgba($black, .125) !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; +// 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; -// $card-img-overlay-padding: 1.25rem !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; -// $card-group-margin: $grid-gutter-width / 2 !default; -// $card-deck-margin: $card-group-margin !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); -// $card-columns-count: 3 !default; -// $card-columns-gap: 1.25rem !default; -// $card-columns-margin: $card-spacer-y !default; +$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); + + +// 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; + + +// Grid columns + +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; +$grid-row-columns: 6 !default; + + +// Components + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; + +$border-width: 1px !default; +$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; + + +// Buttons + Forms + +$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 + +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size: $input-btn-font-size !default; +$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 -$card-spacer-y: 1.25rem !default; -$card-spacer-x: 1.5rem !default; -// $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-spacer-y: 1.25rem !default; -// $card-spacer-x: 1.5rem !default; -// $card-border-width: $border-width !default; -// $card-border-radius: $border-radius !default; -// $card-border-color: rgba($black, .05) !default; -// $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -// $card-cap-bg: $white !default; -// $card-bg: $white !default; -// $card-box-shadow: $box-shadow !default; - -// $card-img-overlay-padding: 1.25rem !default; - -// $card-columns-count: 3 !default; -// $card-columns-gap: 1.25rem !default; -// $card-columns-margin: $card-spacer-y !default; +$card-spacer-y: 1.25rem !default; /// Adjust +$card-spacer-x: 1.5rem !default; /// 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 diff --git a/src/scss/argon/custom/_buttons.scss b/src/scss/argon/custom/_buttons.scss new file mode 100644 index 0000000..f50fa12 --- /dev/null +++ b/src/scss/argon/custom/_buttons.scss @@ -0,0 +1,28 @@ +// General +.btn { + position: relative; + text-transform: $btn-text-transform; + transition: $transition-base; + will-change: transform; + letter-spacing: $btn-letter-spacing; + font-size: $input-btn-font-size; + + &:hover { + @include box-shadow($btn-hover-box-shadow); + transform: translateY(-1px); + } + + &:disabled { + cursor: not-allowed; + } + + &:not(:last-child) { + margin-right: .5rem; + } +} + + +// Fix +.btn-outline-secondary { + color: darken(theme-color("secondary"), 50%); +} diff --git a/src/scss/argon/custom/_cards.scss b/src/scss/argon/custom/_cards.scss new file mode 100644 index 0000000..be8e066 --- /dev/null +++ b/src/scss/argon/custom/_cards.scss @@ -0,0 +1,28 @@ + +.card { + margin-bottom: $grid-gutter-width; + + @if $enable-shadows { + box-shadow: $card-box-shadow; + border: 0; + } +} + +// Animated cards +.card-lift--hover { + cursor: pointer; + + &:hover { + transform: translateY(-8px); + @include transition($transition-base); + } +} + + +// Card with shdadow + +.card { + &.shadow { + border: 0 !important; + } +} From 20511304b7c8c30cd76324d811d2e52564572080 Mon Sep 17 00:00:00 2001 From: Bobson Lin Date: Tue, 8 Dec 2020 14:02:48 +0800 Subject: [PATCH 3/3] Adjust argon varialbes.scss file --- README.md | 28 ++++ package.json | 2 +- src/index.html | 2 +- src/scss/argon-theme.scss | 27 ++++ src/scss/argon.scss | 1 - src/scss/argon/_variables.scss | 240 ++++++--------------------------- 6 files changed, 96 insertions(+), 204 deletions(-) create mode 100644 README.md create mode 100644 src/scss/argon-theme.scss diff --git a/README.md b/README.md new file mode 100644 index 0000000..870fc3e --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ + + +## 使用 Webpack 5 打包 + +#### 初始專案(沒有 node_modules 資料夾) + +``` +❯ yarn install +``` + +#### 開發專案 + +``` +❯ yarn watch +``` + +or + +``` +❯ yarn build:dev +``` + + +## 編譯 sass/scss 檔案 + +``` +❯ yarn compile:sass +``` diff --git a/package.json b/package.json index c3a877b..b62b092 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "scripts": { - "compile:sass": "node-sass src/scss/custom.scss css/style.css", + "compile:sass": "node-sass src/scss/argon-theme.scss css/argon.css", "build:dev": "webpack --mode=development", "watch": "webpack --mode=development --watch" }, diff --git a/src/index.html b/src/index.html index 010bd29..ec3f604 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ Document - + diff --git a/src/scss/argon-theme.scss b/src/scss/argon-theme.scss new file mode 100644 index 0000000..a3323de --- /dev/null +++ b/src/scss/argon-theme.scss @@ -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'; + diff --git a/src/scss/argon.scss b/src/scss/argon.scss index 67a7d4f..de1f5a9 100644 --- a/src/scss/argon.scss +++ b/src/scss/argon.scss @@ -23,4 +23,3 @@ // Argon components @import 'argon/custom/buttons'; @import 'argon/custom/cards'; - diff --git a/src/scss/argon/_variables.scss b/src/scss/argon/_variables.scss index 446ae8d..139f5d7 100644 --- a/src/scss/argon/_variables.scss +++ b/src/scss/argon/_variables.scss @@ -1,222 +1,60 @@ // 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 - -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; -$grid-row-columns: 6 !default; +$enable-shadows: true; /// Adjust // Components -$line-height-lg: 1.5 !default; -$line-height-sm: 1.5 !default; - -$border-width: 1px !default; -$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; +$border-radius: .25rem; /// Adjust +$border-radius-xl: .35rem; /// New +$border-radius-lg: .3rem; /// Adjust +$border-radius-sm: .2rem; /// Adjust +$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 - -$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; +$transition-base: all .15s ease; /// Adjust // Buttons -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-font-family: $input-btn-font-family !default; -$btn-font-size: $input-btn-font-size !default; -$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; +$btn-text-transform: none; /// New +$btn-letter-spacing: .025em; /// New +$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); +$btn-focus-box-shadow: $btn-hover-box-shadow; /// Cards -$card-spacer-y: 1.25rem !default; /// Adjust -$card-spacer-x: 1.5rem !default; /// 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-spacer-y: 1.25rem; /// Adjust +$card-spacer-x: 1.5rem; /// Adjust -$card-box-shadow: $box-shadow !default; /// New +$card-box-shadow: $box-shadow; /// New