autonomic-cooperative/somos-infinitos-theme
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style checkout page

Browse Source
This commit is contained in:
Aadil Ayub
2025-05-08 16:20:37 +05:00
parent 11ae7b897e
commit f2e86e4a8a
5 changed files with 395 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
assets/scss/custom.scss
View File

@ -3,16 +3,12 @@ html {
}
body {
background: radial-gradient(
circle at right 15%,
rgba(142, 154, 236, 0.4) 0%,
rgba(142, 154, 236, 0) 25%
),
radial-gradient(
circle at left 85%,
rgba(142, 154, 236, 0.4) 0%,
rgba(142, 154, 236, 0) 25%
);
background: radial-gradient(circle at right 15%,
rgba(142, 154, 236, 0.4) 0%,
rgba(142, 154, 236, 0) 25%),
radial-gradient(circle at left 85%,
rgba(142, 154, 236, 0.4) 0%,
rgba(142, 154, 236, 0) 25%);
min-height: 100vh;
}
@ -20,11 +16,12 @@ body {
.woocommerce,
.wc-block-components-form,
.woocommerce-page {
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
input[type=search],
input[type=date],
@ -36,23 +33,23 @@ body {
border: 1px solid var(--wp--preset--color--foreground);
border-radius: 12px;
transition: border-color 0.3s, box-shadow 0.3s;
&::placeholder {
color: var(--wp--preset--color--foreground);
opacity: 0.7;
}
&:hover {
border-color: var(--wp--preset--color--foreground);
}
&:focus {
outline: none;
border-color: var(--wp--preset--color--foreground);
box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
}
}
// Special styling for select fields
select {
appearance: none;
@ -60,19 +57,19 @@ body {
background-repeat: no-repeat;
background-position: right 1em top 50%;
padding-right: 2.5em;
option {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--foreground);
}
}
// Textarea specific styling
textarea {
min-height: 100px;
resize: vertical;
}
// Checkbox and radio styling
input[type=checkbox],
input[type=radio] {
@ -83,11 +80,11 @@ body {
background: transparent;
border: 1px solid var(--wp--preset--color--foreground);
cursor: pointer;
&:checked {
background-color: var(--wp--preset--color--foreground);
border-color: var(--wp--preset--color--foreground);
&::after {
content: '';
position: absolute;
@ -100,30 +97,31 @@ body {
border-radius: 1px;
}
}
&:focus {
outline: none;
box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
}
}
input[type=radio] {
border-radius: 50%;
&:checked::after {
border-radius: 50%;
}
}
// Error state styling
.woocommerce-invalid,
.woocommerce-invalid-required-field,
.has-error {
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
input[type=search],
input[type=date],
@ -131,13 +129,13 @@ body {
select {
border-color: var(--wp--preset--color--foreground);
border-width: 2px;
&:focus {
box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
}
}
}
.woocommerce-error {
background-color: rgba(250, 247, 239, 0.1);
border-left: 3px solid var(--wp--preset--color--foreground);
@ -145,25 +143,25 @@ body {
padding: 1em 1.5em;
margin-bottom: 2em;
border-radius: 4px;
li {
list-style: none;
margin-left: 0;
}
}
// Validation error messages
.woocommerce-error,
.woocommerce-message {
margin: 0 0 2em;
padding: 1em 1.5em;
border-radius: 4px;
&::before {
margin-right: 0.5em;
}
}
span.required {
color: var(--wp--preset--color--foreground);
opacity: 0.8;
@ -172,13 +170,15 @@ body {
// Specific class for WooCommerce components
.wc-block-components-form {
.wc-block-components-text-input,
.wc-block-components-select {
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
select {
padding: 1em;
@ -186,16 +186,16 @@ body {
background: transparent;
border: 1px solid var(--wp--preset--color--foreground);
border-radius: 12px;
&::placeholder {
color: var(--wp--preset--color--foreground);
opacity: 0.7;
}
&:hover {
border-color: var(--wp--preset--color--foreground);
}
&:focus {
outline: none;
border-color: var(--wp--preset--color--foreground);
@ -203,7 +203,7 @@ body {
}
}
}
// Style the combobox
.wc-block-components-combobox .wc-block-components-combobox-control {
input.components-combobox-control__input {
@ -212,20 +212,24 @@ body {
background: transparent;
border: 1px solid var(--wp--preset--color--foreground);
border-radius: 12px;
&:hover, &:focus {
&:hover,
&:focus {
border-color: var(--wp--preset--color--foreground);
}
}
}
// Error states for WC blocks
.has-error {
input, select, textarea {
input,
select,
textarea {
border-color: var(--wp--preset--color--foreground);
border-width: 2px;
}
.wc-block-components-validation-error {
color: var(--wp--preset--color--foreground);
font-size: 0.875em;
@ -266,24 +270,24 @@ body {
input.input-text {
border-color: var(--wp--preset--color--foreground);
border-width: 2px;
&:focus {
box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
}
}
}
&.woocommerce-invalid {
input.input-text {
border-color: var(--wp--preset--color--foreground);
border-width: 2px;
&:focus {
box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
}
}
}
.woocommerce-input-wrapper {
.description {
background: rgba(250, 247, 239, 0.1);
@ -309,17 +313,17 @@ body {
color: var(--wp--preset--color--foreground);
transition: all 0.25s ease;
font-weight: normal;
&:hover {
background-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
text-decoration: none;
}
&.alt {
background-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
&:hover {
background-color: transparent;
color: var(--wp--preset--color--foreground);
@ -337,12 +341,12 @@ body {
color: var(--wp--preset--color--foreground);
padding: 1em 1.5em;
margin-bottom: 2em;
a {
color: var(--wp--preset--color--foreground);
font-weight: 600;
text-decoration: underline;
&:hover {
text-decoration: none;
}
@ -353,7 +357,7 @@ body {
.wc-block-components-notice-banner,
.woocommerce-error {
color: var(--wp--preset--color--foreground);
&.is-error,
&.is-info,
&.is-success,
@ -399,15 +403,38 @@ body {
fill: var(--wp--preset--color--foreground) !important;
}
.wc-block-components-form .wc-block-components-text-input.has-error label, .wc-block-components-text-input.has-error label {
.wc-block-components-form .wc-block-components-text-input.has-error label,
.wc-block-components-text-input.has-error label {
color: var(--wp--preset--color--foreground);
}
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus {
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=password]:focus,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:focus {
background-color: var(--wp--preset--color--background);
}
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus {
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=password]:focus,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:focus {
color: var(--wp--preset--color--foreground);
}
@ -415,18 +442,125 @@ body {
.wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
padding-inline: 3rem;
}
[data-block-name="woocommerce/page-content-wrapper"] {
display: none;
}
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link) {
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
background-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
text-transform: uppercase;
transition: all 0.125s ease-in-out;
&:hover {
background-color: white;
color: black;
}
}
// .d-none {
// display: none !important;
// }
// .wc-block-components-express-payment--checkout,
// .wc-block-components-express-payment__title-container,
// .wc-block-components-express-payment__content,
// .wc-block-components-express-payment-continue-rule.wc-block-components-express-payment-continue-rule--checkout {
// display: none !important;
// }
// we dont have any coupons on the site
.woocommerce-form-coupon-toggle {
display: none;
}
.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
max-width: 968px !important;
}
.woocommerce {
h3 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 32px;
}
}
.woocommerce form .form-row label,
.wc-block-components-form .wc-block-components-text-input label {
margin-left: 0 !important;
}
.woocommerce .col2-set,
.woocommerce-page .col2-set {
display: flex;
flex-direction: column;
}
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
width: unset;
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
background: transparent;
border-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--foreground);
border-radius: 12px;
}
.select2-container .select2-dropdown,
.select2-container .select2-selection {
background-color: var(--wp--preset--color--foreground);
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background: white;
}
.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated label {
color: black;
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
border: 1em solid white;
border-top-color: white;
border-right-color: white;
border-left-color: white;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
}
.payment_box.payment_method_stripe fieldset {
border: none;
}
.woocommerce form .form-row.woocommerce-invalid label {
color: var(--wp--preset--color--foreground) !important;
}
.woocommerce table.shop_table {
border-color: var(--wp--preset--color--foreground);
}
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th {
border-color: var(--wp--preset--color--foreground);
}
.woocommerce table.shop_table td {
border-color: var(--wp--preset--color--foreground);
}