Gabriel_Ferraz_Nogueira/m3-academy-template-checkout-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(slick.scss): ajusta arrows

Browse Source
This commit is contained in:
Caroline Moran 2022-12-06 18:37:51 -04:00
parent e0922f4c18
commit b00b7b8594
6 changed files with 129 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
checkout/gulpfile.js
View File

@ -32,6 +32,10 @@ const paths = {
src: "src/arquivos/assets/imgs/**",
watch: "src/arquivos/assets/imgs/**",
},
svg: {
src: "src/arquivos/assets/svgs/**",
watch: "src/arquivos/assets/svgs/**",
},
fonts: {
src: "src/arquivos/assets/fonts/**.*",
},
@ -39,6 +43,7 @@ const paths = {
outputStatic: "dist/arquivos",
outputStaticFonts: "dist/arquivos/fonts",
outputStaticImages: "dist/arquivos/imgs",
outputStaticSvgs: "dist/arquivos/svgs",
tmp: ".temp",
};
@ -107,6 +112,9 @@ function images() {
.pipe(gulp.dest(paths.outputStaticImages))
.pipe(connect.reload());
}
function svgs() {
return gulp.src(paths.svg.watch).pipe(gulp.dest(paths.outputStaticSvgs)).pipe(connect.reload());
}
function customFonts() {
return gulp
.src(paths.fonts.src)
@ -127,6 +135,7 @@ function watch() {
gulp.watch(paths.styles.watch, { ignoreInitial: false }, styles);
gulp.watch(paths.fonts.src, { ignoreInitial: false }, customFonts);
gulp.watch(paths.img.src, { ignoreInitial: false }, images);
gulp.watch(paths.svg.src, { ignoreInitial: false }, svgs);
}
function devServer() {

3
checkout/src/arquivos/assets/svgs/arrow-left-M3Academy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="58" viewBox="0 0 26 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.25454e-06 28.8415L25.3707 58L26 53.3516L5.34947 28.8415L26 4.64845L25.3707 -3.2965e-08L4.25454e-06 28.8415Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

3
checkout/src/arquivos/assets/svgs/arrow-left-mini-M3Academy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="30" viewBox="0 0 14 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-1.85934e-05 14.6557L13.3144 29.4724L13.6447 27.1103L2.80736 14.6557L13.6447 2.36209L13.3144 -1.58741e-06L-1.85934e-05 14.6557Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

3
checkout/src/arquivos/assets/svgs/arrow-right-M3Academy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="27" height="59" viewBox="0 0 27 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.6445 29.631L1.27388 0.472534L0.64453 5.12098L21.295 29.631L0.644519 53.8241L1.27387 58.4725L26.6445 29.631Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 242 B

3
checkout/src/arquivos/assets/svgs/arrow-right-mini-M3Academy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="30" viewBox="0 0 14 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6447 14.8168L0.33028 4.58192e-05L-5.61424e-07 2.36213L10.8373 14.8168L-6.44363e-06 27.1104L0.330273 29.4725L13.6447 14.8168Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

202
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -1,122 +1,136 @@
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
&:before,
&:after {
content: "";
display: table;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
outline: none;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
float: left;
height: 100%;
min-height: 1px;
outline: none;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
display: none;
&.dragging img {
pointer-events: none;
}
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow {
font-size: 0;
position: absolute;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
left: 10px;
}
.slick-next {
z-index: 4;
right: 10px;
}
.slick-arrow.slick-hidden {
display: none;
display: none;
}
.slick-dots {
li {
margin: 0.5em;
button {
overflow: hidden;
text-indent: 999999999px;
height: 1em;
width: 1em;
border-radius: 1em;
background-color: #fff;
:focus {
outline: none;
}
}
&.slick-active button {
&:focus {
outline: none;
}
}
}
li {
margin: 0.5em;
button {
overflow: hidden;
text-indent: 999999999px;
height: 1em;
width: 1em;
border-radius: 1em;
background-color: #fff;
:focus {
outline: none;
}
}
&.slick-active button {
&:focus {
outline: none;
}
}
}
}