/
Carousel.css
146 lines (125 loc) · 3.26 KB
/
Carousel.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
:host(:not([hidden])) {
display: inline-block;
}
:host {
width: 100%;
min-width: 15.5rem;
height: 100%;
}
.ui5-carousel-root:focus {
outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}
.ui5-carousel-root {
height: inherit;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.ui5-carousel-viewport {
width: 100%;
height: inherit;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
}
.ui5-carousel-viewport.ui5-carousel-viewport--single {
align-items: center;
}
.ui5-carousel-content {
height: 100%;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: var(--ui5_carousel_background_color);
transition: transform 0.5s cubic-bezier(.46, 0, .44, 1);
will-change: transform;
}
.ui5-carousel-content.ui5-carousel-content-no-animation {
transition: none;
}
.ui5-carousel-content.ui5-carousel-content-has-navigation {
height: calc(100% - 1rem);
}
.ui5-carousel-item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.75rem;
box-sizing: border-box;
transition: visibility 0.5s linear;
will-change: visibility;
}
.ui5-carousel-item--hidden {
visibility: hidden;
}
.ui5-carousel-navigation-arrows {
width: 100%;
padding:0 0.5rem;
position: absolute;
top: calc(50% - var(--ui5_carousel_button_size));
left: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
pointer-events: none;
}
.ui5-carousel-navigation-arrows > [ui5-button] {
pointer-events: all;
}
.ui5-carousel-navigation-wrapper {
width: 100%;
height: 2.75rem;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background: var(--sapPageFooter_Background);
border-top: 1px solid var(--sapPageFooter_BorderColor);
}
.ui5-carousel-navigation-wrapper.ui5-carousel-navigation-with-buttons {
height: 3.5rem;
}
.ui5-carousel-navigation-button {
width: var(--ui5_carousel_button_size);
height: var(--ui5_carousel_button_size);
border-radius: 50%;
box-shadow: none;
cursor: pointer;
outline-offset: .1rem;
--_ui5_button_focused_border_radius: 50%;
}
.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button {
box-shadow: var(--sapContent_Shadow1);
}
.ui5-carousel-navigation-button--hidden {
visibility: hidden;
padding: 0;
}
.ui5-carousel-navigation {
width: 9rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.ui5-carousel-navigation-dot {
width: var(--ui5_carousel_inactive_dot_size);
height: var(--ui5_carousel_inactive_dot_size);
margin: var(--ui5_carousel_inactive_dot_margin);
border-radius: 50%;
background-color: var(--ui5_carousel_inactive_dot_background);
border: var(--ui5_carousel_inactive_dot_border);
transition: background-color .1s ease-in;
}
.ui5-carousel-navigation-dot[active] {
width: .5rem;
height: .5rem;
margin: 0 .25rem;
background-color: var(--ui5_carousel_active_dot_background);
border: var(--ui5_carousel_active_dot_border);
}