OwlCyberSecurity - MANAGER
Edit File: _form.scss
/** * woocommerce-layout.scss * Applies layout to the default WooCommerce frontend design */ /** * Imports */ @import "./../_custom-properties.scss"; @import "./../_mixins.scss"; form.woocommerce-product-search { position: relative; button[type="submit"] { top: 0; right: 0; bottom: 0; position: absolute; color: transparent !important; background: transparent !important; z-index: 2; width: 50px; border: 0; padding: 8px 12px 7px; box-shadow: none; border-radius: 0; overflow: hidden; } input[type="search"] { padding-right: 60px; width: 100%; } .kadence-search-icon-wrap { position: absolute; right: 0; top: 0; height: 100%; width: 50px; padding: 0; text-align: center; background: 0 0; z-index: 3; cursor: pointer; pointer-events: none; color: var(--global-palette6); text-shadow: none; display: flex; align-items: center; justify-content: center; } button[type="submit"]:hover ~ .kadence-search-icon-wrap { color: var(--global-palette4); } } body.rtl .woocommerce-product-search .button[type="submit"], body.rtl .woocommerce-product-search .kadence-search-icon-wrap { left: 0; right: auto; } body.rtl .woocommerce-product-search input[type="search"] { padding-right: 0.5em; padding-left: 60px; } .woocommerce { /** * Forms */ form .form-row { padding: 0; margin: 0 0 0.8em; [placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.5s 0.5s ease; opacity: 0; } span em { font-size: 80%; } label { line-height: 2.4; font-weight: bold; color: var(--global-palette5); font-size: 90%; } label.hidden { visibility: hidden; } label.inline { display: inline; } .woocommerce-input-wrapper { .description { background: #1e85be; color: #fff; border-radius: 3px; padding: 1em; margin: 0.5em 0 0; clear: both; display: none; position: relative; a { color: #fff; text-decoration: underline; border: 0; box-shadow: none; } &::before { left: 50%; top: 0%; margin-top: -4px; transform: translateX(-50%) rotate(180deg); content: ""; position: absolute; border-width: 4px 6px 0 6px; border-style: solid; border-color: #1e85be transparent transparent transparent; z-index: 100; display: block; } } //have radio button labels display inline with the radio input by default &:has([type="radio"]) { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; label { margin: 0; } } } select { cursor: pointer; margin: 0; padding: 0.4em 24px 0.4em 0.5em; } .optional { visibility: visible; } .input-checkbox { display: inline; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; } input.input-text, textarea { box-sizing: border-box; width: 100%; margin: 0; outline: 0; } .button { padding: calc(0.4em + 1px) 1em; } textarea { height: 4em; line-height: 1.5; display: block; box-shadow: none; } .select2-container { width: 100%; line-height: 2em; } &.woocommerce-invalid { label { color: $red; } .select2-container, input.input-text, select { border-color: $red; } } &.woocommerce-validated { .select2-container, input.input-text, select { border-color: darken($green, 5%); } } ::-webkit-input-placeholder { line-height: normal; } :-moz-placeholder { line-height: normal; } :-ms-input-placeholder { line-height: normal; } } .form-row { .required { color: red; font-weight: 700; border: 0 !important; text-decoration: none; visibility: hidden; // Only show optional by default. } } form.login, form.checkout_coupon, form.register { border: 1px solid darken($secondary, 10%); padding: 20px; margin: 2em 0; text-align: left; border-radius: 5px; } ul#shipping_method { list-style: none outside; margin: 0; padding: 0; li { margin: 0 0 0.5em; line-height: 1.5em; list-style: none outside; display: flex; flex-wrap: wrap; align-items: center; input { margin: 0 0.5em 0 0; height: 1em; background-image: none; vertical-align: top; } label { display: inline; } } .amount { font-weight: 700; } } .cart_totals ul#shipping_method li { flex-wrap: nowrap; } p.woocommerce-shipping-contents { margin: 0; } }