@syncfusion/ej2-angular-ribbon 22.1.34-ngcc → 22.1.34

package/styles/ribbon/_theme.scss

@@ -0,0 +1,343 @@
+@include export-module('ribbon-theme') {
+
+  .e-ribbon.e-rbn {
+    .e-ribbon-tab {
+      .e-tab-header {
+        border-color: $ribbon-border-color;
+
+        .e-toolbar-item {
+          .e-tab-wrap {
+            .e-tab-text {
+              color: $ribbon-text-color;
+            }
+
+            &:hover .e-tab-text {
+              color: $ribbon-tab-text-hover-color;
+            }
+          }
+
+          &.e-active .e-tab-wrap .e-tab-text {
+            color: $ribbon-active-tab-color;
+          }
+        }
+
+        .e-indicator {
+          background: $ribbon-active-tab-indicator-color;
+        }
+      }
+
+      .e-hscroll .e-scroll-nav {
+        border-color: $ribbon-hscroll-border-color;
+        background: $ribbon-hscroll-background-color;
+
+        .e-nav-arrow {
+          color: $ribbon-hscroll-color;
+        }
+
+        &:hover {
+          border-color: $ribbon-hscroll-hover-border-color;
+          background: $ribbon-hscroll-hover-background-color;
+
+          .e-nav-arrow {
+            color: $ribbon-hscroll-hover-color;
+          }
+        }
+
+        &:active {
+          border-color: $ribbon-hscroll-active-border-color;
+          background: $ribbon-hscroll-active-background-color;
+
+          .e-nav-arrow {
+            color: $ribbon-hscroll-active-color;
+          }
+        }
+
+        &:focus {
+          border-color: $ribbon-hscroll-focus-border-color;
+          background: $ribbon-hscroll-focus-background-color;
+
+          .e-nav-arrow {
+            color: $ribbon-hscroll-focus-color;
+          }
+        }
+      }
+
+      .e-ribbon-file-menu {
+        color: $ribbon-text-color;
+        background: $ribbon-items-background-color;
+        border-color: $ribbon-border-color;
+
+        &.e-active {
+          color: $ribbon-active-file-menu-color;
+          background: $ribbon-active-file-menu-background;
+        }
+
+        &:hover:not(.e-active) {
+          color: $ribbon-tab-text-hover-color;
+        }
+
+        &:focus-visible {
+          color: $ribbon-tab-text-focus-color;
+        }
+      }
+
+      .e-ribbon-help-template {
+        border-color: $ribbon-border-color;
+      }
+    }
+
+    .e-ribbon-tab.e-focused .e-tab-header {
+      .e-tab-wrap:focus {
+        .e-tab-text {
+          color: $ribbon-tab-text-focus-color;
+        }
+      }
+    }
+
+    .e-ribbon-collapse-btn {
+      color: $ribbon-items-icon-color;
+      background: $ribbon-collapse-btn-background;
+      border-color: transparent;
+
+      &:hover,
+      &:focus-visible {
+        background: $ribbon-items-focus-background-color;
+        color: $ribbon-items-focus-color;
+        border-color: $ribbon-items-focus-border-color;
+      }
+    }
+  }
+
+  .e-ribbon.e-rbn,
+  .e-ribbon-group-overflow-ddb {
+    background: $ribbon-header-bg-color;
+    border-color: $ribbon-border-color;
+
+    .e-ribbon-item:not(.e-disabled) {
+
+      .e-checkbox-wrapper {
+        .e-label {
+          color: $ribbon-text-color;
+        }
+
+        &.e-checkbox-disabled .e-label {
+          color: $ribbon-items-disabled-color;
+        }
+      }
+
+      .e-colorpicker-wrapper {
+
+        &.e-ribbon-hover,
+        &.e-ribbon-open {
+          border-color: $ribbon-items-hover-background-color;
+        }
+      }
+
+      .e-split-btn-wrapper {
+
+        &.e-ribbon-hover,
+        &.e-ribbon-open {
+          border-color: $ribbon-items-hover-background-color;
+        }
+
+        &.e-vertical:hover .e-split-btn:not(:hover) {
+          border-color: transparent;
+        }
+      }
+    }
+
+    .e-ribbon-item {
+      .e-split-btn-wrapper {
+        &.e-vertical:hover .e-split-btn:disabled {
+          border-color: transparent;
+        }
+      }
+    }
+
+    .e-ribbon-item,
+    .e-ribbon-group-overflow,
+    &.e-ribbon-overflow {
+
+      .e-btn:not(.e-ribbon-file-menu),
+      .e-ribbon-group-of-btn {
+        color: $ribbon-text-color;
+        background: $ribbon-items-background-color;
+        border-color: transparent;
+
+        .e-btn-icon {
+          color: $ribbon-items-icon-color;
+        }
+
+        &:hover {
+          background: $ribbon-items-hover-background-color;
+          color: $ribbon-items-hover-color;
+          border-color: $ribbon-items-hover-border-color;
+
+          .e-btn-icon {
+            color: $ribbon-items-hover-color;
+          }
+        }
+
+        &.e-active,
+        &:active {
+          background: $ribbon-items-active-background-color;
+          color: $ribbon-items-active-color;
+
+          .e-btn-icon {
+            color: $ribbon-items-active-color;
+          }
+        }
+
+        &:focus-visible {
+          background: $ribbon-items-focus-background-color;
+          color: $ribbon-items-focus-color;
+          border-color: $ribbon-items-focus-border-color;
+
+          .e-btn-icon {
+            color: $ribbon-items-focus-color;
+          }
+        }
+
+        &:disabled {
+          color: $ribbon-items-disabled-color;
+
+          .e-btn-icon {
+            color: $ribbon-items-disabled-color;
+          }
+        }
+      }
+    }
+
+    .e-ribbon-group-header {
+      color: $ribbon-text-color;
+    }
+
+    .e-ribbon-launcher-icon {
+      border-color: transparent;
+
+      &:hover,
+      &:focus-visible {
+        background: $ribbon-items-focus-background-color;
+        color: $ribbon-items-focus-color;
+        border-color: $ribbon-items-focus-border-color;
+      }
+    }
+
+    .e-input-group {
+      border-color: $ribbon-input-group-border-color;
+      background: $ribbon-input-group-background-color;
+
+      input.e-input {
+        color: $ribbon-text-color;
+      }
+
+      &.e-control-wrapper {
+        .e-input-group-icon {
+          color: $ribbon-items-icon-color;
+
+          &:hover {
+            background: $ribbon-items-hover-background-color;
+            color: $ribbon-items-hover-color;
+          }
+        }
+      }
+
+      &.e-disabled,
+      &:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled {
+        border-color: $ribbon-items-disabled-color;
+      }
+    }
+
+    .e-ribbon-group::after {
+      border-color: $ribbon-group-border-color;
+    }
+  }
+
+  .e-ribbon-group-overflow-ddb {
+    &.e-dropdown-popup {
+      background: $ribbon-header-bg-color;
+      border-color: $ribbon-border-color;
+    }
+
+    .e-ribbon-overflow-target {
+      .e-ribbon-of-tab {
+        box-shadow: $ribbon-overflow-box-shadow;
+      }
+    }
+  }
+
+  .e-bigger.e-ribbon.e-rbn,
+  .e-bigger .e-ribbon.e-rbn,
+  .e-bigger .e-ribbon-group-overflow-ddb,
+  .e-bigger.e-ribbon-group-overflow-ddb {
+    .e-ribbon-item .e-split-colorpicker.e-split-btn {
+      background: $ribbon-items-background-color;
+
+      &:hover {
+        background: $ribbon-items-hover-background-color;
+      }
+
+      &.e-active,
+      &:active {
+        background: $ribbon-items-active-background-color;
+      }
+
+      &:focus {
+        background: $ribbon-items-focus-background-color;
+      }
+    }
+  }
+
+  .e-bigger .e-ribbon-group-overflow-ddb {
+    &.e-dropdown-popup {
+      background: $ribbon-header-bg-color;
+      border-color: $ribbon-border-color;
+    }
+  }
+
+  .e-ribbon-tooltip.e-tooltip-wrap {
+    &.e-popup {
+      background: $ribbon-tooltip-background-color;
+    }
+
+    .e-tip-content {
+      color: $ribbon-tooltip-text-color;
+    }
+
+    .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
+      color: $ribbon-tooltip-background-color;
+    }
+  }
+
+  .e-ribbon-menu {
+
+    &.e-menu-wrapper,
+    &.e-menu-container {
+      &:not(.e-menu-popup) {
+        background: $ribbon-menu-background-color;
+      }
+    }
+
+    &.e-menu-wrapper ul.e-vertical,
+    &.e-menu-wrapper ul.e-ul {
+      &.e-menu {
+        border-color: $ribbon-menu-border-color;
+        background: $ribbon-menu-items-background-color;
+      }
+
+      .e-menu-item {
+        color: $ribbon-text-color;
+
+        .e-menu-icon,
+        .e-caret {
+          color: $ribbon-menu-items-icon-color;
+        }
+
+        &.e-focused {
+          background: $ribbon-menu-hover-background-color;
+          color: $ribbon-menu-items-color;
+        }
+      }
+    }
+  }
+}

