forked from M3-Academy/m3-academy-template-checkout
feat(slider-shelf): created styles for small,medium devices and small touches
This commit is contained in:
parent
8f828a880e
commit
0638ef93b5
@ -145,7 +145,6 @@ export default class Footer {
|
||||
addCarrossel() {
|
||||
$(this.shelf.children[1]).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
@ -196,27 +195,27 @@ export default class Footer {
|
||||
let structure = "";
|
||||
|
||||
data.forEach((data) => {
|
||||
structure += `<li>
|
||||
<div>
|
||||
<div>
|
||||
<figure>
|
||||
structure += `<li class="shelf-item product-item">
|
||||
<div class="product-item-container">
|
||||
<div class="product-item-header">
|
||||
<figure class="product-item-figure">
|
||||
<img src="${data.items[0].images[0].imageUrl}" alt="">
|
||||
</figure>
|
||||
|
||||
<h3>
|
||||
<h3 class="product-item-name">
|
||||
${data.productName}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="product-item-types product-type">
|
||||
${data.items.reduce((acc, item) => {
|
||||
return (acc += `<div>
|
||||
<span>${item.name}</span>
|
||||
return (acc += `<div class="product-type-container">
|
||||
<span class="type-name">${item.name}</span>
|
||||
</div>`);
|
||||
}, "")}
|
||||
</div>
|
||||
|
||||
<a href="${data.link}">
|
||||
<a class="product-item-link" href="${data.link}">
|
||||
<span>
|
||||
Ver Produto
|
||||
</span>
|
||||
@ -231,10 +230,10 @@ export default class Footer {
|
||||
|
||||
createdInitialShelfList() {
|
||||
this.shelf.innerHTML = `
|
||||
<div>
|
||||
<h2>Você também pode gostar:</h2>
|
||||
<div class="footerCheckout__prateleira-header">
|
||||
<h2 class="footerCheckout__prateleira-title">Você também pode gostar:</h2>
|
||||
</div>
|
||||
<ul class="self-list"></ul>
|
||||
<ul class="shelf-list"></ul>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/prateleira";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
@ -821,7 +821,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
@media screen and (min-width: 1025px) {
|
||||
width: fluid(1018px, 1280px);
|
||||
min-height: calc(100vh - 175px);
|
||||
|
||||
|
||||
@ -1,17 +1,3 @@
|
||||
@mixin btn-primary-blue-black() {
|
||||
border: none;
|
||||
color: $clr-common-black;
|
||||
background: $clr-primary-blue-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin btn-primary-blue-white() {
|
||||
border: none;
|
||||
color: $clr-common-white;
|
||||
background: $clr-primary-blue-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
font-family: $font-family-100;
|
||||
@include mq(md, max) {
|
||||
@ -1015,7 +1001,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
@media screen and (min-width: 1025px) {
|
||||
width: fluid(1018px, 1280px);
|
||||
|
||||
.cart-template .cart-items td.quantity {
|
||||
|
||||
@ -109,6 +109,8 @@
|
||||
.slick-next {
|
||||
z-index: 4;
|
||||
right: 10px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
|
||||
@ -183,15 +183,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout__prateleira {
|
||||
div {
|
||||
h2 {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-200;
|
||||
color: $clr-common-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -90,7 +90,7 @@ body :where(ul, li, ol) {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
@media screen and (min-width: 1025px) {
|
||||
&__wrapper {
|
||||
width: fluid(1018px, 1280px);
|
||||
}
|
||||
|
||||
@ -1 +1,120 @@
|
||||
/* _prateleira.scss */
|
||||
.footerCheckout__prateleira {
|
||||
width: 100%;
|
||||
margin-top: 43.42px;
|
||||
min-height: 363px;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 54px;
|
||||
|
||||
/* slick-prev */
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 13.64px;
|
||||
height: 29.47px;
|
||||
transform: translateY(-50%);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
&-title {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-200;
|
||||
color: $clr-common-black;
|
||||
}
|
||||
|
||||
.shelf-item {
|
||||
.product-item-container {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
&-figure {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
min-height: 36px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-100;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 17.7px;
|
||||
}
|
||||
|
||||
&-types {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
&-link {
|
||||
@include btn-primary-blue-white();
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
letter-spacing: 5%;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 17.7px;
|
||||
font-family: $font-family-100;
|
||||
color: $clr-common-white;
|
||||
}
|
||||
}
|
||||
|
||||
.product-type-container {
|
||||
background-color: $clr-primary-blue-500;
|
||||
border-radius: 8px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.type-name {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
padding: 5px;
|
||||
line-height: 17.7px;
|
||||
letter-spacing: 5%;
|
||||
font-family: $font-family-100;
|
||||
color: $clr-common-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
width: fluid(1034px, 1280px);
|
||||
margin: 43.42px auto 56px;
|
||||
padding: 0;
|
||||
|
||||
&-title {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,183 +1,207 @@
|
||||
@mixin btn-primary-blue-black() {
|
||||
border: none;
|
||||
color: $clr-common-black;
|
||||
background: $clr-primary-blue-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin btn-primary-blue-white() {
|
||||
border: none;
|
||||
color: $clr-common-white;
|
||||
background: $clr-primary-blue-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/**
|
||||
* @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
|
||||
*/
|
||||
@mixin push--auto {
|
||||
margin: {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
margin: {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@mixin pseudo($display: block, $pos: absolute, $content: ''){
|
||||
content: $content;
|
||||
display: $display;
|
||||
position: $pos;
|
||||
@mixin pseudo($display: block, $pos: absolute, $content: "") {
|
||||
content: $content;
|
||||
display: $display;
|
||||
position: $pos;
|
||||
}
|
||||
|
||||
|
||||
@mixin position($top: false,$right: false, $bottom:false, $left: false){
|
||||
@if( $top ){
|
||||
top:$top;
|
||||
}
|
||||
@if( $right ){
|
||||
right:$right;
|
||||
}
|
||||
@if( $left ){
|
||||
left:$left;
|
||||
}
|
||||
@if( $bottom ){
|
||||
bottom:$bottom;
|
||||
}
|
||||
@mixin position($top: false, $right: false, $bottom: false, $left: false) {
|
||||
@if ($top) {
|
||||
top: $top;
|
||||
}
|
||||
@if ($right) {
|
||||
right: $right;
|
||||
}
|
||||
@if ($left) {
|
||||
left: $left;
|
||||
}
|
||||
@if ($bottom) {
|
||||
bottom: $bottom;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin responsive-ratio($x,$y, $pseudo: false) {
|
||||
$padding: unquote( ( $y / $x ) * 100 + '%' );
|
||||
@if $pseudo {
|
||||
&:before {
|
||||
@include pseudo($pos: relative);
|
||||
width: 100%;
|
||||
padding-top: $padding;
|
||||
}
|
||||
} @else {
|
||||
padding-top: $padding;
|
||||
}
|
||||
@mixin responsive-ratio($x, $y, $pseudo: false) {
|
||||
$padding: unquote(($y / $x) * 100 + "%");
|
||||
@if $pseudo {
|
||||
&:before {
|
||||
@include pseudo($pos: relative);
|
||||
width: 100%;
|
||||
padding-top: $padding;
|
||||
}
|
||||
} @else {
|
||||
padding-top: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
|
||||
@include pseudo($pos: $position);
|
||||
width: 0;
|
||||
height: 0;
|
||||
@if $round {
|
||||
border-radius: 3px;
|
||||
}
|
||||
@if $direction == down {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-top: $size solid $color;
|
||||
margin-top: 0 - round( $size / 2.5 );
|
||||
} @else if $direction == up {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid $color;
|
||||
margin-bottom: 0 - round( $size / 2.5 );
|
||||
} @else if $direction == right {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-left: $size solid $color;
|
||||
margin-right: -$size;
|
||||
} @else if $direction == left {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-right: $size solid $color;
|
||||
margin-left: -$size;
|
||||
}
|
||||
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
|
||||
@include pseudo($pos: $position);
|
||||
width: 0;
|
||||
height: 0;
|
||||
@if $round {
|
||||
border-radius: 3px;
|
||||
}
|
||||
@if $direction == down {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-top: $size solid $color;
|
||||
margin-top: 0 - round($size / 2.5);
|
||||
} @else if $direction == up {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid $color;
|
||||
margin-bottom: 0 - round($size / 2.5);
|
||||
} @else if $direction == right {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-left: $size solid $color;
|
||||
margin-right: -$size;
|
||||
} @else if $direction == left {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-right: $size solid $color;
|
||||
margin-left: -$size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-placeholder {
|
||||
&.placeholder { @content; }
|
||||
&:-moz-placeholder { @content; }
|
||||
&::-moz-placeholder { @content; }
|
||||
&:-ms-input-placeholder { @content; }
|
||||
&::-webkit-input-placeholder { @content; }
|
||||
&.placeholder {
|
||||
@content;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
@content;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
@content;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hardware($backface: true, $perspective: 1000) {
|
||||
@if $backface {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
perspective: $perspective;
|
||||
@if $backface {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
perspective: $perspective;
|
||||
}
|
||||
|
||||
@mixin truncate($truncation-boundary) {
|
||||
max-width: $truncation-boundary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: $truncation-boundary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@mixin appearance($val: none) {
|
||||
-webkit-appearance: $val;
|
||||
-moz-appearance: $val;
|
||||
appearance: $val;
|
||||
-webkit-appearance: $val;
|
||||
-moz-appearance: $val;
|
||||
appearance: $val;
|
||||
}
|
||||
|
||||
|
||||
@mixin separador($cor,$p-right: 5px) {
|
||||
position: relative;
|
||||
padding-right: $p-right;
|
||||
display: inline-block;
|
||||
&:after{
|
||||
content:' ';
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: $cor;
|
||||
}
|
||||
&:last-child:after{
|
||||
display: none;
|
||||
}
|
||||
@mixin separador($cor, $p-right: 5px) {
|
||||
position: relative;
|
||||
padding-right: $p-right;
|
||||
display: inline-block;
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: $cor;
|
||||
}
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mq($width, $type: min) {
|
||||
@if map_has_key($grid-breakpoints, $width) {
|
||||
$width: map_get($grid-breakpoints, $width);
|
||||
@if $type == max {
|
||||
$width: $width - 1px;
|
||||
}
|
||||
@media only screen and (#{$type}-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if map_has_key($grid-breakpoints, $width) {
|
||||
$width: map_get($grid-breakpoints, $width);
|
||||
@if $type == max {
|
||||
$width: $width - 1px;
|
||||
}
|
||||
@media only screen and (#{$type}-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mq_range($min, $max) {
|
||||
@if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) {
|
||||
|
||||
$width_max: map_get($grid-breakpoints, $max);
|
||||
$width_min: map_get($grid-breakpoints, $min);
|
||||
$width_max: $width_max - 1px;
|
||||
@media only screen and (min-width: $width_min) and (max-width:$width_max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) {
|
||||
$width_max: map_get($grid-breakpoints, $max);
|
||||
$width_min: map_get($grid-breakpoints, $min);
|
||||
$width_max: $width_max - 1px;
|
||||
@media only screen and (min-width: $width_min) and (max-width: $width_max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin z-index($nome:'',$soma:0){
|
||||
@if map_has_key($z-index, $nome) {
|
||||
z-index: (map_get($z-index,$nome )+$soma) ;
|
||||
}
|
||||
@mixin z-index($nome: "", $soma: 0) {
|
||||
@if map_has_key($z-index, $nome) {
|
||||
z-index: (map_get($z-index, $nome) + $soma);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar($width:8px,$bg-color:#eee, $trak-color:#aaa,$trak-color-hover:#999,$border-radius:0 ){
|
||||
&::-webkit-scrollbar {
|
||||
width: $width;
|
||||
}
|
||||
@mixin scrollbar(
|
||||
$width: 8px,
|
||||
$bg-color: #eee,
|
||||
$trak-color: #aaa,
|
||||
$trak-color-hover: #999,
|
||||
$border-radius: 0
|
||||
) {
|
||||
&::-webkit-scrollbar {
|
||||
width: $width;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $bg-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $bg-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $trak-color;
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
background: $trak-color-hover;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $trak-color;
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
background: $trak-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function map-get-next($map, $key, $fallback: false, $return: value) {
|
||||
|
||||
// Check if map is valid
|
||||
@if type-of($map) == map {
|
||||
|
||||
// Check if key exists in map
|
||||
@if map-has-key($map, $key) {
|
||||
|
||||
// Init index counter variable
|
||||
$i: 0;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user