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

package/src/scss/ui/_avatars.scss

@@ -1,5 +1,6 @@
 .avatar {
   --#{$variable-prefix}avatar-size: #{$avatar-size};
+  --#{$variable-prefix}avatar-bg: var(--#{$variable-prefix}border-color-light);
   position: relative;
   width: var(--#{$variable-prefix}avatar-size);
   height: var(--#{$variable-prefix}avatar-size);
@@ -13,12 +14,12 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: $gray-200 no-repeat center/cover;
+  background: var(--#{$variable-prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
 
   svg {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
+    height: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
   }
 
   .badge {
@@ -44,8 +45,8 @@
   }
 
   .avatar-#{$avatar-size} .badge:empty {
-    width: $size / 4;
-    height: $size / 4;
+    width: $size * .25;
+    height: $size * .25;
   }
 }
 
@@ -54,6 +55,7 @@
   display: inline-flex;
   padding: 0;
   margin: 0 0 -.5rem;
+  flex-wrap: wrap;
 
   .avatar {
     margin-bottom: .5rem;
@@ -73,11 +75,7 @@
 .avatar-list-stacked {
   .avatar {
     margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px $white;
-
-    @at-root .card-footer & {
-      box-shadow: 0 0 0 2px $card-cap-bg;
-    }
+    box-shadow: 0 0 0 2px var(--#{$variable-prefix}card-bg);
   }
 }
 
@@ -87,7 +85,7 @@
   border: 1px dashed $border-color;
   background: $form-check-input-bg;
   flex-direction: column;
-  transition: .3s color, .3s background-color;
+  @include transition(color $transition-time, background-color $transition-time);
 
   svg {
     width: 1.5rem;
@@ -107,3 +105,10 @@
   line-height: 1;
   margin-top: .25rem;
 }
+
+.page-avatar {
+  .page-cover ~ * & {
+    margin-top: calc(calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5)) - #{$content-padding-y});
+    box-shadow: 0 0 0 .25rem $body-bg;
+  }
+}

package/src/scss/ui/_badges.scss

@@ -1,14 +1,14 @@
 .badge {
-  display: inline-flex;
   justify-content: center;
   align-items: center;
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  padding: calc(.25rem - 1px) .25rem;
-  height: 1.25rem;
   border: 1px solid transparent;
-  min-width: 1.25rem;
+  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
+  font-weight: $headings-font-weight;
+  letter-spacing: .04em;
+  vertical-align: bottom;
 
   @at-root a#{&} {
     color: $white;
@@ -22,6 +22,7 @@
     min-height: auto;
     padding: 0;
     border-radius: $border-radius-pill;
+    vertical-align: baseline;
   }
 
   .avatar {
@@ -30,6 +31,19 @@
     height: 1.25rem;
     margin: 0 .5rem 0 -.5rem;
   }
+
+  .icon {
+    width: 1em;
+    height: 1em;
+    font-size: 1rem;
+    stroke-width: 2;
+  }
+}
+
+.badge-sm {
+  font-size: $h6-font-size;
+  line-height: $h6-line-height;
+  padding: 0 .25rem;
 }
 
 // bordered
@@ -39,6 +53,5 @@
 }
 
 .badge-pill {
-  border-radius: 100px;
-  min-width: 1.75em;
+  border-radius: $border-radius-pill;
 }

package/src/scss/ui/_breadcrumbs.scss

@@ -2,6 +2,14 @@
   padding: 0;
   margin: 0;
   background: transparent;
+
+  a {
+    color: $text-muted;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .breadcrumb-item {
@@ -15,22 +23,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    .breadcrumb-item + .breadcrumb-item:before {
-      content: $symbol;
-    }
-  }
-}
-
-.breadcrumb-alternate {
-  a {
-    color: $text-muted;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .breadcrumb-item.active {
-    color: inherit;
+    --#{$variable-prefix}breadcrumb-divider: "#{quote($symbol)}";
   }
 }

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,23 +172,15 @@
   }
 }
 
-
-$btn-colors: $theme-colors;
-
-@if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $colors);
-}
-
-@if $enable-social-colors {
-  $btn-colors: map-merge($btn-colors, $social-colors);
-}
-
-@each $name, $color in $btn-colors {
+//
+// Button color variations
+//
+@each $name, $color in 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)};
   }
 
@@ -214,4 +195,50 @@ $btn-colors: $theme-colors;
   .btn-ghost-#{$name} {
     @extend %btn-ghost;
   }
+}
+
+//
+// Action button
+//
+.btn-action {
+  padding: 0;
+  border: 0;
+  color: $text-muted;
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius;
+
+  &:after {
+    content: none;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:hover,
+  &.show {
+    color: $body-color;
+    background: $body-bg;
+  }
+
+  &.show {
+    color: $primary;
+  }
+
+  .icon {
+    margin: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+    stroke-width: 1;
+  }
+}
+
+.btn-actions {
+  display: flex;
 }

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;