WordPressテンプレート機能更新。

[magic3/magic3.git] / scripts / wp / woocommerce / assets / css / woocommerce-layout.scss

/**
 * woocommerce-layout.scss
 * Applies layout to the default WooCommerce frontend design
 */

/**
 * Imports
 */
@import 'mixins';
@import 'variables';

/**
 * Styling begins
 */
.woocommerce, .woocommerce-page {

        .woocommerce-message,
        .woocommerce-error,
        .woocommerce-info {
                .button {
                        float: right;
                }
        }

        /**
         * General layout styles
         */
        .col2-set {
                @include clearfix();
                width: 100%;

                .col-1 {
                        float: left;
                        width: 48%;
                }
                .col-2 {
                        float: right;
                        width: 48%;
                }
        }

        img {
                height: auto;
                max-width: 100%;
        }

        /**
         * Product page
         */
        div.product,
        #content div.product {
                div.images {
                        float: left;
                        width: 48%;
                }

                div.thumbnails {
                        @include clearfix();

                        a {
                                float: left;
                                width: 30.75%;
                                margin-right: 3.8%;
                                margin-bottom: 1em;
                        }

                        a.last {
                                margin-right: 0;
                        }

                        a.first {
                                clear: both;
                        }

                        &.columns-1 {
                                a {
                                        width: 100%;
                                        margin-right: 0;
                                        float: none;
                                }
                        }

                        &.columns-2 {
                                a {
                                        width: 48%;
                                }
                        }

                        &.columns-4 {
                                a {
                                        width: 22.05%;
                                }
                        }

                        &.columns-5 {
                                a {
                                        width: 16.9%;
                                }
                        }
                }

                div.summary {
                        float: right;
                        width: 48%;
                }

                .woocommerce-tabs {
                        clear: both;

                        ul.tabs {
                                @include menu();
                        }
                }

                #reviews {
                        .comment {
                                @include mediaright();
                        }
                }
        }

        /**
         * Product loops
         */
        ul.products {
                clear: both;
                @include clearfix();

                li.product {
                        float: left;
                        margin: 0 3.8% 2.992em 0;
                        padding: 0;
                        position: relative;
                        width: 22.05%;
                        margin-left: 0;
                }

                li.first {
                        clear: both;
                }

                li.last {
                        margin-right: 0;
                }
        }

        &.columns-1 {
                ul.products {
                        li.product {
                                width: 100%;
                                margin-right: 0;
                        }
                }
        }

        &.columns-2 {
                ul.products {
                        li.product {
                                width: 48%;
                        }
                }
        }

        &.columns-3 {
                ul.products {
                        li.product {
                                width: 30.75%;
                        }
                }
        }

        &.columns-5 {
                ul.products {
                        li.product {
                                width: 16.95%;
                        }
                }
        }

        &.columns-6 {
                ul.products {
                        li.product {
                                width: 13.5%;
                        }
                }
        }

        .woocommerce-result-count {
                float: left;
        }
        .woocommerce-ordering {
                float: right;
        }

        .woocommerce-pagination {
                ul.page-numbers {
                        @include menu();
                }
        }

        /**
         * Cart page
         */
        table.cart,
        #content table.cart {
                img {
                        height: auto;
                }

                td.actions {
                        text-align: right;

                        .input-text {
                                width: 80px;
                        }

                        .coupon {
                                float: left;

                                label {
                                        display: none;
                                }
                        }
                }
        }

        .cart-collaterals {
                @include clearfix();
                width: 100%;

                .related {
                        width: 30.75%;
                        float: left;
                }

                .cross-sells {
                        width: 48%;
                        float: left;

                        ul.products {
                                float: none;

                                li {
                                        width: 48%;
                                }
                        }
                }

                .shipping_calculator {
                        width: 48%;
                        @include clearfix();
                        clear: right;
                        float: right;

                        .col2-set {
                                .col-1,
                                .col-2 {
                                        width: 47%;
                                }
                        }
                }

                .cart_totals {
                        float: right;
                        width: 48%;
                }
        }

        /**
         * Cart sidebar
         */
        ul.cart_list,
        ul.product_list_widget {
                li {
                        @include mediaright();
                }
        }

        /**
         * Forms
         */
        form {
                .form-row {
                        @include clearfix();

                        label {
                                display: block;

                                &.checkbox {
                                        display: inline;
                                }
                        }

                        select {
                                width: 100%;
                        }

                        .input-text {
                                box-sizing: border-box;
                                width: 100%;
                        }
                }

                .form-row-first,
                .form-row-last {
                        width: 47%;
                        overflow: visible;
                }

                .form-row-first {
                        float: left;

                        /*rtl:raw:
                        float: right;
                        */
                }

                .form-row-last {
                        float: right;
                }

                .form-row-wide {
                        clear: both;
                }
        }

        #payment {
                .form-row {
                        select {
                                width: auto;
                        }
                }

                .wc-terms-and-conditions, .terms {
                        text-align: left;
                        padding: 0 1em 0 0;
                        float:left;
                }

                #place_order {
                        float: right;
                }
        }

        .woocommerce-billing-fields,
        .woocommerce-shipping-fields {
                @include clearfix();
        }

        .woocommerce-terms-and-conditions {
                margin-bottom: 1.618em;
                padding: 1.618em;
        }

        /**
         * oEmbeds
         */
        .woocommerce-oembed {
                position: relative;
        }
}

