mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 11:16:47 +00:00
d4f04cbf1e
Bootstrap SCSS, the JS bundle and the Bootswatch themes go from 5.3.3 to 5.3.8 (bug fixes only), and wvc-main.min.css is recompiled from zephyr. Bootswatch now gives table text the body color, and Lux drops card and modal header borders. Tests compile every theme with the pinned libsass and check that the shipped CSS is zephyr from these sources. The update and rollback steps put back the two files a theme change rewrites, or git refuses to pull over them.
238 lines
6.8 KiB
SCSS
Executable file
238 lines
6.8 KiB
SCSS
Executable file
//
|
|
// Base styles
|
|
//
|
|
|
|
.card {
|
|
// scss-docs-start card-css-vars
|
|
--#{$prefix}card-spacer-y: #{$card-spacer-y};
|
|
--#{$prefix}card-spacer-x: #{$card-spacer-x};
|
|
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
|
|
--#{$prefix}card-title-color: #{$card-title-color};
|
|
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
|
|
--#{$prefix}card-border-width: #{$card-border-width};
|
|
--#{$prefix}card-border-color: #{$card-border-color};
|
|
--#{$prefix}card-border-radius: #{$card-border-radius};
|
|
--#{$prefix}card-box-shadow: #{$card-box-shadow};
|
|
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
|
|
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
|
|
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
|
|
--#{$prefix}card-cap-bg: #{$card-cap-bg};
|
|
--#{$prefix}card-cap-color: #{$card-cap-color};
|
|
--#{$prefix}card-height: #{$card-height};
|
|
--#{$prefix}card-color: #{$card-color};
|
|
--#{$prefix}card-bg: #{$card-bg};
|
|
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
|
|
--#{$prefix}card-group-margin: #{$card-group-margin};
|
|
// scss-docs-end card-css-vars
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
|
height: var(--#{$prefix}card-height);
|
|
color: var(--#{$prefix}body-color);
|
|
word-wrap: break-word;
|
|
background-color: var(--#{$prefix}card-bg);
|
|
background-clip: border-box;
|
|
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
|
@include border-radius(var(--#{$prefix}card-border-radius));
|
|
@include box-shadow(var(--#{$prefix}card-box-shadow));
|
|
|
|
> hr {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
> .list-group {
|
|
border-top: inherit;
|
|
border-bottom: inherit;
|
|
|
|
&:first-child {
|
|
border-top-width: 0;
|
|
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-width: 0;
|
|
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
|
|
}
|
|
}
|
|
|
|
// Due to specificity of the above selector (`.card > .list-group`), we must
|
|
// use a child selector here to prevent double borders.
|
|
> .card-header + .list-group,
|
|
> .list-group + .card-footer {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
|
// as much space as possible, ensuring footers are aligned to the bottom.
|
|
flex: 1 1 auto;
|
|
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
|
|
color: var(--#{$prefix}card-color);
|
|
}
|
|
|
|
.card-title {
|
|
margin-bottom: var(--#{$prefix}card-title-spacer-y);
|
|
color: var(--#{$prefix}card-title-color);
|
|
}
|
|
|
|
.card-subtitle {
|
|
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
|
|
margin-bottom: 0;
|
|
color: var(--#{$prefix}card-subtitle-color);
|
|
}
|
|
|
|
.card-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card-link {
|
|
&:hover {
|
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
|
}
|
|
|
|
+ .card-link {
|
|
margin-left: var(--#{$prefix}card-spacer-x);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Optional textual caps
|
|
//
|
|
|
|
.card-header {
|
|
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
|
|
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
|
color: var(--#{$prefix}card-cap-color);
|
|
background-color: var(--#{$prefix}card-cap-bg);
|
|
border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
|
|
|
&:first-child {
|
|
@include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
|
|
}
|
|
}
|
|
|
|
.card-footer {
|
|
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
|
|
color: var(--#{$prefix}card-cap-color);
|
|
background-color: var(--#{$prefix}card-cap-bg);
|
|
border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
|
|
|
&:last-child {
|
|
@include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Header navs
|
|
//
|
|
|
|
.card-header-tabs {
|
|
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
|
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
|
|
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
|
border-bottom: 0;
|
|
|
|
.nav-link.active {
|
|
background-color: var(--#{$prefix}card-bg);
|
|
border-bottom-color: var(--#{$prefix}card-bg);
|
|
}
|
|
}
|
|
|
|
.card-header-pills {
|
|
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
|
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
|
}
|
|
|
|
// Card image
|
|
.card-img-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: var(--#{$prefix}card-img-overlay-padding);
|
|
@include border-radius(var(--#{$prefix}card-inner-border-radius));
|
|
}
|
|
|
|
.card-img,
|
|
.card-img-top,
|
|
.card-img-bottom {
|
|
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
|
}
|
|
|
|
.card-img,
|
|
.card-img-top {
|
|
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
|
|
}
|
|
|
|
.card-img,
|
|
.card-img-bottom {
|
|
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
|
|
}
|
|
|
|
|
|
//
|
|
// Card groups
|
|
//
|
|
|
|
.card-group {
|
|
// The child selector allows nested `.card` within `.card-group`
|
|
// to display properly.
|
|
> .card {
|
|
margin-bottom: var(--#{$prefix}card-group-margin);
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
// The child selector allows nested `.card` within `.card-group`
|
|
// to display properly.
|
|
> .card {
|
|
flex: 1 0 0;
|
|
margin-bottom: 0;
|
|
|
|
+ .card {
|
|
margin-left: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
// Handle rounded corners
|
|
@if $enable-rounded {
|
|
&:not(:last-child) {
|
|
@include border-end-radius(0);
|
|
|
|
> .card-img-top,
|
|
> .card-header {
|
|
// stylelint-disable-next-line property-disallowed-list
|
|
border-top-right-radius: 0;
|
|
}
|
|
> .card-img-bottom,
|
|
> .card-footer {
|
|
// stylelint-disable-next-line property-disallowed-list
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
@include border-start-radius(0);
|
|
|
|
> .card-img-top,
|
|
> .card-header {
|
|
// stylelint-disable-next-line property-disallowed-list
|
|
border-top-left-radius: 0;
|
|
}
|
|
> .card-img-bottom,
|
|
> .card-footer {
|
|
// stylelint-disable-next-line property-disallowed-list
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|