Skip to content

Commit

Permalink
[ssi_product_website] 14.0.1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@Miftahussalam
Miftahussalam committed Aug 28, 2023
1 parent cc9c0d5 commit 80dd17f
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 198 deletions.
2 changes: 1 addition & 1 deletion ssi_product_website/static/src/scss/primary_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
$o-wsale-products-layout-grid-ratio: 1.0 !default;
$o-pcatalog-products-layout-grid-ratio: 1.0 !default;
78 changes: 39 additions & 39 deletions ssi_product_website/static/src/scss/ssi_product_website.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// 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 {
$o-pcatalog-products-layout-grid-gutter-width: $grid-gutter-width / 2 !default;
$o-pcatalog-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-pcatalog-products-layout-grid-gutter-width);

@mixin pcatalog-break-table-to-list() {
.o_pcatalog_products_grid_table_wrapper > table,
.o_pcatalog_products_grid_table_wrapper > table > tbody,
.o_pcatalog_products_grid_table_wrapper > table > tbody > tr,
.o_pcatalog_products_grid_table_wrapper > table > tbody > tr > td {
display: block;
width: 100%;
}
Expand Down Expand Up @@ -67,7 +67,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
object-fit: scale-down;
}
}
.o_wsale_product_information {
.o_pcatalog_product_information {
position: relative;
flex: 0 0 auto;
transition: .3s ease;
Expand All @@ -80,7 +80,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
transform: scale(1, 0);
transition: all ease 0.3s;
}
.o_wsale_product_btn {
.o_pcatalog_product_btn {
@include o-position-absolute(auto, 0, 100%, 0);
padding-bottom: map-get($spacers, 1);

Expand All @@ -97,7 +97,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
&:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);

.o_wsale_product_information {
.o_pcatalog_product_information {
background-color: gray('200') !important;
}
.oe_subdescription {
Expand All @@ -110,7 +110,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
}
.oe_subdescription,
.o_wsale_product_btn .btn {
.o_pcatalog_product_btn .btn {
transform: scale(1);
}
}
Expand All @@ -122,7 +122,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
}
.oe_subdescription,
.o_wsale_product_btn .btn {
.o_pcatalog_product_btn .btn {
transform: scale(1);
}
}
Expand All @@ -135,22 +135,22 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
.oe_product_image {
@include border-bottom-radius($card-inner-border-radius);
}
.o_wsale_product_information {
.o_pcatalog_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 {
.o_pcatalog_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
margin-top: $o-pcatalog-products-layout-grid-gutter-width; // For list and mobile design
padding: 0;

@if $o-wsale-products-layout-grid-gutter-width <= 0 {
@if $o-pcatalog-products-layout-grid-gutter-width <= 0 {
border: $card-border-width solid $card-border-color;
}
}
Expand All @@ -160,22 +160,22 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
}

.o_wsale_product_grid_wrapper {
.o_pcatalog_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;
&.o_pcatalog_product_grid_wrapper_#{$x}_#{$y} {
padding-top: 100% * $o-pcatalog-products-layout-grid-ratio * $y / $x;
}
}
}

> * {
$-pos: ($o-wsale-products-layout-grid-gutter-width / 2);
$-pos: ($o-pcatalog-products-layout-grid-gutter-width / 2);
@include o-position-absolute($-pos, $-pos, $-pos, $-pos);

@if $o-wsale-products-layout-grid-gutter-width <= 0 {
@if $o-pcatalog-products-layout-grid-gutter-width <= 0 {
&.card {
border: none;

Expand All @@ -188,34 +188,34 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
}

.o_wsale_products_grid_table_wrapper {
.o_pcatalog_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);
margin: (-$o-pcatalog-products-layout-grid-gutter-width / 2);
}

@include media-breakpoint-down(sm) {
@include wsale-break-table-to-list();
@include pcatalog-break-table-to-list();

.table .o_wsale_product_grid_wrapper {
.table .o_pcatalog_product_grid_wrapper {
padding-top: 100% !important;
}
}

&.o_wsale_layout_list {
&.o_pcatalog_layout_list {
@include media-breakpoint-up(sm) {
@include wsale-break-table-to-list();
@include pcatalog-break-table-to-list();

.o_wsale_products_grid_table_wrapper {
.o_pcatalog_products_grid_table_wrapper {
margin: 0;
}

.table .o_wsale_product_grid_wrapper {
.table .o_pcatalog_product_grid_wrapper {
padding-top: 0 !important;

> * {
Expand All @@ -225,28 +225,28 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}

.oe_product_catalog {
$-wsale-list-layout-height: 10rem;
$-pcatalog-list-layout-height: 10rem;

flex-flow: row nowrap;
min-height: $-wsale-list-layout-height;
min-height: $-pcatalog-list-layout-height;

.oe_product_image {
flex: 0 0 auto;
width: $-wsale-list-layout-height;
width: $-pcatalog-list-layout-height;
max-width: 35%;
min-width: 100px;
height: auto;
}
.o_wsale_product_information {
.o_pcatalog_product_information {
position: static;
display: flex;
flex: 1 1 auto;
text-align: left !important;
}
.o_wsale_product_information_text {
.o_pcatalog_product_information_text {
flex: 1 1 auto;
}
.o_wsale_product_btn {
.o_pcatalog_product_btn {
flex: 0 0 auto;
position: static;
display: flex;
Expand All @@ -264,12 +264,12 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
max-height: none !important;
}
.oe_subdescription,
.o_wsale_product_btn .btn {
.o_pcatalog_product_btn .btn {
transform: scale(1) !important;
}

&:hover {
.o_wsale_product_information {
.o_pcatalog_product_information {
background-color: $white !important;
}
}
Expand All @@ -278,7 +278,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
}

.o_wsale_products_main_row {
.o_pcatalog_products_main_row {
margin-top: $grid-gutter-width / 2;
margin-bottom: $grid-gutter-width / 2;
}
Expand Down
64 changes: 32 additions & 32 deletions ssi_product_website/static/src/scss/ssi_product_website_frontend.scss
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
//## Website Sale frontent design
//## Product Catalog 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-pcatalog-wizard-thickness: 0.125rem;
$o-pcatalog-wizard-dot-size: 0.625rem;
$o-pcatalog-wizard-dot-active-glow: 0.25rem;

$o-wsale-wizard-color-inner: white;
$o-wsale-wizard-color-default: gray('200');
$o-pcatalog-wizard-color-inner: white;
$o-pcatalog-wizard-color-default: gray('200');

$o-wsale-wizard-dot-active: theme-color('primary');
$o-wsale-wizard-dot-completed: theme-color('success');
$o-pcatalog-wizard-dot-active: theme-color('primary');
$o-pcatalog-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;
$o-pcatalog-wizard-label-default: $text-muted;
$o-pcatalog-wizard-label-active: $body-color;
$o-pcatalog-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;
$tmp-dot-radius: ($o-pcatalog-wizard-dot-size + $o-pcatalog-wizard-thickness)*0.5;
$tmp-check-size: max($font-size-base, $o-pcatalog-wizard-dot-size + $o-pcatalog-wizard-thickness + $o-pcatalog-wizard-dot-active-glow*2);
$tmp-check-pos: $o-pcatalog-wizard-dot-size*0.5 - $tmp-check-size*0.5;

margin-top: $grid-gutter-width*0.5;
padding: 0 $grid-gutter-width*0.5;
Expand All @@ -33,7 +33,7 @@ $o-wsale-wizard-label-completed: $success;
position: relative;

@include media-breakpoint-up(md) {
margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
margin-top: $tmp-dot-radius + $o-pcatalog-wizard-thickness*3.5;
float: left;
width: percentage(1/3);

Expand All @@ -47,22 +47,22 @@ $o-wsale-wizard-label-completed: $success;
}
}
.progress-wizard-dot {
width: $o-wsale-wizard-dot-size;
height: $o-wsale-wizard-dot-size;
width: $o-pcatalog-wizard-dot-size;
height: $o-pcatalog-wizard-dot-size;
position: relative;
display: inline-block;
background-color: $o-wsale-wizard-color-inner;
background-color: $o-pcatalog-wizard-color-inner;
border-radius: 50%;
box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default;
box-shadow: 0 0 0 $o-pcatalog-wizard-thickness $o-pcatalog-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);
margin: (-$tmp-dot-radius) 0 0 (-$o-pcatalog-wizard-dot-size*0.5);
}
}

.progress-wizard-steplabel {
color: $o-wsale-wizard-label-default;
color: $o-pcatalog-wizard-label-default;
margin: 5px 0 5px 5px;
font-size: $font-size-base;
display: inline-block;
Expand All @@ -78,20 +78,20 @@ $o-wsale-wizard-label-completed: $success;
}

.progress-wizard-bar {
height: $o-wsale-wizard-thickness;
background-color: $o-wsale-wizard-color-default;
height: $o-pcatalog-wizard-thickness;
background-color: $o-pcatalog-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);
background: $o-pcatalog-wizard-dot-active;
box-shadow: 0 0 0 ($o-pcatalog-wizard-dot-active-glow - 0.0625rem) $o-pcatalog-wizard-color-inner,
0 0 0 $o-pcatalog-wizard-dot-active-glow rgba($o-pcatalog-wizard-dot-active, 0.5);
}

.progress-wizard-steplabel {
color: $o-wsale-wizard-label-active;
color: $o-pcatalog-wizard-label-active;
font-weight: bolder;
}
}
Expand All @@ -107,8 +107,8 @@ $o-wsale-wizard-label-completed: $success;
height: $tmp-check-size;
border-radius: 100%;

background: $o-wsale-wizard-color-inner;
color: $o-wsale-wizard-dot-completed;
background: $o-pcatalog-wizard-color-inner;
color: $o-pcatalog-wizard-dot-completed;
text-align: center;
line-height: 1;
font-size: $tmp-check-size;
Expand All @@ -119,16 +119,16 @@ $o-wsale-wizard-label-completed: $success;
}

.progress-wizard-steplabel {
color: $o-wsale-wizard-label-completed;
color: $o-pcatalog-wizard-label-completed;
}

&:hover:not(.disabled) {
.progress-wizard-dot:after {
color: $o-wsale-wizard-label-completed;
color: $o-pcatalog-wizard-label-completed;
}

.progress-wizard-steplabel {
color: $o-wsale-wizard-label-active;
color: $o-pcatalog-wizard-label-active;
}
}
}
Expand Down
Loading

0 comments on commit 80dd17f

Please sign in to comment.