github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

fixed card default border after adding nav tabs support 

- placed default card tabs style into .card-tabs
- updated demo
pull/2269/head
REJack 2019-11-02 08:59:45 +01:00
parent 2ea45f22f3
commit b7a1c871ce
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
7 changed files with 229 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/scss/_cards.scss
View File

@ -76,8 +76,9 @@
border-left: 1px solid $card-border-color; border-left: 1px solid $card-border-color;
} }
&.card-tabs {
&:not(.card-outline) { &:not(.card-outline) {
> .card-header { & .card-header {
border-bottom: 0; border-bottom: 0;
.nav-item { .nav-item {
@ -98,11 +99,12 @@
} }
} }
} }
}
&.card-outline-tabs { &.card-outline-tabs {
border-top: 0; border-top: 0;
> .card-header { .card-header {
.nav-item { .nav-item {
&:first-child .nav-link { &:first-child .nav-link {
border-left: 0; border-left: 0;
@ -125,6 +127,7 @@
} }
} }
} }
} }
// Maximized Card Body Scroll fix // Maximized Card Body Scroll fix

6
build/scss/mixins/_cards.scss
View File

@ -4,8 +4,9 @@
@mixin cards-variant($name, $color) { @mixin cards-variant($name, $color) {
.card-#{$name} { .card-#{$name} {
&.card-tabs {
&:not(.card-outline) { &:not(.card-outline) {
> .card-header { .card-header {
background-color: $color; background-color: $color;
&, &,
@ -22,9 +23,10 @@
&.card-outline { &.card-outline {
border-top: 3px solid $color; border-top: 3px solid $color;
} }
}
&.card-outline-tabs { &.card-outline-tabs {
> .card-header { .card-header {
a { a {
&:hover { &:hover {
border-top: 3px solid $nav-tabs-border-color; border-top: 3px solid $nav-tabs-border-color;

380
dist/css/adminlte.css vendored
View File

@ -15261,19 +15261,19 @@ textarea.form-control.is-warning {
border-left: 1px solid rgba(0, 0, 0, 0.125); 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; 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; margin-left: -1px;
} }
.card.card-outline .nav-item { .card.card-tabs.card-outline .nav-item {
border-bottom: 0; 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; border-left: 0;
margin-left: 0; margin-left: 0;
} }
@ -15282,20 +15282,20 @@ textarea.form-control.is-warning {
border-top: 0; 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; border-left: 0;
margin-left: 0; margin-left: 0;
} }
.card.card-outline-tabs > .card-header a { .card.card-outline-tabs .card-header a {
border-top: 3px solid transparent; 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; 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; margin-top: 0;
} }
@ -15636,28 +15636,28 @@ html.maximized-card {
max-width: 200px; max-width: 200px;
} }
.card-primary:not(.card-outline) > .card-header { .card-primary.card-tabs:not(.card-outline) .card-header {
background-color: #007bff; background-color: #007bff;
} }
.card-primary:not(.card-outline) > .card-header, .card-primary.card-tabs:not(.card-outline) .card-header,
.card-primary:not(.card-outline) > .card-header a { .card-primary.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-primary:not(.card-outline) > .card-header a.active { .card-primary.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-primary.card-outline { .card-primary.card-tabs.card-outline {
border-top: 3px solid #007bff; 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; 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; border-top: 3px solid #007bff;
} }
@ -15707,28 +15707,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-secondary:not(.card-outline) > .card-header { .card-secondary.card-tabs:not(.card-outline) .card-header {
background-color: #6c757d; background-color: #6c757d;
} }
.card-secondary:not(.card-outline) > .card-header, .card-secondary.card-tabs:not(.card-outline) .card-header,
.card-secondary:not(.card-outline) > .card-header a { .card-secondary.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-secondary:not(.card-outline) > .card-header a.active { .card-secondary.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-secondary.card-outline { .card-secondary.card-tabs.card-outline {
border-top: 3px solid #6c757d; 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; 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; border-top: 3px solid #6c757d;
} }
@ -15778,28 +15778,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-success:not(.card-outline) > .card-header { .card-success.card-tabs:not(.card-outline) .card-header {
background-color: #28a745; background-color: #28a745;
} }
.card-success:not(.card-outline) > .card-header, .card-success.card-tabs:not(.card-outline) .card-header,
.card-success:not(.card-outline) > .card-header a { .card-success.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-success:not(.card-outline) > .card-header a.active { .card-success.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-success.card-outline { .card-success.card-tabs.card-outline {
border-top: 3px solid #28a745; 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; 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; border-top: 3px solid #28a745;
} }
@ -15849,28 +15849,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-info:not(.card-outline) > .card-header { .card-info.card-tabs:not(.card-outline) .card-header {
background-color: #17a2b8; background-color: #17a2b8;
} }
.card-info:not(.card-outline) > .card-header, .card-info.card-tabs:not(.card-outline) .card-header,
.card-info:not(.card-outline) > .card-header a { .card-info.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-info:not(.card-outline) > .card-header a.active { .card-info.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-info.card-outline { .card-info.card-tabs.card-outline {
border-top: 3px solid #17a2b8; 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; 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; border-top: 3px solid #17a2b8;
} }
@ -15920,28 +15920,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-warning:not(.card-outline) > .card-header { .card-warning.card-tabs:not(.card-outline) .card-header {
background-color: #ffc107; background-color: #ffc107;
} }
.card-warning:not(.card-outline) > .card-header, .card-warning.card-tabs:not(.card-outline) .card-header,
.card-warning:not(.card-outline) > .card-header a { .card-warning.card-tabs:not(.card-outline) .card-header a {
color: #1F2D3D; color: #1F2D3D;
} }
.card-warning:not(.card-outline) > .card-header a.active { .card-warning.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-warning.card-outline { .card-warning.card-tabs.card-outline {
border-top: 3px solid #ffc107; 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; 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; border-top: 3px solid #ffc107;
} }
@ -15991,28 +15991,28 @@ html.maximized-card {
color: #1F2D3D; color: #1F2D3D;
} }
.card-danger:not(.card-outline) > .card-header { .card-danger.card-tabs:not(.card-outline) .card-header {
background-color: #dc3545; background-color: #dc3545;
} }
.card-danger:not(.card-outline) > .card-header, .card-danger.card-tabs:not(.card-outline) .card-header,
.card-danger:not(.card-outline) > .card-header a { .card-danger.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-danger:not(.card-outline) > .card-header a.active { .card-danger.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-danger.card-outline { .card-danger.card-tabs.card-outline {
border-top: 3px solid #dc3545; 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; 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; border-top: 3px solid #dc3545;
} }
@ -16062,28 +16062,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-light:not(.card-outline) > .card-header { .card-light.card-tabs:not(.card-outline) .card-header {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
.card-light:not(.card-outline) > .card-header, .card-light.card-tabs:not(.card-outline) .card-header,
.card-light:not(.card-outline) > .card-header a { .card-light.card-tabs:not(.card-outline) .card-header a {
color: #1F2D3D; color: #1F2D3D;
} }
.card-light:not(.card-outline) > .card-header a.active { .card-light.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-light.card-outline { .card-light.card-tabs.card-outline {
border-top: 3px solid #f8f9fa; 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; 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; border-top: 3px solid #f8f9fa;
} }
@ -16133,28 +16133,28 @@ html.maximized-card {
color: #1F2D3D; color: #1F2D3D;
} }
.card-dark:not(.card-outline) > .card-header { .card-dark.card-tabs:not(.card-outline) .card-header {
background-color: #343a40; background-color: #343a40;
} }
.card-dark:not(.card-outline) > .card-header, .card-dark.card-tabs:not(.card-outline) .card-header,
.card-dark:not(.card-outline) > .card-header a { .card-dark.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-dark:not(.card-outline) > .card-header a.active { .card-dark.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-dark.card-outline { .card-dark.card-tabs.card-outline {
border-top: 3px solid #343a40; 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; 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; border-top: 3px solid #343a40;
} }
@ -16204,28 +16204,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-navy:not(.card-outline) > .card-header { .card-navy.card-tabs:not(.card-outline) .card-header {
background-color: #001f3f; background-color: #001f3f;
} }
.card-navy:not(.card-outline) > .card-header, .card-navy.card-tabs:not(.card-outline) .card-header,
.card-navy:not(.card-outline) > .card-header a { .card-navy.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-navy:not(.card-outline) > .card-header a.active { .card-navy.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-navy.card-outline { .card-navy.card-tabs.card-outline {
border-top: 3px solid #001f3f; 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; 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; border-top: 3px solid #001f3f;
} }
@ -16275,28 +16275,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-olive:not(.card-outline) > .card-header { .card-olive.card-tabs:not(.card-outline) .card-header {
background-color: #3d9970; background-color: #3d9970;
} }
.card-olive:not(.card-outline) > .card-header, .card-olive.card-tabs:not(.card-outline) .card-header,
.card-olive:not(.card-outline) > .card-header a { .card-olive.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-olive:not(.card-outline) > .card-header a.active { .card-olive.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-olive.card-outline { .card-olive.card-tabs.card-outline {
border-top: 3px solid #3d9970; 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; 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; border-top: 3px solid #3d9970;
} }
@ -16346,28 +16346,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-lime:not(.card-outline) > .card-header { .card-lime.card-tabs:not(.card-outline) .card-header {
background-color: #01ff70; background-color: #01ff70;
} }
.card-lime:not(.card-outline) > .card-header, .card-lime.card-tabs:not(.card-outline) .card-header,
.card-lime:not(.card-outline) > .card-header a { .card-lime.card-tabs:not(.card-outline) .card-header a {
color: #1F2D3D; color: #1F2D3D;
} }
.card-lime:not(.card-outline) > .card-header a.active { .card-lime.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-lime.card-outline { .card-lime.card-tabs.card-outline {
border-top: 3px solid #01ff70; 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; 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; border-top: 3px solid #01ff70;
} }
@ -16417,28 +16417,28 @@ html.maximized-card {
color: #1F2D3D; color: #1F2D3D;
} }
.card-fuchsia:not(.card-outline) > .card-header { .card-fuchsia.card-tabs:not(.card-outline) .card-header {
background-color: #f012be; background-color: #f012be;
} }
.card-fuchsia:not(.card-outline) > .card-header, .card-fuchsia.card-tabs:not(.card-outline) .card-header,
.card-fuchsia:not(.card-outline) > .card-header a { .card-fuchsia.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-fuchsia:not(.card-outline) > .card-header a.active { .card-fuchsia.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-fuchsia.card-outline { .card-fuchsia.card-tabs.card-outline {
border-top: 3px solid #f012be; 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; 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; border-top: 3px solid #f012be;
} }
@ -16488,28 +16488,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-maroon:not(.card-outline) > .card-header { .card-maroon.card-tabs:not(.card-outline) .card-header {
background-color: #d81b60; background-color: #d81b60;
} }
.card-maroon:not(.card-outline) > .card-header, .card-maroon.card-tabs:not(.card-outline) .card-header,
.card-maroon:not(.card-outline) > .card-header a { .card-maroon.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-maroon:not(.card-outline) > .card-header a.active { .card-maroon.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-maroon.card-outline { .card-maroon.card-tabs.card-outline {
border-top: 3px solid #d81b60; 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; 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; border-top: 3px solid #d81b60;
} }
@ -16559,28 +16559,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-blue:not(.card-outline) > .card-header { .card-blue.card-tabs:not(.card-outline) .card-header {
background-color: #007bff; background-color: #007bff;
} }
.card-blue:not(.card-outline) > .card-header, .card-blue.card-tabs:not(.card-outline) .card-header,
.card-blue:not(.card-outline) > .card-header a { .card-blue.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-blue:not(.card-outline) > .card-header a.active { .card-blue.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-blue.card-outline { .card-blue.card-tabs.card-outline {
border-top: 3px solid #007bff; 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; 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; border-top: 3px solid #007bff;
} }
@ -16630,28 +16630,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-indigo:not(.card-outline) > .card-header { .card-indigo.card-tabs:not(.card-outline) .card-header {
background-color: #6610f2; background-color: #6610f2;
} }
.card-indigo:not(.card-outline) > .card-header, .card-indigo.card-tabs:not(.card-outline) .card-header,
.card-indigo:not(.card-outline) > .card-header a { .card-indigo.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-indigo:not(.card-outline) > .card-header a.active { .card-indigo.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-indigo.card-outline { .card-indigo.card-tabs.card-outline {
border-top: 3px solid #6610f2; 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; 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; border-top: 3px solid #6610f2;
} }
@ -16701,28 +16701,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-purple:not(.card-outline) > .card-header { .card-purple.card-tabs:not(.card-outline) .card-header {
background-color: #6f42c1; background-color: #6f42c1;
} }
.card-purple:not(.card-outline) > .card-header, .card-purple.card-tabs:not(.card-outline) .card-header,
.card-purple:not(.card-outline) > .card-header a { .card-purple.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-purple:not(.card-outline) > .card-header a.active { .card-purple.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-purple.card-outline { .card-purple.card-tabs.card-outline {
border-top: 3px solid #6f42c1; 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; 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; border-top: 3px solid #6f42c1;
} }
@ -16772,28 +16772,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-pink:not(.card-outline) > .card-header { .card-pink.card-tabs:not(.card-outline) .card-header {
background-color: #e83e8c; background-color: #e83e8c;
} }
.card-pink:not(.card-outline) > .card-header, .card-pink.card-tabs:not(.card-outline) .card-header,
.card-pink:not(.card-outline) > .card-header a { .card-pink.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-pink:not(.card-outline) > .card-header a.active { .card-pink.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-pink.card-outline { .card-pink.card-tabs.card-outline {
border-top: 3px solid #e83e8c; 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; 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; border-top: 3px solid #e83e8c;
} }
@ -16843,28 +16843,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-red:not(.card-outline) > .card-header { .card-red.card-tabs:not(.card-outline) .card-header {
background-color: #dc3545; background-color: #dc3545;
} }
.card-red:not(.card-outline) > .card-header, .card-red.card-tabs:not(.card-outline) .card-header,
.card-red:not(.card-outline) > .card-header a { .card-red.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-red:not(.card-outline) > .card-header a.active { .card-red.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-red.card-outline { .card-red.card-tabs.card-outline {
border-top: 3px solid #dc3545; 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; 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; border-top: 3px solid #dc3545;
} }
@ -16914,28 +16914,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-orange:not(.card-outline) > .card-header { .card-orange.card-tabs:not(.card-outline) .card-header {
background-color: #fd7e14; background-color: #fd7e14;
} }
.card-orange:not(.card-outline) > .card-header, .card-orange.card-tabs:not(.card-outline) .card-header,
.card-orange:not(.card-outline) > .card-header a { .card-orange.card-tabs:not(.card-outline) .card-header a {
color: #1F2D3D; color: #1F2D3D;
} }
.card-orange:not(.card-outline) > .card-header a.active { .card-orange.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-orange.card-outline { .card-orange.card-tabs.card-outline {
border-top: 3px solid #fd7e14; 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; 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; border-top: 3px solid #fd7e14;
} }
@ -16985,28 +16985,28 @@ html.maximized-card {
color: #1F2D3D; color: #1F2D3D;
} }
.card-yellow:not(.card-outline) > .card-header { .card-yellow.card-tabs:not(.card-outline) .card-header {
background-color: #ffc107; background-color: #ffc107;
} }
.card-yellow:not(.card-outline) > .card-header, .card-yellow.card-tabs:not(.card-outline) .card-header,
.card-yellow:not(.card-outline) > .card-header a { .card-yellow.card-tabs:not(.card-outline) .card-header a {
color: #1F2D3D; color: #1F2D3D;
} }
.card-yellow:not(.card-outline) > .card-header a.active { .card-yellow.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-yellow.card-outline { .card-yellow.card-tabs.card-outline {
border-top: 3px solid #ffc107; 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; 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; border-top: 3px solid #ffc107;
} }
@ -17056,28 +17056,28 @@ html.maximized-card {
color: #1F2D3D; color: #1F2D3D;
} }
.card-green:not(.card-outline) > .card-header { .card-green.card-tabs:not(.card-outline) .card-header {
background-color: #28a745; background-color: #28a745;
} }
.card-green:not(.card-outline) > .card-header, .card-green.card-tabs:not(.card-outline) .card-header,
.card-green:not(.card-outline) > .card-header a { .card-green.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-green:not(.card-outline) > .card-header a.active { .card-green.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-green.card-outline { .card-green.card-tabs.card-outline {
border-top: 3px solid #28a745; 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; 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; border-top: 3px solid #28a745;
} }
@ -17127,28 +17127,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-teal:not(.card-outline) > .card-header { .card-teal.card-tabs:not(.card-outline) .card-header {
background-color: #20c997; background-color: #20c997;
} }
.card-teal:not(.card-outline) > .card-header, .card-teal.card-tabs:not(.card-outline) .card-header,
.card-teal:not(.card-outline) > .card-header a { .card-teal.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-teal:not(.card-outline) > .card-header a.active { .card-teal.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-teal.card-outline { .card-teal.card-tabs.card-outline {
border-top: 3px solid #20c997; 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; 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; border-top: 3px solid #20c997;
} }
@ -17198,28 +17198,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-cyan:not(.card-outline) > .card-header { .card-cyan.card-tabs:not(.card-outline) .card-header {
background-color: #17a2b8; background-color: #17a2b8;
} }
.card-cyan:not(.card-outline) > .card-header, .card-cyan.card-tabs:not(.card-outline) .card-header,
.card-cyan:not(.card-outline) > .card-header a { .card-cyan.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-cyan:not(.card-outline) > .card-header a.active { .card-cyan.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-cyan.card-outline { .card-cyan.card-tabs.card-outline {
border-top: 3px solid #17a2b8; 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; 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; border-top: 3px solid #17a2b8;
} }
@ -17269,28 +17269,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-white:not(.card-outline) > .card-header { .card-white.card-tabs:not(.card-outline) .card-header {
background-color: #ffffff; background-color: #ffffff;
} }
.card-white:not(.card-outline) > .card-header, .card-white.card-tabs:not(.card-outline) .card-header,
.card-white:not(.card-outline) > .card-header a { .card-white.card-tabs:not(.card-outline) .card-header a {
color: #1F2D3D; color: #1F2D3D;
} }
.card-white:not(.card-outline) > .card-header a.active { .card-white.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-white.card-outline { .card-white.card-tabs.card-outline {
border-top: 3px solid #ffffff; 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; 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; border-top: 3px solid #ffffff;
} }
@ -17340,28 +17340,28 @@ html.maximized-card {
color: #1F2D3D; color: #1F2D3D;
} }
.card-gray:not(.card-outline) > .card-header { .card-gray.card-tabs:not(.card-outline) .card-header {
background-color: #6c757d; background-color: #6c757d;
} }
.card-gray:not(.card-outline) > .card-header, .card-gray.card-tabs:not(.card-outline) .card-header,
.card-gray:not(.card-outline) > .card-header a { .card-gray.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; color: #ffffff;
} }
.card-gray:not(.card-outline) > .card-header a.active { .card-gray.card-tabs:not(.card-outline) .card-header a.active {
color: #1F2D3D; color: #1F2D3D;
} }
.card-gray.card-outline { .card-gray.card-tabs.card-outline {
border-top: 3px solid #6c757d; 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; 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; border-top: 3px solid #6c757d;
} }
@ -17411,28 +17411,28 @@ html.maximized-card {
color: #ffffff; color: #ffffff;
} }
.card-gray-dark:not(.card-outline) > .card-header { .card-gray-dark.card-tabs:not(.card-outline) .card-header {
background-color: #343a40; background-color: #343a40;
} }
.card-gray-dark:not(.card-outline) > .card-header, .card-gray-dark.card-tabs:not(.card-outline) .card-header,
.card-gray-dark:not(.card-outline) > .card-header a { .card-gray-dark.card-tabs:not(.card-outline) .card-header a {
color: #ffffff; 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; color: #1F2D3D;
} }
.card-gray-dark.card-outline { .card-gray-dark.card-tabs.card-outline {
border-top: 3px solid #343a40; 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; 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; border-top: 3px solid #343a40;
} }

2
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

6
pages/UI/navbar.html
View File

@ -917,13 +917,13 @@
<!-- ./row --> <!-- ./row -->
<div class="row"> <div class="row">
<div class="col-12"> <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>
</div> </div>
<!-- ./row --> <!-- ./row -->
<div class="row"> <div class="row">
<div class="col-12 col-sm-6 col-lg-4"> <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"> <div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist"> <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
<li class="nav-item"> <li class="nav-item">
@ -960,7 +960,7 @@
</div> </div>
</div> </div>
<div class="col-12 col-sm-6 col-lg-4"> <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"> <div class="card-header p-0 pt-1 border-bottom-0">
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist"> <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item"> <li class="nav-item">