diff --git a/src/extensions/additional/FoldingHeading/plugins/folding.scss b/src/extensions/additional/FoldingHeading/plugins/folding.scss index b48604fe9..81f720362 100644 --- a/src/extensions/additional/FoldingHeading/plugins/folding.scss +++ b/src/extensions/additional/FoldingHeading/plugins/folding.scss @@ -1,69 +1,73 @@ @use '~@gravity-ui/uikit/styles/mixins' as uikit; -.pm-h-folding-hidden { - display: none; -} +.ProseMirror, +.yfm.ProseMirror { + .pm-h-folding-hidden { + display: none; + } -.pm-h-folding-content { - padding-left: 28px; -} + .pm-h-folding-content { + padding-left: 28px; + } -.pm-h-folding-separator { - position: relative; + .pm-h-folding-separator { + position: relative; - &::before { - position: absolute; - z-index: 1; - bottom: -4px; - left: 0; + &::before { + position: absolute; + z-index: 1; + bottom: -4px; + left: 0; - width: 12px; - height: 12px; + width: 12px; + height: 12px; - content: ''; + content: ''; - background-color: var(--g-color-text-secondary); - mask-image: url('data:image/svg+xml;svg,'); - mask-size: 12px; + background-color: var(--g-color-text-secondary); + mask-image: url('data:image/svg+xml;svg,'); + mask-size: 12px; - transform: translateY(80%); - } + transform: translateY(80%); + } - &::after { - position: absolute; - z-index: 1; - bottom: -8px; - left: 16px; + &::after { + position: absolute; + z-index: 1; + bottom: -8px; + left: 16px; - display: block; + display: block; - width: calc(100% - 16px - 56px - 6px); // left icon + right label + right offset of label + // left icon + right label + right offset of label + width: calc(100% - 16px - 56px - 6px); - content: ''; + content: ''; - border-top: 1px dashed var(--g-color-line-generic); + border-top: 1px dashed var(--g-color-line-generic); + } } -} -.pm-h-folding-label { - &::after { - position: absolute; - z-index: 1; - right: 2px; - bottom: -6px; + .pm-h-folding-label { + &::after { + position: absolute; + z-index: 1; + right: 2px; + bottom: -6px; - display: block; + display: block; - padding: 0 8px; + padding: 0 8px; - content: attr(data-value); + content: attr(data-value); - color: var(--g-color-text-misc); - border-radius: 4px; - background-color: var(--g-color-base-misc-medium-hover); + color: var(--g-color-text-misc); + border-radius: 4px; + background-color: var(--g-color-base-misc-medium-hover); - transform: translate(0, 50%); + transform: translate(0, 50%); - @include uikit.text-body-1(); + @include uikit.text-body-1(); + } } }