@tabler/core 1.0.0-alpha.24 → 1.0.0-beta11

package/src/scss/tabler-vendors.scss

@@ -1,6 +1,11 @@
 @import "config";
 
-@import "vendor/apexcharts";
 @import "vendor/nouislider";
 @import "vendor/litepicker";
-@import "vendor/choices";
+@import "vendor/tom-select";
+@import "vendor/apexcharts";
+@import "vendor/jsvectormap";
+@import "vendor/dropzone";
+@import "vendor/fslightbox";
+@import "vendor/plyr";
+@import "vendor/tinymce";

package/src/scss/tabler.scss

@@ -1,2 +1,2 @@
-@import "tabler-core";
+@import "core";
 

package/src/scss/ui/_accordion.scss

@@ -1,3 +1,7 @@
+.accordion {
+ --#{$prefix}accordion-color: #{$accordion-color};
+}
+
 .accordion-button {
   &:focus:not(:focus-visible) {
     outline: none;
@@ -11,6 +15,7 @@
   &:not(.collapsed) {
     font-weight: $font-weight-bold;
     border-bottom-color: transparent;
+    box-shadow: none;
 
     &:after {
       opacity: 1;

package/src/scss/ui/_alerts.scss

@@ -1,8 +1,8 @@
 .alert {
-  --#{$variable-prefix}alert-color: #{$text-muted};
+  --#{$prefix}alert-color: #{$text-muted};
   background: $white;
   border: $alert-border-width solid $alert-border-color;
-  border-left: .25rem solid var(--#{$variable-prefix}alert-color);
+  border-left: .25rem solid var(--#{$prefix}alert-color);
   box-shadow: $alert-shadow;
 
   >:last-child {
@@ -12,11 +12,15 @@
 
 .alert-important {
   border-color: transparent;
-  background: var(--#{$variable-prefix}alert-color);
+  background: var(--#{$prefix}alert-color);
   color: #fff;
-  font-weight: $font-weight-medium;
 
-  .alert-icon {
+  .alert-icon,
+  .alert-link {
+    color: inherit;
+  }
+
+  .alert-link:hover {
     color: inherit;
   }
 }
@@ -24,18 +28,18 @@
 .alert-link, {
   &,
   &:hover {
-    color: var(--#{$variable-prefix}alert-color);
+    color: var(--#{$prefix}alert-color);
   }
 }
 
 @each $state, $value in $theme-colors {
   .alert-#{$state} {
-    --#{$variable-prefix}alert-color: #{$value};
+    --#{$prefix}alert-color: #{$value};
   }
 }
 
 .alert-icon {
-  color: var(--#{$variable-prefix}alert-color);
+  color: var(--#{$prefix}alert-color);
   width: 1.5rem !important;
   height: 1.5rem !important;
   margin: -.125rem $alert-padding-x -.125rem 0;
@@ -44,6 +48,7 @@
 .alert-title {
   font-size: $h4-font-size;
   line-height: $h4-line-height;
-  font-weight: $headings-font-weight;
+  font-weight: $font-weight-bold;
   margin-bottom: .25rem;
+  color: var(--#{$prefix}alert-color);
 }

package/src/scss/ui/_avatars.scss

@@ -1,9 +1,10 @@
 .avatar {
-  --#{$variable-prefix}avatar-size: #{$avatar-size};
+  --#{$prefix}avatar-size: #{$avatar-size};
+  --#{$prefix}avatar-bg: var(--#{$prefix}border-color-light);
   position: relative;
-  width: var(--#{$variable-prefix}avatar-size);
-  height: var(--#{$variable-prefix}avatar-size);
-  font-size: calc(var(--#{$variable-prefix}avatar-size) / #{$line-height-base * 2});
+  width: var(--#{$prefix}avatar-size);
+  height: var(--#{$prefix}avatar-size);
+  font-size: calc(var(--#{$prefix}avatar-size) / #{$line-height-base * 2});
   font-weight: $font-weight-medium;
   display: inline-flex;
   align-items: center;
@@ -13,12 +14,12 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: $gray-200 no-repeat center/cover;
+  background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
 
   svg {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
+    height: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
   }
 
   .badge {
@@ -40,12 +41,12 @@
 
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
-    --#{$variable-prefix}avatar-size: #{$size};
+    --#{$prefix}avatar-size: #{$size};
   }
 
   .avatar-#{$avatar-size} .badge:empty {
-    width: $size / 4;
-    height: $size / 4;
+    width: $size * .25;
+    height: $size * .25;
   }
 }
 
@@ -54,6 +55,7 @@
   display: inline-flex;
   padding: 0;
   margin: 0 0 -.5rem;
+  flex-wrap: wrap;
 
   .avatar {
     margin-bottom: .5rem;
@@ -73,11 +75,7 @@
 .avatar-list-stacked {
   .avatar {
     margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px $white;
-
-    @at-root .card-footer & {
-      box-shadow: 0 0 0 2px $card-cap-bg;
-    }
+    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg);
   }
 }
 
@@ -87,7 +85,7 @@
   border: 1px dashed $border-color;
   background: $form-check-input-bg;
   flex-direction: column;
-  transition: .3s color, .3s background-color;
+  @include transition(color $transition-time, background-color $transition-time);
 
   svg {
     width: 1.5rem;
@@ -107,3 +105,10 @@
   line-height: 1;
   margin-top: .25rem;
 }
+
+.page-avatar {
+  .page-cover ~ * & {
+    margin-top: calc(calc(-1 * calc(var(--#{$prefix}avatar-size) * .5)) - #{$content-padding-y});
+    box-shadow: 0 0 0 .25rem $body-bg;
+  }
+}

package/src/scss/ui/_badges.scss

@@ -1,14 +1,14 @@
 .badge {
-  display: inline-flex;
   justify-content: center;
   align-items: center;
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  padding: calc(.25rem - 1px) .25rem;
-  height: 1.25rem;
   border: 1px solid transparent;
-  min-width: 1.25rem;
+  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
+  font-weight: $headings-font-weight;
+  letter-spacing: .04em;
+  vertical-align: bottom;
 
   @at-root a#{&} {
     color: $white;
@@ -22,6 +22,7 @@
     min-height: auto;
     padding: 0;
     border-radius: $border-radius-pill;
+    vertical-align: baseline;
   }
 
   .avatar {
@@ -30,6 +31,19 @@
     height: 1.25rem;
     margin: 0 .5rem 0 -.5rem;
   }
+
+  .icon {
+    width: 1em;
+    height: 1em;
+    font-size: 1rem;
+    stroke-width: 2;
+  }
+}
+
+.badge-sm {
+  font-size: $h6-font-size;
+  line-height: $h6-line-height;
+  padding: 0 .25rem;
 }
 
 // bordered
@@ -39,6 +53,5 @@
 }
 
 .badge-pill {
-  border-radius: 100px;
-  min-width: 1.75em;
+  border-radius: $border-radius-pill;
 }

package/src/scss/ui/_breadcrumbs.scss

@@ -2,6 +2,14 @@
   padding: 0;
   margin: 0;
   background: transparent;
+
+  a {
+    color: $text-muted;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .breadcrumb-item {
@@ -15,22 +23,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    .breadcrumb-item + .breadcrumb-item:before {
-      content: $symbol;
-    }
-  }
-}
-
-.breadcrumb-alternate {
-  a {
-    color: $text-muted;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .breadcrumb-item.active {
-    color: inherit;
+    --#{$prefix}breadcrumb-divider: "#{quote($symbol)}";
   }
 }

package/src/scss/ui/_buttons.scss

@@ -1,49 +1,44 @@
+//
+// Button
+//
 .btn {
+  --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-color: var(--#{$prefix}color-text);
+  --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+  //background-color: var(--#{$prefix}btn-color, var(--#{$prefix}card-bg));
+  //color: var(--#{$prefix}btn-color-text);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: $body-color;
-  background-color: $white;
-  border-color: $border-color-dark-transparent;
   white-space: nowrap;
 
-  &:hover {
-    color: $body-color;
-    border-color: $text-muted-light;
-    background-color: $light;
-  }
-
-  &:focus {
-    border-color: rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), .5);
-    box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), $input-btn-focus-color-opacity)
-  }
-
-  &:disabled,
-  &.disabled {
-    cursor: not-allowed;
-  }
+  //&:hover {
+  //  color: var(--#{$prefix}btn-color-text);
+  //  border-color: rgba(var(--#{$prefix}btn-color-text-rgb), #{$border-active-opacity});
+  //}
+  //
+  //&:focus:not([disabled]):not(.disabled) {
+  //  border-color: var(--#{$prefix}btn-color, #{$primary});
+  //}
 
   .icon {
-    width: $icon-size;
-    height: $icon-size;
-    min-width: $icon-size;
-    margin: 0 .5rem 0;
-    margin-inline-start: -.25rem;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    min-width: var(--#{$prefix}btn-icon-size);
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
     vertical-align: bottom;
-    color: $text-muted;
+    color: inherit;
   }
 
   .avatar {
-    width: 1.25rem;
-    height: 1.25rem;
-    vertical-align: text-top;
-    margin: 0 .5rem 0;
-    margin-inline-start: -.25rem;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
   }
 
   .icon-right {
-    margin: 0 .5rem 0;
-    margin-inline-end: -.25rem;
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
   }
 
   .badge {
@@ -51,70 +46,58 @@
   }
 }
 
-%btn-color {
-  background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  color: var(--#{$variable-prefix}btn-color-text);
+.btn-link {
+  color: $link-color;
+  background-color: transparent;
+  border-color: transparent;
 
   .icon {
     color: inherit;
   }
 
   &:hover {
-    color: var(--#{$variable-prefix}btn-color-text);
-    background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
+    color: $link-hover-color;
     border-color: transparent;
   }
 }
 
-%btn-outline {
-  background-color: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  border-color: $border-color-transparent;
-
-  .icon {
-    color: inherit;
-  }
-
-  &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  }
+//
+// Button color variations
+//
+.btn-white {
+  --#{$prefix}btn-bg: var(--#{$prefix}card-bg);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg);
 }
 
-%btn-ghost {
-  background: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  border-color: transparent;
-
-  &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-color: #{color-contrast($value)};
   }
 }
 
-.btn-link {
-  color: $link-color;
-  background-color: transparent;
-  border-color: transparent;
-
-  .icon {
-    color: inherit;
+@each $color, $value in $theme-colors {
+  .btn-ghost-#{$color} {
+    @include button-ghost-variant($value);
   }
+}
 
-  &:hover {
-    color: $link-hover-color;
-    border-color: transparent;
-  }
+//
+// Button sizes
+//
+.btn-sm, .btn-group-sm > .btn {
+  --#{$prefix}btn-line-height: 1.5;
+  --#{$prefix}btn-icon-size: .75rem;
 }
 
-.btn-lg {
-  svg.icon {
-    stroke-width: 2;
-  }
+.btn-lg, .btn-group-lg > .btn {
+  --#{$prefix}btn-line-height: 1.5;
+  --#{$prefix}btn-icon-size: 2rem;
 }
 
+//
+// Button shapes
+//
 .btn-pill {
   padding-right: 1.5em;
   padding-left: 1.5em;
@@ -125,22 +108,27 @@
   }
 }
 
-.btn-icon {
-  min-width: add($btn-line-height * $btn-font-size + $btn-padding-y * 2, $btn-border-width * 2);
+.btn-square {
+  border-radius: 0;
+}
 
-  &.btn-sm {
-    min-width: add($btn-line-height * $btn-font-size-sm + $btn-padding-y-sm * 2, $btn-border-width * 2);
-  }
+//
+// Icon button
+//
+.btn-icon {
+  min-width: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  padding-left: 0;
+  padding-right: 0;
 
   .icon {
-    margin: 0 -1em;
+    margin: calc(-1 * var(--#{$prefix}btn-padding-x));
   }
 }
 
-.btn-square {
-  border-radius: 0;
-}
-
+//
+// Button list
+//
 .btn-list {
   display: flex;
   flex-wrap: wrap;
@@ -152,6 +140,9 @@
   }
 }
 
+//
+// Button floating
+//
 .btn-floating {
   position: fixed;
   z-index: $zindex-fixed;
@@ -160,58 +151,78 @@
   border-radius: $border-radius-pill;
 }
 
+//
+// Button loading
+//
 .btn-loading {
   position: relative;
   color: transparent !important;
   text-shadow: none !important;
   pointer-events: none;
 
+  > * {
+    opacity: 0;
+  }
+
   &:after {
     content: '';
     display: inline-block;
     vertical-align: text-bottom;
-    border: $spinner-border-width-sm solid currentColor;
+    border: $spinner-border-width solid currentColor;
     border-right-color: transparent;
     border-radius: $border-radius-pill;
-    color: $white;
+    color: var(--#{$prefix}btn-color);
     position: absolute;
-    width: 1rem;
-    height: 1rem;
-    left: calc(50% - .5rem);
-    top: calc(50% - .5rem);
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+    top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border .75s linear infinite;
   }
 }
 
+//
+// Action button
+//
+.btn-action {
+  padding: 0;
+  border: 0;
+  color: $text-muted;
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius;
 
-$btn-colors: $theme-colors;
-
-@if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $colors);
-}
-
-@if $enable-social-colors {
-  $btn-colors: map-merge($btn-colors, $social-colors);
-}
+  &:after {
+    content: none;
+  }
 
-@each $name, $color in $btn-colors {
-  .btn-#{$name},
-  .btn-outline-#{$name},
-  .btn-ghost-#{$name} {
-    --#{$variable-prefix}btn-color: #{hex-to-rgb($color)};
-    --#{$variable-prefix}btn-color-darker: #{hex-to-rgb(theme-color-darker($color))};
-    --#{$variable-prefix}btn-color-text: #{color-contrast($color)};
+  &:focus {
+    outline: none;
+    box-shadow: none;
   }
 
-  .btn-#{$name} {
-    @extend %btn-color;
+  &:hover,
+  &.show {
+    color: $body-color;
+    background: $body-bg;
   }
 
-  .btn-outline-#{$name} {
-    @extend %btn-outline;
+  &.show {
+    color: $primary;
   }
 
-  .btn-ghost-#{$name} {
-    @extend %btn-ghost;
+  .icon {
+    margin: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+    stroke-width: 1;
   }
+}
+
+.btn-actions {
+  display: flex;
 }

package/src/scss/ui/_calendars.scss

@@ -28,8 +28,8 @@
 }
 
 .calendar-date {
-  flex: 0 0 (100% / 7);
-  max-width: (100% / 7);
+  flex: 0 0 divide(100%, 7);
+  max-width: divide(100%, 7);
   padding: .2rem;
   text-align: center;
   border: 0;
@@ -55,7 +55,7 @@
     border: 1px solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
-    transition: background .3s, border .3s, box-shadow .32s, color .3s;
+    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
       color: $primary;