@shopware-ag/meteor-component-library/dist/mt-text-editor.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-text-editor[data-v-7a5f952b] {
  display: flex;
  flex-direction: column;
}
label[data-v-7a5f952b] {
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1rem;
  color: var(--color-text-primary-default);
  margin-bottom: var(--scale-size-8);
}
.mt-text-editor__box[data-v-7a5f952b] {
  position: relative;
  border: 1px solid var(--color-border-primary-default);
  border-radius: var(--border-radius-xs);
}
.mt-text-editor:not(.mt-text-editor--inline-edit) .mt-text-editor__box[data-v-7a5f952b] {
  background: var(--color-background-primary-default);
}
.mt-text-editor__code-editor[data-v-7a5f952b] {
  background: var(--color-static-white);
}
.mt-text-editor__content[data-v-7a5f952b],
.mt-text-editor__code-editor[data-v-7a5f952b] {
  height: 260px;
  overflow: auto;
}
.mt-text-editor__code-editor[data-v-7a5f952b] .cm-editor {
  height: inherit;
}
[data-v-7a5f952b] .mt-text-editor__content-editor {
  width: 100%;
  height: 100%;
  padding: var(--scale-size-16);

  /* List styles */
ul,
  ol {
& {
    padding: 0 var(--scale-size-16);
    margin: var(--scale-size-20) var(--scale-size-16) var(--scale-size-20) 0.4rem;
    }
li p {
      margin-top: 0.25em;
      margin-bottom: 0.25em;
}
}
ol {
    list-style: decimal;
    list-style-position: outside;
}
ul {
    list-style: disc;
    list-style-position: outside;
}

  /* WYSIWYG styles */
  outline: 0 solid transparent;
h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary-default);
    letter-spacing: 0;
    margin-bottom: 0;
}
h1 {
    font-size: 36px;
    line-height: var(--font-line-height-3xl);
    margin-top: var(--scale-size-36);
}
h2 {
    font-size: var(--font-size-3xl);
    line-height: var(--font-line-height-2xl);
    margin-top: var(--scale-size-30);
}
h3 {
    font-size: var(--font-size-xl);
    line-height: var(--font-line-height-xl);
    margin-top: var(--scale-size-28);
}
h4 {
    font-size: var(--font-size-l);
    line-height: var(--font-line-height-l);
    margin-top: var(--scale-size-24);
}
h5 {
    font-size: var(--font-size-s);
    line-height: var(--font-line-height-m);
    margin-top: var(--scale-size-22);
}
h6 {
    font-size: var(--font-size-xs);
    line-height: var(--font-line-height-s);
    margin-top: var(--scale-size-22);
}
p,
  div {
    font-weight: normal;
    font-size: var(--font-size-s);
    line-height: var(--font-line-height-m);
    color: var(--color-text-primary-default);
    letter-spacing: 0;
    margin-top: var(--scale-size-16);
}
blockquote {
    font-size: var(--font-size-s);
    font-style: italic;
    line-height: var(--font-line-height-m);
    color: var(--color-text-primary-default);
    margin-left: var(--scale-size-20);
    position: relative;
    margin-top: var(--scale-size-16);
}
blockquote::before {
    content: '"';
    font-size: 40px;
    line-height: 16px;
    color: var(--color-text-secondary-default);
    position: absolute;
    top: var(--scale-size-10);
    left: -24px;
}
ul,
  ol {
& {
    margin-left: var(--scale-size-20);
    margin-top: var(--scale-size-16);
    }
li {
      font-weight: normal;
      font-size: var(--font-size-s);
      line-height: var(--font-line-height-m);
      color: var(--color-text-primary-default);
      margin-bottom: var(--scale-size-4);
}
li:last-child {
      margin-bottom: 0;
}
}
hr {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--scale-size-16);
    border: 2px solid var(--color-border-secondary-default);
}
> *:first-child {
    margin-top: 0;
}

  /* Table-specific styling */
table {
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}
table td,
  table th {
& {
    border: 1px solid var(--color-border-primary-default);
    box-sizing: border-box;
    min-width: 1em;
    padding: var(--scale-size-6) var(--scale-size-8);
    position: relative;
    vertical-align: top;
    }
> * {
      margin-bottom: 0;
}
}
table th {
    background-color: var(--color-background-tertiary-default);
    font-weight: bold;
    text-align: left;
}
table p {
    margin: 0;
}
table .selectedCell::after {
    background: var(--color-background-tertiary-default);
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}
table .column-resize-handle {
    background-color: var(--color-interaction-primary-default);
    pointer-events: none;
    position: absolute;
    right: -2px;
    top: calc(-1 * var(--font-line-height-m) / 2);
    bottom: calc(-1 * var(--font-line-height-m) / 2);
    width: var(--scale-size-4);
    z-index: 10;
}
.tableWrapper {
    margin: var(--scale-size-24) 0;
    overflow-x: auto;
}
&.resize-cursor {
    cursor: ew-resize;
    cursor: col-resize;
}
}
.mt-text-editor__footer[data-v-7a5f952b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--scale-size-16);
  height: var(--scale-size-36);
  background-color: var(--color-background-tertiary-default);
  border-top: 1px solid var(--color-border-primary-default);
  border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
  transition: transform 0.2s ease-in-out;
  color: var(--color-text-secondary-default);
}
.mt-text-editor__footer-left[data-v-7a5f952b] {
  display: flex;
  align-items: center;
}
.mt-text-editor--inline-edit {
.mt-text-editor__content[data-v-7a5f952b] {
    height: auto;
}
.mt-text-editor__box[data-v-7a5f952b] {
    border: none;
}
.mt-text-editor__footer[data-v-7a5f952b] {
    transform: scale(1, 0);
    transform-origin: bottom;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}
}
.mt-text-editor--inline-edit:focus-within .mt-text-editor__footer[data-v-7a5f952b] {
  pointer-events: all;
  transform: scale(1, 1);
}
.mt-text-editor--disabled .mt-text-editor__content[data-v-7a5f952b] {
  background-color: var(--color-background-tertiary-default);
}
[data-v-7a5f952b] .mt-text-editor__content-editor p.is-editor-empty:first-child::before {
  color: var(--color-text-secondary-default);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}
.mt-text-editor--error .mt-text-editor__box[data-v-7a5f952b] {
  border-color: var(--color-icon-critical-default);
}
.mt-text-editor--error .mt-text-editor__content[data-v-7a5f952b] {
  background-color: var(--color-background-critical-default);
}
.mt-text-editor--error label[data-v-7a5f952b] {
  color: var(--color-text-critical-default);
}

/* Gate overlay */
.mt-text-editor__gate[data-v-7a5f952b] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.mt-text-editor__gate[data-v-7a5f952b]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-elevation-backdrop-default);
  z-index: 2;
  border-radius: var(--border-radius-2xs);
  backdrop-filter: blur(6px);
}
.mt-text-editor__gate-content[data-v-7a5f952b] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--scale-size-24);
  text-align: center;
  z-index: 3;
}
.mt-text-editor__gate-text[data-v-7a5f952b] {
  color: var(--color-static-white);
  margin-bottom: var(--scale-size-16);
}
.mt-text-editor__gate-actions[data-v-7a5f952b] {
  display: flex;
  gap: var(--scale-size-8);
}