diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-13 15:46:06 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-13 15:46:06 +0300 |
commit | 1272456ab2cb77f29b27f3839563b09a709cbc06 (patch) | |
tree | bb8655fd1dff128355a14f61b50556708e87f4a9 /src/assets/styles/bmc/_sila/helpers | |
parent | b2bea3021aea8be3d4bc34f965bf58297c358bca (diff) | |
download | webui-vue-sila-fe.tar.xz |
move sila-dev to _silasila-fe
Diffstat (limited to 'src/assets/styles/bmc/_sila/helpers')
-rw-r--r-- | src/assets/styles/bmc/_sila/helpers/_colors.scss | 75 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/helpers/_functions.scss | 9 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/helpers/_index.scss | 4 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/helpers/_motion.scss | 14 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/helpers/_variables.scss | 24 |
5 files changed, 126 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/helpers/_colors.scss b/src/assets/styles/bmc/_sila/helpers/_colors.scss new file mode 100644 index 00000000..028d962b --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_colors.scss @@ -0,0 +1,75 @@ +// Sass Color Variables +$black: #000; +$white: #FFFFFF; + +$blue-500: #2d60e5; +$green-500: #4EBF19; +$red-500: #FF4141; +$yellow-500: #F0AC0C; +$dark-blue: #1A3E5B; + +$gray-100: #f4f4f4; +$gray-200: #e6e6e6; +$gray-300: #d8d8d8; +$gray-400: #cccccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #3f3f3f; +$gray-900: #161616; + + +// Sass Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; + +// Sass Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $dark-blue; +$info: $blue; +$light: $white; +$primary: $dark-blue; +$secondary: #1A3E5B; +$success: $green; +$warning: $yellow; + +$loading-color: $primary; +$navbar-color: $primary; + +$login-page-description-color: rgba(12, 28, 41, 0.6); + +$text-primary: #0C1C29; +$text-secondary: #0C1C29E5; +$text-tretiatry: rgba(12, 28, 41, 0.6); +$text-quaternary: rgba(12, 28, 41, 0.3); + +$indicators-errors: #FF4141; +$indicators-succes: #4EBF19; +$indicators-warning: #F0AC0C; +$indicators-complementary:rgba(26, 62, 91, 0.6);; + +$on-surface-primary: #040A0F; + +$surface-secondary: #F3F4F5; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: #040A0F4D; + +$faint-secondary-primary-1: rgba(26, 62, 91, 0.01); +$faint-secondary-primary-2: rgba(26, 62, 91, 0.02); +$faint-secondary-primary-2-hover: rgba(26, 62, 91, 0.03); + +$faint-secondary-primary-5: rgba(26, 62, 91, 0.05); +$faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.1); +$faint-secondary-primary-10: rgba(26, 62, 91, 0.1); +$faint-secondary-primary-20: rgba(26, 62, 91, 0.2); +$faint-brand-primary-40:rgba(225, 23, 23, 0.4); + +$red-brand-primary: #E11717; +$red-brand-primary-hover: #FC2A2A; +$red-brand-primary-active: #df2323; +$red-brand-primary-disabled: #E17171; +$red-brand-primary-click: #C71414; +$red-brand-primary-5: rgba(225, 23, 23, 0.05); diff --git a/src/assets/styles/bmc/_sila/helpers/_functions.scss b/src/assets/styles/bmc/_sila/helpers/_functions.scss new file mode 100644 index 00000000..57956c99 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_functions.scss @@ -0,0 +1,9 @@ +// This function is usually used to get a lighter +// theme variant color to use as a background color +@function theme-color-light($variant) { + @return theme-color-level($variant, -11.3); +} + +@function theme-color-dark($variant) { + @return theme-color-level($variant, 2); +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_index.scss b/src/assets/styles/bmc/_sila/helpers/_index.scss new file mode 100644 index 00000000..ce0631a7 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_index.scss @@ -0,0 +1,4 @@ +@import "./colors"; +@import "./motion"; +@import "./variables"; +@import "./functions";
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_motion.scss b/src/assets/styles/bmc/_sila/helpers/_motion.scss new file mode 100644 index 00000000..55a3eed9 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/helpers/_variables.scss b/src/assets/styles/bmc/_sila/helpers/_variables.scss new file mode 100644 index 00000000..9e3a3aed --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_variables.scss @@ -0,0 +1,24 @@ +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; +$transition-base: all $duration--moderate-02 $standard-easing--productive; +$transition-fade: opacity $duration--moderate-01 $standard-easing--productive; +$transition-collapse: height $duration--slow-01 $standard-easing--expressive; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$first-header-height: 48px; +$second-header-height: 39px; +$header-height: 87px; +$headerHeight: 40px; +$navigation-width: 320px; +$toolbar-height: 60px; +$form-label-font-size: .875rem; +$form-line-height: 1.25rem; +$box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); +$focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, +border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + +// :export { +// headerHeight: $header-height; +// }
\ No newline at end of file |