@syncfusion/ej2-fabric-theme 33.2.13 → 34.1.29

package/styles/grid-chart/icons/_fabric.scss

@@ -0,0 +1,122 @@
+@use '../variables' as *;
+@include export-module('grid-chart-fabric-icons') {
+
+  .e-grid-chart-export-icon::before {
+    content: '\e710';
+  }
+
+  .e-grid-chart-print::before {
+    content: '\ebf9';
+  }
+
+  .e-grid-chart-jpeg::before {
+    content: '\e1ba';
+  }
+
+  .e-grid-chart-png::before {
+    content: '\e715';
+  }
+
+  .e-grid-chart-svg::before {
+    content: '\e720';
+  }
+
+  .e-grid-chart-pdf::before {
+    content: '\e70d';
+  }
+
+  .e-grid-chart-xlsx::before {
+    content: '\e728';
+  }
+
+  .e-grid-chart-csv::before {
+    content: '\e70c';
+  }
+
+  #{&}.e-grid-context-menu-dialog {
+
+    .e-grid-chart-icon::before {
+      content: '\e711';
+    }
+
+    .e-grid-bar-chart-icon::before {
+      content: '\e855';
+    }
+
+    .e-grid-bar-icon::before {
+      content: '\e855';
+    }
+
+    .e-grid-stacking-bar-icon::before {
+      content: '\e889';
+    }
+
+    .e-grid-stacking-bar-100-icon::before {
+      content: '\e863';
+    }
+
+    .e-grid-pie-icon::before {
+      content: '\e141';
+    }
+
+    .e-grid-column-chart-icon::before {
+      content: '\e847';
+    }
+
+    .e-grid-column-icon::before {
+      content: '\e847';
+    }
+
+    .e-grid-stacking-column-icon::before {
+      content: '\e888';
+    }
+
+    .e-grid-stacking-column-100-icon::before {
+      content: '\e868';
+    }
+
+    .e-grid-line-chart-icon::before {
+      content: '\e867';
+    }
+
+    .e-grid-line-icon::before {
+      content: '\e867';
+    }
+
+    .e-grid-stacking-line-icon::before {
+      content: '\e841';
+    }
+
+    .e-grid-stacking-line-100-icon::before {
+      content: '\e871';
+    }
+
+    .e-grid-area-chart-icon::before {
+      content: '\e883';
+    }
+
+    .e-grid-area-icon::before {
+      content: '\e883';
+    }
+
+    .e-grid-stacking-area-icon::before {
+      content: '\e875';
+    }
+
+    .e-grid-stacking-area-100-icon::before {
+      content: '\e900';
+    }
+
+    .e-grid-scatter-icon::before {
+      content: '\e1bb';
+    }
+
+    .e-grid-chart-max-icon::before {
+      content: '\e342';
+    }
+
+    .e-grid-chart-min-icon::before {
+      content: '\e337';
+    }
+  }
+}

package/styles/grid-chart/index-lite.css

@@ -0,0 +1,33 @@
+@import '../base/base.css';
+@import '../input/input-lite.css';
+@import '../numerictextbox/numerictextbox-lite.css';
+@import '../button/button-lite.css';
+@import '../check-box/check-box-lite.css';
+@import '../popup/popup.css';
+@import '../spinner/spinner.css';
+@import '../drop-down-base/drop-down-base-lite.css';
+@import '../drop-down-list/drop-down-list-lite.css';
+@import '../dialog/dialog-lite.css';
+@import '../tooltip/tooltip-lite.css';
+@import '../h-scroll/h-scroll-lite.css';
+@import '../v-scroll/v-scroll-lite.css';
+@import '../toolbar/toolbar-lite.css';
+@import '../context-menu/context-menu-lite.css';
+@import '../accordion/accordion-lite.css';
+@import '../tab/tab-lite.css';
+@import '../split-button/split-button-lite.css';
+@import '../drop-down-button/drop-down-button-lite.css';
+@import '../slider/slider-lite.css';
+@import '../color-picker/color-picker-lite.css';
+@import '../button-group/button-group-lite.css';
+@import '../pager/pager-lite.css';
+@import '../excel-filter/excel-filter-lite.css';
+@import '../radio-button/radio-button-lite.css';
+@import '../auto-complete/auto-complete.css';
+@import '../datepicker/datepicker-lite.css';
+@import '../calendar/calendar-lite.css';
+@import '../datetimepicker/datetimepicker-lite.css';
+@import '../list-view/list-view-lite.css';
+@import '../timepicker/timepicker-lite.css';
+@import '../grid/grid-lite.css';
+@import '../grid-chart/grid-chart-lite.css';

