Gabriel_Lehmann/m3-academy-template-checkout-gabriel-lehmann
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/**", src: "src/arquivos/assets/imgs/**",
watch: "src/arquivos/assets/imgs/**", watch: "src/arquivos/assets/imgs/**",
}, },
svg: {
src: "src/arquivos/assets/svgs/**",
watch: "src/arquivos/assets/svgs/**",
},
fonts: { fonts: {
src: "src/arquivos/assets/fonts/**.*", src: "src/arquivos/assets/fonts/**.*",
}, },
@ -39,6 +43,7 @@ const paths = {
outputStatic: "dist/arquivos", outputStatic: "dist/arquivos",
outputStaticFonts: "dist/arquivos/fonts", outputStaticFonts: "dist/arquivos/fonts",
outputStaticImages: "dist/arquivos/imgs", outputStaticImages: "dist/arquivos/imgs",
outputStaticSvgs: "dist/arquivos/svgs",
tmp: ".temp", tmp: ".temp",
}; };
@ -107,6 +112,9 @@ function images() {
.pipe(gulp.dest(paths.outputStaticImages)) .pipe(gulp.dest(paths.outputStaticImages))
.pipe(connect.reload()); .pipe(connect.reload());
} }
function svgs() {
return gulp.src(paths.svg.watch).pipe(gulp.dest(paths.outputStaticSvgs)).pipe(connect.reload());
}
function customFonts() { function customFonts() {
return gulp return gulp
.src(paths.fonts.src) .src(paths.fonts.src)
@ -127,6 +135,7 @@ function watch() {
gulp.watch(paths.styles.watch, { ignoreInitial: false }, styles); gulp.watch(paths.styles.watch, { ignoreInitial: false }, styles);
gulp.watch(paths.fonts.src, { ignoreInitial: false }, customFonts); gulp.watch(paths.fonts.src, { ignoreInitial: false }, customFonts);
gulp.watch(paths.img.src, { ignoreInitial: false }, images); gulp.watch(paths.img.src, { ignoreInitial: false }, images);
gulp.watch(paths.svg.src, { ignoreInitial: false }, svgs);
} }
function devServer() { 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

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

@ -96,6 +96,20 @@
border: 1px solid transparent; 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 { .slick-arrow.slick-hidden {
display: none; display: none;
} }