From 408657262515e015a2964aafb8a1c76fb5259699 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Mon, 13 Apr 2020 17:01:19 -0500 Subject: Update Sass architecture to require helper imports - Restructuring file strucure to support single file components use of Sass variables when imported into vuepress. - Creating a scalable file structure using Sass best practices Tested by building and testing both the vue web ui and the the documentation application. Signed-off-by: Derick Montague Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3 --- src/assets/styles/bmc/_base.scss | 7 +++ src/assets/styles/bmc/_helpers.scss | 3 ++ src/assets/styles/bmc/helpers/_colors.scss | 74 +++++++++++++++++++++++++++ src/assets/styles/bmc/helpers/_motion.scss | 14 +++++ src/assets/styles/bmc/helpers/_variables.scss | 12 +++++ 5 files changed, 110 insertions(+) create mode 100644 src/assets/styles/bmc/_base.scss create mode 100644 src/assets/styles/bmc/_helpers.scss create mode 100644 src/assets/styles/bmc/helpers/_colors.scss create mode 100644 src/assets/styles/bmc/helpers/_motion.scss create mode 100644 src/assets/styles/bmc/helpers/_variables.scss (limited to 'src/assets/styles/bmc') diff --git a/src/assets/styles/bmc/_base.scss b/src/assets/styles/bmc/_base.scss new file mode 100644 index 00000000..39a4aaa7 --- /dev/null +++ b/src/assets/styles/bmc/_base.scss @@ -0,0 +1,7 @@ +dt, +legend, +label { + color: $gray-800; + font-size: 14px; + font-weight: 400; +} diff --git a/src/assets/styles/bmc/_helpers.scss b/src/assets/styles/bmc/_helpers.scss new file mode 100644 index 00000000..bec209be --- /dev/null +++ b/src/assets/styles/bmc/_helpers.scss @@ -0,0 +1,3 @@ +@import "./helpers/colors"; +@import "./helpers/variables"; +@import "./helpers/motion"; \ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss new file mode 100644 index 00000000..28bfe890 --- /dev/null +++ b/src/assets/styles/bmc/helpers/_colors.scss @@ -0,0 +1,74 @@ +// SASS Color Variables +$black: #000; +$white: #fff; + +$blue-100: #eff2fb; +$blue-500: #2d60e5; + +$green-100: #ecfdf1; +$green-500: #0a7d06; + +$red-100: #feeeed; +$red-500: #da1416; + +$yellow-100: #fff8e4; +$yellow-500: #efc100; + +$gray-100: #fafafa; +$gray-200: #f4f4f4; +$gray-300: #dcdee0; +$gray-400: #ccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #333333; +$gray-900: #161616; + +// SASS Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; + +// 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, + "green": $green, + "red": $red, + "yellow": $yellow, +); + +// SASS Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $gray-900; +$info: $blue; +$light: $gray-100; +$primary: $blue; +$secondary: $gray-800; +$success: $green; +$warning: $yellow; + +// Sass Color Variable Accents +// Used for component styles and are +// not available as variants +$danger-light: $red-100; +$info-light: $blue-100; +$warning-light: $yellow-100; +$success-light: $green-100; + +// 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, + "secondary": $secondary, + "dark": $dark, + "light": $light, + "danger": $danger, + "info": $info, + "success": $success, + "warning": $warning +); diff --git a/src/assets/styles/bmc/helpers/_motion.scss b/src/assets/styles/bmc/helpers/_motion.scss new file mode 100644 index 00000000..55a3eed9 --- /dev/null +++ b/src/assets/styles/bmc/helpers/_motion.scss @@ -0,0 +1,14 @@ +$duration--fast-01: 70ms; //Micro-interactions such as button and toggle +$duration--fast-02: 110ms; //Micro-interactions such as fade +$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements +$duration--moderate-02: 240ms; //Expansion, system communication, toast +$duration--slow-01: 400ms; //Large expansion, important system notifications +$duration--slow-02: 700ms; //Background dimming + +// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing +$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); +$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); +$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); +$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); +$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); +$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); \ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss new file mode 100644 index 00000000..f59cfc1c --- /dev/null +++ b/src/assets/styles/bmc/helpers/_variables.scss @@ -0,0 +1,12 @@ +@import "./colors"; + +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$header-height: 56px; +$navigation-width: 300px; +$container-bgd: $gray-200; +$primary-nav-hover: $gray-300; \ No newline at end of file -- cgit v1.2.3