@mantine-vue/carousel 1.1.2

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.
Files changed (15) hide show
  1. package/cjs/index.cjs +586 -0
  2. package/cjs/index.cjs.map +1 -0
  3. package/esm/index.mjs +560 -0
  4. package/esm/index.mjs.map +1 -0
  5. package/lib/Carousel.context.d.ts +5 -0
  6. package/lib/Carousel.d.ts +66 -0
  7. package/lib/CarouselSlide.d.ts +161 -0
  8. package/lib/CarouselVariables.d.ts +67 -0
  9. package/lib/get-chevron-rotation.d.ts +6 -0
  10. package/lib/get-indicator-navigation.d.ts +3 -0
  11. package/lib/index.d.mts +6 -0
  12. package/lib/index.d.ts +6 -0
  13. package/package.json +48 -0
  14. package/styles.css +173 -0
  15. package/styles.layer.css +175 -0
package/styles.layer.css ADDED
@@ -0,0 +1,175 @@
1
+ @layer mantine {
2
+ ._root_avx3r_1 {
3
+ --carousel-height: auto;
4
+ position: relative;
5
+ }
6
+
7
+ ._viewport_avx3r_6 {
8
+ height: var(--carousel-height);
9
+ overflow: hidden;
10
+ }
11
+
12
+ ._viewport_avx3r_6[data-type='container'] {
13
+ container: carousel / inline-size;
14
+ }
15
+
16
+ ._container_avx3r_15 {
17
+ display: flex;
18
+ flex-direction: row;
19
+ height: var(--carousel-height);
20
+ }
21
+
22
+ :where([data-include-gap-in-size]) ._container_avx3r_15:where([data-orientation='vertical']) {
23
+ margin-bottom: calc(var(--carousel-slide-gap) * -1);
24
+ }
25
+
26
+ :where([data-include-gap-in-size]) ._container_avx3r_15:where([data-orientation='horizontal']) {
27
+ margin-inline-end: calc(var(--carousel-slide-gap) * -1);
28
+ }
29
+
30
+ ._container_avx3r_15:where([data-orientation='vertical']) {
31
+ flex-direction: column;
32
+ }
33
+
34
+ ._controls_avx3r_35 {
35
+ position: absolute;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: space-between;
39
+ z-index: 1;
40
+ pointer-events: none;
41
+ }
42
+
43
+ ._controls_avx3r_35:where([data-orientation='vertical']) {
44
+ inset-inline-start: calc(50% - var(--carousel-control-size) / 2);
45
+ top: 0;
46
+ bottom: 0;
47
+ flex-direction: column;
48
+ padding: var(--carousel-controls-offset) 0;
49
+ }
50
+
51
+ ._controls_avx3r_35:where([data-orientation='horizontal']) {
52
+ inset-inline-start: 0;
53
+ inset-inline-end: 0;
54
+ top: calc(50% - var(--carousel-control-size) / 2);
55
+ flex-direction: row;
56
+ padding: 0 var(--carousel-controls-offset);
57
+ }
58
+
59
+ ._control_avx3r_35 {
60
+ display: flex;
61
+ justify-content: center;
62
+ align-items: center;
63
+ min-width: var(--carousel-control-size);
64
+ min-height: var(--carousel-control-size);
65
+ border-radius: var(--carousel-control-size);
66
+ pointer-events: all;
67
+ background-color: var(--mantine-color-white);
68
+ color: var(--mantine-color-black);
69
+ box-shadow: var(--mantine-shadow-md);
70
+ border: 1px solid var(--mantine-color-gray-3);
71
+ transition: opacity 100ms ease;
72
+ }
73
+
74
+ :where([data-mantine-color-scheme='light']) ._control_avx3r_35 {
75
+ opacity: 0.85;
76
+ }
77
+
78
+ :where([data-mantine-color-scheme='dark']) ._control_avx3r_35 {
79
+ opacity: 0.65;
80
+ }
81
+
82
+ @media (hover: hover) {
83
+
84
+ ._control_avx3r_35:hover {
85
+ opacity: 1;
86
+ }
87
+ }
88
+
89
+ @media (hover: none) {
90
+
91
+ ._control_avx3r_35:active {
92
+ opacity: 1;
93
+ }
94
+ }
95
+
96
+ ._indicators_avx3r_87 {
97
+ position: absolute;
98
+ display: flex;
99
+ justify-content: center;
100
+ gap: calc(0.5rem * var(--mantine-scale));
101
+ pointer-events: none;
102
+ }
103
+
104
+ ._indicators_avx3r_87:where([data-orientation='vertical']) {
105
+ bottom: 0;
106
+ top: 0;
107
+ inset-inline-end: var(--mantine-spacing-md);
108
+ flex-direction: column;
109
+ }
110
+
111
+ ._indicators_avx3r_87:where([data-orientation='horizontal']) {
112
+ bottom: var(--mantine-spacing-md);
113
+ inset-inline-start: 0;
114
+ inset-inline-end: 0;
115
+ flex-direction: row;
116
+ }
117
+
118
+ ._indicator_avx3r_87 {
119
+ pointer-events: all;
120
+ border-radius: var(--mantine-radius-xl);
121
+ box-shadow: var(--mantine-shadow-sm);
122
+ opacity: 0.6;
123
+ background-color: var(--mantine-color-white);
124
+ }
125
+
126
+ @media (hover: hover) {
127
+
128
+ ._indicator_avx3r_87:hover {
129
+ opacity: 1;
130
+ }
131
+ }
132
+
133
+ @media (hover: none) {
134
+
135
+ ._indicator_avx3r_87:active {
136
+ opacity: 1;
137
+ }
138
+ }
139
+
140
+ ._indicator_avx3r_87:where([data-active]) {
141
+ opacity: 1;
142
+ }
143
+
144
+ ._indicator_avx3r_87:where([data-orientation='vertical']) {
145
+ width: calc(0.3125rem * var(--mantine-scale));
146
+ height: calc(1.5625rem * var(--mantine-scale));
147
+ }
148
+
149
+ ._indicator_avx3r_87:where([data-orientation='horizontal']) {
150
+ width: calc(1.5625rem * var(--mantine-scale));
151
+ height: calc(0.3125rem * var(--mantine-scale));
152
+ }
153
+
154
+ ._slide_avx3r_135 {
155
+ position: relative;
156
+ flex: 0 0 var(--carousel-slide-size, 100%);
157
+ }
158
+
159
+ ._root_avx3r_1:where([data-include-gap-in-size]) ._slide_avx3r_135:where([data-orientation='vertical']) {
160
+ padding-bottom: var(--carousel-slide-gap);
161
+ }
162
+
163
+ ._root_avx3r_1:where([data-include-gap-in-size]) ._slide_avx3r_135:where([data-orientation='horizontal']) {
164
+ padding-inline-end: var(--carousel-slide-gap);
165
+ }
166
+
167
+ ._root_avx3r_1:where(:not([data-include-gap-in-size])) ._slide_avx3r_135:where([data-orientation='vertical']) {
168
+ margin-bottom: var(--carousel-slide-gap);
169
+ }
170
+
171
+ ._root_avx3r_1:where(:not([data-include-gap-in-size])) ._slide_avx3r_135:where([data-orientation='horizontal']) {
172
+ margin-inline-end: var(--carousel-slide-gap);
173
+ }
174
+ /*$vite$:1*/
175
+ }