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-22 19:13:44 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity
five-for-the-future/themes/wporg-5ftf/css/style-editor.scss

52 lines
1.3 KiB
SCSS
Raw Normal View History

Theme: Add editor styles.
2019-09-27 01:35:20 +03:00
/*
* 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.
*/
@import "settings/colors";
@import "../../pub/wporg/css/settings/structure";
@import "settings/structure";
Homepage: clean up item positioning - Remove accidental drop-shadow (mistake in Figma) - Use the correct fonts for callout text - Switch to a fixed width of rems over percentages to make alignment easier - Use rems to outdent quote so it lines up with the edge of the photo - Overlap the blue box + photo on larger screens, and offset the quote down - Remove unused selectors - Fix quote display in the editor
2019-10-24 20:10:40 +03:00
@import "settings/typography";
Theme: Add editor styles.
2019-09-27 01:35:20 +03:00
@import "../../pub/wporg/css/tools/breakpoint";
@import "../../pub/wporg/css/settings/_modular-scale.scss";
@import "../../pub/wporg/css/objects/buttons";
@import "objects/buttons";
Theme: Iterate on About fonts and block styles.
2019-10-18 19:19:27 +03:00
@import "objects/hero";
More blocks styles moved to the appropriate object/utilities folders Simplifies pullquote and fixes the issues with editor styles; move color classes utilities.
2019-10-03 00:08:14 +03:00
@import "objects/pullquote";
Move blocks and block styles to the correct places in the CSS structure There should be no visual changes
2019-10-02 22:54:45 +03:00
@import "utilities/utilities";
Theme: Add editor styles.
2019-09-27 01:35:20 +03:00
Use columns block for the parallelogram style (#16) This avoids the complex mutliply-nested blocks and makes the block style less reliant on a custom class. On mid-sized screens, we switch to plain horizontally-overlapping rectangles, and on small screens we stack the columns, and vertically-overlap. Also, remove the parallelogram styles from the editor display. The skew and positioning don't work well in the editor context.
2019-10-03 22:09:06 +03:00
// Un-parallelogram the columns in the editor– `skew` doesn't play well with the nesting of editor components.
.block-editor-block-list__block-edit {
.is-style-wporg-parallelogram {
.wp-block-column {
@include breakpoint( $breakpoint-tablet ) {
transform: skew(0);
&:last-child {
position: static;
z-index: auto;
top: auto;
left: auto;
right: auto;
padding-left: 0;
}
Theme: Add editor styles.
2019-09-27 01:35:20 +03:00
Use columns block for the parallelogram style (#16) This avoids the complex mutliply-nested blocks and makes the block style less reliant on a custom class. On mid-sized screens, we switch to plain horizontally-overlapping rectangles, and on small screens we stack the columns, and vertically-overlap. Also, remove the parallelogram styles from the editor display. The skew and positioning don't work well in the editor context.
2019-10-03 22:09:06 +03:00
> * {
transform: skew(0);
}
}
}
}
}
Theme: Add editor styles.
2019-09-27 01:35:20 +03:00
Theme: Iterate on pullquotes and other hero areas. See #2.
2019-10-19 00:29:26 +03:00
// Undo the positioning because it's coupled to the front end layout. Use mobile positioning in the editor.
.wp-block-pullquote.is-style-wporg-home-pullquote {
position: relative;
top: 0;
Homepage: clean up item positioning - Remove accidental drop-shadow (mistake in Figma) - Use the correct fonts for callout text - Switch to a fixed width of rems over percentages to make alignment easier - Use rems to outdent quote so it lines up with the edge of the photo - Overlap the blue box + photo on larger screens, and offset the quote down - Remove unused selectors - Fix quote display in the editor
2019-10-24 20:10:40 +03:00
left: 0;
Theme: Iterate on pullquotes and other hero areas. See #2.
2019-10-19 00:29:26 +03:00
width: auto;
Homepage: clean up item positioning - Remove accidental drop-shadow (mistake in Figma) - Use the correct fonts for callout text - Switch to a fixed width of rems over percentages to make alignment easier - Use rems to outdent quote so it lines up with the edge of the photo - Overlap the blue box + photo on larger screens, and offset the quote down - Remove unused selectors - Fix quote display in the editor
2019-10-24 20:10:40 +03:00
max-width: 100%;
Theme: Iterate on pullquotes and other hero areas. See #2.
2019-10-19 00:29:26 +03:00
}
Theme: Add editor styles.
2019-09-27 01:35:20 +03:00
Theme: Iterate on pullquotes and other hero areas. See #2.
2019-10-19 00:29:26 +03:00
// font-family and face, etc?
Reference in a new issue Copy permalink