@syncfusion/ej2-fabric-theme 33.2.13 → 34.1.29

package/styles/blockeditor/_layout.scss

@@ -0,0 +1,1314 @@
+@use 'variables' as *;
+@include export-module('blockeditor-layout') {
+
+  /* ======== Main Editor ======== */
+  .e-blockeditor {
+    overflow: auto;
+    overflow-x: hidden;
+    position: relative;
+    display: block;
+
+    &:has([data-resizing = 'true']) {
+      cursor: col-resize;
+    }
+    .e-block-container {
+      font-family: $be-font-family;
+      font-size: $be-font-size;
+      font-weight: $be-font-weight;
+      line-height: $be-line-height;
+      .em-content {
+        font-family: $be-font-family;
+        font-size: $be-font-size;
+        line-height: $be-line-height;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      margin: $be-heading-margin;
+      padding: $be-heading-padding;
+    }
+    h1 {
+      font-size: $be-h1-font-size;
+      font-weight: $be-h1-font-weight;
+      line-height: $be-h1-line-height;
+    }
+
+    h2 {
+      font-size: $be-h2-font-size;
+      font-weight: $be-h2-font-weight;
+      line-height: $be-h2-line-height;
+    }
+
+    h3 {
+      font-size: $be-h3-font-size;
+      font-weight: $be-h3-font-weight;
+      line-height: $be-h3-line-height;
+    }
+
+    h4 {
+      font-size: $be-h4-font-size;
+      font-weight: $be-h4-font-weight;
+      line-height: $be-h4-line-height;
+    }
+
+    h5 {
+      font-size: $be-h5-font-size;
+      font-weight: $be-h5-font-weight;
+      line-height: $be-h5-line-height;
+    }
+
+    h6 {
+      font-size: $be-h6-font-size;
+      line-height: $be-h6-font-weight;
+      line-height: $be-h6-line-height;
+    }
+
+    /* Remove default styles */
+    ul,
+    ol {
+      margin-block: initial;
+      margin-inline: initial;
+      padding-block: initial;
+      padding-inline: initial;
+    }
+    ol {
+      list-style: none;
+    }
+    a {
+      text-decoration: none;
+      user-select: auto;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    /* ======== Block Container ======== */
+    .e-block-container {
+      &.e-mention.e-editable-element {
+        width: 100%;
+        padding: $be-editable-element-padding;
+        border: $be-editable-element-border;
+      }
+    }
+
+    /* ======== Horizontal Scrollable Block styles ======== */
+    .e-scrollable-block {
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      position: relative;
+    }
+
+    /* ======== Divider Blocks Level styles ======== */
+    .e-divider-block {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .e-be-hr-wrapper {
+        width: 100%;
+        height: $be-hr-wrapper-height;
+      }
+      .e-be-hr {
+        margin: $be-hr-margin;
+      }
+    }
+
+    /* ======== Blocks Level styles ======== */
+    .e-block {
+      position: relative;
+      flex-grow: 1;
+      min-height: 30px;
+      padding: $be-block-padding;
+      border: $be-block-border solid transparent;
+      border-radius: $be-block-border-radius;
+      padding-left: $be-block-padding-left; /* padding for the floating icons position */
+
+      [contenteditable = 'true']:empty::before {
+        content: attr(placeholder);
+      }
+
+      &[data-block-type = 'Table'] {
+        user-select: none;
+        padding: $be-block-table-padding;
+        padding-left: $be-block-table-padding-left;
+      }
+
+      /* List Block Styles */
+      &.e-list-block {
+        margin-left: $be-list-block-margin-left;
+
+        ol li {
+          padding-left: $be-list-ol-li-padding-left;
+          position: relative;
+          left: 4px;
+        }
+
+        li::marker {
+          font-size: $be-numberlist-font-size;
+        }
+
+        /* Checklist Block */
+        &[data-block-type = 'Checklist'] {
+          align-items: center;
+          display: flex;
+          margin-left: $be-block-Checklist-margin-left;
+          ul {
+            word-break: break-word;
+            list-style: none;
+          }
+
+          ul li {
+            padding-left: $be-list-ul-li-padding-left;
+          }
+
+          .e-checkmark-container {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            vertical-align: text-bottom;
+            user-select: none;
+            cursor: pointer;
+            height: $be-checkbox-height;
+            width: $be-checkbox-width;
+            svg{
+              height: inherit;
+              width: inherit;
+            }
+          }
+
+          &:has(.e-checked) {
+            li.e-checked:not(:empty) {
+              text-decoration: line-through;
+            }
+          }
+        }
+        &[data-block-type = 'BulletList'] {
+          margin-left: 20px;
+        }
+      }
+
+      /* Quote Block */
+      &.e-quote-block blockquote {
+        border-left-width: $be-blockquote-left-width;
+        border-left-style: solid;
+        padding: unset;
+        font-size: unset;
+        padding-left: $be-blockquote-text-padding;
+        margin: $be-blockquote-margin;
+        &.e-quote-content .e-block {
+          padding-left: 0;
+        }
+      }
+
+      /* Callout Block */
+      &.e-callout-block {
+        .e-block {
+          padding-left: $be-callout-block-padding-left;
+        }
+
+        .e-callout-wrapper {
+          display: flex;
+          align-items: flex-start;
+          padding: $be-callout-padding;
+          border-radius: $be-callout-border-radius;
+        }
+
+        .e-callout-icon {
+          position: absolute;
+          height: $be-callout-icon-height;
+          width: $be-callout-icon-width;
+          margin-top: $be-callout-icon-margin-top;
+          margin-left: $be-callout-icon-margin-left;
+          user-select: none;
+          z-index: 1;
+          pointer-events: none;
+          svg {
+            height: $be-callout-block-svg-height;
+            width: inherit;
+          }
+        }
+
+        .e-callout-content {
+          flex-grow: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+      }
+
+      /* Toggle Block */
+      &.e-toggle-block {
+        .e-block {
+          padding-left: $be-toggle-block-padding-left;
+        }
+
+        .e-toggle-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: $be-toggle-header-margin-bottom;
+        }
+
+        .e-toggle-icon {
+          display: flex;
+          align-items: center;
+          transition: transform .25s ease;
+          transform-origin: center center;
+          height: $be-toggle-icon-height;
+          width: $be-toggle-icon-width;
+          margin-right: $be-toggle-icon-margin;
+          user-select: none;
+          cursor: pointer;
+          svg {
+            height: $be-toggle-block-svg-height;
+            width: inherit;
+          }
+        }
+
+        &[data-collapsed = 'false'] {
+          .e-toggle-icon {
+            transform: rotate(90deg);
+          }
+        }
+      }
+
+      /* User and label mention Chip styles */
+      .e-user-chip {
+        display: inline-flex;
+        cursor: default;
+        gap: $be-user-chip-gap;
+        height: 24px;
+        padding: 2px;
+        border-radius: $be-user-mention-chip-border-radius;
+        align-items: baseline;
+        .em-avatar {
+          height: $be-user-mention-avatar-height;
+          width: $be-user-mention-avatar-width;
+          font-size: $be-user-mention-chip-font-size;
+          line-height: $be-user-mention-chip-line-height;
+          border-radius: $be-em-avatar-border-radius;
+          display: inline-block;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          pointer-events: none;
+          .em-img {
+            width: 100%;
+            height: $be-em-img-height;
+            object-fit: cover;
+            border-radius: $be-em-img-border-radius;
+          }
+        }
+        .em-text {
+          font-size: $be-user-mention-chip-font-size;
+          line-height: $be-user-mention-chip-line-height;
+          font-weight: $be-user-mention-chip-font-weight;
+        }
+      }
+
+      .e-label-chip {
+        height: 26px;
+        padding: 2px 4px;
+        font-size: $be-label-mention-chip-font-size;
+        line-height: $be-label-mention-chip-line-height;
+        border-radius: $be-label-mention-chip-border-radius;
+        display: inline-block;
+      }
+
+      .e-block-content {
+        white-space: break-spaces;
+
+        /* Inline code */
+        .e-be-inline-code {
+          font-size: $be-inline-code-font-size;
+          font-weight: $be-inline-code-font-weight;
+          line-height: $be-inline-code-line-height;
+          padding: $be-inline-code-padding;
+          border-radius: $be-inline-code-border-radius;
+          white-space: pre-wrap;
+        }
+        .e-mention-chip {
+          white-space: nowrap;
+        }
+      }
+    }
+
+    /* ======== Drag and Drop Styles ======== */
+    .e-be-drop-indicator {
+      position: absolute;
+      width: $be-drop-indicator-width; /* calc of padding of e-block */
+      height: $be-drop-indicator-height;
+      margin: $be-drop-indicator-margin;
+      left: 46px; /* calc of padding left of e-block with indicator width */
+      &::before {
+        position: absolute;
+        border-radius: $be-drop-indicator-border-radius;
+        content: '';
+        height: $be-drop-indicator-before-height;
+        width: $be-drop-indicator-before-width;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+    .e-divider-block .e-be-drop-indicator {
+      margin-top: $be-divider-drop-indicator-top;
+    }
+    .e-be-dragging-clone {
+      border-radius: $be-drag-clone-border-radius;
+      .e-block {
+        padding: $be-drag-clone-block-padding;
+        padding-left: $be-dragging-clone-block-padding-left;
+
+        &.e-callout-block {
+          .e-block {
+            padding-left: $be-dragging-clone-callout-block-padding-left;
+          }
+        }
+
+        &.e-toggle-block {
+          .e-block {
+            padding-left: $be-dragging-clone-toggle-block-padding-left;
+          }
+        }
+      }
+    }
+    &:has(.e-be-dragging-clone) .e-floating-icons {
+      display: none;
+    }
+    .e-block-container {
+      .e-block:first-child .e-be-drop-indicator:first-child {
+        top: -5px;
+        margin-top: $be-block-container-margin-top;
+      }
+    }
+
+    /* ======== Code Block Styles ======== */
+    .e-code-block-container {
+      border-radius: $be-code-block-border-radius;
+      overflow: hidden;
+
+      .e-ddl {
+        height: $be-code-block-container-ddl-height;
+        width: auto !important; /* stylelint-disable-line declaration-no-important */
+        flex-shrink: 1;
+        align-self: flex-start;
+      }
+      .e-ddl,
+      .e-code-block-dropdown-btn {
+        flex-basis: auto;
+        order: 3;
+      }
+
+      /* Blazor specific styles for ddb */
+      .e-code-block-dropdown-btn {
+        min-width: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+
+    .e-code-block-toolbar {
+      display: flex;
+      align-items: center;
+      padding: $be-code-block-toolbar-padding;
+      min-height: $be-code-toolbar-height;
+      flex-flow: row-reverse;
+      width: 100%;
+      height: $be-code-block-toolbar-height;
+      box-sizing: border-box;
+
+      /* Blazor specific styles for dropdown button */
+      .e-code-block-dropdown-btn {
+        font-weight: $be-font-weight;
+      }
+    }
+
+    .e-code-block-languages {
+      margin-left: $be-code-block-languages-margin-left;
+      padding: $be-code-block-lang-padding;
+      border-radius: $be-code-block-lang-border-radius;
+      outline: none;
+      width: 248px;
+      height: $be-code-lang-height;
+    }
+
+    .e-code-block-copy-button {
+      border: none;
+      cursor: pointer;
+      padding: $be-code-copy-btn-padding;
+      margin-left: $be-code-block-copy-btn-margin-left;
+      border-radius: $be-code-copy-btn-border-radius;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $be-code-copy-btn-width;
+      height: $be-code-copy-btn-height;
+      .e-icons {
+        font-size: $be-code-copy-btn-font-size;
+      }
+    }
+
+    .e-code-block {
+      min-height: 100px;
+      max-height: 200px;
+      margin: $be-code-block-margin;
+      padding: $be-code-block-padding;
+      border: $be-code-block-border;
+      border-radius: $be-code-block-radius;
+      overflow-x: auto;
+      font-size: $be-font-size;
+      line-height: $be-line-height;
+      white-space: break-spaces;
+      word-break: inherit;
+      word-wrap: break-word;
+    }
+
+    /* ======== Table Block Styles ======== */
+    .e-table-block {
+      .e-table-container {
+        padding-bottom: 10px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+      }
+      th,
+      td {
+        min-width: 60px;
+        box-sizing: border-box;
+      }
+      th {
+        height: $be-table-heading-height;
+        padding: $be-table-heading-padding;
+        font-weight: $be-table-heading-font-weight;
+        font-size: $be-table-heading-font-size;
+        line-height: $be-table-heading-line-height;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        &:focus,
+        &:focus-within,
+        &.e-cell-focus {
+          text-overflow: clip;
+        }
+      }
+      td {
+        height: $be-table-col-height;
+        padding: $be-table-col-padding;
+        font-weight: $be-table-col-font-weight;
+        font-size: $be-table-col-font-size;
+        line-height: $be-table-col-line-height;
+
+        &:has(.e-block) {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+      .e-cell-focus {
+        outline-offset: -2px;
+      }
+      &.e-readonly {
+        pointer-events: none;
+      }
+
+      .e-block {
+        padding-left: calc(0px + var(--block-indent) * 1px);
+        .e-block-content {
+          overflow-wrap: anywhere;
+          white-space: normal;
+        }
+      }
+    }
+
+    .e-block {
+      .e-row-dot,
+      .e-col-dot {
+        position: absolute;
+        width: $be-row-col-dot-width;
+        height: $be-row-col-dot-width;
+        border-radius: $be-table-icons-border-radius;
+        z-index: 7;
+        cursor: pointer;
+      }
+      .e-row-hover-line,
+      .e-col-hover-line {
+        position: absolute;
+        z-index: 4;
+      }
+      .e-row-insert-handle,
+      .e-col-insert-handle {
+        position: absolute;
+        z-index: 9;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        border-radius: $be-table-icons-border-radius;
+        font-size: $be-table-row-col-insert-handle-size;
+        line-height: $be-table-row-col-insert-handle-line-height;
+        text-align: center;
+        cursor: pointer;
+      }
+      .e-row-action-handle,
+      .e-col-action-handle {
+        position: absolute;
+        z-index: 6;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        border-top-left-radius: $be-table-gripper-border-radius;
+        cursor: pointer;
+      }
+      .e-row-action-handle {
+        border-bottom-left-radius: $be-table-gripper-border-radius;
+        width: $be-table-row-gripper-width;
+        left: $be-table-row-gripper-left;
+      }
+      .e-col-action-handle {
+        border-top-right-radius: $be-table-gripper-border-radius;
+        height: $be-table-col-gripper-height;
+        top: $be-table-col-gripper-top;
+      }
+      .e-row-dot-hit,
+      .e-col-dot-hit {
+        position: absolute;
+        z-index: 7;
+      }
+      .e-col-resize-handle {
+        position: absolute;
+        width: 5px;
+        cursor: col-resize;
+        z-index: 20;
+        display: none;
+      }
+      .e-row-dot-hit {
+        width: 22px;
+        height: 26px;
+      }
+      .e-col-dot-hit {
+        width: 26px;
+        height: 22px;
+      }
+    }
+
+    .e-table-element {
+      width: inherit;
+      .e-row-number {
+        text-align: center;
+      }
+      thead th.e-row-number {
+        user-select: none;
+      }
+    }
+
+    .e-row-hover-line {
+      height: $be-row-hover-line-height;
+    }
+    .e-col-hover-line {
+      width: 2px;
+    }
+
+    /* ======== Image Block Styles ======== */
+    .e-image-container {
+      margin: $be-image-container-margin;
+      max-width: 100%;
+      .e-image-rsz-handle.e-resize-nw {
+        top: -4px;
+        left: -4px;
+        cursor: nwse-resize;
+      }
+
+      .e-image-rsz-handle.e-resize-ne {
+        top: -4px;
+        right: -4px;
+        cursor: nesw-resize;
+      }
+
+      .e-image-rsz-handle.e-resize-se {
+        bottom: -4px;
+        right: -4px;
+        cursor: nwse-resize;
+      }
+
+      .e-image-rsz-handle.e-resize-sw {
+        bottom: -4px;
+        left: -4px;
+        cursor: nesw-resize;
+      }
+      .e-image-block {
+        display: block;
+        height: $be-image-block-height;
+        max-width: 100%;
+      }
+      &.e-readonly {
+        pointer-events: none;
+      }
+      &.e-readonly .e-image-rsz-handle {
+        display: none;
+      }
+      .e-badge {
+        position: absolute;
+        top: $be-image-block-badge-top;
+        right: $be-image-block-badge-right;
+      }
+    }
+
+    /* ======== Image placeholder Styles ======== */
+    .e-image-placeholder {
+      user-select: none;
+      display: flex;
+      align-items: center;
+      height: $be-image-placeholder-ele-height;
+      border-radius: $be-image-placeholder-ele-border-radius;
+      padding: $be-image-placeholder-ele-padding;
+      gap: $be-image-placeholder-text-icon-gap;
+
+      .e-placeholder-icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-end;
+
+        .e-icons {
+          font-weight: $be-image-placeholder-icon-font-weight;
+          font-size: $be-image-placeholder-icon-font-size;
+        }
+      }
+
+      .e-placeholder-text {
+        font-weight: $be-image-placeholder-text-font-weight;
+        font-size: $be-image-placeholder-text-font-size;
+        line-height: $be-image-placeholder-text-line-height;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+
+    /* ======== Selection Overlay ======== */
+    .e-be-selection-overlay {
+      position: absolute;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: .5;
+      z-index: 1000;
+      border-radius: $be-selection-overlay-border-radius;
+    }
+
+    /* ======== Collaborative cursor overlay styles ======== */
+    .e-be-sel-highlight {
+      position: absolute;
+      border-radius: 2px;
+      pointer-events: none;
+    }
+
+    .e-be-cursor-overlay {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 9999;
+      overflow: visible;
+
+      .e-be-cursor {
+        position: absolute;
+        width: 0;
+        overflow: visible;
+        pointer-events: none;
+      }
+
+      /* 2 px bar. height and background are set inline (runtime-computed). */
+      .e-be-cursor-line {
+        position: absolute;
+        left: -1px;
+        top: 0;
+        width: 2px;
+        border-radius: 1px;
+      }
+
+      .e-be-cursor-head {
+        position: absolute;
+        left: -4px;
+
+        /* -(dot-size/2) centres 8px dot */
+        top: -10px;
+
+        /* -(dot-size + 2) dot bottom flush with line top */
+        display: flex;
+        align-items: center;
+        cursor: default;
+        pointer-events: auto;
+      }
+
+      .e-be-cursor-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      /* Name label (hidden by default). Background is set inline (user colour). */
+      .e-be-cursor-label {
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        font-size: 11px;
+        padding: 0;
+        user-select: none;
+        pointer-events: none;
+        border-radius: 10px;
+        transition: $be-cursor-label-transition;
+      }
+
+      .e-be-cursor-label.e-active {
+        max-width: 200px;
+        opacity: 1;
+        padding: 1px 6px 1px 4px;
+      }
+    }
+
+    /* ======== RTL Styles ======== */
+    &.e-rtl {
+
+      /* Block Styles */
+      .e-block {
+
+        /* Callout Block Styles */
+        &.e-callout-block {
+          .e-block {
+            padding-right: $be-rtl-callout-block-padding-right;
+            padding-left: $be-rtl-callout-block-padding-left;
+          }
+        }
+
+        /* Toggle Block */
+        &.e-toggle-block {
+          .e-block {
+            padding-right: $be-rtl-toggle-block-padding-right;
+            padding-left: $be-rtl-toggle-block-padding-left;
+          }
+        }
+
+        /* List Block Styles */
+        &.e-list-block {
+          margin-right: $be-rtl-list-block-margin-right;
+          margin-left: $be-rtl-list-block-margin-left;
+
+          ul li {
+            padding-right: $be-rtl-ul-li-padding-right;
+            padding-left: $be-rtl-ul-li-padding-left;
+          }
+
+          ol li {
+            padding-right: $be-rtl-ol-li-padding-right;
+            padding-left: $be-rtl-ol-li-padding-left;
+            right: 4px;
+            left: 0;
+          }
+
+          /* Checklist Block */
+          &[data-block-type = 'Checklist'] {
+            margin-right: $be-rtl-block-Checklist-margin-right;
+            margin-left: $be-rtl-block-Checklist-margin-left;
+          }
+
+          /* Padding adjustment for Bullet and Numbered list Block */
+          &[data-block-type = 'BulletList'],
+          &[data-block-type = 'NumberedList'],
+          &[data-block-type = 'Checklist'] {
+            padding-left: $be-rtl-list-block-padding-left;
+            padding-right: $be-rtl-list-block-padding-right;
+          }
+        }
+      }
+    }
+  }
+
+  .e-table-gripper-action-popup {
+    display: flex;
+    padding: $be-table-gripper-action-popup-padding;
+    border-radius: $be-table-gripper-action-popup-border-radius;
+    justify-content: center;
+    align-items: center;
+    .e-icons {
+      cursor: pointer;
+      font-size: $be-table-popup-icon-size;
+      line-height: 100%;
+      padding: $be-table-popup-icon-padding;
+      border-radius: 4px;
+    }
+  }
+
+  /* floating icons tooltip styles */
+  .e-be-floating-icon-tooltip {
+    .e-tip-content {
+      text-align: center;
+    }
+  }
+
+  /* ======== Floating Icons styles ======== */
+  .e-floating-icon {
+    box-sizing: border-box;
+    width: $be-floating-icon-width;
+    height: $be-floating-icon-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $be-floating-icon-font-size;
+    line-height: $be-floating-icon-line-height;
+    font-weight: $be-floating-icon-font-weight;
+    border-radius: $be-floating-icon-border-radius;
+    cursor: pointer;
+  }
+
+  .e-floating-icons {
+    gap: $be-floating-icons-gap;
+  }
+
+  /* Blazor specific styles for label */
+  .e-blockeditor-mention-menu.e-popup-open{
+    .e-dropdownbase.e-dd-group .e-list-item {
+      padding-left: 0;
+    }
+  }
+
+  .e-blockeditor-mention-menu.e-popup-open{
+    .e-dropdownbase.e-dd-group {
+      .em-content{
+        .e-settings{
+          border-left: 0;
+          padding: 0;
+          box-sizing: unset;
+        }
+      }
+    }
+  }
+
+  /* Common for all mention menu */
+  .e-blockeditor-mention-menu.e-popup {
+    .e-dropdownbase {
+      padding: $be-mention-popup-padding;
+    }
+
+    /* To override the textindent style of e-list-item */
+    ul.e-list-parent.e-ul * {
+      text-indent: 0;
+    }
+
+    &.e-rtl {
+      .e-dropdownbase .e-list-item {
+        padding-right: $be-rtl-list-item-padding-right;
+        padding-left: $be-rtl-list-item-padding-left;
+      }
+    }
+  }
+
+  /* ======== common styles for mention and popup menu ======== */
+  .e-blockeditor-mention-menu.e-popup,
+  .e-blockeditor-blockaction-popup,
+  .e-blockeditor-contextmenu ul {
+    border-radius: $be-mention-popup-border-radius;
+  }
+
+  /* Table gripper action popup styles */
+  .e-blockeditor .e-be-gripper-action-popup-hide {
+    display: flex;
+    visibility: hidden;
+  }
+
+  /* ======== Block Action styles ======== */
+  .e-blockeditor-blockaction-popup {
+    &.e-be-action-popup-hide {
+      display: flex;
+      visibility: hidden;
+    }
+    .e-menu-wrapper,
+    .e-menu-container {
+      width: 100%;
+      padding: $be-mention-popup-padding;
+      ul .e-menu-item {
+        height: $be-menu-item-height;
+        line-height: $be-blockaction-menu-line-height;
+        padding: $be-blockaction-menu-padding;
+        .e-blockaction-item-template {
+          display: flex;
+          min-height: 32px;
+          align-items: center;
+          gap: $be-ctmenu-content-gap;
+          padding-left: $be-mention-popup-item-padding-left;
+          padding-right: $be-blockaction-item-padding-right;
+          .e-action-icon-info {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .e-action-item-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-grow: 1;
+          }
+          .e-action-icon {
+            font-size: $be-ctmenu-icon-font-size;
+            line-height: $be-ctmenu-icon-line-height;
+          }
+          .e-action-item-label {
+            font-size: $be-ctmenu-text-font-size;
+            line-height: $be-ctmenu-text-line-height;
+          }
+          .e-action-item-shortcut {
+            font-size: $be-ctmenu-shortcut-font-size;
+            line-height: $be-ctmenu-shortcut-line-height;
+          }
+        }
+      }
+    }
+
+    /* ======== Blazor specific BlockAction menu popup styles ======== */
+    .e-menu-container ul {
+      width: 100%;
+    }
+  }
+
+  /* ======== Slash Command styles ======== */
+  .e-blockeditor-command-menu.e-popup {
+    &.e-mention {
+      margin-top: $be-mention-margin-top;
+    }
+    .e-command-mention-item-template {
+      display: flex;
+      min-height: 32px;
+      align-items: center;
+      gap: $be-ctmenu-content-gap;
+      padding-left: $be-mention-popup-item-padding-left;
+      .e-command-icon-info {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .e-command-icon {
+        font-size: $be-ctmenu-icon-font-size;
+        line-height: $be-ctmenu-icon-line-height;
+      }
+      .e-command-title {
+        font-size: $be-ctmenu-text-font-size;
+        line-height: $be-ctmenu-text-line-height;
+      }
+      .e-command-shortcut {
+        font-size: $be-ctmenu-shortcut-font-size;
+        line-height: $be-ctmenu-shortcut-line-height;
+      }
+    }
+
+    .e-command-item-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-grow: 1;
+    }
+
+    .e-dropdownbase .e-list-group-item,
+    .e-fixed-head {
+      padding-left: $be-mention-popup-header-padding;
+    }
+  
+    &.e-rtl {
+      .e-dropdownbase .e-list-group-item,
+      .e-fixed-head {
+        padding-right: $be-mention-popup-header-padding;
+        padding-left: $be-fixed-head-padding-left;
+      }
+    }
+
+    /* ======== Blazor specific command menu popup styles ======== */
+    .e-dropdownbase.e-dd-group .e-list-item {
+      padding-left: $be-dropdownbase-list-padding-left;
+    }
+
+    /* ======== Inline toolbar Transform item popup styles ======== */
+    .e-transform-item-template {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      .e-transform-icon-info {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .e-transform-item-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-grow: 1;
+    }
+  }
+
+  /* ======== Blazor specific Transform item popup styles ======== */
+  .e-blockeditor-command-menu.e-be-transform {
+    .e-transform-item-template {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      .e-transform-icon-info {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .e-transform-item-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-grow: 1;
+    }
+  }
+
+  /* Context menu styles */
+  .e-blockeditor-contextmenu ul {
+    width: 200px;
+    &.e-contextmenu {
+      padding: $be-mention-popup-padding;
+    }
+    .e-ctmenu-item-template {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: $be-ctmenu-item-template-height;
+    }
+
+    .e-ctmenu-content {
+      display: flex;
+      align-items: center;
+      gap: $be-ctmenu-content-gap;
+    }
+    .e-ctmenu-icon {
+      font-size: $be-ctmenu-icon-font-size;
+      line-height: $be-ctmenu-icon-line-height;
+    }
+    .e-ctmenu-text {
+      font-size: $be-ctmenu-text-font-size;
+      line-height: $be-ctmenu-text-line-height;
+    }
+    .e-ctmenu-shortcut {
+      font-size: $be-ctmenu-shortcut-font-size;
+      line-height: $be-ctmenu-shortcut-line-height;
+    }
+  }
+
+  /* ======== Inline Toolbar styles ======== */
+  .e-blockeditor-inline-toolbar-popup {
+    &.e-be-inline-tlbr-hide {
+      display: block;
+      visibility: hidden;
+      width: auto;
+    }
+    max-width: 75%;
+    border-radius: $be-inline-toolbar-border-radius;
+    .e-toolbar-item {
+      .e-inline-color-icon,
+      .e-inline-bgColor-icon {
+        font-family: 'e-icons';
+        font-size: $be-inline-bgColor-icon-size;
+      }
+
+      .e-toolbar-color-dropdown .e-icons.e-btn-icon,
+      .e-toolbar-bgcolor-dropdown .e-icons.e-btn-icon {
+        font-size: $be-toolbar-bgcolor-dropdown-size;
+      }
+
+      /* ======== Blazor specific Toolbar styles ======== */
+      .e-toolbar-color-dropdown,
+      .e-toolbar-bgcolor-dropdown {
+        &.e-btn.e-icon-btn .e-btn-icon {
+          line-height: $be-toolbar-btn-icon-line-height;
+        }
+
+        &.e-btn .e-btn-icon.e-icon-left {
+          margin-left: $be-toolbar-icon-left-margin-left;
+          margin-right: $be-toolbar-icon-left-margin-right;
+          width: unset;
+        }
+      }
+    }
+
+    /* ======== Blazor specific Toolbar styles ======== */
+    .e-toolbar {
+      .e-item-first-child {
+        margin-left: $be-toolbar-first-child-margin-left;
+      }
+      &.e-rtl .e-item-first-child {
+        margin-left: $be-rtl-toolbar-first-child-margin-left;
+        margin-right: $be-rtl-toolbar-first-child-margin-right;
+      }
+    }
+
+    .e-blockeditor-inline-toolbar.e-toolbar {
+      min-height: auto;
+      .e-toolbar-items {
+        min-width: auto;
+        margin: $be-inline-toolbar-items-margin;
+        .e-toolbar-item {
+          margin: 0;
+          min-height: auto;
+          padding: $be-inline-toolbar-item-padding;
+        }
+      }
+      .e-toolbar-transform-dropdown {
+        gap: 4px;
+      }
+    }
+    .e-colorpicker-wrapper .e-split-btn-wrapper {
+      .e-dropdown-btn{
+        @if $theme-name == 'tailwind' {
+          padding-left: 2px;
+          padding-right: 2px;
+        }
+      }
+      .e-split-colorpicker {
+        .e-selected-color {
+          background: none;
+          display: block;
+          margin-top: $be-color-picker-margin-top;
+          width: $be-color-picker-width;
+          height: $be-color-picker-height;
+          .e-split-preview {
+            height: 3px;
+            bottom: 0;
+            top: unset;
+          }
+        }
+        &::before {
+          font-family: 'e-icons';
+        }
+      }
+    }
+  }
+
+  /* Link Popup styles */
+  .e-blockeditor-link-dialog {
+    .e-be-link-content {
+      display: flex;
+      flex-direction: column;
+      gap: $be-link-content-gap;
+    }
+
+    .e-footer-content .e-be-link-footer {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: $be-link-footer-gap;
+      .e-btn {
+        margin-left: $be-link-footer-btn-margin-left;
+        margin-right: $be-link-footer-btn-margin-right;
+      }
+    }
+  }
+
+  /* User and label mention styles */
+  .e-blockeditor-mention-menu.e-popup {
+    .e-user-mention-item-template,
+    .e-label-mention-item-template {
+      display: flex;
+      align-items: center;
+      gap: $be-label-mention-item-gap;
+    }
+    .e-user-mention-item-template {
+      padding: $be-user-mention-item-padding;
+    }
+    .e-label-mention-item-template {
+      padding: $be-label-mention-item-padding;
+    }
+    .em-avatar {
+      width: $be-mention-avatar-width;
+      height: $be-mention-avatar-height;
+      font-size: $be-ctmenu-text-font-size;
+      line-height: $be-ctmenu-text-line-height;
+      border-radius: $be-popup-em-avatar-border-radius;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+
+      .em-img {
+        width: 100%;
+        height: $be-popup-em-img-height;
+        object-fit: cover;
+        border-radius: $be-popup-em-img-border-radius;
+      }
+    }
+
+    &.e-blockeditor-label-menu {
+      .em-avatar {
+        width: $be-label-avatar-width;
+        height: $be-label-avatar-height;
+      }
+    }
+
+    .em-initial {
+      user-select: none;
+    }
+
+    .em-content {
+      display: flex;
+      align-items: center;
+      gap: $be-popup-em-content-gap;
+      .em-text {
+        font-size: $be-ctmenu-text-font-size;
+        line-height: $be-ctmenu-text-line-height;
+      }
+      .em-icon {
+        font-size: $be-ctmenu-icon-font-size;
+        line-height: $be-ctmenu-icon-line-height;
+      }
+    }
+  }
+
+  /* Image upload popup styles */
+  .e-image-upload-popup {
+    border-radius: $be-image-upload-popup-radius;
+    &.e-image-popup-hide {
+      display: block;
+      visibility: hidden;
+    }
+    .e-tab .e-content {
+      padding: $be-image-upload-popup-tab-content-padding;
+    }
+    .e-embed-actions {
+      padding-top: $be-embed-btn-padding-top;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  /* shortcut direction */
+  .e-ctmenu-shortcut,
+  .e-action-item-shortcut,
+  .e-command-shortcut {
+    direction: ltr;
+  }
+
+  /* ======== Color Picker Popup Styles ======== */
+  .e-dropdown-popup:has(.e-be-color-picker) {
+    margin-top: $be-color-picker-margin-top;
+  }
+
+  /* Blazor specific styles for ddb popup */
+  .e-blockeditor-codeblock-dropdown.e-dropdown-popup ul {
+    max-height: 300px;
+    overflow: auto;
+  }
+}