diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/styles/_colors.scss | 109 | ||||
-rw-r--r-- | src/assets/styles/_functions.scss | 33 | ||||
-rw-r--r-- | src/assets/styles/_obmc-custom.scss | 71 |
3 files changed, 202 insertions, 11 deletions
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss new file mode 100644 index 00000000..04351231 --- /dev/null +++ b/src/assets/styles/_colors.scss @@ -0,0 +1,109 @@ +// Custom Color system +$white: #fff; +$gray-100: #fafbfc; // gray-10 +$gray-200: #f0f2f5; // gray-20 +$gray-300: #dcdee0; // gray-30 +$gray-400: #cccccc; // gray-40 +$gray-600: #999999; // gray-60 +$gray-700: #495057; // gray-70 +$gray-800: #666666; // gray-80 +$gray-900: #333333; // gray-100 +$black: #000; + +$blue-10: #eff2fb; +$blue-20: #ccd7f4; +$blue-30: #7295f1; +$blue-40: #2d60e5; +$blue-50: #1d3458; +$blue-100: #1b2834; +$blues: ( + "100": $blue-10, + "200": $blue-20, + "300": $blue-30, + "400": $blue-40, + "500": $blue-50, + "900": $blue-100 +); + +// Accent colors +$teal-20: #ccf0f5; +$teal-50: #00b6cb; +$teal-70: #098292; +$teals: ( + "200": $teal-20, + "500": $teal-50, + "700": $teal-70 +); + +$green-50: #0a7d06; +$green-20: #c6e8c5; +$green-10: #ecfdf1; +$greens: ( + "100": $green-10, + "200": $green-20, + "500": $green-50 +); + +$yellow-70: #db7c00; +$yellow-50: #fedf39; +$yellow-20: #fff8e4; +$yellow-10: #fff8e4; +$yellows: ( + "100": $yellow-10, + "200": $yellow-20, + "500": $yellow-50, + "700": $yellow-70 +); + +$red-10: #fce9e9; +$red-20: #fad3d3; +$red-50: #da1416; +$reds: ( + "100": $red-10, + "200": $red-20, + "500": $red-50 +); + +$blue: $blue-40; +$red: $red-50; +$yellow: $yellow-50; +$green: $green-50; +$teal: $teal-50; +$gray: $gray-400; + +// Bootstrap will generate CSS variables for +// all of the colors in this map. +// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables +$colors: ( + "blue": $blue, + "red": $red, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "white": $white, + "gray": $gray +); + +$primary: $blue; +$secondary: $gray-600; +$success: $green; +$info: $teal; +$warning: $yellow; +$danger: $red; +$light: $gray-100; +$dark: $gray-800; + +// Bootstrap will generate CSS variables for +// all of the colors in this map. +// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables +$theme-colors: ( + "primary": $primary, + "primary-dark": $blue-100, + "primary-light": $blue-10, + "secondary": $secondary, + "secondary-dark": $gray-800, + "secondary-light": $gray-200, + "danger": $danger, + "warning": $warning, + "info": $info +); diff --git a/src/assets/styles/_functions.scss b/src/assets/styles/_functions.scss new file mode 100644 index 00000000..8652a8b0 --- /dev/null +++ b/src/assets/styles/_functions.scss @@ -0,0 +1,33 @@ +// Functions for getting colors from custom maps +// Bootstrap has a gray function and colors, but we have +// added new theme colors and helper functions. Using +// get-{color}($key: "100") because using the color name only +// {color}(key: "100"} convention that bootstrap does caused +// the compilation to fail for blue, red, and green. +// +// https://getbootstrap.com/docs/4.0/getting-started/theming/#functions + +// Blues +@function get-blue($key: "100") { + @return map-get($blues, $key); +} + +// Reds +@function get-red($key: "100") { + @return map-get($reds, $key); +} + +// Greens +@function get-green($key: "100") { + @return map-get($greens, $key); +} + +// Yellows +@function get-yellow($key: "100") { + @return map-get($yellows, $key); +} + +// Teals +@function get-teal($key: "200") { + @return map-get($teals, $key); +} diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index b128c0f1..45dec1f8 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -1,15 +1,64 @@ -// Custom Bootstrap variable overrides - -// Major Breakpoints +// Major breakpoints using 16px base em * 16 +// xs: 0, sm: 768px, md: 1024px, lg: 1376px, xl: 1600px +// Using em's will allow for changes if base font size is updated +// to accommodate for responsive text. Using 0 as xs due to +// Bootstrap requirements. $grid-breakpoints: ( xs: 0, - sm: 480px, - md: 640px, - lg: 992px, - xl: 1300px + sm: 48em, + md: 64em, + lg: 86em, + xl: 100em ); -// $enable-rounded: false; -// Include any custom overrides above -@import "bootstrap/scss/bootstrap.scss"; -@import "bootstrap-vue/src/index.scss"; +// Required +@import "~bootstrap/scss/functions"; +@import "./functions"; +@import "./colors"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; + +// Removing colors we do not have maps for or need for +// the OpenBMC theme. There are some that are required by +// Bootstrap keys that cannot be removed from theme colors +// are primary, success, and danger. +// https://getbootstrap.com/docs/4.0/getting-started/theming/#required-keys +$grays: map-remove($grays, "500"); +$colors: map-remove($colors, "indigo", "purple", "pink", "orange", "cyan"); +$colors: map-remove($theme-colors, "light", "dark"); + +// Optional +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/alert"; +@import "~bootstrap/scss/badge"; +@import "~bootstrap/scss/breadcrumb"; +@import "~bootstrap/scss/button-group"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/card"; +@import "~bootstrap/scss/close"; +@import "~bootstrap/scss/code"; +@import "~bootstrap/scss/custom-forms"; +@import "~bootstrap/scss/dropdown"; +@import "~bootstrap/scss/forms"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/images"; +@import "~bootstrap/scss/input-group"; +@import "~bootstrap/scss/list-group"; +@import "~bootstrap/scss/media"; +@import "~bootstrap/scss/modal"; +@import "~bootstrap/scss/nav"; +@import "~bootstrap/scss/navbar"; +@import "~bootstrap/scss/pagination"; +@import "~bootstrap/scss/popover"; +@import "~bootstrap/scss/progress"; +@import "~bootstrap/scss/spinners"; +@import "~bootstrap/scss/tables"; +@import "~bootstrap/scss/toasts"; +@import "~bootstrap/scss/tooltip"; +@import "~bootstrap/scss/transitions"; +@import "~bootstrap/scss/type"; +@import "~bootstrap/scss/utilities"; +@import "~bootstrap/scss/print"; + +@import "~bootstrap-vue/src/index.scss"; |