Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-10 21:32:22 +04:00
Code Issues Projects Releases Wiki Activity

dark mode fixes, fonts unify, colors unify (#1314)

Browse Source
This commit is contained in:
Paweł Kuna
2022-10-17 13:04:16 +02:00
committed by GitHub
parent d34b8c5eb7
commit bb15f480ce
42 changed files with 201 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_includes/ui/chart.html
+4
View File
@@ -112,6 +112,10 @@
{% endif %}
{% endif %}
tooltip: {
theme: 'dark'
},
grid: {
{% unless data.sparkline %}
padding: {
src/pages/_includes/ui/nav.html
+1 -1
View File
@@ -6,7 +6,7 @@
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include ui/icon.html icon="star" class="me-1" %}
{% include ui/icon.html icon="star" class="nav-link-icon" %}
Link
</a>
</li>
src/pages/cards.html
+1 -1
View File
@@ -106,7 +106,7 @@ menu: base.cards.base
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-primary">
<div class="card bg-primary text-primary-fg">
<div class="card-stamp">
<div class="card-stamp-icon bg-white text-primary">
{% include ui/icon.html icon="star" %}
src/scss/_utilities.scss
+2 -2
View File
@@ -1,8 +1,8 @@
$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
$border-values: (
null: $border-width solid $border-color-translucent,
wide: $border-width-wide solid $border-color-translucent,
null: $border-width var(--#{$prefix}border-style) $border-color-translucent,
wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
0: 0,
);
src/scss/_variables.scss
+40 -27
View File
@@ -37,8 +37,6 @@ $font-size-500: 1.75rem !default;
$font-size-600: 2rem !default;
$font-size-700: 2.5rem !default;
$line-height-100: 1rem !default;
$line-height-200: 1.25rem !default;
$line-height-300: 1.5rem !default;
@@ -47,8 +45,6 @@ $line-height-500: 2rem !default;
$line-height-600: 2.5rem !default;
$line-height-700: 3rem !default;
$font-size-base: .875rem !default;
$body-letter-spacing: 0 !default;
@@ -57,7 +53,7 @@ $font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;
$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
$headings-font-weight: var(--#{$prefix}font-weight-medium) !default;
$font-weights: (
light: $font-weight-light,
@@ -71,25 +67,25 @@ $line-height-base: divide(1.25rem, $font-size-base) !default;
$line-height-sm: divide(1rem, $font-size-base) !default;
$line-height-lg: divide(1.5rem, $font-size-base) !default;
$h1-font-size: divide(24rem, 16) !default;
$h1-line-height: divide(2rem, $h1-font-size) !default;
$h1-font-size: 1.5rem !default;
$h1-line-height: 2rem !default;
$h2-font-size: divide(20rem, 16) !default;
$h2-line-height: divide(1.75rem, $h2-font-size) !default;
$h2-font-size: 1.25rem !default;
$h2-line-height: 1.75rem !default;
$h3-font-size: divide(16rem, 16) !default;
$h3-line-height: divide(1.5rem, $h3-font-size) !default;
$h3-font-size: 1rem !default;
$h3-line-height: 1.5rem !default;
$h4-font-size: $font-size-base !default;
$h4-line-height: divide(1.25rem, $h4-font-size) !default;
$h4-font-size: .875rem !default;
$h4-line-height: 1.25rem !default;
$h5-font-size: divide(12rem, 16) !default;
$h5-line-height: divide(1rem, $h5-font-size) !default;
$h5-font-size: .75rem !default;
$h5-line-height: 1rem !default;
$h6-font-size: divide(10rem, 16) !default;
$h6-line-height: divide(1rem, $h6-font-size) !default;
$h6-font-size: .625rem !default;
$h6-line-height: 1rem !default;
$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
$small-font-size: 85.714285% !default;
$font-sizes: (
h1: $h1-font-size,
@@ -190,9 +186,12 @@ $border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default
$border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
$border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
$active-bg: var(--#{$prefix}gray-100) !default;
$hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
$disabled-bg: var(--#{$prefix}gray-100) !default;
$disabled-color: var(--#{$prefix}gray-300) !default;
$link-color: var(--#{$prefix}primary) !default;
$link-hover-color: var(--#{$prefix}primary-darken) !default;
@@ -267,7 +266,7 @@ $theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors)
// Dark mode
$dark-mode-darken: darken($dark, 2%) !default;
$dark-mode-lighten: lighten($dark, 2%) !default;
$dark-mode-border-color: lighten($dark, 8%) !default;
$dark-mode-border-color: lighten($dark, 4%) !default;
$dark-mode-border-color-light: lighten($dark, 4%) !default;
$dark-mode-text: $light;
@@ -292,6 +291,11 @@ $code-bg: var(--#{$prefix}gray-100) !default;
$pre-padding: 1rem !default;
$pre-bg: $code-bg !default;
$kbd-padding-y: 2px !default;
$kbd-color: var(--#{$prefix}muted) !default;
$kbd-bg: transparent !default;
$kbd-border-radius: var(--#{$prefix}border-radius) !default;
// Avatars
$avatar-size: 2.5rem !default;
$avatar-sizes: (
@@ -464,7 +468,7 @@ $card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
$card-bg: var(--#{$prefix}bg-surface) !default;
$card-bg-hover: $white !default;
$card-color: var(--#{$prefix}bg-surface) !default;
$card-color: inherit !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color) !default;
@@ -524,6 +528,9 @@ $dropdown-scrollable-height: 13rem !default;
$dropdown-link-active-color: var(--#{$prefix}primary) !default;
$dropdown-link-active-bg: $active-bg !default;
//tooltip
$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
$tooltip-color: var(--#{$prefix}white) !default;
//loader
$loader-size: 2.5rem !default;
@@ -566,7 +573,8 @@ $modal-sm: 380px !default;
//nav
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: .75rem !default;
$nav-link-color: inherit !default;
$nav-link-color: var(--#{$prefix}muted) !default;
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
$nav-link-icon-size: $icon-size !default;
$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
@@ -580,6 +588,11 @@ $nav-bordered-link-active-border-color: var(--#{$prefix}primary) !default;
$nav-bordered-link-active-border-width: 2 * $border-width !default;
$nav-bordered-margin-x: 1.25rem !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
//navbar
$navbar-height: 3.5rem !default;
@@ -591,12 +604,12 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
$navbar-light-color: var(--#{$prefix}body-color) !default;
$navbar-light-brand-color: var(--#{$prefix}body-color) !default;
$navbar-light-active-color: var(--#{$prefix}body-color)color !default;
$navbar-light-disabled-color: rgba($body-color, .3) !default;
$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
$navbar-dark-brand-color: $white !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .3) !default;
$navbar-dark-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-brand-padding-y: $nav-link-padding-y !default;
$navbar-brand-image-height: 2rem !default;
@@ -636,7 +649,7 @@ $pagination-padding-x: .25rem !default;
$pagination-color: var(--#{$prefix}muted) !default;
$pagination-bg: transparent !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-color: rgba($text-muted, .5) !default;
$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
$pagination-active-bg: var(--#{$prefix}primary) !default;
$pagination-active-border-color: var(--#{$prefix}primary) !default;
@@ -715,7 +728,7 @@ $form-check-margin-bottom: .5rem !default;
$form-check-input-width: 1rem !default;
$form-check-padding-start: $form-check-input-width + .5rem !default;
$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
$form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color-translucent !default;
$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
$form-check-input-checked-bg-size: 1rem !default;
$form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
@@ -740,7 +753,7 @@ $form-switch-bg-size: auto !default;
$form-range-track-height: .25rem !default;
$form-range-track-bg: var(--#{$prefix}border-color) !default;
$form-range-thumb-border: 2px solid $white !default;
$form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
$form-range-thumb-bg: var(--#{$prefix}primary) !default;
$form-range-thumb-height: 1rem !default;
$form-range-thumb-focus-box-shadow-width: .125rem !default;
src/scss/demo.scss
+3 -3
View File
@@ -85,8 +85,8 @@ $demo-icon-size: 4rem;
aspect-ratio: 1;
text-align: center;
padding: .5rem;
border-right: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
color: inherit;
cursor: pointer;
@@ -121,7 +121,7 @@ $demo-icon-size: 4rem;
height: 3rem;
width: 3rem;
position: relative;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
box-shadow: $shadow;
&-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
src/scss/demo/_examples.scss
+2 -2
View File
@@ -1,7 +1,7 @@
.example {
padding: 2rem;
margin: 1rem 0 2rem;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: 3px 3px 0 0;
position: relative;
@@ -37,7 +37,7 @@
.example-code {
margin: 2rem 0;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-top: none;
pre {
src/scss/demo/_highlight.scss
+2 -2
View File
@@ -58,7 +58,7 @@ pre.highlight,
.gd {
background-color: #fcc;
border: var(--#{$prefix}border-width) solid #c00
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) #c00
}
.ge {
@@ -71,7 +71,7 @@ pre.highlight,
.gi {
background-color: #cfc;
border: var(--#{$prefix}border-width) solid #0c0
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) #0c0
}
.gl {
src/scss/layout/_core.scss
+1 -1
View File
@@ -50,7 +50,7 @@ body {
color: $body-color;
@include media-breakpoint-up(md) {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
background: var(--#{$prefix}body-bg);
}
src/scss/layout/_dark.scss
+2 -11
View File
@@ -14,12 +14,14 @@ body:not(.theme-dark) .hide-theme-light {
& {
--#{$prefix}body-color: #{$dark-mode-text};
--#{$prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
--#{$prefix}muted: rgba(153, 159, 164, 1);
--#{$prefix}body-bg: #{$dark-mode-darken};
--#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
--#{$prefix}bg-forms: #{$dark-mode-darken};
--#{$prefix}bg-surface: #{$dark};
--#{$prefix}bg-surface-dark: #{$dark-mode-darken};
--#{$prefix}bg-surface-secondary: #{$dark-mode-darken};
--#{$prefix}card-bg: #{$dark-mode-darken};
@@ -148,17 +150,6 @@ body:not(.theme-dark) .hide-theme-light {
color: inherit !important;
}
.apexcharts-tooltip {
background: $dark !important;
border: var(--#{$prefix}border-width) solid $dark-mode-border-color !important;
box-shadow: 2px 2px 6px -4px $dark-mode-darken !important;
.apexcharts-tooltip-title {
background: $dark !important;
border-bottom: var(--#{$prefix}border-width) solid $dark-mode-border-color !important;
}
}
.navbar-brand-autodark {
@include autodark-image;
}
src/scss/layout/_footer.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.footer {
border-top: var(--#{$prefix}border-width) solid $footer-border-color;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
background-color: $footer-bg;
padding: $footer-padding-y 0;
color: $footer-color;
src/scss/layout/_navbar.scss
+1 -1
View File
@@ -228,7 +228,7 @@ Navbar
left: 0;
right: 0;
bottom: -.25rem;
border: 0 solid var(--#{$prefix}navbar-active-border-color);
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
border-bottom-width: 2px;
}
}
src/scss/layout/_page.scss
+2 -2
View File
@@ -34,7 +34,7 @@
.page-body-card {
background: var(--#{$prefix}bg-surface);
border-top: var(--#{$prefix}border-width) solid $card-border-color;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
padding: $content-padding-y 0;
margin-bottom: 0;
flex: 1;
@@ -85,7 +85,7 @@
}
.page-header-border {
border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding: $content-padding-y 0;
margin: 0 !important;
background-color: var(--#{$prefix}bg-surface);
src/scss/layout/_root.scss
+4
View File
@@ -19,7 +19,11 @@
--#{$prefix}border-color-light: #{$border-color-light};
--#{$prefix}icon-color: #{$icon-color};
--#{$prefix}active-bg: #{$active-bg};
--#{$prefix}disabled-bg: #{$disabled-bg};
--#{$prefix}disabled-color: #{$disabled-color};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}code-bg: #{$code-bg};
src/scss/ui/_alerts.scss
+2 -2
View File
@@ -1,8 +1,8 @@
.alert {
--#{$prefix}alert-color: #{$text-muted};
background: $white;
border: $alert-border-width solid $alert-border-color;
border-left: .25rem solid var(--#{$prefix}alert-color);
border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
box-shadow: $alert-shadow;
>:last-child {
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, var(--#{$prefix}bg-surface));
box-shadow: 0 0 0 2px 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
}
}
src/scss/ui/_badges.scss
+2 -2
View File
@@ -4,7 +4,7 @@
background: $gray-500;
overflow: hidden;
user-select: none;
border: var(--#{$prefix}border-width) solid transparent;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
font-weight: $headings-font-weight;
letter-spacing: .04em;
@@ -49,7 +49,7 @@
// bordered
.badge-outline {
background-color: transparent;
border: var(--#{$prefix}border-width) solid currentColor;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor;
}
.badge-pill {
src/scss/ui/_buttons.scss
+1 -1
View File
@@ -176,7 +176,7 @@
content: '';
display: inline-block;
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
border-right-color: transparent;
border-radius: $border-radius-pill;
color: var(--#{$prefix}btn-color);
src/scss/ui/_calendars.scss
+2 -2
View File
@@ -1,7 +1,7 @@
.calendar {
display: block;
font-size: $font-size-sm;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
}
@@ -52,7 +52,7 @@
vertical-align: middle;
cursor: pointer;
background: 0 0;
border: var(--#{$prefix}border-width) solid transparent;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
border-radius: $border-radius-pill;
outline: 0;
@include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
src/scss/ui/_cards.scss
+33 -48
View File
@@ -1,12 +1,4 @@
.card {
--#{$prefix}card-border-radius: var(--#{$prefix}border-radius);
--#{$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, 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);
@media print {
@@ -39,12 +31,12 @@
// Card stamp
.card-stamp {
--stamp-size: 7rem;
--#{$prefix}stamp-size: 7rem;
position: absolute;
top: 0;
right: 0;
width: calc(var(--stamp-size) * 1);
height: calc(var(--stamp-size) * 1);
width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1);
max-height: 100%;
border-top-right-radius: $border-radius;
opacity: $card-stamp-opacity;
@@ -53,7 +45,7 @@
}
.card-stamp-lg {
--stamp-size: 13rem;
--#{$prefix}stamp-size: 13rem;
}
.card-stamp-icon {
@@ -63,18 +55,18 @@
align-items: center;
justify-content: center;
border-radius: $border-radius-pill;
width: calc(var(--stamp-size) * 1);
height: calc(var(--stamp-size) * 1);
width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1);
position: relative;
top: calc(var(--stamp-size) * -.25);
right: calc(var(--stamp-size) * -.25);
font-size: calc(var(--stamp-size) * .75);
top: calc(var(--#{$prefix}stamp-size) * -.25);
right: calc(var(--#{$prefix}stamp-size) * -.25);
font-size: calc(var(--#{$prefix}stamp-size) * .75);
transform: rotate(10deg);
.icon {
stroke-width: 2;
width: calc(var(--stamp-size) * .75);
height: calc(var(--stamp-size) * .75);
width: calc(var(--#{$prefix}stamp-size) * .75);
height: calc(var(--#{$prefix}stamp-size) * .75);
}
}
@@ -109,20 +101,8 @@
}
.card-active {
position: relative;
background-color: rgba(var(--#{$prefix}primary-rgb), .03);
z-index: 1;
&:before {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
content: "";
border: var(--#{$prefix}border-width) solid var(--#{$prefix}primary);
border-radius: inherit;
}
--#{$prefix}card-border-color: var(--#{$prefix}primary);
--#{$prefix}card-bg: var(--#{$prefix}active-bg);
}
.card-btn {
@@ -132,7 +112,7 @@
padding: $card-spacer-y $card-spacer-x;
text-align: center;
@include transition(background $transition-time);
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
flex: 1;
color: inherit;
font-weight: var(--#{$prefix}font-weight-medium);
@@ -143,22 +123,26 @@
}
& + & {
border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
}
/**
Stacked card
*/
.card-stacked {
--#{$prefix}card-stacked-offset: .25rem;
position: relative;
&:after {
position: absolute;
top: -5px;
right: 5px;
left: 5px;
height: 5px;
top: calc(-1 * var(--#{$prefix}card-stacked-offset));
right: var(--#{$prefix}card-stacked-offset);
left: var(--#{$prefix}card-stacked-offset);
height: var(--#{$prefix}card-stacked-offset);
content: "";
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) solid var(--#{$prefix}card-border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
}
}
@@ -326,6 +310,8 @@
}
.card-body {
position: relative;
> :last-child {
margin-bottom: 0;
}
@@ -355,7 +341,7 @@
}
& + & {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
}
@@ -448,7 +434,7 @@ Card table
}
.card-body + & {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}table-border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
}
}
@@ -493,7 +479,7 @@ Card list group
*/
.card-list-group {
.card-body + & {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
.list-group-item {
@@ -521,9 +507,8 @@ Card list group
border-bottom: 0;
.nav-link {
color: $text-muted;
background: $card-cap-bg;
border: $card-border-width solid $card-border-color;
border: $card-border-width var(--#{$prefix}border-style) $card-border-color;
&.active,
&:active,
@@ -553,7 +538,7 @@ Card list group
}
+ .nav-item {
margin-left: -1px;
margin-left: calc(-1 * #{$card-border-width});
}
}
}
@@ -570,11 +555,11 @@ Card list group
}
.nav-item {
margin-top: -$card-border-width;
margin-top: calc(-1 * #{$card-border-width});
margin-bottom: 0;
.nav-link {
border-bottom: $card-border-width solid $card-border-color;
border-bottom: $card-border-width var(--#{$prefix}border-style) $card-border-color;
border-radius: 0 0 $card-border-radius $card-border-radius;
}
src/scss/ui/_carousel.scss
+3 -3
View File
@@ -13,8 +13,8 @@
width: $carousel-indicator-height;
height: $carousel-indicator-width;
border: 0;
border-left: $carousel-indicator-hit-area-height solid transparent;
border-right: $carousel-indicator-hit-area-height solid transparent;
border-left: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
border-right: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
}
}
@@ -23,7 +23,7 @@
width: $carousel-indicator-dot-width;
height: $carousel-indicator-dot-width;
border-radius: $border-radius-pill;
border: $carousel-indicator-hit-area-height solid transparent;
border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
margin: 0;
}
}
src/scss/ui/_empty.scss
+1 -1
View File
@@ -60,6 +60,6 @@
.empty-bordered {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
}
src/scss/ui/_flags.scss
+1 -1
View File
@@ -24,7 +24,7 @@ $countries: (
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: $flag-border-size solid $flag-border-color;
border: $flag-border-size var(--#{$prefix}border-style) $flag-border-color;
border-radius: $flag-border-radius;
}
src/scss/ui/_forms.scss
+1 -1
View File
@@ -140,7 +140,7 @@ Form control
padding: 1rem;
margin-bottom: 1rem;
background: var(--#{$prefix}body-bg);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
}
src/scss/ui/_grid.scss
+3 -3
View File
@@ -3,7 +3,7 @@
}
.col-separator {
border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
%container-common {
@@ -90,7 +90,7 @@
.divide-y#{$name-prefixed} {
> :not(template) ~ :not(template) {
border-top: var(--#{$prefix}border-width) solid $border-color-translucent !important;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
}
> :not(template):not(:first-child) {
@@ -104,7 +104,7 @@
.divide-x#{$name-prefixed} {
> :not(template) ~ :not(template) {
border-left: var(--#{$prefix}border-width) solid $border-color-translucent !important;
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
}
> :not(template):not(:first-child) {
src/scss/ui/_lists.scss
+3 -3
View File
@@ -11,7 +11,7 @@
line-height: 1;
text-transform: uppercase;
color: $list-group-header-color;
border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
.list-group-flush > & {
&:last-child {
@@ -48,7 +48,7 @@
.list-bordered {
.list-item {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
margin-top: -1px;
&:first-child {
@@ -203,7 +203,7 @@ Timeline
}
& + & {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
}
src/scss/ui/_modals.scss
+1 -1
View File
@@ -19,7 +19,7 @@
}
& + & {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
}
src/scss/ui/_nav.scss
+3 -3
View File
@@ -7,7 +7,7 @@
.nav {
margin-left: 1.25rem;
border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding-left: .5rem;
}
@@ -25,7 +25,7 @@
// Nav bordered
//
.nav-bordered {
border-bottom: $nav-bordered-border-width solid $nav-bordered-border-color;
border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
.nav-item {
+ .nav-item {
@@ -38,7 +38,7 @@
padding-right: 0;
margin: 0 0 (- $nav-bordered-border-width );
border: 0;
border-bottom: $nav-bordered-link-active-border-width solid transparent;
border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
color: $text-muted;
}
src/scss/ui/_offcanvas.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.offcanvas-header {
border-bottom: var(--#{$prefix}border-width) solid $border-color-translucent;
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
}
.offcanvas-footer {
src/scss/ui/_status.scss
+1 -1
View File
@@ -69,7 +69,7 @@
}
.status-lite {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
background: transparent !important;
color: var(--#{$prefix}body-text) !important;
}
src/scss/ui/_steps.scss
+1 -1
View File
@@ -81,7 +81,7 @@
box-sizing: content-box;
display: block;
content: "";
border: 2px solid $card-bg;
border: 2px var(--#{$prefix}border-style) $card-bg;
border-radius: $border-radius-pill;
transform: translateX(-50%);
}
src/scss/ui/_tables.scss
+1 -1
View File
@@ -103,7 +103,7 @@
}
tr {
border-bottom: var(--#{$prefix}border-width) solid $table-border-color;
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
}
.btn {
src/scss/ui/_toasts.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.toast {
background: $white;
border: $alert-border-width solid $alert-border-color;
border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
box-shadow: $alert-shadow;
.toast-header {
src/scss/ui/_type.scss
+33 -19
View File
@@ -29,31 +29,40 @@ h6,
}
}
h1 {
line-height: $h1-line-height;
h1,
.h1 {
font-size: var(--#{$prefix}font-size-h1);
line-height: var(--#{$prefix}line-height-h1);
}
h2 {
line-height: $h2-line-height;
h2,
.h2 {
font-size: var(--#{$prefix}font-size-h2);
line-height: var(--#{$prefix}line-height-h2);
}
h3 {
line-height: $h3-line-height;
h3,
.h3 {
font-size: var(--#{$prefix}font-size-h3);
line-height: var(--#{$prefix}line-height-h3);
}
h4 {
line-height: $h4-line-height;
font-weight: var(--#{$prefix}font-weight-medium);
h4,
.h4 {
font-size: var(--#{$prefix}font-size-h4);
line-height: var(--#{$prefix}line-height-h4);
}
h5 {
line-height: $h5-line-height;
font-weight: var(--#{$prefix}font-weight-medium);
h5,
.h5 {
font-size: var(--#{$prefix}font-size-h5);
line-height: var(--#{$prefix}line-height-h5);
}
h6 {
line-height: $h6-line-height;
font-weight: var(--#{$prefix}font-weight-medium);
h6,
.h6 {
font-size: var(--#{$prefix}font-size-h6);
line-height: var(--#{$prefix}line-height-h6);
}
strong,
@@ -64,7 +73,7 @@ b {
blockquote {
padding-left: 1rem;
border-left: 2px solid var(--#{$prefix}border-color);
border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
p {
margin-bottom: 1rem;
@@ -113,10 +122,15 @@ code {
border-radius: var(--#{$prefix}border-radius);
}
//code {
kbd {
font: inherit;
box-shadow: 0 0 0 1px var(--#{$prefix}border-color), 0 3px 0 0 var(--#{$prefix}bg-surface), 0 3px 0 1px var(--#{$prefix}border-color);
}
//code {
// padding: 2px 4px;
// background: rgba($code-color, .03);
// border: var(--#{$prefix}border-width) solid rgba($code-color, .064);
// border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) rgba($code-color, .064);
// border-radius: var(--#{$prefix}border-radius);
// font-weight: var(--#{$prefix}font-weight-normal);
//}
@@ -132,7 +146,7 @@ code {
// border-radius: var(--#{$prefix}border-radius);
// white-space: pre-wrap;
// background: mix($light, #ffffff, 50%);
// border: var(--#{$prefix}border-width) solid $border-color-translucent;
// border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
// -webkit-font-smoothing: auto;
//
// code {
src/scss/ui/forms/_form-colorinput.scss
+1 -1
View File
@@ -20,7 +20,7 @@ Color Input
width: 1.5rem;
height: 1.5rem;
color: $white;
border: var(--#{$prefix}border-width) solid $input-border-color-translucent;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
src/scss/ui/forms/_form-imagecheck.scss
+2 -2
View File
@@ -18,7 +18,7 @@ Image check
display: block;
margin: 0;
user-select: none;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: 3px;
.form-imagecheck-input:focus ~ & {
@@ -43,7 +43,7 @@ Image check
content: "";
user-select: none;
background: $form-check-input-bg;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: $form-check-input-border-radius;
@include transition(opacity $transition-time);
src/scss/ui/forms/_form-selectgroup.scss
+1 -1
View File
@@ -41,7 +41,7 @@ Select group
text-align: center;
cursor: pointer;
user-select: none;
border: var(--#{$prefix}border-width) solid $input-border-color;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
border-radius: 3px;
@include transition(border-color $transition-time, background $transition-time, color $transition-time);
src/scss/utils/_colors.scss
+4
View File
@@ -14,6 +14,10 @@
.text-#{"" + $color} {
color: var(--#{$prefix}#{$color}) !important;
}
.text-#{"" + $color}-fg {
color: var(--#{$prefix}#{$color}-fg) !important;
}
}
@each $color, $value in $gray-colors {
src/scss/vendor/_apexcharts.scss
Vendored
+26
View File
@@ -1,2 +1,28 @@
.apexcharts-tooltip {
color: $tooltip-color !important;
background: $tooltip-bg !important;
font-size: $tooltip-font-size !important;
padding: .25rem !important;
box-shadow: none !important;
}
.apexcharts-tooltip-title {
background: transparent !important;
border: 0 !important;
margin: 0 !important;
font-weight: var(--#{$prefix}font-weight-bold);
padding: .25rem .5rem !important;
}
.apexcharts-tooltip-y-group {
padding: 2px 0 !important;
}
.apexcharts-tooltip-series-group {
padding: 0 .5rem 0 !important;
}
.apexcharts-tooltip-marker {
width: 10px !important;
height: 10px !important;
}
src/scss/vendor/_jsvectormap.scss
Vendored
+2 -2
View File
@@ -14,7 +14,7 @@
.jvm-series-container .jvm-legend {
background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
min-width: 8rem;
.jvm-legend-inner .jvm-legend-tick {
@@ -29,7 +29,7 @@
}
.jvm-zoom-btn {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
color: var(--#{$prefix}body-color);
padding: 0;
src/scss/vendor/_litepicker.scss
Vendored
+1 -1
View File
@@ -18,7 +18,7 @@
}
.container__main {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
box-shadow: none;
}
src/scss/vendor/_tinymce.scss
Vendored
+3 -3
View File
@@ -1,5 +1,5 @@
.tox-tinymce {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
border-radius: $border-radius !important;
font-family: var(--#{$prefix}font-sans-serif) !important;
}
@@ -10,7 +10,7 @@
.tox:not(.tox-tinymce-inline) {
.tox-editor-header {
border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
box-shadow: none !important;
padding: 0 !important;
}
@@ -21,7 +21,7 @@
}
.tox-statusbar {
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
}
.tox .tox-toolbar,