mirror of https://github.com/ColorlibHQ/AdminLTE
fixed card default border after adding nav tabs support
- placed default card tabs style into .card-tabs - updated demopull/2269/head
REJack
parent
2ea45f22f3
commit
b7a1c871ce
|
|
@ -76,25 +76,27 @@
|
|||
border-left: 1px solid $card-border-color;
|
||||
}
|
||||
|
||||
&:not(.card-outline) {
|
||||
> .card-header {
|
||||
border-bottom: 0;
|
||||
&.card-tabs {
|
||||
&:not(.card-outline) {
|
||||
& .card-header {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
margin-left: -1px;
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
.nav-item {
|
||||
border-bottom: 0;
|
||||
&.card-outline {
|
||||
.nav-item {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +104,7 @@
|
|||
&.card-outline-tabs {
|
||||
border-top: 0;
|
||||
|
||||
> .card-header {
|
||||
.card-header {
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
|
|
@ -125,6 +127,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Maximized Card Body Scroll fix
|
||||
|
|
|
|||
|
|
@ -4,27 +4,29 @@
|
|||
|
||||
@mixin cards-variant($name, $color) {
|
||||
.card-#{$name} {
|
||||
&:not(.card-outline) {
|
||||
> .card-header {
|
||||
background-color: $color;
|
||||
&.card-tabs {
|
||||
&:not(.card-outline) {
|
||||
.card-header {
|
||||
background-color: $color;
|
||||
|
||||
&,
|
||||
a {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
&,
|
||||
a {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: color-yiq($white);
|
||||
a.active {
|
||||
color: color-yiq($white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
border-top: 3px solid $color;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
border-top: 3px solid $color;
|
||||
}
|
||||
|
||||
&.card-outline-tabs {
|
||||
> .card-header {
|
||||
.card-header {
|
||||
a {
|
||||
&:hover {
|
||||
border-top: 3px solid $nav-tabs-border-color;
|
||||
|
|
|
|||
|
|
@ -15261,19 +15261,19 @@ textarea.form-control.is-warning {
|
|||
border-left: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.card:not(.card-outline) > .card-header {
|
||||
.card.card-tabs:not(.card-outline) .card-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
|
||||
.card.card-tabs:not(.card-outline) .card-header .nav-item:first-child .nav-link {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.card.card-outline .nav-item {
|
||||
.card.card-tabs.card-outline .nav-item {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card.card-outline .nav-item:first-child .nav-link {
|
||||
.card.card-tabs.card-outline .nav-item:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -15282,20 +15282,20 @@ textarea.form-control.is-warning {
|
|||
border-top: 0;
|
||||
}
|
||||
|
||||
.card.card-outline-tabs > .card-header .nav-item:first-child .nav-link {
|
||||
.card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.card.card-outline-tabs > .card-header a {
|
||||
.card.card-outline-tabs .card-header a {
|
||||
border-top: 3px solid transparent;
|
||||
}
|
||||
|
||||
.card.card-outline-tabs > .card-header a:hover {
|
||||
.card.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card.card-outline-tabs > .card-header a.active:hover {
|
||||
.card.card-outline-tabs .card-header a.active:hover {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -15636,28 +15636,28 @@ html.maximized-card {
|
|||
max-width: 200px;
|
||||
}
|
||||
|
||||
.card-primary:not(.card-outline) > .card-header {
|
||||
.card-primary.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.card-primary:not(.card-outline) > .card-header,
|
||||
.card-primary:not(.card-outline) > .card-header a {
|
||||
.card-primary.card-tabs:not(.card-outline) .card-header,
|
||||
.card-primary.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-primary:not(.card-outline) > .card-header a.active {
|
||||
.card-primary.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-primary.card-outline {
|
||||
.card-primary.card-tabs.card-outline {
|
||||
border-top: 3px solid #007bff;
|
||||
}
|
||||
|
||||
.card-primary.card-outline-tabs > .card-header a:hover {
|
||||
.card-primary.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-primary.card-outline-tabs > .card-header a.active {
|
||||
.card-primary.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #007bff;
|
||||
}
|
||||
|
||||
|
|
@ -15707,28 +15707,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-secondary:not(.card-outline) > .card-header {
|
||||
.card-secondary.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.card-secondary:not(.card-outline) > .card-header,
|
||||
.card-secondary:not(.card-outline) > .card-header a {
|
||||
.card-secondary.card-tabs:not(.card-outline) .card-header,
|
||||
.card-secondary.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-secondary:not(.card-outline) > .card-header a.active {
|
||||
.card-secondary.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-secondary.card-outline {
|
||||
.card-secondary.card-tabs.card-outline {
|
||||
border-top: 3px solid #6c757d;
|
||||
}
|
||||
|
||||
.card-secondary.card-outline-tabs > .card-header a:hover {
|
||||
.card-secondary.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-secondary.card-outline-tabs > .card-header a.active {
|
||||
.card-secondary.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #6c757d;
|
||||
}
|
||||
|
||||
|
|
@ -15778,28 +15778,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-success:not(.card-outline) > .card-header {
|
||||
.card-success.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.card-success:not(.card-outline) > .card-header,
|
||||
.card-success:not(.card-outline) > .card-header a {
|
||||
.card-success.card-tabs:not(.card-outline) .card-header,
|
||||
.card-success.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-success:not(.card-outline) > .card-header a.active {
|
||||
.card-success.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-success.card-outline {
|
||||
.card-success.card-tabs.card-outline {
|
||||
border-top: 3px solid #28a745;
|
||||
}
|
||||
|
||||
.card-success.card-outline-tabs > .card-header a:hover {
|
||||
.card-success.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-success.card-outline-tabs > .card-header a.active {
|
||||
.card-success.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #28a745;
|
||||
}
|
||||
|
||||
|
|
@ -15849,28 +15849,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-info:not(.card-outline) > .card-header {
|
||||
.card-info.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.card-info:not(.card-outline) > .card-header,
|
||||
.card-info:not(.card-outline) > .card-header a {
|
||||
.card-info.card-tabs:not(.card-outline) .card-header,
|
||||
.card-info.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-info:not(.card-outline) > .card-header a.active {
|
||||
.card-info.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-info.card-outline {
|
||||
.card-info.card-tabs.card-outline {
|
||||
border-top: 3px solid #17a2b8;
|
||||
}
|
||||
|
||||
.card-info.card-outline-tabs > .card-header a:hover {
|
||||
.card-info.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-info.card-outline-tabs > .card-header a.active {
|
||||
.card-info.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #17a2b8;
|
||||
}
|
||||
|
||||
|
|
@ -15920,28 +15920,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-warning:not(.card-outline) > .card-header {
|
||||
.card-warning.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.card-warning:not(.card-outline) > .card-header,
|
||||
.card-warning:not(.card-outline) > .card-header a {
|
||||
.card-warning.card-tabs:not(.card-outline) .card-header,
|
||||
.card-warning.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-warning:not(.card-outline) > .card-header a.active {
|
||||
.card-warning.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-warning.card-outline {
|
||||
.card-warning.card-tabs.card-outline {
|
||||
border-top: 3px solid #ffc107;
|
||||
}
|
||||
|
||||
.card-warning.card-outline-tabs > .card-header a:hover {
|
||||
.card-warning.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-warning.card-outline-tabs > .card-header a.active {
|
||||
.card-warning.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #ffc107;
|
||||
}
|
||||
|
||||
|
|
@ -15991,28 +15991,28 @@ html.maximized-card {
|
|||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-danger:not(.card-outline) > .card-header {
|
||||
.card-danger.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.card-danger:not(.card-outline) > .card-header,
|
||||
.card-danger:not(.card-outline) > .card-header a {
|
||||
.card-danger.card-tabs:not(.card-outline) .card-header,
|
||||
.card-danger.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-danger:not(.card-outline) > .card-header a.active {
|
||||
.card-danger.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-danger.card-outline {
|
||||
.card-danger.card-tabs.card-outline {
|
||||
border-top: 3px solid #dc3545;
|
||||
}
|
||||
|
||||
.card-danger.card-outline-tabs > .card-header a:hover {
|
||||
.card-danger.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-danger.card-outline-tabs > .card-header a.active {
|
||||
.card-danger.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #dc3545;
|
||||
}
|
||||
|
||||
|
|
@ -16062,28 +16062,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-light:not(.card-outline) > .card-header {
|
||||
.card-light.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.card-light:not(.card-outline) > .card-header,
|
||||
.card-light:not(.card-outline) > .card-header a {
|
||||
.card-light.card-tabs:not(.card-outline) .card-header,
|
||||
.card-light.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-light:not(.card-outline) > .card-header a.active {
|
||||
.card-light.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-light.card-outline {
|
||||
.card-light.card-tabs.card-outline {
|
||||
border-top: 3px solid #f8f9fa;
|
||||
}
|
||||
|
||||
.card-light.card-outline-tabs > .card-header a:hover {
|
||||
.card-light.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-light.card-outline-tabs > .card-header a.active {
|
||||
.card-light.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #f8f9fa;
|
||||
}
|
||||
|
||||
|
|
@ -16133,28 +16133,28 @@ html.maximized-card {
|
|||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-dark:not(.card-outline) > .card-header {
|
||||
.card-dark.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.card-dark:not(.card-outline) > .card-header,
|
||||
.card-dark:not(.card-outline) > .card-header a {
|
||||
.card-dark.card-tabs:not(.card-outline) .card-header,
|
||||
.card-dark.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-dark:not(.card-outline) > .card-header a.active {
|
||||
.card-dark.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-dark.card-outline {
|
||||
.card-dark.card-tabs.card-outline {
|
||||
border-top: 3px solid #343a40;
|
||||
}
|
||||
|
||||
.card-dark.card-outline-tabs > .card-header a:hover {
|
||||
.card-dark.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-dark.card-outline-tabs > .card-header a.active {
|
||||
.card-dark.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #343a40;
|
||||
}
|
||||
|
||||
|
|
@ -16204,28 +16204,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-navy:not(.card-outline) > .card-header {
|
||||
.card-navy.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #001f3f;
|
||||
}
|
||||
|
||||
.card-navy:not(.card-outline) > .card-header,
|
||||
.card-navy:not(.card-outline) > .card-header a {
|
||||
.card-navy.card-tabs:not(.card-outline) .card-header,
|
||||
.card-navy.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-navy:not(.card-outline) > .card-header a.active {
|
||||
.card-navy.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-navy.card-outline {
|
||||
.card-navy.card-tabs.card-outline {
|
||||
border-top: 3px solid #001f3f;
|
||||
}
|
||||
|
||||
.card-navy.card-outline-tabs > .card-header a:hover {
|
||||
.card-navy.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-navy.card-outline-tabs > .card-header a.active {
|
||||
.card-navy.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #001f3f;
|
||||
}
|
||||
|
||||
|
|
@ -16275,28 +16275,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-olive:not(.card-outline) > .card-header {
|
||||
.card-olive.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #3d9970;
|
||||
}
|
||||
|
||||
.card-olive:not(.card-outline) > .card-header,
|
||||
.card-olive:not(.card-outline) > .card-header a {
|
||||
.card-olive.card-tabs:not(.card-outline) .card-header,
|
||||
.card-olive.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-olive:not(.card-outline) > .card-header a.active {
|
||||
.card-olive.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-olive.card-outline {
|
||||
.card-olive.card-tabs.card-outline {
|
||||
border-top: 3px solid #3d9970;
|
||||
}
|
||||
|
||||
.card-olive.card-outline-tabs > .card-header a:hover {
|
||||
.card-olive.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-olive.card-outline-tabs > .card-header a.active {
|
||||
.card-olive.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #3d9970;
|
||||
}
|
||||
|
||||
|
|
@ -16346,28 +16346,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-lime:not(.card-outline) > .card-header {
|
||||
.card-lime.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #01ff70;
|
||||
}
|
||||
|
||||
.card-lime:not(.card-outline) > .card-header,
|
||||
.card-lime:not(.card-outline) > .card-header a {
|
||||
.card-lime.card-tabs:not(.card-outline) .card-header,
|
||||
.card-lime.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-lime:not(.card-outline) > .card-header a.active {
|
||||
.card-lime.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-lime.card-outline {
|
||||
.card-lime.card-tabs.card-outline {
|
||||
border-top: 3px solid #01ff70;
|
||||
}
|
||||
|
||||
.card-lime.card-outline-tabs > .card-header a:hover {
|
||||
.card-lime.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-lime.card-outline-tabs > .card-header a.active {
|
||||
.card-lime.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #01ff70;
|
||||
}
|
||||
|
||||
|
|
@ -16417,28 +16417,28 @@ html.maximized-card {
|
|||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-fuchsia:not(.card-outline) > .card-header {
|
||||
.card-fuchsia.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #f012be;
|
||||
}
|
||||
|
||||
.card-fuchsia:not(.card-outline) > .card-header,
|
||||
.card-fuchsia:not(.card-outline) > .card-header a {
|
||||
.card-fuchsia.card-tabs:not(.card-outline) .card-header,
|
||||
.card-fuchsia.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-fuchsia:not(.card-outline) > .card-header a.active {
|
||||
.card-fuchsia.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-fuchsia.card-outline {
|
||||
.card-fuchsia.card-tabs.card-outline {
|
||||
border-top: 3px solid #f012be;
|
||||
}
|
||||
|
||||
.card-fuchsia.card-outline-tabs > .card-header a:hover {
|
||||
.card-fuchsia.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-fuchsia.card-outline-tabs > .card-header a.active {
|
||||
.card-fuchsia.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #f012be;
|
||||
}
|
||||
|
||||
|
|
@ -16488,28 +16488,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-maroon:not(.card-outline) > .card-header {
|
||||
.card-maroon.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #d81b60;
|
||||
}
|
||||
|
||||
.card-maroon:not(.card-outline) > .card-header,
|
||||
.card-maroon:not(.card-outline) > .card-header a {
|
||||
.card-maroon.card-tabs:not(.card-outline) .card-header,
|
||||
.card-maroon.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-maroon:not(.card-outline) > .card-header a.active {
|
||||
.card-maroon.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-maroon.card-outline {
|
||||
.card-maroon.card-tabs.card-outline {
|
||||
border-top: 3px solid #d81b60;
|
||||
}
|
||||
|
||||
.card-maroon.card-outline-tabs > .card-header a:hover {
|
||||
.card-maroon.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-maroon.card-outline-tabs > .card-header a.active {
|
||||
.card-maroon.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #d81b60;
|
||||
}
|
||||
|
||||
|
|
@ -16559,28 +16559,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-blue:not(.card-outline) > .card-header {
|
||||
.card-blue.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.card-blue:not(.card-outline) > .card-header,
|
||||
.card-blue:not(.card-outline) > .card-header a {
|
||||
.card-blue.card-tabs:not(.card-outline) .card-header,
|
||||
.card-blue.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-blue:not(.card-outline) > .card-header a.active {
|
||||
.card-blue.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-blue.card-outline {
|
||||
.card-blue.card-tabs.card-outline {
|
||||
border-top: 3px solid #007bff;
|
||||
}
|
||||
|
||||
.card-blue.card-outline-tabs > .card-header a:hover {
|
||||
.card-blue.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-blue.card-outline-tabs > .card-header a.active {
|
||||
.card-blue.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #007bff;
|
||||
}
|
||||
|
||||
|
|
@ -16630,28 +16630,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-indigo:not(.card-outline) > .card-header {
|
||||
.card-indigo.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #6610f2;
|
||||
}
|
||||
|
||||
.card-indigo:not(.card-outline) > .card-header,
|
||||
.card-indigo:not(.card-outline) > .card-header a {
|
||||
.card-indigo.card-tabs:not(.card-outline) .card-header,
|
||||
.card-indigo.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-indigo:not(.card-outline) > .card-header a.active {
|
||||
.card-indigo.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-indigo.card-outline {
|
||||
.card-indigo.card-tabs.card-outline {
|
||||
border-top: 3px solid #6610f2;
|
||||
}
|
||||
|
||||
.card-indigo.card-outline-tabs > .card-header a:hover {
|
||||
.card-indigo.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-indigo.card-outline-tabs > .card-header a.active {
|
||||
.card-indigo.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #6610f2;
|
||||
}
|
||||
|
||||
|
|
@ -16701,28 +16701,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-purple:not(.card-outline) > .card-header {
|
||||
.card-purple.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #6f42c1;
|
||||
}
|
||||
|
||||
.card-purple:not(.card-outline) > .card-header,
|
||||
.card-purple:not(.card-outline) > .card-header a {
|
||||
.card-purple.card-tabs:not(.card-outline) .card-header,
|
||||
.card-purple.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-purple:not(.card-outline) > .card-header a.active {
|
||||
.card-purple.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-purple.card-outline {
|
||||
.card-purple.card-tabs.card-outline {
|
||||
border-top: 3px solid #6f42c1;
|
||||
}
|
||||
|
||||
.card-purple.card-outline-tabs > .card-header a:hover {
|
||||
.card-purple.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-purple.card-outline-tabs > .card-header a.active {
|
||||
.card-purple.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #6f42c1;
|
||||
}
|
||||
|
||||
|
|
@ -16772,28 +16772,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-pink:not(.card-outline) > .card-header {
|
||||
.card-pink.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #e83e8c;
|
||||
}
|
||||
|
||||
.card-pink:not(.card-outline) > .card-header,
|
||||
.card-pink:not(.card-outline) > .card-header a {
|
||||
.card-pink.card-tabs:not(.card-outline) .card-header,
|
||||
.card-pink.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-pink:not(.card-outline) > .card-header a.active {
|
||||
.card-pink.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-pink.card-outline {
|
||||
.card-pink.card-tabs.card-outline {
|
||||
border-top: 3px solid #e83e8c;
|
||||
}
|
||||
|
||||
.card-pink.card-outline-tabs > .card-header a:hover {
|
||||
.card-pink.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-pink.card-outline-tabs > .card-header a.active {
|
||||
.card-pink.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #e83e8c;
|
||||
}
|
||||
|
||||
|
|
@ -16843,28 +16843,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-red:not(.card-outline) > .card-header {
|
||||
.card-red.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.card-red:not(.card-outline) > .card-header,
|
||||
.card-red:not(.card-outline) > .card-header a {
|
||||
.card-red.card-tabs:not(.card-outline) .card-header,
|
||||
.card-red.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-red:not(.card-outline) > .card-header a.active {
|
||||
.card-red.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-red.card-outline {
|
||||
.card-red.card-tabs.card-outline {
|
||||
border-top: 3px solid #dc3545;
|
||||
}
|
||||
|
||||
.card-red.card-outline-tabs > .card-header a:hover {
|
||||
.card-red.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-red.card-outline-tabs > .card-header a.active {
|
||||
.card-red.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #dc3545;
|
||||
}
|
||||
|
||||
|
|
@ -16914,28 +16914,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-orange:not(.card-outline) > .card-header {
|
||||
.card-orange.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #fd7e14;
|
||||
}
|
||||
|
||||
.card-orange:not(.card-outline) > .card-header,
|
||||
.card-orange:not(.card-outline) > .card-header a {
|
||||
.card-orange.card-tabs:not(.card-outline) .card-header,
|
||||
.card-orange.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-orange:not(.card-outline) > .card-header a.active {
|
||||
.card-orange.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-orange.card-outline {
|
||||
.card-orange.card-tabs.card-outline {
|
||||
border-top: 3px solid #fd7e14;
|
||||
}
|
||||
|
||||
.card-orange.card-outline-tabs > .card-header a:hover {
|
||||
.card-orange.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-orange.card-outline-tabs > .card-header a.active {
|
||||
.card-orange.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #fd7e14;
|
||||
}
|
||||
|
||||
|
|
@ -16985,28 +16985,28 @@ html.maximized-card {
|
|||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-yellow:not(.card-outline) > .card-header {
|
||||
.card-yellow.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.card-yellow:not(.card-outline) > .card-header,
|
||||
.card-yellow:not(.card-outline) > .card-header a {
|
||||
.card-yellow.card-tabs:not(.card-outline) .card-header,
|
||||
.card-yellow.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-yellow:not(.card-outline) > .card-header a.active {
|
||||
.card-yellow.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-yellow.card-outline {
|
||||
.card-yellow.card-tabs.card-outline {
|
||||
border-top: 3px solid #ffc107;
|
||||
}
|
||||
|
||||
.card-yellow.card-outline-tabs > .card-header a:hover {
|
||||
.card-yellow.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-yellow.card-outline-tabs > .card-header a.active {
|
||||
.card-yellow.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #ffc107;
|
||||
}
|
||||
|
||||
|
|
@ -17056,28 +17056,28 @@ html.maximized-card {
|
|||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-green:not(.card-outline) > .card-header {
|
||||
.card-green.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.card-green:not(.card-outline) > .card-header,
|
||||
.card-green:not(.card-outline) > .card-header a {
|
||||
.card-green.card-tabs:not(.card-outline) .card-header,
|
||||
.card-green.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-green:not(.card-outline) > .card-header a.active {
|
||||
.card-green.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-green.card-outline {
|
||||
.card-green.card-tabs.card-outline {
|
||||
border-top: 3px solid #28a745;
|
||||
}
|
||||
|
||||
.card-green.card-outline-tabs > .card-header a:hover {
|
||||
.card-green.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-green.card-outline-tabs > .card-header a.active {
|
||||
.card-green.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #28a745;
|
||||
}
|
||||
|
||||
|
|
@ -17127,28 +17127,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-teal:not(.card-outline) > .card-header {
|
||||
.card-teal.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #20c997;
|
||||
}
|
||||
|
||||
.card-teal:not(.card-outline) > .card-header,
|
||||
.card-teal:not(.card-outline) > .card-header a {
|
||||
.card-teal.card-tabs:not(.card-outline) .card-header,
|
||||
.card-teal.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-teal:not(.card-outline) > .card-header a.active {
|
||||
.card-teal.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-teal.card-outline {
|
||||
.card-teal.card-tabs.card-outline {
|
||||
border-top: 3px solid #20c997;
|
||||
}
|
||||
|
||||
.card-teal.card-outline-tabs > .card-header a:hover {
|
||||
.card-teal.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-teal.card-outline-tabs > .card-header a.active {
|
||||
.card-teal.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #20c997;
|
||||
}
|
||||
|
||||
|
|
@ -17198,28 +17198,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-cyan:not(.card-outline) > .card-header {
|
||||
.card-cyan.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.card-cyan:not(.card-outline) > .card-header,
|
||||
.card-cyan:not(.card-outline) > .card-header a {
|
||||
.card-cyan.card-tabs:not(.card-outline) .card-header,
|
||||
.card-cyan.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-cyan:not(.card-outline) > .card-header a.active {
|
||||
.card-cyan.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-cyan.card-outline {
|
||||
.card-cyan.card-tabs.card-outline {
|
||||
border-top: 3px solid #17a2b8;
|
||||
}
|
||||
|
||||
.card-cyan.card-outline-tabs > .card-header a:hover {
|
||||
.card-cyan.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-cyan.card-outline-tabs > .card-header a.active {
|
||||
.card-cyan.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #17a2b8;
|
||||
}
|
||||
|
||||
|
|
@ -17269,28 +17269,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-white:not(.card-outline) > .card-header {
|
||||
.card-white.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.card-white:not(.card-outline) > .card-header,
|
||||
.card-white:not(.card-outline) > .card-header a {
|
||||
.card-white.card-tabs:not(.card-outline) .card-header,
|
||||
.card-white.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-white:not(.card-outline) > .card-header a.active {
|
||||
.card-white.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-white.card-outline {
|
||||
.card-white.card-tabs.card-outline {
|
||||
border-top: 3px solid #ffffff;
|
||||
}
|
||||
|
||||
.card-white.card-outline-tabs > .card-header a:hover {
|
||||
.card-white.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-white.card-outline-tabs > .card-header a.active {
|
||||
.card-white.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -17340,28 +17340,28 @@ html.maximized-card {
|
|||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-gray:not(.card-outline) > .card-header {
|
||||
.card-gray.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.card-gray:not(.card-outline) > .card-header,
|
||||
.card-gray:not(.card-outline) > .card-header a {
|
||||
.card-gray.card-tabs:not(.card-outline) .card-header,
|
||||
.card-gray.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-gray:not(.card-outline) > .card-header a.active {
|
||||
.card-gray.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-gray.card-outline {
|
||||
.card-gray.card-tabs.card-outline {
|
||||
border-top: 3px solid #6c757d;
|
||||
}
|
||||
|
||||
.card-gray.card-outline-tabs > .card-header a:hover {
|
||||
.card-gray.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-gray.card-outline-tabs > .card-header a.active {
|
||||
.card-gray.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #6c757d;
|
||||
}
|
||||
|
||||
|
|
@ -17411,28 +17411,28 @@ html.maximized-card {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-gray-dark:not(.card-outline) > .card-header {
|
||||
.card-gray-dark.card-tabs:not(.card-outline) .card-header {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.card-gray-dark:not(.card-outline) > .card-header,
|
||||
.card-gray-dark:not(.card-outline) > .card-header a {
|
||||
.card-gray-dark.card-tabs:not(.card-outline) .card-header,
|
||||
.card-gray-dark.card-tabs:not(.card-outline) .card-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-gray-dark:not(.card-outline) > .card-header a.active {
|
||||
.card-gray-dark.card-tabs:not(.card-outline) .card-header a.active {
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.card-gray-dark.card-outline {
|
||||
.card-gray-dark.card-tabs.card-outline {
|
||||
border-top: 3px solid #343a40;
|
||||
}
|
||||
|
||||
.card-gray-dark.card-outline-tabs > .card-header a:hover {
|
||||
.card-gray-dark.card-outline-tabs .card-header a:hover {
|
||||
border-top: 3px solid #dee2e6;
|
||||
}
|
||||
|
||||
.card-gray-dark.card-outline-tabs > .card-header a.active {
|
||||
.card-gray-dark.card-outline-tabs .card-header a.active {
|
||||
border-top: 3px solid #343a40;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -917,13 +917,13 @@
|
|||
<!-- ./row -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4>Nav Tabs inside Card Header</h4>
|
||||
<h4>Nav Tabs inside Card Header <small>card-tabs / card-outline-tabs</small></h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./row -->
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card card-primary">
|
||||
<div class="card card-primary card-tabs">
|
||||
<div class="card-header p-0 pt-1">
|
||||
<ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
|
|
@ -960,7 +960,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card card-primary card-outline card-tabs">
|
||||
<div class="card-header p-0 pt-1 border-bottom-0">
|
||||
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
|
|
|
|||
Loading…
Reference in New Issue