initial commit 2

7 files changed, 964 insertions, 0 deletions

diff --git a/addons/website_sale/static/src/scss/primary_variables.scss b/addons/website_sale/static/src/scss/primary_variables.scss
new file mode 100644
index 00000000..c19ec9aa
--- /dev/null
+++ b/addons/website_sale/static/src/scss/primary_variables.scss
@@ -0,0 +1 @@
+$o-wsale-products-layout-grid-ratio: 1.0 !default;
diff --git a/addons/website_sale/static/src/scss/website_mail.scss b/addons/website_sale/static/src/scss/website_mail.scss
new file mode 100644
index 00000000..26a45aa5
--- /dev/null
+++ b/addons/website_sale/static/src/scss/website_mail.scss
@@ -0,0 +1,48 @@
+/* ---- OpenChatter Website ---- */
+
+.oe_msg {
+    img.oe_msg_avatar {
+        width: 50px;
+        margin-right: 10px;
+    }
+}
+
+.oe_msg_attachment {
+    display: inline-block;
+    width: 120px;
+    margin: 4px 2px;
+    min-height: 80px;
+    position: relative;
+    border-radius: 3px;
+    text-align: center;
+    vertical-align: top;
+
+    a {
+        img.oe_attachment_embedded {
+            display: block;
+            position: relative;
+            margin: 0 0 0 10px;
+            width: 100px;
+            height: 80px;
+            border-radius: 1px;
+            border: solid 3px #FFF;
+            -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+            -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+        }
+
+        div.oe_attachment_name {
+            display: inline-block;
+            max-width: 100%;
+            padding: 1px 3px;
+            margin-top: 2px;
+            margin-bottom: 5px;
+            background: #F4F5FA;
+            overflow: hidden;
+            color: #4c4c4c;
+            text-shadow: none;
+            border-radius: 3px;
+            word-wrap: break-word;
+        }
+    }
+}
diff --git a/addons/website_sale/static/src/scss/website_sale.editor.scss b/addons/website_sale/static/src/scss/website_sale.editor.scss
new file mode 100644
index 00000000..77a6b7fb
--- /dev/null
+++ b/addons/website_sale/static/src/scss/website_sale.editor.scss
@@ -0,0 +1,40 @@
+.o_wsale_soptions_menu_sizes {
+    table {
+        margin: auto;
+
+        td {
+            margin: 0;
+            padding: 0;
+            width: 40px;
+            height: 40px;
+            border: 1px #dddddd solid;
+            cursor: pointer;
+
+            &.selected {
+                background-color: #B1D4F1;
+            }
+        }
+
+        &.oe_hover td {
+            &.selected {
+                background-color: transparent;
+            }
+            &.select {
+                background-color: #B1D4F1;
+            }
+        }
+    }
+}
+
+.o_wsale_color_preview {
+    width: 1em;
+    height: 1em;
+    border: 1px solid white;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 50%;
+}
+
+.oe_drop_zone + .s_wsale_products_recently_viewed {
+    display: block !important;
+}
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
new file mode 100644
index 00000000..8b3c5fbd
--- /dev/null
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -0,0 +1,582 @@
+// Prevent grid gutter to be higher that bootstrap gutter width to make sure
+// the negative margin layout does not overflow on elements. This prevents the
+// use of an ugly overflow: hidden which would break box-shadows.
+$o-wsale-products-layout-grid-gutter-width: $grid-gutter-width / 2 !default;
+$o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale-products-layout-grid-gutter-width);
+
+@mixin wsale-break-table-to-list() {
+    .o_wsale_products_grid_table_wrapper > table,
+    .o_wsale_products_grid_table_wrapper > table > tbody,
+    .o_wsale_products_grid_table_wrapper > table > tbody > tr,
+    .o_wsale_products_grid_table_wrapper > table > tbody > tr > td {
+        display: block;
+        width: 100%;
+    }
+}
+
+.oe_website_sale {
+    ul ul {
+        margin-left: 1.5rem;
+    }
+    .o_payment_form .card {
+        border-radius: 4px !important;
+    }
+    .address-inline address {
+        display: inline-block;
+    }
+    table#cart_products tr td, table#suggested_products tr td {
+        vertical-align: middle;
+    }
+
+    table#cart_products {
+        margin-bottom: 0;
+
+        td, th {
+            &:first-child {
+                padding-left: $grid-gutter-width*0.5;
+            }
+        }
+    }
+
+    h1[itemprop="name"], .td-product_name {
+        word-break: break-word;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+
+    @include media-breakpoint-down(sm) {
+        .td-img {
+            display: none;
+        }
+    }
+
+    .toggle_summary_div {
+        @include media-breakpoint-up(xl) {
+            max-width: 400px;
+        }
+    }
+    input.js_quantity {
+        min-width: 48px;
+        text-align: center;
+    }
+    input.quantity {
+        padding: 0;
+    }
+}
+
+.o_alternative_product {
+    margin: auto;
+}
+
+// Base style for a product card with image/description
+.oe_product_cart {
+    .oe_product_image {
+        height: 0;
+        text-align: center;
+
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: scale-down;
+        }
+    }
+    .o_wsale_product_information {
+        position: relative;
+        flex: 0 0 auto;
+        transition: .3s ease;
+    }
+    .oe_subdescription {
+        max-height: 0;
+        overflow: hidden;
+        font-size: $font-size-sm;
+        margin-bottom: map-get($spacers, 1);
+        transform: scale(1, 0);
+        transition: all ease 0.3s;
+    }
+    .o_wsale_product_btn {
+        @include o-position-absolute(auto, 0, 100%, 0);
+        padding-bottom: map-get($spacers, 1);
+
+        .btn {
+            transform: scale(0);
+            transition: transform ease 200ms 0s;
+        }
+
+        &:empty {
+            display: none !important;
+        }
+    }
+
+    &:hover {
+        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
+
+        .o_wsale_product_information {
+            background-color: gray('200') !important;
+        }
+        .oe_subdescription {
+            max-height: $line-height-base * 1em; // Max 1 line
+            @include media-breakpoint-up(lg) {
+                max-height: $line-height-base * 2em; // Max 2 lines
+            }
+            @include media-breakpoint-up(xl) {
+                max-height: $line-height-base * 3em; // Max 3 lines
+            }
+        }
+        .oe_subdescription,
+        .o_wsale_product_btn .btn {
+            transform: scale(1);
+        }
+    }
+
+    @include media-breakpoint-down(sm) {
+        &, &:hover {
+            .oe_subdescription {
+                max-height: $line-height-base * 3em; // Max 3 lines
+            }
+        }
+        .oe_subdescription,
+        .o_wsale_product_btn .btn {
+            transform: scale(1);
+        }
+    }
+}
+
+// Options relative to where the product card is put
+.oe_product {
+    // Image full option
+    &.oe_image_full {
+        .oe_product_image {
+            @include border-bottom-radius($card-inner-border-radius);
+        }
+        .o_wsale_product_information {
+            @include o-position-absolute(auto, 0, 0, 0); // The wrapper is always relatively positioned
+        }
+    }
+}
+
+#products_grid {
+    .o_wsale_products_grid_table_wrapper > .table {
+        table-layout: fixed;
+
+        > tbody {
+            > tr > td {
+                margin-top: $o-wsale-products-layout-grid-gutter-width; // For list and mobile design
+                padding: 0;
+
+                @if $o-wsale-products-layout-grid-gutter-width <= 0 {
+                    border: $card-border-width solid $card-border-color;
+                }
+            }
+
+            > tr:first-child > td:first-child {
+                margin-top: 0; // For list and mobile design
+            }
+        }
+
+        .o_wsale_product_grid_wrapper {
+            position: relative;
+
+            @for $x from 1 through 4 {
+                @for $y from 1 through 4 {
+                    &.o_wsale_product_grid_wrapper_#{$x}_#{$y} {
+                        padding-top: 100% * $o-wsale-products-layout-grid-ratio * $y / $x;
+                    }
+                }
+            }
+
+            > * {
+                $-pos: ($o-wsale-products-layout-grid-gutter-width / 2);
+                @include o-position-absolute($-pos, $-pos, $-pos, $-pos);
+
+                @if $o-wsale-products-layout-grid-gutter-width <= 0 {
+                    &.card {
+                        border: none;
+
+                        &, .card-body {
+                            border-radius: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .o_wsale_products_grid_table_wrapper {
+        // Necessary to compensate the outer border-spacing of the table. No
+        // overflow will occur as the gutter width cannot be higher than the
+        // BS4 grid gutter and the vertical margins of the wrapper's parent are
+        // set accordingly.
+        // Note: a possible layout could also be ok by removing the wrapper
+        // related spacings and setting a background to it, thus including the
+        // outer border spacing as part of the design.
+        margin: (-$o-wsale-products-layout-grid-gutter-width / 2);
+    }
+
+    @include media-breakpoint-down(sm) {
+        @include wsale-break-table-to-list();
+
+        .table .o_wsale_product_grid_wrapper {
+            padding-top: 100% !important;
+        }
+    }
+
+    &.o_wsale_layout_list {
+        @include media-breakpoint-up(sm) {
+            @include wsale-break-table-to-list();
+
+            .o_wsale_products_grid_table_wrapper {
+                margin: 0;
+            }
+
+            .table .o_wsale_product_grid_wrapper {
+                padding-top: 0 !important;
+
+                > * {
+                    @include o-position-absolute(0, 0, 0, 0);
+                    position: relative;
+                }
+            }
+
+            .oe_product_cart {
+                $-wsale-list-layout-height: 10rem;
+
+                flex-flow: row nowrap;
+                min-height: $-wsale-list-layout-height;
+
+                .oe_product_image {
+                    flex: 0 0 auto;
+                    width: $-wsale-list-layout-height;
+                    max-width: 35%;
+                    min-width: 100px;
+                    height: auto;
+                }
+                .o_wsale_product_information {
+                    position: static;
+                    display: flex;
+                    flex: 1 1 auto;
+                    text-align: left !important;
+                }
+                .o_wsale_product_information_text {
+                    flex: 1 1 auto;
+                }
+                .o_wsale_product_btn {
+                    flex: 0 0 auto;
+                    position: static;
+                    display: flex;
+                    flex-flow: column nowrap;
+                    align-items: center;
+                    padding: map-get($spacers, 2);
+                    background-color: gray('200');
+
+                    .btn + .btn {
+                        margin-top: map-get($spacers, 2);
+                    }
+                }
+
+                .oe_subdescription {
+                    max-height: none !important;
+                }
+                .oe_subdescription,
+                .o_wsale_product_btn .btn {
+                    transform: scale(1) !important;
+                }
+
+                &:hover {
+                    .o_wsale_product_information {
+                        background-color: $white !important;
+                    }
+                }
+                .o_ribbon_right {
+                    @include o-ribbon-left();
+                }
+                .o_tag_right {
+                    @include o-tag-left();
+                }
+            }
+        }
+    }
+}
+
+.o_wsale_products_main_row {
+    // Special case. Normally vertical margins would be set using the BS4
+    // mt-* / my-* / mb-* utility classes, but here we need to use the shop max
+    // grid gutter width to prevent the grid wrapper to overflow because of its
+    // negative margins.
+    margin-top: $grid-gutter-width / 2;
+    margin-bottom: $grid-gutter-width / 2;
+}
+
+.oe_cart {
+    table td:first-child {
+        min-width: 76px;
+    }
+
+    > .oe_structure {
+        clear: both;
+    }
+}
+
+div#payment_method {
+    div.list-group {
+        margin-left: 40px;
+    }
+
+    .list-group-item {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+}
+
+ul.wizard {
+    padding: 0;
+    margin-top: 20px;
+    list-style: none outside none;
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
+
+    li {
+        border: 1px solid gray('200');
+        border-right-width: 0;
+        position: relative;
+        float: left;
+        padding: 0 10px 0 20px;
+        margin: 0;
+        line-height: 38px;
+        background: #fbfbfb;
+
+        .chevron {
+            position: absolute;
+            top: 0;
+            right: -10px;
+            z-index: 1;
+            display: block;
+            border: 20px solid transparent;
+            border-right: 0;
+            border-left: 10px solid gray('200');
+        }
+
+        .chevron:before {
+            position: absolute;
+            top: -20px;
+            right: 1px;
+            display: block;
+            border: 20px solid transparent;
+            border-right: 0;
+            border-left: 10px solid #fbfbfb;
+            content: "";
+        }
+
+        .o_link_disable {
+            text-decoration: none;
+            color: inherit;
+            cursor: text;
+        }
+
+        &.text-success {
+            background: #f3f4f5;
+        }
+
+        &.text-success .chevron:before {
+            border-left: 10px solid #f5f5f5;
+        }
+
+        &.text-primary {
+            background: #f1f6fc;
+        }
+
+        &.text-primary .chevron:before {
+            border-left: 10px solid #f1f6fc;
+        }
+
+        &:first-child {
+            padding-left: 15px;
+            border-radius: 4px 0 0 4px;
+        }
+
+        &:last-child {
+            border-radius: 0 4px 4px 0;
+            border-right-width: 1px;
+
+            .chevron {
+                display: none;
+            }
+        }
+    }
+}
+
+#o_shop_collapse_category li {
+    width: 100%;
+
+    a {
+        display: inline-block;
+        width: 80%;
+        padding-left: 3px;
+    }
+
+    i.fa {
+        cursor: pointer;
+    }
+}
+
+.mycart-popover {
+    max-width: 500px;
+    min-width: 250px;
+
+    .cart_line {
+        border-bottom: 1px #EEE solid;
+    }
+}
+
+tr#empty {
+    display: none;
+}
+
+.js_change_shipping {
+    cursor: pointer;
+}
+
+a.no-decoration {
+    cursor: pointer;
+    text-decoration: none !important;
+}
+
+#o-carousel-product {
+
+    &.css_not_available {
+        opacity: 0.2;
+    }
+
+    .carousel-outer {
+        height: 400px;
+        max-height: 90vh;
+
+        .carousel-inner {
+            img {
+                height: 100%;
+                width: 100%;
+                object-fit: scale-down;
+            }
+        }
+    }
+
+    .carousel-control-prev, .carousel-control-next {
+        height: 70%;
+        top: 15%;
+        opacity: 0.5;
+        cursor: pointer;
+        &:focus {
+            opacity: 0.65;
+        }
+        &:hover {
+            opacity: 0.8;
+        }
+        > span {
+            background: rgba(0, 0, 0, 0.8);
+        }
+    }
+
+    .carousel-indicators {
+        li {
+            width: 64px;
+            height: 64px;
+            text-indent: unset;
+            border: 1px solid gray('600');
+            opacity: 0.5;
+            position: relative;
+
+            .o_product_video_thumb {
+                @include o-position-absolute($top: 50%, $left: 50%);
+                transform: translate(-50%, -50%);
+                color: gray('400');
+            }
+            &.active {
+                opacity: 1;
+                border: 1px solid theme-color('primary');
+            }
+        }
+    }
+}
+
+.ecom-zoomable {
+    &:not(.ecom-autozoom) {
+        img[data-zoom] {
+            cursor: zoom-in;
+        }
+    }
+    &.ecom-autozoom {
+        img[data-zoom] {
+            cursor: crosshair;
+        }
+    }
+    .o_editable img[data-zoom] {
+        cursor: pointer;
+    }
+}
+
+#coupon_box form {
+    max-width: 300px;
+}
+
+.o_website_sale_animate {
+    opacity: 0.7;
+    position: absolute !important;
+    height: 150px;
+    width: 150px;
+    z-index: 1020;
+}
+
+.o_red_highlight {
+    background: theme-color('danger') !important;
+    box-shadow: 0 0 0 0 rgba(240,8,0,0.4);
+    transition: all 0.5s linear;
+}
+
+.o_shadow_animation {
+    box-shadow: 0 0 5px 10px rgba(240,8,0,0.4)!important;
+}
+
+/* product recently viewed snippet */
+
+.o_carousel_product_card {
+    .o_carousel_product_card_img_top {
+        object-fit: scale-down;
+        @include media-breakpoint-down(sm) {
+            height: 12rem;
+        }
+        @include media-breakpoint-up(md) {
+            height: 8rem;
+        }
+        @include media-breakpoint-up(lg) {
+            height: 12rem;
+        }
+    }
+    .o_carousel_product_img_link:hover + .o_carousel_product_remove {
+        display: block;
+    }
+}
+
+.o_carousel_product_card_wrap {
+    @include media-breakpoint-up(sm) {
+        float: left;
+    }
+}
+
+.o_carousel_product_control {
+    top: percentage(1/3);
+    bottom: percentage(1/3);
+    width: 2rem;
+    border-radius: 5px;
+    background-color: $o-enterprise-primary-color;
+}
+
+.o_carousel_product_remove {
+    position: absolute;
+    display: none;
+    cursor: pointer;
+    right: 5%;
+    top: 5%;
+}
+
+.o_carousel_product_remove:hover {
+    display: block;
+}
diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss
new file mode 100644
index 00000000..857ae06a
--- /dev/null
+++ b/addons/website_sale/static/src/scss/website_sale_backend.scss
@@ -0,0 +1,72 @@
+.o_website_sale_image_list .o_kanban_view.o_kanban_ungrouped {
+    width: auto;
+
+    .o_kanban_record{
+        flex: 0 1 50%;
+        position: relative;
+
+        @include media-breakpoint-up(md) {
+            flex: 0 0 percentage(1/3);
+        }
+
+        @include media-breakpoint-up(lg) {
+            flex: 0 0 percentage(1/5);
+        }
+
+        @include media-breakpoint-up(xl) {
+            flex: 0 0 percentage(1/6);
+        }
+        // make the image square and in the center
+        .o_squared_image {
+            position: relative;
+            overflow: hidden;
+            padding-bottom: 100%;
+            > img {
+                position: absolute;
+                margin: auto;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+            }
+        }
+
+        .o_product_image_size {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+}
+
+.o_website_sale_image_modal {
+    .o_website_sale_image_modal_container {
+        border-left: 1px solid gray('400');
+
+        .o_field_image {
+            margin-bottom: 0;
+            box-shadow: 0 2px 10px gray('300');
+
+            > img {
+                border: 1px solid gray('400');
+                height: 200px;
+                width: auto;
+            }
+
+            .o_form_image_controls {
+                @include o-hover-opacity(0.7, 1);
+                padding: 2%;
+            }
+        }
+    }
+    .o_video_container {
+        height: 200px;
+        position: relative;
+        @include o-we-preview-box($text-muted);
+        .o_invalid_warning {
+            width: 90%;
+            @include o-position-absolute($top: 50%, $left: 50%);
+            transform: translate(-50%, -50%);
+        }
+    }
+}
diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
new file mode 100644
index 00000000..b509f220
--- /dev/null
+++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
@@ -0,0 +1,81 @@
+.o_dashboard_sales {
+
+    h2 {
+        padding: 15px;
+    }
+    h4 { margin: 3px 0 4px 0 !important; }
+    .o_demo_background {
+        margin-top: 16px;
+        height: 350px;
+        background-size: 100% !important;
+        background: url("/website_sale/static/src/img/website_sale_dashboard_sales_demo.png") no-repeat;
+        position: relative;
+        opacity: 0.2;
+    }
+    .o_demo_message {
+        color: $o-main-color-muted;
+        width: 100%;
+        @include o-position-absolute($left: 0, $top: 12%);
+        display: flex;
+        justify-content: center;
+    }
+    .o_link_enable {
+        @include media-breakpoint-up(lg) {
+            border-right: 1px solid #ccc;
+        }
+        height: initial;
+        padding: 5px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        a {
+            color: darken($o-brand-lightsecondary, 40%);
+        }
+        &:hover {
+            background-color: $o-brand-lightsecondary;
+        }
+        .o_highlight {
+            color: $o-brand-primary;
+            font-size: 20px;
+            font-weight: bold;
+        }
+    }
+    .o_link_disable {
+        @include media-breakpoint-up(lg) {
+            border-right: 1px solid #ccc;
+        }
+        height: initial;
+        padding: 5px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 10px 0px;
+        color: darken($o-brand-lightsecondary, 40%);
+        .o_highlight {
+            font-size: 20px;
+            font-weight: bold;
+        }
+    }
+    .o_invisible_border {
+        border-right: 0px;
+    }
+    .o_top_margin {
+        margin-top: 20px;
+    }
+    .o_graph_canvas_container {
+        position: relative;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 30em;
+    }
+    .o_dashboard_utms {
+        .utm_chart_image {
+            display: block;
+            margin: auto;
+        }
+        .utm_dropdown {
+            margin-top: -5px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
new file mode 100644
index 00000000..613f247a
--- /dev/null
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -0,0 +1,140 @@
+//## Website Sale frontent design
+//## ----------------------------
+
+// Theming variables
+$o-wsale-wizard-thickness: 0.125rem;
+$o-wsale-wizard-dot-size: 0.625rem;
+$o-wsale-wizard-dot-active-glow: 0.25rem;
+
+$o-wsale-wizard-color-inner: white;
+$o-wsale-wizard-color-default: gray('200');
+
+$o-wsale-wizard-dot-active: theme-color('primary');
+$o-wsale-wizard-dot-completed: theme-color('success');
+
+$o-wsale-wizard-label-default: $text-muted;
+$o-wsale-wizard-label-active: $body-color;
+$o-wsale-wizard-label-completed: $success;
+
+.progress-wizard {
+    // Scoped variables
+    $tmp-dot-radius: ($o-wsale-wizard-dot-size + $o-wsale-wizard-thickness)*0.5;
+    $tmp-check-size: max($font-size-base, $o-wsale-wizard-dot-size + $o-wsale-wizard-thickness + $o-wsale-wizard-dot-active-glow*2);
+    $tmp-check-pos: $o-wsale-wizard-dot-size*0.5 - $tmp-check-size*0.5;
+
+    margin-top: $grid-gutter-width*0.5;
+    padding: 0 $grid-gutter-width*0.5;
+
+    @include media-breakpoint-up(md) {
+        padding: 0;
+    }
+
+    .progress-wizard-step {
+        position: relative;
+
+        @include media-breakpoint-up(md) {
+            margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
+            float: left;
+            width: percentage(1/3);
+
+            .o_wizard_has_extra_step + & {
+                width: percentage(1/4);
+            }
+        }
+        @include media-breakpoint-down(sm) {
+            &.disabled, &.complete {
+                display:none;
+            }
+        }
+        .progress-wizard-dot {
+            width: $o-wsale-wizard-dot-size;
+            height: $o-wsale-wizard-dot-size;
+            position: relative;
+            display: inline-block;
+            background-color: $o-wsale-wizard-color-inner;
+            border-radius: 50%;
+            box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default;
+
+            @include media-breakpoint-up(md) {
+                @include o-position-absolute($left: 50%);
+                margin: (-$tmp-dot-radius) 0 0 (-$o-wsale-wizard-dot-size*0.5);
+            }
+        }
+
+        .progress-wizard-steplabel {
+            color: $o-wsale-wizard-label-default;
+            margin: 5px 0 5px 5px;
+            font-size: $font-size-base;
+            display: inline-block;
+
+            @include media-breakpoint-up(md) {
+                display: block;
+                margin: (0.625rem + $tmp-dot-radius) 0 20px 0;
+            }
+            @include media-breakpoint-down(sm) {
+                margin-left: -15px;
+                font-size: 24px;
+            }
+        }
+
+        .progress-wizard-bar {
+            height: $o-wsale-wizard-thickness;
+            background-color: $o-wsale-wizard-color-default;
+        }
+
+        &.active {
+            .progress-wizard-dot {
+                animation: fadeIn 1s ease 0s 1 normal none running;
+                background: $o-wsale-wizard-dot-active;
+                box-shadow: 0 0 0 ($o-wsale-wizard-dot-active-glow - 0.0625rem) $o-wsale-wizard-color-inner,
+                            0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5);
+            }
+
+            .progress-wizard-steplabel {
+                color: $o-wsale-wizard-label-active;
+                font-weight: bolder;
+            }
+        }
+
+        &.complete {
+            .progress-wizard-dot {
+                background: none;
+                box-shadow: none;
+
+                &:after {
+                    @include o-position-absolute($tmp-check-pos, $left: $tmp-check-pos);
+                    width: $tmp-check-size;
+                    height: $tmp-check-size;
+                    border-radius: 100%;
+
+                    background: $o-wsale-wizard-color-inner;
+                    color: $o-wsale-wizard-dot-completed;
+                    text-align: center;
+                    line-height: 1;
+                    font-size: $tmp-check-size;
+                    font-family: FontAwesome;
+
+                    content: "\f058";
+                }
+            }
+
+            .progress-wizard-steplabel {
+                color: $o-wsale-wizard-label-completed;
+            }
+
+            &:hover:not(.disabled) {
+                .progress-wizard-dot:after {
+                    color: $o-wsale-wizard-label-completed;
+                }
+
+                .progress-wizard-steplabel {
+                    color: $o-wsale-wizard-label-active;
+                }
+            }
+        }
+
+        &.disabled {
+            cursor: default;
+        }
+    }
+}