feat: add css-api - fix comment about imports

diplodoc-platform · Sep 23, 2024 · 4a8c549 · 4a8c549
1 parent a0f80c9
commit 4a8c549
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 64 deletions.
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
@@ -1,4 +1,5 @@
 /* stylelint-disable declaration-no-important */
+
 @import 'private';
 @import 'brand';
 
@@ -34,7 +35,12 @@
         margin-bottom: 0 !important;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         margin-bottom: 15px;
         font-weight: 500;
     }
@@ -74,31 +80,32 @@
         color: var(--yfm-color-link);
         text-decoration: none;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
             color: var(--yfm-color-link-hover);
         }
 
         &:not([href]) {
             color: inherit;
         }
-
     }
 
     strong {
         font-weight: 700;
     }
 
-    img, svg {
+    img,
+    svg {
         box-sizing: content-box;
         max-width: 100%;
         border: none;
         vertical-align: middle;
 
-        &[align=right] {
+        &[align='right'] {
             padding-left: 20px;
         }
 
-        &[align=left] {
+        &[align='left'] {
             padding-right: 20px;
         }
     }
@@ -127,10 +134,12 @@
     dl,
     table,
     pre {
-        margin: 0 0 15px 0;
+        margin: 0 0 15px;
     }
 
-    ul, ol, dl {
+    ul,
+    ol,
+    dl {
         & pre {
             margin-top: 15px;
         }
@@ -178,24 +187,27 @@
         border-spacing: 0;
         background: var(--yfm-color-base);
 
-        thead, tr:nth-child(2n) {
+        thead,
+        tr:nth-child(2n) {
             background-color: var(--yfm-color-table-row-background);
         }
 
         tr:first-child {
-            td, th {
+            td,
+            th {
                 border-top: none;
             }
         }
 
         tr:last-child {
-            td, th {
+            td,
+            th {
                 border-bottom: none;
             }
         }
 
-
-        th, td {
+        th,
+        td {
             padding: 10px 20px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -214,10 +226,12 @@
             text-align: left;
         }
 
-        tr td:first-child, tr th:first-child {
+        tr td:first-child,
+        tr th:first-child {
             border-left: none;
         }
-        tr td:last-child, tr th:last-child {
+        tr td:last-child,
+        tr th:last-child {
             border-right: none;
         }
     }
@@ -280,7 +294,8 @@
         }
     }
 
-    ul, ol {
+    ul,
+    ol {
         padding-left: 2.2em;
     }
 
@@ -363,7 +378,8 @@
         white-space: pre;
     }
 
-    sup, sub {
+    sup,
+    sub {
         line-height: 0;
     }
 
@@ -393,6 +409,8 @@
         user-select: none;
     }
 
-    --yfm-font-family-monospace: "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace;
-    --yfm-font-family-sans: 'Segoe UI', Arial, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --yfm-font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono',
+        'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
+    --yfm-font-family-sans: 'Segoe UI', arial, helvetica, sans-serif, 'Apple Color Emoji',
+        'Segoe UI Emoji', 'Segoe UI Symbol';
 }
diff --git a/src/scss/_cut.scss b/src/scss/_cut.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm-cut {
-    @include private-brand();
-    @include brand();
-
     $class: &;
     margin-bottom: 15px;
 

diff --git a/src/scss/_file.scss b/src/scss/_file.scss
@@ -1,6 +1,3 @@
-@import 'private';
-@import 'brand';
-
 $defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg==');
 
 /**
@@ -10,9 +7,6 @@ $defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 */
 
 .yfm-file {
-    @include private-brand();
-    @include brand();
-
     &__icon {
         ---yfm-file-icon-img: var(--yfm-file-icon, #{$defaultIcon});
 

diff --git a/src/scss/_highlight.scss b/src/scss/_highlight.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm {
-    @include private-brand();
-    @include brand();
-
     .hljs {
         display: block;
         overflow-x: auto;
@@ -21,7 +15,6 @@
         color: var(--yfm-color-hljs-comment);
     }
 
-
     .hljs-keyword,
     .hljs-attribute,
     .hljs-selector-tag,
@@ -58,7 +51,6 @@
         color: var(--yfm-color-hljs-pseudo);
     }
 
-
     .hljs-literal {
         color: var(--yfm-color-hljs-literal);
     }
@@ -70,7 +62,6 @@
         color: var(--yfm-color-hljs-addition);
     }
 
-
     .hljs-meta {
         color: var(--yfm-color-hljs-meta);
     }
@@ -79,7 +70,6 @@
         color: var(--yfm-color-hljs-meta-string);
     }
 
-
     .hljs-emphasis {
         font-style: italic;
     }

diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
@@ -1,12 +1,6 @@
 /* stylelint-disable declaration-no-important */
 
-@import 'private';
-@import 'brand';
-
 .wide-container {
-    @include private-brand();
-    @include brand();
-
     position: fixed;
     width: 100vw;
     height: 100vh;

diff --git a/src/scss/_note.scss b/src/scss/_note.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm .yfm-note {
-    @include private-brand();
-    @include brand();
-
     max-width: 1296px;
     margin: 20px 0;
     padding: 20px 20px 20px 64px;
@@ -15,7 +9,7 @@
     }
 
     & > p {
-        margin: 0 0 10px 0;
+        margin: 0 0 10px;
 
         &:first-child {
             &::before {

diff --git a/src/scss/_term.scss b/src/scss/_term.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm-term {
-    @include private-brand();
-    @include brand();
-
     &_title {
         color: var(--yfm-color-term-title);
         cursor: pointer;
@@ -53,10 +47,7 @@
             content: '';
             position: absolute;
             z-index: -1;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset: 0;
 
             border-radius: inherit;
             box-shadow: 0 0 0 1px var(--yfm-color-term-dfn-pseudo-shadow);