@syncfusion/ej2-angular-richtexteditor 21.2.4-ngcc → 21.2.4

package/styles/rich-text-editor/_theme.scss

@@ -0,0 +1,753 @@
+@include export-module('richtexteditor-theme') {
+
+  /*! tab layout */
+
+  .e-richtexteditor {
+
+    .e-rte-toolbar {
+      border: 1px solid $rte-border-color;
+      border-bottom: 0;
+
+      .e-toolbar-item {
+
+        @if $skin-name != 'highcontrast' {
+          &.e-overlay .e-tbar-btn .e-icons {
+            color: $rte-ext-tbar-overlay-icons-color;
+          }
+        }
+
+        @if $skin-name == 'bootstrap5' {
+          .e-tbar-btn:focus .e-icons {
+            color: $rte-quick-item-active-font-color;
+          }
+        }
+
+        &.e-active .e-tbar-btn,
+        &.e-active .e-tbar-btn:focus {
+          background: $rte-tb-item-active-bg;
+          border: $rte-tb-item-active-border;
+
+          @if $skin-name == 'bootstrap5' {
+            border: 0;
+          }
+        }
+
+        &.e-active .e-tbar-btn .e-icons,
+        &.e-active .e-tbar-btn:focus .e-icons {
+          color: $rte-tb-active-font-color;
+        }
+
+        .e-icons {
+          color: $rte-icons-color;
+        }
+
+        @if $skin-name == 'bootstrap5' {
+          .e-tbar-btn:hover .e-icons {
+            color: $rte-tb-hover-font-color;
+          }
+
+          .e-tbar-btn:focus .e-icons {
+            color: $primary-text-focus;
+          }
+        }
+
+        .e-dropdown-btn.e-active {
+          background: $rte-drop-btn-active-bg;
+          border-color: $rte-drop-btn-active-border-color;
+
+          .e-icons,
+          .e-rte-dropdown-btn-text {
+            color: $rte-drop-btn-active-color;
+          }
+        }
+
+        @if $skin-name == 'bootstrap5' {
+          .e-tbar-btn:hover .e-rte-dropdown-btn-text {
+            color: $rte-tb-hover-font-color;
+          }
+        }
+
+        & .e-rte-backgroundcolor-dropdown,
+        & .e-rte-fontcolor-dropdown,
+        & .e-rte-numberformatlist-dropdown,
+        & .e-rte-bulletformatlist-dropdown {
+
+          &:hover .e-rte-color-content::after {
+            background: $rte-split-btn-bar-bg;
+          }
+
+          &:active:hover {
+
+            .e-icons {
+              color: $rte-split-btn-color;
+            }
+
+            @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
+              .e-icons {
+                color: $rte-tb-hover-font-color;
+              }
+            }
+
+            .e-caret:active.e-icons,
+            .e-rte-color-content:active .e-icons,
+            .e-rte-list-primary-content:active .e-icons {
+              color: $rte-split-btn-active-color;
+            }
+          }
+
+          &:hover {
+            background: $rte-split-btn-hover-bg;
+
+            .e-rte-color-content,
+            .e-rte-list-primary-content {
+
+              &:hover {
+                background: $rte-split-btn-span-hover-bg;
+              }
+
+              &:focus {
+                background: $rte-split-btn-span-focus-bg;
+              }
+
+              &:active {
+                background: $rte-split-btn-span-active-bg;
+              }
+            }
+
+            .e-caret {
+
+              &:hover {
+                background: $rte-split-btn-span-hover-bg;
+              }
+
+              &:focus {
+                background: $rte-split-btn-span-focus-bg;
+              }
+
+              &:active {
+                background: $rte-split-btn-span-active-bg;
+              }
+            }
+          }
+
+          &.e-active {
+            background: $rte-split-btn-active-bg;
+            border: $rte-split-btn-active-border;
+
+            .e-rte-color-content::after {
+              background: $rte-split-btn-active-bar-bg;
+            }
+
+            &:hover .e-caret:hover,
+            &:hover .e-rte-color-content:hover,
+            &:hover .e-rte-list-primary-content:hover {
+              background: transparent;
+            }
+
+            .e-icons,
+            &:active .e-icons {
+              color: $rte-split-btn-active-color;
+            }
+          }
+        }
+      }
+
+      .e-toolbar-extended {
+
+        .e-toolbar-item .e-tbar-btn .e-icons {
+          color: $rte-icons-color;
+        }
+        .e-toolbar-item .e-tbar-btn:hover .e-icons {
+          color: $rte-hover-icons-color;
+        }
+
+        .e-toolbar-item.e-active .e-tbar-btn .e-icons {
+          color: $rte-tb-active-font-color;
+        }
+
+        @if $skin-name != 'highcontrast' {
+          .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+            color: $rte-ext-tbar-overlay-icons-color;
+          }
+        }
+
+        .e-toolbar-item .e-dropdown-btn.e-active {
+          background: $rte-drop-btn-active-bg;
+        }
+
+        @if $skin-name == 'bootstrap5' {
+          .e-toolbar-item .e-tbar-btn:focus,
+          .e-toolbar-item .e-tbar-btn:hover {
+            border-radius: 4px;
+          }
+        }
+      }
+
+      &.e-rte-tb-float {
+        border: 1px solid $rte-border-color;
+      }
+
+      &.e-tb-static {
+        border-bottom: 1px solid $rte-border-color;
+      }
+    }
+
+    .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
+      border: 0;
+    }
+
+    .e-toolbar-wrapper {
+      background: $rte-tbar-default-bg;
+    }
+
+    img.e-img-focus::selection,
+    audio.e-audio-focus::selection,
+    .e-video-focus::selection {
+      background: transparent;
+      color: transparent;
+    }
+    @if $skin-name == 'Material3' {
+      ::selection {
+        color: $white;
+        background: $primary;
+      }
+    }
+    .e-rte-content,
+    .e-source-content {
+      background: $rte-content-bg;
+      border: 1px solid $rte-border-color;
+      color: $rte-content-color;
+
+      .e-content blockquote {
+        border-left: $rte-content-blockquote-border-left-color;
+      }
+
+      .e-content .e-img-focus:not(.e-resize),
+      .e-content .e-video-focus:not(.e-resize) {
+        border: $rte-img-border;
+      }
+
+      .e-content a {
+        color: $rte-anchor-color;
+      }
+    }
+
+    &.e-rtl {
+      .e-rte-content .e-content blockquote {
+        border-left: 0;
+        border-right: $rte-content-blockquote-border-left-color;
+      }
+    }
+
+    &.e-rte-resize {
+      background: $rte-content-bg;
+    }
+
+    .e-input.e-rte-linkurl.e-error,
+    .e-input.e-img-link.e-error {
+      color: $rte-link-valid-color;
+    }
+
+    &.e-rte-full-screen {
+      background: $rte-full-screen-bg;
+    }
+
+    &.e-rte-inline {
+
+      .e-rte-content {
+        border: 0;
+      }
+    }
+
+    &:not(.e-rte-toolbar-enabled) {
+      border: 1px solid $rte-border-color;
+
+      .e-rte-content {
+        border: 0;
+        border-bottom: 0;
+        border-top: 0;
+      }
+    }
+
+    &.e-rte-tb-expand {
+      border: 1px solid $rte-border-color;
+
+      .e-rte-toolbar {
+        border: 0;
+
+        &.e-extended-toolbar,
+        .e-toolbar-extended {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        .e-toolbar-extended {
+          border: 0;
+          border-bottom: 0;
+
+          &.e-popup-open {
+            border-bottom: 0;
+          }
+        }
+
+        &.e-expand-open + .e-rte-content {
+          border-top: 0;
+        }
+
+        &.e-rte-tb-float {
+          border-bottom: 1px solid $rte-border-color;
+          border-right: 1px solid $rte-border-color;
+          border-top: 1px solid $rte-border-color;
+
+          &.e-expand-open {
+            border-bottom: $rte-expand-tb-border-bottom;
+
+            .e-toolbar-extended {
+              border-bottom: 1px solid $rte-border-color;
+              border-right: 1px solid $rte-border-color;
+            }
+          }
+        }
+      }
+
+      .e-rte-content,
+      .e-source-content {
+        border: 0;
+        border-bottom: 1px solid $rte-border-color;
+        border-top: 1px solid $rte-border-color;
+      }
+
+      .e-toolbar-extended.e-popup-open {
+        border-bottom: 1px solid $rte-border-color;
+      }
+
+      &.e-rte-resize {
+        .e-rte-content,
+        .e-source-content {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .e-audio-wrap,
+    .e-embed-video-wrap {
+      display: inline-block;
+    }
+
+    .e-clickelem,
+    .e-video-clickelem {
+      display: block;
+      margin: 0;
+      outline: none;
+      padding: 0;
+      position: relative;
+    }
+
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      background: transparent;
+      bottom: 0;
+      content: '';
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+
+    .e-videoheader,
+    .e-embed-videoheader,
+    .e-video-url-wrap {
+      padding-bottom: 5px;
+      padding-top: 15px;
+    }
+
+    .e-video-url-wrap .e-radio-wrapper {
+      padding: 5px;
+    }
+
+    .e-video-url-wrap textarea {
+      height: 80px;
+    }
+  }
+
+  .e-rte-quick-popup {
+    border: $rte-quick-pop-border;
+    border-radius: 2px;
+    box-shadow: $rte-quick-pop-shadow;
+
+    .e-rte-quick-toolbar {
+      background: $rte-quick-pop-bg;
+      border: $rte-quick-tb-border;
+
+      .e-toolbar-items {
+        background: $rte-quick-pop-bg;
+
+        .e-separator {
+          border: .5px solid $rte-quick-vr-line-color;
+        }
+
+        .e-tbar-btn {
+          background: $rte-quick-pop-bg;
+          border: $rte-quick-item-border;
+        }
+
+        .e-tbar-btn:hover {
+          background: $rte-quick-tb-btn-hover;
+          border-color: $rte-quick-item-hover-border-color;
+        }
+
+        .e-tbar-btn:focus {
+          background: $rte-quick-pop-item-focus-bg;
+        }
+
+        .e-tbar-btn:active {
+          background: $rte-quick-item-active-bg;
+          border-color: $rte-quick-item-active-border-color;
+
+          .e-icons {
+            color: $rte-quick-item-active-font-color;
+          }
+        }
+
+        .e-toolbar-item.e-active .e-tbar-btn,
+        .e-toolbar-item.e-active .e-tbar-btn:focus {
+          background: $rte-tb-item-active-bg;
+          border: $rte-tb-item-active-border;
+        }
+
+        .e-toolbar-item.e-active .e-tbar-btn .e-icons,
+        .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
+          color: $rte-tb-active-font-color;
+        }
+
+        .e-icons {
+          color: $rte-icons-color;
+        }
+
+        @if $skin-name == 'bootstrap5' {
+          .e-tbar-btn:hover .e-icons {
+            color: $rte-tb-hover-font-color;
+          }
+
+          .e-tbar-btn:focus .e-icons {
+            color: $primary-text-focus;
+          }
+        }
+      }
+
+      .e-toolbar-extended {
+
+        .e-toolbar-item .e-tbar-btn .e-icons {
+          color: $rte-icons-color;
+        }
+      }
+    }
+
+    .e-rte-dropdown-btn {
+      background: $rte-quick-pop-bg;
+      border-color: $rte-quick-drop-btn-border-color;
+
+      &:focus,
+      &:hover {
+        background: $rte-quick-tb-btn-hover;
+      }
+
+      &:hover {
+        border-color: $rte-quick-drop-btn-hover-border-color;
+
+        @if $skin-name == 'highcontrast' {
+          border-width: $rte-2px-border-size;
+        }
+      }
+    }
+  }
+
+  .e-dialog .e-img-uploadwrap .e-droptext,
+  .e-dialog .e-aud-uploadwrap .e-droptext,
+  .e-dialog .e-vid-uploadwrap .e-droptext,
+  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
+    border: dashed 2px $rte-upload-drag-border-clr;
+    border-radius: 4px;
+    color: $rte-drop-text-clr;
+    display: block;
+    font-family: $rte-font-family;
+    font-size: 14px;
+    height: $rte-drop-text-height;
+    margin: 0 auto;
+    text-align: center;
+    width: $rte-drop-text-width;
+  }
+
+  .e-dialog .e-vid-uploadwrap .e-droptext {
+    height: 108px;
+  }
+
+  .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
+  .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
+  .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
+    margin: 0 auto;
+    width: $rte-drop-text-mobile-width;
+  }
+  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+    padding: 8px 4px;
+  }
+  .e-linkheader {
+    color: $rte-img-header-clr;
+  }
+
+  .e-rte-img-popup.e-popup {
+    background: $rte-full-screen-bg;
+    border: $rte-img-popup-border;
+    box-shadow: $rte-img-popup-box-shadow;
+    color: $rte-img-popup-color;
+    padding: 10px;
+  }
+
+  .e-rte-content .e-content img:not(.e-resize) {
+    z-index: 1000;
+  }
+
+  span.e-rte-imageboxmark,
+  span.e-rte-videoboxmark {
+    background: $rte-img-resize-back-color;
+    border: 1px solid $rte-img-resize-color;
+    display: block;
+    height: 10px;
+    position: absolute;
+    width: 10px;
+    z-index: 1000;
+  }
+
+  .e-mob-rte span.e-rte-imageboxmark,
+  .e-mob-rte span.e-rte-videoboxmark {
+    background: $rte-img-resize-color;
+    border: 1px solid $rte-img-resize-back-color;
+    border-radius: 15px;
+    height: 20px;
+    width: 20px;
+  }
+
+  .e-mob-rte.e-mob-span span.e-rte-imageboxmark,
+  .e-mob-rte.e-mob-span span.e-rte-videoboxmark {
+    background: $rte-img-resize-back-color;
+    border: 1px solid $rte-img-resize-color;
+  }
+
+  .e-rte-content .e-content img.e-resize,
+  .e-rte-content .e-content video.e-resize {
+    z-index: 1000;
+  }
+
+  #{if(&, '&', '*')}.e-disabled {
+    user-select: none;
+    .e-rte-toolbar .e-toolbar-item {
+      cursor: default;
+      & .e-tbar-btn.e-icon-btn,
+      & .e-dropdown-btn.e-btn,
+      & .e-colorpicker-wrapper .e-btn {
+        &:hover,
+        &:active,
+        &:focus {
+          background: transparent;
+          cursor: default;
+        }
+      }
+    }
+  }
+
+  .e-dropdown-popup {
+    & ul {
+      & .e-item.e-active {
+        background-color: $rte-dropdown-selection-bgcolor;
+        color: $rte-dropdown-selection-color;
+      }
+    }
+  }
+
+  .e-popup-overlay {
+    background-color: $rte-overlay-color;
+  }
+
+  .e-rte-toolbar.e-extended-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn {
+    color: $rte-ext-tbar-overlay-dropdown-color;
+  }
+
+  .e-rte-table-popup.e-popup.e-popup-open {
+    background-color: $rte-content-bg;
+    color: $rte-item-color;
+  }
+
+  .e-richtexteditor .e-rte-toolbar .e-hor-nav:hover{
+    border: solid rgba(0, 0, 0, .12);
+    border-width: $rte-toolbar-hor-nav-border-width;
+  }
+
+  @if $skin-name == 'bootstrap5' {
+    .e-rte-table-popup.e-popup.e-popup-open {
+      background-color: $rte-table-popup-bg;
+    }
+  }
+
+  .e-rte-table-popup .e-span-border {
+    @if $skin-name != 'Material3' {
+      border: 1px solid $rte-border-color;
+    }
+    display: block;
+    margin-bottom: 8px;
+    margin-top: 12px;
+  }
+
+  @if $skin-name == 'FluentUI' {
+    .e-rte-table-popup .e-span-border {
+      display: none;
+    }
+  }
+
+  .e-rte-table-popup .e-rte-popup-header {
+    color: $rte-table-header-color;
+    font-family: $rte-font-family;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-default {
+    background-color: $rte-table-span-bg-color;
+  }
+
+  .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-active {
+    background-color: $rte-table-span-active-bg-color;
+    border: 1px solid $rte-table-span-active-border-color;
+  }
+
+  .e-rte-table.e-alternate-border tbody tr:nth-child(2n+0) {
+    background-color: $rte-table-alternate-color;
+    @if $skin-name == 'highcontrast' {
+      color: $rte-img-popup-color;
+    }
+  }
+
+  .e-rte-table th {
+    background-color: $rte-table-header-bg;
+  }
+
+  .e-rte-table-popup.e-popup.e-popup-open {
+    background-color: $rte-table-popup-bg;
+    color: $rte-table-popup-color;
+  }
+
+  span.e-table-box {
+    background-color: $rte-table-resize-back-color;
+    border: 1px solid $rte-table-border-color;
+  }
+
+  span.e-table-box.e-rbox-select {
+    background-color: $rte-table-border-color;
+    border: 1px solid $rte-table-border-color;
+  }
+
+  .e-table-rhelper {
+    background-color: $rte-table-span-active-border-color;
+  }
+
+  .e-rte-dialog-upload.e-upload.e-lib.e-keyboard {
+    background: $rte-content-bg;
+  }
+
+  .e-rte-inline-popup .e-rte-quick-toolbar.e-rte-toolbar .e-toolbar-items .e-toolbar-item {
+    &.e-active .e-tbar-btn .e-icons,
+    & .e-tbar-btn:active .e-icons,
+    & .e-tbar-btn:focus .e-icons,
+    & .e-tbar-btn:hover .e-icons {
+      color: $rte-quick-item-active-font-color;
+    }
+  }
+  .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+    color: $rte-tlbar-expand-active;
+  }
+  @if $skin-name == 'tailwind' {
+    .e-richtexteditor .e-rte-toolbar .e-toolbar-extended {
+      background: $rte-extended-toolbar-background;
+    }
+
+    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
+      color: $rte-icons-color;
+    }
+
+    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
+      border-radius: 4px;
+    }
+
+    .e-richtexteditor .e-toolbar .e-tbar-btn {
+      border-bottom: 1px solid $transparent;
+      border-top: 1px solid $transparent;
+    }
+
+    .e-richtexteditor .e-toolbar .e-tbar-btn:hover {
+      background: $rte-tb-hover-bg-color;
+      border: 1px solid $rte-quick-item-hover-border-color;
+    }
+
+    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
+      background: $rte-tb-hover-bg-color;
+      border: 1px solid $rte-quick-item-hover-border-color;
+    }
+  }
+
+  @if $skin-name == 'bootstrap5' {
+    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
+      background: $rte-tb-item-active-bg;
+      border-radius: 4px;
+    }
+
+    .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn:hover .e-icons {
+      color: $rte-tb-hover-font-color;
+    }
+  }
+
+  @if $skin-name == 'Material3' {
+    .e-bigger .e-richtexteditor.e-rte-tb-expand {
+      border-radius: 8px;
+    }
+    .e-bigger .e-richtexteditor .e-toolbar-wrapper {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
+    .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-toolbar .e-toolbar-items {
+      border-top-left-radius: $rte-border-top-left-radius;
+    }
+    .e-bigger .e-toolbar .e-hor-nav {
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-rtl .e-toolbar .e-hor-nav {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: 0;
+    }
+    .e-bigger .e-rtl .e-toolbar .e-toolbar-items {
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+  }
+  // Blazor styles start
+  .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
+    border-bottom: 0;
+  }
+
+  @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
+    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:active .e-icons,
+    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:active .e-rte-dropdown-btn-text,
+    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:focus .e-rte-dropdown-btn-text,
+    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-icon-button:focus .e-icons {
+      color: $rte-quick-item-active-font-color;
+    }
+  }
+  // Blazor styles end
+}