tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-21 18:43:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

More blocks styles moved to the appropriate object/utilities folders

Browse source 
Simplifies pullquote and fixes the issues with editor styles; move color classes utilities.
This commit is contained in:
Kelly Dwan 2019-10-02 17:08:14 -04:00
parent e6b3fbd989
commit f8558fe9c2
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
10 changed files with 98 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
themes/wporg-5ftf/css/components/_about.scss
View file

@ -1,14 +1,4 @@
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 ) {
> p,
@ -28,22 +18,11 @@ body.page-about .entry-content {
margin-left: auto;
}
.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
.wp-block-pullquote.is-style-solid-color {
position: absolute;
top: 800px;
left: 0;
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?
}
}
}

30
themes/wporg-5ftf/css/components/_entry-content.scss
View file

@ -6,38 +6,8 @@
h1, h2, h3, h4, h5, h6 {
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,
.wp-block-group.has-background,
.wp-block-pullquote.has-wporg-blue-background-color {

1
themes/wporg-5ftf/css/objects/_objects.scss
View file

@ -8,4 +8,5 @@
@import "../../../pub/wporg/css/objects/notices";
@import "buttons";
@import "image";
@import "pullquote";
@import "site-header";

3
themes/wporg-5ftf/css/objects/_pullquote.scss Normal file
View file

@ -0,0 +1,3 @@
.wp-block-pullquote {
color: $color__text-heading;
}

130
themes/wporg-5ftf/css/style-editor.css
View file

@ -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
* 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
---------------------------------------------------------------------------- */
@ -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 {
width: 80%;
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 */

3
themes/wporg-5ftf/css/style-editor.scss
View file

@ -8,12 +8,11 @@
@import "../../pub/wporg/css/settings/structure";
@import "settings/structure";
@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/objects/buttons";
@import "objects/buttons";
@import "objects/image";
@import "objects/pullquote";
@import "utilities/utilities";

2
themes/wporg-5ftf/css/style.css
View file

File diff suppressed because one or more lines are too long

23
themes/wporg-5ftf/css/utilities/_colors.scss Normal file
View 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
View 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;
}
}
}

2
themes/wporg-5ftf/css/utilities/_utilities.scss
View file

@ -1,2 +1,4 @@
@import "colors";
@import "group";
@import "paragraph";
@import "pullquote";