@ldmjs/ui 1.0.89 → 2.0.0-beta.0

package/dist/scss/_editor.scss

@@ -0,0 +1,146 @@
+body {
+  .ld-editor {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    #toolbar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      border: none !important;
+      background-color: rgba(255, 255, 255, 1);
+      padding: 12px 0 8px 0;
+      z-index: 1;
+
+      button[type="button"] {
+        width: 32px;
+        height: 32px;
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      & + div {
+        border: none !important;
+        padding: 52px 0 0 0;
+      }
+    }
+
+    .ql-toolbar {
+      .ql-fill {
+        fill: var(--grey-d-3);
+      }
+      .ql-stroke {
+        stroke: var(--grey-d-3);
+      }
+      .ql-picker-options {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      button.sep {
+        width: 14px;
+        height: var(--button-xs);
+        color: var(--grey-l-4);
+        font-size: var(--text-body-s);
+        &:hover {
+          background-color: transparent !important;
+          cursor: default;
+        }
+      }
+
+      button[type="button"] {
+        width: var(--button-xs);
+        height: var(--button-xs);
+        border: 2px solid transparent;
+        border-radius: var(--border-radius);
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+
+        &.ql-active {
+          border-color: var(--focus);
+          background: none !important;
+          color: var(--text) !important;
+
+          .ql-fill {
+            fill: var(--text);
+          }
+          .ql-stroke {
+            stroke: var(--text);
+          }
+        }
+      }
+
+      .ql-color-picker {
+        width: var(--button-xs);
+        height: var(--button-xs);
+
+        .ql-picker-label {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 8px;
+          padding: 0;
+
+          svg {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+
+      .ql-font,
+      .ql-size {
+        display: flex;
+        align-items: center;
+        height: var(--button-xs);
+        border: 2px solid transparent;
+        border-radius: var(--border-radius);
+
+        .ql-picker-label {
+          height: 20px;
+          border: none !important;
+          background: none;
+
+          &:hover {
+            background: none;
+          }
+
+          &.ql-active {
+            color: var(--text);
+
+            .ql-stroke {
+              stroke: var(--text);
+            }
+          }
+        }
+
+        &.ql-expanded {
+          border-color: var(--focus);
+        }
+      }
+
+      .ql-font {
+        width: 240px !important;
+      }
+      .ql-size {
+        width: 135px !important;
+      }
+    }
+
+    .ql-editor {
+      border: 1px solid var(--grey-l-4);
+      border-radius: var(--border-radius);
+      background-color: rgba(255, 255, 255, 1);
+      padding: 12px 16px !important;
+    }
+  }
+}
+

package/dist/scss/_fonts.scss

@@ -11,3 +11,118 @@
 @font-face {
   @include mix-font-face('Roboto', Roboto-Regular);
 }
+
+@font-face {
+  @include mix-font-face('Roboto Medium', Roboto-Medium);
+}
+
+@font-face {
+  @include mix-font-face('Roboto Semi Bold', Roboto-SemiBold);
+}
+
+$font-size: 12px !default; // основной шрифт приложения
+
+$regular: "Roboto Regular", Arial, Helvetica, sans-serif;
+$semibold: "Roboto Semi Bold", Arial, Helvetica, sans-serif;
+$medium: "Roboto Medium", Arial, Helvetica, sans-serif;
+
+:root {
+  --font-size: #{$font-size}; // 12px
+  --caption-xs: calc(#{$font-size} - 4px); // 8px
+  --caption-s: calc(#{$font-size} - 2px); // 10px
+  --caption: #{#{$font-size}}; // 12px
+  --text-body: #{$font-size}; // 12px
+  --text-body-s: calc(#{$font-size} + 2px); // 14px
+  --text-body-m: calc(#{$font-size} + 4px); // 16px
+  --text-body-l: calc(#{$font-size} + 6px); // 18px
+  --text-body-x: calc(#{$font-size} + 8px); // 20px
+  --heading-6: calc(#{$font-size} + 10px); // 22px
+  --heading-5: calc(#{$font-size} * 2); // 24px
+  --heading-4: calc(#{$font-size} * 2 + 10px); // 34px
+  --heading-3: calc(#{$font-size} * 3 + 2px); // 38px
+  --heading-2: calc(#{$font-size} * 4 - 4px); // 44px
+  --heading-1: calc(#{$font-size} * 4 + 2px); // 50px
+  --regular: #{$regular};
+  --semibold: #{$semibold};
+  --medium: #{$medium};
+}
+
+html,
+body {
+  font-size: var(--font-size);
+}
+
+body {
+  h1,
+  .heading-1 {
+    font-size: var(--heading-1);
+    line-height: 56px;
+  }
+
+  h2,
+  .heading-2 {
+    font-size: var(--heading-2);
+    line-height: 52px;
+  }
+
+  h3,
+  .heading-3 {
+    font-size: var(--heading-3);
+    line-height: 48px;
+  }
+
+  h4,
+  .heading-4 {
+    font-size: var(--heading-4);
+    line-height: 44px;
+  }
+
+  h5,
+  .heading-5 {
+    font-size: var(--heading-5);
+    line-height: 36px;
+  }
+
+  h6,
+  .heading-6 {
+    font-size: var(--heading-6);
+    line-height: 32px;
+  }
+
+  .caption-s {
+    font-size: var(--caption-s);
+    line-height: 14px;
+  }
+
+  .caption {
+    font-size: var(--caption);
+    line-height: 16px;
+  }
+
+  .text-body {
+    font-size: var(--text-body);
+  }
+
+  .text-body-s {
+    font-size: var(--text-body-s);
+  }
+
+  .text-body-m {
+    font-size: var(--text-body-m);
+  }
+
+  .text-body-l {
+    font-size: var(--text-body-l);
+  }
+
+  .text-body-x {
+    font-size: var(--text-body-x);
+  }
+
+  .text-ellipsis {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}