package/styles/grid-chart/index-lite.scss

@@ -0,0 +1,33 @@
+@use '../base/base' as *;
+@use '../input/input-lite' as *;
+@use '../numerictextbox/numerictextbox-lite' as *;
+@use '../button/button-lite' as *;
+@use '../check-box/check-box-lite' as *;
+@use '../popup/popup' as *;
+@use '../spinner/spinner' as *;
+@use '../drop-down-base/drop-down-base-lite' as *;
+@use '../drop-down-list/drop-down-list-lite' as *;
+@use '../dialog/dialog-lite' as *;
+@use '../tooltip/tooltip-lite' as *;
+@use '../h-scroll/h-scroll-lite' as *;
+@use '../v-scroll/v-scroll-lite' as *;
+@use '../toolbar/toolbar-lite' as *;
+@use '../context-menu/context-menu-lite' as *;
+@use '../accordion/accordion-lite' as *;
+@use '../tab/tab-lite' as *;
+@use '../split-button/split-button-lite' as *;
+@use '../drop-down-button/drop-down-button-lite' as *;
+@use '../slider/slider-lite' as *;
+@use '../color-picker/color-picker-lite' as *;
+@use '../button-group/button-group-lite' as *;
+@use '../pager/pager-lite' as *;
+@use '../excel-filter/excel-filter-lite' as *;
+@use '../radio-button/radio-button-lite' as *;
+@use '../auto-complete/auto-complete' as *;
+@use '../datepicker/datepicker-lite' as *;
+@use '../calendar/calendar-lite' as *;
+@use '../datetimepicker/datetimepicker-lite' as *;
+@use '../list-view/list-view-lite' as *;
+@use '../timepicker/timepicker-lite' as *;
+@use '../grid/grid-lite' as *;
+@use '../grid-chart/grid-chart-lite' as *;

package/styles/grid-chart/index.css

@@ -0,0 +1,33 @@
+@import '../base/base.css';
+@import '../input/input.css';
+@import '../numerictextbox/numerictextbox.css';
+@import '../button/button.css';
+@import '../check-box/check-box.css';
+@import '../popup/popup.css';
+@import '../spinner/spinner.css';
+@import '../drop-down-base/drop-down-base.css';
+@import '../drop-down-list/drop-down-list.css';
+@import '../dialog/dialog.css';
+@import '../tooltip/tooltip.css';
+@import '../h-scroll/h-scroll.css';
+@import '../v-scroll/v-scroll.css';
+@import '../toolbar/toolbar.css';
+@import '../context-menu/context-menu.css';
+@import '../accordion/accordion.css';
+@import '../tab/tab.css';
+@import '../split-button/split-button.css';
+@import '../drop-down-button/drop-down-button.css';
+@import '../slider/slider.css';
+@import '../color-picker/color-picker.css';
+@import '../button-group/button-group.css';
+@import '../pager/pager.css';
+@import '../excel-filter/excel-filter.css';
+@import '../radio-button/radio-button.css';
+@import '../auto-complete/auto-complete.css';
+@import '../datepicker/datepicker.css';
+@import '../calendar/calendar.css';
+@import '../datetimepicker/datetimepicker.css';
+@import '../list-view/list-view.css';
+@import '../timepicker/timepicker.css';
+@import '../grid/grid.css';
+@import '../grid-chart/grid-chart.css';

