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

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

@@ -1,753 +0,0 @@
-@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
-}