@tabler/core 1.0.0-beta10 → 1.0.0-beta11

package/src/scss/ui/_status.scss

@@ -40,16 +40,17 @@
 // Status
 //
 .status {
-  --#{$variable-prefix}status-color: #{$text-muted};
-  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+  --#{$prefix}status-height: #{$status-height};
+  --#{$prefix}status-color: #{$text-muted};
+  --#{$prefix}status-color-rgb: #{to-rgb($text-muted)};
 
   display: inline-flex;
   align-items: center;
-  height: 2rem;
-  padding: .5rem .75rem;
+  height: var(--#{$prefix}status-height);
+  padding: .25rem .75rem;
   gap: .5rem;
-  color: var(--#{$variable-prefix}status-color);
-  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  color: var(--#{$prefix}status-color);
+  background: rgba(var(--#{$prefix}status-color-rgb), .1);
   font-size: $font-size-base;
   text-transform: none;
   letter-spacing: normal;
@@ -59,7 +60,7 @@
   margin: 0;
 
   .status-dot {
-    background: var(--#{$variable-prefix}status-color);
+    background: var(--#{$prefix}status-color);
   }
 
   .icon {
@@ -68,15 +69,15 @@
 }
 
 .status-lite {
-  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  border: 1px solid var(--#{$prefix}border-color) !important;
   background: transparent !important;
-  color: var(--#{$variable-prefix}body-text) !important;
+  color: var(--#{$prefix}body-text) !important;
 }
 
-@each $name, $color in theme-colors() {
+@each $name, $color in $theme-colors {
   .status-#{$name} {
-    --#{$variable-prefix}status-color: #{$color};
-    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+    --#{$prefix}status-color: #{$color};
+    --#{$prefix}status-color-rgb: #{to-rgb($color)};
   }
 }
 
@@ -84,13 +85,13 @@
 // Status dot
 //
 .status-dot {
-  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
-  --#{$variable-prefix}status-size: #{$status-dot-size};
+  --#{$prefix}status-dot-color: var(--#{$prefix}status-color, #{$text-muted});
+  --#{$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);
+  width: var(--#{$prefix}status-size);
+  height: var(--#{$prefix}status-size);
+  background: var(--#{$prefix}status-dot-color);
   border-radius: $border-radius-pill;
 }
 
@@ -121,24 +122,24 @@ $btn-colors: $theme-colors;
 // Status indicator
 //
 .status-indicator {
-  --#{$variable-prefix}status-indicator-size: 2.5rem;
-  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$prefix}status-indicator-size: 2.5rem;
+  --#{$prefix}status-indicator-color: var(--#{$prefix}status-color, #{$text-muted});
   display: block;
   position: relative;
-  width: var(--#{$variable-prefix}status-indicator-size);
-  height: var(--#{$variable-prefix}status-indicator-size);
+  width: var(--#{$prefix}status-indicator-size);
+  height: var(--#{$prefix}status-indicator-size);
 }
 
 .status-indicator-circle {
-  --#{$variable-prefix}status-circle-size: .75rem;
+  --#{$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);
+  margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
+  width: var(--#{$prefix}status-circle-size);
+  height: var(--#{$prefix}status-circle-size);
   border-radius: $border-radius-pill;
-  background: var(--#{$variable-prefix}status-color);
+  background: var(--#{$prefix}status-color);
 
   &:nth-child(1) {
     z-index: 3;

package/src/scss/ui/_toasts.scss

@@ -1,7 +1,7 @@
 .toast {
   background: $white;
   border: $alert-border-width solid $alert-border-color;
-  border-left: .25rem solid var(--#{$variable-prefix}toast-color);
+  border-left: .25rem solid var(--#{$prefix}toast-color);
   box-shadow: $alert-shadow;
 
   .toast-header {
@@ -15,6 +15,6 @@
 
 @each $state, $value in $theme-colors {
   .toast-#{$state} {
-    --#{$variable-prefix}toast-color: #{$value};
+    --#{$prefix}toast-color: #{$value};
   }
 }

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

@@ -19,10 +19,10 @@ Form control dark theme fix
  */
 .form-control {
   &::file-selector-button {
-    background-color: var(--#{$variable-prefix}btn-color, #{$form-file-button-bg});
+    background-color: var(--#{$prefix}btn-color, #{$form-file-button-bg});
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--#{$variable-prefix}btn-color, #{$form-file-button-hover-bg});
+    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 var(--#{$variable-prefix}border-color);
+  border: 1px solid var(--#{$prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {

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

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

package/src/scss/utils/_colors.scss

@@ -1,14 +1,10 @@
 // stylelint-disable declaration-no-important
 
 // All colors
-@each $color, $value in theme-colors() {
+@each $color, $value in $theme-colors {
   .bg-#{"" + $color} {
-    color: #ffffff !important;
-    background: $value !important;
-  }
-
-  .text-#{"" + $color} {
-    color: $value !important;
+    --#{$prefix}bg-opacity: 1;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
   .bg-#{"" + $color}-lt {
@@ -16,3 +12,9 @@
     background: theme-color-lighter($value, true) !important;
   }
 }
+
+@each $color, $value in $theme-colors {
+  .text-#{"" + $color} {
+    color: var(--#{$prefix}#{$color}) !important;
+  }
+}

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

@@ -13,8 +13,8 @@
 }
 
 .jvm-series-container .jvm-legend {
-  background-color: var(--#{$variable-prefix}card-bg);
-  border: 1px solid var(--#{$variable-prefix}border-color);
+  background-color: var(--#{$prefix}card-bg);
+  border: 1px solid var(--#{$prefix}border-color);
   min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
@@ -29,9 +29,9 @@
 }
 
 .jvm-zoom-btn {
-  border: 1px solid var(--#{$variable-prefix}border-color);
-  background: var(--#{$variable-prefix}card-bg);
-  color: var(--#{$variable-prefix}body-color);
+  border: 1px solid var(--#{$prefix}border-color);
+  background: var(--#{$prefix}card-bg);
+  color: var(--#{$prefix}body-color);
   padding: 0;
   display: flex;
   align-items: center;

package/src/scss/vendor/_litepicker.scss

@@ -4,12 +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(--#{$variable-prefix}body-color);
+  --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(--#{$variable-prefix}body-color);
-  --litepicker-container-months-color-bg: var(--#{$variable-prefix}card-bg);
+  --litepicker-month-header-color: var(--#{$prefix}body-color);
+  --litepicker-container-months-color-bg: var(--#{$prefix}card-bg);
   font: inherit;
   user-select: none;
 
@@ -18,7 +18,7 @@
   }
 
   .container__main {
-    border: 1px solid var(--#{$variable-prefix}border-color);
+    border: 1px solid var(--#{$prefix}border-color);
     border-radius: $border-radius;
     box-shadow: $dropdown-box-shadow;
   }

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