@syncfusion/ej2-navigations 17.2.55-1205479 → 17.3.14-96615

package/styles/toolbar/_theme.scss

@@ -1,451 +1,451 @@
-@include export-module('toolbar-theme') {
-  /*! toolbar theme */
-  // sass-lint:disable no-vendor-prefixes
-  #{&}.e-toolbar {
-    -webkit-tap-highlight-color: $tbar-tab-highlight-color;
-    background: $tbar-default-bg;
-    border: $tbar-border-size $tbar-border-type $tbar-default-border;
-    box-shadow: $tbar-box-shadow;
-
-    &.e-vertical {
-
-      .e-hor-nav {
-        border: $tbar-border-nav-type $tbar-default-border;
-        border-width: $tbar-popup-vertical-border-width;
-      }
-
-      &.e-rtl .e-hor-nav {
-        border: $tbar-border-nav-type $tbar-default-border;
-        border-width: $tbar-popup-vertical-rtl-border-width;
-      }
-
-
-      .e-toolbar-items .e-toolbar-item {
-
-        &.e-separator {
-          border-width: $tba-vertical-separator;
-        }
-
-      }
-    }
-
-    &.e-extended-toolbar {
-
-      .e-toolbar-extended {
-
-        .e-toolbar-item.e-overlay {
-          background: $tbar-default-bg;
-        }
-
-        .e-toolbar-item.e-separator {
-          border: $tbar-separator-border-type $tbar-separator-border;
-          border-width: $tba-horizontal-separator;
-        }
-
-        .e-toolbar-item .e-tbar-btn .e-icons {
-          color: $tbar-default-icon-color;
-        }
-
-        .e-toolbar-item .e-tbar-btn {
-          background: $tbar-default-bg;
-          box-shadow: $tbar-btn-box-shadow;
-          color: $tbar-default-font;
-          @if $tbar-skin == 'bootstrap' {
-            margin: 1px 0;
-          }
-
-          @if $tbar-skin == 'highcontrast' {
-            border: 2px $tbar-border-type $ext-tbar-btn-border-color;
-          }
-
-          &:focus {
-            background: $tbar-focus-bg;
-            border-color: $tbar-focus-border-color;
-            border-radius: $tbar-btn-border-radius;
-            color: $tbar-hover-font;
-
-            @if $tbar-skin == 'bootstrap' {
-              border: 1px solid $tbar-focus-border-color;
-              margin: 0;
-            }
-
-            @if $tbar-skin == 'highcontrast' {
-              border: $tbar-dash-border;
-
-              &:active {
-                background: $ext-tbar-btn-focus-active-bg-color;
-              }
-            }
-          }
-
-          &:hover {
-            background: $tbar-hover-bg;
-            border-color: $tbar-hover-border-color;
-            border-radius: $tbar-btn-border-radius;
-            color: $tbar-hover-font;
-
-            @if $tbar-skin == 'bootstrap' {
-              border: 1px solid $tbar-hover-border-color;
-            }
-
-            @if $tbar-skin == 'highcontrast' {
-              border: 2px $tbar-border-type $ext-tbar-btn-hover-border-color;
-
-              .e-icons {
-                color: $tbar-hover-font;
-              }
-
-              &:focus {
-
-                .e-icons,
-                .e-tbar-btn-text {
-                  color: $tbar-hover-font;
-                }
-              }
-
-              &:active {
-
-                .e-icons,
-                .e-tbar-btn-text {
-                  color: $tbar-select-font;
-                }
-              }
-            }
-          }
-
-          &:active {
-            background: $tbar-press-bg;
-            border-color: $tbar-press-border-color;
-            border-radius: $tbar-btn-border-radius;
-            box-shadow: $tbar-btn-pressed-box-shadow;
-            color: $tbar-press-font;
-
-            @if $tbar-skin == 'bootstrap' {
-              border-left: 1px solid $tbar-press-border-color;
-            }
-            @if $tbar-skin == 'highcontrast' {
-              color: $tbar-pressed-font;
-
-              .e-icons,
-              .e-tbar-btn-text {
-                color: $tbar-pressed-font;
-              }
-            }
-          }
-
-        }
-
-        .e-toolbar-item .e-tbar-btn-text {
-          color: $tbar-default-font;
-        }
-      }
-    }
-
-    .e-icons {
-      color: $tbar-default-icon-color;
-    }
-
-    .e-toolbar-pop {
-      background: $tbar-default-bg;
-      border: $tbar-border-size $tbar-border-type $tbar-default-border;
-      box-shadow: $tbar-pop-box-shadow;
-
-      .e-toolbar-item {
-
-        @if $tbar-skin == 'bootstrap4' {
-          .e-tbar-btn:hover,
-          .e-tbar-btn:active,
-          .e-tbar-btn:focus {
-            background: $primary;
-            box-shadow: none;
-            color: $primary-font;
-
-            .e-icons,
-            .e-tbar-btn-text {
-              color: inherit;
-            }
-          }
-
-          .e-tbar-btn {
-            background: $tbar-popup-btn-bg-color;
-          }
-        }
-
-        .e-tbar-btn-text {
-          color: $tbar-default-font;
-        }
-
-        @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' {
-          .e-btn:focus {
-            outline: none;
-          }
-        }
-      }
-    }
-
-    &.e-toolpop {
-
-      .e-hor-nav.e-nav-active,
-      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
-        background: $tbar-pressed-bg;
-        border: $tbar-nav-press-border;
-        border-left: $border-size $tbar-border-nav-active-type $tbar-pressed-bg;
-        box-shadow: $tbar-nav-pressed-box-shadow;
-
-        @if $tbar-skin == 'highcontrast' {
-          &:focus {
-            border: $tbar-dash-border;
-          }
-        }
-
-        .e-icons {
-          color: $tbar-active-font-color;
-          @if $tbar-skin == 'bootstrap4' {
-            &:active {
-              color: inherit;
-            }
-          }
-        }
-      }
-    }
-
-    .e-tbar-btn {
-      background: $tbar-default-bg;
-      box-shadow: $tbar-btn-box-shadow;
-      color: $tbar-default-font;
-      @if $tbar-skin == 'bootstrap' {
-        margin: 1px 0;
-      }
-
-      @if $tbar-skin == 'highcontrast' {
-        border: 2px $tbar-border-type $tbar-btn-border-color;
-      }
-
-      &:focus {
-        background: $tbar-focus-bg;
-        @if $tbar-skin == 'bootstrap4' {
-          box-shadow: $tbar-focus-btn-box-shadow;
-        }
-        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-          border: 1px solid $tbar-focus-border-color;
-          margin: 0;
-        }
-        border-color: $tbar-focus-border-color;
-        border-radius: $tbar-btn-border-radius;
-        color: $tbar-hover-font;
-        @if $tbar-skin == 'highcontrast' {
-          border: $tbar-dash-border;
-
-          &:active {
-            background: $tbar-btn-focus-active-bg-color;
-          }
-        }
-      }
-
-      &:hover {
-        background: $tbar-hover-bg;
-        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-          border: 1px solid $tbar-hover-border-color;
-        }
-        border-color: $tbar-hover-border-color;
-        border-radius: $tbar-btn-border-radius;
-        color: $tbar-hover-font;
-
-        @if $tbar-skin == 'bootstrap4' {
-          .e-icons,
-          .e-tbar-btn-text {
-            color: inherit;
-          }
-        }
-
-        @if $tbar-skin == 'highcontrast' {
-          border: 2px $tbar-border-type $tbar-btn-hover-border-color;
-
-          .e-icons {
-            color: $tbar-hover-font;
-          }
-
-          &:focus {
-            .e-icons,
-            .e-tbar-btn-text {
-              color: $tbar-hover-font;
-            }
-          }
-
-          &:active {
-            .e-icons,
-            .e-tbar-btn-text {
-              color: $tbar-select-font;
-            }
-          }
-        }
-      }
-    }
-
-    .e-toolbar-items {
-      background: $tbar-default-bg;
-
-      .e-toolbar-item {
-
-        &.e-overlay {
-          background: $tbar-default-bg;
-
-          @if $tbar-skin == 'highcontrast' {
-            opacity: 1;
-          }
-
-          @if $tbar-skin == 'bootstrap4' {
-            opacity: .65;
-          }
-
-          .e-tbar-btn-text {
-            color: $tbar-default-font-overlay;
-          }
-
-          .e-icons {
-            color: $tbar-default-icon-overlay;
-          }
-        }
-
-        .e-tbar-btn-text {
-          color: $tbar-default-font;
-        }
-
-        @if $tbar-skin == 'bootstrap4' {
-          .e-tbar-btn {
-            &:hover,
-            &:focus {
-              .e-icons,
-              .e-tbar-btn-text {
-                color: inherit;
-              }
-            }
-          }
-        }
-
-        &.e-separator {
-          border: $tbar-separator-border-type $tbar-separator-border;
-          border-width: $tba-horizontal-separator;
-        }
-      }
-    }
-
-    &.e-rtl .e-hor-nav {
-      background: $tbar-default-bg;
-      border: $tbar-border-nav-type $tbar-default-border;
-      border-left: 0;
-      border-width: $tbar-popup-rtl-border-width;
-
-      &:not(.e-hor-nav.e-nav-active):hover {
-        background: $tbar-hover-bg;
-        color: $tbar-hover-font;
-      }
-    }
-
-    .e-hor-nav {
-      background: $tbar-default-bg;
-      border: $tbar-border-nav-type $tbar-default-border;
-      border-width: $tbar-popup-border-width;
-    }
-
-    .e-hor-nav:not(.e-expended-nav)  {
-
-      &::after {
-        @include tbar-btn-animation;
-      }
-
-      &:active {
-        border: $tbar-nav-press-border;
-        box-shadow: $tbar-nav-pressed-box-shadow;
-        color: $tbar-select-font;
-
-        @if $tbar-skin == 'bootstrap4' {
-          background: $tbar-hover-bg;
-
-          .e-icons {
-            color: inherit;
-          }
-        }
-
-        &::after {
-          @include tbar-btn-animation-after;
-        }
-     }
-
-      &:hover {
-        background: $tbar-hover-bg;
-        border-left: $tbar-nav-hover-border;
-        color: $tbar-hover-font;
-
-        @if $tbar-skin == 'bootstrap4' {
-          background: $tbar-popup-hover-bg;
-
-          .e-icons {
-            color: inherit;
-          }
-        }
-
-        @if $tbar-skin == 'highcontrast' {
-          &:not(.e-nav-active) {
-            border: 2px $tbar-border-type $tbar-nav-hover-color;
-          }
-
-          &:active {
-            background: $tbar-nav-hover-active-bg-color;
-            border: 0;
-          }
-        }
-      }
-
-      &:focus {
-        background: $tbar-hover-bg;
-        border-color: $tbar-pressed-border;
-        border-left: $tbar-nav-focus-border;
-        color: $tbar-pressed-font;
-
-        @if $tbar-skin == 'bootstrap4' {
-          .e-icons {
-            color: inherit;
-          }
-        }
-
-        @if $tbar-skin == 'highcontrast' {
-          background: inherit;
-          border: $tbar-dash-border;
-        }
-      }
-    }
-
-    .e-tbar-btn {
-
-      &:active {
-        background:  $tbar-press-bg;
-        @if $tbar-skin == 'bootstrap' {
-          border-left: 1px solid $tbar-press-border-color;
-        }
-        border-color: $tbar-press-border-color;
-        border-radius: $tbar-btn-border-radius;
-        box-shadow: $tbar-btn-pressed-box-shadow;
-        color: $tbar-press-font;
-
-        @if $tbar-skin == 'bootstrap4' {
-          background: $tbar-active-btn-bg;
-          border: 1px solid $tbar-active-border-color;
-
-          .e-icons,
-          .e-tbar-btn-text {
-            color: inherit;
-          }
-        }
-        @if $tbar-skin == 'highcontrast' {
-          color: $tbar-pressed-font;
-
-          .e-icons,
-          .e-tbar-btn-text {
-            color: $tbar-pressed-font;
-          }
-        }
-      }
-    }
-  }
-}
+@include export-module('toolbar-theme') {
+  /*! toolbar theme */
+  // sass-lint:disable no-vendor-prefixes
+  #{&}.e-toolbar {
+    -webkit-tap-highlight-color: $tbar-tab-highlight-color;
+    background: $tbar-default-bg;
+    border: $tbar-border-size $tbar-border-type $tbar-default-border;
+    box-shadow: $tbar-box-shadow;
+
+    &.e-vertical {
+
+      .e-hor-nav {
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-vertical-border-width;
+      }
+
+      &.e-rtl .e-hor-nav {
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-vertical-rtl-border-width;
+      }
+
+
+      .e-toolbar-items .e-toolbar-item {
+
+        &.e-separator {
+          border-width: $tba-vertical-separator;
+        }
+
+      }
+    }
+
+    &.e-extended-toolbar {
+
+      .e-toolbar-extended {
+
+        .e-toolbar-item.e-overlay {
+          background: $tbar-default-bg;
+        }
+
+        .e-toolbar-item.e-separator {
+          border: $tbar-separator-border-type $tbar-separator-border;
+          border-width: $tba-horizontal-separator;
+        }
+
+        .e-toolbar-item .e-tbar-btn .e-icons {
+          color: $tbar-default-icon-color;
+        }
+
+        .e-toolbar-item .e-tbar-btn {
+          background: $tbar-default-bg;
+          box-shadow: $tbar-btn-box-shadow;
+          color: $tbar-default-font;
+          @if $tbar-skin == 'bootstrap' {
+            margin: 1px 0;
+          }
+
+          @if $tbar-skin == 'highcontrast' {
+            border: 2px $tbar-border-type $ext-tbar-btn-border-color;
+          }
+
+          &:focus {
+            background: $tbar-focus-bg;
+            border-color: $tbar-focus-border-color;
+            border-radius: $tbar-btn-border-radius;
+            color: $tbar-hover-font;
+
+            @if $tbar-skin == 'bootstrap' {
+              border: 1px solid $tbar-focus-border-color;
+              margin: 0;
+            }
+
+            @if $tbar-skin == 'highcontrast' {
+              border: $tbar-dash-border;
+
+              &:active {
+                background: $ext-tbar-btn-focus-active-bg-color;
+              }
+            }
+          }
+
+          &:hover {
+            background: $tbar-hover-bg;
+            border-color: $tbar-hover-border-color;
+            border-radius: $tbar-btn-border-radius;
+            color: $tbar-hover-font;
+
+            @if $tbar-skin == 'bootstrap' {
+              border: 1px solid $tbar-hover-border-color;
+            }
+
+            @if $tbar-skin == 'highcontrast' {
+              border: 2px $tbar-border-type $ext-tbar-btn-hover-border-color;
+
+              .e-icons {
+                color: $tbar-hover-font;
+              }
+
+              &:focus {
+
+                .e-icons,
+                .e-tbar-btn-text {
+                  color: $tbar-hover-font;
+                }
+              }
+
+              &:active {
+
+                .e-icons,
+                .e-tbar-btn-text {
+                  color: $tbar-select-font;
+                }
+              }
+            }
+          }
+
+          &:active {
+            background: $tbar-press-bg;
+            border-color: $tbar-press-border-color;
+            border-radius: $tbar-btn-border-radius;
+            box-shadow: $tbar-btn-pressed-box-shadow;
+            color: $tbar-press-font;
+
+            @if $tbar-skin == 'bootstrap' {
+              border-left: 1px solid $tbar-press-border-color;
+            }
+            @if $tbar-skin == 'highcontrast' {
+              color: $tbar-pressed-font;
+
+              .e-icons,
+              .e-tbar-btn-text {
+                color: $tbar-pressed-font;
+              }
+            }
+          }
+
+        }
+
+        .e-toolbar-item .e-tbar-btn-text {
+          color: $tbar-default-font;
+        }
+      }
+    }
+
+    .e-icons {
+      color: $tbar-default-icon-color;
+    }
+
+    .e-toolbar-pop {
+      background: $tbar-default-bg;
+      border: $tbar-border-size $tbar-border-type $tbar-default-border;
+      box-shadow: $tbar-pop-box-shadow;
+
+      .e-toolbar-item {
+
+        @if $tbar-skin == 'bootstrap4' {
+          .e-tbar-btn:hover,
+          .e-tbar-btn:active,
+          .e-tbar-btn:focus {
+            background: $primary;
+            box-shadow: none;
+            color: $primary-font;
+
+            .e-icons,
+            .e-tbar-btn-text {
+              color: inherit;
+            }
+          }
+
+          .e-tbar-btn {
+            background: $tbar-popup-btn-bg-color;
+          }
+        }
+
+        .e-tbar-btn-text {
+          color: $tbar-default-font;
+        }
+
+        @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' {
+          .e-btn:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+
+    &.e-toolpop {
+
+      .e-hor-nav.e-nav-active,
+      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
+        background: $tbar-pressed-bg;
+        border: $tbar-nav-press-border;
+        border-left: $border-size $tbar-border-nav-active-type $tbar-pressed-bg;
+        box-shadow: $tbar-nav-pressed-box-shadow;
+
+        @if $tbar-skin == 'highcontrast' {
+          &:focus {
+            border: $tbar-dash-border;
+          }
+        }
+
+        .e-icons {
+          color: $tbar-active-font-color;
+          @if $tbar-skin == 'bootstrap4' {
+            &:active {
+              color: inherit;
+            }
+          }
+        }
+      }
+    }
+
+    .e-tbar-btn {
+      background: $tbar-default-bg;
+      box-shadow: $tbar-btn-box-shadow;
+      color: $tbar-default-font;
+      @if $tbar-skin == 'bootstrap' {
+        margin: 1px 0;
+      }
+
+      @if $tbar-skin == 'highcontrast' {
+        border: 2px $tbar-border-type $tbar-btn-border-color;
+      }
+
+      &:focus {
+        background: $tbar-focus-bg;
+        @if $tbar-skin == 'bootstrap4' {
+          box-shadow: $tbar-focus-btn-box-shadow;
+        }
+        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
+          border: 1px solid $tbar-focus-border-color;
+          margin: 0;
+        }
+        border-color: $tbar-focus-border-color;
+        border-radius: $tbar-btn-border-radius;
+        color: $tbar-hover-font;
+        @if $tbar-skin == 'highcontrast' {
+          border: $tbar-dash-border;
+
+          &:active {
+            background: $tbar-btn-focus-active-bg-color;
+          }
+        }
+      }
+
+      &:hover {
+        background: $tbar-hover-bg;
+        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
+          border: 1px solid $tbar-hover-border-color;
+        }
+        border-color: $tbar-hover-border-color;
+        border-radius: $tbar-btn-border-radius;
+        color: $tbar-hover-font;
+
+        @if $tbar-skin == 'bootstrap4' {
+          .e-icons,
+          .e-tbar-btn-text {
+            color: inherit;
+          }
+        }
+
+        @if $tbar-skin == 'highcontrast' {
+          border: 2px $tbar-border-type $tbar-btn-hover-border-color;
+
+          .e-icons {
+            color: $tbar-hover-font;
+          }
+
+          &:focus {
+            .e-icons,
+            .e-tbar-btn-text {
+              color: $tbar-hover-font;
+            }
+          }
+
+          &:active {
+            .e-icons,
+            .e-tbar-btn-text {
+              color: $tbar-select-font;
+            }
+          }
+        }
+      }
+    }
+
+    .e-toolbar-items {
+      background: $tbar-default-bg;
+
+      .e-toolbar-item {
+
+        &.e-overlay {
+          background: $tbar-default-bg;
+
+          @if $tbar-skin == 'highcontrast' {
+            opacity: 1;
+          }
+
+          @if $tbar-skin == 'bootstrap4' {
+            opacity: .65;
+          }
+
+          .e-tbar-btn-text {
+            color: $tbar-default-font-overlay;
+          }
+
+          .e-icons {
+            color: $tbar-default-icon-overlay;
+          }
+        }
+
+        .e-tbar-btn-text {
+          color: $tbar-default-font;
+        }
+
+        @if $tbar-skin == 'bootstrap4' {
+          .e-tbar-btn {
+            &:hover,
+            &:focus {
+              .e-icons,
+              .e-tbar-btn-text {
+                color: inherit;
+              }
+            }
+          }
+        }
+
+        &.e-separator {
+          border: $tbar-separator-border-type $tbar-separator-border;
+          border-width: $tba-horizontal-separator;
+        }
+      }
+    }
+
+    &.e-rtl .e-hor-nav {
+      background: $tbar-default-bg;
+      border: $tbar-border-nav-type $tbar-default-border;
+      border-left: 0;
+      border-width: $tbar-popup-rtl-border-width;
+
+      &:not(.e-hor-nav.e-nav-active):hover {
+        background: $tbar-hover-bg;
+        color: $tbar-hover-font;
+      }
+    }
+
+    .e-hor-nav {
+      background: $tbar-default-bg;
+      border: $tbar-border-nav-type $tbar-default-border;
+      border-width: $tbar-popup-border-width;
+    }
+
+    .e-hor-nav:not(.e-expended-nav)  {
+
+      &::after {
+        @include tbar-btn-animation;
+      }
+
+      &:active {
+        border: $tbar-nav-press-border;
+        box-shadow: $tbar-nav-pressed-box-shadow;
+        color: $tbar-select-font;
+
+        @if $tbar-skin == 'bootstrap4' {
+          background: $tbar-hover-bg;
+
+          .e-icons {
+            color: inherit;
+          }
+        }
+
+        &::after {
+          @include tbar-btn-animation-after;
+        }
+     }
+
+      &:hover {
+        background: $tbar-hover-bg;
+        border-left: $tbar-nav-hover-border;
+        color: $tbar-hover-font;
+
+        @if $tbar-skin == 'bootstrap4' {
+          background: $tbar-popup-hover-bg;
+
+          .e-icons {
+            color: inherit;
+          }
+        }
+
+        @if $tbar-skin == 'highcontrast' {
+          &:not(.e-nav-active) {
+            border: 2px $tbar-border-type $tbar-nav-hover-color;
+          }
+
+          &:active {
+            background: $tbar-nav-hover-active-bg-color;
+            border: 0;
+          }
+        }
+      }
+
+      &:focus {
+        background: $tbar-hover-bg;
+        border-color: $tbar-pressed-border;
+        border-left: $tbar-nav-focus-border;
+        color: $tbar-pressed-font;
+
+        @if $tbar-skin == 'bootstrap4' {
+          .e-icons {
+            color: inherit;
+          }
+        }
+
+        @if $tbar-skin == 'highcontrast' {
+          background: inherit;
+          border: $tbar-dash-border;
+        }
+      }
+    }
+
+    .e-tbar-btn {
+
+      &:active {
+        background:  $tbar-press-bg;
+        @if $tbar-skin == 'bootstrap' {
+          border-left: 1px solid $tbar-press-border-color;
+        }
+        border-color: $tbar-press-border-color;
+        border-radius: $tbar-btn-border-radius;
+        box-shadow: $tbar-btn-pressed-box-shadow;
+        color: $tbar-press-font;
+
+        @if $tbar-skin == 'bootstrap4' {
+          background: $tbar-active-btn-bg;
+          border: 1px solid $tbar-active-border-color;
+
+          .e-icons,
+          .e-tbar-btn-text {
+            color: inherit;
+          }
+        }
+        @if $tbar-skin == 'highcontrast' {
+          color: $tbar-pressed-font;
+
+          .e-icons,
+          .e-tbar-btn-text {
+            color: $tbar-pressed-font;
+          }
+        }
+      }
+    }
+  }
+}