Skip to content

Commit

Permalink
Update separator styles
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed May 23, 2024
1 parent ddc2602 commit 2f70fdd
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 31 deletions.
7 changes: 0 additions & 7 deletions packages/block-library/src/separator/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,4 @@
// Prevent margin collapsing so the area to select the separator is bigger.
padding-top: 0.1px;
padding-bottom: 0.1px;

// This is also set in style.scss, but needs a higher specificity in editor
// due to the way that color block supports adds additional background color styles.
&.wp-block-separator.is-style-dots {
background: none !important;
border: none;
}
}
45 changes: 21 additions & 24 deletions packages/block-library/src/separator/style.scss
Original file line number Diff line number Diff line change
@@ -1,28 +1,4 @@
.wp-block-separator {
// Dots style
&.is-style-dots {
// Override any background themes often set on the hr tag for this style.
// also override the color set in the editor since it's intented for normal HR
background: none !important;
border: none;
text-align: center;
line-height: 1;
height: auto;

&::before {
content: "\00b7 \00b7 \00b7";
color: currentColor;
font-size: 1.5em;
letter-spacing: 2em;
/*rtl:ignore*/
padding-left: 2em;
font-family: serif;
}
}
}

// Lowest specificity to avoid overriding global styles.
:where(.wp-block-separator) {
border-top: 2px solid currentColor;
// Default, thin style, is stored in theme.scss so it can be opted out of

Expand All @@ -31,3 +7,24 @@
border-right: none;
border-bottom: none;
}

// Dots block style variation
:root :where(.wp-block-separator.is-style-dots) {
// Override any background themes often set on the hr tag for this style.
// also override the color set in the editor since it's intended for normal HR
background: none !important;
border: none;
text-align: center;
line-height: 1;
height: auto;

&::before {
content: "\00b7 \00b7 \00b7";
color: currentColor;
font-size: 1.5em;
letter-spacing: 2em;
/*rtl:ignore*/
padding-left: 2em;
font-family: serif;
}
}

0 comments on commit 2f70fdd

Please sign in to comment.