PluginProbe
Block Animations, Motion & Scroll Effects – Ghost Kit / 3.3.2
Block Animations, Motion & Scroll Effects – Ghost Kit v3.3.2
3.7.2 3.7.1 3.7.0 3.6.1 trunk 1.6.3 2.25.0 3.3.0 3.3.1 3.3.2 3.3.3 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.6 3.5.0 3.5.1 3.6.0
ghostkit / gutenberg / style-variants / core-heading / editor.scss

editor.scss in Block Animations, Motion & Scroll Effects – Ghost Kit 3.3.2, at gutenberg/style-variants/core-heading/editor.scss

68 lines 1.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Editor Styles
3 */
4 @import "./variables";
5
6 @mixin printHeadingNumbered($level) {
7 $selector: "";
8 $content: "";
9
10 h#{$level}.is-style-numbered {
11 @if $level + 1 <= 6 {
12 counter-reset: h#{$level + 1};
13 }
14
15 counter-increment: h#{$level};
16 }
17
18 @for $i from $level through 2 {
19 @if $selector != "" {
20 $selector: " ~ " + $selector;
21 }
22 @if $content != "" {
23 $content: " \".\" " + $content;
24 }
25
26 $selector: "h#{$i}.is-style-numbered" + $selector;
27 $content: "counter(h#{$i})" + $content;
28
29 #{$selector}::before {
30 content: #{$content};
31 }
32 }
33 }
34
35 .editor-styles-wrapper {
36 .is-style-numbered::before {
37 margin: 0;
38 margin-right: var(--gkt-numbered-headings__margin-right);
39 }
40
41 // Styled h2
42 h2.is-style-numbered::before {
43 display: inline-flex;
44 align-items: center;
45 justify-content: center;
46 width: var(--gkt-numbered-headings--h2-number__width);
47 height: var(--gkt-numbered-headings--h2-number__height);
48 line-height: var(--gkt-numbered-headings--h2-number__line-height);
49 color: var(--gkt-numbered-headings--h2-number__color);
50 background-color: var(--gkt-numbered-headings--h2-number__background-color);
51 border-radius: var(--gkt-numbered-headings--h2-number__border-radius);
52 }
53
54 counter-reset: h2;
55
56 // Add numbers
57 @include printHeadingNumbered(2);
58 @include printHeadingNumbered(3);
59 @include printHeadingNumbered(4);
60 @include printHeadingNumbered(5);
61 @include printHeadingNumbered(6);
62
63 // Numbers for Styles selector preview
64 .editor-block-styles__item & .is-style-numbered::before {
65 content: "1";
66 }
67 }
68