@tabler/core 1.0.0-beta15 → 1.0.0-beta17

package/src/scss/ui/_steps.scss

@@ -1,53 +1,28 @@
-// stylelint-disable declaration-no-important
-
-@mixin step-size($border-width, $dot-size: 1rem) {
-  .step-item {
-    padding-top: add($dot-size, 4px);
-
-    &:after {
-      top: add($dot-size * .5, 2px);
-      height: $border-width;
-    }
-
-    &:before {
-      width: $dot-size;
-      height: $dot-size;
-    }
-  }
-}
-
-@mixin step-color($color) {
-  .step-item {
-    &:after,
-    &:before {
-      color: $white;
-      background: $color;
-    }
-
-    &.active:before {
-      color: inherit;
-      border-color: $color;
-    }
-  }
-}
-
+//
+// Steps
+//
 .steps {
+  --#{$prefix}steps-color: #{$steps-color};
+  --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
+  --#{$prefix}steps-dot-size: .5rem;
+  --#{$prefix}steps-border-width: #{$steps-border-width};
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   padding: 0;
-  margin: 2rem 0;
+  margin: 0;
   list-style: none;
-  @include step-size(2px, .5rem);
-  @include step-color( var(--#{$prefix}primary) );
 }
 
-@each $color, $value in $extra-colors {
-  .steps-#{$color} {
-    @include step-color($value);
+@each $name, $color in $extra-colors {
+  .steps-#{$name} {
+    --#{$prefix}steps-color: var(--#{$prefix}#{$name});
   }
 }
 
+//
+// Step item
+//
 .step-item {
   position: relative;
   flex: 1 1 0;
@@ -56,6 +31,7 @@
   color: inherit;
   text-align: center;
   cursor: default;
+  padding-top: calc(var(--#{$prefix}steps-dot-size));
 
   @at-root a#{&} {
     cursor: pointer;
@@ -65,66 +41,112 @@
     }
   }
 
-  &:not(:first-child):after {
+  &:after,
+  &:before {
+    background: var(--#{$prefix}steps-color);
+  }
+
+  &:not(:last-child):after {
     position: absolute;
-    left: -50%;
+    left: 50%;
     width: 100%;
     content: "";
     transform: translateY(-50%);
   }
 
+  &:after {
+    top: calc(var(--#{$prefix}steps-dot-size) * .5);
+    height: var(--#{$prefix}steps-border-width);
+  }
+
   &:before {
+    content: "";
     position: absolute;
     top: 0;
     left: 50%;
     z-index: 1;
     box-sizing: content-box;
-    display: block;
-    content: "";
-    border: 2px var(--#{$prefix}border-style) $card-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: $border-radius-pill;
     transform: translateX(-50%);
+    color: var(--#{$prefix}white);
+    width: var(--#{$prefix}steps-dot-size);
+    height: var(--#{$prefix}steps-dot-size);
   }
 
   &.active {
     font-weight: var(--#{$prefix}font-weight-bold);
 
-    &:before {
-      background: $card-bg;
+    &:after {
+      background: var(--#{$prefix}steps-inactive-color);
     }
 
     & ~ .step-item {
-      color: var(--#{$prefix}muted);
+      color: var(--#{$prefix}disabled-color);
 
       &:after,
       &:before {
-        background: $steps-color-inactive;
-      }
-
-      &:before {
-        color: var(--#{$prefix}muted) !important;
+        background: var(--#{$prefix}steps-inactive-color);
       }
     }
   }
 }
 
+//
+// Steps counter
+//
 .steps-counter {
+  --#{$prefix}steps-dot-size: 1.5rem;
   counter-reset: steps;
-  @include step-size(2px, 1.5rem);
 
   .step-item {
     counter-increment: steps;
 
     &:before {
-      font-size: $h5-font-size;
-      line-height: 1.5rem;
       content: counter(steps);
     }
+  }
+}
 
-    &.active ~ .step-item {
-      &:before {
-        background: $white;
+//
+// Steps vertical
+//
+.steps-vertical {
+  --#{$prefix}steps-dot-offset: 6px;
+  flex-direction: column;
+
+  &.steps-counter {
+    --#{$prefix}steps-dot-offset: -2px;
+  }
+
+  .step-item {
+    text-align: left;
+    padding-top: 0;
+    padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem);
+    min-height: auto;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+
+    &:before {
+      top: var(--#{$prefix}steps-dot-offset);
+      left: 0;
+      transform: translate(0, 0);
+    }
+
+    &:not(:last-child) {
+      &:after {
+        position: absolute;
+        content: '';
+        transform: translateX(-50%);
+        top: var(--#{$prefix}steps-dot-offset);
+        left: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+        width: var(--#{$prefix}steps-border-width);
+        height: calc(100% + 1rem);
       }
     }
   }
-}
+}

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-colorinput.scss

@@ -46,10 +46,9 @@ Color Input
     box-shadow: $input-btn-focus-box-shadow;
   }
 
-  .form-colorinput-light & {
+  @at-root .form-colorinput-light & {
     &:before {
       background-image: escape-svg($form-check-input-checked-bg-image-dark);
     }
   }
 }
-

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/ui/forms/_form-selectgroup.scss

@@ -94,9 +94,9 @@ Select group
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
-  color: var(--#{$prefix}primary);
-  background: rgba(var(--#{$prefix}primary-rgb), .04);
-  border-color: var(--#{$prefix}primary);
+  color: #{$active-color};
+  background: #{$active-bg};
+  border-color: #{$active-border-color};
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {

package/src/scss/utils/_colors.scss

@@ -1,18 +1,22 @@
 // All colors
 @each $color, $value in map-merge($theme-colors, ( white: $white )) {
   .bg-#{"" + $color} {
-    background-color: var(--#{$prefix}#{$color}) !important;
+    --#{$prefix}bg-opacity: 1;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    color: var(--#{$prefix}#{$color}) !important;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
+    --#{$prefix}bg-opacity: .1;
+    --#{$prefix}text-opacity: 1;
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 }
 
 @each $color, $value in $theme-colors {
   .text-#{"" + $color} {
-    color: var(--#{$prefix}#{$color}) !important;
+    --#{$prefix}text-opacity: 1;
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -22,10 +26,11 @@
 
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
-    background-color: var(--#{$prefix}#{$color}) !important;
+    --#{$prefix}bg-opacity: .1;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
   .text-#{"" + $color}-fg {
-    color: color-contrast($value ) !important;
+    color: color-contrast($value) !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;