Skip to content

Instantly share code, notes, and snippets.

@artlipsky
Last active April 25, 2019 15:56
Show Gist options
  • Save artlipsky/241e206d1a6d51f7c8461a96d91cfa63 to your computer and use it in GitHub Desktop.
Save artlipsky/241e206d1a6d51f7c8461a96d91cfa63 to your computer and use it in GitHub Desktop.
/*-------------------Default Styles--------------------*/
.oxy-woo-cart {
width: 100%;
}
.oxy-woo-cart div.woocommerce {
display: flex;
flex-wrap: wrap;
}
.woocommerce-cart-form {
padding: 20px;
flex-grow: 1;
}
.woocommerce table.shop_table {
margin-bottom: 12px;
}
.woocommerce table.shop_table td {
padding-left: 0;
border-color: #ccc;
color: #666;
}
.woocommerce table.shop_table tbody th {
border-color: #ccc;
font-weight: 400;
color: #666;
vertical-align: top;
}
.woocommerce table.shop_table {
border: none;
border-radius:0;
}
.woocommerce-Price-amount {
color: #000;
font-weight: 700;
}
.woocommerce table.shop_table th {
padding-left: 0;
font-weight: 400;
color: #666;
}
.shipping-calculator-button {
font-size: 12px;
color: #00ADEF;
transition: all ease 0.2s;
}
.shipping-calculator-button:hover {
color: #E96199;
}
.woocommerce-shipping-destination {
font-size: 12px;
line-height: 1.2;
color: #666;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
margin: 4px 0;
}
/* Totals */
.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals {
flex-direction: column;
width: auto;
max-width: 400px;
padding: 20px;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
float: none;
width: 100%;
display: block;
}
.wc-proceed-to-checkout {
display: flex;
flex-direction: column;
}
/* Totals Heading */
.cart_totals h2 {
margin-top:2px;
font-size: 24px;
color: black;
line-height: 1.2;
padding-bottom: 12px;
border-bottom: 1px solid #ccc;
}
/* Proceed Button */
.woocommerce a.button.alt {
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;
}
.woocommerce a.button.alt:hover {
background: #085888;
border-color: #085888;
}
.woocommerce-page table.cart img {
max-width: 96px;
border: 1px solid #ccc;
width: 100%;
}
.product-thumbnail a {
display: flex;
flex-direction: column;
}
.woocommerce a.remove {
color: #ccc !important;
transition: all ease 0.2s;
width: auto;
text-align: left;
}
.woocommerce a.remove:hover {
color: #E96199 !important;
background: transparent !important;
}
.product-name a {
color: #00ADEF;
transition: all ease 0.2s;
line-height: 1.6;
}
.product-name a:hover {
color: #E96199;
}
.woocommerce .quantity .qty {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 100%;
border: 1px solid #ccc;
font-family: 'Montserrat';
outline: none;
background: url(https://cdns.iconmonstr.com/wp-content/assets/preview/2017/240/iconmonstr-arrow-65.png), url(https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-arrow-66.png), white;
background-size: 6px, 6px;
background-repeat: no-repeat, no-repeat;
background-position: 82% 65%, 82% 35%;
padding: 8px 1px;
transition: all ease 0.2s;
}
.woocommerce .quantity .qty:focus {
border: 1px solid #00ADEF;
box-shadow: 0px 0px 6px #00ADEF;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 0.01;
width: 22px;
cursor: pointer;
}
.woocommerce-page table.cart td.actions {
padding: 24px 0;
}
.woocommerce .cart .button {
line-height: 1.2;
text-align: center;
background: transparent;
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 .cart .button:hover {
background: transparent;
color: #085888;
border-color: #085888;
}
.woocommerce-page table.cart td.actions .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text {
margin-right: 12px;
border: 1px solid #ccc;
font-family: 'Montserrat';
outline: none;
background-repeat: no-repeat, no-repeat;
background-position: 82% 65%, 82% 35%;
padding: 8px 16px;
transition: all ease 0.2s;
width: 100%;
max-width: 240px;
font-size: 12px;
min-width: 100px;
}
p.woocommerce-shipping-destination strong {
color: black;
}
.woocommerce-page table.cart td.actions .input-text::placeholder {
color: #aaa;
}
.woocommerce-page table.cart td.actions .input-text:focus {
border: 1px solid #00ADEF;
box-shadow: 0px 0px 6px #00ADEF;
}
.woocommerce a.button {
line-height: 1.2;
text-align: center;
background: transparent;
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;
}
.woocommerce a.button:hover {
background: transparent;
color: #085888;
border-color: #085888;
}
p.cart-empty {
color: #666;
align-self: center;
margin-right: 24px;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
width: 100%;
margin-bottom: 0;
}
.woocommerce-notices-wrapper {
position: absolute;
top: 12px;
left: 12px;
}
.woocommerce-message {
border-color: #00ADEF;
}
.woocommerce-message a {
margin-left: 8px;
transition: all ease 0.2s;
color: #00ADEF;
}
.woocommerce-message a:hover {
color: #E96199;
}
.woocommerce-message::before {
color: #00ADEF;
}
.woocommerce-page table.cart td.actions .coupon {
display: flex;
}
.woocommerce-page table.cart td.actions .coupon .input-text+.button {
width: 100%;
}
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
color: white;
background: #ccc;
border-color: #ccc;
padding: 16px 32px;
}
#add_payment_method .cart-collaterals .cart_totals tr td, #add_payment_method .cart-collaterals .cart_totals tr th, .woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th, .woocommerce-checkout .cart-collaterals .cart_totals tr td, .woocommerce-checkout .cart-collaterals .cart_totals tr th {
border-top: 1px solid #ccc;
}
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
font-weight: 400;
}
.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals {
max-width: 100%;
width: 100%;
}
.woocommerce table.shop_table tbody:first-child tr td {
padding-right: 0;
}
.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td {
padding-right: 0;
}
.woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background: transparent;
}
.woocommerce table.shop_table_responsive tbody tr td:first-child {
border-top: 0px;
}
td.product-subtotal {
margin-bottom: 36px;
}
}
/*-------------------Custom Styles--------------------*/
/*Backgrounds*/
.woocommerce ul#shipping_method li label {
background:;
padding:;
border-radius:;
}
/*Label Fonts*/
.woocommerce ul#shipping_method li label, .woocommerce-shipping-destination {
color:;
font-family:;
font-weight:;
line-height:;
}
/*Table Subheading*/
.woocommerce table.shop_table th, .woocommerce table.shop_table tbody th {
color:;
font-family:;
font-size:;
letter-spacing:;
text-transform:;
font-weight:;
}
/*Proceed Button*/
.woocommerce a.button.alt {
border-radius:;
background:;
border:;
font-size:;
letter-spacing:;
font-family:;
padding:;
box-shadow:;
font-weight:;
text-transform:;
color:;
}
.woocommerce a.button.alt:hover {
background:;
border:;
box-shadow:;
color:;
}
/*Small Buttons*/
.woocommerce .cart .button, .woocommerce a.button {
border-radius:;
background:;
border:;
font-size:;
letter-spacing:;
font-family:;
padding:;
box-shadow:;
font-weight:;
text-transform:;
color:;
}
.woocommerce .cart .button:hover, .woocommerce a.button:hover {
background:;
border:;
box-shadow:;
color:;
}
/*Disabled Small Buttons*/
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
border-radius:;
background:;
border:;
font-size:;
letter-spacing:;
font-family:;
padding:;
box-shadow:;
font-weight:;
text-transform:;
color:;
}
/*Inputs Styles*/
.woocommerce-page table.cart td.actions .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce .quantity .qty {
border-radius:;
border:;
color:;
}
.woocommerce-page table.cart td.actions .input-text:focus, .woocommerce-cart table.cart td.actions .coupon .input-text:focus, .woocommerce .quantity .qty:focus {
border:;
box-shadow:;
}
/*Images Styles*/
.woocommerce-page table.cart img {
border-radius:;
border:;
box-shadow:;
max-width:;
}
/*Delete Buttons*/
.woocommerce a.remove {
color: !important;
}
.woocommerce a.remove:hover {
color: !important;
}
/*Price Styles*/
.woocommerce-Price-amount {
color:;
font-size:;
font-family:;
font-weight:;
letter-spacing:;
}
/*Links Styles*/
.product-name a, .shipping-calculator-button {
color:;
font-family:;
letter-spacing:;
text-transform:;
line-height:;
font-weight:;
}
.product-name a:hover, .shipping-calculator-button:hover {
color:;
font-family:;
letter-spacing:;
text-transform:;
line-height:;
font-weight:;
}
/*Border Colors */
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table td, .cart_totals h2 {
border-color:;
}
/*Cart Heading*/
.cart_totals h2 {
font-family:;
font-size:;
font-weight:;
color:;
letter-spacing:;
text-transform:;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment