@syncfusion/ej2-fabric-theme 34.2.9 → 35.1.37

package/styles/richtexteditor-ui/_bigger.scss

@@ -0,0 +1,178 @@
+@use 'variables' as *;
+
+.e-bigger {
+  .e-richtexteditor-ui {
+    .e-rte-ui-toolbar .e-toolbar-item {
+
+      .e-split-btn-wrapper,
+      .e-rte-ui-dropdown-btn {
+        min-height: $rte-ui-big-split-btn-height;
+      }
+    }
+
+    .e-rte-ui-container .e-rte-ui-toolbar-wrapper .e-rte-ui-toolbar .e-hor-nav.e-expended-nav {
+      height: $rte-ui-big-expended-nav-min-height; //used toolbar component nav default min-height
+      min-height: $rte-ui-big-expended-nav-min-height; //used toolbar component nav default min-height
+    }
+
+    .e-rte-ui-content {
+      .e-content {
+        line-height: 1.5;
+
+        blockquote {
+          font-size: 16px;
+        }
+
+        h1 {
+          font-size: 2.857em;
+        }
+
+        h2 {
+          font-size: 2.285em;
+        }
+
+        h3 {
+          font-size: 2em;
+        }
+
+        h4 {
+          font-size: 1.714em;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4 {
+          line-height: 1.2;
+        }
+
+        h3 + h4 {
+          margin-top: .6em;
+        }
+      }
+    }
+
+    //toolbar popup min height over riding start
+    .e-rte-ui-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup {
+      min-height: $rte-ui-big-popup-item-min-height;
+    }
+
+    .e-rte-ui-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
+    .e-rte-ui-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
+    .e-rte-ui-toolbar .e-toolbar-item,
+    .e-rte-ui-toolbar .e-toolbar-items .e-toolbar-item {
+      .e-tbar-btn.e-btn {
+        min-height: $rte-ui-big-split-btn-height;
+        min-width: $rte-ui-big-split-btn-height;
+        padding: 0;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &.e-active {
+          border: $rte-ui-big-hover-split-btn-border;
+          padding: 0;
+        }
+
+        .e-icons {
+          padding: 0;
+        }
+      }
+
+      .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
+        border: $rte-ui-big-split-btn-border;
+      }
+    }
+
+    //toolbar popup min height over riding end
+  }
+
+  .e-rte-ui-dropdown-popup {
+    ul {
+      .e-item {
+        &.e-h1 {
+          font-size: 2em;
+        }
+
+        &.e-h2 {
+          font-size: 1.5em;
+        }
+
+        &.e-h3 {
+          font-size: 1.16em;
+        }
+
+        &.e-h4 {
+          font-size: 1em;
+        }
+      }
+    }
+  }
+
+  .e-dialog.e-rte-table-popup.e-popup.e-popup-open {
+    min-height: $rte-ui-big-table-popup-min-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-rte-ui-dropdown-popup {
+    ul {
+      min-width: 84px;
+    }
+  }
+
+  .e-rte-ui-edit-table .e-rte-ui-field {
+    padding-top: 12px;
+  }
+
+  .e-rte-ui-table-popup.e-popup-open {
+    .e-rte-ui-tablecell {
+      height: 16px;
+      width: 16px;
+    }
+
+    .e-rte-ui-table-row {
+      height: 18px;
+    }
+  }
+
+  .e-content-placeholder.e-richtexteditor-ui.e-placeholder-richtexteditor-ui,
+  &.e-content-placeholder.e-richtexteditor-ui.e-placeholder-richtexteditor-ui {
+    background-size: 700px 190px;
+    min-height: 190px;
+  }
+}
+
+.e-bigger .e-richtexteditor-ui,
+.e-richtexteditor-ui.e-bigger {
+  .e-dialog.e-rte-ui-dialog-minheight {
+    @if $theme-name !='fluent2-highcontrast' {
+      min-height: $rte-ui-big-dialog-min-height;
+    }
+
+    @if $theme-name =='fluent2-highcontrast' {
+      min-height: 350px;
+    }
+  }
+
+  .e-rte-ui-content .e-content {
+    font-size: 16px;
+  }
+
+  .e-dialog .e-rte-ui-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+    margin-top: $rte-ui-big-img-upload-abort-icon-btn-margin-top;
+    padding: $rte-ui-big-img-upload-abort-icon-btn-padding;
+  }
+
+  .e-rte-ui-dropdown-popup.e-rte-ui-dropdown-items ul {
+    max-height: 360px;
+    overflow-y: auto;
+  }
+}
+
+@if $skin-name == 'Material3' {
+  .e-bigger .e-richtexteditor-ui,
+  .e-richtexteditor-ui.e-bigger {
+    .e-dialog {
+      border-radius: 16px;
+    }
+  }
+}

package/styles/richtexteditor-ui/_fabric-definition.scss

@@ -0,0 +1,275 @@
+@use '../base/common/base-variables' as *;
+
+$rte-ui-content-bg: $neutral-white !default;
+$rte-ui-table-popup-border-radius: 0 !default;
+$rte-ui-table-popup-box: 0 3px 8px 0 rgba($neutral-light-fontalt, .26) !default;
+$rte-ui-popup-open-font-size: 14px !default;
+$rte-ui-popup-open-font-weight: 400 !default;
+$rte-ui-table-popup-padding: 10px !default;
+$rte-ui-table-popup-border: 1px solid $neutral-light !default;
+$rte-ui-insert-table-btn-width: 100%;
+$rte-ui-table-span-border: 1px solid $neutral-tertiary-alt !default;
+$rte-ui-table-popup-tablecell-height: 14px;
+$rte-ui-table-popup-tablecell-margin: 1px;
+$rte-ui-table-popup-tablecell-width: 14px;
+$rte-ui-insert-dialog-label-padding-top: 20px !default;
+$rte-ui-table-dialog-label-padding-top: 0 !default;
+$rte-ui-content-bg: $neutral-white !default;
+$rte-ui-item-color: $neutral-light-fontalt !default;
+$rte-ui-table-popup-bg: $neutral-white !default;
+$rte-ui-table-popup-color: $theme-light-font !default;
+$rte-ui-border-color: $neutral-quintenaryalt !default;
+$rte-ui-container-border: 1px solid $rte-ui-border-color !default;
+$rte-ui-table-span-margin-bottom: 8px !default;
+$rte-ui-table-span-margin-top: 12px !default;
+$rte-ui-table-header-color: rgba($neutral-light-font, .87) !default;
+$rte-ui-font-family: $font-family !default;
+$rte-ui-table-header-font-size: 14px !default;
+$rte-ui-table-span-bg-color: $neutral-white !default;
+$rte-ui-table-span-active-bg-color: rgba($theme-primary, .2) !default;
+$rte-ui-table-span-active-border-color: $theme-primary !default;
+$rte-ui-table-span-active-border: 1px solid $rte-ui-table-span-active-border-color !default;
+
+$rte-ui-container-width: 100% !default;
+$rte-ui-container-height: 100% !default;
+
+$rte-ui-content-width: 100% !default;
+$rte-ui-content-font-size: 14px !default;
+
+$rte-ui-content-font-color: #333 !default;
+
+$rte-ui-placeholder-line-height: 18px !default;
+$rte-ui-placeholder-padding: 16px !default;
+
+$rte-ui-content-height: 100% !default;
+$rte-ui-e-content-width: 100% !default;
+
+$rte-ui-iframe-content-padding: 16px !default;
+
+$rte-ui-content-font-weight: 400 !default;
+$rte-ui-content-line-height: 1.5 !default;
+
+$rte-ui-toolbar-item-first-child-margin-left: 0 !default;
+$rte-ui-toolbar-poup-extended-margin-left: 0 !default;
+
+$rte-ui-pop-toolbar-extended-width: 100% !default;
+
+$rte-ui-expended-nav-min-height: 39px !default;
+
+$rte-ui-top-right-border-radius: 0 !default;
+$rte-ui-top-left-border-radius: 0 !default;
+
+$rte-ui-split-btn-height: 40px !default;
+
+$rte-ui-toolbar-tbar-btn-padding: 0 !default;
+$rte-ui-hover-split-btn-border: 1px solid transparent !default;
+$rte-ui-toolbar-tbar-btn-hover-padding: 0 !default;
+$rte-ui-toolbar-tbar-btn-icons-padding: 0 !default;
+
+$rte-ui-dropdown-color: $neutral-light-font !default;
+
+$rte-ui-split-btn-hover-bg: $neutral-lighter !default;
+
+$rte-ui-icon-color: $neutral-light-font !default;
+$rte-ui-active-btn-icons-color: $theme-light-font !default;
+
+$rte-ui-btn-active-bg: rgba(0, 0, 0, .12) !default;
+
+$rte-ui-popup-bg: $neutral-white !default;
+$rte-ui-popup-item-min-height: 40px !default;
+
+$rte-ui-toolbar-wrapper-container-height: auto !default;
+
+$rte-ui-toolbar-wrapper-border-radius: 4px 4px 0 0 !default;
+
+$rte-ui-toolbar-pop-border: none !default;
+
+$rte-ui-border-color: $neutral-quintenaryalt !default;
+
+$rte-ui-wrapper-tb-bottom-border-top: 1px solid $rte-ui-border-color !default;
+
+$rte-ui-container-border-radius: 4px !default;
+
+$rte-ui-tbar-btn-small-margin: 0 !default;
+
+$rte-ui-container-border: 1px solid $rte-ui-border-color !default;
+
+$rte-ui-popup-item-padding: 1px 1px !default;
+$rte-ui-popup-padding: 0 3px !default;
+
+$rte-ui-content-color: $rte-ui-content-font-color !default;
+
+$rte-ui-content-blockquote-border-left-color: solid 3px #d9d9d9 !default;
+
+$rte-ui-split-btn-border: 1px solid transparent !default;
+
+$rte-ui-anchor-color: #2e2ef1 !default;
+
+$rte-ui-toolbar-wrapper-container-border-bottom: 1px solid $rte-ui-border-color !default;
+
+$rte-ui-tbar-default-bg: $neutral-white !default;
+
+//Quick Toolbar Variables
+$rte-ui-quick-popup-border: none !default;
+$rte-ui-quick-popup-border-radius: 0 !default;
+$rte-ui-quick-popup-outer-margin: 0 3px !default;
+$rte-ui-quick-popup-inner-padding: 0 1px !default;
+$rte-ui-quick-big-popup-outer-margin: 0 4px !default;
+$rte-ui-quick-big-popup-inner-padding: 0 1px !default;
+$rte-ui-quick-popup-bg-color: $neutral-white !default;
+$rte-ui-quick-popup-box-shadow: none !default;
+$rte-ui-quick-popup-hide-border: 0 !default;
+$rte-ui-quick-popup-toolbar-border: none !default;
+$rte-ui-quick-popup-filter-color: rgba(0, 0, 0, .15) !default;
+
+$rte-ui-quick-pop-border: 0 !default;
+$rte-ui-quick-tb-border: 0 !default;
+$rte-ui-quick-pop-bg: $neutral-white !default;
+$rte-ui-quick-vr-line-color: rgba($neutral-black, .05) !default;
+$rte-ui-quick-pop-item-focus-bg: rgba($neutral-black, .12) !default;
+$rte-ui-quick-tb-btn-hover: rgba($neutral-black, .12) !default;
+$rte-ui-quick-item-active-bg: rgba($neutral-black, .12) !default;
+$rte-ui-quick-item-active-font-color: $neutral-light-fontalt !default;
+$rte-ui-quick-item-hover-border-color: $neutral-white !default;
+$rte-ui-quick-item-active-border-color: $neutral-white !default;
+$rte-ui-quick-item-line-height: 25px !default;
+$rte-ui-quick-item-icon-min-width: 20px !default;
+
+$rte-ui-quick-toolbar-min-height: auto !default;
+$rte-ui-quick-toolbar-min-width: auto !default;
+$rte-ui-quick-toolbar-items-not-tbar-pos-min-height: auto !default;
+$rte-ui-quick-toolbar-items-not-tbar-pos-min-width: auto !default;
+$rte-ui-quick-toolbar-horizontal-separator-margin: 0 !default;
+$rte-ui-quick-horizontal-separator-first-margin: 0 !default;
+
+$rte-ui-toolbar-item-frist-last-child-margin: 0 !default;
+$rte-ui-popup-toolbar-item-margin: 0 !default;
+$rte-ui-popup-toolbar-item-min-height: auto !default;
+$rte-ui-popup-toolbar-item-min-width: auto !default;
+
+$rte-ui-quick-toolbar-tip-pointer-border: $neutral-white !default;
+$rte-ui-quick-toolbar-tip-pointer-content: inherit !default;
+$rte-ui-tip-pointer-before-after-height: 0 !default;
+$rte-ui-tip-pointer-before-after-width: 0 !default;
+
+$rte-ui-color-picker-font-weight: 400 !default;
+$rte-ui-color-picker-line-height: 1 !default;
+$rte-ui-color-picker-margin-top: 3px !default;
+$rte-ui-color-picker-width: 100% !default;
+$rte-ui-color-picker-height: auto !default;
+
+$rte-ui-split-btn-border-radius: 0 !default;
+
+// Image Dialog styles
+
+$rte-ui-insert-dialog-label-padding-top: 20px !default;
+$rte-ui-img-label-first-child-padding-top: 0 !default;
+$rte-ui-img-dlg-max-height: 431px !default;
+$rte-ui-dlg-modal-browse-btn-mobile-height: 36px;
+$rte-ui-dlg-modal-browse-btn-margin: 0 auto 10px !default;
+$rte-ui-dlg-modal-browse-btn-padding: 0 18px !default;
+$rte-ui-import-word-upload-border: 0 solid transparent !default;
+$rte-ui-dialog-word-upload-text-line-height: normal;
+$rte-ui-droparea-browsebtn-height: 36px;
+$rte-ui-droparea-browsebtn-margin: 0 auto 10px !default;
+$rte-ui-droparea-browsebtn-padding: 0 18px;
+$rte-ui-insert-dialog-font-size: 15px;
+$rte-ui-insert-dialog-label-padding-bottom: 20px !default;
+$rte-ui-upload-drag-border-radius: 4px !default;
+$rte-ui-drop-text-font-size: 14px !default;
+$rte-ui-drop-text-height: 128px !default;
+$rte-ui-upload-drag-border-clr: $neutral-light !default;
+$rte-ui-drop-text-border: 2px dashed $rte-ui-upload-drag-border-clr !default;
+$rte-ui-media-droparea-upload-border: 0 solid transparent !default;
+
+// Slash Commands
+
+$rte-ui-slash-command-content-font-size: 30px !default;
+$rte-ui-slash-command-content-line-height: 20px !default;
+$rte-ui-slash-command-para-before-font-size: 15px !default;
+$rte-ui-slash-command-h1-before-font-size: 13px !default;
+$rte-ui-slash-command-h2-before-font-size: 13px !default;
+$rte-ui-slash-command-h3-before-font-size: 13px !default;
+$rte-ui-slash-command-h4-before-font-size: 13px !default;
+$rte-ui-slash-command-item-text-font-size: 14px !default;
+$rte-ui-slash-command-item-text-line-height: 20px !default;
+$rte-ui-slash-command-item-text-padding: 5px 0 1px !default;
+$rte-ui-slash-command-item-description-line-height: 20px !default;
+$rte-ui-slash-command-item-description-font-size: 12px !default;
+$rte-ui-slash-command-item-description-padding: 1px 0 5px !default;
+$rte-ui-slash-command-description-gap: 10px !default;
+$rte-ui-slash-command-icon-padding: 15px !default;
+$rte-ui-slash-command-content-text-font-weight: 500 !default;
+$rte-ui-slash-command-icon-margin-left: 15px !default;
+
+// Dropdown styles
+$rte-ui-default-btn-bg: $neutral-white !default;
+$rte-ui-active-btn-icons-color: $theme-light-font !default;
+$rte-ui-drop-btn-active-color: $neutral-light-fontalt !default;
+$rte-ui-dropdown-transition-color: $neutral-light-fontalt !default;
+$rte-ui-button-focus-box-shadow: none !default;
+$rte-ui-content-ul-h1-font-size: 2em !default;
+$rte-ui-content-ul-h1-font-weight: 700 !default;
+$rte-ui-content-ul-h1-height: 40px;
+$rte-ui-content-ul-h1-small-line-height: 24px !default;
+$rte-ui-content-ul-h1-line-height: 40px !default;
+$rte-ui-content-ul-h2-line-height: 40px !default;
+$rte-ui-content-ul-h2-small-line-height: 24px !default;
+$rte-ui-content-ul-h2-font-size: 1.5em !default;
+$rte-ui-content-ul-h2-font-weight: 700 !default;
+$rte-ui-content-ul-h3-font-weight: 700 !default;
+$rte-ui-content-ul-h4-font-weight: 700 !default;
+$rte-ui-content-ul-h2-height: 40px;
+$rte-ui-content-ul-h4-font-size: 1em !default;
+$rte-ui-content-ul-h3-font-size: 1.16em !default;
+$font-weight: 500 !default;
+$rte-ui-dropdown-selection-bgcolor: $neutral-tertiary-alt !default;
+$rte-ui-dropdown-selection-color: $neutral-primary !default;
+$rte-ui-font-colorpicker-selection-icon-color: #ffffff !default;
+$rte-ui-background-colorpicker-selection-icon-color: #000000 !default;
+
+// Split button styles
+$rte-ui-split-btn-border-radius: 0 !default;
+$rte-ui-default-btn-bg: $neutral-white !default;
+$rte-ui-split-btn-border: 1px solid transparent !default;
+$rte-ui-dropdown-color: $neutral-light-font !default;
+$rte-ui-split-btn-hover-bg: $neutral-lighter !default;
+$rte-ui-hover-split-btn-border: 1px solid transparent !default;
+$rte-ui-split-btn-span-hover-bg: $neutral-light !default;
+$rte-ui-icon-color: $neutral-light-font !default;
+$rte-ui-hover-icons-color: $neutral-light-fontalt !default;
+$rte-ui-active-btn-icons-color: $theme-light-font !default;
+$rte-ui-default-icon-color: $neutral-light-font !default;
+$rte-ui-drop-btn-active-bg: $neutral-tertiary-alt !default;
+$rte-hover-split-btn-border: 1px solid transparent !default;
+$rte-btn-active-bg: rgba(0, 0, 0, .12) !default;
+$rte-split-btn-hover-bg: $neutral-lighter !default;
+$rte-split-btn-focus-bg: $neutral-lighter !default;
+$rte-icon-color: $neutral-light-font !default;
+$rte-hover-icons-color: $neutral-light-font !default;
+$rte-button-focus-box-shadow: none !default;
+
+//bigger theme sass variables start
+
+$rte-ui-big-split-btn-height: 50px !default;
+$rte-ui-big-expended-nav-min-height: 49px !default;
+$rte-ui-big-popup-item-min-height: 50px !default;
+$rte-ui-big-hover-split-btn-border: 1px solid transparent !default;
+$rte-ui-big-split-btn-border: 1px solid transparent !default;
+$rte-ui-big-table-popup-min-height: 160px !default;
+$rte-ui-big-dialog-min-height: 324px !default;
+$rte-ui-big-img-upload-abort-icon-btn-margin-top: 3px !default;
+$rte-ui-big-img-upload-abort-icon-btn-padding: 18px !default;
+
+//bigger theme sass variables end
+
+// Link Dialog
+$rte-ui-insert-dialog-label-padding-top: 20px !default;
+$rte-ui-container-border-radius: 4px !default;
+$rte-ui-border-radius: 4px !default;
+$rte-ui-link-label-first-child-padding-top: 0 !default;
+$rte-ui-protocol-dropdown-width: 80px !default;
+$rte-ui-protocol-dropdown-height: 32px !default;
+$rte-ui-protocol-dropdown-border-radius-top-right: 0 !default;
+$rte-ui-protocol-dropdown-border-radius-bottom-right: 0 !default;
+$rte-ui-protocol-dropdown-lable-gap: 10px !default;