forked from M3-Academy/m3-academy-template-checkout
style(slick.scss): ajusta arrows
This commit is contained in:
Caroline Moran
parent
e0922f4c18
commit
b00b7b8594
@ -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() {
|
||||||
|
|||||||
@ -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>
|
||||||
|
After Width: | Height: | Size: 241 B |
@ -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>
|
||||||
|
After Width: | Height: | Size: 259 B |
@ -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>
|
||||||
|
After Width: | Height: | Size: 242 B |
@ -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>
|
||||||
|
After Width: | Height: | Size: 259 B |
@ -1,122 +1,136 @@
|
|||||||
/* Slider */
|
/* Slider */
|
||||||
|
|
||||||
.slick-slider {
|
.slick-slider {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-ms-touch-action: pan-y;
|
-ms-touch-action: pan-y;
|
||||||
touch-action: pan-y;
|
touch-action: pan-y;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
.slick-list {
|
.slick-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.dragging {
|
&.dragging {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
cursor: hand;
|
cursor: hand;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.slick-slider .slick-track,
|
.slick-slider .slick-track,
|
||||||
.slick-slider .slick-list {
|
.slick-slider .slick-list {
|
||||||
-webkit-transform: translate3d(0, 0, 0);
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
-moz-transform: translate3d(0, 0, 0);
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
-ms-transform: translate3d(0, 0, 0);
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
-o-transform: translate3d(0, 0, 0);
|
-o-transform: translate3d(0, 0, 0);
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-track {
|
.slick-track {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-loading & {
|
.slick-loading & {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.slick-slide {
|
.slick-slide {
|
||||||
float: left;
|
float: left;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
outline: none;
|
outline: none;
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
&.slick-loading img {
|
&.slick-loading img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&.dragging img {
|
&.dragging img {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-initialized & {
|
.slick-initialized & {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-loading & {
|
.slick-loading & {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-vertical & {
|
.slick-vertical & {
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
height: auto;
|
||||||
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;
|
||||||
}
|
}
|
||||||
.slick-dots {
|
.slick-dots {
|
||||||
li {
|
li {
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
button {
|
button {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-indent: 999999999px;
|
text-indent: 999999999px;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
:focus {
|
:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.slick-active button {
|
&.slick-active button {
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user