@tabler/core 1.0.0-alpha.24 → 1.0.0-beta11

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;
+  }
 }

package/src/scss/ui/_toasts.scss

@@ -1,7 +1,20 @@
-.toast-header {
-  user-select: none;
+.toast {
+  background: $white;
+  border: $alert-border-width solid $alert-border-color;
+  border-left: .25rem solid var(--#{$prefix}toast-color);
+  box-shadow: $alert-shadow;
+
+  .toast-header {
+    user-select: none;
+  }
+
+  button[data-bs-dismiss="toast"] {
+    outline: none;
+  }
 }
 
-.toast button[data-bs-dismiss="toast"] {
-  outline: none;
+@each $state, $value in $theme-colors {
+  .toast-#{$state} {
+    --#{$prefix}toast-color: #{$value};
+  }
 }

package/src/scss/ui/_type.scss

@@ -8,14 +8,6 @@ a {
   text-decoration-skip-ink: auto;
 }
 
-ul,
-ol {
-  margin: 0 0 1rem 0;
-  margin-inline-start: 1rem;
-  padding: 0;
-  padding-inline-start: 1rem;
-}
-
 h1,
 h2,
 h3,
@@ -30,6 +22,10 @@ h6,
 .h6 {
   a {
     color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
   }
 }
 
@@ -81,6 +77,10 @@ blockquote {
   }
 }
 
+ul, ol {
+  padding-left: 1.5rem;
+}
+
 hr {
   margin: 2rem 0;
 }
@@ -105,7 +105,7 @@ code {
 pre {
   padding: 1rem;
   overflow: auto;
-  font-size: $code-font-size;
+  font-size: $h5-font-size;;
   hyphens: none;
   line-height: $code-line-height;
   tab-size: 3;

package/src/scss/ui/forms/_form-check.scss

@@ -11,10 +11,10 @@ Form check
 
 .form-check-input {
   background-size: $form-check-input-width;
-  margin-top: ($form-check-min-height - $form-check-input-width) / 2;
+  margin-top: ($form-check-min-height - $form-check-input-width) * .5;
 
   .form-switch & {
-    transition: .3s background-color, .3s background-position;
+    @include transition(background-color$transition-time, background-position $transition-time);
   }
 }
 
@@ -52,6 +52,14 @@ Form switch
 .form-switch {
   .form-check-input {
     height: $form-switch-height;
-    margin-top: ($form-check-min-height - $form-switch-height) / 2;
+    margin-top: ($form-check-min-height - $form-switch-height) * .5;
+  }
+}
+
+.form-switch-lg {
+  .form-check-input {
+    height: 1.5rem;
+    width: 2.75rem;
+    background-size: 1.5rem;
   }
 }

package/src/scss/ui/forms/_form-colorinput.scss

@@ -34,7 +34,7 @@ Color Input
     background: no-repeat center center/$form-check-input-checked-bg-size;
     background-image: escape-svg($form-check-input-checked-bg-image);
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-colorinput-input:checked ~ & {
       opacity: 1;

package/src/scss/ui/forms/_form-custom.scss

@@ -14,3 +14,15 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   -webkit-appearance: none;
 }
 
+/**
+Form control dark theme fix
+ */
+.form-control {
+  &::file-selector-button {
+    background-color: var(--#{$prefix}btn-color, #{$form-file-button-bg});
+  }
+
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: var(--#{$prefix}btn-color, #{$form-file-button-hover-bg});
+  }
+}

package/src/scss/ui/forms/_form-imagecheck.scss

@@ -18,7 +18,7 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: 1px solid $border-color;
+  border: 1px solid var(--#{$prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
@@ -27,7 +27,7 @@ Image check
   }
 
   .form-imagecheck-input:checked ~ & {
-    border-color: $border-color;
+    border-color: $primary;
   }
 
   &:before {
@@ -45,7 +45,7 @@ Image check
     background: $white;
     border: 1px solid $border-color;
     border-radius: 3px;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
       background-color: $form-check-input-checked-bg-color;
@@ -62,7 +62,7 @@ Image check
   max-width: 100%;
   display: block;
   opacity: .64;
-  transition: .3s opacity;
+  @include transition(opacity $transition-time);
 
   &:first-child {
     border-top-left-radius: 2px;
@@ -86,7 +86,7 @@ Image check
   font-size: $font-size-sm;
   color: $text-muted;
   text-align: center;
-  transition: .3s color;
+  @include transition(color $transition-time);
 
   .form-imagecheck:hover &,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure &,

package/src/scss/ui/forms/_form-selectgroup.scss

@@ -43,7 +43,7 @@ Select group
   user-select: none;
   border: 1px solid $input-border-color;
   border-radius: 3px;
-  transition: border-color .3s, background .3s, color .3s;
+  @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
     margin: 0 -.25rem;
@@ -86,17 +86,23 @@ Select group
   }
 }
 
+.form-selectgroup-check-floated {
+  position: absolute;
+  top: $input-btn-padding-y;
+  right: $input-btn-padding-y;
+}
+
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: $primary;
   background: rgba($primary, .04);
-  border-color: $input-focus-border-color;
+  border-color: $primary;
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
   color: $primary;
-  border-color: $input-focus-border-color;
+  border-color: $primary;
   box-shadow: $input-btn-focus-box-shadow;
 }
 

package/src/scss/ui/forms/_validation.scss

@@ -1,5 +1,5 @@
 %validation-lite {
-  border-color: $input-border-color;
+  border-color: var(--#{$prefix}border-color) !important;
 }
 
 @each $state, $data in $form-validation-states {

package/src/scss/utils/_background.scss

@@ -1,11 +1,11 @@
 .bg-white-overlay {
   color: $white;
-  background-color: $light-white;
+  background-color: rgba($light, .24);
 }
 
 .bg-dark-overlay {
   color: $white;
-  background-color: $light-black;
+  background-color: rgba($dark, .24);
 }
 
 .bg-cover {

package/src/scss/utils/_colors.scss

@@ -1,33 +1,20 @@
 // stylelint-disable declaration-no-important
 
-/**
-SOCIAL COLORS
- */
-@each $color, $value in $social-colors {
-  .bg-#{$color} {
-    color: #fff !important;
-    background: $value !important;
+// All colors
+@each $color, $value in $theme-colors {
+  .bg-#{"" + $color} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
-  .text-#{$color} {
+  .bg-#{"" + $color}-lt {
     color: $value !important;
+    background: theme-color-lighter($value, true) !important;
   }
 }
 
-
-@if $enable-extra-colors {
-  @each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
-    .bg-#{$color} {
-      background: $value;
-    }
-
-    .text-#{$color} {
-      color: $value !important;
-    }
-
-    .bg-#{$color}-lt {
-      color: theme-color-darker($value) !important;
-      background: theme-color-lighter($value, true) !important;
-    }
+@each $color, $value in $theme-colors {
+  .text-#{"" + $color} {
+    color: var(--#{$prefix}#{$color}) !important;
   }
 }

package/src/scss/utils/_opacity.scss

@@ -2,6 +2,6 @@
 
 @for $i from 0 through 20 {
   .opacity-#{$i * 5} {
-    opacity: $i * 5 / 100 !important;
+    opacity: divide($i * 5, 100) !important;
   }
 }

package/src/scss/vendor/_apexcharts.scss

@@ -1,48 +1,2 @@
-.apexcharts-title-text {
-  font-weight: $font-weight-bold !important;
-}
-
-.apexcharts-tooltip-title {
-  font-weight: $font-weight-bold !important;
-  padding-bottom: .25rem !important;
-}
-
-.apexcharts-gridline,
-.apexcharts-ycrosshairs,
-.apexcharts-xaxis-tick {
-  stroke: $border-color !important;
-}
-
 .apexcharts-tooltip {
-  line-height: 1;
-  color: $white;
-  background: $dark !important;
-  border: 0 !important;
-  border-radius: 3px !important;
-}
-
-.apexcharts-tooltip-title {
-  margin: 0 !important;
-  background: transparent !important;
-  border: 0 !important;
-}
-
-.apexcharts-tooltip-series-group {
-  padding: 0 8px !important;
-}
-
-.apexcharts-tooltip-marker {
-  width: .5rem;
-  height: .5rem;
-}
-
-.apexcharts-gridline,
-.apexcharts-ycrosshairs,
-.apexcharts-xaxis-tick {
-  stroke: $gray-300;
-}
-
-.apexcharts-yaxis-label,
-.apexcharts-xaxis-label {
-  fill: $text-muted;
-}
+}

package/src/scss/vendor/_dropzone.scss

@@ -0,0 +1,27 @@
+.dropzone {
+  border: 1px dashed var(--#{$prefix}border-color);
+  color: var(--#{$prefix}muted);
+  padding: 1rem;
+
+  &.dz-drag-hover {
+    border: 1px dashed var(--#{$prefix}primary);
+    background: rgba(var(--#{$prefix}primary-rgb), .01);
+    color: var(--#{$prefix}primary);
+
+    .dz-message {
+      opacity: 1;
+    }
+  }
+
+  .dz-preview {
+    margin: .5rem;
+
+    .dz-image {
+      border-radius: $border-radius;
+    }
+
+    .dz-success-mark {
+      height: 54px;
+    }
+  }
+}

package/src/scss/vendor/_fslightbox.scss

@@ -0,0 +1,13 @@
+.fslightbox-container {
+  font-family: inherit !important;
+  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  backdrop-filter: blur($modal-backdrop-blur) !important;
+}
+
+.fslightbox-slide-number-container {
+  color: inherit !important;
+}
+
+.fslightbox-slash {
+  background: currentColor !important;
+}

package/src/scss/vendor/_jsvectormap.scss

@@ -0,0 +1,48 @@
+@import "~jsvectormap/dist/css/jsvectormap";
+
+.jvm-tooltip {
+  background: $dark;
+  font-family: inherit;
+  font-size: $h5-font-size;
+  box-shadow: $card-shadow;
+}
+
+.jvm-series-container .jvm-legend  .jvm-legend-title {
+  border-bottom: 0;
+  font-weight: $font-weight-medium;
+}
+
+.jvm-series-container .jvm-legend {
+  background-color: var(--#{$prefix}card-bg);
+  border: 1px solid var(--#{$prefix}border-color);
+  min-width: 8rem;
+
+  .jvm-legend-inner .jvm-legend-tick {
+    display: flex;
+    align-items: center;
+
+    .jvm-legend-tick-sample {
+      width: .75rem;
+      height: .75rem;
+    }
+  }
+}
+
+.jvm-zoom-btn {
+  border: 1px solid var(--#{$prefix}border-color);
+  background: var(--#{$prefix}card-bg);
+  color: var(--#{$prefix}body-color);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1rem;
+  box-shadow: $card-shadow;
+
+  &.jvm-zoomout {
+    top: 2.5rem;
+  }
+}

package/src/scss/vendor/_litepicker.scss

@@ -4,9 +4,12 @@
   --litepicker-button-next-month-color: #{$text-muted};
   --litepicker-button-prev-month-color-hover: #{$primary};
   --litepicker-button-next-month-color-hover: #{$primary};
+  --litepicker-day-color: var(--#{$prefix}body-color);
   --litepicker-day-color-hover: #{$primary};
   --litepicker-is-end-color-bg: #{$primary};
   --litepicker-is-today-color: #{$primary};
+  --litepicker-month-header-color: var(--#{$prefix}body-color);
+  --litepicker-container-months-color-bg: var(--#{$prefix}card-bg);
   font: inherit;
   user-select: none;
 
@@ -14,11 +17,13 @@
     fill: none !important;
   }
 
-  .container__months {
-    border: 1px solid $border-color-transparent;
+  .container__main {
+    border: 1px solid var(--#{$prefix}border-color);
     border-radius: $border-radius;
     box-shadow: $dropdown-box-shadow;
+  }
 
+  .container__months {
     .month-item-name,
     .month-item-year {
       font-weight: $font-weight-medium !important;
@@ -41,7 +46,7 @@
     .day-item {
       cursor: pointer !important;
       padding: .5rem 0 !important;
-      transition: .3s color, .3s background-color, .3s border-color;
+      @include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
     }
   }
 

package/src/scss/vendor/_nouislider.scss

@@ -1,4 +1,4 @@
-@import "~nouislider/distribute/nouislider";
+@import "~nouislider/dist/nouislider";
 
 .noUi-target {
   border: 0;
@@ -35,8 +35,8 @@
   .noUi-horizontal & {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    top: (-$form-range-thumb-height / 2);
-    right: (-$form-range-thumb-height / 2);
+    top: (-$form-range-thumb-height * .5);
+    right: (-$form-range-thumb-height * .5);
     margin: 1px 1px 0 0;
   }
 

package/src/scss/vendor/_plyr.scss

@@ -0,0 +1,3 @@
+body {
+  --plyr-color-main: #{$primary};
+}

package/src/scss/vendor/_tinymce.scss

@@ -0,0 +1,25 @@
+.tox-tinymce {
+  border: 1px solid var(--#{$prefix}border-color) !important;
+  border-radius: $border-radius !important;
+  font-family: var(--#{$prefix}font-sans-serif) !important;
+}
+
+.tox-toolbar__group {
+  padding: 0 .5rem 0;
+}
+
+.tox:not(.tox-tinymce-inline) {
+  .tox-editor-header {
+    border-bottom: 1px solid var(--#{$prefix}border-color) !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.tox-tbtn {
+  margin: 0 !important;
+}
+
+.tox-statusbar {
+  border-top: 1px solid var(--#{$prefix}border-color) !important;
+}

package/src/scss/vendor/_tom-select.scss

@@ -0,0 +1,14 @@
+@import "~tom-select/src/scss/tom-select.bootstrap5.scss";
+
+.ts-input {
+  color: inherit;
+}
+
+.ts-control{
+  color: inherit;
+
+  .dropdown-menu {
+    width: 100%;
+    height: auto;
+  }
+}