@tabler/core 1.0.0-beta5 → 1.0.0-beta9

package/src/scss/ui/_status.scss

@@ -0,0 +1,172 @@
+@keyframes status-pulsate-main {
+  40% {
+    transform: scale(1.25, 1.25);
+  }
+  60% {
+    transform: scale(1.25, 1.25);
+  }
+}
+
+@keyframes status-pulsate-secondary {
+  10% {
+    transform: scale(1, 1)
+  }
+  30% {
+    transform: scale(3, 3)
+  }
+  80% {
+    transform: scale(3, 3)
+  }
+  100% {
+    transform: scale(1, 1)
+  }
+}
+
+@keyframes status-pulsate-tertiary {
+  25% {
+    transform: scale(1, 1);
+  }
+  80% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+}
+
+//
+// Status
+//
+.status {
+  --#{$variable-prefix}status-color: #{$text-muted};
+  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: .5rem .75rem;
+  gap: .5rem;
+  color: var(--#{$variable-prefix}status-color);
+  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  font-size: $font-size-base;
+  text-transform: none;
+  letter-spacing: normal;
+  border-radius: $border-radius-pill;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  margin: 0;
+
+  .status-dot {
+    background: var(--#{$variable-prefix}status-color);
+  }
+
+  .icon {
+    font-size: 1.25rem;
+  }
+}
+
+.status-lite {
+  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  background: transparent !important;
+  color: var(--#{$variable-prefix}body-text) !important;
+}
+
+@each $name, $color in theme-colors() {
+  .status-#{$name} {
+    --#{$variable-prefix}status-color: #{$color};
+    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+  }
+}
+
+//
+// Status dot
+//
+.status-dot {
+  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$variable-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);
+  border-radius: $border-radius-pill;
+}
+
+.status-dot-animated {
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: inherit;
+    border-radius: inherit;
+    opacity: .6;
+    animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
+  }
+}
+
+$btn-colors: $theme-colors;
+
+@if $enable-extra-colors {
+  $btn-colors: map-merge($btn-colors, $extra-colors);
+}
+
+@if $enable-social-colors {
+  $btn-colors: map-merge($btn-colors, $social-colors);
+}
+
+//
+// Status indicator
+//
+.status-indicator {
+  --#{$variable-prefix}status-indicator-size: 2.5rem;
+  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  display: block;
+  position: relative;
+  width: var(--#{$variable-prefix}status-indicator-size);
+  height: var(--#{$variable-prefix}status-indicator-size);
+}
+
+.status-indicator-circle {
+  --#{$variable-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);
+  border-radius: $border-radius-pill;
+  background: var(--#{$variable-prefix}status-color);
+
+  &:nth-child(1) {
+    z-index: 3;
+  }
+
+  &:nth-child(2) {
+    z-index: 2;
+    opacity: .1;
+  }
+
+  &:nth-child(3) {
+    z-index: 1;
+    opacity: .3;
+  }
+}
+
+.status-indicator-animated {
+  .status-indicator-circle {
+    &:nth-child(1) {
+      animation: 2s linear 1s infinite backwards status-pulsate-main;
+    }
+
+    &:nth-child(2) {
+      animation: 2s linear 1s infinite backwards status-pulsate-secondary;
+    }
+
+    &:nth-child(3) {
+      animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
+    }
+  }
+}

package/src/scss/ui/_switch-icon.scss

@@ -6,6 +6,7 @@
   background: transparent;
   width: $icon-size;
   height: $icon-size;
+  vertical-align: bottom;
   position: relative;
   cursor: pointer;
 

package/src/scss/ui/_type.scss

@@ -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-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(--#{$variable-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});
+  }
+}

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

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

package/src/scss/utils/_colors.scss

@@ -1,45 +1,18 @@
 // stylelint-disable declaration-no-important
 
-@each $color, $value in $theme-colors {
-  .bg-#{"" + $color}-lt {
-    color: $value !important;
-    background: theme-color-lighter($value, true) !important;
+// All colors
+@each $color, $value in theme-colors() {
+  .bg-#{"" + $color} {
+    color: #ffffff !important;
+    background: $value !important;
   }
-}
 
-// Extra colors
-@if $enable-extra-colors {
-  @each $color, $value in $extra-colors {
-    .bg-#{"" + $color} {
-      background: $value;
-    }
-
-    .text-#{"" + $color} {
-      color: $value !important;
-    }
-
-    .bg-#{"" + $color}-lt {
-      color: $value !important;
-      background: theme-color-lighter($value, true) !important;
-    }
+  .text-#{"" + $color} {
+    color: $value !important;
   }
-}
-
-// Social colors
-@if $enable-social-colors {
-  @each $color, $value in $social-colors {
-    .bg-#{"" + $color} {
-      color: #ffffff !important;
-      background: $value !important;
-    }
-
-    .text-#{"" + $color} {
-      color: $value !important;
-    }
 
-    .bg-#{"" + $color}-lt {
-      color: $value !important;
-      background: theme-color-lighter($value, true) !important;
-    }
+  .bg-#{"" + $color}-lt {
+    color: $value !important;
+    background: theme-color-lighter($value, true) !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(--#{$variable-prefix}card-bg);
+  border: 1px solid var(--#{$variable-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(--#{$variable-prefix}border-color);
+  background: var(--#{$variable-prefix}card-bg);
+  color: var(--#{$variable-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

@@ -17,11 +17,13 @@
     fill: none !important;
   }
 
-  .container__months {
+  .container__main {
     border: 1px solid var(--#{$variable-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;

package/src/scss/ui/_skeleton.scss

@@ -1,98 +0,0 @@
-@keyframes skeleton-load {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 100vw 0;
-  }
-}
-
-%skeleton-common {
-  background-image: linear-gradient(to right, mix($body-bg, $body-color, 98%) 0, mix($body-bg, $body-color, 90%) 40%, mix($body-bg, $body-color, 98%) 80%);
-  background-size: 50vw 100%;
-  background-attachment: fixed;
-  animation: skeleton-load 2s linear infinite
-}
-
-.skeleton-avatar {
-  @extend %skeleton-common;
-  display: inline-block;
-  vertical-align: bottom;
-  width: $avatar-size;
-  height: $avatar-size;
-  border-radius: $border-radius-pill;
-
-  @each $name, $size in $avatar-sizes {
-    &-#{$name} {
-      width: $size;
-      height: $size;
-    }
-  }
-}
-
-.skeleton-line {
-  padding: .375rem 0;
-  display: block;
-  line-height: 0;
-  height: $font-size-base * $line-height-base;
-
-  &:after {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    border-radius: $border-radius;
-    width: 100%;
-    @extend %skeleton-common;
-  }
-
-  &:nth-child(5n+2):after {
-    width: 80%;
-  }
-
-  &:nth-child(5n+3):after {
-    width: 90%;
-  }
-
-  &:nth-child(5n+4):after {
-    width: 95%;
-  }
-
-  &:nth-child(5n+5):after {
-    width: 85%;
-  }
-}
-
-.skeleton-line-full {
-  &:after {
-    width: 100% !important;
-  }
-}
-
-.skeleton-heading {
-  @extend .skeleton-line;
-  height: 1.5rem;
-  margin-bottom: .5rem;
-
-  &:after {
-    width: 70%;
-  }
-}
-
-.skeleton-image {
-  @extend %skeleton-common;
-
-  &:after {
-    content: '';
-    padding-top: percentage(divide(9, 16));
-    display: block;
-  }
-}
-
-.card-img-top,
-.card-img-bottom,
-.card-img-left,
-.card-img-right {
-  .skeleton-image {
-    border-radius: inherit;
-  }
-}