@tabler/core 1.0.0-beta13 → 1.0.0-beta15

package/src/scss/ui/_cards.scss

@@ -201,8 +201,10 @@ Stacked card
 }
 
 .card-header-tabs {
+  background: $card-header-tabs-bg;
   flex: 1;
-  margin: (- $card-spacer-y * .5) (- $card-spacer-x * .5) (- $card-spacer-y );
+  margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
+  padding: calc(var(--#{$prefix}card-cap-padding-y) * .5) calc(var(--#{$prefix}card-cap-padding-x) * .5) 0;
 }
 
 .card-header-pills {
@@ -274,7 +276,7 @@ Stacked card
 }
 
 .card-meta {
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 .card-title {
@@ -296,7 +298,7 @@ Stacked card
 
 .card-subtitle {
   margin-bottom: $card-title-spacer-y;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   font-weight: normal;
 
   .card-header & {
@@ -363,7 +365,7 @@ Card optinos
   display: inline-block;
   min-width: 1rem;
   margin-left: .25rem;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 

package/src/scss/ui/_dropdowns.scss

@@ -26,7 +26,7 @@
   width: $icon-size !important;
   height: $icon-size !important;
   margin-right: .5rem;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   opacity: $text-muted-opacity;
   text-align: center;
 }

package/src/scss/ui/_empty.scss

@@ -17,7 +17,7 @@
   width: 3rem;
   height: 3rem;
   line-height: 1;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 
   svg {
     width: 100%;
@@ -40,7 +40,7 @@
   font-size: 4rem;
   font-weight: var(--#{$prefix}font-weight-light);
   line-height: 1;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 .empty-title {

package/src/scss/ui/_forms.scss

@@ -24,7 +24,7 @@ Form label
 .form-label-description {
   float: right;
   font-weight: var(--#{$prefix}font-weight-normal);
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 /**
@@ -32,7 +32,7 @@ Form hint
  */
 .form-hint {
   display: block;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 
   &:last-child {
     margin-bottom: 0;
@@ -73,7 +73,7 @@ Form control
 
   &:disabled,
   &.disabled {
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
     user-select: none;
   }
 
@@ -155,7 +155,7 @@ Form help
   width: 1.125rem;
   height: 1.125rem;
   font-size: .75rem;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   text-align: center;
   text-decoration: none;
   cursor: pointer;

package/src/scss/ui/_icons.scss

@@ -1,7 +1,11 @@
+//
+// Icon component
+//
 .icon {
-  width: $font-size-base * $line-height-base;
-  height: $font-size-base * $line-height-base;
-  font-size: $font-size-base * $line-height-base;
+  --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
+  width: var(--#{$prefix}icon-size);
+  height: var(--#{$prefix}icon-size);
+  font-size: var(--#{$prefix}icon-size);
   vertical-align: bottom;
 
   @if $icon-stroke-width {
@@ -13,91 +17,56 @@
   }
 }
 
+//
+// Inline icon
+//
 .icon-inline {
-  width: 1rem;
-  height: 1rem;
-  font-size: 1rem;
+  --#{$prefix}icon-size: 1rem;
   vertical-align: -.2rem;
 }
 
+//
+// Filled icon
+//
 .icon-filled {
   fill: currentColor;
 }
 
+//
+// Icon size
+//
 .icon-sm {
-  width: 1rem;
-  height: 1rem;
+  --#{$prefix}icon-size: 1rem;
   stroke-width: 1;
 }
 
 .icon-md {
-  width: 2.5rem;
-  height: 2.5rem;
+  --#{$prefix}icon-size: 2.5rem;
   stroke-width: 1;
 }
 
 .icon-lg {
-  width: 3.5rem;
-  height: 3.5rem;
+  --#{$prefix}icon-size: 3.5rem;
   stroke-width: 1;
 }
 
-@keyframes icon-pulse {
-  from {
-    opacity: 1;
-    transform: scale3d(.8, .8, .8)
-  }
-  50% {
-    transform: scale3d(1, 1, 1);
-    opacity: 1
-  }
-  to {
-    opacity: 1;
-    transform: scale3d(.8, .8, .8)
-  }
-}
-
+//
+// Icons animation
+//
 .icon-pulse {
   transition: all .15s ease 0s;
-  animation: icon-pulse 2s ease infinite;
+  animation: pulse 2s ease infinite;
   animation-fill-mode: both
 }
 
-@keyframes icon-tada {
-  0% {
-    transform: scale3d(1, 1, 1)
-  }
-  10%, 5% {
-    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
-  }
-  15%, 25%, 35%, 45% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
-  }
-  20%, 30%, 40% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
-  }
-  50% {
-    transform: scale3d(1, 1, 1)
-  }
-}
-
 .icon-tada {
   transition: all .15s ease 0s;
-  animation: icon-tada 3s ease infinite;
+  animation: tada 3s ease infinite;
   animation-fill-mode: both
 }
 
-@keyframes icon-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .icon-rotate {
   transition: all .15s ease 0s;
-  animation: icon-rotate 3s linear infinite;
+  animation: rotate-360 3s linear infinite;
   animation-fill-mode: both
 }

package/src/scss/ui/_lists.scss

@@ -91,7 +91,7 @@ Timeline
 .list-timeline-time {
   float: right;
   margin-left: 1rem;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 .list-timeline-icon {
@@ -105,7 +105,7 @@ Timeline
   height: 2.5rem;
   color: $white;
   text-align: center;
-  background: $text-muted;
+  background: var(--#{$prefix}muted);
   border-radius: $border-radius-pill;
 
   .icon {
@@ -134,9 +134,9 @@ Timeline
       left: add(7.5rem, 2px);
       z-index: 1;
       display: block;
-      width: 4px;
+      width: 2px;
       content: "";
-      background-color: $body-bg;
+      background-color: var(--#{$prefix}border-color);
     }
 
     & > li {
@@ -175,13 +175,13 @@ Timeline
     border: 0;
 
     .icon {
-      color: $text-muted;
+      color: var(--#{$prefix}muted);
     }
 
     &.active {
       font-weight: var(--#{$prefix}font-weight-bold);
       color: inherit;
-      background: $active-bg;
+      background: $list-group-active-bg;
 
       .icon {
         color: inherit;

package/src/scss/ui/_loaders.scss

@@ -1,13 +1,3 @@
-@keyframes loader {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .loader {
   position: relative;
   display: block;
@@ -23,13 +13,13 @@
     width: 100%;
     height: 100%;
     content: "";
-    border: 1px solid;
+    border: 1px var(--#{$prefix}border-style);
     border-color: transparent;
     border-top-color: currentColor;
     border-left-color: currentColor;
 
     border-radius: $border-radius-pill;
-    animation: loader .6s linear;
+    animation: rotate-360 .6s linear;
     animation-iteration-count: infinite;
   }
 }

package/src/scss/ui/_modals.scss

@@ -29,7 +29,7 @@
   left: 0;
   right: 0;
   height: $modal-status-size;
-  background: $text-muted;
+  background: var(--#{$prefix}muted);
   border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
 }
 

package/src/scss/ui/_nav.scss

@@ -36,10 +36,10 @@
   .nav-link {
     padding-left: 0;
     padding-right: 0;
-    margin: 0 0 (- $nav-bordered-border-width );
+    margin: 0 0 (- $nav-bordered-border-width);
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
   }
 
   .nav-link.active,
@@ -50,14 +50,6 @@
 
 }
 
-.nav-tabs-alt {
-  .nav-link {
-    font-size: 13px;
-    font-weight: var(--#{$prefix}font-weight-bold);
-    text-transform: uppercase;
-  }
-}
-
 .nav-link {
   display: flex;
   @include transition(color $transition-time);
@@ -89,4 +81,12 @@
     display: block;
     height: 100%;
   }
+}
+
+.nav-fill {
+  .nav-item {
+    .nav-link {
+      justify-content: center;
+    }
+  }
 }

package/src/scss/ui/_pagination.scss

@@ -33,7 +33,7 @@
 .page-item-subtitle {
   margin-bottom: 2px;
   font-size: 12px;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   text-transform: uppercase;
 
   .page-item.disabled & {

package/src/scss/ui/_ribbons.scss

@@ -31,7 +31,7 @@
     height: 0;
     content: "";
     filter: brightness(70%);
-    border: calc(var(--#{$prefix}ribbon-margin) * .5) solid;
+    border: calc(var(--#{$prefix}ribbon-margin) * .5) var(--#{$prefix}border-style);
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;
@@ -115,7 +115,7 @@
     width: 0;
     height: 0;
     content: "";
-    border: 1rem solid;
+    border: 1rem var(--#{$prefix}border-style);
     border-color: inherit;
     border-right-width: 0;
     border-left-color: transparent;

package/src/scss/ui/_steps.scss

@@ -94,7 +94,7 @@
     }
 
     & ~ .step-item {
-      color: $text-muted;
+      color: var(--#{$prefix}muted);
 
       &:after,
       &:before {
@@ -102,7 +102,7 @@
       }
 
       &:before {
-        color: $text-muted !important;
+        color: var(--#{$prefix}muted) !important;
       }
     }
   }

package/src/scss/ui/_type.scss

@@ -123,8 +123,14 @@ 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);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  display: inline-block;
+  box-sizing: border-box;
+  max-width: 100%;
+  font-size: var(--#{$prefix}font-size-h5);
+  font-weight: $kbd-font-weight;
+  line-height: 1;
+  vertical-align: baseline;
 }
 
 img {

package/src/scss/ui/forms/_form-check.scss

@@ -44,7 +44,7 @@ Form check
 
 .form-check-description {
   display: block;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   font-size: $h5-font-size;
   margin-top: .25rem;
 }

package/src/scss/ui/forms/_form-imagecheck.scss

@@ -92,7 +92,7 @@ Image check
 .form-imagecheck-caption {
   padding: .25rem;
   font-size: $font-size-sm;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   text-align: center;
   @include transition(color $transition-time);
 

package/src/scss/ui/forms/_form-selectgroup.scss

@@ -36,7 +36,7 @@ Select group
   padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $input-btn-font-size;
   line-height: $input-line-height;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   background: $form-check-input-bg;
   text-align: center;
   cursor: pointer;

package/src/scss/ui/typo/_hr.scss

@@ -36,7 +36,7 @@ Hr text
   > *:first-child {
     padding-right: .5rem;
     padding-left: 0;
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
   }
 
   &.hr-text-left {

package/src/scss/utils/_colors.scss

@@ -1,5 +1,5 @@
 // All colors
-@each $color, $value in $theme-colors {
+@each $color, $value in map-merge($theme-colors, ( white: $white )) {
   .bg-#{"" + $color} {
     background-color: var(--#{$prefix}#{$color}) !important;
   }

package/src/scss/vendor/_tom-select.scss

@@ -1,4 +1,5 @@
 $select-color-dropdown-border-top: red;
+$input-border-width: 1px;
 
 @import "~tom-select/src/scss/tom-select.bootstrap5.scss";