File: /var/www/html/wpprm_old/wp-content/themes/ronneby/assets/less.lib/woocommerce_old/checkout.less
/*
Created on : 10.01.2015, 14:33:42
Author : DFD
Styles for : Checkout
*/
/* Checkout */
//.woocommerce,
.woocommerce-page {
.select2-container {
height: 56px;
line-height: 56px;
&.select2-dropdown-open,
&.select2-container--open {
border-color: @border-color;
.select2-choice,
.select2-selection {
.select2-arrow {
}
}
.select2-results {
background: @main-site-dark-color;
}
}
.select2-choice,
.select2-selection {
height: 100%;
line-height: inherit;
padding-left: 25px;
background: @main-site-dark-color;
color: @default-text-color !important;
border-color: @border-color;
.rounded(0);
.select2-arrow,
.select2-selection__arrow {
width: 34px;
height: inherit;
padding: 0;
background: transparent;
.rounded(0);
b {
background: transparent;
border: none;
&:after {
content: "\ec1c";
font-family: @font-icons-main;
line-height: 1;
.block();
height: 1em;
.abs();
top: 50%;
left: auto;
right: -5px;
margin-top: -.5em;
margin-left: 0;
color: @default-text-color;
border: none;
}
}
}
abbr {
top: 18px;
right: 45px;
background: transparent;
&:before,
&:after {
content: "";
display: block;
width: 2px;
height: 10px;
position: absolute;
top: 0;
left: 50%;
background: @border-color;
.transition(background .3s ease-in-out);
}
&:before {
.rotate(-45deg);
}
&:after {
.rotate(45deg);
}
}
.select2-selection__rendered {
line-height: inherit;
padding: 0;
}
&:hover {
abbr {
&:before,
&:after {
background: @third-site-dark-color;
}
}
}
}
}
.select2-drop,
.select2-dropdown {
&.select2-drop-active,
&.select2-container--open {
border-color: @border-color;
.select2-search input[type="text"],
.select2-search input[type="search"] {
.rounded(0);
}
.select2-results {
padding: 0;
background: @main-site-dark-color;
li {
margin: 0;
background: @main-site-dark-color;
.transition(background .3s ease-in-out);
.select2-result-label {
height: 46px;
line-height: 46px;
padding: 0 15px;
}
&:hover {
background: @background-grey;
}
}
}
}
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-color: @border-color;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
color: @default-text-color;
background: @background-grey;
}
.dfd-login-wrap {
width: 58.33333%;
padding-right: 10px;
.woocommerce-info {
padding-left: 20px;
.dfd-font-styles();
color: @subtitle-color;
&:before {
.hide();
}
a {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
&:hover {
color: @main-site-light-color;
}
}
}
form.login {
.clear + .form-row {
.rel();
overflow: hidden;
float: left;
height: @input-height;
line-height: @input-height;
margin-right: 20px;
.button {
.inline-block();
height: @input-height;
line-height: @input-height - 2;
padding: 0 35px;
margin-right: 25px;
color: @title-color;
background: transparent;
border-color: @main-site-light-color;
.rounded(3px);
.transition(~"color .3s ease, background .3s ease, border-color .3s ease");
&:hover {
color: @main-site-dark-color;
background: @main-site-light-color;
border-color: @main-site-light-color;
}
}
label.inline {
.inline-block();
input[type="checkbox"] {
//top: 13px;
top: 1px;
}
}
}
.lost_password {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
float: left;
height: @input-height;
line-height: @input-height;
text-align: right;
&:hover {
color: @main-site-light-color;
}
}
}
}
&.woocommerce-checkout {
.dfd-coupon-wrap {
width: 41.66667%;
padding-left: 10px;
.woocommerce-info {
padding-left: 20px;
.dfd-font-styles();
color: @subtitle-color;
&:before {
.hide();
}
a {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
&:hover {
color: @main-site-light-color;
}
}
}
.checkout_coupon {
input[type="text"] {
height: 56px;
}
.button {
height: 56px;
line-height: @input-height - 2;
padding-left: 35px;
padding-right: 35px;
color: @title-color;
background: transparent;
border-color: @main-site-light-color;
.rounded(3px);
.transition(~"color .3s ease, background .3s ease, border-color .3s ease");
&:hover {
color: @main-site-dark-color;
background: @main-site-light-color;
border-color: @main-site-light-color;
}
}
}
}
}
.checkout {
div.box-name {
margin-bottom: 25px;
&.diff-address {
font-size: @box-name-font-size - 2;
text-transform: uppercase;
color: @main-site-light-color;
label {
font-size: inherit;
}
input[type="checkbox"] {
float: left;
top: 3px;
}
}
}
p {
margin-bottom: 20px;
label {
margin-bottom: 10px;
color: @subtitle-color;
}
input:not([type="checkbox"]) {
margin-bottom: 0;
padding: 7px 25px;
height: 56px;
}
textarea {
height: 115px;
}
.chosen-container .chosen-single {
height: 56px;
line-height: 56px;
padding: 0 25px;
background: transparent;
border-color: @border-color;
.box-shadow(none);
.rounded(0);
> div {
width: 34px;
b {
background: transparent url(../img/sel-dropdown.png) top right no-repeat !important;
}
}
}
}
.woocommerce-billing-fields {
> h3 {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
color: @main-site-light-color;
margin-bottom: 25px;
}
}
.checkout-details-cover {
.rel();
padding: 20px;
margin-bottom: @input-height + 10;
background: #323232;
.rounded(3px);
> div.box-name {
padding-bottom: 15px;
margin-bottom: 0;
color: @main-site-dark-color;
border-bottom: 1px dotted fade(@main-site-dark-color, 20%);
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
margin-right: 10px;
&:before {
background: transparent;
border-color: fade(@main-site-dark-color, 20%);
}
&:after {
background: @main-site-dark-color;
}
}
.shop_table {
background: transparent;
border-width: 0;
thead,
tr,
tfoot {
background: transparent;
* {
color: fade(@main-site-dark-color, 70%);
}
}
p {
margin-bottom: 0;
}
thead {
border-top: 1px solid @border-color;
border-bottom: 1px solid @border-color;
th {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
padding: 15px 0;
color: @main-site-light-color;
border-bottom: 1px dotted fade(@main-site-dark-color, 20%);
}
}
tbody {
background: transparent;
div.box-name {
.inline-block();
line-height: 1.2;
padding-top: (@feature-title-font-size - @box-name-font-size) / 2;
margin-bottom: 0;
color: @main-site-dark-color;
span.amount {
color: inherit;
}
}
td {
padding: 20px 0;
}
}
tfoot {
.cart-subtotal th,
.order-total th {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
color: @main-site-light-color;
}
.cart-subtotal {
th, td {
padding: 20px 0;
border-bottom: 1px dotted fade(@main-site-dark-color, 20%);
}
}
.order-total {
th, td {
padding: 20px 0;
border-top: 1px dotted fade(@main-site-dark-color, 20%);
border-bottom: 1px dotted fade(@main-site-dark-color, 20%);
}
}
th {
font-weight: 600;
}
td,
th {
vertical-align: top;
padding: 20px 0;
}
ul {
list-style: none;
}
.amount {
.box-name();
color: @main-site-dark-color;
}
}
}
#payment {
ul.payment_methods {
list-style: none;
margin-bottom: 0;
* {
color: fade(@main-site-dark-color, 70%);
}
li.payment_method_paypal {
label {
display: inline;
}
img {
.hide();
}
}
li {
&:last-child {
.payment_box {
p {
margin: 0;
}
}
}
}
input {
.rel();
top: 2px;
margin: 0;
}
label {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
padding-left: 10px;
margin-bottom: 15px;
color: @main-site-dark-color;
}
img {
.rel();
max-width: 40%;
vertical-align: middle;
margin: -3px 0 0 10px;
}
.about_paypal {
padding-left: 10px;
color: @main-site-light-color;
}
}
.place-order {
.abs();
top: 100%;
left: 0;
right: 0;
margin-top: 10px;
.button {
.block();
width: 100%;
height: 56px;
line-height: 54px;
padding: 0;
color: @main-site-dark-color;
background: @main-site-light-color;
border-color: @main-site-light-color;
.rounded(3px);
.transition(~"background .3s ease, border-color .3s ease");
&:hover {
background: darken(@main-site-light-color, 5%);
border-color: darken(@main-site-light-color, 5%);
}
}
}
}
}
div.shipping-address {
padding: 0;
clear: left;
width: 100%;
}
#shiptobilling {
float: right;
line-height: 1.62em;
margin: 0;
padding: 0;
}
}
}
@media only screen and (max-width : @screen-medium - 1) {
body.woocommerce-checkout #main-content > .woocommerce {
.dfd-login-wrap {
padding-right: 0;
}
.dfd-coupon-wrap {
padding-left: 0;
}
}
}