@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

package/dist/text-editor.scss

@@ -1,331 +0,0 @@
-// Define SCSS variables for colors, font, and sizes
-$toolbar-bg-color: #ffffff;
-$toolbar-border-color: #eaecf0;
-$icon-color: #667085;
-$active-icon-color: #162578;
-$active-bg-color: #583fff;
-$dropdown-font-color: #344054;
-$font-family: "Lato", Arial, sans-serif;
-$font-size: 16px;
-$border-color: #a5b4fc;
-$focus-border-color: #5aea79;
-$focus-box-shadow:
-  0px 0px 0px 4px #ced4f6,
-  0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-$focus-outline-color: #818cf8;
-$active-border-color: #8190e8;
-$active-bg-light-color: #f5f6fd;
-$chip-bg-color: #e3dfff;
-$chip-border-color: #d5cfff;
-$chip-remove-color: rgb(0, 54, 172);
-
-// Style for text editor main container
-.text_editor_main {
-  .editor {
-    width: max-content;
-    min-width: 130px;
-    padding: 0px 8px;
-    outline: none;
-    position: relative;
-    word-break: break-all;
-    align-items: center;
-    z-index: 100;
-    color: #111827; // var(--gray-900)
-    border: 1px solid $border-color;
-
-    &:focus-visible {
-      border: 1px solid $focus-border-color;
-      box-shadow: $focus-box-shadow;
-    }
-
-    &:focus {
-      outline: 0 none;
-      outline-offset: 0;
-      box-shadow:
-        0px 1px 2px rgba(16, 24, 40, 0.05),
-        0px 0px 0px 2px $focus-outline-color;
-      border-radius: 8px;
-      border: 1px solid $focus-outline-color;
-    }
-  }
-
-  .input-box {
-    width: fit-content;
-    border: 1px solid #b9b8b8;
-    padding: 5px;
-    border-radius: 5px;
-    margin: 10px 0px;
-    line-height: 0;
-  }
-
-  .addCode-btn {
-    cursor: pointer;
-    margin: 10px;
-    padding: 5px 15px;
-    background: $active-bg-color;
-    border: 1px solid #fff;
-    border-radius: 4px;
-    color: #fff;
-  }
-
-  .chip-list {
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    background-color: #fff;
-    padding: 12px;
-    box-shadow:
-      0px 4px 6px -2px rgba(16, 24, 40, 0.03),
-      0px 12px 16px -4px rgba(16, 24, 40, 0.08);
-    position: absolute;
-    width: 100%;
-    z-index: 1;
-
-    li {
-      display: flex;
-      align-items: center;
-      height: 20px;
-      width: fit-content;
-      border: 1px solid #d1d5db; // var(--gray-300)
-      border-radius: 6px;
-      padding: 4px;
-      margin-bottom: 16px;
-      gap: 4px;
-      font-size: 12px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .app-icon {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        object-fit: contain;
-        border: 1px solid #f3f4f6; // var(--gray-100)
-      }
-
-      .attr-type {
-        height: 16px;
-        width: 16px;
-        object-fit: contain;
-      }
-    }
-  }
-
-  .sc_chip_main {
-    display: inline-block;
-    padding: 0 4px;
-    border-radius: 4px;
-    align-items: center;
-    margin: 3px 3px !important;
-    user-select: none;
-    position: relative;
-    background-color: $chip-bg-color;
-    border: 1px solid $chip-border-color;
-    color: $active-bg-color;
-
-    .remove-chip {
-      margin-left: 5px;
-      color: $chip-remove-color;
-      font-weight: bold;
-    }
-
-    img {
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-      margin-right: 5px;
-      vertical-align: text-top;
-      margin-bottom: 1px;
-
-      &:nth-child(2) {
-        border: 0;
-      }
-    }
-
-    &::after {
-      content: attr(data-title);
-      position: absolute;
-      background-color: #fff;
-      color: #000;
-      padding: 5px 10px;
-      box-shadow:
-        0px 4px 6px -2px rgba(16, 24, 40, 0.03),
-        0px 12px 16px -4px rgba(16, 24, 40, 0.08);
-      font-size: 12px;
-      display: none;
-      bottom: 20px;
-      z-index: 1000;
-      border-radius: 6px;
-      border: 1px solid #e5e7eb; // var(--gray-200)
-      margin-top: 20px;
-      left: 30%;
-      transform: translateX(-30%);
-      word-break: normal;
-    }
-
-    &:hover {
-      &::after,
-      &::before {
-        display: inline;
-      }
-
-      &::after {
-        z-index: 100;
-      }
-
-      &::before {
-        display: inline;
-      }
-    }
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 8px 8px 0;
-      border-color: transparent #fff transparent transparent;
-      bottom: 100%;
-      z-index: 1000;
-      transform: rotate(45deg);
-      left: 10px;
-      display: none;
-    }
-  }
-
-  .p-autocomplete.p-disabled {
-    background-color: #f9fafb !important; // var(--gray-50)
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-    color: #6b7280; // var(--gray-500)
-  }
-
-  .accordion {
-    width: 100%;
-  }
-
-  .accordion_section {
-    border-bottom: 1px solid #d1d5db;
-  }
-
-  .accordion_header {
-    background-color: #f3f4f6;
-    color: #374151;
-    padding: 12px;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
-    text-align: left;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    &:focus {
-      outline: 2px solid $focus-outline-color;
-    }
-  }
-
-  .accordion_content {
-    overflow: hidden;
-    transition: max-height 0.2s ease-out;
-  }
-
-  .accordion_body {
-    padding: 16px;
-    background-color: #ffffff;
-    color: #374151;
-    font-size: 14px;
-  }
-
-  .active {
-    max-height: 500px;
-  }
-
-  .inactive {
-    max-height: 0px;
-  }
-}
-
-// Apply font-family to the editor view
-.fr-view {
-  font-family: $font-family;
-}
-
-// Style for toolbar command button icons
-.fr-toolbar,
-.fr-popup,
-.fr-modal {
-  .fr-command.fr-btn {
-    svg path {
-      fill: $icon-color !important;
-    }
-  }
-}
-
-// Style for inline toolbar
-.fr-toolbar.fr-inline {
-  border-radius: 88px;
-  border: 1px solid $toolbar-border-color;
-  background: $toolbar-bg-color;
-}
-
-// Style for dropdowns and selections
-.fr-toolbar,
-.fr-popup,
-.fr-modal {
-  .fr-command.fr-btn.fr-dropdown.fr-selection {
-    span {
-      color: $dropdown-font-color;
-      font-family: $font-family;
-      font-size: $font-size;
-      font-style: normal;
-      font-weight: 500;
-    }
-  }
-}
-
-// Style for active toolbar buttons
-.fr-toolbar,
-.fr-popup,
-.fr-modal {
-  .fr-command.fr-btn.fr-active:not(.fr-dropdown) {
-    border-radius: 4px;
-    border: 1px solid $active-border-color;
-    background: $active-bg-light-color;
-
-    svg path {
-      fill: $active-icon-color !important; // Apply icon color
-    }
-  }
-}
-
-.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,
-.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span,
-.fr-modal .fr-command.fr-btn.fr-dropdown.fr-selection span {
-  width: fit-content !important;
-}
-
-.fr-popup .fr-color-set > span {
-  border-radius: 50%;
-  margin: 3px;
-  border: 0.2px solid #eae6e6;
-  box-shadow: #000;
-}
-
-.fr-dropdown-menu {
-  // border: 1px solid #eaecf0;
-  border-radius: 8px !important;
-}
-.fr-popup .fr-buttons.fr-tabs {
-  display: none;
-}
-
-.fr-popup[data-inst1="true"] {
-  left: 260px !important;
-  top: 200px !important;
-}
-.fr-popup.fr-desktop.fr-inline.fr-above {
-  z-index: 999999 !important;
-}