@tabler/core 1.0.0-beta16 → 1.0.0-beta17

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

@@ -2,6 +2,8 @@
 // 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);

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

package/src/scss/ui/_tables.scss

@@ -91,7 +91,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 +132,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}content-padding);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: var(--#{$prefix}timeline-icon-size);
+      left: calc(var(--#{$prefix}timeline-icon-size) / 2);
+      bottom: calc(-1 * var(--#{$prefix}content-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}content-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 {

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

@@ -99,6 +99,6 @@ Image check
   .form-imagecheck:hover &,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure &,
   .form-imagecheck-input:checked ~ .form-imagecheck-figure & {
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
   }
 }

package/src/scss/utils/_colors.scss

@@ -8,7 +8,7 @@
   .bg-#{"" + $color}-lt {
     --#{$prefix}bg-opacity: .1;
     --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}text-opacity))) !important;
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
     background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 }

package/src/scss/vendor/_dropzone.scss

@@ -1,10 +1,10 @@
 .dropzone {
-  border: 1px dashed var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
   color: var(--#{$prefix}muted);
   padding: 1rem;
 
   &.dz-drag-hover {
-    border: 1px dashed var(--#{$prefix}primary);
+    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
     background: rgba(var(--#{$prefix}primary-rgb), .01);
     color: var(--#{$prefix}primary);
 

package/src/scss/vendor/_tom-select.scss

@@ -1,3 +1,4 @@
+$select-color-dropdown: #fff;
 $select-color-dropdown-border-top: red;
 $input-border-width: 1px;