@zipify/wysiwyg 1.0.0-dev.5 → 1.0.0-dev.8

package/dist/wysiwyg.css

@@ -0,0 +1,837 @@
+
+.zw-toolbar__divider[data-v-034e1143] {
+    border-color: rgba(var(--zw-color-n90), 0.1);
+    border-style: solid;
+    border-width: 0;
+}
+.zw-toolbar__divider--vertical[data-v-034e1143] {
+    border-left-width: 1px;
+}
+.zw-toolbar__divider--horizontal[data-v-034e1143] {
+    border-bottom-width: 1px;
+}
+
+
+.zw-toolbar__row[data-v-65916ef8] {
+    display: flex;
+    column-gap: var(--zw-offset-xs);
+    padding: var(--zw-offset-xxs) var(--zw-offset-xs);
+}
+
+
+.zw-toolbar__group[data-v-06bbae29] {
+    display: flex;
+    column-gap: var(--zw-offset-xxs);
+}
+
+
+.zw-button[data-v-610825a2] {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    white-space: nowrap;
+    appearance: none;
+    user-select: none;
+    text-transform: none;
+    letter-spacing: normal;
+    color: inherit;
+    transition: 0.1s opacity ease-out;
+    will-change: opacity;
+}
+.zw-button[data-v-610825a2]::-moz-focus-inner {
+    border: 0 !important;
+}
+.zw-button[data-v-610825a2]:hover,
+.zw-button[data-v-610825a2]:focus {
+    text-decoration: none;
+    outline: none;
+}
+.zw-button[data-v-610825a2]:disabled {
+    user-select: none;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 0.35;
+}
+.zw-button--toolbar[data-v-610825a2] {
+    border-radius: 1px;
+    min-height: 28px;
+    font-weight: var(--zw-font-weight-semibold);
+    font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-xxs);
+    color: rgb(var(--zw-color-n70));
+    transition-property: background-color, color, opacity;
+    will-change: background-color, color, opacity;
+}
+.zw-button--toolbar[data-v-610825a2]:not(.zw-button--icon) {
+    padding: var(--zw-offset-xxs) var(--zw-offset-xs);
+}
+.zw-button--toolbar[data-v-610825a2]:not(:disabled):hover,
+.zw-button--toolbar[data-v-610825a2]:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active[data-v-610825a2]:not(:disabled) {
+    color: rgb(var(--zw-color-white));
+    background-color: rgb(var(--zw-color-n5));
+}
+
+
+.zw-button-toggle[data-v-de5fa53a] {
+    display: flex;
+    column-gap: var(--zw-offset-xxs);
+}
+
+
+.zw-icon[data-v-d4624794] {
+    display: inline-block;
+}
+.zw-icon--auto-color[data-v-d4624794] {
+    --zw-icon-foreground: currentColor;
+}
+
+[data-simplebar] {
+  position: relative;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: flex-start;
+}
+
+.simplebar-wrapper {
+  overflow: hidden;
+  width: inherit;
+  height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.simplebar-mask {
+  direction: inherit;
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: auto !important;
+  height: auto !important;
+  z-index: 0;
+}
+
+.simplebar-offset {
+  direction: inherit !important;
+  box-sizing: inherit !important;
+  resize: none !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.simplebar-content-wrapper {
+  direction: inherit;
+  box-sizing: border-box !important;
+  position: relative;
+  display: block;
+  height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
+  width: auto;
+  max-width: 100%; /* Not required for horizontal scroll to trigger */
+  max-height: 100%; /* Needed for vertical scroll to trigger */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.simplebar-content-wrapper::-webkit-scrollbar,
+.simplebar-hide-scrollbar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.simplebar-content:before,
+.simplebar-content:after {
+  content: ' ';
+  display: table;
+}
+
+.simplebar-placeholder {
+  max-height: 100%;
+  max-width: 100%;
+  width: 100%;
+  pointer-events: none;
+}
+
+.simplebar-height-auto-observer-wrapper {
+  box-sizing: inherit !important;
+  height: 100%;
+  width: 100%;
+  max-width: 1px;
+  position: relative;
+  float: left;
+  max-height: 1px;
+  overflow: hidden;
+  z-index: -1;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+  flex-grow: inherit;
+  flex-shrink: 0;
+  flex-basis: 0;
+}
+
+.simplebar-height-auto-observer {
+  box-sizing: inherit;
+  display: block;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1000%;
+  width: 1000%;
+  min-height: 1px;
+  min-width: 1px;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.simplebar-track {
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-content {
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-track {
+  pointer-events: all;
+}
+
+.simplebar-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  min-height: 10px;
+}
+
+.simplebar-scrollbar:before {
+  position: absolute;
+  content: '';
+  background: black;
+  border-radius: 7px;
+  left: 2px;
+  right: 2px;
+  opacity: 0;
+  transition: opacity 0.2s linear;
+}
+
+.simplebar-scrollbar.simplebar-visible:before {
+  /* When hovered, remove all transitions from drag handle */
+  opacity: 0.5;
+  transition: opacity 0s linear;
+}
+
+.simplebar-track.simplebar-vertical {
+  top: 0;
+  width: 11px;
+}
+
+.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
+  top: 2px;
+  bottom: 2px;
+}
+
+.simplebar-track.simplebar-horizontal {
+  left: 0;
+  height: 11px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
+  height: 100%;
+  left: 2px;
+  right: 2px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+  right: auto;
+  left: 0;
+  top: 2px;
+  height: 7px;
+  min-height: 0;
+  min-width: 10px;
+  width: auto;
+}
+
+/* Rtl support */
+[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+  right: auto;
+  left: 0;
+}
+
+.hs-dummy-scrollbar-size {
+  direction: rtl;
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  height: 500px;
+  width: 500px;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+
+.simplebar-hide-scrollbar {
+  position: fixed;
+  left: 0;
+  visibility: hidden;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+
+.zw-scroll-view[data-v-56dc828f] .simplebar-placeholder {
+    display: none;
+}
+.zw-scroll-view[data-v-56dc828f] .simplebar-track {
+    width: 4px;
+    background-color: rgb(var(--zw-color-n20));
+    pointer-events: initial;
+}
+.zw-scroll-view[data-v-56dc828f] .simplebar-scrollbar {
+    width: 4px;
+}
+.zw-scroll-view[data-v-56dc828f] .simplebar-scrollbar::before {
+    top: 0;
+    left: 0;
+    background-color: rgb(var(--zw-color-n5));
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+    border-radius: 0;
+}
+
+
+.zw-field-label[data-v-2be4d197] {
+    font-weight: var(--zw-font-weight-thin);
+    font-size: var(--zw-font-size-xxs);
+    line-height: var(--zw-line-height-xxs);
+    color: rgb(var(--zw-color-n70));
+    display: block;
+}
+
+
+.zw-range[data-v-4cc06850] {
+    width: 100%;
+    height: 32px;
+    background: none;
+    cursor: pointer;
+    flex-grow: 1;
+    -webkit-appearance: none;
+
+    --zw-range-track-background-color: transparent;
+    --zw-range-track-background-image: linear-gradient(to right, #B3B3B3 var(--zw-range-progress), #3B3B3B var(--zw-range-progress));
+    --zw-range-thumb-background: rgb(var(--zw-color-white));
+    --zw-range-thumb-box-shadow: -1px -1px 3px rgba(59, 59, 59, 0.35), 1px 1px 3px rgba(59, 59, 59, 0.35);
+}
+.zw-range[data-v-4cc06850]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-size: 100%;
+    background-color: var(--zw-range-track-background-color);
+    background-image: var(--zw-range-track-background-image);
+}
+.zw-range[data-v-4cc06850]::-moz-range-track {
+    width: 100%;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-size: 100%;
+    background-color: var(--zw-range-track-background-color);
+    background-image: var(--zw-range-track-background-image);
+}
+.zw-range[data-v-4cc06850]::-ms-track {
+    width: 100%;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-size: 100%;
+    background-color: var(--zw-range-track-background-color);
+    background-image: var(--zw-range-track-background-image);
+}
+.zw-range[data-v-4cc06850]::-webkit-slider-thumb {
+    height: 13px;
+    width: 13px;
+    border-radius: 100%;
+    margin-top: -5px;
+    background: var(--zw-range-thumb-background);
+    box-shadow: var(--zw-range-thumb-box-shadow);
+    -webkit-appearance: none;
+    transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.zw-range[data-v-4cc06850]::-moz-range-thumb {
+    height: 13px;
+    width: 13px;
+    border-radius: 100%;
+    margin-top: -5px;
+    background: var(--zw-range-thumb-background);
+    box-shadow: var(--zw-range-thumb-box-shadow);
+    -webkit-appearance: none;
+    transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.zw-range[data-v-4cc06850]::-ms-thumb {
+    height: 13px;
+    width: 13px;
+    border-radius: 100%;
+    margin-top: -5px;
+    background: var(--zw-range-thumb-background);
+    box-shadow: var(--zw-range-thumb-box-shadow);
+    -webkit-appearance: none;
+    transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Browser hacks */
+.zw-range[data-v-4cc06850]::-moz-focus-outer,
+.zw-range[data-v-4cc06850]::-moz-range-thumb {
+    border: 0;
+}
+
+/* In IE don't know how it count margin for thumb */
+/* but it works */
+.zw-range[data-v-4cc06850]::-ms-thumb {
+    margin-top: -2px;
+}
+
+/* END browser hacks */
+.zw-range[data-v-4cc06850]:focus {
+    outline: none;
+}
+.zw-range[data-v-4cc06850]:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    --zw-range-track-background-color: #3B3B3B;
+    --zw-range-track-background-image: linear-gradient(to right, #B3B3B3 var(--zw-range-progress), #3B3B3B var(--zw-range-progress));
+}
+.zw-range[data-v-4cc06850]:disabled {
+    --zw-range-thumb-background: #B3B3B3;
+    --zw-range-thumb-box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
+}
+.zw-range[data-v-4cc06850]:not(:disabled):hover {
+    --zw-range-thumb-box-shadow: 0 0 0 8px rgba(240, 240, 240, 0.15);
+}
+.zw-range[data-v-4cc06850]:not(:disabled):active {
+    --zw-range-thumb-box-shadow: 0 0 0 12px rgba(240, 240, 240, 0.15);
+}
+
+
+.zw-number-field[data-v-289baff8] {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+    --buttons-color: rgb(var(--zw-color-n70));
+
+    padding: 2px 4px;
+    border: solid 1px var(--border-color);
+    align-items: stretch;
+    display: flex;
+}
+.zw-number-field[data-v-289baff8]:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+.zw-number-field[data-v-289baff8]:focus,
+.zw-number-field[data-v-289baff8]:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+.zw-number-field__input[data-v-289baff8] {
+    color: var(--text-color);
+    background-color: rgb(var(--zw-color-n15));
+    border: 0;
+    display: block;
+    width: 100%;
+    outline: none !important;
+    line-height: var(--zw-line-height-md);
+    font-size: var(--zw-font-size-xs);
+    -moz-appearance: textfield;
+}
+.zw-number-field__buttons[data-v-289baff8] {
+    display: none;
+    flex-direction: column;
+    height: 100%;
+}
+.zw-number-field:hover .zw-number-field__buttons[data-v-289baff8],
+.zw-number-field:focus .zw-number-field__buttons[data-v-289baff8],
+.zw-number-field:focus-within .zw-number-field__buttons[data-v-289baff8] {
+    display: flex;
+}
+.zw-number-field__input[data-v-289baff8]::placeholder {
+    color: var(--text-color);
+}
+.zw-number-field__input[data-v-289baff8]::-webkit-outer-spin-button,
+.zw-number-field__input[data-v-289baff8]::-webkit-inner-spin-button {
+    color: var(--text-color);
+    -webkit-appearance: none;
+}
+.zw-number-field__controls[data-v-289baff8] {
+    min-width: var(--zw-offset-sm);
+}
+.zw-number-field--disabled[data-v-289baff8] {
+    opacity: 0.5;
+}
+.zw-number-field--disabled[data-v-289baff8],
+.zw-number-field--disabled .zw-number-field__input[data-v-289baff8] {
+    cursor: not-allowed;
+}
+.zw-number-field__increment-button[data-v-289baff8],
+.zw-number-field__decrement-button[data-v-289baff8] {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.zw-number-field__increment-button[data-v-289baff8]::after,
+.zw-number-field__decrement-button[data-v-289baff8]::after {
+    content: "";
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+}
+.zw-number-field__increment-button[data-v-289baff8]::after {
+    border-bottom: 3px solid var(--buttons-color);
+}
+.zw-number-field__decrement-button[data-v-289baff8]::after {
+    border-top: 3px solid var(--buttons-color);
+}
+.zw-number-field__increment-button[data-v-289baff8]:hover,
+.zw-number-field__decrement-button[data-v-289baff8]:hover {
+    background-color: rgb(var(--zw-color-n20));
+    --buttons-color: rgb(var(--zw-color-white));
+}
+.zw-number-field__units[data-v-289baff8] {
+    color: rgb(var(--zw-color-n70));
+    font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-md);
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+}
+.zw-number-field:hover .zw-number-field__units[data-v-289baff8],
+.zw-number-field:focus .zw-number-field__units[data-v-289baff8] {
+    display: none;
+}
+
+
+.zw-modal[data-v-0a3c1c80] {
+    border-radius: 2px;
+    overflow: hidden;
+    box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
+    background-color: rgb(var(--zw-color-n15));
+    max-height: var(--zw-modal-max-height);
+    max-width: var(--zw-modal-max-width);
+    z-index: 1000;
+    will-change: transform;
+}
+.zw-modal--enter-active[data-v-0a3c1c80] {
+    transition: opacity 0.15s ease-out;
+}
+.zw-modal--enter[data-v-0a3c1c80],
+.zw-modal--leave-to[data-v-0a3c1c80] {
+    opacity: 0;
+}
+.zw-modal--leave-active[data-v-0a3c1c80] {
+    transition: opacity 0.1s ease-in;
+}
+
+/* Scrollbar overrides in modal */
+.zw-modal[data-v-0a3c1c80] .simplebar-offset,
+.zw-modal[data-v-0a3c1c80] .simplebar-mask {
+    position: initial;
+}
+.zw-modal[data-v-0a3c1c80] .simplebar-content {
+    max-height: var(--zw-modal-max-height);
+    padding: 0 !important;
+}
+.zw-modal[data-v-0a3c1c80] .simplebar-content-wrapper {
+    overscroll-behavior: contain;
+}
+
+
+.zw-dropdown__activator[data-v-4865ea7a] {
+    width: 100%;
+}
+.zw-dropdown__activator-title[data-v-4865ea7a] {
+    margin-right: var(--zw-offset-xs);
+}
+.zw-dropdown__activator-arrow[data-v-4865ea7a] {
+    margin-left: auto;
+}
+.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-4865ea7a] {
+    transform: rotateX(180deg);
+}
+
+
+.zw-dropdown__option[data-v-10a0f0b7] {
+    width: 100%;
+    display: block;
+    color: rgb(var(--zw-color-white));
+    padding-top: var(--zw-offset-xxs);
+    padding-right: var(--zw-offset-sm);
+    padding-left: calc(var(--zw-offset-sm) + var(--zw-option-offset, 0px));
+    padding-bottom: var(--zw-offset-xxs);
+    text-align: left;
+    transition: 0.1s background-color ease-out;
+    will-change: background-color;
+}
+.zw-dropdown__option[data-v-10a0f0b7]:hover,
+.zw-dropdown__option[data-v-10a0f0b7]:focus,
+.zw-dropdown__option--active[data-v-10a0f0b7] {
+    background-color: rgb(var(--zw-color-n30));
+}
+
+
+.zw-dropdown__group[data-v-207aa7a6] {
+    padding-top: var(--zw-offset-xs);
+    padding-bottom: var(--zw-offset-xs);
+    --zw-option-offset: var(--zw-offset-xs);
+}
+.zw-dropdown__group-title[data-v-207aa7a6] {
+    color: var(--zw-color-n70);
+    font-weight: var(--zw-font-weight-semibold);
+    padding-left: var(--zw-offset-sm);
+    padding-right: var(--zw-offset-sm);
+    margin-top: 0;
+    margin-bottom: var(--zw-offset-xs);
+}
+
+
+.zw-dropdown__divider[data-v-72e4c372] {
+    padding: 0 var(--zw-offset-sm);
+}
+.zw-dropdown__divider[data-v-72e4c372]::before {
+    content: "";
+    display: block;
+    border-bottom: 1px solid rgb(var(--zw-color-n30));
+}
+
+
+.zw-dropdown__menu {
+    padding-top: var(--zw-offset-xs);
+    padding-bottom: var(--zw-offset-xs);
+}
+
+
+.zw-dropdown[data-v-35f81e22] {
+    position: relative;
+    font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-xxs);
+}
+
+
+.zw-style-preset-control[data-v-0f6b31b1] {
+    display: flex;
+    align-items: center;
+}
+.zw-style-preset-control__dropdown[data-v-0f6b31b1] {
+    width: 96px;
+}
+.zw-style-preset-control__reset[data-v-0f6b31b1] {
+    color: rgb(var(--zw-color-n70));
+}
+.zw-style-preset-control__reset[data-v-0f6b31b1]:not(:disabled):hover,
+.zw-style-preset-control__reset[data-v-0f6b31b1]:not(:disabled):focus,
+.zw-style-preset-control__reset[data-v-0f6b31b1]:not(:disabled):focus-within {
+    color: rgb(var(--zw-color-white));
+}
+
+
+.zw-font-family-control[data-v-2e95c716] {
+    width: 96px;
+}
+.zw-font-family-control__option[data-v-2e95c716] {
+    font-weight: 400;
+    font-family: var(--zw-font-family-option);
+    width: 150px;
+}
+
+
+.zw-alignment-control__modal[data-v-9713d430] {
+    padding: var(--zw-offset-xxs);
+}
+.zw-alignment-control__toggle[data-v-9713d430] {
+    flex-direction: column;
+}
+
+
+.zw-line-height-control__modal[data-v-b87c3724] {
+    padding: var(--zw-offset-sm);
+}
+.zw-line-height-control__row[data-v-b87c3724] {
+    display: flex;
+    align-items: center;
+}
+.zw-line-height-control__range[data-v-b87c3724] {
+    width: 156px;
+}
+.zw-line-height-control__field[data-v-b87c3724] {
+    width: 52px;
+    margin-left: var(--zw-offset-sm);
+}
+
+
+.zw-list-control__option[data-v-305d852b] {
+    padding: 0 var(--zw-offset-xs);
+    display: flex;
+}
+
+
+.zw-toolbar[data-v-05accea6] {
+    border-radius: 2px;
+    background-color: rgb(var(--zw-color-n15));
+    color: rgb(var(--zw-color-n70));
+    z-index: 999;
+}
+.zw-toolbar--enter-active[data-v-05accea6],
+.zw-toolbar--leave-active[data-v-05accea6] {
+    transition: opacity 0.15s ease-out;
+}
+.zw-toolbar--leave-active[data-v-05accea6] {
+    transition: opacity 0s ease-in;
+}
+.zw-toolbar--enter[data-v-05accea6],
+.zw-toolbar--leave-to[data-v-05accea6] {
+    opacity: 0;
+}
+
+.zw-wysiwyg {
+    --zw-color-n5: 13, 13, 13;      /* #0D0D0D; */
+    --zw-color-n15: 38, 38, 38;     /* #262626; */
+    --zw-color-n20: 59, 59, 59;     /* #3B3B3B; */
+    --zw-color-n30: 77, 77, 77;     /* #4D4D4D; */
+    --zw-color-n60: 153, 153, 153;  /* #999999 */
+    --zw-color-n70: 179, 179, 179;  /* #B3B3B3 */
+    --zw-color-n80: 196, 196, 196;  /* #C4C4C4 */
+    --zw-color-n85: 217, 217, 217;  /* #D9D9D9 */
+    --zw-color-n90: 230, 230, 230;  /* #E6E6E6 */
+    --zw-color-black: 0, 0, 0;
+    --zw-color-white: 255, 255, 255;
+
+    --zw-offset-xxs: 4px;
+    --zw-offset-xs: 8px;
+    --zw-offset-xsm: 12px;
+    --zw-offset-sm: 16px;
+
+    --zw-font-weight-thin: 400;
+    --zw-font-weight-semibold: 500;
+
+    --zw-font-size-xxs: 12px;
+    --zw-font-size-xs: 14px;
+
+    --zw-line-height-xxs: 1.21;
+    --zw-line-height-md: 1.72;
+}
+
+/*
+$builder-N5: #0D0D0D;
+$builder-N10: #1A1A1A;
+$builder-N15: #262626;
+$builder-N20: #3B3B3B;
+$builder-N30: #4D4D4D;
+$builder-N40: #666;
+$builder-N50: #808080;
+$builder-N60: #999;
+$builder-N70: #B3B3B3;
+$builder-N80: #C4C4C4;
+$builder-N85: #D9D9D9;
+$builder-N90: #E6E6E6;
+$builder-N94: #F0F0F0;
+$builder-N96: #F5F5F5;
+$builder-N98: #FAFAFA;
+
+$font-size-xxs: 12px;
+$font-size-xs:  14px;
+$font-size-sm:  16px;
+$font-size-md:  18px;
+$font-size-lmd: 20px;
+$font-size-lg:  24px;
+
+$font-height--xxs: 1.2;
+$font-height--xs: 1.33;
+$font-height--sm: 1.43;
+$font-height--md: 1.72;
+ */
+
+.zw-wysiwyg [contenteditable] {
+    outline: none;
+}
+
+.zw-style {
+    font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
+    font-family: var(--zw-font-family, var(--zw-preset-font-family));
+    color: var(--zw-font-color, var(--zw-preset-color));
+    font-style: var(--zw-font-style, var(--zw-preset-font-style));
+    text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
+    background-color: var(--zw-background-color, var(--zw-preset-background-color));
+}
+
+@media (min-width: 1200px) {
+
+    .zw-style {
+        font-size: var(--zw-desktop-font-size, var(--zw-preset-desktop-font-size));
+        text-align: var(--zw-desktop-text-align, var(--zw-preset-desktop-text-align));
+        line-height: var(--zw-desktop-line-height, var(--zw-preset-desktop-line-height));
+    }
+}
+
+@media (min-width: 769px) and (max-width: 1199.98px) {
+
+    .zw-style {
+        font-size: var(--zw-tablet-font-size, var(--zw-preset-tablet-font-size));
+        text-align: var(--zw-tablet-text-align, var(--zw-preset-tablet-text-align));
+        line-height: var(--zw-tablet-line-height, var(--zw-preset-tablet-line-height));
+    }
+}
+
+@media (max-width: 768.98px) {
+
+    .zw-style {
+        font-size: var(--zw-mobile-font-size, var(--zw-preset-mobile-font-size));
+        text-align: var(--zw-mobile-text-align, var(--zw-preset-mobile-text-align));
+        line-height: var(--zw-mobile-line-height, var(--zw-preset-mobile-line-height));
+    }
+}
+
+.zw-text--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.zw-position--relative {
+    position: relative;
+}
+
+.zw-margin-bottom--xs {
+    margin-bottom: var(--zw-offset-xs);
+}
+
+
+