@tabler/core 1.0.0-beta15 → 1.0.0-beta17

package/src/scss/layout/_page.scss

@@ -28,14 +28,14 @@
 
 // Content body
 .page-body {
-  margin-top: $content-padding-y;
-  margin-bottom: $content-padding-y;
+  margin-top: var(--#{$prefix}content-padding);
+  margin-bottom: var(--#{$prefix}content-padding);
 }
 
 .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}content-padding) 0;
   margin-bottom: 0;
   flex: 1;
 
@@ -80,13 +80,13 @@
   justify-content: center;
 
   .page-wrapper & {
-    margin: $content-padding-y 0 0;
+    margin: var(--#{$prefix}content-padding) 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}content-padding) 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
 }
@@ -121,6 +121,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

@@ -12,6 +12,7 @@
 
   --#{$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);
 
@@ -29,6 +30,7 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
 
+  --#{$prefix}content-padding: #{$content-padding};
   --#{$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};
@@ -39,7 +41,7 @@
   }
 
   @each $name, $value in $font-sizes {
-    --#{$prefix}font-size-#{$name}: #{$value};
+    --#{$prefix}font-size-h#{$name}: #{$value};
   }
 
   @each $name, $value in $line-heights {

package/src/scss/mixins/_functions.scss

@@ -44,4 +44,5 @@
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
   @return if($n > 1, nth($breakpoint-names, $n - 1), null);
-}
+}
+

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 {

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-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/_breadcrumbs.scss

@@ -1,10 +1,13 @@
 .breadcrumb {
+  --#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
+  --#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
+  --#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
   padding: 0;
   margin: 0;
   background: transparent;
 
   a {
-    color: var(--#{$prefix}muted);
+    color: var(--#{$prefix}breadcrumb-link-color);
 
     &:hover {
       text-decoration: underline;
@@ -12,8 +15,27 @@
   }
 }
 
+.breadcrumb-muted {
+  --#{$prefix}breadcrumb-link-color: var(--#{$prefix}muted);
+}
+
 .breadcrumb-item {
   &.active {
+    font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
+
+    a {
+      color: inherit;
+      pointer-events: none;
+    }
+  }
+
+  &.disabled {
+    color: var(--#{$prefix}breadcrumb-item-disabled-color);
+
+    &:before {
+      color: inherit;
+    }
+
     a {
       color: inherit;
       pointer-events: none;

package/src/scss/ui/_button-group.scss

@@ -0,0 +1,14 @@
+.btn-group,
+.btn-group-vertical {
+  > .btn-check:checked + .btn,
+  > .btn:active,
+  > .btn.active {
+    z-index: 5;
+  }
+
+  > .btn-check:focus + .btn,
+  > .btn:hover,
+  > .btn:focus {
+    z-index: 1;
+  }
+}

package/src/scss/ui/_buttons.scss

@@ -2,13 +2,18 @@
 // 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-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 +43,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 {

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/_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,
@@ -80,26 +81,10 @@ Form control
   &[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 {
-  background-color: $gray-100;
+  background-color: var(--#{$prefix}gray-100);
   border-color: transparent;
 }
 

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

@@ -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/_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 {