Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 09:54:24 +04:00
Code Issues Projects Releases Wiki Activity

Card with bottom tabs has incorrect border radius

Browse Source 
fix: #1010
This commit is contained in:
codecalm
2022-02-03 23:12:54 +01:00
parent 01b1c48950
commit 946077aa93
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/scss/ui/_cards.scss
View File

@@ -1,7 +1,9 @@
.card { .card {
--#{$variable-prefix}card-border-radius: #{$card-border-radius};
box-shadow: $card-shadow; box-shadow: $card-shadow;
border: $card-border-width solid $card-border-color; border: $card-border-width solid $card-border-color;
background: var(--#{$variable-prefix}card-bg, #{$card-bg}); background: var(--#{$variable-prefix}card-bg, #{$card-bg});
border-radius: var(--#{$variable-prefix}card-border-radius);
@include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out); @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
@media print { @media print {
@@ -154,7 +156,7 @@
content: ""; content: "";
background: $card-bg; background: $card-bg;
border: 1px solid $card-border-color; border: 1px solid $card-border-color;
border-radius: $card-border-radius $card-border-radius 0 0; border-radius: var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius) 0 0;
} }
} }
@@ -200,6 +202,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
background: transparent; background: transparent;
&:first-child {
border-radius: var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius) 0 0;
}
} }
.card-header-light { .card-header-light {
@@ -251,6 +257,10 @@
// Card footer // Card footer
.card-footer { .card-footer {
margin-top: auto; margin-top: auto;
&:last-child {
border-radius: 0 0 var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius);
}
} }
.card-footer-transparent { .card-footer-transparent {
@@ -374,7 +384,7 @@ Card status
right: 0; right: 0;
left: 0; left: 0;
height: $card-status-size; height: $card-status-size;
border-radius: $card-border-radius $card-border-radius 0 0; border-radius: var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius) 0 0;
} }
.card-status-start { .card-status-start {
@@ -383,7 +393,7 @@ Card status
bottom: 0; bottom: 0;
width: $card-status-size; width: $card-status-size;
height: 100%; height: 100%;
border-radius: $card-border-radius 0 0 $card-border-radius; border-radius: var(--#{$variable-prefix}card-border-radius) 0 0 var(--#{$variable-prefix}card-border-radius);
} }
.card-status-bottom { .card-status-bottom {
@@ -392,7 +402,7 @@ Card status
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: $card-status-size; height: $card-status-size;
border-radius: 0 0 $card-border-radius $card-border-radius; border-radius: 0 0 var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius);
} }
/** /**
@@ -511,7 +521,6 @@ Card list group
// Card tabs // Card tabs
.card-tabs { .card-tabs {
.nav-tabs { .nav-tabs {
position: relative; position: relative;
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
@@ -580,7 +589,11 @@ Card list group
} }
.card { .card {
margin: 0; border-bottom-left-radius: 0;
}
.nav-tabs + .tab-content .card {
border-bottom-left-radius: var(--#{$variable-prefix}card-border-radius);
border-top-left-radius: 0; border-top-left-radius: 0;
} }
} }