Skip to content

Commit

Permalink
Reduce paragraph block CSS specificity (#13025)
Browse files Browse the repository at this point in the history
* move dropcap focus to editor.css. Show hint of DC on focus

* Move dropcap focus to editor.css. Reduce specificity

* Easing up on paragraph block specificity.
  • Loading branch information
m-e-h authored and kjellr committed Feb 11, 2019
1 parent ae4067f commit a4412e6
Showing 1 changed file with 32 additions and 34 deletions.
66 changes: 32 additions & 34 deletions packages/block-library/src/paragraph/style.scss
Original file line number Diff line number Diff line change
@@ -1,46 +1,44 @@
p {
&.is-small-text {
font-size: 14px;
}
.is-small-text {
font-size: 14px;
}

&.is-regular-text {
font-size: 16px;
}
.is-regular-text {
font-size: 16px;
}

&.is-large-text {
font-size: 36px;
}
.is-large-text {
font-size: 36px;
}

&.is-larger-text {
font-size: 48px;
}
.is-larger-text {
font-size: 48px;
}

// Don't show the drop cap when editing the paragraph's content. It causes a
// number of bugs in combination with `contenteditable` fields. The caret
// cannot be set around it, caret position calculation fails in Chrome, and
// typing at the end of the paragraph doesn't work.
&.has-drop-cap:not(:focus)::first-letter {
float: left;
font-size: 8.4em;
line-height: 0.68;
font-weight: 100;
margin: 0.05em 0.1em 0 0;
text-transform: uppercase;
font-style: normal;
}
// Don't show the drop cap when editing the paragraph's content. It causes a
// number of bugs in combination with `contenteditable` fields. The caret
// cannot be set around it, caret position calculation fails in Chrome, and
// typing at the end of the paragraph doesn't work.
.has-drop-cap:not(:focus)::first-letter {
float: left;
font-size: 8.4em;
line-height: 0.68;
font-weight: 100;
margin: 0.05em 0.1em 0 0;
text-transform: uppercase;
font-style: normal;
}

&.has-drop-cap:not(:focus)::after {
content: "";
display: table;
clear: both;
padding-top: $block-padding;
}
.has-drop-cap:not(:focus)::after {
content: "";
display: table;
clear: both;
padding-top: $block-padding;
}

p.has-background {
.has-background {
padding: 20px 30px;
}

p.has-text-color a {
.has-text-color a {
color: inherit;
}

0 comments on commit a4412e6

Please sign in to comment.