{% include ui/icon.html icon="star" %}
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index 256fad217..b9aec61a2 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -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,
);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ca23bcd1b..65b04e11d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -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;
diff --git a/src/scss/demo.scss b/src/scss/demo.scss
index c4b3ea73f..a83e073f5 100644
--- a/src/scss/demo.scss
+++ b/src/scss/demo.scss
@@ -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%); }
diff --git a/src/scss/demo/_examples.scss b/src/scss/demo/_examples.scss
index 0c1f51dfd..f9b47fb6d 100644
--- a/src/scss/demo/_examples.scss
+++ b/src/scss/demo/_examples.scss
@@ -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 {
diff --git a/src/scss/demo/_highlight.scss b/src/scss/demo/_highlight.scss
index b54a81978..45b7214d2 100644
--- a/src/scss/demo/_highlight.scss
+++ b/src/scss/demo/_highlight.scss
@@ -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 {
diff --git a/src/scss/layout/_core.scss b/src/scss/layout/_core.scss
index 681f4f7bb..0c66889e2 100644
--- a/src/scss/layout/_core.scss
+++ b/src/scss/layout/_core.scss
@@ -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);
}
diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
index 7822a861c..0cc4c3053 100644
--- a/src/scss/layout/_dark.scss
+++ b/src/scss/layout/_dark.scss
@@ -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;
}
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
index 09b3459cb..41f502f2f 100644
--- a/src/scss/layout/_footer.scss
+++ b/src/scss/layout/_footer.scss
@@ -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;
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index a3f728b3c..0bcbe4d71 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -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;
}
}
diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss
index 784a31e72..888514b00 100644
--- a/src/scss/layout/_page.scss
+++ b/src/scss/layout/_page.scss
@@ -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);
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 91876aaa0..ea43b9ebc 100644
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -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};
diff --git a/src/scss/ui/_alerts.scss b/src/scss/ui/_alerts.scss
index 26cae4f71..6229acbef 100644
--- a/src/scss/ui/_alerts.scss
+++ b/src/scss/ui/_alerts.scss
@@ -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 {
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index 062fd0ce2..1aaa249c1 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -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)));
}
}
diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss
index 60b048918..7883ee890 100644
--- a/src/scss/ui/_badges.scss
+++ b/src/scss/ui/_badges.scss
@@ -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 {
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index b714e8cf9..0151633d5 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -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);
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index 9e6fcde4f..8d8f695e1 100644
--- a/src/scss/ui/_calendars.scss
+++ b/src/scss/ui/_calendars.scss
@@ -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);
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index 55b7b1980..3aa84ea42 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -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;
}
diff --git a/src/scss/ui/_carousel.scss b/src/scss/ui/_carousel.scss
index b02869dd0..bf397ea1e 100644
--- a/src/scss/ui/_carousel.scss
+++ b/src/scss/ui/_carousel.scss
@@ -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;
}
}
diff --git a/src/scss/ui/_empty.scss b/src/scss/ui/_empty.scss
index bd23b1558..cb7339b28 100644
--- a/src/scss/ui/_empty.scss
+++ b/src/scss/ui/_empty.scss
@@ -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);
}
diff --git a/src/scss/ui/_flags.scss b/src/scss/ui/_flags.scss
index d400441c0..252ad650a 100644
--- a/src/scss/ui/_flags.scss
+++ b/src/scss/ui/_flags.scss
@@ -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;
}
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index a12c2bc51..d4ea57ff1 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -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);
}
diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss
index 4251c7992..b26ccf281 100644
--- a/src/scss/ui/_grid.scss
+++ b/src/scss/ui/_grid.scss
@@ -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) {
diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
index 7347a505d..f8040c4d7 100644
--- a/src/scss/ui/_lists.scss
+++ b/src/scss/ui/_lists.scss
@@ -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);
}
}
diff --git a/src/scss/ui/_modals.scss b/src/scss/ui/_modals.scss
index 8fc28bded..5aef5269f 100644
--- a/src/scss/ui/_modals.scss
+++ b/src/scss/ui/_modals.scss
@@ -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);
}
}
diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss
index f5468b637..ccdb66103 100644
--- a/src/scss/ui/_nav.scss
+++ b/src/scss/ui/_nav.scss
@@ -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;
}
diff --git a/src/scss/ui/_offcanvas.scss b/src/scss/ui/_offcanvas.scss
index aa9516413..2c5444e1d 100644
--- a/src/scss/ui/_offcanvas.scss
+++ b/src/scss/ui/_offcanvas.scss
@@ -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 {
diff --git a/src/scss/ui/_status.scss b/src/scss/ui/_status.scss
index d7a48c754..fa67892db 100644
--- a/src/scss/ui/_status.scss
+++ b/src/scss/ui/_status.scss
@@ -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;
}
diff --git a/src/scss/ui/_steps.scss b/src/scss/ui/_steps.scss
index ccab4341b..4af755bab 100644
--- a/src/scss/ui/_steps.scss
+++ b/src/scss/ui/_steps.scss
@@ -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%);
}
diff --git a/src/scss/ui/_tables.scss b/src/scss/ui/_tables.scss
index 96b3b8ec0..6f70ad604 100644
--- a/src/scss/ui/_tables.scss
+++ b/src/scss/ui/_tables.scss
@@ -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 {
diff --git a/src/scss/ui/_toasts.scss b/src/scss/ui/_toasts.scss
index 9272a0b97..d369bad4f 100644
--- a/src/scss/ui/_toasts.scss
+++ b/src/scss/ui/_toasts.scss
@@ -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 {
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index c348ee001..daee8cd80 100644
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -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 {
diff --git a/src/scss/ui/forms/_form-colorinput.scss b/src/scss/ui/forms/_form-colorinput.scss
index cf7e8021f..63b363d3b 100644
--- a/src/scss/ui/forms/_form-colorinput.scss
+++ b/src/scss/ui/forms/_form-colorinput.scss
@@ -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);
diff --git a/src/scss/ui/forms/_form-imagecheck.scss b/src/scss/ui/forms/_form-imagecheck.scss
index e9e71b3e4..17190201e 100644
--- a/src/scss/ui/forms/_form-imagecheck.scss
+++ b/src/scss/ui/forms/_form-imagecheck.scss
@@ -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);
diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss
index ad9a70e57..09bf1820b 100644
--- a/src/scss/ui/forms/_form-selectgroup.scss
+++ b/src/scss/ui/forms/_form-selectgroup.scss
@@ -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);
diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index 2ba7f4131..cb3c9398d 100644
--- a/src/scss/utils/_colors.scss
+++ b/src/scss/utils/_colors.scss
@@ -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 {
diff --git a/src/scss/vendor/_apexcharts.scss b/src/scss/vendor/_apexcharts.scss
index 95eebbd93..042839462 100644
--- a/src/scss/vendor/_apexcharts.scss
+++ b/src/scss/vendor/_apexcharts.scss
@@ -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;
}
\ No newline at end of file
diff --git a/src/scss/vendor/_jsvectormap.scss b/src/scss/vendor/_jsvectormap.scss
index 289ab6993..8cdf1dc66 100644
--- a/src/scss/vendor/_jsvectormap.scss
+++ b/src/scss/vendor/_jsvectormap.scss
@@ -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;
diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss
index bca478a7c..c0c9796f0 100644
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
@@ -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;
}
diff --git a/src/scss/vendor/_tinymce.scss b/src/scss/vendor/_tinymce.scss
index 251aa8ed7..8f3ea3d69 100644
--- a/src/scss/vendor/_tinymce.scss
+++ b/src/scss/vendor/_tinymce.scss
@@ -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,