@syncfusion/ej2-ribbon 27.1.50 → 28.1.33

package/styles/bds.scss

@@ -0,0 +1,19 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'ej2-popups/styles/tooltip/bds-definition.scss';
+@import 'ej2-buttons/styles/button/bds-definition.scss';
+@import 'ej2-buttons/styles/check-box/bds-definition.scss';
+@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-base/bds-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
+@import 'ej2-navigations/styles/h-scroll/bds-definition.scss';
+@import 'ej2-navigations/styles/v-scroll/bds-definition.scss';
+@import 'ej2-navigations/styles/context-menu/bds-definition.scss';
+@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
+@import 'ej2-navigations/styles/menu/bds-definition.scss';
+@import 'ej2-navigations/styles/tab/bds-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bds-definition.scss';
+@import 'ribbon/bds-definition.scss';
+@import 'ribbon/icons/bds.scss';
+@import 'ribbon/all.scss';
+@import 'ribbon/bigger.scss';

package/styles/bootstrap-dark-lite.css

@@ -72,6 +72,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -334,6 +364,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -828,12 +861,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1105,7 +1142,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 36px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1397,6 +1434,16 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #131313;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, rgb(80, 80, 80)), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(80, 80, 80) 28%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #131313;

package/styles/bootstrap-dark.css

@@ -72,6 +72,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -334,6 +364,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -828,12 +861,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1105,7 +1142,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 36px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1397,6 +1434,16 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #131313;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, rgb(80, 80, 80)), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(80, 80, 80) 28%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #131313;
@@ -2311,7 +2358,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 9px 0 9px 12px;
+  padding: 9px 0 9px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,

package/styles/bootstrap-lite.css

@@ -74,6 +74,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -336,6 +366,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -830,12 +863,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1107,7 +1144,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 36px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1399,6 +1436,16 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #f8f8f8;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, rgb(245, 245, 245)), color-stop(60%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(245, 245, 245) 38%, rgba(255, 255, 255, 0) 60%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #f8f8f8;

package/styles/bootstrap.css

@@ -74,6 +74,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -336,6 +366,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -830,12 +863,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1107,7 +1144,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 36px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1399,6 +1436,16 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #f8f8f8;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, rgb(245, 245, 245)), color-stop(60%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(245, 245, 245) 38%, rgba(255, 255, 255, 0) 60%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #f8f8f8;
@@ -2313,7 +2360,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 9px 0 9px 12px;
+  padding: 9px 0 9px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,

package/styles/bootstrap4-lite.css

@@ -116,6 +116,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -378,6 +408,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -872,12 +905,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1149,7 +1186,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 36px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1441,6 +1478,16 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #f8f9fa;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, #adb5bd), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #adb5bd 28%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #f8f9fa;

package/styles/bootstrap4.css

@@ -116,6 +116,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -378,6 +408,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -872,12 +905,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1149,7 +1186,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 36px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1441,6 +1478,16 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #f8f9fa;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, #adb5bd), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #adb5bd 28%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #f8f9fa;