@tabler/core 1.0.0-alpha.23 → 1.0.0-beta10

package/src/scss/ui/_icons.scss

@@ -14,15 +14,22 @@
 }
 
 .icon-inline {
-  width: 1.25em;
-  height: 1.25em;
-  font-size: 1em;
+  width: 1em;
+  height: 1em;
+  font-size: divide(16, 14) * 1em;
+  vertical-align: -0.2em;
 }
 
 .icon-filled {
   fill: currentColor;
 }
 
+.icon-sm {
+  width: 1rem;
+  height: 1rem;
+  stroke-width: 1;
+}
+
 .icon-md {
   width: 2.5rem;
   height: 2.5rem;

package/src/scss/ui/_images.scss

@@ -1,6 +1,6 @@
 .img-responsive {
   background: no-repeat center/cover;
-  padding-top: percentage(3 / 4);
+  padding-top: percentage(.75);
 }
 
 @each $key, $ratio in $aspect-ratios {

package/src/scss/ui/_legend.scss

@@ -1,6 +1,6 @@
 .legend {
   display: inline-block;
-  background: $border-color;
+  background: var(--#{$variable-prefix}border-color-light);
   width: .75em;
   height: .75em;
   border-radius: $border-radius;

package/src/scss/ui/_lists.scss

@@ -11,7 +11,7 @@
   line-height: 1;
   text-transform: uppercase;
   color: $text-muted;
-  border-bottom: 1px solid $list-group-border-color;
+  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -20,6 +20,32 @@
   }
 }
 
+.list-group-item {
+  background-color: rgba(27,125,241,0.02);
+}
+
+.list-group-item.active {
+  background-color: inherit;
+  border-left-color: $yellow;
+  border-left-width: $border-width-wide;
+}
+
+.list-group-item {
+  &:active,
+  &:focus,
+  &:hover{
+    background-color: inherit;
+  }
+}
+
+.list-group-item {
+  &.disabled,
+  &:disabled {
+    color: $gray-500;
+    background-color: rgba(27,125,241,0.02);
+  }
+}
+
 .list-bordered {
   .list-item {
     border-top: 1px solid $border-color;
@@ -34,7 +60,7 @@
 .list-group-hoverable {
   .list-group-item-actions {
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
   }
 
   .list-group-item:hover .list-group-item-actions,

package/src/scss/ui/_markdown.scss

@@ -2,6 +2,7 @@
 Markdown
  */
 .markdown {
+  font-size: 1rem;
   line-height: $line-height-lg;
 
   > :first-child {
@@ -13,33 +14,6 @@ Markdown
     margin-bottom: 0;
   }
 
-  > {
-    h1, h2, h3, h4, h5, h6 {
-      margin-top: 2rem;
-      margin-bottom: .5rem;
-    }
-
-    h1 {
-      font-size: $h2-font-size;
-      line-height: $h2-line-height;
-    }
-
-    h2 {
-      font-size: $h3-font-size;
-      line-height: $h3-line-height;
-    }
-
-    h3 {
-      font-size: $h4-font-size;
-      line-height: $h4-line-height;
-    }
-
-    h4 {
-      font-size: $h5-font-size;
-      line-height: $h5-line-height;
-    }
-  }
-
   > hr {
     @include media-breakpoint-up(md) {
       margin-top: 3em;
@@ -47,11 +21,23 @@ Markdown
     }
   }
 
+  > {
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: $font-weight-bold;
+    }
+  }
+
   > table {
     @extend .table, .table-bordered;
   }
 
-  img {
+  > blockquote {
+    font-size: $h3-font-size;
+    margin: 1.5rem 0;
+    padding: .5rem 1.5rem;
+  }
+
+  > img {
     border-radius: $border-radius;
   }
 }

package/src/scss/ui/_modals.scss

@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid var(--#{$variable-prefix}border-color);
   }
 }
 
@@ -44,7 +44,7 @@
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
   color: $headings-color;
-  line-height: (24/18);
+  line-height: $line-height-base;
 }
 
 .modal-footer {

package/src/scss/ui/_nav.scss

@@ -1,7 +1,3 @@
-.nav {
-  margin: 0;
-}
-
 .nav-vertical {
   &,
   .nav {
@@ -10,9 +6,9 @@
   }
 
   .nav {
-    margin-inline-start: 1.25rem;
-    border-left: 1px solid $border-color;
-    padding-inline-start: .5rem;
+    margin-left: 1.25rem;
+    border-left: 1px solid var(--#{$variable-prefix}border-color);
+    padding-left: .5rem;
   }
 
   .nav-link.active,
@@ -25,39 +21,33 @@
   }
 }
 
-.nav-tabs {
-  margin: 0;
+//
+// Nav bordered
+//
+.nav-bordered {
+  border-bottom: $nav-bordered-border-width solid $nav-bordered-border-color;
 
-  .icon {
-    color: $text-muted;
+  .nav-item {
+    + .nav-item {
+      margin-left: $nav-bordered-margin-x;
+    }
   }
 
   .nav-link {
-    padding: $card-title-spacer-y $card-spacer-x;
-    line-height: 20px;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 0 (- $nav-bordered-border-width );
+    border: 0;
+    border-bottom: $nav-bordered-link-active-border-width solid transparent;
     color: $text-muted;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid transparent;
-    transition: .3s color, .3s border-color;
-
-    &:hover {
-      color: $body-color;
-      border-color: transparent;
-    }
-
-    &.disabled {
-      color: rgba($text-muted, .2);
-    }
+  }
 
-    &.active {
-      color: $body-color;
-      background: inherit;
-      border-color: transparent;
-      border-bottom-color: $primary;
-    }
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-bordered-link-active-color;
+    border-color: $nav-bordered-link-active-border-color;
   }
+
 }
 
 .nav-tabs-alt {
@@ -70,14 +60,14 @@
 
 .nav-link {
   display: flex;
-  transition: .3s color;
+  @include transition(color $transition-time);
   align-items: center;
 }
 
 .nav-link-toggle {
   margin-left: auto;
   padding: 0 .25rem;
-  transition: .3s transform;
+  @include transition(transform $transition-time);
   @include caret();
 
   &:after {
@@ -92,7 +82,7 @@
 .nav-link-icon {
   width: 1.5rem;
   height: $icon-size;
-  margin-inline-end: .25rem;
+  margin-right: .25rem;
   opacity: $text-muted-opacity;
 
   svg {

package/src/scss/ui/_offcanvas.scss

@@ -0,0 +1,21 @@
+.offcanvas {
+  background: var(--#{$variable-prefix}card-bg);
+}
+
+.offcanvas-header {
+  border-bottom: 1px solid $border-color-transparent;
+}
+
+.offcanvas-footer {
+  padding: $offcanvas-padding-y $offcanvas-padding-x;
+}
+
+.offcanvas-title {
+  font-size: $h3-font-size;
+  font-weight: $font-weight-medium;
+  line-height: 1.5rem;
+}
+
+.offcanvas-narrow {
+  width: 20rem;
+}

package/src/scss/ui/_placeholder.scss

@@ -0,0 +1,9 @@
+.placeholder {
+  &:not(.btn):not([class*="bg-"]) {
+    background-color: currentColor !important;
+  }
+
+  &:not(.avatar):not([class*="card-img-"]), {
+    border-radius: $border-radius;
+  }
+}

package/src/scss/ui/_progress.scss

@@ -16,6 +16,7 @@
   width: 100%;
   line-height: $progress-height;
   appearance: none;
+  background: var(--#{$variable-prefix}border-color-light);
 
   &::-webkit-progress-bar {
     background: $gray-100;
@@ -62,6 +63,6 @@
 
 .progress-separated {
   .progress-bar {
-    border-right: 2px solid $white;
+    border-right: 2px solid var(--#{$variable-prefix}card-bg, #{$card-bg});
   }
 }

package/src/scss/ui/_ribbons.scss

@@ -14,6 +14,11 @@
   text-transform: uppercase;
   background: $primary;
   border-color: $primary;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  min-width: 2rem;
 
   &:before {
     position: absolute;
@@ -23,14 +28,14 @@
     height: 0;
     content: "";
     filter: brightness(70%);
-    border: ($ribbon-margin / 2) solid;
+    border: ($ribbon-margin * .5) solid;
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;
   }
 
   @if $enable-extra-colors {
-    @each $color, $value in $colors {
+    @each $color, $value in $extra-colors {
       &.bg-#{$color} {
         border-color: $value;
       }

package/src/scss/ui/_status.scss

@@ -0,0 +1,172 @@
+@keyframes status-pulsate-main {
+  40% {
+    transform: scale(1.25, 1.25);
+  }
+  60% {
+    transform: scale(1.25, 1.25);
+  }
+}
+
+@keyframes status-pulsate-secondary {
+  10% {
+    transform: scale(1, 1)
+  }
+  30% {
+    transform: scale(3, 3)
+  }
+  80% {
+    transform: scale(3, 3)
+  }
+  100% {
+    transform: scale(1, 1)
+  }
+}
+
+@keyframes status-pulsate-tertiary {
+  25% {
+    transform: scale(1, 1);
+  }
+  80% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+}
+
+//
+// Status
+//
+.status {
+  --#{$variable-prefix}status-color: #{$text-muted};
+  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: .5rem .75rem;
+  gap: .5rem;
+  color: var(--#{$variable-prefix}status-color);
+  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  font-size: $font-size-base;
+  text-transform: none;
+  letter-spacing: normal;
+  border-radius: $border-radius-pill;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  margin: 0;
+
+  .status-dot {
+    background: var(--#{$variable-prefix}status-color);
+  }
+
+  .icon {
+    font-size: 1.25rem;
+  }
+}
+
+.status-lite {
+  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  background: transparent !important;
+  color: var(--#{$variable-prefix}body-text) !important;
+}
+
+@each $name, $color in theme-colors() {
+  .status-#{$name} {
+    --#{$variable-prefix}status-color: #{$color};
+    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+  }
+}
+
+//
+// Status dot
+//
+.status-dot {
+  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$variable-prefix}status-size: #{$status-dot-size};
+  position: relative;
+  display: inline-block;
+  width: var(--#{$variable-prefix}status-size);
+  height: var(--#{$variable-prefix}status-size);
+  background: var(--#{$variable-prefix}status-dot-color);
+  border-radius: $border-radius-pill;
+}
+
+.status-dot-animated {
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: inherit;
+    border-radius: inherit;
+    opacity: .6;
+    animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
+  }
+}
+
+$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
+//
+.status-indicator {
+  --#{$variable-prefix}status-indicator-size: 2.5rem;
+  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  display: block;
+  position: relative;
+  width: var(--#{$variable-prefix}status-indicator-size);
+  height: var(--#{$variable-prefix}status-indicator-size);
+}
+
+.status-indicator-circle {
+  --#{$variable-prefix}status-circle-size: .75rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: calc(var(--#{$variable-prefix}status-circle-size) / -2) 0 0 calc(var(--#{$variable-prefix}status-circle-size) / -2);
+  width: var(--#{$variable-prefix}status-circle-size);
+  height: var(--#{$variable-prefix}status-circle-size);
+  border-radius: $border-radius-pill;
+  background: var(--#{$variable-prefix}status-color);
+
+  &:nth-child(1) {
+    z-index: 3;
+  }
+
+  &:nth-child(2) {
+    z-index: 2;
+    opacity: .1;
+  }
+
+  &:nth-child(3) {
+    z-index: 1;
+    opacity: .3;
+  }
+}
+
+.status-indicator-animated {
+  .status-indicator-circle {
+    &:nth-child(1) {
+      animation: 2s linear 1s infinite backwards status-pulsate-main;
+    }
+
+    &:nth-child(2) {
+      animation: 2s linear 1s infinite backwards status-pulsate-secondary;
+    }
+
+    &:nth-child(3) {
+      animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
+    }
+  }
+}

package/src/scss/ui/_steps.scss

@@ -5,7 +5,7 @@
     padding-top: add($dot-size, 4px);
 
     &:after {
-      top: add($dot-size / 2, 2px);
+      top: add($dot-size * .5, 2px);
       height: $border-width;
     }
 
@@ -42,7 +42,7 @@
   @include step-color($primary);
 }
 
-@each $color, $value in $colors {
+@each $color, $value in $extra-colors {
   .steps-#{$color} {
     @include step-color($value);
   }

package/src/scss/ui/_switch-icon.scss

@@ -6,6 +6,7 @@
   background: transparent;
   width: $icon-size;
   height: $icon-size;
+  vertical-align: bottom;
   position: relative;
   cursor: pointer;
 
@@ -57,7 +58,7 @@
 .switch-icon-fade {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s;
+    @include transition(opacity .5s);
   }
 }
 
@@ -65,7 +66,7 @@
 .switch-icon-scale {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s, transform .0s .5s;
+    @include transition(opacity .5s, transform .0s .5s);
   }
 
   .switch-icon-b {
@@ -75,7 +76,7 @@
   &.active {
     .switch-icon-a,
     .switch-icon-b {
-      transition: opacity .0s, transform .5s;
+      @include transition(opacity .0s, transform .5s);
     }
 
     .switch-icon-b {
@@ -92,7 +93,7 @@
   .switch-icon-b {
     backface-visibility: hidden;
     transform-style: preserve-3d;
-    transition: opacity 0s .2s, transform .4s ease-in-out;
+    @include transition(opacity 0s .2s, transform .4s ease-in-out);
   }
 
   .switch-icon-a {
@@ -127,7 +128,7 @@
 
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .3s, transform .3s;
+    @include transition(opacity $transition-time, transform $transition-time);
   }
 
   .switch-icon-a {

package/src/scss/ui/_tables.scss

@@ -1,22 +1,25 @@
 .table {
   thead {
     th {
-      color: $table-head-color;
-      background: $table-head-bg;
+      color: $table-th-color;
+      background: $table-th-bg;
       @include subheader;
-      padding-top: $table-head-padding-y;
-      padding-bottom: $table-head-padding-y;
+      padding-top: $table-th-padding-y;
+      padding-bottom: $table-th-padding-y;
+      white-space: nowrap;
 
       @media print {
         background: transparent;
       }
     }
   }
+
+  > :not(:first-child) {
+    border-top-width: $table-border-width;
+  }
 }
 
 .table-responsive {
-  margin-bottom: $spacer;
-
   .table {
     margin-bottom: 0;
   }
@@ -94,4 +97,48 @@
       }
     }
   }
+}
+
+.table-sort {
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  border: 0;
+  background: inherit;
+  display: block;
+  width: 100%;
+  text-align: inherit;
+  @include transition(color $transition-time);
+
+  margin: (-$table-th-padding-y) (-$table-th-padding-x);
+  padding: $table-th-padding-y $table-th-padding-x;
+
+  &:hover,
+  &.asc,
+  &.desc {
+    color: $body-color;
+  }
+
+  &:after,
+  &.asc:after,
+  &.desc:after {
+    content: '';
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: bottom;
+    background: $table-sort-bg-image no-repeat center;
+    opacity: .2;
+  }
+
+  &.asc:after {
+    background: $table-sort-desc-bg-image no-repeat center;
+    opacity: 1;
+  }
+
+  &.desc:after {
+    background: $table-sort-asc-bg-image no-repeat center;
+    opacity: 1;
+  }
 }