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"] { width: 100%; box-sizing: border-box; background-color: transparent; border: 1px solid $color__border; outline: none; line-height: 1; max-height: 72px; @include s-r-6 (padding); @include input-placeholder { color: #8e8e8e; } .light-form & { border: 1px solid $color__white; color: $color__white; @include input-placeholder { color: $color__white_60; } &:active, &:focus { background: $color__white; color: $color__text_one; } } } textarea { width: 100%; background-color: transparent; border: 1px solid $color__border; padding: $s-4 $s-6; outline: none; @include input-placeholder { color: #8e8e8e; } .light-form & { border: 1px solid $color__white; color: $color__white; @include input-placeholder { color: $color__white_60; } &:active, &:focus { background: $color__white; color: $color__text_one; } } } input[type="checkbox"] { width: $s-6; height: $s-6; } .color-notice, label.color-notice span { color: $color__notification; } .comment-respond textarea { height: 150px; } .single form p, .page form p { @include s-r-6 (padding-top); padding-bottom: 0; } form .comment-form-cookies-consent { clear: both; display: flex; align-items: center; label { @include s-r-4 (padding-left); margin-bottom: 0; } } form p.comment-form-comment { margin: 0; } form label { position: relative; display: block; @include s-r-2 (margin-bottom); } select { background:url("data:image/svg+xml;utf8,"); border: 1px solid $color__border; background-repeat:no-repeat; background-position: right 14px top 21px; background-size: 12px 12px; padding: 15px 40px 15px 15px; border-radius: 0; -webkit-appearance: none; width: 100%; } /* Form Submit */ input[type="submit"], button[type="submit"] { display: block; clear: both; .light-btn & { background: $color__white; color: $color__text_one; } } /* 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: 120px; height: $s-10; padding: 16px 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 { @include border-radius-s; } } .form-round { input, select { border-radius: 6.25em; } textarea { @include border-radius-l; } label { padding-left: 1.875rem; @include breakpoint(md) { padding-left: 2.063rem; } @include breakpoint(lg) { padding-left: 2.25rem; } } } /* Mailchimp Form */ .mc4wp-form { .mc4wp-form-fields { @include s-r-6 (padding-top); } .mc4wp-alert p { text-align: center; } .mc4wp-success p { color: $color__success; } .mc4wp-notice p { color: $color__notification; } } /* Light Form Color */ .entry-content { .light-form { p { color: $color__white; } } }