@tabler/core 1.0.0-beta16 → 1.0.0-beta18

package/src/scss/layout/_page.scss

@@ -6,7 +6,10 @@
 }
 
 .page-center {
-  justify-content: center;
+  .container {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 }
 
 .page-wrapper {
@@ -28,14 +31,14 @@
 
 // Content body
 .page-body {
-  margin-top: $content-padding-y;
-  margin-bottom: $content-padding-y;
+  margin-top: var(--#{$prefix}page-padding-y);
+  margin-bottom: var(--#{$prefix}page-padding-y);
 }
 
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
-  padding: $content-padding-y 0;
+  padding: var(--#{$prefix}page-padding) 0;
   margin-bottom: 0;
   flex: 1;
 
@@ -80,13 +83,13 @@
   justify-content: center;
 
   .page-wrapper & {
-    margin: $content-padding-y 0 0;
+    margin: var(--#{$prefix}page-padding-y) 0 0;
   }
 }
 
 .page-header-border {
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  padding: $content-padding-y 0;
+  padding: var(--#{$prefix}page-padding-y) 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
 }
@@ -121,6 +124,32 @@
   color: var(--#{$prefix}muted);
 }
 
+//
+// Page cover
+//
+.page-cover {
+  --#{$prefix}page-cover-blur: 20px;
+  --#{$prefix}page-cover-padding: 1rem;
+  min-height: 6rem;
+  padding: var(--#{$prefix}page-cover-padding) 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-cover-img {
+  position: absolute;
+  top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  pointer-events: none;
+  filter: blur(var(--#{$prefix}page-cover-blur));
+  object-fit: cover;
+  background-size: cover;
+  background-position: center;
+  z-index: -1;
+}
+
 //
 // Page tabs
 //

package/src/scss/layout/_root.scss

@@ -5,19 +5,29 @@
 
   @each $name, $color in map-merge($theme-colors, $gray-colors) {
     --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
     --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
+  @each $name, $value in $spacers {
+    --#{$prefix}spacer-#{$name}: #{$value};
+  }
+  --#{$prefix}spacer: #{$spacer};
+
   --#{$prefix}bg-surface: #{$bg-surface};
   --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
+  --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
   --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
   --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
   --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-light: #{$border-color-light};
-  --#{$prefix}border-color-active: #{$border-color-active};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  --#{$prefix}border-dark-color: #{$border-dark-color};
+  --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
+  --#{$prefix}border-active-color: #{$border-active-color};
 
   --#{$prefix}icon-color: #{$icon-color};
 
@@ -29,10 +39,16 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
 
-  --#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
-  --#{$prefix}dark-mode-border-color-light: #{$dark-mode-border-color-light};
-  --#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};
+  --#{$prefix}dark-mode-border-color: #{$border-color-dark};
+  --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
+  --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+  --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
+  --#{$prefix}page-padding: #{$page-padding};
+  --#{$prefix}page-padding-y: #{$page-padding-y};
+  @include media-breakpoint-down($cards-grid-breakpoint) {
+    --#{$prefix}page-padding: #{$page-padding-sm};
+  }
 
   @each $name, $value in $font-weights {
     --#{$prefix}font-weight-#{$name}: #{$value};

package/src/scss/mixins/_functions.scss

@@ -1,9 +1,5 @@
-@function theme-color-lighter($color, $transparent: false) {
-  @if ($transparent) {
-    @return rgba($color, .1);
-  } @else {
-    @return tint-color($color, 10%);
-  }
+@function theme-color-lighter($color, $background: #fff) {
+  @return mix($color, $background, 10%);
 }
 
 @function theme-color-darker($color) {

package/src/scss/mixins/_mixins.scss

@@ -14,23 +14,28 @@
 }
 
 @mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
+  #{if(&, "&", "*")} {
+    scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;
+  }
+
   #{if(&, "&", "*")}::-webkit-scrollbar {
-    width: .5rem;
-    height: .5rem;
+    width: 1rem;
+    height: 1rem;
     @include transition(background $transition-time);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: rgba($color, .16);
+    border-radius: 1rem;
+    border: 5px solid transparent;
+    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
-    background: rgba($color, .06);
+    background: transparent;
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    background: rgba($color, .32);
+    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {
@@ -43,38 +48,6 @@
   filter: brightness(0) invert(1);
 }
 
-@mixin dark-mode {
-  @if $enable-dark-mode {
-    $selector: &;
-
-    @media not print {
-      @if ($selector) {
-        .theme-dark & {
-          @content
-        }
-      } @else {
-        .theme-dark {
-          @content
-        }
-      }
-    }
-
-    @media not print {
-      @media (prefers-color-scheme: dark) {
-        @if ($selector) {
-          .theme-dark-auto & {
-            @content
-          }
-        } @else {
-          .theme-dark-auto {
-            @content
-          }
-        }
-      }
-    }
-  }
-}
-
 //
 // Elements list
 //

package/src/scss/tabler-social.scss

@@ -0,0 +1 @@
+@import "config";

package/src/scss/tabler.scss

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

package/src/scss/ui/_avatars.scss

@@ -1,6 +1,7 @@
 .avatar {
   --#{$prefix}avatar-size: #{$avatar-size};
-  --#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}avatar-bg: #{$avatar-bg};
+  --#{$prefix}avatar-shadow: #{$shadow-inset};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
@@ -16,6 +17,7 @@
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
+  box-shadow: var(--#{$prefix}avatar-shadow);
 
   svg {
     width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
@@ -50,7 +52,9 @@
   }
 }
 
-
+//
+// Avatar list
+//
 .avatar-list {
   @include elements-list;
 
@@ -62,16 +66,22 @@
 }
 
 .avatar-list-stacked {
+  display: block;
+  --#{$prefix}list-gap: 0;
+
   .avatar {
-    margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
+    margin-right: calc(-.5 * var(--#{$prefix}avatar-size)) !important;
+    box-shadow: var(--#{$prefix}avatar-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
   }
 }
 
+//
+// Avatar upload
+//
 .avatar-upload {
   width: 4rem;
   height: 4rem;
-  border: 1px dashed var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
   background: $form-check-input-bg;
   flex-direction: column;
   @include transition(color $transition-time, background-color $transition-time);
@@ -95,9 +105,7 @@
   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;
-  }
+.avatar-cover {
+  margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
+  box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
 }

package/src/scss/ui/_buttons.scss

@@ -2,10 +2,12 @@
 // Button
 //
 .btn {
+  --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-icon-size: #{$icon-size};
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
-  --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}btn-border-color: #{$btn-border-color};
   --#{$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);

package/src/scss/ui/_cards.scss

@@ -197,7 +197,7 @@ Stacked card
 
 .card-header-light {
   border-bottom-color: transparent;
-  background: var(--#{$prefix}bg-surface-secondary);
+  background: var(--#{$prefix}bg-surface-tertiary);
 }
 
 .card-header-tabs {
@@ -516,7 +516,7 @@ Card list group
       &:active,
       &:hover {
         border-color: $card-border-color;
-        color: $body-color;
+        color: var(--#{$prefix}body-color);
       }
 
       &.active {

package/src/scss/ui/_dropdowns.scss

@@ -1,7 +1,5 @@
 .dropdown-menu {
-  box-shadow: $box-shadow;
   user-select: none;
-  margin: 0 !important;
 
   &.card {
     padding: 0;
@@ -67,7 +65,6 @@
 }
 
 .dropdown-menu-arrow {
-  //margin-top: .25rem;
 
   &:before {
     content: "";
@@ -78,6 +75,7 @@
     background: inherit;
     width: 14px;
     height: 14px;
+    /*rtl:ignore*/
     transform: rotate(45deg);
     transform-origin: center;
     border: 1px solid;

package/src/scss/ui/_forms.scss

@@ -69,6 +69,7 @@ Form control
   &:-webkit-autofill {
     box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
     color: var(--#{$prefix}body-color);
+    -webkit-text-fill-color: var(--#{$prefix}body-color);
   }
 
   &:disabled,
@@ -83,7 +84,7 @@ Form control
 }
 
 .form-control-light {
-  background-color: $gray-100;
+  background-color: var(--#{$prefix}gray-100);
   border-color: transparent;
 }
 

package/src/scss/ui/_grid.scss

@@ -6,17 +6,6 @@
   border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
-%container-common {
-  @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$prefix}gutter-x: #{$grid-gutter-width};
-  }
-}
-
-.container,
-.container-fluid {
-  @extend %container-common;
-}
-
 .container {
   @each $variation, $size in $container-variations {
     &-#{$variation} {
@@ -63,11 +52,6 @@
   .row-cards {
     flex: 1;
   }
-
-  @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$prefix}gutter-x: #{$cards-grid-gap * .5};
-    --#{$prefix}gutter-y: #{$cards-grid-gap * .5};
-  }
 }
 
 @each $name, $size in map-merge((null: $spacer), $spacers) {

package/src/scss/ui/_lists.scss

@@ -69,101 +69,6 @@
   }
 }
 
-/**
-Timeline
- */
-.list-timeline {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-
-  > li {
-    position: relative;
-    margin-bottom: 1.5rem;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.list-timeline-time {
-  float: right;
-  margin-left: 1rem;
-  color: var(--#{$prefix}muted);
-}
-
-.list-timeline-icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  color: $white;
-  text-align: center;
-  background: var(--#{$prefix}muted);
-  border-radius: $border-radius-pill;
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-    font-size: 1rem;
-  }
-}
-
-.list-timeline-title {
-  margin: 0;
-  font-weight: var(--#{$prefix}font-weight-bold);
-}
-
-.list-timeline-content {
-  margin-left: 3.5rem;
-}
-
-
-@media screen and (min-width: 768px) {
-  .list-timeline:not(.list-timeline-simple) {
-    &:before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: add(7.5rem, 2px);
-      z-index: 1;
-      display: block;
-      width: 2px;
-      content: "";
-      background-color: var(--#{$prefix}border-color);
-    }
-
-    & > li {
-      z-index: 2;
-      min-height: 40px;
-    }
-
-    .list-timeline-time {
-      position: absolute;
-      top: .5rem;
-      left: 0;
-      width: 5.5rem;
-      margin: 0;
-      text-align: right;
-    }
-
-    .list-timeline-icon {
-      top: 0;
-      left: 6.5rem;
-    }
-
-    .list-timeline-content {
-      padding: .625rem 0 0 10rem;
-      margin: 0;
-    }
-  }
-}
 
 
 .list-group-transparent {

package/src/scss/ui/_pagination.scss

@@ -44,7 +44,7 @@
 .page-item-title {
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-normal);
-  color: $body-color;
+  color: var(--#{$prefix}body-color);
 
   .page-link:hover & {
     color: $link-color;

package/src/scss/ui/_payments.scss

@@ -1,4 +1,4 @@
-$payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay', 'bancontact', 'bitcoin', 'bitpay', 'blik', 'cirrus', 'clickandbuy', 'coinkite', 'dinersclub', 'directdebit', 'discover', 'dotpay', 'dwolla', 'ebay', 'eway', 'giropay', 'googlewallet', 'ingenico', 'jcb', 'klarna', 'laser', 'maestro', 'mastercard', 'mir', 'monero', 'neteller', 'ogone', 'okpay', 'paybox', 'paymill', 'payone', 'payoneer', 'paypal', 'paysafecard', 'payu', 'payza', 'przelewy24', 'ripple', 'sage', 'sepa', 'shopify', 'skrill', 'solo', 'square', 'stripe', 'switch', 'tpay', 'ukash', 'unionpay', 'verifone', 'verisign', 'visa', 'webmoney', 'westernunion', 'worldpay');
+$payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay', 'bancontact', 'bitcoin', 'bitpay', 'blik', 'cirrus', 'clickandbuy', 'coinkite', 'dinersclub', 'directdebit', 'discover', 'dotpay', 'dwolla', 'ebay', 'epayco', 'eway', 'giropay', 'googlewallet', 'ingenico', 'jcb', 'klarna', 'laser', 'maestro', 'mastercard', 'mir', 'monero', 'neteller', 'ogone', 'okpay', 'paybox', 'paymill', 'payone', 'payoneer', 'paypal', 'paysafecard', 'payu', 'payza', 'przelewy24', 'ripple', 'sage', 'sepa', 'shopify', 'skrill', 'solo', 'square', 'stripe', 'switch', 'tpay', 'ukash', 'unionpay', 'verifone', 'verisign', 'visa', 'webmoney', 'westernunion', 'worldpay');
 
 .payment {
   width: 2rem * 1.66666;

package/src/scss/ui/_progress.scss

@@ -62,7 +62,7 @@ Progress bar
   }
 
   &:before {
-    animation: progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
+    animation: progress-indeterminate 1.5s cubic-bezier(.65, .815, .735, .395) infinite;
   }
 }
 

package/src/scss/ui/_status.scss

@@ -71,7 +71,7 @@
 .status-lite {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   background: transparent !important;
-  color: var(--#{$prefix}body-text) !important;
+  color: var(--#{$prefix}body-color) !important;
 }
 
 @each $name, $color in $theme-colors {
@@ -108,16 +108,6 @@
   }
 }
 
-$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
 //

package/src/scss/ui/_tables.scss

@@ -1,18 +1,3 @@
-@include dark-mode {
-  $table-variants: (
-    "primary":    shift-color($primary, $table-bg-scale-dark),
-    "secondary":  shift-color($secondary, $table-bg-scale-dark),
-    "success":    shift-color($success, $table-bg-scale-dark),
-    "info":       shift-color($info, $table-bg-scale-dark),
-    "warning":    shift-color($warning, $table-bg-scale-dark),
-    "danger":     shift-color($danger, $table-bg-scale-dark),
-  );
-
-  @each $color, $value in $table-variants {
-    @include table-variant($color, $value);
-  }
-}
-
 .table {
   thead {
     th {
@@ -91,7 +76,7 @@
           display: block;
           padding: $table-cell-padding-x $table-cell-padding-y !important;
           border: none;
-          color: $body-color !important;
+          color: var(--#{$prefix}body-color) !important;
 
           &[data-label] {
             &:before {
@@ -132,7 +117,7 @@
   &:hover,
   &.asc,
   &.desc {
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
   }
 
   &:after,

package/src/scss/ui/_timeline.scss

@@ -0,0 +1,61 @@
+//
+// Timeline
+//
+.timeline {
+  --#{$prefix}timeline-icon-size: #{$avatar-size};
+  position: relative;
+  list-style: none;
+  padding: 0;
+}
+
+//
+// Timeline event
+//
+.timeline-event {
+  position: relative;
+
+  &:not(:last-child) {
+    margin-bottom: var(--#{$prefix}page-padding);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: var(--#{$prefix}timeline-icon-size);
+      left: calc(var(--#{$prefix}timeline-icon-size) / 2);
+      bottom: calc(-1 * var(--#{$prefix}page-padding));
+      width: var(--#{$prefix}border-width);
+      background-color: var(--#{$prefix}border-color);
+      border-radius: var(--#{$prefix}border-radius);
+    }
+  }
+}
+
+.timeline-event-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}timeline-icon-size, $avatar-size);
+  height: var(--#{$prefix}timeline-icon-size, $avatar-size);
+  background: var(--#{$prefix}gray-200);
+  color: var(--#{$prefix}muted);
+  border-radius: var(--#{$prefix}border-radius);
+  z-index: 5
+}
+
+.timeline-event-card {
+  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
+}
+
+//
+// Simple timeline
+//
+.timeline-simple {
+  .timeline-event-icon {
+    display: none;
+  }
+
+  .timeline-event-card {
+    margin-left: 0;
+  }
+}

package/src/scss/ui/_type.scss

@@ -68,7 +68,7 @@ h6,
 strong,
 .strong,
 b {
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: $headings-font-weight;
 }
 
 blockquote {
@@ -122,15 +122,17 @@ code {
   border-radius: var(--#{$prefix}border-radius);
 }
 
-kbd {
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+kbd,
+.kbd {
+  border: $kbd-border;
   display: inline-block;
   box-sizing: border-box;
   max-width: 100%;
-  font-size: var(--#{$prefix}font-size-h5);
+  font-size: $kbd-font-size;
   font-weight: $kbd-font-weight;
   line-height: 1;
   vertical-align: baseline;
+  border-radius: $kbd-border-radius;
 }
 
 img {