Productos Hot
HTML
FloorLiner
CupFone®
Cargo/Trunk Liner
Side Window Deflectors
MudFlap
Stone & Bug Deflector
SunShade
TechLiner®
CSS
/* Gallery Slider Component */ .gallery { /* Gallery Slider */ &-slider { display: flex; margin: 0 -20px 0 0 !important; padding: 0 0 35px 29px !important; overflow-x: scroll; @media screen and (min-width: 48em) { width: auto; overflow-x: hide; padding: 0 !important; margin:0 !important; height: auto !important; } @media screen and (max-width: 47.938em) { scroll-snap-type: x mandatory; padding-bottom: 10px !important; } // Gallery Slider Container &-container { position: relative; // margin: 0 0 30px 0; margin: 0 -13px 30px -13px; padding: 20px 13px; background: white; @media screen and (min-width: 47.938em) { margin: 0 0 auto 0; } @media (min-width: 48em) { padding: 20px 30px; } @media (min-width: 1300px) { padding: 20px 83px; } } // Gallery Slider buttons previous and next button similar styles &-btn { position: absolute; z-index: 100; top: 50%; padding: 0; width: 40px; height: 40px; transform: translateY(-50%); background: none; /*project color*/ border-radius: 100%; border: none; cursor: pointer; transition: ease-in 0.1s; // if buttons have disabled attr &-btn[disabled=""]{ background:#d1d1d1; } @media screen and (min-width: 48em) { width: 60px; height: 60px; } &::before { border-left: 0; border-right: 0; border-style: solid; border-width: 0.25em 0.25em 0 0; content: ''; display: inline-block; height: 0.6em; vertical-align: top; width: 0.6em; transition: all 0.2s linear; } &:hover, &:focus { background: none; /*project color*/ .icon { fill: black; } } // Gallery Slider previous only styles &--prev { left: -25px; @media screen and (min-width: 48em) { left: -9px; } @media (min-width: 1300px) { left: 0; } &::before { transform: rotate(-135deg); } } // Gallery Slider Next button only styles &--next { right: -25px; @media screen and (min-width: 48em) { right: -9px; } @media (min-width: 1300px) { right: 0; } &::before { transform: rotate(45deg); } } &--prev, &--next { .icon { width: 2em; height: 2em; fill: black; stroke: black; } } } // Gallery Slider slide item sizes > * { width: 36%; flex: 0 0 auto; @media screen and (min-width: 60em) { width: 33.3333%; } @media screen and (min-width: 80em) { width: 25%; } } // Gallery Slider title &-title { display: flex; justify-content: center; text-align: center; align-items: center; font-size: 24px; margin:0 0 20px 0; @media (min-width: 48em) { & { justify-content: flex-start; text-align: left; } } @media screen and (max-width: 47.938em) { padding: 10px; } h2 { margin: 0 !important; font-size: 1.5rem; @media (min-width: 60em) { & { font-size: 1.5rem; } } } // Gallery Slider title icon .gallery-slider-title__icon { display: flex; align-self: center; height: 21px !important; max-width: 21px; margin:0 10px; .icon{ width:100%; height:100%; } } } } /* the slide styles */ // Gallery Slider slide &-slide { display: flex; flex-flow: column; width: 35%; padding: 0 10px 0px 10px; flex: 0 0 auto; @media (min-width: 48em) { width: 50%; } @media (min-width: 1130px) { width: 33%; } @media (min-width: 1350px) { width: 25%; } @media screen and (max-width: 47.938em) { scroll-snap-align: start; } &:hover { cursor: pointer; } // Gallery Slider image &__image { padding: 40% 0; align-items: center; justify-content: center; background: no-repeat center / cover; @media screen and (min-width: 48em) { padding: 40% 0; align-items: center; justify-content: center; background: no-repeat center / cover; } } // Gallery Slider slide item ghost button .ghost-btn { margin-top: auto; color: black !important; &:hover, &:focus { margin-top: auto; color:black !important; } } // Gallery Slider product info &__info { display: flex; flex-flow: column; flex-grow: 1; // Gallery Slider slide item title &__title { margin: 5px auto; font-size: 0.875rem; font-weight:black; padding-bottom: 10px; text-align: center; letter-spacing:.26px; } // Gallery Slider slide item description &__description { margin: 0 0 6px 0; color: #8f8f8f; font-size: 14px; font-weight:black; } } } &-supplemental-info { display: flex; align-items: center; justify-content: flex-end; font-size: 12px; font-weight: black; color: #bdc0c4; } &-btn { @extend .ghost-btn; width: auto; border-radius: 5px; border-color: #858789 !important; font-size: 0.75rem; letter-spacing: 1px; font-weight:600 !important; &:hover, &:focus{ border-color:#000 !important; } } }
