@syncfusion/ej2-navigations 24.2.4 → 25.1.35

package/styles/carousel/icons/_bds.scss

@@ -0,0 +1,30 @@
+@include export-module('carousel-bds-icons') {
+  .e-carousel {
+
+    .e-previous-icon::before {
+      content: '\e765';
+    }
+
+    .e-next-icon::before {
+      content: '\e748';
+    }
+
+    .e-play-icon::before {
+      content: '\e70c';
+    }
+
+    .e-pause-icon::before {
+      content: '\e77b';
+    }
+
+    &.e-rtl {
+      .e-previous-icon::before {
+        content: '\e748';
+      }
+
+      .e-next-icon::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/carousel/material-dark.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/material.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/material3-dark.css

@@ -193,6 +193,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/material3.css

@@ -249,6 +249,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/tailwind-dark.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/tailwind.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/context-menu/_bds-definition.scss

@@ -0,0 +1,65 @@
+//layout variables
+$cmenu-back-icon: '\e977' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: $text-base !default;
+$cmenu-bigger-font-size: $text-base !default;
+$cmenu-bigger-li-height: 36px !default;
+$cmenu-bigger-li-padding: 0 16px !default;
+$cmenu-bigger-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 14px !default;
+$cmenu-caret-font-size: $text-base !default;
+$cmenu-caret-icon: '\e956' !default;
+$cmenu-caret-icon-rtl: '\e937' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-icon-margin-right: 8px !default;
+$cmenu-icon-bigger-margin-right: 12px !default;
+$cmenu-li-height: 32px !default;
+$cmenu-li-padding: 0 12px !default;
+$cmenu-li-right-padding: 12px !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-font-size: $text-lg !default;
+$cmenu-icon-bigger-font-size: 22px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: $shadow-lg !default;
+$cmenu-seperator-bigger-padding: 4px 0 !default;
+$cmenu-seperator-padding: 4px 0 !default;
+$cmenu-ul-border: 1px solid $border-light !default;
+$cmenu-ul-border-radius: 8px !default;
+$cmenu-ul-padding: 4px 6px !default;
+$cmenu-ul-bigger-padding: 4px 6px !default;
+$cmenu-caret-color: $content-text-color-focus !default;
+$cmenu-color: $content-text-color !default;
+$cmenu-disable-text: rgba($content-text-color, .65) !default;
+$cmenu-font-size: $text-sm !default;
+$cmenu-font-weight: $font-weight-normal !default;
+$cmenu-li-bgcolor: $content-bg-color-focus !default;
+$cmenu-li-border-color: $border-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-selection-bgcolor: $content-bg-color-focus !default;
+$cmenu-li-selection-font-color: $content-text-color-focus !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
+$cmenu-li-selected-outline-offset: 0 !default;
+$cmenu-icon-color: $icon-color !default;
+$cmenu-icon-disabled-color: rgba($icon-color, .65) !default;
+$cmenu-selected-color: $content-text-color-focus !default;
+$cmenu-sub-ul-box-shadow: $shadow-lg !default;
+$cmenu-ul-bgcolor: $flyout-bg-color !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $cmenu-caret-color !default;
+$cmenu-hover-icon-color: $cmenu-icon-color !default;
+
+/* stylelint-disable */
+.e-contextmenu-wrapper,
+.e-contextmenu-container {
+  @at-root {
+    & ul {
+      &.e-contextmenu {
+        padding: 4px 6px !important;
+      }
+    }
+  }
+}

package/styles/context-menu/icons/_bds.scss

@@ -0,0 +1,33 @@
+@include export-module('context-menu-bds-icons') {
+
+  /*! contextmenu layout */
+  .e-contextmenu-wrapper,
+  .e-contextmenu-container {
+    @at-root {
+      & ul {
+        & .e-menu-item  {
+          & .e-previous {
+            &::before {
+              content: '\e773';
+            }
+          }
+
+          & .e-caret {
+            &::before {
+              content: '\e748';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-rtl.e-contextmenu-wrapper .e-menu-item,
+  .e-rtl.e-contextmenu-container .e-menu-item {
+    & .e-caret {
+      &::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/fabric-dark.css

@@ -1333,8 +1333,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 0 1.5px;
 }
@@ -1518,6 +1518,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1622,6 +1635,12 @@
   min-height: 39px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1672,7 +1691,7 @@
   font-size: 14px;
   padding: 0 12px 0 8px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 34px;
   padding: 0 1px;
@@ -1965,6 +1984,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 3px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }
@@ -2003,7 +2025,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 3px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -2987,6 +3008,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10300,6 +10327,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/fabric.css

@@ -1335,8 +1335,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 0 1.5px;
 }
@@ -1520,6 +1520,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1624,6 +1637,12 @@
   min-height: 39px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1674,7 +1693,7 @@
   font-size: 14px;
   padding: 0 12px 0 8px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 34px;
   padding: 0 1px;
@@ -1967,6 +1986,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 3px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }
@@ -2005,7 +2027,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 3px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -2990,6 +3011,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10311,6 +10338,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/fluent-dark.css

@@ -1368,8 +1368,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 0;
 }
@@ -1553,6 +1553,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 28px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1657,6 +1670,12 @@
   min-height: 38px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1672,7 +1691,7 @@
   padding: 0 4px;
   border-radius: 2px;
   line-height: 22px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
   font-size: 18px;
   font-weight: 400;
@@ -1707,7 +1726,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 0;
@@ -2000,6 +2019,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -2038,7 +2060,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -2090,7 +2111,7 @@
   background: transparent;
   box-shadow: none;
   color: #a19f9d;
-  border: none;
+  border: 1px solid transparent;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
   color: #a19f9d;
@@ -2112,9 +2133,9 @@
   background: none;
   border-radius: 0;
   color: #f3f2f1;
-  border-color: #a19f9d;
+  border-color: transparent;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
@@ -2127,7 +2148,7 @@
   background: #292827;
   border-color: #a19f9d;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   border-radius: 0;
   color: #f3f2f1;
 }
@@ -2147,7 +2168,7 @@
   background: #323130;
   border-color: #323130;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   border-radius: 0;
   box-shadow: none;
   color: #f3f2f1;
@@ -2283,7 +2304,7 @@
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
   background: #323130;
   box-shadow: none;
-  border-color: #a19f9d;
+  border-color: transparent;
   border-style: solid;
   border-width: 0;
 }
@@ -2301,9 +2322,9 @@
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: none;
   border-radius: 0;
-  border-color: #a19f9d;
+  border-color: transparent;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -2311,7 +2332,7 @@
   border-radius: 0;
   border-color: #a19f9d;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: #323130;
@@ -2319,7 +2340,7 @@
   box-shadow: none;
   border-color: #323130;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   border: solid #797775;
@@ -3023,6 +3044,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10444,6 +10471,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;