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

Blockbase: Add comment form checkbox styling

Browse source 
Including updates to Quadrat, Seedlet Blocks & Skatepark
This commit is contained in:
Sarah Norris 2021-08-06 17:57:11 +01:00
parent b85080db50
commit e245f2d518
12 changed files with 166 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
blockbase/assets/ponyfill.css
View file

@ -460,24 +460,49 @@ p.has-background {
display: inline-block;
}
.wp-block-post-comments .comment-form input[type="text"] {
.wp-block-post-comments form input[type="text"] {
width: 100%;
}
.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments .comment-form textarea {
.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments form textarea {
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] {
margin-left: 0;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before,
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::after {
box-sizing: border-box;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before {
content: var(--wp--custom--form--checkbox--unchecked--content);
position: absolute;
top: var(--wp--custom--form--checkbox--unchecked--position--top);
left: var(--wp--custom--form--checkbox--unchecked--position--left);
width: var(--wp--custom--form--checkbox--unchecked--sizing--width);
height: var(--wp--custom--form--checkbox--unchecked--sizing--height);
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:checked + ::after {
content: var(--wp--custom--form--checkbox--checked--content);
position: absolute;
top: var(--wp--custom--form--checkbox--checked--position--top);
left: var(--wp--custom--form--checkbox--checked--position--left);
width: var(--wp--custom--form--checkbox--checked--sizing--width);
height: var(--wp--custom--form--checkbox--checked--sizing--height);
font-size: var(--wp--custom--form--checkbox--checked--font-size);
}
.wp-block-post-comments .comment-reply-title small {
float: right;
font-size: 14px;
}
.wp-block-post-comments .comment-form-cookies-consent input[type="checkbox"] {
margin-left: 0;
}
.wp-block-post-comments .commentlist .comment p {
font-size: var(--wp--custom--post-comment--typography--font-size);
line-height: var(--wp--custom--post-comment--typography--line-height);

39
blockbase/sass/blocks/_post-comments.scss
View file

@ -14,13 +14,13 @@
.reply {
margin-block: var(--wp--custom--margin--vertical);
a {
display: inline-block;
}
}
.comment-form {
form {
input[type="text"] {
width: 100%;
}
@ -29,6 +29,35 @@
textarea {
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
}
.comment-form-cookies-consent {
input[type="checkbox"] {
margin-left: 0;
& + ::before,
& + ::after {
box-sizing: border-box;
}
& + ::before {
content: var(--wp--custom--form--checkbox--unchecked--content);
position: absolute;
top: var(--wp--custom--form--checkbox--unchecked--position--top);
left: var(--wp--custom--form--checkbox--unchecked--position--left);
width: var(--wp--custom--form--checkbox--unchecked--sizing--width);
height: var(--wp--custom--form--checkbox--unchecked--sizing--height);
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
}
&:checked + ::after {
content: var(--wp--custom--form--checkbox--checked--content);;
position: absolute;
top: var(--wp--custom--form--checkbox--checked--position--top);
left: var(--wp--custom--form--checkbox--checked--position--left);
width: var(--wp--custom--form--checkbox--checked--sizing--width);
height: var(--wp--custom--form--checkbox--checked--sizing--height);
font-size: var(--wp--custom--form--checkbox--checked--font-size);
}
}
}
}
.comment-reply-title {
@ -38,12 +67,6 @@
}
}
.comment-form-cookies-consent {
input[type="checkbox"]{
margin-left: 0;
}
}
.commentlist {
.comment {
p {

25
quadrat/assets/theme.css
View file

@ -411,31 +411,6 @@ ul ul {
position: relative;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before,
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::after {
box-sizing: border-box;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before {
content: "";
position: absolute;
top: 0.2em;
left: 0;
width: 16px;
height: 16px;
border: 1px solid var(--wp--custom--color--foreground);
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:checked + ::after {
content: "\2715";
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 3px;
font-size: 14px;
}
.wp-block-post-comments form .form-submit {
grid-area: form-submit;
}

29
quadrat/child-theme.json
View file

@ -151,7 +151,34 @@
],
"form": {
"border": {
"color": "var(--wp--custom--color--foreground)"
"color": "var(--wp--custom--color--foreground)",
"style": "solid",
"width": "2px"
},
"checkbox": {
"checked": {
"content": "\"\\2715\"",
"fontSize": "14px",
"position": {
"left": "3px",
"top": "4px"
},
"sizing": {
"height": "12px",
"width": "12px"
}
},
"unchecked": {
"content": "\"\"",
"position": {
"left": "0",
"top": "0.2em"
},
"sizing": {
"height": "16px",
"width": "16px"
}
}
},
"padding": "20px"
},

22
quadrat/sass/blocks/_post-comments.scss
View file

@ -82,28 +82,6 @@
padding-left: 2em;
position: relative;
}
& + ::before,
& + ::after {
box-sizing: border-box;
}
& + ::before {
content: "";
position: absolute;
top: 0.2em;
left: 0;
width: 16px;
height: 16px;
border: 1px solid var(--wp--custom--color--foreground);
}
&:checked + ::after {
content: "\2715";
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 3px;
font-size: 14px;
}
}
}

25
quadrat/theme.json
View file

@ -217,6 +217,31 @@
},
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)"
},
"checkbox": {
"checked": {
"content": "\"\\2715\"",
"fontSize": "14px",
"position": {
"left": "3px",
"top": "4px"
},
"sizing": {
"height": "12px",
"width": "12px"
}
},
"unchecked": {
"content": "\"\"",
"position": {
"left": "0",
"top": "0.2em"
},
"sizing": {
"height": "16px",
"width": "16px"
}
}
}
},
"gallery": {

1
seedlet-blocks/assets/theme.css
View file

@ -283,7 +283,6 @@ is passed all of the block attributes on the block definition in the template. *
.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments .comment-form textarea {
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
font-size: var(--wp--preset--font-size--small);
width: 100%;
}

1
seedlet-blocks/sass/blocks/_post-comments.scss
View file

@ -119,7 +119,6 @@
input:not([type=submit]):not([type=checkbox]),
textarea {
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
font-size: var(--wp--preset--font-size--small);
width: 100%;

25
skatepark/assets/theme.css
View file

@ -213,31 +213,6 @@
position: relative;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before,
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::after {
box-sizing: border-box;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before {
content: "";
position: absolute;
top: -0.4em;
left: 0;
width: 30px;
height: 30px;
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:checked + ::after {
content: "\2715";
width: 25px;
height: 25px;
position: absolute;
top: 3px;
left: 7px;
font-size: var(--wp--preset--font-size--normal);
}
.wp-block-post-comments form .form-submit {
grid-area: form-submit;
}

25
skatepark/child-theme.json
View file

@ -111,6 +111,31 @@
"style": "solid",
"width": "3px"
},
"checkbox": {
"checked": {
"content": "\"\\2715\"",
"fontSize": "var(--wp--preset--font-size--normal)",
"position": {
"left": "7px",
"top": "3px"
},
"sizing": {
"height": "25px",
"width": "25px"
}
},
"unchecked": {
"content": "\"\"",
"position": {
"left": "0",
"top": "-0.4em"
},
"sizing": {
"height": "30px",
"width": "30px"
}
}
},
"label": {
"spacing": {
"margin": {

23
skatepark/sass/blocks/_post-comments.scss
View file

@ -98,30 +98,7 @@
padding-left: 3em;
position: relative;
}
& + ::before,
& + ::after {
box-sizing: border-box;
}
& + ::before {
content: "";
position: absolute;
top: -0.4em;
left: 0;
width: 30px;
height: 30px;
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
}
&:checked + ::after {
content: "\2715";
width: 25px;
height: 25px;
position: absolute;
top: 3px;
left: 7px;
font-size: var(--wp--preset--font-size--normal);
}
}
}
.form-submit {

25
skatepark/theme.json
View file

@ -171,6 +171,31 @@
},
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)"
},
"checkbox": {
"checked": {
"content": "\"\\2715\"",
"fontSize": "var(--wp--preset--font-size--normal)",
"position": {
"left": "7px",
"top": "3px"
},
"sizing": {
"height": "25px",
"width": "25px"
}
},
"unchecked": {
"content": "\"\"",
"position": {
"left": "0",
"top": "-0.4em"
},
"sizing": {
"height": "30px",
"width": "30px"
}
}
}
},
"gallery": {