package/styles/grid-chart/index.scss

@@ -0,0 +1,33 @@
+@use '../base/base' as *;
+@use '../input/input' as *;
+@use '../numerictextbox/numerictextbox' as *;
+@use '../button/button' as *;
+@use '../check-box/check-box' as *;
+@use '../popup/popup' as *;
+@use '../spinner/spinner' as *;
+@use '../drop-down-base/drop-down-base' as *;
+@use '../drop-down-list/drop-down-list' as *;
+@use '../dialog/dialog' as *;
+@use '../tooltip/tooltip' as *;
+@use '../h-scroll/h-scroll' as *;
+@use '../v-scroll/v-scroll' as *;
+@use '../toolbar/toolbar' as *;
+@use '../context-menu/context-menu' as *;
+@use '../accordion/accordion' as *;
+@use '../tab/tab' as *;
+@use '../split-button/split-button' as *;
+@use '../drop-down-button/drop-down-button' as *;
+@use '../slider/slider' as *;
+@use '../color-picker/color-picker' as *;
+@use '../button-group/button-group' as *;
+@use '../pager/pager' as *;
+@use '../excel-filter/excel-filter' as *;
+@use '../radio-button/radio-button' as *;
+@use '../auto-complete/auto-complete' as *;
+@use '../datepicker/datepicker' as *;
+@use '../calendar/calendar' as *;
+@use '../datetimepicker/datetimepicker' as *;
+@use '../list-view/list-view' as *;
+@use '../timepicker/timepicker' as *;
+@use '../grid/grid' as *;
+@use '../grid-chart/grid-chart' as *;

package/styles/h-scroll/_all.scss

@@ -0,0 +1,2 @@
+@forward 'layout';
+@forward 'theme';

package/styles/h-scroll/_bigger.scss

@@ -0,0 +1,40 @@
+@use 'variables' as *;
+@include export-module('h-scroll-bigger') {
+  .e-bigger #{&}.e-hscroll,
+  #{&}.e-hscroll.e-bigger {
+    min-height: $hscroll-nav-bgr-minheight;
+
+    &:not(.e-scroll-device) {
+      padding: $hscroll-bgr-padding;
+    }
+
+    &.e-scroll-device {
+      padding-right: $hscroll-nav-bgr-width;
+    }
+
+    &.e-rtl.e-scroll-device {
+      padding-left: $hscroll-nav-bgr-width;
+      padding-right: initial;
+    }
+
+    .e-nav-arrow.e-icons {
+      font-size: $hscroll-device-arrow-size-bigger;
+    }
+
+    &.e-rtl .e-scroll-overlay.e-scroll-right-overlay {
+      left: $hscroll-nav-bgr-left;
+    }
+
+    .e-scroll-overlay {
+
+      &.e-scroll-right-overlay {
+        right: $hscroll-nav-bgr-right;
+      }
+    }
+
+    .e-scroll-nav {
+      min-height: $hscroll-nav-bgr-minheight;
+      width: $hscroll-nav-bgr-width;
+    }
+  }
+}

package/styles/h-scroll/_fabric-definition.scss

