@tabler/core 1.0.0-beta10 → 1.0.0-beta11

package/src/scss/ui/_buttons.scss

@@ -1,47 +1,44 @@
+//
+// Button
+//
 .btn {
-  --#{$variable-prefix}btn-color-text-rgb: var(--#{$variable-prefix}body-color-rgb);
+  --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-color: var(--#{$prefix}color-text);
+  --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+  //background-color: var(--#{$prefix}btn-color, var(--#{$prefix}card-bg));
+  //color: var(--#{$prefix}btn-color-text);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  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: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color-text-rgb), #{$border-active-opacity});
-  }
-
-  &:focus:not([disabled]):not(.disabled) {
-    border-color: var(--#{$variable-prefix}btn-color, #{$primary});
-  }
-
-  &:disabled,
-  &.disabled {
-    cursor: not-allowed;
-  }
+  //&:hover {
+  //  color: var(--#{$prefix}btn-color-text);
+  //  border-color: rgba(var(--#{$prefix}btn-color-text-rgb), #{$border-active-opacity});
+  //}
+  //
+  //&:focus:not([disabled]):not(.disabled) {
+  //  border-color: var(--#{$prefix}btn-color, #{$primary});
+  //}
 
   .icon {
-    width: $icon-size;
-    height: $icon-size;
-    min-width: $icon-size;
-    margin: 0 .5rem 0 -.25rem;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    min-width: var(--#{$prefix}btn-icon-size);
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
     vertical-align: bottom;
     color: inherit;
   }
 
   .avatar {
-    width: 1.25rem;
-    height: 1.25rem;
-    vertical-align: text-top;
-    margin: 0 .5rem 0 -.25rem;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
   }
 
   .icon-right {
-    margin: 0 -.25rem 0 .5rem;
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
   }
 
   .badge {
@@ -49,40 +46,6 @@
   }
 }
 
-%btn-color {
-  border-color: $border-color-dark-transparent;
-
-  &:hover {
-    color: var(--#{$variable-prefix}btn-color-text);
-    background: var(--#{$variable-prefix}btn-color-interactive);
-    border-color: var(--#{$variable-prefix}btn-color);
-  }
-}
-
-%btn-outline {
-  background-color: transparent;
-  color: var(--#{$variable-prefix}btn-color);
-  border-color: var(--#{$variable-prefix}btn-color);
-
-  &:hover {
-    background-color: var(--#{$variable-prefix}btn-color);
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: var(--#{$variable-prefix}btn-color);
-  }
-}
-
-%btn-ghost {
-  background: transparent;
-  color: var(--#{$variable-prefix}btn-color);
-  border-color: transparent;
-
-  &:hover {
-    background-color: var(--#{$variable-prefix}btn-color);
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: var(--#{$variable-prefix}btn-color);
-  }
-}
-
 .btn-link {
   color: $link-color;
   background-color: transparent;
@@ -98,12 +61,43 @@
   }
 }
 
-.btn-lg {
-  svg.icon {
-    stroke-width: 2;
+//
+// Button color variations
+//
+.btn-white {
+  --#{$prefix}btn-bg: var(--#{$prefix}card-bg);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg);
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-color: #{color-contrast($value)};
   }
 }
 
+@each $color, $value in $theme-colors {
+  .btn-ghost-#{$color} {
+    @include button-ghost-variant($value);
+  }
+}
+
+//
+// Button sizes
+//
+.btn-sm, .btn-group-sm > .btn {
+  --#{$prefix}btn-line-height: 1.5;
+  --#{$prefix}btn-icon-size: .75rem;
+}
+
+.btn-lg, .btn-group-lg > .btn {
+  --#{$prefix}btn-line-height: 1.5;
+  --#{$prefix}btn-icon-size: 2rem;
+}
+
+//
+// Button shapes
+//
 .btn-pill {
   padding-right: 1.5em;
   padding-left: 1.5em;
@@ -114,22 +108,27 @@
   }
 }
 
-.btn-icon {
-  min-width: add($btn-line-height * $btn-font-size + $btn-padding-y * 2, $btn-border-width * 2);
+.btn-square {
+  border-radius: 0;
+}
 
-  &.btn-sm {
-    min-width: add($btn-line-height * $btn-font-size-sm + $btn-padding-y-sm * 2, $btn-border-width * 2);
-  }
+//
+// Icon button
+//
+.btn-icon {
+  min-width: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  padding-left: 0;
+  padding-right: 0;
 
   .icon {
-    margin: 0 -1em;
+    margin: calc(-1 * var(--#{$prefix}btn-padding-x));
   }
 }
 
-.btn-square {
-  border-radius: 0;
-}
-
+//
+// Button list
+//
 .btn-list {
   display: flex;
   flex-wrap: wrap;
@@ -141,6 +140,9 @@
   }
 }
 
+//
+// Button floating
+//
 .btn-floating {
   position: fixed;
   z-index: $zindex-fixed;
@@ -149,54 +151,36 @@
   border-radius: $border-radius-pill;
 }
 
+//
+// Button loading
+//
 .btn-loading {
   position: relative;
   color: transparent !important;
   text-shadow: none !important;
   pointer-events: none;
 
+  > * {
+    opacity: 0;
+  }
+
   &:after {
     content: '';
     display: inline-block;
     vertical-align: text-bottom;
-    border: $spinner-border-width-sm solid currentColor;
+    border: $spinner-border-width solid currentColor;
     border-right-color: transparent;
     border-radius: $border-radius-pill;
-    color: $white;
+    color: var(--#{$prefix}btn-color);
     position: absolute;
-    width: 1rem;
-    height: 1rem;
-    left: calc(50% - .5rem);
-    top: calc(50% - .5rem);
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+    top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border .75s linear infinite;
   }
 }
 
-//
-// Button color variations
-//
-@each $name, $color in theme-colors() {
-  .btn-#{$name},
-  .btn-outline-#{$name},
-  .btn-ghost-#{$name} {
-    --#{$variable-prefix}btn-color: #{$color};
-    --#{$variable-prefix}btn-color-interactive: #{theme-color-darker($color)};
-    --#{$variable-prefix}btn-color-text: #{color-contrast($color)};
-  }
-
-  .btn-#{$name} {
-    @extend %btn-color;
-  }
-
-  .btn-outline-#{$name} {
-    @extend %btn-outline;
-  }
-
-  .btn-ghost-#{$name} {
-    @extend %btn-ghost;
-  }
-}
-
 //
 // Action button
 //

package/src/scss/ui/_cards.scss

@@ -1,9 +1,9 @@
 .card {
-  --#{$variable-prefix}card-border-radius: #{$card-border-radius};
+  --#{$prefix}card-border-radius: #{$card-border-radius};
   box-shadow: $card-shadow;
   border: $card-border-width solid $card-border-color;
-  background: var(--#{$variable-prefix}card-bg, #{$card-bg});
-  border-radius: var(--#{$variable-prefix}card-border-radius);
+  background: var(--#{$prefix}card-bg, #{$card-bg});
+  border-radius: var(--#{$prefix}card-border-radius);
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
   @media print {
@@ -54,8 +54,8 @@
 }
 
 .card-stamp-icon {
-  background: $text-muted;
-  color: $white;
+  background: var(--#{$prefix}muted);
+  color: var(--#{$prefix}card-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -129,7 +129,7 @@
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
   @include transition(background $transition-time);
-  border-top: 1px solid var(--#{$variable-prefix}border-color);
+  border-top: 1px solid var(--#{$prefix}border-color);
   flex: 1;
   color: inherit;
   font-weight: $font-weight-medium;
@@ -140,7 +140,7 @@
   }
 
   & + & {
-    border-left: 1px solid var(--#{$variable-prefix}border-color);
+    border-left: 1px solid var(--#{$prefix}border-color);
   }
 }
 
@@ -156,7 +156,7 @@
     content: "";
     background: $card-bg;
     border: 1px solid $card-border-color;
-    border-radius: var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius) 0 0;
+    border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
   }
 }
 
@@ -204,13 +204,13 @@
   background: transparent;
 
   &:first-child {
-    border-radius: var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius) 0 0;
+    border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
   }
 }
 
 .card-header-light {
   border-bottom-color: transparent;
-  background: var(--#{$variable-prefix}light);
+  background: var(--#{$prefix}light);
 }
 
 .card-header-tabs {
@@ -259,7 +259,7 @@
   margin-top: auto;
 
   &:last-child {
-    border-radius: 0 0 var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius);
+    border-radius: 0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius);
   }
 }
 
@@ -384,7 +384,7 @@ Card status
   right: 0;
   left: 0;
   height: $card-status-size;
-  border-radius: var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius) 0 0;
+  border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
 }
 
 .card-status-start {
@@ -393,7 +393,7 @@ Card status
   bottom: 0;
   width: $card-status-size;
   height: 100%;
-  border-radius: var(--#{$variable-prefix}card-border-radius) 0 0 var(--#{$variable-prefix}card-border-radius);
+  border-radius: var(--#{$prefix}card-border-radius) 0 0 var(--#{$prefix}card-border-radius);
 }
 
 .card-status-bottom {
@@ -402,7 +402,7 @@ Card status
   bottom: 0;
   width: 100%;
   height: $card-status-size;
-  border-radius: 0 0 var(--#{$variable-prefix}card-border-radius) var(--#{$variable-prefix}card-border-radius);
+  border-radius: 0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius);
 }
 
 /**
@@ -412,40 +412,37 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
-    .card-header ~ .table-responsive &,
-    .card-header ~ & {
-      &:first-child td {
-        //border-top: 0;
-      }
-    }
-
     td,
     th {
-      //border-top: 1px solid $border-color;
-
       &:first-child {
         padding-left: $card-spacer-x;
+        border-left: 0;
       }
 
       &:last-child {
         padding-right: $card-spacer-x;
+        border-right: 0;
       }
     }
   }
 
-  thead {
+  thead,
+  tbody,
+  tfoot {
     tr {
       &:first-child {
+        border-top: 0;
+
         td,
         th {
           border-top: 0;
         }
       }
     }
-  }
 
-  tbody {
     tr:last-child {
+      border-bottom: 0;
+
       td,
       th {
         border-bottom: 0;
@@ -491,7 +488,7 @@ Card avatar
   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));
+  margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * .5));
 }
 
 /*
@@ -599,7 +596,7 @@ Card list group
   }
 
   .nav-tabs + .tab-content .card {
-    border-bottom-left-radius: var(--#{$variable-prefix}card-border-radius);
+    border-bottom-left-radius: var(--#{$prefix}card-border-radius);
     border-top-left-radius: 0;
   }
 }

package/src/scss/ui/_carousel.scss

@@ -45,7 +45,7 @@
 
     &:before {
       content: '';
-      padding-top: var(--#{$variable-prefix}aspect-ratio, 100%);
+      padding-top: var(--#{$prefix}aspect-ratio, 100%);
       display: block;
     }
   }

package/src/scss/ui/_datagrid.scss

@@ -0,0 +1,17 @@
+//
+// Base styles
+//
+
+.datagrid {
+  --#{$prefix}datagrid-padding: #{$datagrid-padding};
+  --#{$prefix}datagrid-item-width: #{$datagrid-item-width};
+
+  display: grid;
+  grid-gap: var(--#{$prefix}datagrid-padding);
+  grid-template-columns: repeat(auto-fit, minmax(var(--#{$prefix}datagrid-item-width), 1fr));
+}
+
+.datagrid-title {
+  @include subheader;
+  margin-bottom: .25rem;
+}

package/src/scss/ui/_flags.scss

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

package/src/scss/ui/_forms.scss

@@ -7,6 +7,7 @@ textarea {
 /**
 Form label
  */
+.col-form-label,
 .form-label {
   display: block;
   font-weight: $font-weight-medium;
@@ -57,7 +58,7 @@ Form select
  */
 .form-select {
   &:-moz-focusring {
-    color: var(--#{$variable-prefix}body-color);
+    color: var(--#{$prefix}body-color);
   }
 }
 
@@ -66,8 +67,8 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px var(--#{$variable-prefix}body-bg) inset;
-    color: var(--#{$variable-prefix}body-color);
+    box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
+    color: var(--#{$prefix}body-color);
   }
 
   &:disabled,
@@ -138,8 +139,8 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: var(--#{$variable-prefix}body-bg);
-  border: 1px solid var(--#{$variable-prefix}border-color);
+  background: var(--#{$prefix}body-bg);
+  border: 1px solid var(--#{$prefix}border-color);
   border-radius: $border-radius;
 }
 
@@ -159,7 +160,7 @@ Form help
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: var(--tblr-border-color-light);
+  background: var(--#{$prefix}border-color-light);
   border-radius: $border-radius-pill;
   @include transition(background-color $transition-time, color $transition-time);
 

package/src/scss/ui/_grid.scss

@@ -8,7 +8,7 @@
 
 %container-common {
   @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$variable-prefix}gutter-x: #{$grid-gutter-width};
+    --#{$prefix}gutter-x: #{$grid-gutter-width};
   }
 }
 
@@ -56,8 +56,8 @@
 }
 
 .row-cards {
-  --#{$variable-prefix}gutter-x: #{$cards-grid-gap};
-  --#{$variable-prefix}gutter-y: #{$cards-grid-gap};
+  --#{$prefix}gutter-x: #{$cards-grid-gap};
+  --#{$prefix}gutter-y: #{$cards-grid-gap};
   min-width: 0;
 
   .row-cards {
@@ -65,8 +65,8 @@
   }
 
   @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$variable-prefix}gutter-x: #{$cards-grid-gap * .5};
-    --#{$variable-prefix}gutter-y: #{$cards-grid-gap * .5};
+    --#{$prefix}gutter-x: #{$cards-grid-gap * .5};
+    --#{$prefix}gutter-y: #{$cards-grid-gap * .5};
   }
 }
 

package/src/scss/ui/_legend.scss

@@ -1,6 +1,6 @@
 .legend {
   display: inline-block;
-  background: var(--#{$variable-prefix}border-color-light);
+  background: var(--#{$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 var(--#{$variable-prefix}border-color);
+  border-bottom: 1px solid var(--#{$prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -21,11 +21,11 @@
 }
 
 .list-group-item {
-  background-color: rgba(27,125,241,0.02);
+  background-color: inherit;
 }
 
 .list-group-item.active {
-  background-color: inherit;
+  background-color: rgba(27,125,241,0.02);
   border-left-color: $yellow;
   border-left-width: $border-width-wide;
 }
@@ -34,7 +34,7 @@
   &:active,
   &:focus,
   &:hover{
-    background-color: inherit;
+    background-color: rgba(27,125,241,0.02);
   }
 }
 

package/src/scss/ui/_modals.scss

@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: 1px solid var(--#{$variable-prefix}border-color);
+    border-top: 1px solid var(--#{$prefix}border-color);
   }
 }
 

package/src/scss/ui/_nav.scss

@@ -7,7 +7,7 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: 1px solid var(--#{$variable-prefix}border-color);
+    border-left: 1px solid var(--#{$prefix}border-color);
     padding-left: .5rem;
   }
 

package/src/scss/ui/_offcanvas.scss

@@ -1,5 +1,5 @@
 .offcanvas {
-  background: var(--#{$variable-prefix}card-bg);
+  background: var(--#{$prefix}card-bg);
 }
 
 .offcanvas-header {

package/src/scss/ui/_progress.scss

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