@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/appbar/_material3-definition.scss

@@ -1,6 +1,19 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $appbar-bg-color-primary: rgba($primary) !default;
 $appbar-color-primary: rgba($primary-text-color) !default;
 $appbar-border-color-primary: rgba($primary) !default;
 $appbar-font-size: $text-base !default;
 $appbar-bigger-font-size: $text-lg !default;
 $appbar-border: 1px solid !default;
+$appbar-bigger-height: 56px !default;
+$appbar-bigger-dense-height: 48px !default;
+$appbar-bigger-prominent-height: 112px !default;
+$appbar-nrml-height: 48px !default;
+$appbar-nrml-padding: 8px !default;
+$appbar-content-height: 100% !default;
+$appbar-nrml-prominent-height: 94px !default;
+$appbar-nrml-dense-height: 40px !default;
+$appbar-separator-height: 24px !default;
+$appbar-border-width: 1px !default;
+$appbar-input-group-icon-border: none !default;

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

@@ -1 +1,19 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: none !default;
+$appbar-bigger-height: 56px !default;
+$appbar-bigger-dense-height: 48px !default;
+$appbar-bigger-prominent-height: 112px !default;
+$appbar-nrml-height: 48px !default;
+$appbar-nrml-padding: 8px !default;
+$appbar-content-height: 100% !default;
+$appbar-nrml-prominent-height: 94px !default;
+$appbar-nrml-dense-height: 40px !default;
+$appbar-separator-height: 24px !default;
+$appbar-border-width: 1px !default;
+$appbar-input-group-icon-border: none !default;

package/styles/appbar/_tailwind-definition.scss

@@ -1,6 +1,19 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 $appbar-bg-color-primary: $primary !default;
 $appbar-color-primary: $primary-text-color !default;
 $appbar-border-color-primary: $primary !default;
 $appbar-font-size: $text-sm !default;
 $appbar-bigger-font-size: $text-base !default;
 $appbar-border: none !default;
+$appbar-bigger-height: 56px !default;
+$appbar-bigger-dense-height: 48px !default;
+$appbar-bigger-prominent-height: 112px !default;
+$appbar-nrml-height: 48px !default;
+$appbar-nrml-padding: 8px !default;
+$appbar-content-height: 100% !default;
+$appbar-nrml-prominent-height: 94px !default;
+$appbar-nrml-dense-height: 40px !default;
+$appbar-separator-height: 24px !default;
+$appbar-border-width: 1px !default;
+$appbar-input-group-icon-border: none !default;

package/styles/appbar/_tailwind3-definition.scss

@@ -1,6 +1,20 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $appbar-bg-color-primary: $primary !default;
 $appbar-color-primary: $primary-text !default;
 $appbar-border-color-primary: $primary !default;
 $appbar-font-size: $text-sm !default;
 $appbar-bigger-font-size: $text-base !default;
 $appbar-border: none !default;
+$appbar-bigger-height: 56px !default;
+$appbar-bigger-dense-height: 48px !default;
+$appbar-bigger-prominent-height: 112px !default;
+$appbar-nrml-height: 48px !default;
+$appbar-nrml-padding: 8px !default;
+$appbar-border-radius: $radius-4 !default;
+$appbar-content-height: 100% !default;
+$appbar-nrml-prominent-height: 94px !default;
+$appbar-nrml-dense-height: 40px !default;
+$appbar-separator-height: 24px !default;
+$appbar-border-width: 1px !default;
+$appbar-input-group-icon-border: none !default;

package/styles/appbar/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/appbar/_theme.scss

@@ -1,4 +1,6 @@
-@include export-module('appbar-theme') {
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@include export-module('appbar-theme') {
   .e-appbar {
     box-shadow: $appbar-bottom-shadow;
 
@@ -14,7 +16,7 @@
       }
 
       .e-appbar-separator {
-        border-left: 1px solid $appbar-color-alt1;
+        border-left: $appbar-border-width solid $appbar-color-alt1;
       }
 
       .e-btn,
@@ -58,7 +60,7 @@
       border-color: $appbar-border-color-alt2;
 
       .e-appbar-separator {
-        border-left: 1px solid $appbar-color-alt2;
+        border-left: $appbar-border-width solid $appbar-color-alt2;
       }
 
       .e-btn,
@@ -97,7 +99,7 @@
       border-color: $appbar-border-color-primary;
 
       .e-appbar-separator {
-        border-left: 1px solid $appbar-color-primary;
+        border-left: $appbar-border-width solid $appbar-color-primary;
       }
 
       .e-menu-wrapper,
@@ -115,10 +117,10 @@
       background: inherit;
       color: inherit;
       border-color: inherit;
-      border: 1px solid;
+      border: $appbar-border-width solid;
 
       .e-appbar-separator {
-        border-left: 1px solid;
+        border-left: $appbar-border-width solid;
       }
 
       .e-menu-wrapper,
@@ -205,7 +207,7 @@
 
   .e-inherit.e-input-group .e-input-group-icon,
   .e-inherit.e-input-group.e-control-wrapper .e-input-group-icon {
-    border: none;
+    border: $appbar-input-group-icon-border;
     color: inherit;
   }
 

package/styles/appbar/bds.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-appbar {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/appbar/bootstrap5.3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'fabric-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'fabric-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'fluent-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'fluent-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'fluent-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'fluent-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 /* stylelint-disable */
 .e-appbar.e-light {
   border-bottom: 1px solid var(--color-sf-appbar-border-color-alt1) !important;
@@ -40,7 +120,7 @@
   padding: 8px;
   overflow: hidden;
   font-size: 14px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-appbar > div:first-child {
   display: -webkit-box;
@@ -69,7 +149,7 @@
           align-items: flex-start;
 }
 .e-appbar.e-dense {
-  height: 40px;
+  height: 50px;
 }
 .e-appbar.e-horizontal-bottom {
   position: absolute;

package/styles/appbar/fluent2.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'material-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'material-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/appbar/material3-dark.css

@@ -1,5 +1,85 @@
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-appbar {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/appbar/material3-dark.scss

@@ -1,5 +1,4 @@
-
-
-@import 'material3-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'material3-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;