@syncfusion/blazor-themes 22.2.12 → 23.1.38

package/SCSS-Themes/ribbon/ribbon/material3-dark.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 2px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 2px 2px 0 !default;
 $ribbon-ddb-popup-font-size: 12px;
 $ribbon-ddb-popup-height: 24px;
+$ribbon-backstage-menu-hover-border: 0 !default;
+$ribbon-backstage-menu-active-border: 0 !default;
+$ribbon-backstage-menu-item-height: 38px !default;
+$ribbon-backstage-menu-icon-font-size: 20px !default;
+$ribbon-backstage-menu-icon-line-height: 20px !default;
+$ribbon-backstage-menu-icon-padding: 9px 16px 9px 14px !default;
+$ribbon-backstage-menu-blank-icon-padding: 50px !default;
+$ribbon-backstage-btn-focus-border: 0 !default;
+$ribbon-backstage-btn-height: 38px !default;
+$ribbon-backstage-btn-line-height: 38px !default;
+$ribbon-backstage-btn-icon-font-size: 20px !default;
+$ribbon-backstage-btn-icon-line-height: 20px !default;
+$ribbon-backstage-btn-icon-padding: 9px 16px 9px 14px !default;
+$ribbon-backstage-btn-hover-border: 0 !default;
+$ribbon-group-button-icon-margin: 5px !default;
+$ribbon-group-button-ddb-padding: 4px 9px !default;
+$ribbon-group-button-icon-padding: 0 1px 0 0 !default;
+$ribbon-group-button-ddb-border-radius: 4px !default;
+$ribbon-group-button-padding: 0 5px 0 0 !default;
+$ribbon-group-button-ddb-border: none !default;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -161,6 +181,20 @@ $ribbon-bigger-launcher-icon-margin: 0 2px 2px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 2px 2px 0 !default;
 $ribbon-bigger-ddb-popup-font-size: 14px;
 $ribbon-bigger-ddb-popup-height: 32px;
+$ribbon-bigger-backstage-menu-item-height: 48px !default;
+$ribbon-bigger-backstage-menu-icon-font-size: 24px !default;
+$ribbon-bigger-backstage-menu-icon-line-height: 24px !default;
+$ribbon-bigger-backstage-menu-icon-padding: 12px 12px 12px 16px !default;
+$ribbon-bigger-backstage-menu-blank-icon-padding: 52px !default;
+$ribbon-bigger-backstage-btn-height: 48px !default;
+$ribbon-bigger-backstage-btn-line-height: 48px !default;
+$ribbon-bigger-backstage-btn-icon-font-size: 24px !default;
+$ribbon-bigger-backstage-btn-icon-line-height: 24px !default;
+$ribbon-bigger-backstage-btn-icon-padding: 12px 12px 12px 16px !default;
+$ribbon-bigger-group-button-icon-padding: 0 !default;
+$ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
+$ribbon-bigger-group-button-ddb-padding: 12px !default;
+$ribbon-bigger-group-button-padding: 0 8px 0 0 !default;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;
@@ -208,6 +242,38 @@ $ribbon-hscroll-focus-color: rgba($icon-color) !default;
 $ribbon-tooltip-background-color: rgba($tooltip-bg-color) !default;
 $ribbon-tooltip-text-color: rgba($tooltip-text-color) !default;
 $ribbon-overflow-box-shadow: $shadow-md !default;
