@tabler/core 1.0.0-beta3 → 1.0.0-beta8

package/src/scss/ui/_grid.scss

@@ -58,14 +58,15 @@
 .row-cards {
   --#{$variable-prefix}gutter-x: #{$cards-grid-gap};
   --#{$variable-prefix}gutter-y: #{$cards-grid-gap};
+  min-width: 0;
 
   .row-cards {
     flex: 1;
   }
 
   @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$variable-prefix}gutter-x: #{$cards-grid-gap / 2};
-    --#{$variable-prefix}gutter-y: #{$cards-grid-gap / 2};
+    --#{$variable-prefix}gutter-x: #{$cards-grid-gap * .5};
+    --#{$variable-prefix}gutter-y: #{$cards-grid-gap * .5};
   }
 }
 
@@ -115,4 +116,17 @@
       padding-right: $size !important;
     }
   }
+}
+
+.divide-y-fill {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > :not(template) {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
 }

package/src/scss/ui/_icons.scss

@@ -16,7 +16,7 @@
 .icon-inline {
   width: 1em;
   height: 1em;
-  font-size: (16/14) * 1em;
+  font-size: divide(16, 14) * 1em;
   vertical-align: -0.2em;
 }
 

package/src/scss/ui/_images.scss

@@ -1,6 +1,6 @@
 .img-responsive {
   background: no-repeat center/cover;
-  padding-top: percentage(3 / 4);
+  padding-top: percentage(.75);
 }
 
 @each $key, $ratio in $aspect-ratios {

package/src/scss/ui/_legend.scss

@@ -1,6 +1,6 @@
 .legend {
   display: inline-block;
-  background: $border-color;
+  background: var(--#{$variable-prefix}border-color-light);
   width: .75em;
   height: .75em;
   border-radius: $border-radius;

package/src/scss/ui/_lists.scss

@@ -11,7 +11,7 @@
   line-height: 1;
   text-transform: uppercase;
   color: $text-muted;
-  border-bottom: 1px solid $list-group-border-color;
+  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -34,7 +34,7 @@
 .list-group-hoverable {
   .list-group-item-actions {
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
   }
 
   .list-group-item:hover .list-group-item-actions,

package/src/scss/ui/_markdown.scss

@@ -2,6 +2,7 @@
 Markdown
  */
 .markdown {
+  font-size: 1rem;
   line-height: $line-height-lg;
 
   > :first-child {

package/src/scss/ui/_modals.scss

@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid var(--#{$variable-prefix}border-color);
   }
 }
 
@@ -44,7 +44,7 @@
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
   color: $headings-color;
-  line-height: (24/18);
+  line-height: $line-height-base;
 }
 
 .modal-footer {

package/src/scss/ui/_nav.scss

@@ -1,7 +1,3 @@
-.nav {
-  margin: 0;
-}
-
 .nav-vertical {
   &,
   .nav {
@@ -11,7 +7,7 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: 1px solid $border-color;
+    border-left: 1px solid var(--#{$variable-prefix}border-color);
     padding-left: .5rem;
   }
 
@@ -63,14 +59,14 @@
 
 .nav-link {
   display: flex;
-  transition: .3s color;
+  @include transition(color $transition-time);
   align-items: center;
 }
 
 .nav-link-toggle {
   margin-left: auto;
   padding: 0 .25rem;
-  transition: .3s transform;
+  @include transition(transform $transition-time);
   @include caret();
 
   &:after {

package/src/scss/ui/_offcanvas.scss

@@ -0,0 +1,21 @@
+.offcanvas {
+  background: var(--#{$variable-prefix}card-bg);
+}
+
+.offcanvas-header {
+  border-bottom: 1px solid $border-color-transparent;
+}
+
+.offcanvas-footer {
+  padding: $offcanvas-padding-y $offcanvas-padding-x;
+}
+
+.offcanvas-title {
+  font-size: $h3-font-size;
+  font-weight: $font-weight-medium;
+  line-height: 1.5rem;
+}
+
+.offcanvas-narrow {
+  width: 20rem;
+}

package/src/scss/ui/_placeholder.scss

@@ -0,0 +1,9 @@
+.placeholder {
+  &:not(.btn):not([class*="bg-"]) {
+    background-color: currentColor !important;
+  }
+
+  &:not(.avatar):not([class*="card-img-"]), {
+    border-radius: $border-radius;
+  }
+}

package/src/scss/ui/_progress.scss

@@ -16,6 +16,7 @@
   width: 100%;
   line-height: $progress-height;
   appearance: none;
+  background: var(--#{$variable-prefix}border-color-light);
 
   &::-webkit-progress-bar {
     background: $gray-100;
@@ -62,6 +63,6 @@
 
 .progress-separated {
   .progress-bar {
-    border-right: 2px solid $white;
+    border-right: 2px solid var(--#{$variable-prefix}card-bg, #{$card-bg});
   }
 }

package/src/scss/ui/_ribbons.scss

@@ -28,14 +28,14 @@
     height: 0;
     content: "";
     filter: brightness(70%);
-    border: ($ribbon-margin / 2) solid;
+    border: ($ribbon-margin * .5) solid;
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;
   }
 
   @if $enable-extra-colors {
-    @each $color, $value in $colors {
+    @each $color, $value in $extra-colors {
       &.bg-#{$color} {
         border-color: $value;
       }

package/src/scss/ui/_status.scss

@@ -0,0 +1,172 @@
+@keyframes status-pulsate-main {
+  40% {
+    transform: scale(1.25, 1.25);
+  }
+  60% {
+    transform: scale(1.25, 1.25);
+  }
+}
+
+@keyframes status-pulsate-secondary {
+  10% {
+    transform: scale(1, 1)
+  }
+  30% {
+    transform: scale(3, 3)
+  }
+  80% {
+    transform: scale(3, 3)
+  }
+  100% {
+    transform: scale(1, 1)
+  }
+}
+
+@keyframes status-pulsate-tertiary {
+  25% {
+    transform: scale(1, 1);
+  }
+  80% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+}
+
+//
+// Status
+//
+.status {
+  --#{$variable-prefix}status-color: #{$text-muted};
+  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: .5rem .75rem;
+  gap: .5rem;
+  color: var(--#{$variable-prefix}status-color);
+  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  font-size: $font-size-base;
+  text-transform: none;
+  letter-spacing: normal;
+  border-radius: $border-radius-pill;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  margin: 0;
+
+  .status-dot {
+    background: var(--#{$variable-prefix}status-color);
+  }
+
+  .icon {
+    font-size: 1.25rem;
+  }
+}
+
+.status-lite {
+  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  background: transparent !important;
+  color: var(--#{$variable-prefix}body-text) !important;
+}
+
+@each $name, $color in theme-colors() {
+  .status-#{$name} {
+    --#{$variable-prefix}status-color: #{$color};
+    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+  }
+}
+
+//
+// Status dot
+//
+.status-dot {
+  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$variable-prefix}status-size: #{$status-dot-size};
+  position: relative;
+  display: inline-block;
+  width: var(--#{$variable-prefix}status-size);
+  height: var(--#{$variable-prefix}status-size);
+  background: var(--#{$variable-prefix}status-dot-color);
+  border-radius: $border-radius-pill;
+}
+
+.status-dot-animated {
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: inherit;
+    border-radius: inherit;
+    opacity: .6;
+    animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
+  }
+}
+
+$btn-colors: $theme-colors;
+
+@if $enable-extra-colors {
+  $btn-colors: map-merge($btn-colors, $extra-colors);
+}
+
+@if $enable-social-colors {
+  $btn-colors: map-merge($btn-colors, $social-colors);
+}
+
+//
+// Status indicator
+//
+.status-indicator {
+  --#{$variable-prefix}status-indicator-size: 2.5rem;
+  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  display: block;
+  position: relative;
+  width: var(--#{$variable-prefix}status-indicator-size);
+  height: var(--#{$variable-prefix}status-indicator-size);
+}
+
+.status-indicator-circle {
+  --#{$variable-prefix}status-circle-size: .75rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: calc(var(--#{$variable-prefix}status-circle-size) / -2) 0 0 calc(var(--#{$variable-prefix}status-circle-size) / -2);
+  width: var(--#{$variable-prefix}status-circle-size);
+  height: var(--#{$variable-prefix}status-circle-size);
+  border-radius: $border-radius-pill;
+  background: var(--#{$variable-prefix}status-color);
+
+  &:nth-child(1) {
+    z-index: 3;
+  }
+
+  &:nth-child(2) {
+    z-index: 2;
+    opacity: .1;
+  }
+
+  &:nth-child(3) {
+    z-index: 1;
+    opacity: .3;
+  }
+}
+
+.status-indicator-animated {
+  .status-indicator-circle {
+    &:nth-child(1) {
+      animation: 2s linear 1s infinite backwards status-pulsate-main;
+    }
+
+    &:nth-child(2) {
+      animation: 2s linear 1s infinite backwards status-pulsate-secondary;
+    }
+
+    &:nth-child(3) {
+      animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
+    }
+  }
+}

package/src/scss/ui/_steps.scss

@@ -5,7 +5,7 @@
     padding-top: add($dot-size, 4px);
 
     &:after {
-      top: add($dot-size / 2, 2px);
+      top: add($dot-size * .5, 2px);
       height: $border-width;
     }
 
@@ -42,7 +42,7 @@
   @include step-color($primary);
 }
 
-@each $color, $value in $colors {
+@each $color, $value in $extra-colors {
   .steps-#{$color} {
     @include step-color($value);
   }

package/src/scss/ui/_switch-icon.scss

@@ -57,7 +57,7 @@
 .switch-icon-fade {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s;
+    @include transition(opacity .5s);
   }
 }
 
@@ -65,7 +65,7 @@
 .switch-icon-scale {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s, transform .0s .5s;
+    @include transition(opacity .5s, transform .0s .5s);
   }
 
   .switch-icon-b {
@@ -75,7 +75,7 @@
   &.active {
     .switch-icon-a,
     .switch-icon-b {
-      transition: opacity .0s, transform .5s;
+      @include transition(opacity .0s, transform .5s);
     }
 
     .switch-icon-b {
@@ -92,7 +92,7 @@
   .switch-icon-b {
     backface-visibility: hidden;
     transform-style: preserve-3d;
-    transition: opacity 0s .2s, transform .4s ease-in-out;
+    @include transition(opacity 0s .2s, transform .4s ease-in-out);
   }
 
   .switch-icon-a {
@@ -127,7 +127,7 @@
 
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .3s, transform .3s;
+    @include transition(opacity $transition-time, transform $transition-time);
   }
 
   .switch-icon-a {

package/src/scss/ui/_tables.scss

@@ -12,11 +12,13 @@
       }
     }
   }
+
+  >:not(:first-child) {
+    border-top-width: $table-border-width;
+  }
 }
 
 .table-responsive {
-  margin-bottom: $spacer;
-
   .table {
     margin-bottom: 0;
   }

package/src/scss/ui/_type.scss

@@ -105,7 +105,7 @@ code {
 pre {
   padding: 1rem;
   overflow: auto;
-  font-size: $code-font-size;
+  font-size: $h5-font-size;;
   hyphens: none;
   line-height: $code-line-height;
   tab-size: 3;

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

@@ -11,10 +11,10 @@ Form check
 
 .form-check-input {
   background-size: $form-check-input-width;
-  margin-top: ($form-check-min-height - $form-check-input-width) / 2;
+  margin-top: ($form-check-min-height - $form-check-input-width) * .5;
 
   .form-switch & {
-    transition: .3s background-color, .3s background-position;
+    @include transition(background-color$transition-time, background-position $transition-time);
   }
 }
 
@@ -52,7 +52,7 @@ Form switch
 .form-switch {
   .form-check-input {
     height: $form-switch-height;
-    margin-top: ($form-check-min-height - $form-switch-height) / 2;
+    margin-top: ($form-check-min-height - $form-switch-height) * .5;
   }
 }
 

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

@@ -34,7 +34,7 @@ Color Input
     background: no-repeat center center/$form-check-input-checked-bg-size;
     background-image: escape-svg($form-check-input-checked-bg-image);
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-colorinput-input:checked ~ & {
       opacity: 1;

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

@@ -18,7 +18,7 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: 1px solid $border-color;
+  border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
@@ -27,7 +27,7 @@ Image check
   }
 
   .form-imagecheck-input:checked ~ & {
-    border-color: $border-color;
+    border-color: $primary;
   }
 
   &:before {
@@ -45,7 +45,7 @@ Image check
     background: $white;
     border: 1px solid $border-color;
     border-radius: 3px;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
       background-color: $form-check-input-checked-bg-color;
@@ -62,7 +62,7 @@ Image check
   max-width: 100%;
   display: block;
   opacity: .64;
-  transition: .3s opacity;
+  @include transition(opacity $transition-time);
 
   &:first-child {
     border-top-left-radius: 2px;
@@ -86,7 +86,7 @@ Image check
   font-size: $font-size-sm;
   color: $text-muted;
   text-align: center;
-  transition: .3s color;
+  @include transition(color $transition-time);
 
   .form-imagecheck:hover &,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure &,

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

@@ -43,7 +43,7 @@ Select group
   user-select: none;
   border: 1px solid $input-border-color;
   border-radius: 3px;
-  transition: border-color .3s, background .3s, color .3s;
+  @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
     margin: 0 -.25rem;
@@ -86,17 +86,23 @@ Select group
   }
 }
 
+.form-selectgroup-check-floated {
+  position: absolute;
+  top: $input-btn-padding-y;
+  right: $input-btn-padding-y;
+}
+
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: $primary;
   background: rgba($primary, .04);
-  border-color: $input-focus-border-color;
+  border-color: $primary;
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
   color: $primary;
-  border-color: $input-focus-border-color;
+  border-color: $primary;
   box-shadow: $input-btn-focus-box-shadow;
 }
 

package/src/scss/ui/forms/_validation.scss

@@ -1,5 +1,5 @@
 %validation-lite {
-  border-color: $input-border-color;
+  border-color: var(--#{$variable-prefix}border-color) !important;
 }
 
 @each $state, $data in $form-validation-states {

package/src/scss/utils/_background.scss

@@ -1,11 +1,11 @@
 .bg-white-overlay {
   color: $white;
-  background-color: $light-white;
+  background-color: rgba($light, .24);
 }
 
 .bg-dark-overlay {
   color: $white;
-  background-color: $light-black;
+  background-color: rgba($dark, .24);
 }
 
 .bg-cover {

package/src/scss/utils/_colors.scss

@@ -1,33 +1,18 @@
 // stylelint-disable declaration-no-important
 
-/**
-SOCIAL COLORS
- */
-@each $color, $value in $social-colors {
+// All colors
+@each $color, $value in theme-colors() {
   .bg-#{"" + $color} {
-    color: #fff !important;
+    color: #ffffff !important;
     background: $value !important;
   }
 
   .text-#{"" + $color} {
     color: $value !important;
   }
-}
-
-
-@if $enable-extra-colors {
-  @each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
-    .bg-#{"" + $color} {
-      background: $value;
-    }
 
-    .text-#{"" + $color} {
-      color: $value !important;
-    }
-
-    .bg-#{"" + $color}-lt {
-      color: $value !important;
-      background: theme-color-lighter($value, true) !important;
-    }
+  .bg-#{"" + $color}-lt {
+    color: $value !important;
+    background: theme-color-lighter($value, true) !important;
   }
 }

package/src/scss/utils/_opacity.scss

@@ -2,6 +2,6 @@
 
 @for $i from 0 through 20 {
   .opacity-#{$i * 5} {
-    opacity: $i * 5 / 100 !important;
+    opacity: divide($i * 5, 100) !important;
   }
 }

package/src/scss/vendor/_apexcharts.scss

@@ -0,0 +1,2 @@
+.apexcharts-tooltip {
+}