@telia/teddy 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/card/card-carousel.cjs +57 -21
- package/dist/components/card/card-carousel.d.ts +1 -0
- package/dist/components/card/card-carousel.js +58 -22
- package/dist/components/carousel/carousel-root.cjs +4 -4
- package/dist/components/carousel/carousel-root.js +4 -4
- package/dist/style.css +35 -32
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ const components_carousel_carouselRoot = require("../carousel/carousel-root.cjs"
|
|
|
8
8
|
const components_colorDot_index = require("../color-dot/index.cjs");
|
|
9
9
|
const utils_breakpointToNumber = require("../../utils/breakpointToNumber.cjs");
|
|
10
10
|
const tokens_breakpoint_variables = require("../../tokens/breakpoint/variables.cjs");
|
|
11
|
+
const components_text_text = require("../text/text.cjs");
|
|
11
12
|
const ImageSlider = React.forwardRef(
|
|
12
13
|
({
|
|
13
14
|
sliderRef,
|
|
@@ -18,13 +19,38 @@ const ImageSlider = React.forwardRef(
|
|
|
18
19
|
onClick = () => void 0,
|
|
19
20
|
onClickNext,
|
|
20
21
|
onClickPrev,
|
|
21
|
-
onChangeVariant = () => void 0
|
|
22
|
+
onChangeVariant = () => void 0,
|
|
23
|
+
maxDotsToShow = void 0
|
|
22
24
|
}, forwardRef) => {
|
|
23
25
|
const [selectedSlide, setSelectedSlide] = React.useState((settings == null ? void 0 : settings.initialSlide) || 0);
|
|
24
26
|
const rootCarouselClass = `${components_card_card.rootClassName}__carousel`;
|
|
25
27
|
const classes = clsx([components_card_card.styles[rootCarouselClass]], className);
|
|
26
28
|
const internalSliderRef = React.useRef(null);
|
|
27
29
|
const innerSliderRef = sliderRef || internalSliderRef;
|
|
30
|
+
const appendDots = maxDotsToShow ? getAppendDotsMethod(maxDotsToShow, selectedSlide) : void 0;
|
|
31
|
+
const defaultDettings = {
|
|
32
|
+
beforeChange: (_currentSlide, nextSlide) => {
|
|
33
|
+
setSelectedSlide(nextSlide);
|
|
34
|
+
onChangeVariant(variants[nextSlide]);
|
|
35
|
+
},
|
|
36
|
+
customPaging: (index) => {
|
|
37
|
+
const variant = variants[index];
|
|
38
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
|
|
39
|
+
},
|
|
40
|
+
swipe: false,
|
|
41
|
+
responsive: [
|
|
42
|
+
{
|
|
43
|
+
breakpoint: utils_breakpointToNumber.breakpointToNumber(tokens_breakpoint_variables.teddyBreakpointMd),
|
|
44
|
+
settings: {
|
|
45
|
+
swipe: true
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
],
|
|
49
|
+
...settings
|
|
50
|
+
};
|
|
51
|
+
if (maxDotsToShow && appendDots) {
|
|
52
|
+
defaultDettings.appendDots = appendDots;
|
|
53
|
+
}
|
|
28
54
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
29
55
|
components_carousel_carouselRoot.Carousel,
|
|
30
56
|
{
|
|
@@ -33,30 +59,40 @@ const ImageSlider = React.forwardRef(
|
|
|
33
59
|
onClickNext,
|
|
34
60
|
onClickPrev,
|
|
35
61
|
onClick,
|
|
36
|
-
settings:
|
|
37
|
-
beforeChange: (_currentSlide, nextSlide) => {
|
|
38
|
-
setSelectedSlide(nextSlide);
|
|
39
|
-
onChangeVariant(variants[nextSlide]);
|
|
40
|
-
},
|
|
41
|
-
customPaging: (index) => {
|
|
42
|
-
const variant = variants[index];
|
|
43
|
-
return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
|
|
44
|
-
},
|
|
45
|
-
swipe: false,
|
|
46
|
-
responsive: [
|
|
47
|
-
{
|
|
48
|
-
breakpoint: utils_breakpointToNumber.breakpointToNumber(tokens_breakpoint_variables.teddyBreakpointMd),
|
|
49
|
-
settings: {
|
|
50
|
-
swipe: true
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
],
|
|
54
|
-
...settings
|
|
55
|
-
},
|
|
62
|
+
settings: defaultDettings,
|
|
56
63
|
children
|
|
57
64
|
}
|
|
58
65
|
) });
|
|
59
66
|
}
|
|
60
67
|
);
|
|
68
|
+
const getAppendDotsMethod = (maxDotsToShow, selectedSlide) => {
|
|
69
|
+
return (dots) => {
|
|
70
|
+
const dotsArray = React.Children.toArray(dots);
|
|
71
|
+
const totalDots = dotsArray.length;
|
|
72
|
+
if (totalDots <= maxDotsToShow) {
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsx("ul", { children: dotsArray });
|
|
74
|
+
}
|
|
75
|
+
let startIndex = 0;
|
|
76
|
+
let endIndex = maxDotsToShow;
|
|
77
|
+
const halfMaxDots = Math.floor(maxDotsToShow / 2);
|
|
78
|
+
if (selectedSlide >= halfMaxDots) {
|
|
79
|
+
startIndex = selectedSlide - halfMaxDots;
|
|
80
|
+
endIndex = startIndex + maxDotsToShow;
|
|
81
|
+
if (endIndex > totalDots) {
|
|
82
|
+
endIndex = totalDots;
|
|
83
|
+
startIndex = totalDots - maxDotsToShow;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
const visibleDots = dotsArray.slice(startIndex, endIndex);
|
|
87
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100-medium", style: { visibility: startIndex > 0 ? "visible" : "hidden" }, children: "..." }) }),
|
|
89
|
+
visibleDots,
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100-medium", style: { visibility: endIndex < totalDots ? "visible" : "hidden" }, children: [
|
|
91
|
+
"+",
|
|
92
|
+
endIndex < totalDots ? totalDots - endIndex : 0
|
|
93
|
+
] }) })
|
|
94
|
+
] });
|
|
95
|
+
};
|
|
96
|
+
};
|
|
61
97
|
ImageSlider.displayName = "ImageSlider";
|
|
62
98
|
exports.ImageSlider = ImageSlider;
|
|
@@ -15,5 +15,6 @@ export interface ImageSliderProps {
|
|
|
15
15
|
onClickNext?: () => void;
|
|
16
16
|
onClickPrev?: () => void;
|
|
17
17
|
onChangeVariant?: (variant: ImageSliderVariant) => void;
|
|
18
|
+
maxDotsToShow?: number;
|
|
18
19
|
}
|
|
19
20
|
export declare const ImageSlider: React.ForwardRefExoticComponent<ImageSliderProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React__default, { useState, useRef } from "react";
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import { s as styles, rootClassName } from "./card.js";
|
|
@@ -6,6 +6,7 @@ import { Carousel } from "../carousel/carousel-root.js";
|
|
|
6
6
|
import { ColorDot } from "../color-dot/index.js";
|
|
7
7
|
import { breakpointToNumber } from "../../utils/breakpointToNumber.js";
|
|
8
8
|
import { teddyBreakpointMd } from "../../tokens/breakpoint/variables.js";
|
|
9
|
+
import { Text } from "../text/text.js";
|
|
9
10
|
const ImageSlider = React__default.forwardRef(
|
|
10
11
|
({
|
|
11
12
|
sliderRef,
|
|
@@ -16,13 +17,38 @@ const ImageSlider = React__default.forwardRef(
|
|
|
16
17
|
onClick = () => void 0,
|
|
17
18
|
onClickNext,
|
|
18
19
|
onClickPrev,
|
|
19
|
-
onChangeVariant = () => void 0
|
|
20
|
+
onChangeVariant = () => void 0,
|
|
21
|
+
maxDotsToShow = void 0
|
|
20
22
|
}, forwardRef) => {
|
|
21
23
|
const [selectedSlide, setSelectedSlide] = useState((settings == null ? void 0 : settings.initialSlide) || 0);
|
|
22
24
|
const rootCarouselClass = `${rootClassName}__carousel`;
|
|
23
25
|
const classes = clsx([styles[rootCarouselClass]], className);
|
|
24
26
|
const internalSliderRef = useRef(null);
|
|
25
27
|
const innerSliderRef = sliderRef || internalSliderRef;
|
|
28
|
+
const appendDots = maxDotsToShow ? getAppendDotsMethod(maxDotsToShow, selectedSlide) : void 0;
|
|
29
|
+
const defaultDettings = {
|
|
30
|
+
beforeChange: (_currentSlide, nextSlide) => {
|
|
31
|
+
setSelectedSlide(nextSlide);
|
|
32
|
+
onChangeVariant(variants[nextSlide]);
|
|
33
|
+
},
|
|
34
|
+
customPaging: (index) => {
|
|
35
|
+
const variant = variants[index];
|
|
36
|
+
return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
|
|
37
|
+
},
|
|
38
|
+
swipe: false,
|
|
39
|
+
responsive: [
|
|
40
|
+
{
|
|
41
|
+
breakpoint: breakpointToNumber(teddyBreakpointMd),
|
|
42
|
+
settings: {
|
|
43
|
+
swipe: true
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
...settings
|
|
48
|
+
};
|
|
49
|
+
if (maxDotsToShow && appendDots) {
|
|
50
|
+
defaultDettings.appendDots = appendDots;
|
|
51
|
+
}
|
|
26
52
|
return /* @__PURE__ */ jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsx(
|
|
27
53
|
Carousel,
|
|
28
54
|
{
|
|
@@ -31,31 +57,41 @@ const ImageSlider = React__default.forwardRef(
|
|
|
31
57
|
onClickNext,
|
|
32
58
|
onClickPrev,
|
|
33
59
|
onClick,
|
|
34
|
-
settings:
|
|
35
|
-
beforeChange: (_currentSlide, nextSlide) => {
|
|
36
|
-
setSelectedSlide(nextSlide);
|
|
37
|
-
onChangeVariant(variants[nextSlide]);
|
|
38
|
-
},
|
|
39
|
-
customPaging: (index) => {
|
|
40
|
-
const variant = variants[index];
|
|
41
|
-
return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
|
|
42
|
-
},
|
|
43
|
-
swipe: false,
|
|
44
|
-
responsive: [
|
|
45
|
-
{
|
|
46
|
-
breakpoint: breakpointToNumber(teddyBreakpointMd),
|
|
47
|
-
settings: {
|
|
48
|
-
swipe: true
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
],
|
|
52
|
-
...settings
|
|
53
|
-
},
|
|
60
|
+
settings: defaultDettings,
|
|
54
61
|
children
|
|
55
62
|
}
|
|
56
63
|
) });
|
|
57
64
|
}
|
|
58
65
|
);
|
|
66
|
+
const getAppendDotsMethod = (maxDotsToShow, selectedSlide) => {
|
|
67
|
+
return (dots) => {
|
|
68
|
+
const dotsArray = React__default.Children.toArray(dots);
|
|
69
|
+
const totalDots = dotsArray.length;
|
|
70
|
+
if (totalDots <= maxDotsToShow) {
|
|
71
|
+
return /* @__PURE__ */ jsx("ul", { children: dotsArray });
|
|
72
|
+
}
|
|
73
|
+
let startIndex = 0;
|
|
74
|
+
let endIndex = maxDotsToShow;
|
|
75
|
+
const halfMaxDots = Math.floor(maxDotsToShow / 2);
|
|
76
|
+
if (selectedSlide >= halfMaxDots) {
|
|
77
|
+
startIndex = selectedSlide - halfMaxDots;
|
|
78
|
+
endIndex = startIndex + maxDotsToShow;
|
|
79
|
+
if (endIndex > totalDots) {
|
|
80
|
+
endIndex = totalDots;
|
|
81
|
+
startIndex = totalDots - maxDotsToShow;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
const visibleDots = dotsArray.slice(startIndex, endIndex);
|
|
85
|
+
return /* @__PURE__ */ jsxs("ul", { children: [
|
|
86
|
+
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100-medium", style: { visibility: startIndex > 0 ? "visible" : "hidden" }, children: "..." }) }),
|
|
87
|
+
visibleDots,
|
|
88
|
+
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100-medium", style: { visibility: endIndex < totalDots ? "visible" : "hidden" }, children: [
|
|
89
|
+
"+",
|
|
90
|
+
endIndex < totalDots ? totalDots - endIndex : 0
|
|
91
|
+
] }) })
|
|
92
|
+
] });
|
|
93
|
+
};
|
|
94
|
+
};
|
|
59
95
|
ImageSlider.displayName = "ImageSlider";
|
|
60
96
|
export {
|
|
61
97
|
ImageSlider
|
|
@@ -7,10 +7,10 @@ const Slider = require("react-slick");
|
|
|
7
7
|
require("../../assets/sprite.c3af21af-teddy.svg");
|
|
8
8
|
const components_icon_icon = require("../icon/icon.cjs");
|
|
9
9
|
const styles = {
|
|
10
|
-
"teddy-carousel": "_teddy-
|
|
11
|
-
"teddy-carousel__arrow": "_teddy-
|
|
12
|
-
"teddy-carousel__item": "_teddy-
|
|
13
|
-
"teddy-carousel--sm": "_teddy-carousel--
|
|
10
|
+
"teddy-carousel": "_teddy-carousel_xzfbe_2",
|
|
11
|
+
"teddy-carousel__arrow": "_teddy-carousel__arrow_xzfbe_9",
|
|
12
|
+
"teddy-carousel__item": "_teddy-carousel__item_xzfbe_21",
|
|
13
|
+
"teddy-carousel--sm": "_teddy-carousel--sm_xzfbe_102"
|
|
14
14
|
};
|
|
15
15
|
const rootClassName = "teddy-carousel";
|
|
16
16
|
const CustomArrow = ({
|
|
@@ -5,10 +5,10 @@ import Slider from "react-slick";
|
|
|
5
5
|
import "../../assets/sprite.c3af21af-teddy.svg";
|
|
6
6
|
import { Icon } from "../icon/icon.js";
|
|
7
7
|
const styles = {
|
|
8
|
-
"teddy-carousel": "_teddy-
|
|
9
|
-
"teddy-carousel__arrow": "_teddy-
|
|
10
|
-
"teddy-carousel__item": "_teddy-
|
|
11
|
-
"teddy-carousel--sm": "_teddy-carousel--
|
|
8
|
+
"teddy-carousel": "_teddy-carousel_xzfbe_2",
|
|
9
|
+
"teddy-carousel__arrow": "_teddy-carousel__arrow_xzfbe_9",
|
|
10
|
+
"teddy-carousel__item": "_teddy-carousel__item_xzfbe_21",
|
|
11
|
+
"teddy-carousel--sm": "_teddy-carousel--sm_xzfbe_102"
|
|
12
12
|
};
|
|
13
13
|
const rootClassName = "teddy-carousel";
|
|
14
14
|
const CustomArrow = ({
|
package/dist/style.css
CHANGED
|
@@ -2144,14 +2144,14 @@
|
|
|
2144
2144
|
--teddy-color-brand-core-purple: var(--teddy-color-purple-550);
|
|
2145
2145
|
--teddy-color-brand-deep-purple: var(--teddy-color-purple-900);
|
|
2146
2146
|
}
|
|
2147
|
-
._teddy-
|
|
2147
|
+
._teddy-carousel_xzfbe_2 {
|
|
2148
2148
|
width: 100%;
|
|
2149
2149
|
min-width: 10rem;
|
|
2150
2150
|
max-width: 15rem;
|
|
2151
2151
|
height: 288px;
|
|
2152
2152
|
margin: 0 auto 2rem;
|
|
2153
2153
|
}
|
|
2154
|
-
._teddy-
|
|
2154
|
+
._teddy-carousel__arrow_xzfbe_9 {
|
|
2155
2155
|
display: flex;
|
|
2156
2156
|
justify-content: center;
|
|
2157
2157
|
align-items: center;
|
|
@@ -2163,22 +2163,22 @@
|
|
|
2163
2163
|
transition-timing-function: var(--teddy-motion-easing-ease-in-out);
|
|
2164
2164
|
transition-property: background-color, color;
|
|
2165
2165
|
}
|
|
2166
|
-
._teddy-
|
|
2166
|
+
._teddy-carousel__item_xzfbe_21 {
|
|
2167
2167
|
display: flex !important;
|
|
2168
2168
|
justify-content: center;
|
|
2169
2169
|
}
|
|
2170
|
-
._teddy-
|
|
2171
|
-
._teddy-
|
|
2170
|
+
._teddy-carousel_xzfbe_2 .slick-prev:before,
|
|
2171
|
+
._teddy-carousel_xzfbe_2 .slick-next:before {
|
|
2172
2172
|
content: "";
|
|
2173
2173
|
}
|
|
2174
|
-
._teddy-
|
|
2174
|
+
._teddy-carousel_xzfbe_2 .slick-disabled {
|
|
2175
2175
|
cursor: initial;
|
|
2176
2176
|
opacity: 0.3;
|
|
2177
2177
|
}
|
|
2178
|
-
._teddy-
|
|
2178
|
+
._teddy-carousel_xzfbe_2 .slick-track {
|
|
2179
2179
|
display: flex;
|
|
2180
2180
|
}
|
|
2181
|
-
._teddy-
|
|
2181
|
+
._teddy-carousel_xzfbe_2 .slick-slide > div {
|
|
2182
2182
|
display: grid;
|
|
2183
2183
|
place-items: center;
|
|
2184
2184
|
width: 80%;
|
|
@@ -2186,82 +2186,85 @@
|
|
|
2186
2186
|
height: 260px;
|
|
2187
2187
|
padding: 0px;
|
|
2188
2188
|
}
|
|
2189
|
-
._teddy-
|
|
2189
|
+
._teddy-carousel_xzfbe_2 .slick-slide img {
|
|
2190
2190
|
max-width: 10rem;
|
|
2191
2191
|
max-height: 12.5rem;
|
|
2192
2192
|
object-fit: contain;
|
|
2193
2193
|
width: 100%;
|
|
2194
2194
|
height: 100%;
|
|
2195
2195
|
}
|
|
2196
|
-
._teddy-
|
|
2196
|
+
._teddy-carousel_xzfbe_2 .slick-next {
|
|
2197
2197
|
right: 0;
|
|
2198
2198
|
color: var(--teddy-color-purple-700);
|
|
2199
2199
|
}
|
|
2200
|
-
._teddy-
|
|
2200
|
+
._teddy-carousel_xzfbe_2 .slick-prev {
|
|
2201
2201
|
left: 0;
|
|
2202
2202
|
color: var(--teddy-color-purple-700);
|
|
2203
2203
|
}
|
|
2204
|
-
._teddy-
|
|
2205
|
-
._teddy-
|
|
2206
|
-
._teddy-
|
|
2207
|
-
._teddy-
|
|
2204
|
+
._teddy-carousel_xzfbe_2 .slick-prev:focus-visible,
|
|
2205
|
+
._teddy-carousel_xzfbe_2 .slick-prev:active,
|
|
2206
|
+
._teddy-carousel_xzfbe_2 .slick-next:active,
|
|
2207
|
+
._teddy-carousel_xzfbe_2 .slick-next:focus-visible {
|
|
2208
2208
|
color: var(--teddy-color-text-interactive-primary-active);
|
|
2209
2209
|
background-color: var(--teddy-color-border-interactive-primary-negative-hover);
|
|
2210
2210
|
}
|
|
2211
|
-
._teddy-
|
|
2212
|
-
._teddy-
|
|
2211
|
+
._teddy-carousel_xzfbe_2 .slick-prev:hover,
|
|
2212
|
+
._teddy-carousel_xzfbe_2 .slick-next:hover {
|
|
2213
2213
|
color: var(--teddy-color-text-interactive-primary-hover);
|
|
2214
2214
|
background-color: var(--teddy-color-background-interactive-transparent-hover);
|
|
2215
2215
|
}
|
|
2216
|
-
._teddy-
|
|
2217
|
-
bottom: -
|
|
2216
|
+
._teddy-carousel_xzfbe_2 .slick-dots {
|
|
2217
|
+
bottom: -1.4rem;
|
|
2218
|
+
justify-content: center;
|
|
2218
2219
|
margin: 0;
|
|
2219
2220
|
padding: 0;
|
|
2220
2221
|
}
|
|
2221
|
-
._teddy-
|
|
2222
|
+
._teddy-carousel_xzfbe_2 .slick-dots button {
|
|
2222
2223
|
width: 24px;
|
|
2223
2224
|
height: 24px;
|
|
2224
2225
|
}
|
|
2225
|
-
._teddy-
|
|
2226
|
+
._teddy-carousel_xzfbe_2 .slick-dots button:before {
|
|
2226
2227
|
width: 24px;
|
|
2227
2228
|
height: 24px;
|
|
2228
2229
|
}
|
|
2229
|
-
._teddy-
|
|
2230
|
+
._teddy-carousel_xzfbe_2 .slick-dots button:hover:before {
|
|
2230
2231
|
color: var(--teddy-color-purple-700);
|
|
2231
2232
|
}
|
|
2232
|
-
._teddy-
|
|
2233
|
+
._teddy-carousel_xzfbe_2 .slick-dots .slick-active button:before {
|
|
2233
2234
|
color: var(--teddy-color-purple-700);
|
|
2234
2235
|
}
|
|
2235
|
-
._teddy-
|
|
2236
|
+
._teddy-carousel_xzfbe_2 .slick-dots li {
|
|
2236
2237
|
width: 24px;
|
|
2237
2238
|
height: 24px;
|
|
2238
2239
|
margin: 0;
|
|
2239
2240
|
padding: 0;
|
|
2241
|
+
display: inline-flex;
|
|
2242
|
+
align-items: center;
|
|
2240
2243
|
}
|
|
2241
|
-
._teddy-
|
|
2244
|
+
._teddy-carousel_xzfbe_2 .slick-dots li button:before {
|
|
2242
2245
|
font-size: 1rem;
|
|
2243
2246
|
}
|
|
2244
|
-
._teddy-carousel--
|
|
2247
|
+
._teddy-carousel--sm_xzfbe_102 {
|
|
2245
2248
|
height: 180px;
|
|
2246
2249
|
}
|
|
2247
|
-
._teddy-carousel--
|
|
2250
|
+
._teddy-carousel--sm_xzfbe_102 .slick-slide > div {
|
|
2248
2251
|
height: 170px;
|
|
2249
2252
|
}
|
|
2250
|
-
._teddy-carousel--
|
|
2253
|
+
._teddy-carousel--sm_xzfbe_102 .slick-slide img {
|
|
2251
2254
|
max-width: 8rem;
|
|
2252
2255
|
max-height: 10rem;
|
|
2253
2256
|
}
|
|
2254
|
-
._teddy-carousel--
|
|
2257
|
+
._teddy-carousel--sm_xzfbe_102 .slick-next {
|
|
2255
2258
|
right: -0.5rem;
|
|
2256
2259
|
}
|
|
2257
|
-
._teddy-carousel--
|
|
2260
|
+
._teddy-carousel--sm_xzfbe_102 .slick-prev {
|
|
2258
2261
|
left: -0.5rem;
|
|
2259
2262
|
}
|
|
2260
2263
|
@media (min-width: 600px) {
|
|
2261
|
-
._teddy-carousel--
|
|
2264
|
+
._teddy-carousel--sm_xzfbe_102 .slick-next {
|
|
2262
2265
|
right: 0rem;
|
|
2263
2266
|
}
|
|
2264
|
-
._teddy-carousel--
|
|
2267
|
+
._teddy-carousel--sm_xzfbe_102 .slick-prev {
|
|
2265
2268
|
left: 0rem;
|
|
2266
2269
|
}
|
|
2267
2270
|
}._teddy-channel-button_1hacf_1 {
|