@tabler/core 1.0.0-beta14 → 1.0.0-beta16

package/src/scss/ui/_buttons.scss

@@ -6,9 +6,12 @@
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
   --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-bg};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
 
   display: inline-flex;
   align-items: center;
@@ -38,6 +41,12 @@
   .badge {
     top: auto;
   }
+
+  .btn-check + &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
+  }
 }
 
 .btn-link {
@@ -96,9 +105,23 @@
   }
 }
 
-@each $color, $value in $theme-colors {
-  .btn-ghost-#{$color} {
-    @include button-ghost-variant($value);
+@each $name, $color in $theme-colors {
+  .btn-ghost-#{$name} {
+    --#{$prefix}btn-color: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-fg);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$name}-fg);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-disabled-bg: transparent;
+    --#{$prefix}btn-disabled-border-color: transparent;
+    --#{$prefix}gradient: none;
+    --#{$prefix}btn-box-shadow: none;
   }
 }
 
@@ -150,14 +173,7 @@
 // Button list
 //
 .btn-list {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: -.5rem !important;
-  margin-right: -.5rem;
-
-  > * {
-    margin: 0 .5rem .5rem 0 !important;
-  }
+  @include elements-list;
 }
 
 //
@@ -207,13 +223,14 @@
 .btn-action {
   padding: 0;
   border: 0;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   display: inline-flex;
   width: 2rem;
   height: 2rem;
   align-items: center;
   justify-content: center;
   border-radius: var(--#{$prefix}border-radius);
+  background: transparent;
 
   &:after {
     content: none;
@@ -226,8 +243,8 @@
 
   &:hover,
   &.show {
-    color: $body-color;
-    background: $body-bg;
+    color: var(--#{$prefix}body-color);
+    background: var(--#{$prefix}active-bg);
   }
 
   &.show {

package/src/scss/ui/_calendars.scss

@@ -24,7 +24,7 @@
 }
 
 .calendar-header {
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 .calendar-date {

package/src/scss/ui/_cards.scss

@@ -276,7 +276,7 @@ Stacked card
 }
 
 .card-meta {
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 .card-title {
@@ -298,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 & {
@@ -365,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,29 +73,13 @@ Form control
 
   &:disabled,
   &.disabled {
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
     user-select: none;
   }
 
   &[size] {
     width: auto;
   }
-
-  &[type="number"] {
-    &::-webkit-inner-spin-button {
-      opacity: 1;
-      cursor: pointer;
-      height: subtract($input-height, 1px);
-      margin: 0 (-$input-padding-x) 0 0;
-    }
-
-    &::-moz-inner-spin-button {
-      opacity: 1;
-      cursor: pointer;
-      height: subtract($input-height, 1px);
-      margin: 0 (-$input-padding-x) 0 0;
-    }
-  }
 }
 
 .form-control-light {
@@ -155,7 +139,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/_images.scss

@@ -1,10 +1,15 @@
 .img-responsive {
+  --#{$prefix}img-responsive-ratio: #{percentage(.75)};
   background: no-repeat center/cover;
-  padding-top: percentage(.75);
+  padding-top: var(--#{$prefix}img-responsive-ratio);
+}
+
+.img-responsive-grid {
+  padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
 }
 
 @each $key, $ratio in $aspect-ratios {
   .img-responsive-#{$key} {
-    padding-top: $ratio;
+    --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }

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,7 +175,7 @@ Timeline
     border: 0;
 
     .icon {
-      color: $text-muted;
+      color: var(--#{$prefix}muted);
     }
 
     &.active {

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

@@ -39,7 +39,7 @@
     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,

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

@@ -1,53 +1,28 @@
-// stylelint-disable declaration-no-important
-
-@mixin step-size($border-width, $dot-size: 1rem) {
-  .step-item {
-    padding-top: add($dot-size, 4px);
-
-    &:after {
-      top: add($dot-size * .5, 2px);
-      height: $border-width;
-    }
-
-    &:before {
-      width: $dot-size;
-      height: $dot-size;
-    }
-  }
-}
-
-@mixin step-color($color) {
-  .step-item {
-    &:after,
-    &:before {
-      color: $white;
-      background: $color;
-    }
-
-    &.active:before {
-      color: inherit;
-      border-color: $color;
-    }
-  }
-}
-
+//
+// Steps
+//
 .steps {
+  --#{$prefix}steps-color: #{$steps-color};
+  --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
+  --#{$prefix}steps-dot-size: .5rem;
+  --#{$prefix}steps-border-width: #{$steps-border-width};
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   padding: 0;
-  margin: 2rem 0;
+  margin: 0;
   list-style: none;
-  @include step-size(2px, .5rem);
-  @include step-color( var(--#{$prefix}primary) );
 }
 
-@each $color, $value in $extra-colors {
-  .steps-#{$color} {
-    @include step-color($value);
+@each $name, $color in $extra-colors {
+  .steps-#{$name} {
+    --#{$prefix}steps-color: var(--#{$prefix}#{$name});
   }
 }
 
+//
+// Step item
+//
 .step-item {
   position: relative;
   flex: 1 1 0;
@@ -56,6 +31,7 @@
   color: inherit;
   text-align: center;
   cursor: default;
+  padding-top: calc(var(--#{$prefix}steps-dot-size));
 
   @at-root a#{&} {
     cursor: pointer;
@@ -65,66 +41,112 @@
     }
   }
 
-  &:not(:first-child):after {
+  &:after,
+  &:before {
+    background: var(--#{$prefix}steps-color);
+  }
+
+  &:not(:last-child):after {
     position: absolute;
-    left: -50%;
+    left: 50%;
     width: 100%;
     content: "";
     transform: translateY(-50%);
   }
 
+  &:after {
+    top: calc(var(--#{$prefix}steps-dot-size) * .5);
+    height: var(--#{$prefix}steps-border-width);
+  }
+
   &:before {
+    content: "";
     position: absolute;
     top: 0;
     left: 50%;
     z-index: 1;
     box-sizing: content-box;
-    display: block;
-    content: "";
-    border: 2px var(--#{$prefix}border-style) $card-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: $border-radius-pill;
     transform: translateX(-50%);
+    color: var(--#{$prefix}white);
+    width: var(--#{$prefix}steps-dot-size);
+    height: var(--#{$prefix}steps-dot-size);
   }
 
   &.active {
     font-weight: var(--#{$prefix}font-weight-bold);
 
-    &:before {
-      background: $card-bg;
+    &:after {
+      background: var(--#{$prefix}steps-inactive-color);
     }
 
     & ~ .step-item {
-      color: $text-muted;
+      color: var(--#{$prefix}disabled-color);
 
       &:after,
       &:before {
-        background: $steps-color-inactive;
-      }
-
-      &:before {
-        color: $text-muted !important;
+        background: var(--#{$prefix}steps-inactive-color);
       }
     }
   }
 }
 
+//
+// Steps counter
+//
 .steps-counter {
+  --#{$prefix}steps-dot-size: 1.5rem;
   counter-reset: steps;
-  @include step-size(2px, 1.5rem);
 
   .step-item {
     counter-increment: steps;
 
     &:before {
-      font-size: $h5-font-size;
-      line-height: 1.5rem;
       content: counter(steps);
     }
+  }
+}
 
-    &.active ~ .step-item {
-      &:before {
-        background: $white;
+//
+// Steps vertical
+//
+.steps-vertical {
+  --#{$prefix}steps-dot-offset: 6px;
+  flex-direction: column;
+
+  &.steps-counter {
+    --#{$prefix}steps-dot-offset: -2px;
+  }
+
+  .step-item {
+    text-align: left;
+    padding-top: 0;
+    padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem);
+    min-height: auto;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+
+    &:before {
+      top: var(--#{$prefix}steps-dot-offset);
+      left: 0;
+      transform: translate(0, 0);
+    }
+
+    &:not(:last-child) {
+      &:after {
+        position: absolute;
+        content: '';
+        transform: translateX(-50%);
+        top: var(--#{$prefix}steps-dot-offset);
+        left: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+        width: var(--#{$prefix}steps-border-width);
+        height: calc(100% + 1rem);
       }
     }
   }
-}
+}