.woocommerce-account {
        .woocommerce-MyAccount-navigation {
                float: left;
                width: 30%;
        }

        .woocommerce-MyAccount-content {
                float: right;
                width: 68%;
        }
}

/**
 * Twenty Eleven specific styles
 */
.woocommerce-page {
        &.left-sidebar {
                #content.twentyeleven {
                        width: 58.4%;
                        margin: 0 7.6%;
                        float: right;
                }
        }

        &.right-sidebar {
                #content.twentyeleven {
                        margin: 0 7.6%;
                        width: 58.4%;
                        float: left;
                }
        }
}

/**
 * Twenty Fourteen specific styles
 */
.twentyfourteen {
        .tfwc {
                padding: 12px 10px 0;
                max-width: 474px;
                margin: 0 auto;

                .product .entry-summary {
                        padding: 0 !important;
                        margin: 0 0 1.618em !important;
                }

                div.product.hentry.has-post-thumbnail {
                        margin-top: 0;
                }
        }
}

@media screen and (min-width: 673px) {
        .twentyfourteen {
                .tfwc {
                        padding-right: 30px;
                        padding-left: 30px;
                }
        }
}

@media screen and (min-width: 1040px) {
        .twentyfourteen {
                .tfwc {
                        padding-right: 15px;
                        padding-left: 15px;
                }
        }
}

@media screen and (min-width: 1110px) {
        .twentyfourteen {
                .tfwc {
                        padding-right: 30px;
                        padding-left: 30px;
                }
        }
}

@media screen and (min-width: 1218px) {
        .twentyfourteen {
                .tfwc {
                        margin-right: 54px;
                }
        }
        .full-width {
                .twentyfourteen {
                        .tfwc {
                                margin-right: auto;
                        }
                }
        }
}

/**
 * Twenty Fifteen specific styles
 */
.twentyfifteen {
        .t15wc {
                padding-left: 7.6923%;
                padding-right: 7.6923%;
                padding-top: 7.6923%;
                margin-bottom: 7.6923%;
                background: #fff;
                box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);

                .page-title {
                        margin-left: 0;
                }
        }
}

@media screen and (min-width: 38.75em) {
        .twentyfifteen {
                .t15wc {
                        margin-right: 7.6923%;
                        margin-left: 7.6923%;
                        margin-top: 8.3333%;
                }
        }
}

@media screen and (min-width: 59.6875em) {
        .twentyfifteen {
                .t15wc {
                        margin-left: 8.3333%;
                        margin-right: 8.3333%;
                        padding: 10%;
                }
        }

        .single-product {
                .twentyfifteen {
                        .entry-summary {
                                padding: 0 !important;
                        }
                }
        }
}

/**
 * Twenty Sixteen specific styles
 */
.twentysixteen {
        .site-main {
                margin-right: 7.6923%;
                margin-left: 7.6923%;
        }

        .entry-summary {
                margin-right: 0;
                margin-left: 0;
        }
}

#content {
        .twentysixteen {
                div.product {
                        div.images,
                        div.summary {
                                width: 46.42857%;
                        }
                }
        }
}

@media screen and (min-width: 44.375em) {
        .twentysixteen {
                .site-main {
                        margin-right: 23.0769%;
                }
        }
}

@media screen and (min-width: 56.875em) {
        .twentysixteen {
                .site-main {
                        margin-right: 0;
                        margin-left: 0;
                }
        }

        .no-sidebar {
                .twentysixteen {
                        .site-main {
                                margin-right: 15%;
                                margin-left: 15%;
                        }

                        .entry-summary {
                                margin-right: 0;
                                margin-left: 0;
                        }
                }
        }
}

/**
 * RTL styles.
 */
.rtl {
        .woocommerce, .woocommerce-page {
                .col2-set {
                        .col-1 {
                                float: right;
                        }
                        .col-2 {
                                float: left;
                        }
                }
        }
}