fix: added z-index to mode help tooltip and z-index system (fixed lint)

dpolevodin · dpolevodin · commit de7a072c0e1d · 2025-01-13T18:21:22.000+06:00
diff --git a/src/bundle/settings/index.scss b/src/bundle/settings/index.scss
@@ -1,4 +1,5 @@
 @use '../../styles/mixins.scss';
+
 @import '~@gravity-ui/uikit/styles/mixins';
 
 .g-md-editor-settings {
@@ -14,11 +15,11 @@
     }
 
     &__separator {
-        @include mixins.z-index('default');
-
         margin: 6px 4px;
 
         border-left: 1px solid var(--g-color-line-generic);
+
+        @include mixins.z-index('default');
     }
 }
 
diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss
@@ -13,10 +13,10 @@ $block: 'g-md-editor-sticky';
     }
 
     &_sticky-active:not(.#{$block}_clear) {
-        @include mixins.z-index('sticky-toolbar');
-
         padding: var(--g-md-toolbar-sticky-padding);
 
+        @include mixins.z-index('sticky-toolbar');
+
         &::before {
             position: absolute;
             inset: var(--g-md-toolbar-sticky-inset, -4px);
diff --git a/src/extensions/additional/FoldingHeading/plugins/folding.scss b/src/extensions/additional/FoldingHeading/plugins/folding.scss
@@ -1,7 +1,6 @@
 @use 'node_modules/@gravity-ui/uikit/styles/mixins.scss' as uikit;
 @use '../../../../styles/mixins.scss';
 
-
 .pm-h-folding-hidden {
     display: none;
 }
@@ -14,8 +13,6 @@
     position: relative;
 
     &::before {
-        @include mixins.z-index('forefront');
-        
         position: absolute;
         bottom: -4px;
         left: 0;
@@ -30,11 +27,11 @@
         mask-size: 12px;
 
         transform: translateY(80%);
+
+        @include mixins.z-index('forefront');
     }
 
     &::after {
-        @include mixins.z-index('forefront');
-        
         position: absolute;
         bottom: -8px;
         left: 16px;
@@ -46,13 +43,13 @@
         content: '';
 
         border-top: 1px dashed var(--g-color-line-generic);
+
+        @include mixins.z-index('forefront');
     }
 }
 
 .pm-h-folding-label {
     &::after {
-        @include mixins.z-index('forefront');
-
         position: absolute;
         right: 2px;
         bottom: -6px;
@@ -70,5 +67,7 @@
         transform: translate(0, 50%);
 
         @include uikit.text-body-1();
+
+        @include mixins.z-index('forefront');
     }
 }
diff --git a/src/extensions/additional/Math/view-and-edit.scss b/src/extensions/additional/Math/view-and-edit.scss
@@ -47,8 +47,6 @@
     }
 
     &::before {
-        @include mixins.z-index('background');
-        
         position: absolute;
         inset: -2px;
 
@@ -58,6 +56,8 @@
         background-color: var(--g-md-math-back-color);
 
         transition: background-color 0.15s linear;
+
+        @include mixins.z-index('background');
     }
 
     &:hover {
diff --git a/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss b/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss
@@ -34,9 +34,9 @@
     }
 
     &__EditorPopover {
-        @include mixins.z-index('forefront');
-
         float: right;
+
+        @include mixins.z-index('forefront');
     }
 
     &__Controls {
diff --git a/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss b/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss
@@ -67,9 +67,9 @@
     }
 
     &__editor-popover {
-        @include mixins.z-index('forefront');
-
         float: right;
+
+        @include mixins.z-index('forefront');
     }
 
     &__controls {
diff --git a/src/extensions/behavior/Cursor/gapcursor.scss b/src/extensions/behavior/Cursor/gapcursor.scss
@@ -29,8 +29,6 @@
     }
 
     &::before {
-        @include mixins.z-index('forefront');
-
         position: relative;
 
         display: inline-block;
@@ -41,6 +39,8 @@
         caret-color: transparent;
 
         border-right: 1px solid transparent;
+
+        @include mixins.z-index('forefront');
     }
 
     .ProseMirror-focused &::before {
diff --git a/src/extensions/behavior/Placeholder/index.scss b/src/extensions/behavior/Placeholder/index.scss
@@ -29,8 +29,6 @@
 
     .ProseMirror-focused &_focus {
         .g-md-placeholder__cursor {
-            @include mixins.z-index('forefront');
-
             position: relative;
 
             margin-right: -1px;
@@ -40,6 +38,8 @@
 
             animation: placeholder_blink 1s;
             animation-iteration-count: infinite;
+
+            @include mixins.z-index('forefront');
         }
     }
 }
