beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

BCB: Add post comments styles (#3553)

Browse source 
* Add baseline styles for post comments.

* Initial styles.

* Blank Canvas Blocks: Add button styles for the Post Comments block Reply link

* Remove widths because of https://github.com/WordPress/gutenberg/pull/30382

* Reset borders and cursor for form inputs.

* Move to border and cursor reset to button mixin.

* Remove addition to button mixin.

* Rebase.

Co-authored-by: Danny Dudzic <daniel.dudzic@automattic.com>
This commit is contained in:
Jeff Ong 2021-04-02 06:51:52 -07:00 committed by GitHub
parent 7856f9d53a
commit ae57d02846
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
blank-canvas-blocks/assets/ponyfill.css
View file

@ -409,6 +409,72 @@ p.has-drop-cap:not(:focus):first-letter {
font-weight: var(--wp--custom--post-author--font-weight);
}
/**
* Button
*/
/**
* Block Options
*/
.wp-block-button.wp-block-button__link,
.wp-block-button .wp-block-button__link {
text-decoration: none;
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
.wp-block-buttons .wp-block-button:last-child {
margin-bottom: 0;
}
.wp-block-post-comments .comment {
font-size: var(--wp--custom--form--typography--font-size);
}
.wp-block-post-comments label, .wp-block-post-comments .comment-meta {
font-size: var(--wp--custom--form--label--typography--font-size);
}
.wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
border-radius: var(--wp--custom--button--border--radius);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
color: var(--wp--custom--button--color--text);
border-color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
padding: calc(.667em + 2px) calc(1.333em + 2px);
}
.wp-block-post-comments input[type="submit"] svg, .wp-block-post-comments .reply a svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
.wp-block-pullquote.is-style-solid-color,
.wp-block-pullquote {
text-align: var(--wp--custom--pullquote--typography--text-align);

8
blank-canvas-blocks/experimental-theme.json
View file

@ -148,6 +148,14 @@
"text": "var(--wp--custom--color--foreground)",
"background": "transparent",
"boxShadow": "none"
},
"label": {
"typography": {
"fontSize": "var(--wp--preset--font-size--tiny)"
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)"
}
},
"paragraph": {

16
blank-canvas-blocks/sass/blocks/_post-comments.scss Normal file
View file

@ -0,0 +1,16 @@
@import 'button';
.wp-block-post-comments {
.comment {
font-size: var(--wp--custom--form--typography--font-size);
}
label, .comment-meta {
font-size: var(--wp--custom--form--label--typography--font-size);
}
input[type="submit"], .reply a {
@include button-main-styles;
@include button-hover-styles;
}
}

1
blank-canvas-blocks/sass/ponyfill.scss
View file

@ -16,6 +16,7 @@
@import "blocks/navigation";
@import "blocks/paragraph";
@import "blocks/post-author";
@import "blocks/post-comments";
@import "blocks/pullquote";
@import "blocks/quote";
@import "blocks/search";