From 8f799b0ff4a324ca9b5a22876fad89ab86875793 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Tue, 30 Jul 2024 12:03:33 +0300
Subject: [PATCH] update styles

---
 src/runtime/styles/_editor.scss | 44 +++++++++++++++++
 src/runtime/styles/_mixins.scss | 84 +++++++++++++++++++++++++++++++++
 src/runtime/styles/index.scss   | 56 +++++++++++++++-------
 3 files changed, 166 insertions(+), 18 deletions(-)
 create mode 100644 src/runtime/styles/_editor.scss
 create mode 100644 src/runtime/styles/_mixins.scss

diff --git a/src/runtime/styles/_editor.scss b/src/runtime/styles/_editor.scss
new file mode 100644
index 0000000..0b41238
--- /dev/null
+++ b/src/runtime/styles/_editor.scss
@@ -0,0 +1,44 @@
+// this styles for folding headings in markdown editor
+
+@use './mixins' as m;
+
+.yfm {
+    h1[data-folded],
+    h2[data-folded],
+    h3[data-folded],
+    h4[data-folded],
+    h5[data-folded],
+    h6[data-folded] {
+        @include m.chevron();
+    }
+
+    h1[data-folded] {
+        @include m.chevron_size_xl();
+    }
+
+    h2[data-folded],
+    h3[data-folded] {
+        @include m.chevron_size_l();
+    }
+
+    h4[data-folded] {
+        @include m.chevron_size_m();
+    }
+
+    h5[data-folded] {
+        @include m.chevron_size_s();
+    }
+
+    h6[data-folded] {
+        @include m.chevron_size_xs();
+    }
+
+    h1[data-folded=false],
+    h2[data-folded=false],
+    h3[data-folded=false],
+    h4[data-folded=false],
+    h5[data-folded=false],
+    h6[data-folded=false] {
+        @include m.chevron_open();
+    }
+}
diff --git a/src/runtime/styles/_mixins.scss b/src/runtime/styles/_mixins.scss
new file mode 100644
index 0000000..7c6d677
--- /dev/null
+++ b/src/runtime/styles/_mixins.scss
@@ -0,0 +1,84 @@
+$chevronIcon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.97 5.47a.75.75 0 0 1 1.06 0L8 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/></svg>');
+
+@mixin chevron() {
+    position: relative;
+
+    padding-left: 28px;
+
+    &::before {
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 0;
+
+        content: '';
+        cursor: pointer;
+
+        background-color: currentColor;
+        mask-image: $chevronIcon;
+        mask-repeat: no-repeat;
+        mask-position: center;
+
+        transition: transform 0.3s ease;
+        transform: translateY(-50%) rotate(-90deg);
+    }
+}
+
+@mixin chevron_size_xs() {
+    &::before {
+        left: 8px;
+
+        width: 20px;
+        height: 20px;
+
+        mask-size: 12px;
+    }
+}
+
+@mixin chevron_size_s() {
+    &::before {
+        left: 8px;
+
+        width: 20px;
+        height: 20px;
+
+        mask-size: 14px;
+    }
+}
+
+@mixin chevron_size_m() {
+    &::before {
+        left: 6px;
+
+        width: 20px;
+        height: 20px;
+
+        mask-size: 16px;
+    }
+}
+
+@mixin chevron_size_l() {
+    &::before {
+        left: 2px;
+
+        width: 24px;
+        height: 24px;
+
+        mask-size: 20px;
+    }
+}
+
+@mixin chevron_size_xl() {
+    &::before {
+        width: 28px;
+        height: 28px;
+
+        mask-size: 20px;
+    }
+}
+
+@mixin chevron_open() {
+    &::before {
+        transform: translateY(-50%);
+    }
+}
diff --git a/src/runtime/styles/index.scss b/src/runtime/styles/index.scss
index 1d1c113..4a7266e 100644
--- a/src/runtime/styles/index.scss
+++ b/src/runtime/styles/index.scss
@@ -1,10 +1,21 @@
+@use './mixins' as m;
+@use './editor';
+
+$paddingLeft: 28px;
+$yfmAnchorWidth: 24px;
+
 .heading-section {
     $class: &;
 
     &-content {
         display: none;
+        padding-left: $paddingLeft;
         overflow: hidden;
         transition: height 0.3s ease-in-out;
+
+        & > #{$class} {
+            margin-left: -#{$paddingLeft};
+        }
     }
 
     > h1,
@@ -14,24 +25,35 @@
     > h5,
     > h6 {
         cursor: pointer;
-        position: relative;
-
-        padding-left: 20px;
-
-        &:before {
-            content: '';
-            z-index: 1;
-            left: 0;
-            top: 50%;
-            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMgNmw1IDUgNS01Ii8+Cjwvc3ZnPgo=');
-            transform: translateY(-50%) rotate(-90deg);
-            transition: transform 0.3s ease;
-            height: 20px;
-            width: 20px;
-            position: absolute;
+
+        @include m.chevron();
+
+        .yfm-anchor {
+            margin-left: -#{$yfmAnchorWidth + $paddingLeft}; // width of yfm-anchor (24px) + padding of heading (28px)
         }
     }
 
+    > h1 {
+        @include m.chevron_size_xl();
+    }
+
+    > h2,
+    > h3 {
+        @include m.chevron_size_l();
+    }
+
+    > h4 {
+        @include m.chevron_size_m();
+    }
+
+    > h5 {
+        @include m.chevron_size_s();
+    }
+
+    > h6 {
+        @include m.chevron_size_xs();
+    }
+
     &.open {
         > #{$class}-content {
             display: revert;
@@ -43,9 +65,7 @@
         > h4,
         > h5,
         > h6 {
-            &:before {
-                transform: translateY(-50%);
-            }
+            @include m.chevron_open();
         }
     }
 }