@syncfusion/ej2-fabric-dark-theme 33.2.15 → 34.1.29

package/styles/skeleton/skeleton.css

@@ -0,0 +1,78 @@
+.e-skeleton {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  border: none;
+}
+.e-skeleton.e-skeleton-text, .e-skeleton.e-skeleton-square, .e-skeleton.e-skeleton-rectangle {
+  border-radius: 0;
+}
+.e-skeleton.e-skeleton-circle {
+  border-radius: 50%;
+}
+.e-skeleton.e-visible-none {
+  display: none;
+}
+.e-skeleton.e-shimmer-wave::after {
+  animation: e-shimmer-wave 2s infinite;
+  animation-timing-function: ease-in-out;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: calc(200% + 200px);
+}
+.e-skeleton.e-shimmer-fade {
+  animation: e-shimmer-fade 2s infinite;
+  animation-timing-function: ease-in-out;
+}
+.e-skeleton.e-shimmer-pulse {
+  animation: e-shimmer-pulse 2s infinite;
+  animation-timing-function: ease-in-out;
+}
+.e-rtl .e-shimmer-wave::after,
+.e-rtl.e-shimmer-wave::after {
+  animation: e-shimmer-wave-rtl 2s infinite;
+}
+@keyframes e-shimmer-wave {
+  to {
+    transform: translateX(calc(50% + 100px));
+  }
+}
+@keyframes e-shimmer-wave-rtl {
+  from {
+    transform: translateX(calc(50% + 100px));
+  }
+}
+@keyframes e-shimmer-fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes e-shimmer-pulse {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.975);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.e-skeleton.e-shimmer-wave::after {
+  background-image: linear-gradient(90deg, transparent calc(50% - 100px), #e6e1e5 50%, transparent calc(50% + 100px));
+}
+.e-skeleton.e-skeleton-text, .e-skeleton.e-skeleton-square, .e-skeleton.e-skeleton-rectangle, .e-skeleton.e-skeleton-circle {
+  background-color: #333232;
+}

package/styles/skeleton/skeleton.scss

@@ -0,0 +1,2 @@
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;

package/styles/slider/_all.scss

@@ -0,0 +1,3 @@
+@use 'icons' as *;
+@forward 'layout';
+@forward 'theme';

package/styles/slider/_bigger.scss

@@ -0,0 +1,479 @@
+@use 'variables' as *;
+@mixin size($height, $width) {
+  height: $height;
+  width: $width;
+}
+
+@mixin alignment($size, $pos, $type) {
+  @if $type == 'horizontal' {
+    height: $size;
+    top: $pos;
+  }
+  @else {
+    width: $size;
+    left: $pos;
+  }
+}
+
+@include export-module('slider-bigger') {
+  .e-bigger {
+    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+      .e-slider-tooltip.e-tooltip-wrap.e-popup {
+        .e-tip-content {
+          padding: $slider-tooltip-padding;
+        }
+      }
+    }
+    @else {
+      &.e-slider-tooltip.e-tooltip-wrap.e-popup {
+        .e-tip-content {
+          font-size: $slider-tooltip-wrap-popup-font-size;
+          line-height: $slider-tooltip-wrap-popup-line-height;
+        }
+      }
+    }
+  }
+    
+  .e-bigger .e-control-wrapper.e-slider-container,
+  .e-control-wrapper.e-slider-container.e-bigger {
+    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+      .e-slider {
+        .e-handle {
+          @include size($slider-handle-mobile-height, $slider-handle-mobile-width);
+        }
+      }
+
+      @if ($skin-name == 'FluentUI') {
+        .e-slider-button {
+          @include size(20px, 20px);
+        }
+
+        &.e-horizontal {
+          .e-first-button,
+          .e-second-button {
+            margin-top: $slider-touch-btn-center-align;
+
+            .e-button-icon::before {
+              font-size: $slider-button-icon-size;
+            }
+          }
+        }
+
+        &.e-vertical {
+          .e-first-button,
+          .e-second-button {
+            margin-right: $slider-touch-btn-center-align;
+
+            .e-button-icon::before {
+              font-size: $slider-button-icon-size;
+            }
+          }
+        }
+      }
+
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        .e-slider-button {
+          @include size(18px, 18px);
+        }
+
+        &.e-vertical {
+          &.e-slider-btn {
+            padding: $slider-vertical-btn-padding;
+          }
+
+          .e-first-button,
+          .e-second-button {
+            margin-right: $slider-vertical-button-margin-right;
+          }
+
+          .e-slider {
+            .e-slider-track {
+              @include alignment(8px, calc(50% - 4px), 'vertical');
+              @if $skin-name == 'fluent2' {
+                border-radius: $slider-touch-track-border-radius;
+              }
+            }
+
+            @if $skin-name == 'fluent2' {
+              &.e-scale {
+                margin-top: $slider-touch-center-align;
+              }
+              &.e-v-scale {
+                left: $slider-touch-evscale-left;
+              }
+            }
+
+            .e-range {
+              @include alignment(8px, calc(50% - 4px), 'vertical');
+            }
+          }
+        }
+
+        &.e-horizontal .e-slider {
+          .e-limits {
+            @include alignment(8px, calc(50% - 4px), 'horizontal');
+            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3') {
+              border-radius: $slider-range-border-radius;
+            }
+          }
+        }
+
+        &.e-vertical .e-slider {
+          .e-limits {
+            @include alignment(8px, calc(50% - 4px), 'vertical');
+            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3') {
+              border-radius: $slider-range-border-radius;
+            }
+          }
+        }
+      }
+
+      @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3') {
+
+        &.e-horizontal,
+        &.e-vertical {
+          .e-slider-button.e-first-button,
+          .e-slider-button.e-second-button {
+            border-radius: $slider-ver-hori-button-border-radius;
+            @include size(24px, 24px);
+            @if $skin-name == 'Material3' {
+              padding: $slider-zero-padding-margin;
+            }
+
+            .e-button-icon::before {
+              font-size: $slider-vertical-horizontal-button-icon-size;
+            }
+          }
+        }
+
+        &.e-horizontal {
+          .e-slider-button.e-first-button,
+          .e-slider-button.e-second-button {
+            margin-top: $slider-horizontal-slider-button-margin-top;
+          }
+
+          .e-tick-both {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment(24px, -14px, 'horizontal');
+                }
+
+                .e-large {
+                  @if $skin-name == 'fluent2' {
+                    @include alignment(32px, -6px, 'horizontal');
+                  }
+                  @else {
+                    @include alignment(32px, -10px, 'horizontal');
+                  }
+                }
+              }
+            }
+          }
+
+          .e-tick-before {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-before-mobile-top, 'horizontal');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $tick-before-mobile-top, 'horizontal');
+                }
+              }
+            }
+          }
+
+          .e-tick-after {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-after-mobile-top, 'horizontal');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $largetick-after-mobile-top, 'horizontal');
+                }
+              }
+            }
+          }
+        }
+
+        &.e-vertical {
+
+          .e-tick-both {
+            &.e-scale {
+              .e-tick {
+                @include alignment(24px, 2px, 'vertical');
+              }
+
+              .e-large {
+                @include alignment(32px, -2px, 'vertical');
+              }
+            }
+          }
+
+          .e-tick-before {
+
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-before-mobile-left, 'vertical');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $largetick-before-mobile-left, 'vertical');
+                }
+              }
+            }
+          }
+
+          .e-tick-after {
+
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-after-mobile-left, 'vertical');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $tick-after-mobile-left, 'vertical');
+                }
+              }
+            }
+          }
+        }
+      }
+
+      @if ($skin-name == 'tailwind') {
+        .e-scale.e-h-scale {
+          &.e-tick-after {
+            top: 7px;
+          }
+        }
+
+        &.e-horizontal,
+        &.e-vertical {
+          .e-slider-button.e-first-button,
+          .e-slider-button.e-second-button {
+            border-radius: $slider-horizontal-button-radius;
+            @include size(24px, 24px);
+            .e-button-icon::before {
+              font-size: $slider-horizontal-button-icon-size;
+            }
+          }
+        }
+
+        &.e-horizontal {
+
+          &.e-scale-both .e-range,
+          .e-limits {
+            height: $slider-scale-range-height;
+          }
+
+          .e-slider-track {
+            border-radius: $slider-track-border-radius;
+          }
+
+          .e-first-button,
+          .e-second-button {
+            margin-top: $slider-first-second-button-margin-top;
+          }
+
+          .e-tick-both {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment(22px, -19px, 'horizontal');
+                }
+
+                .e-large {
+                  @include alignment(30px, -16px, 'horizontal');
+                }
+              }
+            }
+          }
+
+          .e-tick-before,
+          .e-tick-after {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  height: $tick-after-mobile-height;
+                }
+
+                .e-large {
+                  height: $largetick-before-mobile-height;
+                }
+              }
+            }
+          }
+
+          &.e-scale-both {
+            .e-scale {
+              top: 17px;
+            }
+          }
+
+          &.e-slider-btn {
+            padding: $slider-button-horizon-mobile-padding;
+          }
+        }
+
+        &.e-vertical {
+
+          &.e-scale-both .e-range,
+          .e-range {
+            width: $slider-range-width;
+          }
+
+          .e-slider-track {
+            border-radius: $slider-track-border-radius;
+          }
+
+          &.e-slider-btn {
+            padding: $slider-button-vertical-mobile-padding;
+          }
+
+          .e-slider-button {
+            margin-right: $slider-button-margin-right;
+          }
+
+          .e-tick-both {
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  @include alignment(22px, 4px, 'vertical');
+                }
+
+                .e-large {
+                  @include alignment(30px, -0, 'vertical');
+                }
+              }
+            }
+          }
+
+          .e-tick-before,
+          .e-tick-after {
+
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  width: $tick-after-mobile-height;
+                }
+
+                .e-large {
+                  width: $largetick-before-mobile-height;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.e-horizontal {
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
+          &.e-slider-btn {
+            padding: $slider-bgr-hor-btn-padding;
+          }
+        }
+        @if ($skin-name == 'bootstrap4') {
+          &.e-slider-btn {
+            padding: 0 34px;
+          }
+
+          .e-slider-button {
+            @include size($slider-handle-mobile-buttons-height, $slider-handle-mobile-buttons-width);
+            margin-top: -9px;
+          }
+        }
+
+        @if ($skin-name == 'tailwind') {
+          .e-slider-track,
+          .e-range {
+            height: 6px;
+          }
+        }
+
+        .e-slider {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3'  or $skin-name == 'fluent2') {
+            .e-slider-track,
+            .e-range {
+              @include alignment(8px, calc(50% - 4px), 'horizontal');
+            }
+          }
+
+          .e-handle {
+            margin-left: $slider-handle-mobile-margin-left;
+            top: $slider-handle-mobile-handle-top;
+          }
+        }
+
+        &.e-scale-both {
+          .e-slider {
+            .e-handle {
+              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+                margin-left: -9px;
+                top: calc(50% - 8px);
+              }
+            }
+          }
+        }
+      }
+
+      &.e-vertical {
+        .e-slider {
+          .e-handle {
+            left: $slider-vertical-handle-left;
+            margin-bottom: $slider-vertical-handle-margin-bottom;
+          }
+
+          @if ($skin-name == 'tailwind') {
+            .e-range {
+              width: $slider-range-width;
+            }
+          }
+        }
+
+        &.e-scale-both {
+          .e-slider {
+            .e-handle {
+              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+                left: calc(50% - 10px);
+                margin-bottom: -9px;
+              }
+              @if $skin-name == 'bootstrap4' {
+                left: calc(50% - 8px);
+                margin-bottom: -8px;
+              }
+            }
+          }
+        }
+
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
+          .e-slider-track,
+          .e-range {
+            width: $slider-range-width;
+          }
+        }
+      }
+
+      &.e-rtl {
+        &.e-horizontal {
+          .e-slider {
+            .e-handle {
+              @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
+                margin: $slider-rtl-handle-margin;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .e-scale .e-tick .e-tick-value {
+      font-size: $slider-mobile-scale-font-size;
+    }
+  }
+}