@syncfusion/ej2-navigations 20.2.50 → 20.3.47

package/styles/accordion/_theme.scss

@@ -1,6 +1,7 @@
-@include export-module('accordion-theme') {
+@include export-module('accordion-theme') {
+
   /*! accordion theme */
-  // sass-lint:disable no-vendor-prefixes
+  /* stylelint-disable property-no-vendor-prefix */
   .e-accordion {
     -webkit-tap-highlight-color: $acrdn-tab-highlight-color;
     background: $acrdn-default-bg-color;
@@ -422,7 +423,7 @@
 
       &.e-selected {
         @if $acrdn-skin == 'bootstrap' {
-          border:  $acrdn-border-size solid $acrdn-default-border;
+          border: $acrdn-border-size solid $acrdn-default-border;
         }
         @else {
           &.e-select {
@@ -457,7 +458,7 @@
 
         + .e-selected {
           @if $acrdn-skin == 'bootstrap' {
-            border:  $acrdn-border-size solid $acrdn-default-border;
+            border: $acrdn-border-size solid $acrdn-default-border;
           }
           @if $acrdn-skin == 'material' {
             border-top: $acrdn-selected-border-size solid  transparent;
@@ -499,7 +500,7 @@
           @if $acrdn-skin == 'bootstrap' {
             background: $acrdn-selected-header-color;
             border: 0;
-            border-bottom:  $acrdn-border-size solid $acrdn-default-border;
+            border-bottom: $acrdn-border-size solid $acrdn-default-border;
             border-radius: 0;
           }
 

package/styles/accordion/bootstrap-dark.css

@@ -259,6 +259,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #1a1a1a;

package/styles/accordion/bootstrap.css

@@ -260,6 +260,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/bootstrap4.css

@@ -250,6 +250,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/bootstrap5-dark.css

@@ -1,4 +1,5 @@
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: "\e729";
@@ -241,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #212529;

package/styles/accordion/bootstrap5.css

@@ -1,4 +1,5 @@
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: "\e729";
@@ -241,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/fabric-dark.css

@@ -232,6 +232,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #201f1f;

package/styles/accordion/fabric.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/fluent-dark.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #1b1a19;

package/styles/accordion/fluent.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/highcontrast-light.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #ccc;

package/styles/accordion/highcontrast.css

@@ -234,6 +234,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #000;

package/styles/accordion/icons/_bootstrap-dark.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-bootstrap-dark-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_bootstrap.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-bootstrap-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_bootstrap4.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-bootstrap4-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_bootstrap5.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-bootstrap5-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,7 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }
-  

package/styles/accordion/icons/_fabric-dark.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-fabric-dark-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_fabric.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-fabric-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_fluent.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-fluent-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,7 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }
-  

package/styles/accordion/icons/_fusionnew.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-fusionnew-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,7 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }
-  

package/styles/accordion/icons/_highcontrast-light.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-highcontrast-light-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_highcontrast.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-highcontrast-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_material-dark.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-material-dark-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_material.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-material-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,6 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }

package/styles/accordion/icons/_material3.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-material3-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,7 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }
-  

package/styles/accordion/icons/_tailwind.scss

@@ -1,5 +1,5 @@
-
 @include export-module('accordion-tailwind-icons') {
+
   /*! accordion icons */
   #{&}.e-accordion {
 
@@ -12,7 +12,6 @@
       &.e-expand-icon {
         transform: rotate(-180deg);
       }
-  }
+    }
   }
 }
-  

package/styles/accordion/material-dark.css

@@ -239,6 +239,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #303030;

package/styles/accordion/material.css

@@ -240,6 +240,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/tailwind-dark.css

@@ -242,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #232e3e;

package/styles/accordion/tailwind.css

@@ -242,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #f9fafb;

package/styles/appbar/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/appbar/_bootstrap-dark-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component bootstrap-dark theme definitions and variables */
+
+$appbar-bg-color-primary: $brand-primary !default;
+$appbar-color-primary: $brand-primary-font !default;
+$appbar-border-color-primary: $brand-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_bootstrap-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component bootstrap theme definitions and variables */
+
+$appbar-bg-color-primary: $brand-primary !default;
+$appbar-color-primary: $brand-primary-font !default;
+$appbar-border-color-primary: $brand-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_bootstrap4-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component bootstrap4 theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-font !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/appbar/_bootstrap5-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component bootstrap5 theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_fabric-dark-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component fabric-dark theme definitions and variables */
+
+$appbar-bg-color-primary: $theme-primary !default;
+$appbar-color-primary: $theme-primary-font !default;
+$appbar-border-color-primary: $theme-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_fabric-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component fabric theme definitions and variables */
+
+$appbar-bg-color-primary: $theme-primary !default;
+$appbar-color-primary: $theme-primary-font !default;
+$appbar-border-color-primary: $theme-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/appbar/_fluent-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component FluentUI theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_fusionnew-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component bootstrap5 theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_highcontrast-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component highcontrast theme definitions and variables */
+
+$appbar-bg-color-primary: $selection-bg !default;
+$appbar-color-primary: $selection-font !default;
+$appbar-border-color-primary: $selection-bg !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: 1px solid !default;

package/styles/appbar/_highcontrast-light-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component highcontrast-light theme definitions and variables */
+
+$appbar-bg-color-primary: $selection-bg !default;
+$appbar-color-primary: $selection-font !default;
+$appbar-border-color-primary: $selection-bg !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: 1px solid !default;

package/styles/appbar/_layout.scss

@@ -0,0 +1,81 @@
+@include export-module('appbar-layout') {
+
+  /*! appbar component styles */
+  .e-bigger .e-appbar,
+  .e-appbar.e-bigger {
+    height: 56px;
+    font-size: $appbar-bigger-font-size;
+
+    &.e-dense {
+      height: 48px;
+    }
+
+    &.e-prominent {
+      height: 112px;
+    }
+  }
+
+  .e-appbar {
+    display: flex;
+    width: 100%;
+    height: 48px;
+    flex-shrink: 0;
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+    padding: 8px;
+    overflow: hidden;
+    font-size: $appbar-font-size;
+
+    > div:first-child {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    &.e-sticky {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+    }
+
+    &.e-prominent {
+      height: 94px;
+      align-items: flex-start;
+
+      > div:first-child {
+        align-items: flex-start;
+      }
+    }
+
+    &.e-dense {
+      height: 40px;
+    }
+
+    &.e-horizontal-bottom {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+
+      &.e-sticky {
+        position: fixed;
+        top: auto;
+      }
+    }
+
+    .e-appbar-separator {
+      height: 32px;
+    }
+
+    .e-appbar-spacer {
+      flex-grow: 1;
+    }
+  }
+
+  .e-inherit.e-menu-wrapper.e-scrollable .e-menu,
+  .e-inherit.e-menu-container.e-scrollable .e-menu {
+    overflow: hidden;
+  }
+}

package/styles/appbar/_material-dark-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component material-dark theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-font !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 14px !default;
+$appbar-border: none !default;

package/styles/appbar/_material-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component material theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-font !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 14px !default;
+$appbar-border: none !default;

package/styles/appbar/_material3-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component bootstrap5 theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

package/styles/appbar/_tailwind-definition.scss

@@ -0,0 +1,8 @@
+/*! AppBar component tailwind theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;