@avakhula/ui 0.0.10

package/src/components/Form/TextEditor/textEditor.scss

@@ -0,0 +1,684 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/variables/shadows.scss";
+@import "../../../assets/scss/mixins.scss";
+@import "../../../assets/scss/typography.scss";
+
+$textarea-error-outline-color: $red-800;
+// TODO: it's duplicate from /components/Button/button.scss
+$tertiary-btn-background: $gray-100;
+$tertiary-btn-color: $neutral-900;
+$tertiary-btn-hover-background: $blue-100;
+$tertiary-btn-hover-color: $blue-700;
+$tertiary-btn-focus-background: $gray-100;
+$tertiary-btn-focus-color: $neutral-900;
+$tertiary-btn-active-background: $blue-50;
+$tertiary-btn-active-color: $blue-900;
+
+$input-bg: $gray-100;
+$input-color: $neutral-900;
+$input-border-color: $gray-500;
+$input-placeholder-color: $neutral-600;
+$input-disabled-color: $neutral-500;
+$input-disabled-bg: $gray-100;
+$input-disabled-border-color: $neutral-500;
+$input-disabled-placeholder-color: $neutral-500;
+$input-hover-color: $neutral-900;
+$input-hover-bg: $blue-200;
+$input-hover-border-color: $blue-700;
+$input-hover-placeholder-color: $neutral-600;
+$input-hover-error-color: $red-800;
+
+// AlphabeticalList list style
+ol[type="a"] li::before {
+  content: counter(list-1, lower-alpha) ". ";
+}
+ol[type="a"] li {
+  counter-increment: list-1;
+}
+ol[type="a"] li {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+
+.textarea-wrapper {
+  position: relative;
+
+  .character-count {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 5px);
+  }
+
+  .error-message {
+    margin-bottom: 5px;
+  }
+
+  &.error {
+    .ib-text-editor {
+      border-bottom-color: transparent;
+      border-radius: 4px;
+      @include outline(-2px, $textarea-error-outline-color);
+    }
+  }
+
+  &.focus {
+    .ib-text-editor {
+      border-bottom-color: transparent;
+      border-radius: 4px;
+      @include outline(0px, $blue-700);
+      border-bottom: 0px;
+    }
+  }
+
+  &.disable {
+    .ib-text-editor {
+      background-color: $gray-100;
+      border-bottom-color: $neutral-500;
+      resize: none;
+      color: $neutral-500;
+
+      & + .toolbar {
+        background-color: $gray-100;
+      }
+
+      .ql-editor.ql-blank::before {
+        color: $neutral-500;
+      }
+    }
+    .ql-header.ql-picker {
+      .ql-picker-label:hover,
+      .ql-picker-label {
+        border-color: transparent;
+        background-color: $gray-100;
+
+        &:before {
+          color: $neutral-500;
+        }
+
+        &:after {
+          filter: invert(90%) sepia(0%) saturate(0%) hue-rotate(145deg)
+            brightness(81%) contrast(86%);
+        }
+      }
+    }
+
+    .ib-icon-button {
+      background-color: $gray-100;
+      border-color: $gray-100;
+      cursor: default;
+    }
+
+    .toolbar-item:hover,
+    .toolbar-item {
+
+      svg {
+        .ql-fill,
+        .fill {
+          fill: $neutral-500;
+        }
+
+        .ql-stroke,
+        .stroke {
+          stroke: $neutral-500;
+        }
+      }
+    }
+
+    .ql-picker {
+      .ql-picker-label:hover,
+      .ql-picker-label {
+        background-color: $gray-100;
+        border-color: $gray-100;
+
+        svg {
+          fill: $neutral-500;
+
+          .ql-stroke {
+            stroke: $neutral-500;
+          }
+
+          .ql-fill {
+            fill: $neutral-500;
+          }
+        }
+      }
+    }
+
+    .character-count p {
+      color: $neutral-500;
+    }
+  }
+}
+
+.ib-text-editor {
+  resize: vertical;
+  overflow: auto;
+  min-height: 120px;
+  background-color: $gray-100;
+  border-radius: 4px 4px 0 0;
+  padding: 10px 15px;
+  padding-bottom: 35px;
+  padding-right: 2px;
+  border-bottom: 2px solid $gray-500;
+  transition: border-color 0.3s, border-radius 0.3s, background-color 0.3s;
+
+  .ql-editor.ql-blank::before {
+    right: 0;
+    left: 0;
+    @include Ib-H4-regular-italic;
+    color: $neutral-600;
+  }
+
+  .ql-container {
+    height: auto;
+  }
+
+  // Reset default styles
+  .ql-container.ql-snow {
+    border: none;
+
+    .ql-editor {
+      padding: 0 0 10px 0;
+    }
+  }
+
+  .ql-editor {
+    min-height: 56px;
+  }
+  & + .toolbar {
+    background-color: $gray-100;
+  }
+}
+
+.ib-text-editor-wrapper {
+  position: relative;
+  height: auto;
+
+  &:not(.disable):hover {
+    .ib-text-editor {
+      background-color: $blue-100;
+      border-bottom-color: $blue-700;
+  
+      & + .toolbar {
+        background-color: $blue-100;
+      }
+    }
+  }
+
+  .toolbar-item {
+    &:hover {
+      svg {
+        .fill {
+          fill: $blue-800;
+        }
+        .stroke {
+          stroke: $blue-800;
+        }
+      }
+    }
+
+    &.ql-active {
+      background-color: $blue-200;
+    }
+
+    &.ql-active,
+    &:active {
+      svg {
+        .fill {
+          fill: $blue-900;
+        }
+        .stroke {
+          stroke: $blue-900;
+        }
+      }
+    }
+  }
+
+  .toolbar {
+    position: absolute;
+    bottom: 2px;
+    left: 12px;
+    right: 25px;
+    padding-top: 10px;
+    padding-bottom: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -10px;
+    transition: background-color 0.3s;
+    .toolbar-group {
+      position: relative;
+      display: flex;
+      padding: 0 10px;
+
+      &:last-child {
+        &::before {
+          display: none;
+        }
+      }
+
+      &::before {
+        content: "";
+        height: 16px;
+        width: 2px;
+        background-color: $gray-300;
+        position: absolute;
+        right: -1px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      button {
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  // Headings dropdown
+  .ql-snow .ql-picker.ql-header .ql-picker-item {
+    &::before {
+      @include Ib-H4-regular;
+    }
+
+    &[data-value="1"]::before {
+      @include Ib-H1-medium;
+    }
+
+    &[data-value="2"]::before {
+      @include Ib-H2-medium;
+    }
+
+    &[data-value="3"]::before {
+      @include Ib-H3-medium;
+    }
+
+    &[data-value="4"]::before {
+      @include Ib-H4-medium;
+    }
+
+    &[data-value="5"]::before {
+      @include Ib-H5-medium;
+    }
+
+    &[data-value="6"]::before {
+      @include Ib-H6-medium;
+    }
+  }
+
+  .ql-header.ql-picker {
+    width: 98px;
+    border-radius: 4px;
+
+    // Is Open
+    &.ql-expanded {
+      .ql-picker-label {
+        background-color: $blue-200;
+        border-color: transparent;
+
+        &:after {
+          // Transform color from $neutral-900(#1A1A1A) to $blue-900(#0057C2)
+          filter: invert(23%) sepia(50%) saturate(4320%) hue-rotate(204deg)
+            brightness(87%) contrast(101%);
+          transform: translateY(-50%) rotate(180deg);
+        }
+
+        &::before {
+          color: $blue-900;
+        }
+      }
+    }
+
+    .ql-picker-label {
+      padding: 2.5px 3px;
+      border: 2px solid transparent;
+      border-radius: 4px;
+      overflow: hidden;
+      transition: border-color 0.3s, background-color 0.3s;
+
+      &::after {
+        content: "";
+        background-image: url(./icons/svg/chevron-down.svg);
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        transition: transform 0.3s;
+      }
+
+      &:before {
+        color: $neutral-900;
+        @include Ib-H4-regular;
+        line-height: 15px;
+        transition: color 0.3s;
+      }
+
+      &:focus {
+        border-radius: 4px;
+        @include focus(4px);
+      }
+
+      svg {
+        display: none;
+      }
+
+      &:hover {
+        border-color: $blue-300;
+        background-color: $blue-100;
+
+        &:before {
+          color: $blue-800;
+        }
+
+        &::after {
+          // Transform color from $neutral-900(#1A1A1A) to $blue-800(#0060D6)
+          filter: invert(76%) sepia(94%) saturate(5659%) hue-rotate(215deg)
+            brightness(101%) contrast(100%);
+        }
+      }
+
+      &:active {
+        border-color: transparent;
+        background-color: $blue-200;
+
+        &:before {
+          color: $blue-900;
+        }
+
+        &::after {
+          // Transform color from $neutral-900(#1A1A1A) to $blue-900(#0057C2)
+          filter: invert(23%) sepia(50%) saturate(4320%) hue-rotate(204deg)
+            brightness(87%) contrast(101%);
+        }
+      }
+    }
+  }
+
+  .ql-picker-options {
+    left: -2px;
+    margin-top: 5px !important;
+    border-radius: 4px;
+    padding: 6.5px 0;
+    background-color: $white;
+    box-shadow: $ib-shadow-4;
+
+    .ql-picker-item {
+      height: 36px;
+      padding: 0px 15px 0px 13px;
+      display: flex;
+      align-items: center;
+      border-left: 2px solid transparent;
+      transition: border-color 0.3s, background-color 0.3s;
+      @include focus();
+
+      &:before {
+        color: $neutral-900;
+      }
+
+      &:hover {
+        background-color: $gray-100;
+      }
+
+      &.ql-selected {
+        border-color: $blue-900;
+        background-color: $gray-100;
+
+        &:hover {
+          background-color: $blue-50;
+        }
+      }
+    }
+  }
+
+  .ql-color-picker {
+    .ql-picker-label {
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      max-width: 24px;
+      max-height: 24px;
+      min-width: 24px;
+      min-height: 24px;
+      line-height: 1px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid transparent;
+
+      &:hover {
+        background-color: $blue-100;
+        border-color: $blue-300;
+        border-radius: 4px;
+
+        svg {
+          .ql-stroke {
+            stroke: $blue-800;
+          }
+        }
+      }
+
+      &:active {
+        border-color: transparent;
+        background-color: $blue-200;
+
+        svg {
+          .ql-stroke {
+            stroke: $blue-900;
+          }
+        }
+      }
+
+      &:focus {
+        border-radius: 4px;
+        @include focus(2px);
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+
+        .ql-stroke {
+          transition: stroke 0.3s;
+          stroke: $neutral-900;
+        }
+      }
+    }
+
+    &.ql-expanded {
+      .ql-picker-label {
+        border-radius: 4px;
+        background-color: $blue-200;
+
+        svg {
+          .ql-stroke {
+            stroke: $blue-900;
+          }
+        }
+      }
+    }
+
+    &.ql-background {
+      .ql-picker-item {
+        &:not([data-value]) {
+          border: 1px solid $gray-600;
+          background-color: $white!important;
+          position: relative;
+
+          &::after {
+            content: "";
+            width: 14px;
+            height: 1px;
+            background-color: $gray-600;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-45deg);
+            border-radius: 10px;
+          }
+
+          &:hover {
+            background-color: $white!important;
+          }
+        }
+      }
+    }
+
+    .ql-picker-options {
+      padding: 7.5px;
+      width: 162px;
+
+      .ql-picker-item {
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        border: none;
+        border-radius: 4px;
+        margin: 2.5px;
+        transition: transform 0.2s;
+
+        &[data-value="#ffffff"] {
+          border: 1px solid $gray-600;
+          position: relative;
+        }
+
+        &:hover {
+          transform: scale(1.2);
+        }
+
+        &:focus {
+          @include focus(1px);
+        }
+
+        &.ql-selected {
+          position: relative;
+
+          &:first-child {
+            background-color: black;
+          }
+
+          &::before {
+            content: "";
+            width: calc(100% + 5px);
+            height: calc(100% + 5px);
+            border-radius: 4px;
+            background-color: transparent;
+            border: 1px solid $gray-600;
+            position: absolute;
+            top: -2.5px;
+            bottom: -2.5px;
+            right: -2.5px;
+            left: -2.5px;
+          }
+        }
+      }
+    }
+  }
+
+  // Link tooltip
+  .ql-tooltip[data-mode="link"] {
+    z-index: 100;
+    left: 0 !important;
+    border-radius: 4px;
+    border: none;
+    box-shadow: $ib-shadow-3;
+    padding: 10px;
+    width: 380px;
+
+    &::before {
+      display: none;
+    }
+
+    // TODO: it's duplicate from /components/Button/button.scss
+    .ql-action {
+      padding: 0 15px;
+      border-radius: 4px;
+      border: none;
+      outline: none;
+      text-decoration: none;
+      cursor: pointer;
+      height: 36px;
+      display: inline-flex;
+      width: fit-content;
+      transition: color 0.3s, background 0.3s;
+      margin-left: 5px;
+      background: $tertiary-btn-background;
+
+      &::after {
+        margin-left: 0;
+        @include Ib-H4-medium;
+        color: $tertiary-btn-color;
+        transition: color 0.3s;
+        display: flex;
+        align-items: center;
+      }
+
+      &:hover {
+        background: $tertiary-btn-hover-background;
+        &::after {
+          color: $tertiary-btn-hover-color;
+        }
+      }
+
+      &:focus {
+        background: $tertiary-btn-focus-background;
+        &::after {
+          color: $tertiary-btn-focus-color;
+        }
+      }
+
+      &:active {
+        background: $tertiary-btn-active-background;
+        &::after {
+          color: $tertiary-btn-active-color;
+        }
+      }
+    }
+
+    // TODO: it's duplicate from /components/Button/button.scss
+    input[type="text"] {
+      width: 294px;
+      padding: 0 30px 0 15px;
+      height: 36px;
+      border-radius: 4px 4px 0 0;
+      background-color: $input-bg;
+      color: $input-color;
+      border: none;
+      outline: none;
+      border-bottom: 1px solid $input-border-color;
+      transition: color 0.3s, border-radius 0.3s, border-bottom-color 0.3s,
+        background-color 0.3s;
+
+      &::placeholder {
+        @include Ib-H4-regular-italic;
+        color: $input-placeholder-color;
+      }
+
+      &:hover {
+        color: $input-hover-color;
+        background-color: $input-hover-bg;
+        border-bottom-color: $input-hover-border-color;
+
+        &::placeholder {
+          color: $input-hover-placeholder-color;
+        }
+      }
+
+      &:disabled {
+        color: $input-disabled-color;
+        background-color: $input-disabled-bg;
+        border-bottom-color: $input-disabled-border-color;
+
+        &::placeholder {
+          color: $input-disabled-placeholder-color;
+        }
+      }
+
+      &:focus {
+        border-radius: 4px;
+        border-color: transparent;
+        @include focus();
+      }
+    }
+  }
+}