Skip to content

Commit 7026c40

Browse files
pat270pat270
committed
fix(@clayui/css): Deprecate the Bootstrap 4 Carousel component. Enable them again by setting $enable-bs4-deprecate: true;.
fix(@clayui/css): Carousel deprecate `$carousel-*` variables
1 parent 4a05474 commit 7026c40

File tree

2 files changed

+212
-163
lines changed

2 files changed

+212
-163
lines changed

‎packages/clay-css/src/scss/components/_carousel.scss

Lines changed: 167 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -11,199 +11,203 @@
1111
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
1212
// is the upcoming slide in transition.
1313

14-
.carousel {
15-
position: relative;
16-
}
14+
@if ($enable-bs4-deprecated) {
15+
.carousel {
16+
position: relative;
17+
}
1718

18-
.carousel.pointer-event {
19-
touch-action: pan-y;
20-
}
19+
.carousel.pointer-event {
20+
touch-action: pan-y;
21+
}
2122

22-
.carousel-inner {
23-
overflow: hidden;
24-
position: relative;
25-
width: 100%;
23+
.carousel-inner {
24+
overflow: hidden;
25+
position: relative;
26+
width: 100%;
2627

27-
&::after {
28-
clear: both;
29-
content: '';
30-
display: block;
28+
&::after {
29+
clear: both;
30+
content: '';
31+
display: block;
32+
}
3133
}
32-
}
3334

34-
.carousel-item {
35-
backface-visibility: hidden;
36-
display: none;
37-
float: left;
38-
margin-right: -100%;
39-
position: relative;
35+
.carousel-item {
36+
backface-visibility: hidden;
37+
display: none;
38+
float: left;
39+
margin-right: -100%;
40+
position: relative;
4041

41-
@include transition($carousel-transition);
42+
@include transition($carousel-transition);
4243

43-
width: 100%;
44-
}
44+
width: 100%;
45+
}
4546

46-
.carousel-item.active,
47-
.carousel-item-next,
48-
.carousel-item-prev {
49-
display: block;
50-
}
47+
.carousel-item.active,
48+
.carousel-item-next,
49+
.carousel-item-prev {
50+
display: block;
51+
}
5152

52-
.carousel-item-next:not(.carousel-item-left),
53-
.active.carousel-item-right {
54-
transform: translateX(100%);
55-
}
53+
.carousel-item-next:not(.carousel-item-left),
54+
.active.carousel-item-right {
55+
transform: translateX(100%);
56+
}
5657

57-
.carousel-item-prev:not(.carousel-item-right),
58-
.active.carousel-item-left {
59-
transform: translateX(-100%);
60-
}
58+
.carousel-item-prev:not(.carousel-item-right),
59+
.active.carousel-item-left {
60+
transform: translateX(-100%);
61+
}
6162

62-
// Alternate transitions
63+
// Alternate transitions
6364

64-
.carousel-fade {
65-
.carousel-item {
66-
opacity: 0;
67-
transform: none;
68-
transition-property: opacity;
69-
}
65+
.carousel-fade {
66+
.carousel-item {
67+
opacity: 0;
68+
transform: none;
69+
transition-property: opacity;
70+
}
7071

71-
.carousel-item.active,
72-
.carousel-item-next.carousel-item-left,
73-
.carousel-item-prev.carousel-item-right {
74-
opacity: 1;
75-
z-index: 1;
76-
}
72+
.carousel-item.active,
73+
.carousel-item-next.carousel-item-left,
74+
.carousel-item-prev.carousel-item-right {
75+
opacity: 1;
76+
z-index: 1;
77+
}
7778

78-
.active.carousel-item-left,
79-
.active.carousel-item-right {
80-
opacity: 0;
79+
.active.carousel-item-left,
80+
.active.carousel-item-right {
81+
opacity: 0;
8182

82-
@include transition(opacity 0s $carousel-transition-duration);
83+
@include transition(opacity 0s $carousel-transition-duration);
8384

84-
z-index: 0;
85+
z-index: 0;
86+
}
8587
}
86-
}
8788

88-
// Left/right controls for nav
89+
// Left/right controls for nav
8990

90-
.carousel-control-prev,
91-
.carousel-control-next {
92-
align-items: center;
93-
bottom: 0;
94-
color: $carousel-control-color;
95-
display: flex;
96-
justify-content: center;
97-
opacity: $carousel-control-opacity;
98-
position: absolute;
99-
text-align: center;
100-
top: 0;
91+
.carousel-control-prev,
92+
.carousel-control-next {
93+
align-items: center;
94+
bottom: 0;
95+
color: $carousel-control-color;
96+
display: flex;
97+
justify-content: center;
98+
opacity: $carousel-control-opacity;
99+
position: absolute;
100+
text-align: center;
101+
top: 0;
101102

102-
@include transition($carousel-control-transition);
103+
@include transition($carousel-control-transition);
103104

104-
width: $carousel-control-width;
105-
z-index: 1;
105+
width: $carousel-control-width;
106+
z-index: 1;
106107

107-
&:hover,
108-
&:focus {
109-
color: $carousel-control-color;
110-
opacity: $carousel-control-hover-opacity;
111-
outline: 0;
112-
text-decoration: none;
108+
&:hover,
109+
&:focus {
110+
color: $carousel-control-color;
111+
opacity: $carousel-control-hover-opacity;
112+
outline: 0;
113+
text-decoration: none;
114+
}
113115
}
114-
}
115-
.carousel-control-prev {
116-
@if $enable-gradients {
117-
background-image: linear-gradient(
118-
90deg,
119-
rgba($black, 0.25),
120-
rgba($black, 0.001)
121-
);
116+
.carousel-control-prev {
117+
@if $enable-gradients {
118+
background-image: linear-gradient(
119+
90deg,
120+
rgba($black, 0.25),
121+
rgba($black, 0.001)
122+
);
123+
}
124+
125+
left: 0;
122126
}
123-
124-
left: 0;
125-
}
126-
.carousel-control-next {
127-
@if $enable-gradients {
128-
background-image: linear-gradient(
129-
270deg,
130-
rgba($black, 0.25),
131-
rgba($black, 0.001)
132-
);
127+
.carousel-control-next {
128+
@if $enable-gradients {
129+
background-image: linear-gradient(
130+
270deg,
131+
rgba($black, 0.25),
132+
rgba($black, 0.001)
133+
);
134+
}
135+
136+
right: 0;
133137
}
134138

135-
right: 0;
136-
}
137-
138-
// Icons for within
139+
// Icons for within
139140

140-
.carousel-control-prev-icon,
141-
.carousel-control-next-icon {
142-
background: no-repeat 50% / 100% 100%;
143-
display: inline-block;
144-
height: $carousel-control-icon-width;
145-
width: $carousel-control-icon-width;
146-
}
141+
.carousel-control-prev-icon,
142+
.carousel-control-next-icon {
143+
background: no-repeat 50% / 100% 100%;
144+
display: inline-block;
145+
height: $carousel-control-icon-width;
146+
width: $carousel-control-icon-width;
147+
}
147148

148-
.carousel-control-prev-icon {
149-
background-image: escape-svg($carousel-control-prev-icon-bg);
150-
}
149+
.carousel-control-prev-icon {
150+
background-image: escape-svg($carousel-control-prev-icon-bg);
151+
}
151152

152-
.carousel-control-next-icon {
153-
background-image: escape-svg($carousel-control-next-icon-bg);
154-
}
153+
.carousel-control-next-icon {
154+
background-image: escape-svg($carousel-control-next-icon-bg);
155+
}
155156

156-
// Optional indicator pips
157-
// Add an ordered list with the following class and add a list item for each
158-
// slide your carousel holds.
159-
160-
.carousel-indicators {
161-
bottom: 0;
162-
display: flex;
163-
justify-content: center;
164-
left: 0;
165-
list-style: none;
166-
margin-left: $carousel-control-width;
167-
margin-right: $carousel-control-width;
168-
padding-left: 0;
169-
position: absolute;
170-
right: 0;
171-
z-index: 15;
172-
173-
li {
174-
background-clip: padding-box;
175-
background-color: $carousel-indicator-active-bg;
176-
border-bottom: $carousel-indicator-hit-area-height solid transparent;
177-
border-top: $carousel-indicator-hit-area-height solid transparent;
178-
box-sizing: content-box;
179-
cursor: pointer;
180-
flex: 0 1 auto;
181-
height: $carousel-indicator-height;
182-
margin-left: $carousel-indicator-spacer;
183-
margin-right: $carousel-indicator-spacer;
184-
opacity: 0.5;
185-
text-indent: -999px;
186-
187-
@include transition($carousel-indicator-transition);
188-
189-
width: $carousel-indicator-width;
190-
}
191-
192-
.active {
193-
opacity: 1;
157+
// Optional indicator pips
158+
// Add an ordered list with the following class and add a list item for each
159+
// slide your carousel holds.
160+
161+
.carousel-indicators {
162+
bottom: 0;
163+
display: flex;
164+
justify-content: center;
165+
left: 0;
166+
list-style: none;
167+
margin-left: $carousel-control-width;
168+
margin-right: $carousel-control-width;
169+
padding-left: 0;
170+
position: absolute;
171+
right: 0;
172+
z-index: 15;
173+
174+
li {
175+
background-clip: padding-box;
176+
background-color: $carousel-indicator-active-bg;
177+
border-bottom: $carousel-indicator-hit-area-height
178+
solid
179+
transparent;
180+
border-top: $carousel-indicator-hit-area-height solid transparent;
181+
box-sizing: content-box;
182+
cursor: pointer;
183+
flex: 0 1 auto;
184+
height: $carousel-indicator-height;
185+
margin-left: $carousel-indicator-spacer;
186+
margin-right: $carousel-indicator-spacer;
187+
opacity: 0.5;
188+
text-indent: -999px;
189+
190+
@include transition($carousel-indicator-transition);
191+
192+
width: $carousel-indicator-width;
193+
}
194+
195+
.active {
196+
opacity: 1;
197+
}
194198
}
195-
}
196199

197-
// Optional captions
198-
199-
.carousel-caption {
200-
position: absolute;
201-
right: (100% - $carousel-caption-width) / 2;
202-
bottom: 20px;
203-
left: (100% - $carousel-caption-width) / 2;
204-
z-index: 10;
205-
padding-top: 20px;
206-
padding-bottom: 20px;
207-
color: $carousel-caption-color;
208-
text-align: center;
200+
// Optional captions
201+
202+
.carousel-caption {
203+
position: absolute;
204+
right: (100% - $carousel-caption-width) / 2;
205+
bottom: 20px;
206+
left: (100% - $carousel-caption-width) / 2;
207+
z-index: 10;
208+
padding-top: 20px;
209+
padding-bottom: 20px;
210+
color: $carousel-caption-color;
211+
text-align: center;
212+
}
209213
}

0 commit comments

Comments
 (0)