ngx-admin/src/app/theme/sass/bootstrap-overrides/_card.scss

185 lines
3 KiB
SCSS

$card-title-height: 44px;
$card-header-font-size: 16px;
.card {
border: none;
background-color: $card-bg;
color: $default-text;
position: relative;
//transition: all 0.2s ease;
margin-bottom: 24px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
/*&:hover {
background: $card-bg-hover;
}*/
&.animated {
animation-duration: 0.5s;
}
&.small-card {
height: $small-card-height;
}
&.xsmall-card {
height: $xsmall-card-height;
}
&.medium-card {
height: $medium-card-height;
}
&.xmedium-card {
height: $extra-medium-card-height;
}
&.large-card {
height: $large-card-height;
}
&.viewport100 {
height: calc(100vh - 218px);
}
&.with-scroll {
.card-body {
height: calc(100% - #{$card-title-height});
overflow-y: auto;
}
}
}
.card > .card-body {
padding: 15px 22px;
height: 100%;
}
.card-header, .card-footer {
height: $card-title-height;
font-size: $card-header-font-size;
$vertical-padding: ($card-title-height - $card-header-font-size) / 2;
padding: $vertical-padding 22px;
}
.card-title {
font-weight: $font-normal;
text-transform: uppercase;
opacity: 0.9;
font-size: $card-header-font-size;
//text-transform: uppercase;
}
.card-white, .card-blur {
background-size: cover;
> .card-header {
background-color: transparent;
border: none;
color: $default-text;
}
}
.card-white {
background-color: $card-bg;
}
.card-blur {
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
background: url($blurredBgUrl);
transition: none;
}
.card-primary {
> .card-header {
color: $primary;
background-color: $primary-bg;
border-color: $primary-bg;
}
}
.card-success {
> .card-header {
color: $success;
background-color: $success-bg;
border-color: $success-bg;
}
}
.card-info {
> .card-header {
color: $info;
background-color: $info-bg;
border-color: $info-bg;
}
}
.card-warning {
> .card-header {
color: $warning;
background-color: $warning-bg;
border-color: $warning-bg;
}
}
.card-danger {
> .card-header {
color: $danger;
background-color: $danger-bg;
border-color: $danger-bg;
}
}
.card-primary, .card-success, .card-info, .card-warning, .card-danger {
.card-header {
color: rgba(255, 255, 255, 0.8);
}
}
.card.bootstrap-card {
.card-body, .card-header {
p, div, span {
color: $default-text;
}
}
}
.accordion-card.card.bootstrap-card {
&.card-primary,
&.card-success,
&.card-info,
&.card-warning,
&.card-danger {
.card-header {
p, div, span {
color: rgba(255, 255, 255, 0.8);
}
}
}
}
.card-group .card.accordion-card {
.card-header {
border-bottom: 0;
}
}
.card-group .card {
.card-header {
border-bottom: 1px solid #ddd;
}
}
.p-with-code {
line-height: 1.5em;
}
.contextual-example-card {
height: 120px;
}
.footer-card {
height: 142px;
}
.light-text {
font-weight: $font-light;
}
/*
.card-group .card {
border-radius: 0;
}*/