input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, .wp-block-post-comments textarea, #rating { width: 100%; box-sizing: border-box; background-color: var(--global--color--form-background); border: 1px solid var(--global--color--form-border); outline: none; line-height: var(--global--line-height-reset); padding: 1.063rem 1.25rem 1.125rem; @include input-placeholder { color: var(--wp--custom--color--font-tertiary); } &:active, &:focus { color: var(--wp--custom--color--font-secondary); border-color: var(--global--color--form-border-active); box-shadow: 0 0 0 4px var(--global--color--form-glow); } } // Search form in header on desktop with a narrow width. .site-header input[type="search"] { max-height: $s-9; @include breakpoint(md) { padding: 0.688rem 1.375rem; } @include breakpoint(lg) { padding: 0.75rem 1.5rem; } } // Testarea textarea { width: 100%; background-color: transparent; background: var(--global--color--form-background); border: 1px solid var(--global--color--form-border); padding: $s-4 $s-6; outline: none; } textarea, .wp-block-post-comments textarea { line-height: var(--wp--custom--line-height--body); } // Form labels form label { position: relative; display: block; line-height: var(--global--line-height-reset); color: var(--wp--custom--color--font-tertiary); @include s-r-2 (margin-bottom); border-radius: var(--global--border-radius-xxs); &.checkbox { @include s-r-4 (margin-bottom); } } // Select forms select, .select2-selection--single { border: 1px solid var(--global--color--form-border); @include s-r-5 (padding); background-repeat:no-repeat; background-position: right 14px top 21px; background-size: 12px 12px; -webkit-appearance: none; } .select2-container .select2-selection--single { margin-bottom: 0; height: auto; } .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; padding-right: 0; } .select2-results__options { background: var(--wp--custom--color--font-secondary); } .select2-selection__arrow svg { color: var(--wp--custom--color--font-secondary); } .select2-search--dropdown { display: none; } // Checkboxes .checkbox, form .comment-form-cookies-consent, .woocommerce-form__label-for-checkbox { color: var(--wp--custom--color--font-secondary); display: flex; align-items: center; margin-bottom: 0; } input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; min-width: $s-6; width: $s-6; height: $s-6; border: 1px solid var(--global--color--form-border); background-color: var(--global--color--form-background); border-radius:50%; outline:none; @include s-r-2 (margin-right); margin-bottom: 0; } input[type='radio']:before, input[type='checkbox']:before { content:''; display:block; width:100%; height:100%; border-radius:50%; } input[type='radio'], input[type='checkbox'] { position: relative; &:focus { border-color: var(--global--color--form-border-active); box-shadow: 0 0 0 4px var(--global--color--form-glow); background: var(--global--color--form-border-active); } &:checked:before { border-color: var(--global--color--form-border-active); background: var(--global--color--form-border-active); fill: var(--global--color--form-select-fill); color: var(--global--color--form-select-fill); } &:after { content: ""; position: absolute; display: none; } &:checked:after { display: block; } } input[type='checkbox'] { &:after { left: 8px; top: 4px; width: 7px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } } input[type='radio'] { &:after { left: 8px; top: 8px; width: 6px; height: 6px; border-radius: 100px; background-color: var(--global--color--form-select-fill); } } .wc_payment_method, .comment-form-cookies-consent { label { margin-bottom: 0; color: var(--wp--custom--color--font-secondary); } } /* Form Submit */ input[type="submit"], button[type="submit"] { display: block; clear: both; } .wp-block-post-comments .submit { border: none; } // Default comment form .color-notice, label.color-notice span { color: var(--global--color--notification); } .comment-respond textarea { min-height: 7.5rem; } .single form p, .page form p { @include s-r-6 (padding-top); padding-bottom: 0; } form p.comment-form-comment { margin: 0; line-height: 1; } /* Search Form */ .searchform-wrap, .form-wrap { position: relative; display: block; clear: both; } .entry-content .search-form, .widget_search .search-form { position: relative; } .entry-content label .search-icon, .widget_search label .search-icon { display: none; } .entry-content .search-submit span.search-icon, .widget_search .search-submit span.search-icon { width: $s-13; height: $s-10; padding: $s-4 0 0; } .error404 .entry-content { .searchform-wrap { .search-field { @include s-r-6 (margin-bottom); } } } /* Form Styles (via Customizer Settings) */ .form-curved { input, textarea, select { border-radius: var(--global--border-radius-xxs); } input[type='checkbox'], input[type='radio'] { border-radius: 50%; } } .form-round { input, select { border-radius: var(--global--border-radius-round); } textarea { border-radius: var(--global--border-radius-s); } } /* Mailchimp Form */ .mc4wp-form { .mc4wp-form-fields p.has-m-font-size:first-of-type { padding-top: 0 !important; } .mc4wp-alert p { text-align: center; } .mc4wp-success p { color: var(--global--color--success); } .mc4wp-notice p { color: var(--global--color--notification); } } .footer-widget-wrap { .mc4wp-form p { @include s-r-4 (padding-top); } }