diff --git a/src/extensions/behavior/Resizable/Resizable.scss b/src/extensions/behavior/Resizable/Resizable.scss
@@ -9,8 +9,6 @@ body :has(.g-md-resizable_resizing) {
 
     &_resizing &__resizer-wrapper,
     &_hover &__resizer-wrapper {
-        @include mixins.z-index('forefront');
-        
         position: absolute;
         top: 0;
 
@@ -24,6 +22,8 @@ body :has(.g-md-resizable_resizing) {
         cursor: col-resize;
         pointer-events: auto;
 
+        @include mixins.z-index('forefront');
+
         &_left {
             left: 0;
         }
diff --git a/src/extensions/markdown/Code/code.scss b/src/extensions/markdown/Code/code.scss
@@ -19,8 +19,6 @@
 }
 
 .ProseMirror-focused .fake-cursor {
-    @include mixins.z-index('forefront');
-
     position: relative;
 
     margin-right: -1px;
@@ -30,4 +28,6 @@
 
     animation: code_fake_blink 1s;
     animation-iteration-count: infinite;
+
+    @include mixins.z-index('forefront');
 }
diff --git a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss
@@ -1,9 +1,9 @@
 @use '../../../../../styles/mixins.scss';
 
 .g-md-img-settings-button {
-    @include mixins.z-index('img-settings-button');
-
     position: absolute;
     top: 3px;
     right: 3px;
+
+    @include mixins.z-index('img-settings-button');
 }
diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss
@@ -43,8 +43,6 @@ $buttons-offset: 2px;
         transition: opacity 150ms ease 50ms;
 
         &_right {
-            @include mixins.z-index('table-view-button');
-
             position: absolute;
             top: 0;
             right: -$buttons-size - $buttons-offset;
@@ -54,11 +52,11 @@ $buttons-offset: 2px;
 
             width: $buttons-size;
             height: 100%;
-        }
 
-        &_bottom {
             @include mixins.z-index('table-view-button');
+        }
 
+        &_bottom {
             position: absolute;
             bottom: -$buttons-size - $buttons-offset;
 
@@ -67,6 +65,8 @@ $buttons-offset: 2px;
 
             width: 100%;
             height: $buttons-size;
+
+            @include mixins.z-index('table-view-button');
         }
     }
 
diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss
@@ -2,8 +2,6 @@
 
 .g-md-table-cell-view {
     &__left-button {
-        @include mixins.z-index('table-cell-button');
-
         position: absolute;
         top: calc(50% - 14px);
         left: -13px;
@@ -14,6 +12,8 @@
         border-radius: var(--g-border-radius-s);
         background: var(--g-color-base-background);
 
+        @include mixins.z-index('table-cell-button');
+
         &:hover {
             pointer-events: initial;
 
@@ -22,8 +22,6 @@
     }
 
     &__upper-button {
-        @include mixins.z-index('table-cell-button');
-
         position: absolute;
         top: -13px;
         left: calc(50% - 14px);
@@ -36,6 +34,8 @@
 
         transform: rotate(90deg);
 
+        @include mixins.z-index('table-cell-button');
+
         &:hover {
             pointer-events: initial;
 
diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss
@@ -1,11 +1,11 @@
 // z-index system values
 $z-index-map: (
-    "background": -1,
-    "default": 0,
-    "forefront": 1,
-    "img-settings-button": 2,
-    "table-view-button": 100,
-    "table-cell-button": 110,
-    "sticky-toolbar": 2000,
-    "tooltip": 2100,
+    'background': -1,
+    'default': 0,
+    'forefront': 1,
+    'img-settings-button': 2,
+    'table-view-button': 100,
+    'table-cell-button': 110,
+    'sticky-toolbar': 2000,
+    'tooltip': 2100,
 );
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -10,7 +10,7 @@
 }
 
 // Getting z-index value by key
+
 @mixin z-index($key) {
     z-index: map-get(zIndexVariables.$z-index-map, $key);
 }
-

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@use '../../styles/mixins.scss';`
	`2`	`+`
`2`	`3`	`@import '~@gravity-ui/uikit/styles/mixins';`
`3`	`4`
`4`	`5`	`.g-md-editor-settings {`
`@@ -14,11 +15,11 @@`
`14`	`15`	`}`
`15`	`16`
`16`	`17`	`&__separator {`
`17`		`- @include mixins.z-index('default');`
`18`		`-`
`19`	`18`	`margin: 6px 4px;`
`20`	`19`
`21`	`20`	`border-left: 1px solid var(--g-color-line-generic);`
	`21`	`+`
	`22`	`+ @include mixins.z-index('default');`
`22`	`23`	`}`
`23`	`24`	`}`
`24`	`25`
Original file line number	Diff line number	Diff line change
`@@ -47,8 +47,6 @@`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`&::before {`
`50`		`- @include mixins.z-index('background');`
`51`		`-`
`52`	`50`	`position: absolute;`
`53`	`51`	`inset: -2px;`
`54`	`52`
`@@ -58,6 +56,8 @@`
`58`	`56`	`background-color: var(--g-md-math-back-color);`
`59`	`57`
`60`	`58`	`transition: background-color 0.15s linear;`
	`59`	`+`
	`60`	`+ @include mixins.z-index('background');`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`&:hover {`
Original file line number	Diff line number	Diff line change
`@@ -34,9 +34,9 @@`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`&__EditorPopover {`
`37`		`- @include mixins.z-index('forefront');`
`38`		`-`
`39`	`37`	`float: right;`
	`38`	`+`
	`39`	`+ @include mixins.z-index('forefront');`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`&__Controls {`
Original file line number	Diff line number	Diff line change
`@@ -67,9 +67,9 @@`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`&__editor-popover {`
`70`		`- @include mixins.z-index('forefront');`
`71`		`-`
`72`	`70`	`float: right;`
	`71`	`+`
	`72`	`+ @include mixins.z-index('forefront');`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`&__controls {`
Original file line number	Diff line number	Diff line change
`@@ -29,8 +29,6 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`&::before {`
`32`		`- @include mixins.z-index('forefront');`
`33`		`-`
`34`	`32`	`position: relative;`
`35`	`33`
`36`	`34`	`display: inline-block;`
`@@ -41,6 +39,8 @@`
`41`	`39`	`caret-color: transparent;`
`42`	`40`
`43`	`41`	`border-right: 1px solid transparent;`
	`42`	`+`
	`43`	`+ @include mixins.z-index('forefront');`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`.ProseMirror-focused &::before {`
Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,6 @@`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.ProseMirror-focused .fake-cursor {`
`22`		`- @include mixins.z-index('forefront');`
`23`		`-`
`24`	`22`	`position: relative;`
`25`	`23`
`26`	`24`	`margin-right: -1px;`
`@@ -30,4 +28,6 @@`
`30`	`28`
`31`	`29`	`animation: code_fake_blink 1s;`
`32`	`30`	`animation-iteration-count: infinite;`
	`31`	`+`
	`32`	`+ @include mixins.z-index('forefront');`
`33`	`33`	`}`