@@ -0,0 +1,62 @@
+@use '../base/common/base-variables' as *;
+
+$hscroll-skin: 'fabric' !default;
+$hscroll-border-type: solid !default;
+$hscroll-hover-font: $hover-font-color !default;
+$hscroll-active-font-color: $active-font-color !default;
+$hscroll-default-bg: $neutral-white !default;
+$hscroll-press-bg: $theme-lighter !default;
+$hscroll-active-bg: $neutral-lighter !default;
+$hscroll-nav-nrml-minheight: 40px !default;
+$hscroll-nav-bgr-minheight: 50px !default;
+$hscroll-mob-nav-nrml-width: 50px !default;
+$hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-left: 50px !default;
+$hscroll-nav-bgr-right: 50px !default;
+$hscroll-nav-bgr-width: 50px !default;
+$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
+$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
+$hscroll-border-size: 1px !default;
+$hscroll-default-border: $neutral-tertiary !default;
+$hscroll-box-shadow: none !default;
+$hscroll-hover-bg: $neutral-lighter !default;
+$hscroll-hover-border-color: '' !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
+$hscroll-default-icon-color: $theme-light-font !default;
+$hscroll-overlay-opacity: .5 !default;
+$hscroll-overlay-bg: $neutral-white !default;
+$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
+$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
+$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
+$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;
+
+$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
+$hscroll-device-arrow-bg: $neutral-white !default;
+$hscroll-device-arrow-border-size: 1px !default;
+$hscroll-device-arrow-border-color: $neutral-quintenaryalt !default;
+$hscroll-device-arrow-color: $theme-primary !default;
+$hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 14px !default;
+$hscroll-device-arrow-size-bigger: 18px !default;
+$hscroll-device-arrow-width: 52px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
+
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
+
+@mixin hscroll-btn-animation {
+  content: '';
+}
+
+@mixin hscroll-btn-animation-after {
+  content: '';
+}

package/styles/h-scroll/_layout.scss

