Add Intel theme
Add Intel fonts, colours
Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com>
Change-Id: Idbfa1422f2667515efb60e24f9a84b7d77d11fcd
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 3c1d5ad..94be731 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -33,7 +33,7 @@
&:focus {
color: theme-color("dark");
background-color: gray("100");
- box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px theme-color("primary") !important;
+ box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
}
&:disabled {
background-color: gray("400");
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index f300d5c..cffe39d 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -32,4 +32,7 @@
$primary: $blue;
$secondary: $gray-800;
$success: $green;
-$warning: $yellow;
\ No newline at end of file
+$warning: $yellow;
+
+$loading-color: $primary;
+$navbar-color: $dark;
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 0ae18be..bdaca01 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -5,11 +5,7 @@
{{ $t('appHeader.skipToContent') }}
</a>
- <b-navbar
- variant="dark"
- type="dark"
- :aria-label="$t('appHeader.applicationHeader')"
- >
+ <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
<!-- Left aligned nav items -->
<b-button
id="app-header-trigger"
@@ -210,6 +206,7 @@
.navbar {
padding: 0;
+ background-color: $navbar-color;
@include media-breakpoint-up($responsive-layout-bp) {
height: $header-height;
}
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 8f7b785..7490baa 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -85,4 +85,7 @@
opacity: 0;
}
}
+.progress-bar {
+ background-color: $loading-color;
+}
</style>
diff --git a/src/env/assets/fonts/Intel_Clear/IntelClear-Bold-webfont.woff b/src/env/assets/fonts/Intel_Clear/IntelClear-Bold-webfont.woff
new file mode 100644
index 0000000..6b283ca
--- /dev/null
+++ b/src/env/assets/fonts/Intel_Clear/IntelClear-Bold-webfont.woff
Binary files differ
diff --git a/src/env/assets/fonts/Intel_Clear/IntelClear-Light-webfont.woff b/src/env/assets/fonts/Intel_Clear/IntelClear-Light-webfont.woff
new file mode 100644
index 0000000..62d15c8
--- /dev/null
+++ b/src/env/assets/fonts/Intel_Clear/IntelClear-Light-webfont.woff
Binary files differ
diff --git a/src/env/assets/fonts/Intel_Clear/IntelClear-Regular-webfont.woff b/src/env/assets/fonts/Intel_Clear/IntelClear-Regular-webfont.woff
new file mode 100644
index 0000000..814028f
--- /dev/null
+++ b/src/env/assets/fonts/Intel_Clear/IntelClear-Regular-webfont.woff
Binary files differ
diff --git a/src/env/assets/styles/_intel.scss b/src/env/assets/styles/_intel.scss
index e69de29..37869ee 100644
--- a/src/env/assets/styles/_intel.scss
+++ b/src/env/assets/styles/_intel.scss
@@ -0,0 +1,51 @@
+@font-face {
+ font-family: "Intel Clear";
+ src: url("~@/env/assets/fonts/Intel_Clear/IntelClear-Light-webfont.woff")
+ format("woff");
+ font-weight: 200;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Intel Clear";
+ src: url("~@/env/assets/fonts/Intel_Clear/IntelClear-Regular-webfont.woff")
+ format("woff");
+ font-weight: 400;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Intel Clear";
+ src: url("~@/env/assets/fonts/Intel_Clear/IntelClear-Bold-webfont.woff")
+ format("woff");
+ font-weight: 700;
+ font-style: normal;
+}
+
+$font-family-base: "Intel Clear", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$intel-blue: #0071c5;
+$light-blue: #00aeef;
+$pale-blue: #7ed3f7;
+
+$primary: $intel-blue;
+
+$red: #ed1c24;
+$orange: #ffa300;
+$yellow: #f3d54e;
+$green: #c4d600;
+$cyan: $light-blue;
+$gray: #939598;
+$dark-gray: #53565a;
+$light-gray: #B1BABF;
+$black: #000000;
+$white: #ffffff;
+
+$danger: #ED1c24;
+$success: #a6ce39;
+$warning: #FDB813;
+
+$loading-color: $black;
+$navbar-color: $intel-blue;
+
+.status-icon.secondary {
+ fill: $light-gray !important;
+}