github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): avoid duplicating bootstrap styles

Browse Source 
bootstrap css gets injected multiple time due to how imports are structured, only import variables in component scss
This commit is contained in:
Łukasz Mierzwa
2019-11-21 22:03:38 +00:00
parent a86a501a54
commit aab5b29eb6
13 changed files with 50 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/App.scss
View File

@@ -1,40 +1,8 @@
// bundled font assets, so we don't need to talk to Google Fonts API
@import "src/Fonts.scss";
$lead-font-weight: 400;
@import "Theme.scss";
// custom "dark" color, little less dark than flatly
$blue: #455a64;
// body background color should be same as navbar, so it blends into one
$body-bg: $blue;
// default is ~0.97rem
$font-size-base: 1rem;
// make links light gray by default instead of green
$link-color: #7b8a8b; // $gray-700
// make dark darker, default it's $gray-700
$dark: #3b4247;
// fix active tab color, for some reason it ends up with $primary as bg color
$nav-tabs-link-active-bg: #fff;
// pagination tweaks
$pagination-color: #fff;
$pagination-bg: #b4bcc2; // gray-500
$pagination-hover-color: #fff;
$pagination-hover-bg: #7b8a8b; // gray-700
$pagination-active-bg: $pagination-hover-bg;
$pagination-disabled-color: #fff;
$pagination-disabled-bg: #dee2e6; // gray-300
$enable-shadows: true;
$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;
@import "~bootswatch/dist/flatly/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/flatly/bootswatch";

2
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.components-grid-alertgrid-alertgroup-alert {
&:hover {

2
ui/src/Components/Labels/BaseLabel/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.components-label-with-hover:hover {
filter: brightness(0.85);

4
ui/src/Components/Labels/FilterInputLabel/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.components-filteredinputlabel-text {
font-size: 1rem;
@@ -62,7 +62,7 @@ button.components-label.btn {
background-color: $light;
}
&.btn-dark:hover {
// same as in App.scss
// same as in Theme.scss
background-color: #3b4247;
}
}

2
ui/src/Components/Labels/LabelWithPercent/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.components-labelWithPercent-percent {
padding-top: 0.25rem;

2
ui/src/Components/MainModal/Configuration/InputRange.scss
View File

@@ -1,5 +1,5 @@
// customize colors and fonts using bootstrap variables
@import "src/App.scss";
@import "src/Theme.scss";
$input-range-font-family: $font-family-sans-serif;
$input-range-primary-color: $primary;

2
ui/src/Components/ManagedSilence/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.components-managed-silence {
.card,

2
ui/src/Components/Modal/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.components-tab-inactive {
&:hover {

2
ui/src/Components/NavBar/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.navbar-brand {
min-width: 2.5rem;

2
ui/src/Components/OverviewModal/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
.navbar-brand {
&:hover,

2
ui/src/Components/SilenceModal/DateTimeSelect/index.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
$datepicker__background-color: $white;
$datepicker__border-color: $gray-300;

2
ui/src/DarkTheme.scss
View File

@@ -1,4 +1,4 @@
@import "src/App.scss";
@import "src/Theme.scss";
$alertgroup-body-bg: #5a6e7b;
$alertgroup-header-bg: #515658;

37
ui/src/Theme.scss Normal file
View File

@@ -0,0 +1,37 @@
$lead-font-weight: 400;
// custom "dark" color, little less dark than flatly
$blue: #455a64;
// body background color should be same as navbar, so it blends into one
$body-bg: $blue;
// default is ~0.97rem
$font-size-base: 1rem;
// make links light gray by default instead of green
$link-color: #7b8a8b; // $gray-700
// make dark darker, default it's $gray-700
$dark: #3b4247;
// fix active tab color, for some reason it ends up with $primary as bg color
$nav-tabs-link-active-bg: #fff;
// pagination tweaks
$pagination-color: #fff;
$pagination-bg: #b4bcc2; // gray-500
$pagination-hover-color: #fff;
$pagination-hover-bg: #7b8a8b; // gray-700
$pagination-active-bg: $pagination-hover-bg;
$pagination-disabled-color: #fff;
$pagination-disabled-bg: #dee2e6; // gray-300
$enable-shadows: true;
$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;
@import "~bootswatch/dist/flatly/variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";