@@ -0,0 +1,161 @@
+@use 'variables' as *;
+@include export-module('h-scroll') {
+
+  /*! h-scroll layout */
+
+  #{&}.e-hscroll {
+    display: block;
+    position: relative;
+    width: 100%;
+
+    &.e-rtl {
+
+      &.e-scroll-device {
+        padding-left: $hscroll-mob-nav-nrml-width;
+        padding-right: initial;
+
+        .e-scroll-nav {
+          transform: skewX(-16deg) translateX(-6px);
+        }
+
+        .e-scroll-overlay {
+
+          &.e-scroll-right-overlay {
+            left: $hscroll-device-arrow-width;
+            right: auto;
+            transform: skewX(-16deg) translateX(-6px);
+          }
+
+          &.e-scroll-left-overlay {
+            left: auto;
+            right: 0;
+          }
+        }
+      }
+    }
+
+    &:not(.e-scroll-device) {
+      padding: $hscroll-nrml-padding;
+    }
+
+    &.e-scroll-device {
+      padding-right: $hscroll-mob-nav-nrml-width;
+
+      .e-scroll-nav {
+        transform: skewX(-16deg) translateX(6px);
+        width: $hscroll-device-arrow-width;
+
+        .e-nav-arrow {
+          font-size: $hscroll-device-arrow-size;
+          transform: skewX(16deg);
+        }
+      }
+
+      .e-scroll-overlay {
+        opacity: $hscroll-overlay-opacity;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        z-index: 100;
+
+        &.e-scroll-right-overlay {
+          left: auto;
+          right: $hscroll-device-arrow-width;
+          transform: skewX(-16deg) translateX(6px);
+        }
+
+        &.e-scroll-left-overlay {
+          left: 0;
+          right: auto;
+        }
+      }
+    }
+
+    &.e-overlay {
+
+      .e-hscroll-content {
+
+        > * {
+          pointer-events: none;
+        }
+      }
+    }
+
+    > * {
+      height: $hscroll-item-height;
+      line-height: $hscroll-item-line-height;
+    }
+
+    .e-hscroll-content {
+      display: inline-block;
+      height: $hscroll-item-height;
+      position: relative;
+
+      > * {
+        pointer-events: auto;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-scroll-nav  {
+
+        &.e-scroll-right-nav {
+          left: 0;
+          right: auto;
+        }
+
+        &.e-scroll-left-nav {
+          left: auto;
+          right: 0;
+        }
+      }
+    }
+
+    .e-scroll-nav  {
+      align-items: center;
+      bottom: 0;
+      cursor: pointer;
+      display: flex;
+      min-height: $hscroll-nav-nrml-minheight;
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      width: $hscroll-nav-nrml-width;
+
+      &.e-scroll-left-nav {
+        left: 0;
+      }
+
+      &.e-scroll-right-nav {
+        right: 0;
+      }
+
+      &.e-ie-align {
+        display: table;
+      }
+    }
+
+    .e-nav-arrow {
+      position: relative;
+    }
+
+    .e-nav-arrow.e-icons {
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      width: 100%;
+      font-size: $hscroll-device-arrow-icon-size;
+    }
+
+    .e-hscroll-bar {
+
+      .e-hscroll-content {
+
+        .e-overlay {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}

package/styles/h-scroll/_theme.scss

@@ -0,0 +1,147 @@
+@use 'variables' as *;
+@include export-module('h-scroll-theme') {
+
+  /*! h-scroll theme */
+  #{&}.e-hscroll {
+
+    .e-scroll-nav .e-icons {
+      color: $hscroll-default-icon-color;
+    }
+
+    &.e-rtl {
+
+      &.e-scroll-device {
+
+        .e-scroll-nav.e-scroll-right-nav {
+          border-color: $hscroll-device-arrow-border-color;
+          box-shadow: $hscroll-device-arrow-rtl-box-shadow;
+        }
+      }
+    }
+
+    &.e-scroll-device {
+
+      .e-scroll-nav.e-scroll-right-nav {
+        background-color: $hscroll-device-arrow-bg;
+        border-color: $hscroll-device-arrow-border-color;
+        border-width: $hscroll-device-arrow-border-size;
+        box-shadow: $hscroll-device-arrow-box-shadow;
+
+        .e-nav-arrow {
+          color: $hscroll-device-arrow-color;
+        }
+      }
+    }
+
+    .e-scroll-overlay {
+      background-color: transparent;
+      background-repeat: repeat-x;
+
+      &.e-scroll-left-overlay {
+        background-image: $hscroll-left-bg;
+      }
+
+      &.e-scroll-right-overlay {
+        background-image: $hscroll-right-bg;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-scroll-nav  {
+        background: $hscroll-default-bg;
+
+        &.e-scroll-left-nav {
+          border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+          border-right: $hscroll-border-none;
+        }
+
+        &.e-scroll-right-nav {
+          border-left: $hscroll-border-none;
+          border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+        }
+
+        &:hover {
+          background: $hscroll-hover-bg;
+          border: $hscroll-hover-border;
+          color: $hscroll-hover-font;
+
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
+          }
+        }
+      }
+    }
+
+    &:not(.e-scroll-device) {
+
+      .e-scroll-nav  {
+
+        &:hover {
+          background: $hscroll-hover-bg;
+          color: $hscroll-hover-font;
+
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
+          }
+        }
+
+        &:focus {
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
+          color: $hscroll-hover-font;
+
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
+          }
+        }
+
+        &:active {
+          background: $hscroll-press-bg;
+          border: $hscroll-active-border;
+          box-shadow: $hscroll-active-box-shadow;
+          color: $hscroll-active-font-color;
+
+          .e-icons {
+            color: $hscroll-nav-active-color;
+          }
+        }
+      }
+    }
+
+    .e-scroll-nav  {
+      background: $hscroll-default-bg;
+      @if $skin-name == 'fluent2' {
+        &.e-overlay {
+          &.e-scroll-left-nav,
+          &.e-scroll-right-nav {
+            opacity: inherit;
+            border-right: $hscroll-border-none;
+            border-left: $hscroll-border-none;
+            .e-nav-arrow {
+              &.e-icons {
+                color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
+              }
+            }
+          }
+        }
+      }
+
+      &.e-scroll-left-nav {
+        border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+      }
+
+      &.e-scroll-right-nav {
+        border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+      }
+
+      &::after {
+        @include hscroll-btn-animation;
+      }
+
+      &:active::after {
+        @include hscroll-btn-animation-after;
+      }
+    }
+  }
+}

package/styles/h-scroll/_variables.scss

@@ -0,0 +1,2 @@
+@forward '../base/common/_base-variables.scss';
+@forward './_fabric-definition';