+$ribbon-backstage-menu-bg-color: rgba($primary) !default;
+$ribbon-backstage-menu-items-bg-color: rgba($primary) !default;
+$ribbon-backstage-items-color: rgba($surface) !default;
+$ribbon-backstage-menu-icon-color: rgba($surface) !default;
+$ribbon-backstage-menu-hover-bg-color: $primary-bg-color-hover !default;
+$ribbon-backstage-menu-hover-border-color: unset !default;
+$ribbon-backstage-menu-items-hover-color: rgba($surface) !default;
+$ribbon-backstage-menu-icon-hover-color: rgba($surface) !default;
+$ribbon-backstage-menu-active-bg-color: $primary-bg-color-pressed !default;
+$ribbon-backstage-menu-active-border-color: unset !default;
+$ribbon-backstage-menu-items-active-color: rgba($surface) !default;
+$ribbon-backstage-menu-icon-active-color: rgba($surface) !default;
+$ribbon-backstage-separator-color: rgba($flyout-border) !default;
+$ribbon-backstage-separator-color: $border-light !default;
+$ribbon-backstage-btn-bg-color: rgba($primary) !default;
+$ribbon-backstage-btn-color: rgba($surface) !default;
+$ribbon-backstage-btn-focus-bg-color: $primary-bg-color-hover !default;
+$ribbon-backstage-btn-focus-color: rgba($surface) !default;
+$ribbon-backstage-btn-focus-border-color: unset !default;
+$ribbon-backstage-btn-hover-bg-color: $primary-bg-color-pressed !default;
+$ribbon-backstage-btn-hover-color: rgba($surface) !default;
+$ribbon-backstage-btn-hover-border-color: unset !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $flyout-bg-color !default;
+$ribbon-group-button-icon-hover-color: $icon-color-hover !default;
+$ribbon-group-button-hover-background: $flyout-bg-color-hover !default;
+$ribbon-group-button-text-hover-color: $content-text-color-hover !default;
+$ribbon-group-button-active-background: rgba($content-bg-color-selected) !default;
+$ribbon-group-button-text-active-color: $content-text-color-selected !default;
+$ribbon-group-button-selected-background: rgba($content-bg-color-selected) !default;
+$ribbon-group-button-dropdown-popup-border-color: unset !default;
+$ribbon-group-button-dropdown-popup-box-shadow: $shadow-sm !default;
 
 @include export-module('ribbon-layout') {
   .e-ribbon.e-rbn {
@@ -223,7 +289,8 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
         display: none;
       }
 
-      .e-ribbon-file-menu {
+      .e-ribbon-file-menu,
+      .e-ribbon-backstage {
         position: absolute;
         line-height: $ribbon-file-menu-height;
         padding: $ribbon-file-menu-padding;
@@ -232,6 +299,7 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
         font-size: $ribbon-file-menu-size;
         font-weight: $ribbon-file-menu-weight;
         box-shadow: none;
+        text-transform: none;
 
         &.e-active {
           border-radius: $ribbon-file-menu-border-radius;
@@ -379,7 +447,13 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     }
 
     .e-content {
-      width: calc(100% - $ribbon-collapsible-content-width);
+      width: 100%;
+    }
+
+    &.e-ribbon-collapsible {
+      .e-content {
+        width: calc(100% - $ribbon-collapsible-content-width);
+      }
     }
 
     .e-ribbon-collapse-btn {
@@ -491,6 +565,14 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
       position: relative;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
+
+      &.e-hidden {
+        display: none;
+      }
+
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
 
     .e-ribbon-group::after {
@@ -510,7 +592,14 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
       }
 
       .e-ribbon-overall-of-btn {
-        right: $ribbon-overflow-collapse-btn-right;
+        right: 0;
+      }
+
+      &.e-ribbon-collapsible {
+
+        .e-ribbon-overall-of-btn {
+          right: $ribbon-overflow-collapse-btn-right;
+        }
       }
 
       .e-tab-header {
@@ -531,7 +620,14 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
       }
 
       .e-ribbon-overall-of-btn {
-        left: $ribbon-overflow-collapse-btn-right;
+        left: 0;
+      }
+
+      &.e-ribbon-collapsible {
+
+        .e-ribbon-overall-of-btn {
+          left: $ribbon-overflow-collapse-btn-right;
+        }
       }
 
       .e-tab-header {
@@ -544,6 +640,112 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     }
   }
 
+  .e-ribbon-backstage-popup.e-ribbon-backstage-open {
+    display: flex;
+  }
+
+  .e-ribbon-backstage-popup {
+    .e-ribbon-backstage-wrapper {
+      display: flex;
+      flex-direction: column;
+
+      .e-ribbon-backstage-items-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+      }
+
+      .e-btn {
+        border: none;
+        border-radius: unset;
+        box-shadow: none;
+        padding: unset;
+        text-align: start;
+        width: 100%;
+        height: $ribbon-backstage-btn-height;
+        line-height: $ribbon-backstage-btn-line-height;
+
+        .e-btn-icon {
+          width: auto;
+          margin: 0;
+          font-size: $ribbon-backstage-btn-icon-font-size;
+          line-height: $ribbon-backstage-btn-icon-line-height;
+          padding: $ribbon-backstage-btn-icon-padding;
+        }
+
+        &:focus {
+          border-style: solid;
+          border-width: $ribbon-backstage-btn-focus-border;
+        }
+
+        &:hover {
+          border-style: solid;
+          border-width: $ribbon-backstage-btn-hover-border;
+        }
+
+        &:focus:hover {
+          border-style: solid;
+          border-width: $ribbon-backstage-btn-focus-border;
+        }
+      }
+
+      .e-ribbon-backstage-menu {
+        border: unset;
+        border-radius: unset;
+
+        &.e-menu-wrapper ul.e-vertical,
+        &.e-menu-wrapper ul.e-ul {
+          min-width: 135px;
+
+          &.e-menu .e-menu-item {
+            &.e-separator {
+              margin: 4px 20px;
+            }
+          }
+
+          .e-menu-item:not(.e-separator) {
+            height: $ribbon-backstage-menu-item-height;
+            line-height: $ribbon-backstage-menu-item-height;
+            padding: 0;
+
+            &:focus {
+              border-style: solid;
+              border-width: $ribbon-backstage-menu-hover-border;
+            }
+
+            &.e-selected,
+            &:hover {
+              border-style: solid;
+              border-width: $ribbon-backstage-menu-active-border;
+            }
+
+            &.e-selected:focus {
+              border-style: solid;
+              border-width: $ribbon-backstage-menu-hover-border;
+            }
+
+            .e-menu-icon {
+              width: auto;
+              margin-right: unset;
+              font-size: $ribbon-backstage-menu-icon-font-size;
+              line-height: $ribbon-backstage-menu-icon-line-height;
+              padding: $ribbon-backstage-menu-icon-padding;
+            }
+
+            &.e-blankicon {
+              padding-left: $ribbon-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+      }
+    }
+
+    .e-ribbon-backstage-content {
+      overflow: auto;
+    }
+  }
+
   .e-ribbon.e-rbn,
   .e-ribbon-group-overflow-ddb {
     border: $ribbon-border;
@@ -655,6 +857,10 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
       padding: 1px;
       vertical-align: middle;
 
+      &.e-hidden {
+        display: none;
+      }
+
       .e-btn {
         border: $ribbon-items-border;
         border-radius: $ribbon-items-border-radius;
@@ -668,6 +874,11 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
         }
       }
 
+      .e-btn-group .e-btn.e-ribbon-group-button,
+      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type) {
+        border: $ribbon-items-border;
+      }
+
       &.e-ribbon-large-item {
         .e-btn {
           max-width: $ribbon-large-items-max-width;
@@ -721,6 +932,10 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
       min-height: 33%;
       padding: $ribbon-items-padding;
 
+      .e-btn-group {
+        box-shadow: none;
+      }
+
       .e-checkbox-wrapper {
         padding: $ribbon-items-checkbox-padding;
 
@@ -893,6 +1108,24 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
 
     .e-ribbon-overflow-target {
 
+      &.e-hidden {
+        display: none;
+      }
+
+      &.e-disabled {
+        pointer-events: none;
+      }
+
+      .e-ribbon-of-tab .e-ribbon-of-group-container {
+        &.e-hidden {
+          display: none;
+        }
+
+        &.e-disabled {
+          pointer-events: none;
+        }
+      }
+
       .e-ribbon-item {
 
         & > .e-input-group,
@@ -963,6 +1196,58 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     }
   }
 
+  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group {
+    flex-direction: column;
+  }
+
+  .e-dropdown-popup.e-ribbon-dropdown-group-button {
+    border-radius: $ribbon-group-button-ddb-border-radius;
+    border: $ribbon-group-button-ddb-border;
+    padding: $ribbon-group-button-ddb-padding;
+
+    &.e-ribbon-group-button-overflow-popup .e-btn-group {
+      .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+    }
+    
+    .e-btn-group {
+      box-shadow: none;
+      border-radius: $ribbon-group-button-ddb-border-radius;
+      
+      .e-btn-icon {
+        font-size: 16px;
+        line-height: 16px;
+        font-weight: $ribbon-items-font-weight;
+        margin: $ribbon-group-button-icon-margin;
+        width: auto;
+        &.e-icon-left {
+          padding: $ribbon-group-button-icon-padding;
+        }
+      }
+      .e-btn.e-ribbon-group-button {
+        padding: 0;
+        font-weight: $ribbon-items-font-weight;
+        font-size: $ribbon-items-btn-size;
+        border: none;
+        text-transform: none;
+
+        &:not(.e-icon-btn) {
+          padding: $ribbon-group-button-padding;
+        }
+
+        &:focus,
+        &:focus-visible {
+          outline: none;
+          box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+    }
+  }
+
   .e-ribbon-menu {
     display: block;
 
@@ -1034,7 +1319,8 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     }
 
     .e-ribbon-tab {
-      .e-ribbon-file-menu {
+      .e-ribbon-file-menu,
+      .e-ribbon-backstage {
         line-height: $ribbon-bigger-file-menu-height;
         padding: $ribbon-bigger-file-menu-padding;
         font-size: $ribbon-bigger-file-menu-size;
@@ -1335,6 +1621,61 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
       }
     }
   }
+
+  .e-bigger .e-ribbon-backstage-popup {
+    .e-ribbon-backstage-wrapper {
+      .e-btn {
+        height: $ribbon-bigger-backstage-btn-height;
+        line-height: $ribbon-bigger-backstage-btn-line-height;
+
+        .e-btn-icon {
+          font-size: $ribbon-bigger-backstage-btn-icon-font-size;
+          line-height: $ribbon-bigger-backstage-btn-icon-line-height;
+          padding: $ribbon-bigger-backstage-btn-icon-padding;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
+  .e-bigger.e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
+  .e-bigger .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul,
+  .e-bigger.e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul {
+    .e-menu-item:not(.e-separator) {
+      height: $ribbon-bigger-backstage-menu-item-height;
+
+      .e-menu-icon {
+        font-size: $ribbon-bigger-backstage-menu-icon-font-size;
+        line-height: $ribbon-bigger-backstage-menu-icon-line-height;
+        padding: $ribbon-bigger-backstage-menu-icon-padding;
+      }
+
+      &.e-blankicon {
+        padding-left: $ribbon-bigger-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  .e-bigger .e-dropdown-popup.e-ribbon-dropdown-group-button,
+  .e-bigger.e-dropdown-popup.e-ribbon-dropdown-group-button {
+    padding: $ribbon-group-button-ddb-padding;
+    .e-btn-group {
+      .e-btn-icon {
+        font-size: $ribbon-bigger-items-icon-size;
+        line-height: $ribbon-bigger-items-icon-height;
+        margin: $ribbon-bigger-group-button-icon-margin;
+        &.e-icon-left {
+          padding: $ribbon-bigger-group-button-icon-padding;
+        }
+      }
+      .e-btn.e-ribbon-group-button {
+        font-size: $ribbon-bigger-items-btn-size;
+        &:not(.e-icon-btn) {
+          padding: $ribbon-bigger-group-button-padding;
+        }
+      }
+    }
+  }
 }
 
 
@@ -1402,7 +1743,8 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
         }
       }
 
-      .e-ribbon-file-menu {
+      .e-ribbon-file-menu,
+      .e-ribbon-backstage {
         color: $ribbon-text-color;
         background: $ribbon-items-background-color;
         border-color: $ribbon-border-color;
@@ -1448,6 +1790,105 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     }
   }
 
+  .e-ribbon-backstage-popup {
+    box-shadow: $ribbon-overflow-box-shadow;
+
+    .e-ribbon-backstage-wrapper {
+      background: $ribbon-backstage-menu-bg-color;
+    }
+
+    .e-btn {
+      background: $ribbon-backstage-btn-bg-color;
+      color: $ribbon-backstage-btn-color;
+      font-weight: $ribbon-backstage-close-btn-font-weight;
+      @if ($skin-name == 'material') {
+        text-transform: none;
+      }
+
+      &:focus {
+        background: $ribbon-backstage-btn-focus-bg-color;
+        color: $ribbon-backstage-btn-focus-color;
+        border-color: $ribbon-backstage-btn-focus-border-color;
+      }
+
+      &:hover {
+        background: $ribbon-backstage-btn-hover-bg-color;
+        color: $ribbon-backstage-btn-hover-color;
+        border-color: $ribbon-backstage-btn-hover-border-color;
+      }
+
+      &:hover:focus {
+        background: $ribbon-backstage-btn-focus-bg-color;
+        color: $ribbon-backstage-btn-focus-color;
+        border-color: $ribbon-backstage-btn-focus-border-color;
+      }
+    }
+
+    .e-ribbon-backstage-menu {
+
+      &.e-menu-wrapper,
+      &.e-menu-container {
+        &:not(.e-menu-popup) {
+          background: $ribbon-backstage-menu-bg-color;
+        }
+      }
+
+      &.e-menu-wrapper ul.e-vertical,
+      &.e-menu-wrapper ul.e-ul {
+        &.e-menu {
+          background: $ribbon-backstage-menu-items-bg-color;
+        }
+
+        .e-menu-item {
+          color: $ribbon-backstage-items-color;
+
+          .e-menu-icon {
+            color: $ribbon-backstage-menu-icon-color;
+          }
+
+          &.e-separator {
+            background: $ribbon-backstage-separator-color;
+          }
+
+          &:focus {
+            background: $ribbon-backstage-menu-hover-bg-color;
+            border-color: $ribbon-backstage-menu-hover-border-color;
+            color: $ribbon-backstage-menu-items-hover-color;
+
+            .e-menu-icon {
+              color: $ribbon-backstage-menu-icon-hover-color;
+            }
+          }
+
+          &.e-selected,
+          &:hover {
+            background: $ribbon-backstage-menu-active-bg-color;
+            border-color: $ribbon-backstage-menu-active-border-color;
+            color: $ribbon-backstage-menu-items-active-color;
+
+            .e-menu-icon {
+              color: $ribbon-backstage-menu-icon-active-color;
+            }
+          }
+          &.e-selected:focus {
+            background: $ribbon-backstage-menu-hover-bg-color;
+            border-color: $ribbon-backstage-menu-hover-border-color;
+            color: $ribbon-backstage-menu-items-hover-color;
+
+            .e-menu-icon {
+              color: $ribbon-backstage-menu-icon-hover-color;
+            }
+          }
+        }
+      }
+    }
+
+    .e-ribbon-backstage-template,
+    .e-ribbon-backstage-content {
+      background: $ribbon-header-bg-color;
+    }
+  }
+
   .e-ribbon.e-rbn,
   .e-ribbon-group-overflow-ddb {
     background: $ribbon-header-bg-color;
@@ -1499,6 +1940,8 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     &.e-ribbon-overflow {
 
       .e-btn:not(.e-ribbon-file-menu),
+      .e-btn-group .e-btn.e-ribbon-group-button,
+      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
       .e-ribbon-group-of-btn {
         color: $ribbon-text-color;
         background: $ribbon-items-background-color;
@@ -1635,6 +2078,47 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
     }
   }
 
+  .e-dropdown-popup.e-ribbon-dropdown-group-button {
+    background: $ribbon-group-button-dropdown-popup-background;
+    box-shadow: $ribbon-group-button-dropdown-popup-box-shadow;
+    border-color: $ribbon-group-button-dropdown-popup-border-color;
+    .e-btn-icon {
+      color: $ribbon-items-icon-color;
+    }
+    .e-btn.e-ribbon-group-button {
+      color: $ribbon-text-color;
+      background: $ribbon-group-button-dropdown-popup-background;
+      &.e-icon-btn:hover,
+      &.e-icon-btn:focus {
+        background: $ribbon-group-button-hover-background;
+        .e-btn-icon {
+          color: $ribbon-group-button-icon-hover-color;
+        }
+      }
+      &:hover,
+      &:focus {
+        background: $ribbon-group-button-hover-background;
+        color: $ribbon-group-button-text-hover-color;
+        .e-btn-icon {
+          color: $ribbon-group-button-icon-hover-color;
+        }
+      }
+      &.e-icon-btn.e-active {
+        background: $ribbon-group-button-active-background;
+        .e-btn-icon {
+          color: $ribbon-items-active-color;
+        }
+      }
+      &.e-active {
+        background: $ribbon-group-button-selected-background;
+        color: $ribbon-group-button-text-active-color;
+        .e-btn-icon {
+          color: $ribbon-items-active-color;
+        }
+      }
+    }
+  }
+
   .e-ribbon-tooltip.e-tooltip-wrap {
     &.e-popup {
       background: $ribbon-tooltip-background-color;