Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-13 23:02:23 +04:00
Code Issues Projects Releases Wiki Activity

card-bg fix, create bg-surface

Browse Source
This commit is contained in:
codecalm
2022-09-18 10:26:15 +02:00
parent 9d411eb88f
commit 46f0a96a43
9 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_includes/ui/map-vector.html
+1 -1
View File
@@ -42,7 +42,7 @@
{% if data.values %}
// -------- Series --------
visualizeData: {
scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
values: {{ data.values }},
},
{% endif %}
src/scss/_variables.scss
+8 -4
View File
@@ -96,9 +96,15 @@ $gray-700: #313c52 !default;
$gray-800: #1d273b !default;
$gray-900: #0f172a !default;
$black: #000000 !default;
$white: #ffffff !default;
$light: $gray-50 !default;
$dark: $gray-800 !default;
$bg-surface: $white !default;
$bg-surface-dark: $dark !default;
$body-bg: $gray-100 !default;
$body-color: $dark !default;
@@ -117,8 +123,6 @@ $lime: #74b816 !default;
$green: #2fb344 !default;
$teal: #0ca678 !default;
$cyan: #17a2b8 !default;
$black: #000000 !default;
$white: #ffffff !default;
$text-muted: mix($body-color, #ffffff, percentage($text-muted-opacity)) !default;
$text-muted-light: mix($body-color, #ffffff, percentage($text-muted-light-opacity)) !default;
@@ -409,9 +413,9 @@ $card-title-spacer-y: 1.25rem !default;
$card-box-shadow: var(--#{$prefix}shadow-card) !default;
$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
$card-bg: #f8fafc !default;
$card-bg: var(--#{$prefix}bg-surface) !default;
$card-bg-hover: $white !default;
$card-color: $dark !default;
$card-color: var(--#{$prefix}bg-surface) !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color) !default;
src/scss/layout/_page.scss
+1 -1
View File
@@ -33,7 +33,7 @@
}
.page-body-card {
background: $card-bg;
background: var(--#{$prefix}bg-surface);
border-top: 1px solid $card-border-color;
padding: $content-padding-y 0;
margin-bottom: 0;
src/scss/layout/_root.scss
+2 -1
View File
@@ -9,7 +9,8 @@
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
}
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}bg-surface: #{$bg-surface};
--#{$prefix}bg-surface-dark: #{$bg-surface-dark};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-light: #{$border-color-light};
src/scss/ui/_avatars.scss
+1 -1
View File
@@ -75,7 +75,7 @@
.avatar-list-stacked {
.avatar {
margin-right: -.5rem !important;
box-shadow: 0 0 0 2px var(--#{$prefix}card-bg);
box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
}
src/scss/ui/_buttons.scss
+2 -2
View File
@@ -56,8 +56,8 @@
// Button color variations
//
.btn-white {
--#{$prefix}btn-bg: var(--#{$prefix}card-bg);
--#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg-hover);
--#{$prefix}btn-bg: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
--#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg-hover, var(--#{$prefix}bg-surface));
}
@each $color, $value in $theme-colors {
src/scss/ui/_cards.scss
+8 -8
View File
@@ -1,10 +1,10 @@
.card {
--#{$prefix}card-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}card-bg: var(--#{$prefix}card-bg);
--#{$prefix}card-color: var(--#{$prefix}card-color);
--#{$prefix}card-bg: var(--#{$prefix}bg-surface);
--#{$prefix}card-color: var(--#{$prefix}body-color);
border: $card-border-width solid $card-border-color;
background: var(--#{$prefix}card-bg, #{$card-bg});
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border-radius: var(--#{$prefix}card-border-radius);
box-shadow: var(--#{$prefix}card-box-shadow);
@include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
@@ -58,7 +58,7 @@
.card-stamp-icon {
background: var(--#{$prefix}muted);
color: var(--#{$prefix}card-bg);
color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
display: flex;
align-items: center;
justify-content: center;
@@ -157,8 +157,8 @@
left: 5px;
height: 5px;
content: "";
background: $card-bg;
border: 1px solid $card-border-color;
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: 1px solid var(--#{$prefix}card-border-color);
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
}
}
@@ -484,7 +484,7 @@ Card avatar
.card-avatar {
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 0 .25rem $card-bg;
box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * .5));
}
@@ -534,7 +534,7 @@ Card list group
&.active {
color: $headings-color;
background: $card-bg;
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border-bottom-color: transparent;
}
}
src/scss/ui/_progress.scss
+1 -1
View File
@@ -68,7 +68,7 @@ Progress bar
.progress-separated {
.progress-bar {
border-right: 2px solid var(--#{$prefix}card-bg, #{$card-bg});
border-right: 2px solid var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
}
src/scss/vendor/_jsvectormap.scss
Vendored
+2 -2
View File
@@ -13,7 +13,7 @@
}
.jvm-series-container .jvm-legend {
background-color: var(--#{$prefix}card-bg);
background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: 1px solid var(--#{$prefix}border-color);
min-width: 8rem;
@@ -30,7 +30,7 @@
.jvm-zoom-btn {
border: 1px solid var(--#{$prefix}border-color);
background: var(--#{$prefix}card-bg);
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
color: var(--#{$prefix}body-color);
padding: 0;
display: flex;