package/styles/ribbon/bootstrap-dark.css

@@ -130,6 +130,9 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-item {
+  width: fit-content;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -138,7 +141,6 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -214,9 +216,6 @@
   height: auto;
   min-height: auto;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
-  box-shadow: none;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -226,10 +225,9 @@
   min-width: auto;
   width: auto;
   border-style: solid;
-  transform: none;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -237,7 +235,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
   height: auto;
-  transform: none;
   line-height: 16px;
   padding: 0 4px;
   width: auto;
@@ -276,7 +273,6 @@
   border: none;
   height: 32px;
   margin: auto;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -307,9 +303,6 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
-.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 2px;
   height: auto;
@@ -359,9 +352,6 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-right: 30px;
-}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -373,9 +363,6 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-left: 30px;
-}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -416,8 +403,6 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
-  min-height: auto;
-  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -501,7 +486,6 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -600,7 +584,6 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   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 {
@@ -610,7 +593,6 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 2px;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -720,8 +702,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 2px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -745,24 +726,22 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  margin-left: auto;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 2px 8px;
   font-weight: 400;
   line-height: 22px;
 }
 
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  padding: 8px;
-  margin: 0 0 0 auto;
-}
-
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  padding: 8px;
-  margin: 0 auto 0 0;
+  margin-right: auto;
+  margin-left: unset;
 }
 
 .e-ribbon-menu {
@@ -782,17 +761,6 @@
   padding-left: 37px !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 14px;
-  height: 26px;
-  -ms-flex-align: center;
-      align-items: center;
-}
-.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 16px;
-}
-
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -831,10 +799,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;
@@ -926,12 +890,6 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
-.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1146,9 +1104,7 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 2px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1156,27 +1112,6 @@
   margin: 10px;
   padding: 0;
 }
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 10px;
-}
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 10px;
-}
-
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 14px;
-  height: 32px;
-}
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 20px;
-  line-height: 20px;
-}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/ribbon/bootstrap-dark.scss

@@ -1 +1,17 @@
-@import 'ej2-ribbon/styles/ribbon/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
+@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap-dark-definition.scss';
+@import 'ej2-navigations/styles/v-scroll/bootstrap-dark-definition.scss';
+@import 'ej2-navigations/styles/context-menu/bootstrap-dark-definition.scss';
+@import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
+@import 'ej2-navigations/styles/menu/bootstrap-dark-definition.scss';
+@import 'ej2-navigations/styles/tab/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'icons/bootstrap-dark.scss';
+@import 'all.scss';