oraculo-ui 0.1.8 → 0.1.10

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.
@@ -0,0 +1,156 @@
1
+ /* src/atoms/OraculoButton/OraculoButton.css */
2
+ .orc-btn {
3
+ --nl-green: #9EE86E;
4
+ --nl-hover-hex: #D9F6C6;
5
+ --nl-hover-alpha: .22;
6
+ --nl-press: #254B0C;
7
+ --nl-disabled-border: #4a5542;
8
+ --nl-disabled-fg: #4a5542;
9
+ --stroke-w: 1.5px;
10
+ --h: 32px;
11
+ --pad-x: 12px;
12
+ --pad-y: 8px;
13
+ --radius: 12px;
14
+ box-sizing: border-box;
15
+ height: var(--h);
16
+ font-family: var(--clmc-font);
17
+ display: inline-flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ gap: 8px;
21
+ cursor: pointer;
22
+ text-decoration: none;
23
+ border-radius: var(--radius);
24
+ outline: none;
25
+ position: relative;
26
+ padding: var(--pad-y) var(--pad-x);
27
+ border: 0;
28
+ }
29
+ .orc-btn__label {
30
+ color: currentColor;
31
+ font-size: 14px;
32
+ }
33
+ .orc-btn__icon {
34
+ color: currentColor;
35
+ display: inline-flex;
36
+ line-height: 0;
37
+ font-size: 18px;
38
+ }
39
+ .orc-btn--primary {
40
+ background: var(--nl-green);
41
+ color: #1C1C1C;
42
+ box-shadow: inset 0 0 0 var(--stroke-w) transparent;
43
+ }
44
+ .orc-btn--primary:hover {
45
+ background: var(--nl-hover-hex);
46
+ color: #1C1C1C;
47
+ }
48
+ .orc-btn--primary:active {
49
+ background: var(--nl-press);
50
+ color: #FFFFFF;
51
+ transform: translateY(1px);
52
+ }
53
+ .orc-btn--primary:disabled,
54
+ .orc-btn--primary[aria-disabled=true] {
55
+ background: transparent;
56
+ color: var(--nl-disabled-fg);
57
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
58
+ cursor: not-allowed;
59
+ transform: none;
60
+ opacity: 1;
61
+ }
62
+ .orc-btn--secondary {
63
+ background: transparent;
64
+ color: var(--nl-green);
65
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green);
66
+ }
67
+ .orc-btn--secondary:hover {
68
+ background: rgba(229, 244, 219, var(--nl-hover-alpha)) !important;
69
+ color: var(--nl-hover-hex);
70
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-hover-hex);
71
+ }
72
+ .orc-btn--secondary:active {
73
+ transform: translateY(1px);
74
+ color: var(--nl-press);
75
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-press);
76
+ background: rgba(37, 75, 12, 0.10);
77
+ }
78
+ .orc-btn--secondary:focus-visible {
79
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green), 0 0 0 3px rgba(197, 228, 177, .45);
80
+ }
81
+ .orc-btn--secondary:disabled,
82
+ .orc-btn--secondary[aria-disabled=true] {
83
+ background: transparent;
84
+ color: var(--nl-disabled-fg);
85
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
86
+ cursor: not-allowed;
87
+ }
88
+ .orc-btn--tertiary {
89
+ background: transparent;
90
+ color: var(--nl-green);
91
+ box-shadow: none;
92
+ }
93
+ .orc-btn--tertiary:hover {
94
+ color: var(--nl-hover-hex);
95
+ }
96
+ .orc-btn--tertiary:active {
97
+ color: var(--nl-press);
98
+ background: rgba(37, 75, 12, 0.08);
99
+ transform: translateY(1px);
100
+ }
101
+ .orc-btn--tertiary:focus-visible {
102
+ box-shadow: 0 0 0 3px rgba(197, 228, 177, .45);
103
+ }
104
+ .orc-btn--tertiary:disabled,
105
+ .orc-btn--tertiary[aria-disabled=true] {
106
+ color: var(--nl-disabled-fg);
107
+ background: transparent;
108
+ box-shadow: none;
109
+ cursor: not-allowed;
110
+ }
111
+ .orc-btn--sm {
112
+ --h: 32px;
113
+ --pad-y: 8px;
114
+ --pad-x: 12px;
115
+ --radius: 12px;
116
+ }
117
+ .orc-btn--md {
118
+ --h: 40px;
119
+ --pad-y: 10px;
120
+ --pad-x: 16px;
121
+ --radius: 12px;
122
+ }
123
+ .orc-btn--lg {
124
+ --h: 48px;
125
+ --pad-y: 12px;
126
+ --pad-x: 20px;
127
+ --radius: 16px;
128
+ }
129
+ .orc-btn--sm .orc-btn__label,
130
+ .orc-btn--md .orc-btn__label,
131
+ .orc-btn--lg .orc-btn__label {
132
+ font-size: 14px !important;
133
+ }
134
+ .orc-btn--iconOnly {
135
+ width: 40px;
136
+ min-width: 40px;
137
+ padding: 0;
138
+ }
139
+ .orc-btn--sm.orc-btn--iconOnly {
140
+ width: 32px;
141
+ min-width: 32px;
142
+ }
143
+ .orc-btn--md.orc-btn--iconOnly {
144
+ width: 40px;
145
+ min-width: 40px;
146
+ }
147
+ .orc-btn--lg.orc-btn--iconOnly {
148
+ width: 48px;
149
+ min-width: 48px;
150
+ }
151
+ .orc-btn--full {
152
+ width: 100%;
153
+ }
154
+ .orc-btn--fullHeight {
155
+ height: 100%;
156
+ }
@@ -0,0 +1,116 @@
1
+ /* src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css */
2
+ .orc-co-wrap {
3
+ --orc-co-art-w: 887px;
4
+ --orc-co-art-h: 510px;
5
+ --orc-co-text: #ffffff;
6
+ --orc-co-art-left: clamp(120px, 18vw, 280px);
7
+ --orc-co-art-top: 20px;
8
+ --orc-co-logo-left: 163px;
9
+ --orc-co-logo-top: 120px;
10
+ --orc-co-logo-w: 220px;
11
+ --orc-co-content-left: 120px;
12
+ --orc-co-content-top: 290px;
13
+ min-height: var(--orc-co-minH, 520px);
14
+ position: relative;
15
+ }
16
+ .orc-co-fullBleed {
17
+ width: 100vw;
18
+ margin-left: 50%;
19
+ transform: translateX(-50%);
20
+ }
21
+ .orc-co-bottom {
22
+ position: absolute;
23
+ left: 50%;
24
+ transform: translateX(-50%);
25
+ bottom: 20px;
26
+ z-index: 2;
27
+ display: grid;
28
+ justify-items: center;
29
+ gap: 12px;
30
+ border-radius: 12px;
31
+ }
32
+ .orc-co-caption {
33
+ color: var(--orc-co-text);
34
+ font-size: 14px;
35
+ text-align: center;
36
+ font-weight: 400;
37
+ text-wrap: balance;
38
+ line-height: 1.4;
39
+ }
40
+ .orc-co-bgMobile {
41
+ position: relative;
42
+ width: 100%;
43
+ min-height: 360px;
44
+ overflow: hidden;
45
+ }
46
+ .orc-co-bgMobileImg {
47
+ width: 100%;
48
+ height: 100%;
49
+ object-fit: cover;
50
+ }
51
+ .orc-co-bgDesktop,
52
+ .orc-co-logo,
53
+ .orc-co-desktopContent {
54
+ display: none;
55
+ }
56
+ @media (min-width: 1024px) {
57
+ .orc-co-bgMobile {
58
+ display: none;
59
+ }
60
+ .orc-co-bottom {
61
+ display: none;
62
+ }
63
+ .orc-co-bgDesktop {
64
+ position: absolute;
65
+ inset: 0;
66
+ z-index: 0;
67
+ display: block;
68
+ }
69
+ .orc-co-bgDesktop > .orc-co-fillHost {
70
+ position: absolute;
71
+ width: var(--orc-co-art-w);
72
+ height: var(--orc-co-art-h);
73
+ top: var(--orc-co-art-top);
74
+ left: var(--orc-co-art-left);
75
+ }
76
+ .orc-co-bgDesktopImg {
77
+ width: 100%;
78
+ height: 100%;
79
+ object-fit: cover;
80
+ display: block;
81
+ }
82
+ .orc-co-logo {
83
+ display: block;
84
+ position: absolute;
85
+ left: var(--orc-co-logo-left);
86
+ top: var(--orc-co-logo-top);
87
+ width: var(--orc-co-logo-w);
88
+ aspect-ratio: 3 / 2;
89
+ z-index: 2;
90
+ }
91
+ .orc-co-logoImg {
92
+ width: 100%;
93
+ height: 100%;
94
+ object-fit: contain;
95
+ display: block;
96
+ }
97
+ .orc-co-desktopContent {
98
+ display: grid;
99
+ position: absolute;
100
+ left: var(--orc-co-content-left);
101
+ top: var(--orc-co-content-top);
102
+ gap: 16px;
103
+ justify-items: center;
104
+ text-align: center;
105
+ z-index: 2;
106
+ }
107
+ .orc-co-captionDesktop {
108
+ margin: 0;
109
+ color: var(--orc-co-text);
110
+ font-family: var(--clmc-font, inherit);
111
+ font-weight: 400;
112
+ font-size: clamp(14px, 1.5vw, 18px);
113
+ max-width: 28ch;
114
+ text-wrap: balance;
115
+ }
116
+ }
@@ -0,0 +1,273 @@
1
+ /* src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css */
2
+ .orc-co-wrap {
3
+ --orc-co-art-w: 887px;
4
+ --orc-co-art-h: 510px;
5
+ --orc-co-text: #ffffff;
6
+ --orc-co-art-left: clamp(120px, 18vw, 280px);
7
+ --orc-co-art-top: 20px;
8
+ --orc-co-logo-left: 163px;
9
+ --orc-co-logo-top: 120px;
10
+ --orc-co-logo-w: 220px;
11
+ --orc-co-content-left: 120px;
12
+ --orc-co-content-top: 290px;
13
+ min-height: var(--orc-co-minH, 520px);
14
+ position: relative;
15
+ }
16
+ .orc-co-fullBleed {
17
+ width: 100vw;
18
+ margin-left: 50%;
19
+ transform: translateX(-50%);
20
+ }
21
+ .orc-co-bottom {
22
+ position: absolute;
23
+ left: 50%;
24
+ transform: translateX(-50%);
25
+ bottom: 20px;
26
+ z-index: 2;
27
+ display: grid;
28
+ justify-items: center;
29
+ gap: 12px;
30
+ border-radius: 12px;
31
+ }
32
+ .orc-co-caption {
33
+ color: var(--orc-co-text);
34
+ font-size: 14px;
35
+ text-align: center;
36
+ font-weight: 400;
37
+ text-wrap: balance;
38
+ line-height: 1.4;
39
+ }
40
+ .orc-co-bgMobile {
41
+ position: relative;
42
+ width: 100%;
43
+ min-height: 360px;
44
+ overflow: hidden;
45
+ }
46
+ .orc-co-bgMobileImg {
47
+ width: 100%;
48
+ height: 100%;
49
+ object-fit: cover;
50
+ }
51
+ .orc-co-bgDesktop,
52
+ .orc-co-logo,
53
+ .orc-co-desktopContent {
54
+ display: none;
55
+ }
56
+ @media (min-width: 1024px) {
57
+ .orc-co-bgMobile {
58
+ display: none;
59
+ }
60
+ .orc-co-bottom {
61
+ display: none;
62
+ }
63
+ .orc-co-bgDesktop {
64
+ position: absolute;
65
+ inset: 0;
66
+ z-index: 0;
67
+ display: block;
68
+ }
69
+ .orc-co-bgDesktop > .orc-co-fillHost {
70
+ position: absolute;
71
+ width: var(--orc-co-art-w);
72
+ height: var(--orc-co-art-h);
73
+ top: var(--orc-co-art-top);
74
+ left: var(--orc-co-art-left);
75
+ }
76
+ .orc-co-bgDesktopImg {
77
+ width: 100%;
78
+ height: 100%;
79
+ object-fit: cover;
80
+ display: block;
81
+ }
82
+ .orc-co-logo {
83
+ display: block;
84
+ position: absolute;
85
+ left: var(--orc-co-logo-left);
86
+ top: var(--orc-co-logo-top);
87
+ width: var(--orc-co-logo-w);
88
+ aspect-ratio: 3 / 2;
89
+ z-index: 2;
90
+ }
91
+ .orc-co-logoImg {
92
+ width: 100%;
93
+ height: 100%;
94
+ object-fit: contain;
95
+ display: block;
96
+ }
97
+ .orc-co-desktopContent {
98
+ display: grid;
99
+ position: absolute;
100
+ left: var(--orc-co-content-left);
101
+ top: var(--orc-co-content-top);
102
+ gap: 16px;
103
+ justify-items: center;
104
+ text-align: center;
105
+ z-index: 2;
106
+ }
107
+ .orc-co-captionDesktop {
108
+ margin: 0;
109
+ color: var(--orc-co-text);
110
+ font-family: var(--clmc-font, inherit);
111
+ font-weight: 400;
112
+ font-size: clamp(14px, 1.5vw, 18px);
113
+ max-width: 28ch;
114
+ text-wrap: balance;
115
+ }
116
+ }
117
+
118
+ /* src/atoms/OraculoButton/OraculoButton.css */
119
+ .orc-btn {
120
+ --nl-green: #9EE86E;
121
+ --nl-hover-hex: #D9F6C6;
122
+ --nl-hover-alpha: .22;
123
+ --nl-press: #254B0C;
124
+ --nl-disabled-border: #4a5542;
125
+ --nl-disabled-fg: #4a5542;
126
+ --stroke-w: 1.5px;
127
+ --h: 32px;
128
+ --pad-x: 12px;
129
+ --pad-y: 8px;
130
+ --radius: 12px;
131
+ box-sizing: border-box;
132
+ height: var(--h);
133
+ font-family: var(--clmc-font);
134
+ display: inline-flex;
135
+ align-items: center;
136
+ justify-content: center;
137
+ gap: 8px;
138
+ cursor: pointer;
139
+ text-decoration: none;
140
+ border-radius: var(--radius);
141
+ outline: none;
142
+ position: relative;
143
+ padding: var(--pad-y) var(--pad-x);
144
+ border: 0;
145
+ }
146
+ .orc-btn__label {
147
+ color: currentColor;
148
+ font-size: 14px;
149
+ }
150
+ .orc-btn__icon {
151
+ color: currentColor;
152
+ display: inline-flex;
153
+ line-height: 0;
154
+ font-size: 18px;
155
+ }
156
+ .orc-btn--primary {
157
+ background: var(--nl-green);
158
+ color: #1C1C1C;
159
+ box-shadow: inset 0 0 0 var(--stroke-w) transparent;
160
+ }
161
+ .orc-btn--primary:hover {
162
+ background: var(--nl-hover-hex);
163
+ color: #1C1C1C;
164
+ }
165
+ .orc-btn--primary:active {
166
+ background: var(--nl-press);
167
+ color: #FFFFFF;
168
+ transform: translateY(1px);
169
+ }
170
+ .orc-btn--primary:disabled,
171
+ .orc-btn--primary[aria-disabled=true] {
172
+ background: transparent;
173
+ color: var(--nl-disabled-fg);
174
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
175
+ cursor: not-allowed;
176
+ transform: none;
177
+ opacity: 1;
178
+ }
179
+ .orc-btn--secondary {
180
+ background: transparent;
181
+ color: var(--nl-green);
182
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green);
183
+ }
184
+ .orc-btn--secondary:hover {
185
+ background: rgba(229, 244, 219, var(--nl-hover-alpha)) !important;
186
+ color: var(--nl-hover-hex);
187
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-hover-hex);
188
+ }
189
+ .orc-btn--secondary:active {
190
+ transform: translateY(1px);
191
+ color: var(--nl-press);
192
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-press);
193
+ background: rgba(37, 75, 12, 0.10);
194
+ }
195
+ .orc-btn--secondary:focus-visible {
196
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green), 0 0 0 3px rgba(197, 228, 177, .45);
197
+ }
198
+ .orc-btn--secondary:disabled,
199
+ .orc-btn--secondary[aria-disabled=true] {
200
+ background: transparent;
201
+ color: var(--nl-disabled-fg);
202
+ box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
203
+ cursor: not-allowed;
204
+ }
205
+ .orc-btn--tertiary {
206
+ background: transparent;
207
+ color: var(--nl-green);
208
+ box-shadow: none;
209
+ }
210
+ .orc-btn--tertiary:hover {
211
+ color: var(--nl-hover-hex);
212
+ }
213
+ .orc-btn--tertiary:active {
214
+ color: var(--nl-press);
215
+ background: rgba(37, 75, 12, 0.08);
216
+ transform: translateY(1px);
217
+ }
218
+ .orc-btn--tertiary:focus-visible {
219
+ box-shadow: 0 0 0 3px rgba(197, 228, 177, .45);
220
+ }
221
+ .orc-btn--tertiary:disabled,
222
+ .orc-btn--tertiary[aria-disabled=true] {
223
+ color: var(--nl-disabled-fg);
224
+ background: transparent;
225
+ box-shadow: none;
226
+ cursor: not-allowed;
227
+ }
228
+ .orc-btn--sm {
229
+ --h: 32px;
230
+ --pad-y: 8px;
231
+ --pad-x: 12px;
232
+ --radius: 12px;
233
+ }
234
+ .orc-btn--md {
235
+ --h: 40px;
236
+ --pad-y: 10px;
237
+ --pad-x: 16px;
238
+ --radius: 12px;
239
+ }
240
+ .orc-btn--lg {
241
+ --h: 48px;
242
+ --pad-y: 12px;
243
+ --pad-x: 20px;
244
+ --radius: 16px;
245
+ }
246
+ .orc-btn--sm .orc-btn__label,
247
+ .orc-btn--md .orc-btn__label,
248
+ .orc-btn--lg .orc-btn__label {
249
+ font-size: 14px !important;
250
+ }
251
+ .orc-btn--iconOnly {
252
+ width: 40px;
253
+ min-width: 40px;
254
+ padding: 0;
255
+ }
256
+ .orc-btn--sm.orc-btn--iconOnly {
257
+ width: 32px;
258
+ min-width: 32px;
259
+ }
260
+ .orc-btn--md.orc-btn--iconOnly {
261
+ width: 40px;
262
+ min-width: 40px;
263
+ }
264
+ .orc-btn--lg.orc-btn--iconOnly {
265
+ width: 48px;
266
+ min-width: 48px;
267
+ }
268
+ .orc-btn--full {
269
+ width: 100%;
270
+ }
271
+ .orc-btn--fullHeight {
272
+ height: 100%;
273
+ }
@@ -0,0 +1,9 @@
1
+ import {
2
+ OraculoSeccionClubOlimpo_default
3
+ } from "./chunk-2D7ZJMJV.mjs";
4
+ import "./chunk-PZJSZNXJ.mjs";
5
+ import "./chunk-IJQLK4NO.mjs";
6
+ import "./chunk-VIPLL6XT.mjs";
7
+ export {
8
+ OraculoSeccionClubOlimpo_default as default
9
+ };
@@ -0,0 +1,7 @@
1
+ import {
2
+ OraculoSeccionClubOlimpo_default
3
+ } from "./chunk-PZJSZNXJ.mjs";
4
+ import "./chunk-VIPLL6XT.mjs";
5
+ export {
6
+ OraculoSeccionClubOlimpo_default as default
7
+ };
@@ -0,0 +1,12 @@
1
+ import {
2
+ OraculoSeccionDestacados
3
+ } from "./chunk-VYYKDD5L.mjs";
4
+ import "./chunk-2D7ZJMJV.mjs";
5
+ import "./chunk-PZJSZNXJ.mjs";
6
+ import "./chunk-PVY5Z3JS.mjs";
7
+ import "./chunk-4LBAYKDQ.mjs";
8
+ import "./chunk-IJQLK4NO.mjs";
9
+ import "./chunk-VIPLL6XT.mjs";
10
+ export {
11
+ OraculoSeccionDestacados as default
12
+ };