@tabler/core 1.0.0-beta → 1.0.0-beta5

package/src/scss/ui/_buttons.scss

@@ -1,21 +1,22 @@
 .btn {
+  --#{$variable-prefix}btn-color-text-rgb: var(--#{$variable-prefix}body-color-rgb);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: $body-color;
-  background-color: $white;
-  border-color: $border-color-dark-transparent;
+  border-color: var(--#{$variable-prefix}border-color);
   white-space: nowrap;
 
+  background-color: var(--#{$variable-prefix}btn-color, var(--#{$variable-prefix}card-bg));
+  color: var(--#{$variable-prefix}btn-color-text);
+
   &:hover {
-    color: $body-color;
-    border-color: $text-muted-light;
-    background-color: $light;
+    color: var(--#{$variable-prefix}btn-color-text);
+    border-color: rgba(var(--#{$variable-prefix}btn-color-text-rgb), #{$border-active-opacity});
   }
 
-  &:focus {
-    border-color: rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), .5);
-    box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), $input-btn-focus-color-opacity)
+  &:focus:not([disabled]):not(.disabled) {
+    border-color: var(--#{$variable-prefix}btn-color, #{$primary});
   }
 
   &:disabled,
@@ -27,23 +28,20 @@
     width: $icon-size;
     height: $icon-size;
     min-width: $icon-size;
-    margin: 0 .5rem 0;
-    margin-inline-start: -.25rem;
+    margin: 0 .5rem 0 -.25rem;
     vertical-align: bottom;
-    color: $text-muted;
+    color: inherit;
   }
 
   .avatar {
     width: 1.25rem;
     height: 1.25rem;
     vertical-align: text-top;
-    margin: 0 .5rem 0;
-    margin-inline-start: -.25rem;
+    margin: 0 .5rem 0 -.25rem;
   }
 
   .icon-right {
-    margin: 0 .5rem 0;
-    margin-inline-end: -.25rem;
+    margin: 0 -.25rem 0 .5rem;
   }
 
   .badge {
@@ -52,45 +50,36 @@
 }
 
 %btn-color {
-  background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  color: var(--#{$variable-prefix}btn-color-text);
-
-  .icon {
-    color: inherit;
-  }
+  border-color: $border-color-dark-transparent;
 
   &:hover {
     color: var(--#{$variable-prefix}btn-color-text);
-    background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
-    border-color: transparent;
+    background: var(--#{$variable-prefix}btn-color-interactive);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
 %btn-outline {
   background-color: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  border-color: $border-color-transparent;
-
-  .icon {
-    color: inherit;
-  }
+  color: var(--#{$variable-prefix}btn-color);
+  border-color: var(--#{$variable-prefix}btn-color);
 
   &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    background-color: var(--#{$variable-prefix}btn-color);
     color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
 %btn-ghost {
   background: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
+  color: var(--#{$variable-prefix}btn-color);
   border-color: transparent;
 
   &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    background-color: var(--#{$variable-prefix}btn-color);
     color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
@@ -183,11 +172,13 @@
   }
 }
 
-
+//
+// Button color variations
+//
 $btn-colors: $theme-colors;
 
 @if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $colors);
+  $btn-colors: map-merge($btn-colors, $extra-colors);
 }
 
 @if $enable-social-colors {
@@ -198,8 +189,8 @@ $btn-colors: $theme-colors;
   .btn-#{$name},
   .btn-outline-#{$name},
   .btn-ghost-#{$name} {
-    --#{$variable-prefix}btn-color: #{hex-to-rgb($color)};
-    --#{$variable-prefix}btn-color-darker: #{hex-to-rgb(theme-color-darker($color))};
+    --#{$variable-prefix}btn-color: #{$color};
+    --#{$variable-prefix}btn-color-interactive: #{theme-color-darker($color)};
     --#{$variable-prefix}btn-color-text: #{color-contrast($color)};
   }
 

package/src/scss/ui/_calendars.scss

@@ -28,8 +28,8 @@
 }
 
 .calendar-date {
-  flex: 0 0 (100% / 7);
-  max-width: (100% / 7);
+  flex: 0 0 divide(100%, 7);
+  max-width: divide(100%, 7);
   padding: .2rem;
   text-align: center;
   border: 0;
@@ -55,7 +55,7 @@
     border: 1px solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
-    transition: background .3s, border .3s, box-shadow .32s, color .3s;
+    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
       color: $primary;

package/src/scss/ui/_cards.scss

@@ -1,5 +1,4 @@
 .border-0 {
-
   .card, .nav-link {
     border: 0 !important;
   }
@@ -7,12 +6,12 @@
   .card-stacked::after {
     border: 1px solid rgba($text-muted, 0.07) !important;
   }
-
 }
 
 .card {
   box-shadow: $card-shadow;
   border: $card-border-width solid $card-border-color;
+  background: var(--#{$variable-prefix}card-bg, #{$card-bg});
 
   @media print {
     border: none;
@@ -21,7 +20,7 @@
 
   @at-root a#{&} {
     color: inherit;
-    transition: .3s box-shadow;
+    @include transition(box-shadow $transition-time);
 
     &:hover {
       text-decoration: none;
@@ -31,17 +30,27 @@
 }
 
 
-
+// Card image
 .card-img,
-.card-img-left {
+.card-img-start {
   @include border-start-radius($card-inner-border-radius);
 }
 
 .card-img,
-.card-img-right {
+.card-img-end {
   @include border-end-radius($card-inner-border-radius);
 }
 
+.card-img-overlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.card-img-overlay-dark {
+  background-image: $overlay-gradient;
+}
+
 .card-inactive {
   pointer-events: none;
   box-shadow: none;
@@ -84,8 +93,8 @@
   justify-content: center;
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
-  transition: .3s background;
-  border-top: 1px solid $border-color;
+  @include transition(background $transition-time);
+  border-top: 1px solid var(--#{$variable-prefix}border-color);
   flex: 1;
   color: inherit;
   font-weight: $font-weight-medium;
@@ -95,8 +104,8 @@
     background: $active-bg;
   }
 
-  &:not(:first-child) {
-    border-left: 1px solid $border-color;
+  & + & {
+    border-left: 1px solid var(--#{$variable-prefix}border-color);
   }
 }
 
@@ -168,10 +177,18 @@
   flex: 1;
 }
 
+/*
+Card footer
+ */
 .card-footer {
   margin-top: auto;
 }
 
+.card-footer-gray {
+  border-top: 0;
+  background: $gray-50;
+}
+
 .card-progress {
   height: .25rem;
 
@@ -207,9 +224,12 @@
 
 .card-subtitle {
   margin-top: -$card-spacer-y;
-  margin-bottom: $card-spacer-y;
-  font-size: $small-font-size;
+  margin-bottom: $card-title-spacer-y;
   color: $text-muted;
+
+  .card-header & {
+    margin: -.125rem 0 0;
+  }
 }
 
 .card-body {
@@ -392,7 +412,10 @@ Card chart
 Card avatar
  */
 .card-avatar {
-  box-shadow: 0 0 0 .5rem $card-bg;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: 0 0 0 .25rem $card-bg;
+  margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5));
 }
 
 /*

package/src/scss/ui/_flags.scss

@@ -24,7 +24,7 @@ $countries: (
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid $border-color;
+  border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: 3px;
 }
 

package/src/scss/ui/_forms.scss

@@ -9,6 +9,7 @@ Form label
  */
 .form-label {
   display: block;
+  font-weight: $font-weight-medium;
 
   &.required {
     &:after {
@@ -30,11 +31,8 @@ Form hint
  */
 .form-hint {
   display: block;
-  font-size: $h5-font-size;
-  line-height: $h5-line-height;
   color: $text-muted;
 
-
   &:last-child {
     margin-bottom: 0;
   }
@@ -44,7 +42,7 @@ Form hint
   }
 
   .form-label + & {
-    margin-top: -.5rem;
+    margin-top: -.25rem;
   }
 
   .input-group + &,
@@ -59,7 +57,8 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px $white inset;
+    box-shadow: 0 0 0 1000px var(--#{$variable-prefix}body-bg) inset;
+    color: var(--#{$variable-prefix}body-color);
   }
 
   &:disabled,
@@ -130,8 +129,8 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: $min-black;
-  border: 1px solid $border-color;
+  background: var(--#{$variable-prefix}border-color-light);
+  border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: $border-radius;
 }
 
@@ -151,9 +150,9 @@ Form help
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: $min-white;
+  background: $gray-100;
   border-radius: $border-radius-pill;
-  transition: .3s background-color, .3s color;
+  @include transition(background-color $transition-time, color $transition-time);
 
   &:hover,
   &[aria-describedby] {
@@ -199,7 +198,7 @@ Input group
 
   .input-group-text {
     background: transparent;
-    transition: $input-transition;
+    @include transition($input-transition);
 
     &:first-child {
       padding-right: 0;

package/src/scss/ui/_grid.scss

@@ -64,8 +64,8 @@
   }
 
   @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$variable-prefix}gutter-x: #{$cards-grid-gap / 2};
-    --#{$variable-prefix}gutter-y: #{$cards-grid-gap / 2};
+    --#{$variable-prefix}gutter-x: #{$cards-grid-gap * .5};
+    --#{$variable-prefix}gutter-y: #{$cards-grid-gap * .5};
   }
 }
 
@@ -94,11 +94,11 @@
     }
 
     > :not(template):not(:first-child) {
-      padding-top: $size/2 !important;
+      padding-top: $size !important;
     }
 
     > :not(template):not(:last-child) {
-      padding-bottom: $size/2 !important;
+      padding-bottom: $size !important;
     }
   }
 
@@ -108,11 +108,11 @@
     }
 
     > :not(template):not(:first-child) {
-      padding-left: $size/2 !important;
+      padding-left: $size !important;
     }
 
     > :not(template):not(:last-child) {
-      padding-right: $size/2 !important;
+      padding-right: $size !important;
     }
   }
 }

package/src/scss/ui/_icons.scss

@@ -14,9 +14,10 @@
 }
 
 .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 {

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 {
@@ -34,7 +34,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

@@ -3,7 +3,6 @@ Markdown
  */
 .markdown {
   line-height: $line-height-lg;
-  font-size: $h4-font-size;
 
   > :first-child {
     margin-top: 0;
@@ -14,34 +13,6 @@ Markdown
     margin-bottom: 0;
   }
 
-  > {
-    h1, h2, h3, h4, h5, h6 {
-      margin-top: 2rem;
-      margin-bottom: .5rem;
-      font-weight: $font-weight-bold;
-    }
-
-    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;
@@ -49,11 +20,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

@@ -10,9 +10,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 +25,32 @@
   }
 }
 
-.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;
-    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);
-    }
+    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;
+  }
 
-    &.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 +63,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 +85,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/_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});
   }
 }