Blockbase: Move form grid styles to Blockbase
This commit is contained in:
Sarah Norris
parent
a57b2c153c
commit
e14f6ebb40
8 changed files with 119 additions and 255 deletions
|
|
@ -462,14 +462,50 @@ p.has-background {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form input[type="text"] {
|
||||
width: 100%;
|
||||
.wp-block-post-comments form {
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "notes notes" "comment comment" "author author" "email email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
|
||||
}
|
||||
|
||||
.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
|
||||
.wp-block-post-comments form textarea {
|
||||
background: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
@import '../base/mixins';
|
||||
|
||||
.wp-block-post-comments {
|
||||
|
||||
label, .comment-meta {
|
||||
font-size: var(--wp--custom--form--label--typography--font-size);
|
||||
}
|
||||
|
|
@ -22,14 +21,55 @@
|
|||
}
|
||||
|
||||
form {
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"notes notes"
|
||||
"comment comment"
|
||||
"author author"
|
||||
"email email"
|
||||
"url url"
|
||||
"cookies-consent cookies-consent"
|
||||
"form-submit form-submit";
|
||||
|
||||
input:not([type=submit]):not([type=checkbox]),
|
||||
textarea {
|
||||
background: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent {
|
||||
|
|
|
|||
|
|
@ -320,8 +320,8 @@ ul ul {
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.wp-block-post-comments {
|
||||
line-height: var(--wp--custom--body--typography--line-height);
|
||||
.wp-block-post-comments .reply {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .reply a {
|
||||
|
|
@ -348,10 +348,6 @@ ul ul {
|
|||
}
|
||||
|
||||
.wp-block-post-comments form {
|
||||
display: grid;
|
||||
-moz-column-gap: 1em;
|
||||
column-gap: 1em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "notes notes" "author author" "email url" "comment comment" "cookies-consent cookies-consent" "form-submit form-submit";
|
||||
}
|
||||
|
||||
|
|
@ -363,42 +359,6 @@ ul ul {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .reply {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .commentmetadata {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,35 @@
|
|||
@import "../../../blockbase/sass/blocks/button-mixins";
|
||||
|
||||
.wp-block-post-comments {
|
||||
.reply {
|
||||
margin-bottom: 30px;
|
||||
|
||||
line-height: var(--wp--custom--body--typography--line-height);
|
||||
a {
|
||||
--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
|
||||
@include button-border-styles;
|
||||
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
|
||||
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
|
||||
--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
|
||||
|
||||
.reply a {
|
||||
--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
|
||||
@include button-border-styles;
|
||||
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
|
||||
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
|
||||
--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
|
||||
|
||||
& ,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
line-height: 1;
|
||||
}
|
||||
&:not(.has-background):not(.has-text-color) {
|
||||
& ,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.has-focus {
|
||||
--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
|
||||
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
|
||||
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
|
||||
&:active {
|
||||
line-height: 1;
|
||||
}
|
||||
&:not(.has-background):not(.has-text-color) {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.has-focus {
|
||||
--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
|
||||
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
|
||||
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"notes notes"
|
||||
"author author"
|
||||
|
|
@ -47,42 +45,6 @@
|
|||
font-size: var(--wp--preset--font-size--normal);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.commentmetadata {
|
||||
|
|
|
|||
|
|
@ -215,10 +215,6 @@ is passed all of the block attributes on the block definition in the template. *
|
|||
margin-bottom: var(--wp--custom--margin--baseline);
|
||||
}
|
||||
|
||||
.wp-block-post-comments input[type=checkbox] + label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .commentlist .comment {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -252,19 +248,12 @@ is passed all of the block attributes on the block definition in the template. *
|
|||
font-size: var(--global--font-size-xs);
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form {
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "notes notes" "comment comment" "author email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form p {
|
||||
.wp-block-post-comments form p {
|
||||
margin-top: var(--wp--custom--margin--baseline);
|
||||
margin-bottom: var(--wp--custom--margin--baseline);
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form input[type="submit"] {
|
||||
.wp-block-post-comments form input[type="submit"] {
|
||||
border-radius: var(--wp--custom--button--border--radius);
|
||||
cursor: pointer;
|
||||
font-size: var(--wp--preset--font-size--normal);
|
||||
|
|
@ -272,57 +261,29 @@ is passed all of the block attributes on the block definition in the template. *
|
|||
padding: 23px 25px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color).has-focus {
|
||||
.wp-block-post-comments form input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments form input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments form input[type="submit"]:not(.has-background):not(.has-text-color).has-focus {
|
||||
padding: 23px 25px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form .comment-form-cookies-consent > label,
|
||||
.wp-block-post-comments .comment-form .comment-notes {
|
||||
.wp-block-post-comments form .comment-form-cookies-consent > label,
|
||||
.wp-block-post-comments form .comment-notes {
|
||||
font-size: var(--wp--preset--font-size--tiny);
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]):focus,
|
||||
.wp-block-post-comments .comment-form textarea:focus {
|
||||
.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]):focus,
|
||||
.wp-block-post-comments form textarea:focus {
|
||||
color: var(--wp--custom--form--color--text);
|
||||
outline-width: 1px;
|
||||
outline-style: dotted;
|
||||
outline-color: var(--wp--custom--form--color--text);
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
|
||||
.wp-block-pullquote.is-style-solid-color {
|
||||
padding: var(--wp--custom--margin--horizontal);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,10 +38,6 @@
|
|||
margin-bottom: var(--wp--custom--margin--baseline);
|
||||
}
|
||||
|
||||
input[type=checkbox] + label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.commentlist {
|
||||
.comment {
|
||||
padding-left: 0;
|
||||
|
|
@ -79,18 +75,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"notes notes"
|
||||
"comment comment"
|
||||
"author email"
|
||||
"url url"
|
||||
"cookies-consent cookies-consent"
|
||||
"form-submit form-submit";
|
||||
|
||||
form {
|
||||
p {
|
||||
margin-top: var(--wp--custom--margin--baseline);
|
||||
margin-bottom: var(--wp--custom--margin--baseline);
|
||||
|
|
@ -130,32 +115,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,15 +135,9 @@
|
|||
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-reply-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form {
|
||||
display: grid;
|
||||
-moz-column-gap: 1.2em;
|
||||
column-gap: 1.2em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "notes notes" "comment comment" "author email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
|
||||
}
|
||||
|
||||
|
|
@ -166,37 +160,16 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-comment textarea {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
margin-bottom: var(--wp--custom--margin--vertical);
|
||||
}
|
||||
|
||||
.wp-block-post-comments form .form-submit {
|
||||
grid-area: form-submit;
|
||||
.wp-block-post-comments .comment-reply-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments .comment-author {
|
||||
|
|
|
|||
|
|
@ -27,14 +27,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.comment-reply-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
column-gap: 1.2em;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"notes notes"
|
||||
"comment comment"
|
||||
|
|
@ -62,38 +56,19 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.comment-notes {
|
||||
grid-area: notes;
|
||||
}
|
||||
|
||||
.comment-form-author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.comment-form-url {
|
||||
grid-area: url;
|
||||
}
|
||||
|
||||
.comment-form-comment {
|
||||
grid-area: comment;
|
||||
|
||||
textarea {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent {
|
||||
grid-area: cookies-consent;
|
||||
margin-bottom: var(--wp--custom--margin--vertical);
|
||||
}
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
grid-area: form-submit;
|
||||
}
|
||||
.comment-reply-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue