Added overrides for Bootstrap styles to use CSS variables

This commit is contained in:
Andreas Nedbal 2020-04-27 18:38:24 +02:00
parent e9e0a222b0
commit 76c91180b0
6 changed files with 95 additions and 11 deletions

View File

@ -45,13 +45,57 @@ $navbar-inverse-toggle-hover-bg: #512da8;
$navbar-inverse-toggle-icon-bar-bg: #7e57c2;
$navbar-inverse-toggle-border-color: #512da8;
/**
SETTINGS
----------------------------------------------
Variable definitions, tools and mixins used
across all styling definitions.
*/
@import
"variables";
@import "variables";
/**
VENDOR
----------------------------------------------
Imported vendor assets used by Retrospring.
*/
@import "bootstrap";
@import
"bootstrap",
"font-awesome",
"nprogress",
"nprogress-bootstrap";
@import "overrides/card";
/**
OVERRIDES
----------------------------------------------
The imports from "overrides/" define almost barely
any style adjustments but rather override default
Bootstrap behaviour.
The largest change to regular bootstrap is the switch
to using the available CSS variables for most elements
used on the site, so theming can be done with changing
only those.
*/
@import
"overrides/buttons",
"overrides/colors",
"overrides/card",
"overrides/links",
"overrides/list-group",
"overrides/navbar";
/**
COMPONENTS
----------------------------------------------
Custom components defined for Retrospring.
*/
@import
"components/jumbotron";
body { padding-top: 50px; }
@ -60,16 +104,8 @@ body { padding-top: 50px; }
display: none
}
@import "components/jumbotron";
@import "base";
@import "font-awesome";
$nprogress-color: lighten($navbar-inverse-bg, 25%);
@import 'nprogress';
@import 'nprogress-bootstrap';
.minicolors-theme-bootstrap .minicolors-swatch {
top: 0;
left: 0;

View File

@ -0,0 +1,14 @@
$colors: (
"primary",
"danger",
"warning",
"info",
"success"
);
@each $color in $colors {
.btn-#{$color} {
background-color: var(--#{$color});
border-color: var(--#{$color});
}
}

View File

@ -1,8 +1,14 @@
.card {
margin-bottom: map-get($spacers, 3);
box-shadow: $box-shadow-sm;
background-color: var(--card-bg);
p:only-child {
margin-bottom: 0;
}
}
.card-header,
.card-footer {
background-color: var(--card-cap-bg);
}

View File

@ -0,0 +1,17 @@
$colors: (
"primary",
"danger",
"warning",
"info",
"success"
);
@each $color in $colors {
.bg-#{$color} {
background-color: var(--#{$color}) !important;
}
.text-#{$color} {
color: var(--#{$color}) !important;
}
}

View File

@ -0,0 +1,7 @@
a {
color: var(--primary);
&:hover {
color: var(--primary);
}
}

View File

@ -0,0 +1,4 @@
.list-group-item.active {
background-color: var(--primary);
border-color: var(--primary);
}