diff --git a/checkout/gulpfile.js b/checkout/gulpfile.js index aef4e43..ccb4ca1 100644 --- a/checkout/gulpfile.js +++ b/checkout/gulpfile.js @@ -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() { diff --git a/checkout/src/arquivos/assets/svgs/arrow-left-M3Academy.svg b/checkout/src/arquivos/assets/svgs/arrow-left-M3Academy.svg new file mode 100644 index 0000000..94c5dc4 --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/arrow-left-M3Academy.svg @@ -0,0 +1,3 @@ + + + diff --git a/checkout/src/arquivos/assets/svgs/arrow-left-mini-M3Academy.svg b/checkout/src/arquivos/assets/svgs/arrow-left-mini-M3Academy.svg new file mode 100644 index 0000000..7e7106e --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/arrow-left-mini-M3Academy.svg @@ -0,0 +1,3 @@ + + + diff --git a/checkout/src/arquivos/assets/svgs/arrow-right-M3Academy.svg b/checkout/src/arquivos/assets/svgs/arrow-right-M3Academy.svg new file mode 100644 index 0000000..3632b66 --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/arrow-right-M3Academy.svg @@ -0,0 +1,3 @@ + + + diff --git a/checkout/src/arquivos/assets/svgs/arrow-right-mini-M3Academy.svg b/checkout/src/arquivos/assets/svgs/arrow-right-mini-M3Academy.svg new file mode 100644 index 0000000..74e9571 --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/arrow-right-mini-M3Academy.svg @@ -0,0 +1,3 @@ + + + diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 306d3d0..74460fb 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -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; + } + } + } }