/*-------------------------------------------------------*/ /* Form Elements /*-------------------------------------------------------*/ input, select, textarea, .select2-container--default .select2-selection--single { border: 1px solid var(--deo-border-color); border-radius: var(--deo-border-radius); width: 100%; margin-bottom: 16px; line-height: 1.5; font-size: 1rem; padding: 10px 16px; height: 44px; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; &:focus { outline: 0; } } textarea { height: auto; display: block; padding: 8px 16px; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: inherit; fill: inherit; background-image: url('data:image/svg+xml;charset=US-ASCII,'); background-repeat: no-repeat, repeat; background-position: right 0.7em top 50%, 0 0; background-size: 1em auto, 100%; padding-right: 24px; } select::-ms-expand { display: none; } select option { font-weight: normal; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; padding-left: 0; } .select2-container--default .select2-selection--single, .select2-search--dropdown .select2-search__field { margin-bottom: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; } /* clears the ‘X’ from Internet Explorer */ input[type="search"]::-ms-clear { display: none; width: 0; height: 0; } input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; } /* clears the ‘X’ from Chrome */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } .wpcf7 .ajax-loader { position: absolute; } /* Input Buttons -------------------------------------------------------*/ .btn--button { border: none; margin-bottom: 0; width: auto; &:hover, &:focus { background-color: var(--wp--preset--color--primary); } } button, input[type="button"], input[type="reset"], input[type="submit"], .button { cursor: pointer; white-space: normal; height: auto; background-color: var(--wp--preset--color--primary); border-color: transparent; padding: 18px 36px; font-size: 0.875rem; line-height: 1.15; border-radius: 4px; color: #fff; font-weight: 700; &:hover, &:focus { border-color: transparent; background-color: var(--wp--preset--color--primary); color: #fff; } } .wp-block-button__link:hover, .button:hover, .button:active, .button:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, button[type="submit"]:hover, button[type="submit"]:active, button[type="submit"]:focus { background-color: var(--wp--preset--color--secondary); } input[type="search"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input:focus, textarea:focus { border-color: var(--wp--preset--color--primary); background-color: #fff; box-shadow: none; } /* Change Color of Placeholders */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--wp--preset--color--tertiary); } input:-moz-placeholder, textarea:-moz-placeholder { color: var(--wp--preset--color--tertiary); opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { color: var(--wp--preset--color--tertiary); opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--wp--preset--color--tertiary); } label { font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--secondary); display: inline-block; vertical-align: middle; margin-bottom: 8px; input { float: left; } } .form-group { position: relative; } /* Checkboxes & Radio Buttons -------------------------------------------------------*/ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; position: relative; min-width: 18px; width: 18px; height: 18px; padding: 0; border-radius: 3px; margin-bottom: 0; margin-right: 8px; text-align: center; line-height: 1; vertical-align: middle; background-color: #fff; border: 2px solid var(--deo-border-color); &:hover, &:focus { background-color: var(--wp--preset--color--quaternary); } } input[type="checkbox"]:checked::before { content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E"); position: absolute; display: inline-block; margin-left: -0.55rem; height: 1rem; width: 1rem; } input[type="checkbox"] + label, input[type="radio"] + label { cursor: pointer; margin-bottom: 0; position: relative; line-height: 20px; text-transform: none; } input[type="radio"] { border-radius: 50%; &:checked::after { content: ""; width: 8px; height: 8px; top: -3px; position: relative; border-radius: 50%; display: inline-block; background-color: var(--wp--preset--color--secondary); } } .consent-checkbox { margin-top: 16px; margin-bottom: 20px; display: flex; label { display: flex; font-family: inherit; letter-spacing: normal; font-weight: 400; font-size: 0.9375rem; } &__text { line-height: 1.2; } } /*-------------------------------------------------------*/ /* Contact Form 7 /*-------------------------------------------------------*/ .blockst-field { flex-basis: 100%; &-group { margin-bottom: 32px; } input[type="text"], input[type="email"] { height: 34px; } input[type="text"], input[type="email"], textarea { padding-left: 0; padding-right: 0; padding-top: 0; border-radius: 0; border-top: 0; border-right: 0; border-left: 0; } &-label { display: block; margin-bottom: 0; text-transform: uppercase; font-weight: normal; font-size: var(--wp--preset--font-size--2-x-small); letter-spacing: 0.25em; } .wpcf7-form-control-wrap { display: block; width: 100%; } } .blockst-field-type-submit { input { width: auto; } } .blockst-form-fields-wrapper { .wpcf7-acceptance { display: inline-block; margin-bottom: 16px; } .wpcf7-list-item { margin: 0; } }