Skip to content

Instantly share code, notes, and snippets.

@artlipsky
Last active February 1, 2022 14:25
Show Gist options
  • Save artlipsky/11098d88baf1e1b53cd9539eb66a376b to your computer and use it in GitHub Desktop.
Save artlipsky/11098d88baf1e1b53cd9539eb66a376b to your computer and use it in GitHub Desktop.
/*-------------------Default Styles------------------------*/
.oxy-woo-checkout {
width: 100%;
}
td.download-file a.button.alt {
width: 100%;
}
.woocommerce ul.order_details {
background: #f7f6f7;
padding: 20px;
color: #666;
}
.woocommerce ul.order_details li strong {
color: black;
margin-top: 4px;
}
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
color: #666;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
margin-bottom: 8px;
}
.woocommerce .woocommerce-order-details, .woocommerce-order-downloads {
border-bottom: 1px solid #ccc;
}
.woocommerce .woocommerce-customer-details p::before {
color: #00ADEF;
}
.woocommerce .woocommerce-customer-details address {
border: 0;
padding: 0;
color: #666;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}
.oxy-woo-checkout a {
color: #00ADEF;
transition: all ease 0.2s;
}
.oxy-woo-checkout a:hover {
color: #E96199;
}
.woocommerce-info {
border-top-color: #00ADEF;
color: #666;
margin-bottom: 32px;
}
.woocommerce-info a {
color: #00ADEF;
transition: all ease 0.2s;
}
.woocommerce-info a:hover {
color: #E96199;
}
.woocommerce-info::before {
color: #00ADEF;
}
.woocommerce-checkout #payment ul.payment_methods li {
line-height: 1.6;
}
.woocommerce-checkout #payment {
border-radius: 0;
border-top: 1px solid #ccc;
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid #ccc;
}
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
text-align: center;
text-transform: uppercase;
background: #E96199;
padding: 16px 48px;
border-radius: 0;
line-height: 1.2;
transition: all ease 0.2s;
letter-spacing: 1px;
border-color: #E96199;
font-size: 16px;
font-family: 'Montserrat';
font-weight: 700;
}
.woocommerce #payment #place_order:hover, .woocommerce-page #payment #place_order:hover {
background: #085888;
border-color: #085888;
}
h2.woocommerce-column__title, h2.woocommerce-order-details__title, h2.woocommerce-order-downloads__title {
color: black;
font-size: 20px;
margin-bottom: 8px;
line-height: 1.6;
}
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-checkout h3 {
color: black;
font-size: 20px;
margin-bottom: 8px;
line-height: 1.6;
}
.woocommerce form .form-row label {
font-size: 12px;
color: #666;
margin-top: 8px;
}
.woocommerce form .form-row .required {
color: #E96199;
font-weight:400;
}
.woocommerce table.shop_table {
margin-bottom: 0;
border-radius: 0;
border: none;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table th {
border-top: 1px solid #ccc;
padding-left: 0;
width: 50%;
font-weight: 400;
color: #666;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
vertical-align: top;
}
.woocommerce form .form-row input.input-text {
padding: 8px;
font-size: 12px;
font-family: 'Montserrat';
border: 1px solid #ccc;
transition: all ease 0.2s;
outline: none;
}
.woocommerce form .form-row input.input-text:focus {
border: 1px solid #00ADEF;
box-shadow: 0 0 5px #00ADEF;
}
.woocommerce form .form-row input.input-text::placeholder {
color: #aaa;
}
.woocommerce form.checkout_coupon {
padding: 0;
border-radius: 0;
border: none;
margin-top: 0;
color: #666;
padding-bottom: 36px;
margin-bottom: 36px;
border-bottom: 1px solid #ccc;
}
.woocommerce form.checkout_coupon p {
margin-top: 0;
padding: 0;
max-width: 440px;
}
.woocommerce button.button, .woocommerce a.button.alt {
line-height: 1.2;
text-align: center;
background: white;
border: 1px solid #00ADEF;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Montserrat';
font-weight: 700;
font-size: 12px;
color: #00ADEF;
border-radius: 0px;
padding: 16px 32px;
transition: all ease 0.2s;
outline: none;
}
.woocommerce button.button:hover, .woocommerce a.button.alt:hover {
background: white;
color: #085888;
border-color: #085888;
}
#coupon_code {
padding: 15.5px;
}
.woocommerce form .form-row-last, .woocommerce-page form .form-row-last {
float: left;
margin-left: 12px;
}
.woocommerce form .form-row {
padding: 0;
}
.woocommerce .col2-set, .woocommerce-page .col2-set {
margin-bottom: 36px;
padding-bottom: 36px;
border-bottom: 1px solid #ccc;
}
.woocommerce-Price-amount, .product-quantity {
color: black;
font-weight: 700;
white-space: nowrap;
}
.woocommerce .col2-set, .woocommerce-page .col2-set {
display: flex;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
width: 50%;
padding-right: 40px;
}
input[type=checkbox] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0.01;
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
position: relative;
cursor: pointer;
padding-left: 12px;
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span::before {
width: 24px;
height: 24px;
border: 1px solid #ccc;
content:'';
position: absolute;
left:0;
top: 0;
transition: all ease 0.2s;
background-size: 60%;
background-repeat: no-repeat;
background-position: center center;
}
input[type=checkbox]:checked ~ span:before {
background: url(https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-check-mark-1.png);
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox:hover span::before {
border: 1px solid #00ADEF;
box-shadow: 0 0 5px #00ADEF;
}
.woocommerce form .form-row textarea {
resize: none;
border: 1px solid #ccc;
font-size: 12px;
font-family: 'Montserrat';
padding: 8px;
min-height: 96px;
transition: all ease 0.2s;
}
.woocommerce form .form-row textarea::placeholder {
color: #aaa;
}
.woocommerce form .form-row textarea:focus {
border: 1px solid #00ADEF;
box-shadow: 0 0 5px #00ADEF;
}
.select2-container--default .select2-selection--single {
border-radius: 0;
border: 1px solid #ccc;
transition: all ease 0.2s;
outline: none;
}
.select2-container--default .select2-selection--single:focus{
border: 1px solid #00ADEF;
box-shadow: 0 0 5px #00ADEF;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding: 8px;
line-height: normal;
}
.select2-container .select2-selection--single {
height: auto;
min-height: 32px;
font-size: 12px;
}
.woocommerce ul#shipping_method li {
margin-bottom: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #ccc;
font-size: 12px;
line-height: normal;
padding: 8px;
outline: none;
transition: all ease 0.2s;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border: 1px solid #00ADEF;
box-shadow: 0 0 5px #00ADEF;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
background: #00ADEF;
}
.select2-dropdown {
border: 1px solid #ccc;
border-radius: 0;
box-shadow: rgba(0,0,0,0.1) 0 12px 12px;
}
.select2-results__option {
padding: 8px;
font-size: 12px;
outline: none;
}
.select2-container--default .select2-results__option[data-selected=true] {
background: #E96199;
color: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
background: url(https://cdns.iconmonstr.com/wp-content/assets/preview/2017/240/iconmonstr-arrow-65.png);
background-size: 6px;
background-repeat: no-repeat;
background-position: 4px center;
height: 100%;
}
.woocommerce form .form-row-first, .woocommerce-page form .form-row-first {
width: calc(50% - 12px);
}
.woocommerce form .form-row-last, .woocommerce-page form .form-row-last {
width: 50%;
}
@media (max-width: 768px) {
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
margin-bottom: 0;
}
.woocommerce-Price-amount, .product-quantity {
display: block;
}
}
@media (max-width: 520px) {
.woocommerce .col2-set, .woocommerce-page .col2-set {
flex-direction: column;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
width: 100%;
padding: 0;
margin-bottom: 16px;
}
.woocommerce form.checkout_coupon p {
width: 100%;
margin-bottom: 12px;
margin-left: 0px;
max-width: 100%;
}
button[name=apply_coupon] {
width: 100%;
text-align: center;
}
}
/*----------------------Custom Styles------------------------*/
/*Background*/
.oxy-woo-checkout {
background:;
padding:;
border:;
box-shadow:;
}
/*Inputs*/
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span::before, .select2-container--default .select2-selection--single, .select2-container--default .select2-search--dropdown .select2-search__field {
border:;
background:;
border-radius:;
font-family:;
font-size:;
text-transform:;
box-shadow:;
letter-spacing:;
padding:;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox:hover span::before, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-search--dropdown .select2-search__field:focus {
border:;
box-shadow:;
}
/*Labels*/
.woocommerce form .form-row label {
font-size:;
color:;
font-family:;
text-transform:;
letter-spacing:;
font-weight:;
}
/*Label Required*/
.woocommerce form .form-row .required {
color:;
font-weight:;
}
/*Headings*/
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-checkout h3, h2.woocommerce-column__title, h2.woocommerce-order-details__title, h2.woocommerce-order-downloads__title {
color:;
font-size:;
text-transform:;
font-family:;
font-weight:;
text-transform:;
letter-spacing:;
margin-bottom:;
}
/*Borders*/
.woocommerce .col2-set, .woocommerce-page .col2-set, .woocommerce table.shop_table th, .woocommerce table.shop_table td, .woocommerce table.oocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table th, .woocommerce form.checkout_coupon, .woshop_table td, .wocommerce-checkout #payment ul.payment_methods, .woocommerce-checkout #payment, .woocommerce table.shop_table td, .woocommerce table.shop_table tfoot td, .woocommerce .woocommerce-order-details, .woocommerce-order-downloads {
border-color:;
}
/*Prices and Quantity*/
.woocommerce-Price-amount, .product-quantity {
color:;
font-family:;
font-size:;
}
/*Order Background*/
.woocommerce-checkout #payment {
background-color:;
border:;
border-radius:;
}
/*Secondary Button*/
.woocommerce button.button, .woocommerce a.button.alt {
border:;
color:;
font-size:;
font-family:;
padding:;
letter-spacing:;
text-transform:;
background:;
border-radius:;
text-align:;
font-weight:;
}
.woocommerce button.button:hover, .woocommerce a.button.alt:hover {
border:;
color:;
background:;
}
/*Primary Button*/
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
text-align:;
text-transform:;
background:;
padding:;
border-radius:;
letter-spacing:;
border:;
font-size:;
font-family:;
font-weight:;
color:;
}
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order:hover {
background:;
border:;
color:;
}
/*-------Info Messages------*/
/*Links*/
.woocommerce-info a {
font-family:;
color:;
font-weight:;
}
.woocommerce-info a:hover {
color:;
}
/*Info Message*/
.woocommerce-info, .woocommerce ul.order_details{
color:;
font-family:;
font-weight:;
border-radius:;
background:;
border-color:;
}
/*Icon Color*/
.woocommerce-info::before {
color:;
}
/*Texts*/
.woocommerce table.shop_table td, .woocommerce table.shop_table th, .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table th, .woocommerce ul#shipping_method li label, .woocommerce form.checkout_coupon p, .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received, .woocommerce .woocommerce-customer-details address, .woocommerce table.shop_table td, .woocommerce table.shop_table tfoot td {
color:;
font-family:;
font-size:;
font-weight:;
letter-spacing:;
text-transform:;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment