kollapsminoriteten/wp-content/plugins/jetpack/modules/contact-form/css/grunion.css

248 lines
5.0 KiB
CSS
Raw Normal View History

2019-11-15 23:26:29 +01:00
.contact-form .clear-form {
clear: both;
}
2022-06-16 14:01:47 +02:00
.contact-form input {
font: inherit;
}
2019-11-15 23:26:29 +01:00
.contact-form input::placeholder {
2021-07-23 11:58:50 +02:00
transition: opacity 0.3s ease-out;
2019-11-15 23:26:29 +01:00
}
.contact-form input:hover::placeholder {
opacity: 0.5;
}
.contact-form input:focus::placeholder {
opacity: 0.3;
}
2022-12-15 17:41:53 +01:00
/*
Using :where we will keep a lower CSS specificity,
allowing themes to easily override these styles
*/
:where(
.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form input[type='url']
) {
2019-11-15 23:26:29 +01:00
box-sizing: border-box;
width: 100%;
2022-12-15 17:41:53 +01:00
padding: 12px 8px;
border-width: 1px;
line-height: normal;
2019-11-15 23:26:29 +01:00
}
.contact-form select {
2021-07-23 11:58:50 +02:00
padding: 14px 7px;
min-width: 150px;
2019-11-15 23:26:29 +01:00
}
.contact-form textarea {
box-sizing: border-box;
float: none;
height: 200px;
width: 100%;
2021-07-23 11:58:50 +02:00
padding: 7px;
font: inherit;
2019-11-15 23:26:29 +01:00
}
.contact-form input[type='radio'],
.contact-form input[type='checkbox'] {
2023-01-25 20:43:46 +01:00
width: 1rem;
height: 1rem;
2019-11-15 23:26:29 +01:00
float: none;
2023-01-25 20:43:46 +01:00
margin: 0 0.75rem 0 0;
2020-09-15 14:30:05 +02:00
}
.contact-form input[type='checkbox'] {
top: 0;
margin-left: 0;
2019-11-15 23:26:29 +01:00
}
.contact-form label {
margin-bottom: 0.25em;
float: none;
font-weight: bold;
display: block;
}
2023-01-25 20:43:46 +01:00
.contact-form label.consent {
font-size: 13px;
font-weight: normal;
text-transform: uppercase;
display: flex;
align-items: center;
}
2020-09-15 14:30:05 +02:00
.contact-form label.consent-implicit input {
display: none;
}
2019-11-15 23:26:29 +01:00
.contact-form label.checkbox,
.contact-form label.checkbox-multiple,
.contact-form label.radio {
margin-bottom: 0.25em;
float: none;
font-weight: normal;
2020-09-15 14:30:05 +02:00
display: inline-flex;
align-items: center;
2019-11-15 23:26:29 +01:00
}
.contact-form label span {
2020-09-15 14:30:05 +02:00
font-size: 85%;
2019-11-15 23:26:29 +01:00
margin-left: 0.25em;
font-weight: normal;
2023-01-25 20:43:46 +01:00
opacity: 0.45;
2019-11-15 23:26:29 +01:00
}
.contact-form-submission {
margin-bottom: 4em;
padding: 1.5em 1em;
2022-12-15 17:41:53 +01:00
width: 100%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
2019-11-15 23:26:29 +01:00
}
.contact-form-submission p {
margin: 0 auto;
word-wrap: break-word;
}
2022-12-15 17:41:53 +01:00
.contact-form-submission h4 {
margin-top: 32px;
margin-bottom: 32px;
font-weight: 200;
}
.contact-form-submission .go-back-message {
margin-top: 20px;
margin-bottom: 32px;
text-align: left;
}
.contact-form-submission .go-back-message .link {
font-weight: 200;
color: #000;
}
.contact-form-submission .field-name {
font-weight: 200;
}
.contact-form-submission .field-value {
margin-bottom: 20px;
font-weight: 600;
}
2019-11-15 23:26:29 +01:00
.form-errors .form-error-message {
color: red;
}
.textwidget .contact-form input[type='text'],
.textwidget .contact-form input[type='email'],
.textwidget .contact-form input[type='tel'],
.textwidget .contact-form input[type='url'],
.textwidget .contact-form textarea,
.wp-block-column .contact-form input[type='text'],
.wp-block-column .contact-form input[type='email'],
.wp-block-column .contact-form input[type='tel'],
.wp-block-column .contact-form input[type='url'],
.wp-block-column .contact-form textarea {
width: 100%;
}
#jetpack-check-feedback-spam {
margin: 1px 8px 0px 0px;
}
.jetpack-check-feedback-spam-spinner {
display: inline-block;
margin-top: 7px;
}
2020-06-23 13:49:54 +02:00
.wp-block-jetpack-contact-form {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
2022-12-15 17:41:53 +01:00
flex-grow: 1;
gap: var(--wp--style--block-gap, 1.5rem);
2020-06-23 13:49:54 +02:00
}
2022-12-15 17:41:53 +01:00
.wp-block-jetpack-contact-form > * {
2020-06-23 13:49:54 +02:00
flex: 0 0 100%;
}
2022-12-15 17:41:53 +01:00
/* Added circa Nov 2022: container class assigned to topmost block div */
.wp-block-jetpack-contact-form-container.alignfull .wp-block-jetpack-contact-form {
padding-right: 0;
padding-left: 0;
}
2020-06-23 13:49:54 +02:00
.wp-block-jetpack-button.alignright button {
float: right;
}
.wp-block-jetpack-contact-form .grunion-field-wrap {
2022-12-15 17:41:53 +01:00
box-sizing: border-box;
2020-06-23 13:49:54 +02:00
}
.wp-block-jetpack-contact-form .grunion-field-width-25-wrap {
2022-12-15 17:41:53 +01:00
flex: 1 1 calc( 25% - calc(var(--wp--style--block-gap, 1.5rem) * 1) );
max-width: 25%;
2020-06-23 13:49:54 +02:00
}
.wp-block-jetpack-contact-form .grunion-field-width-50-wrap {
2022-12-15 17:41:53 +01:00
flex: 1 1 calc( 50% - calc(var(--wp--style--block-gap, 1.5rem) * 1) );
max-width: 50%;
2020-06-23 13:49:54 +02:00
}
.wp-block-jetpack-contact-form .grunion-field-width-75-wrap {
2022-12-15 17:41:53 +01:00
flex: 1 1 calc( 75% - calc(var(--wp--style--block-gap, 1.5rem) * 1) );
max-width: 75%;
2020-06-23 13:49:54 +02:00
}
2021-07-23 11:58:50 +02:00
.grunion-field-checkbox-wrap,
.grunion-field-consent-wrap {
2020-06-23 13:49:54 +02:00
align-self: center;
}
2021-07-23 11:58:50 +02:00
@media only screen and ( min-width: 600px ) {
2019-11-15 23:26:29 +01:00
.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form input[type='url'] {
width: 50%;
}
2020-06-23 13:49:54 +02:00
/****
* Older users keep the 50% width to avoid breaking
* designs, but newer users using the contact
* form block get 100% width.
*/
.wp-block-jetpack-contact-form input[type='text'],
.wp-block-jetpack-contact-form input[type='email'],
.wp-block-jetpack-contact-form input[type='tel'],
.wp-block-jetpack-contact-form input[type='url'] {
width: 100%;
}
2019-11-15 23:26:29 +01:00
}
2020-09-15 14:30:05 +02:00
/** For the "Empty Spam" button on /wp-admin/edit.php?post_status=spam&post_type=feedback **/
.jetpack-empty-spam-container {
display: inline-block;
}
.jetpack-empty-spam {
display: inline-block;
}
.jetpack-empty-spam-spinner {
display: inline-block;
margin-top: 7px;
}
2022-04-02 10:26:41 +02:00
/* Make sure the set height of the Spacer block nested inside the Contact Form block is respected */
.wp-block-jetpack-contact-form .wp-block-spacer {
width: 100%;
2022-06-16 14:01:47 +02:00
}