@syncfusion/ej2-material-theme 34.2.8 → 35.1.37

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

@@ -0,0 +1,268 @@
+@use 'sass:color';
+@use '../base/common/base-variables' as *;
+
+$rte-ui-content-bg: $grey-white !default;
+$rte-ui-table-popup-border-radius: 0 !default;
+$rte-ui-table-popup-box: 0 3px 8px 0 rgba($grey-black, .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: none !default;
+$rte-ui-insert-table-btn-width: 100%;
+$rte-ui-table-span-border: 1px solid $grey-400 !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: $grey-white !default;
+$rte-ui-item-color: $grey-black !default;
+$rte-ui-table-popup-bg: $grey-white !default;
+$rte-ui-table-popup-color: $grey-black !default;
+$rte-ui-border-color: rgba($grey-black, .12) !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($grey-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: $grey-white !default;
+$rte-ui-table-span-active-bg-color: rgba($accent, .2) !default;
+$rte-ui-table-span-active-border-color: $accent !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-height: 100% !default;
+
+$rte-ui-content-font-size: 14px !default;
+
+$rte-ui-content-font-color: #333 !default;
+
+$rte-ui-placeholder-line-height: 16px !default;
+$rte-ui-placeholder-padding: 16px !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: 42px !default;
+
+$rte-ui-top-right-border-radius: 0 !default;
+$rte-ui-top-left-border-radius: 0 !default;
+
+$rte-ui-split-btn-height: 28px !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-tbar-btn-small-margin: 0 !default;
+
+$rte-ui-dropdown-color: rgba($grey-light-font, .87) !default;
+
+$rte-ui-split-btn-hover-bg: rgba($grey-black, .04) !default;
+
+$rte-ui-icon-color: rgba($grey-light-font, .54) !default;
+$rte-ui-active-btn-icons-color: rgba($grey-light-font, .54) !default;
+
+$rte-ui-btn-active-bg: rgba($grey-black, .12) !default;
+
+$rte-ui-popup-bg: $grey-50 !default;
+$rte-ui-popup-item-min-height: 28px !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: rgba($grey-black, .12) !default;
+$rte-ui-wrapper-tb-bottom-border-top: 1px solid $rte-ui-border-color !default;
+
+$rte-ui-container-border-radius: 4px !default;
+
+$rte-ui-container-border: 1px solid $rte-ui-border-color !default;
+
+$rte-ui-popup-item-padding: 4px 4px !default;
+$rte-ui-popup-padding: 0 2px !default;
+
+$rte-ui-content-color: $rte-ui-content-font-color !default;
+
+$rte-ui-content-blockquote-border-left-color: solid 3px $grey-300 !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: $grey-50 !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: 9px 2px !default;
+$rte-ui-quick-popup-inner-padding: 0 4px !default;
+$rte-ui-quick-big-popup-outer-margin: 11px 3px !default;
+$rte-ui-quick-big-popup-inner-padding: 0 5px !default;
+$rte-ui-quick-popup-bg-color: $grey-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, .23) !default;
+
+$rte-ui-quick-pop-border: 0 !default;
+$rte-ui-quick-tb-border: 0 !default;
+$rte-ui-quick-pop-bg: $grey-white !default;
+$rte-ui-quick-vr-line-color: rgba($grey-black, .05) !default;
+$rte-ui-quick-pop-item-focus-bg: rgba($grey-black, .12) !default;
+$rte-ui-quick-tb-btn-hover: rgba($grey-black, .12) !default;
+$rte-ui-quick-item-active-bg: rgba($grey-black, .12) !default;
+$rte-ui-quick-item-active-font-color: $grey-black !default;
+$rte-ui-quick-item-hover-border-color: $grey-white !default;
+$rte-ui-quick-item-active-border-color: $grey-white !default;
+$rte-ui-quick-item-line-height: 25px !default;
+$rte-ui-quick-item-icon-min-width: 24px !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: $grey-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: 2px !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: 403px !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: #000 !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: $grey-50 !default;
+$rte-ui-active-btn-icons-color: rgba($grey-light-font, .54) !default;
+$rte-ui-drop-btn-active-color: $grey-black !default;
+$rte-ui-dropdown-transition-color: rgba($grey-light-font, .87) !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: $grey-400 !default;
+$rte-ui-dropdown-selection-color: rgba($grey-black, .87) !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: 2px !default;
+$rte-ui-default-btn-bg: $grey-50 !default;
+$rte-ui-split-btn-border: 1px solid transparent !default;
+$rte-ui-dropdown-color: rgba($grey-light-font, .87) !default;
+$rte-ui-split-btn-hover-bg: rgba($grey-black, .04) !default;
+$rte-ui-hover-split-btn-border: 1px solid transparent !default;
+$rte-ui-split-btn-span-hover-bg: rgba($grey-black, .12) !default;
+$rte-ui-icon-color: rgba($grey-light-font, .54) !default;
+$rte-ui-hover-icons-color: $grey-black !default;
+$rte-ui-active-btn-icons-color: rgba($grey-light-font, .54) !default;
+$rte-ui-default-icon-color: rgba($grey-light-font, .54) !default;
+$rte-ui-drop-btn-active-bg: color.mix(rgba($grey-black, .87), $grey-50, 32%) !default;
+$rte-hover-split-btn-border: 1px solid transparent !default;
+$rte-btn-active-bg: rgba($grey-black, .12) !default;
+$rte-split-btn-hover-bg: rgba($grey-black, .04) !default;
+$rte-split-btn-focus-bg: rgba($grey-black, .12) !default;
+$rte-icon-color: rgba($grey-light-font, .54) !default;
+$rte-hover-icons-color: $grey-black !default;
+$rte-button-focus-box-shadow: none !default;
+
+//bigger theme sass variables start
+
+$rte-ui-big-split-btn-height: 36px !default;
+$rte-ui-big-expended-nav-min-height: 56px !default;
+$rte-ui-big-popup-item-min-height: 36px !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: 150px !default;
+$rte-ui-big-dialog-min-height: 324px !default;
+$rte-ui-big-img-upload-abort-icon-btn-margin-top: -2px !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;

package/styles/richtexteditor-ui/_mixin.scss

@@ -0,0 +1,45 @@
+@use 'variables' as *;
+
+.e-richtexteditor-ui {
+  .e-rte-ui-toolbar .e-toolbar-item {
+    .e-rte-ui-dropdown-btn {
+      &:hover,
+      &:focus,
+      &:active,
+      &.e-active {
+        @if $theme-name =='FluentUI' or $theme-name =='fluentui-dark' or $theme-name =='bootstrap' or $theme-name =='fluent2' or $theme-name =='fluent2-dark' {
+          border-color: transparent;
+        }
+
+        @if $theme-name =='Material3' or $theme-name =='Material3-dark' {
+          background: $rte-ui-split-btn-span-hover-bg;
+        }
+
+        @if $theme-name =='FluentUI' or $theme-name =='fluentui-dark' or $theme-name =='tailwind' or $theme-name =='tailwind-dark' {
+          background: $rte-ui-split-btn-hover-bg;
+        }
+      }
+
+      &:focus-visible {
+        @if $theme-name =='fabric' or $theme-name =='fabric-dark' {
+          outline: none;
+        }
+      }
+    }
+  }
+
+  @if $skin-name =='material-dark' or $skin-name =='fabric' or $skin-name =='fabric-dark' or $skin-name =='bootstrap' or $skin-name =='bootstrap-dark' or $skin-name =='bootstrap4' {
+    .e-toolbar,
+    .e-toolbar .e-toolbar-pop {
+      border: $rte-ui-toolbar-pop-border;
+    }
+  }
+
+  @if $skin-name =='fluent2' {
+    .e-richtexteditor-ui {
+      .e-toolbar .e-hor-nav {
+        min-height: 40px;
+      }
+    }
+  }
+}