2019-10-29 09:22:51 +01:00
|
|
|
//
|
|
|
|
// Mixins: Cards Variant
|
|
|
|
//
|
|
|
|
|
|
|
|
@mixin cards-variant($name, $color) {
|
|
|
|
.card-#{$name} {
|
2019-11-04 09:57:11 +01:00
|
|
|
&:not(.card-outline) {
|
2019-11-28 09:58:54 +01:00
|
|
|
> .card-header {
|
2019-11-04 09:57:11 +01:00
|
|
|
background-color: $color;
|
2019-10-29 09:22:51 +01:00
|
|
|
|
2019-11-04 09:57:11 +01:00
|
|
|
&,
|
|
|
|
a {
|
|
|
|
color: color-yiq($color);
|
|
|
|
}
|
2019-10-29 09:22:51 +01:00
|
|
|
|
2019-11-04 09:57:11 +01:00
|
|
|
a.active {
|
|
|
|
color: color-yiq($white);
|
2019-10-29 09:22:51 +01:00
|
|
|
}
|
|
|
|
}
|
2019-11-04 09:57:11 +01:00
|
|
|
}
|
2019-10-29 09:22:51 +01:00
|
|
|
|
2019-11-04 09:57:11 +01:00
|
|
|
&.card-outline {
|
|
|
|
border-top: 3px solid $color;
|
2019-10-29 09:22:51 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
&.card-outline-tabs {
|
2019-11-28 09:58:54 +01:00
|
|
|
> .card-header {
|
2019-10-29 09:22:51 +01:00
|
|
|
a {
|
|
|
|
&:hover {
|
|
|
|
border-top: 3px solid $nav-tabs-border-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
border-top: 3px solid $color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-#{$name},
|
|
|
|
.bg-gradient-#{$name},
|
|
|
|
.card-#{$name}:not(.card-outline) {
|
|
|
|
.btn-tool {
|
2020-05-30 15:06:11 +02:00
|
|
|
color: rgba(color-yiq($color), .8);
|
2019-10-29 09:22:51 +01:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: color-yiq($color);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.card.bg-#{$name},
|
|
|
|
.card.bg-gradient-#{$name} {
|
|
|
|
.bootstrap-datetimepicker-widget {
|
|
|
|
.table td,
|
|
|
|
.table th {
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
table thead tr:first-child th:hover,
|
|
|
|
table td.day:hover,
|
|
|
|
table td.hour:hover,
|
|
|
|
table td.minute:hover,
|
|
|
|
table td.second:hover {
|
|
|
|
background: darken($color, 8%);
|
|
|
|
color: color-yiq($color);
|
|
|
|
}
|
|
|
|
|
|
|
|
table td.today::before {
|
|
|
|
border-bottom-color: color-yiq($color);
|
|
|
|
}
|
|
|
|
|
|
|
|
table td.active,
|
|
|
|
table td.active:hover {
|
|
|
|
background: lighten($color, 10%);
|
|
|
|
color: color-yiq($color);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|