mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-21 10:33:44 +03:00
More blocks styles moved to the appropriate object/utilities folders
Simplifies pullquote and fixes the issues with editor styles; move color classes utilities.
This commit is contained in:
Kelly Dwan
parent
e6b3fbd989
commit
f8558fe9c2
|
|
@ -1,14 +1,4 @@
|
||||||
body.page-about .entry-content {
|
body.page-about .entry-content {
|
||||||
.wp-block-pullquote.is-style-solid-color {
|
|
||||||
@extend .has-wporg-blue-background-color;
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
@extend .has-wporg-white-color;
|
|
||||||
|
|
||||||
max-width: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint( $breakpoint-tablet ) {
|
@include breakpoint( $breakpoint-tablet ) {
|
||||||
> p,
|
> p,
|
||||||
|
|
@ -29,21 +19,10 @@ body.page-about .entry-content {
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-block-pullquote.is-style-solid-color {
|
.wp-block-pullquote.is-style-solid-color {
|
||||||
@extend .is-style-default !optional;
|
|
||||||
//@extend .has-wporg-white-background-color; // todo compile error
|
|
||||||
background-color: white !important; // todo why does this need !important? it shouldn't
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 800px;
|
top: 800px;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
|
|
||||||
blockquote {
|
|
||||||
color: $color__text-heading !important; // todo why does this need !important?
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// todo works in front end, but need it in editor-styles too. maybe b/c targeting body.page-about?
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,38 +6,8 @@
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: $color__text-heading-darker;
|
color: $color__text-heading-darker;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-block-pullquote {
|
|
||||||
color: $color__text-heading;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// todo move better location?
|
|
||||||
.has-wporg-blue-color {
|
|
||||||
color: $color__wporg-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-blue-background-color {
|
|
||||||
background-color: $color__wporg-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-purple-color {
|
|
||||||
color: $color__wporg-purple;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-purple-background-color {
|
|
||||||
background-color: $color__wporg-purple;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-white-color {
|
|
||||||
color: $color__text-over-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-white-background-color {
|
|
||||||
background-color: $color__text-over-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
p.has-background,
|
p.has-background,
|
||||||
.wp-block-group.has-background,
|
.wp-block-group.has-background,
|
||||||
.wp-block-pullquote.has-wporg-blue-background-color {
|
.wp-block-pullquote.has-wporg-blue-background-color {
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,5 @@
|
||||||
@import "../../../pub/wporg/css/objects/notices";
|
@import "../../../pub/wporg/css/objects/notices";
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
@import "image";
|
@import "image";
|
||||||
|
@import "pullquote";
|
||||||
@import "site-header";
|
@import "site-header";
|
||||||
|
|
|
||||||
3
themes/wporg-5ftf/css/objects/_pullquote.scss
Normal file
3
themes/wporg-5ftf/css/objects/_pullquote.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.wp-block-pullquote {
|
||||||
|
color: $color__text-heading;
|
||||||
|
}
|
||||||
|
|
@ -2,88 +2,6 @@
|
||||||
* Add content area styles to the editor (in addition to the front end), so that users see content the way it will
|
* Add content area styles to the editor (in addition to the front end), so that users see content the way it will
|
||||||
* appear on the front end.
|
* appear on the front end.
|
||||||
*/
|
*/
|
||||||
.entry-content {
|
|
||||||
position: relative;
|
|
||||||
color: #555D66;
|
|
||||||
hyphens: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
|
|
||||||
color: #23282D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-content .wp-block-pullquote {
|
|
||||||
color: #606A73;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-blue-color {
|
|
||||||
color: #1E8CBE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-blue-background-color, body.page-about .entry-content .wp-block-pullquote.is-style-solid-color {
|
|
||||||
background-color: #1E8CBE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-purple-color {
|
|
||||||
color: #826EB4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-purple-background-color {
|
|
||||||
background-color: #826EB4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-white-color, body.page-about .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-wporg-white-background-color {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.has-background,
|
|
||||||
.wp-block-group.has-background,
|
|
||||||
.wp-block-pullquote.has-wporg-blue-background-color,
|
|
||||||
body.page-about .entry-content .wp-block-pullquote.is-style-solid-color {
|
|
||||||
/*
|
|
||||||
* Remove the gaps between consecutive paragraphs that have the same background color, and make it fill 100%
|
|
||||||
* of the screen on the mobile view.
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
body.page-about .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
|
|
||||||
max-width: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
body.page-about .entry-content > p,
|
|
||||||
body.page-about .entry-content > h1,
|
|
||||||
body.page-about .entry-content > h2,
|
|
||||||
body.page-about .entry-content > h3,
|
|
||||||
body.page-about .entry-content > h4,
|
|
||||||
body.page-about .entry-content > h5,
|
|
||||||
body.page-about .entry-content > h6,
|
|
||||||
body.page-about .entry-content > .wp-block-quote,
|
|
||||||
body.page-about .entry-content > .wp-block-media-text,
|
|
||||||
body.page-about .entry-content > .wp-block-button {
|
|
||||||
margin-left: 40%;
|
|
||||||
}
|
|
||||||
body.page-about .entry-content p.is-style-wporg-tldr {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
body.page-about .entry-content .wp-block-pullquote.is-style-solid-color {
|
|
||||||
background-color: white !important;
|
|
||||||
position: absolute;
|
|
||||||
top: 800px;
|
|
||||||
left: 0;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
body.page-about .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
|
|
||||||
color: #606A73 !important;
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
1.0 - Button Layouts
|
1.0 - Button Layouts
|
||||||
---------------------------------------------------------------------------- */
|
---------------------------------------------------------------------------- */
|
||||||
|
|
@ -500,6 +418,34 @@ input.download-button.button-hero:active[type="submit"],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wp-block-pullquote {
|
||||||
|
color: #606A73;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-blue-color {
|
||||||
|
color: #1E8CBE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-blue-background-color {
|
||||||
|
background-color: #1E8CBE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-purple-color {
|
||||||
|
color: #826EB4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-purple-background-color {
|
||||||
|
background-color: #826EB4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-white-color {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-white-background-color {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
.parallelogram-container {
|
.parallelogram-container {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
|
|
@ -573,4 +519,24 @@ p.is-style-wporg-tldr {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wp-block-pullquote.is-style-solid-color {
|
||||||
|
background-color: #1E8CBE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-pullquote.is-style-solid-color blockquote {
|
||||||
|
max-width: 100%;
|
||||||
|
border: none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.wp-block-pullquote.is-style-solid-color {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.wp-block-pullquote.is-style-solid-color blockquote {
|
||||||
|
border-left: none;
|
||||||
|
color: #606A73;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style-editor.css.map */
|
/*# sourceMappingURL=style-editor.css.map */
|
||||||
|
|
@ -8,12 +8,11 @@
|
||||||
@import "../../pub/wporg/css/settings/structure";
|
@import "../../pub/wporg/css/settings/structure";
|
||||||
@import "settings/structure";
|
@import "settings/structure";
|
||||||
@import "../../pub/wporg/css/tools/breakpoint";
|
@import "../../pub/wporg/css/tools/breakpoint";
|
||||||
@import "components/entry-content";
|
|
||||||
@import "components/about";
|
|
||||||
@import "../../pub/wporg/css/settings/_modular-scale.scss";
|
@import "../../pub/wporg/css/settings/_modular-scale.scss";
|
||||||
@import "../../pub/wporg/css/objects/buttons";
|
@import "../../pub/wporg/css/objects/buttons";
|
||||||
@import "objects/buttons";
|
@import "objects/buttons";
|
||||||
@import "objects/image";
|
@import "objects/image";
|
||||||
|
@import "objects/pullquote";
|
||||||
@import "utilities/utilities";
|
@import "utilities/utilities";
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
23
themes/wporg-5ftf/css/utilities/_colors.scss
Normal file
23
themes/wporg-5ftf/css/utilities/_colors.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
.has-wporg-blue-color {
|
||||||
|
color: $color__wporg-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-blue-background-color {
|
||||||
|
background-color: $color__wporg-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-purple-color {
|
||||||
|
color: $color__wporg-purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-purple-background-color {
|
||||||
|
background-color: $color__wporg-purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-white-color {
|
||||||
|
color: $color__text-over-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-wporg-white-background-color {
|
||||||
|
background-color: $color__text-over-background;
|
||||||
|
}
|
||||||
18
themes/wporg-5ftf/css/utilities/_pullquote.scss
Normal file
18
themes/wporg-5ftf/css/utilities/_pullquote.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
.wp-block-pullquote.is-style-solid-color {
|
||||||
|
background-color: $color__wporg-blue;
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
max-width: 100%;
|
||||||
|
border: none;
|
||||||
|
color: $color__text-over-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint( $breakpoint-tablet ) {
|
||||||
|
background-color: $color__text-over-background;
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: none;
|
||||||
|
color: $color__text-heading;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,2 +1,4 @@
|
||||||
|
@import "colors";
|
||||||
@import "group";
|
@import "group";
|
||||||
@import "paragraph";
|
@import "paragraph";
|
||||||
|
@import "pullquote";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue