funuicss 3.8.13 → 3.8.15
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/css/fun.css +10 -155
- package/package.json +1 -1
- package/ui/accordion/Accordion.js +589 -18
- package/ui/feature/Feature.d.ts +40 -70
- package/ui/feature/Feature.js +913 -175
- package/ui/form/Form.js +25 -7
- package/ui/sidebar/SideBar.js +354 -14
- package/ui/text/Text.d.ts +3 -0
- package/ui/text/Text.js +15 -2
- package/ui/vista/Vista.d.ts +8 -10
- package/ui/vista/Vista.js +57 -120
- package/utils/componentUtils.d.ts +2 -2
- package/utils/componentUtils.js +361 -310
package/css/fun.css
CHANGED
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
--loaderZindex:100;
|
|
208
208
|
--snackBarZindex:20;
|
|
209
209
|
--notificationZindex:29;
|
|
210
|
-
--inputButtonHeight:2.
|
|
210
|
+
--inputButtonHeight:2.7rem;
|
|
211
211
|
--inputPadding:1rem;
|
|
212
212
|
--inputRoundedPadding:0.5rem 1rem;
|
|
213
213
|
--shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
|
|
@@ -218,6 +218,8 @@
|
|
|
218
218
|
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
+
|
|
222
|
+
|
|
221
223
|
:root {
|
|
222
224
|
/* ===== Base Font Sizes ===== */
|
|
223
225
|
--font-size-smaller: 0.75rem;
|
|
@@ -1093,16 +1095,22 @@ link:hover {
|
|
|
1093
1095
|
padding: 0.2rem 0.7rem !important;
|
|
1094
1096
|
}
|
|
1095
1097
|
.button.bigBtn {
|
|
1096
|
-
|
|
1098
|
+
padding: 1.2rem 1.8rem;
|
|
1097
1099
|
font-size: var(--text-xl);
|
|
1100
|
+
height: calc(var(--inputButtonHeight) * 1.4) !important;
|
|
1101
|
+
border-radius: calc( var(--radius) * 1.4) !important;
|
|
1098
1102
|
}
|
|
1099
1103
|
.button.biggerBtn {
|
|
1100
1104
|
padding: 1.2rem 1.8rem;
|
|
1101
1105
|
font-size: var(--text-2xl);
|
|
1106
|
+
height: calc(var(--inputButtonHeight) * 1.5) !important;
|
|
1107
|
+
border-radius: calc( var(--radius) * 1.5) !important;
|
|
1102
1108
|
}
|
|
1103
1109
|
.button.jumboBtn {
|
|
1104
1110
|
padding: 2rem 2.5rem;
|
|
1105
1111
|
font-size: var(--text-4xl);
|
|
1112
|
+
height: calc(var(--inputButtonHeight) * 1.7) !important;
|
|
1113
|
+
border-radius: calc( var(--radius) * 1.6) !important;
|
|
1106
1114
|
}
|
|
1107
1115
|
|
|
1108
1116
|
|
|
@@ -4114,7 +4122,6 @@ padding-right: 2.5rem;
|
|
|
4114
4122
|
}
|
|
4115
4123
|
}
|
|
4116
4124
|
|
|
4117
|
-
|
|
4118
4125
|
.accordion {
|
|
4119
4126
|
width: 100%;
|
|
4120
4127
|
overflow: visible !important;
|
|
@@ -4163,158 +4170,6 @@ opacity: 1;
|
|
|
4163
4170
|
|
|
4164
4171
|
|
|
4165
4172
|
|
|
4166
|
-
.vista {
|
|
4167
|
-
width: 100%;
|
|
4168
|
-
}
|
|
4169
|
-
|
|
4170
|
-
/* Padding presets */
|
|
4171
|
-
.padding-sm {
|
|
4172
|
-
padding: 2rem 1rem;
|
|
4173
|
-
}
|
|
4174
|
-
|
|
4175
|
-
.padding-lg {
|
|
4176
|
-
padding: 5rem 1.5rem;
|
|
4177
|
-
}
|
|
4178
|
-
|
|
4179
|
-
/* Background options */
|
|
4180
|
-
.bg-white {
|
|
4181
|
-
background-color: white;
|
|
4182
|
-
}
|
|
4183
|
-
|
|
4184
|
-
.bg-light {
|
|
4185
|
-
background-color: #f9f9f9;
|
|
4186
|
-
}
|
|
4187
|
-
|
|
4188
|
-
.bg-dark {
|
|
4189
|
-
background-color: #1e1e1e;
|
|
4190
|
-
color: white;
|
|
4191
|
-
}
|
|
4192
|
-
/*
|
|
4193
|
-
.vista{
|
|
4194
|
-
display: flex;
|
|
4195
|
-
align-items: center;
|
|
4196
|
-
justify-content: center;
|
|
4197
|
-
}
|
|
4198
|
-
|
|
4199
|
-
.vista-container {
|
|
4200
|
-
max-width: 1200px;
|
|
4201
|
-
margin: 0 auto;
|
|
4202
|
-
display: flex;
|
|
4203
|
-
flex-wrap: wrap;
|
|
4204
|
-
align-items: center;
|
|
4205
|
-
gap: 2rem;
|
|
4206
|
-
justify-content: center;
|
|
4207
|
-
}
|
|
4208
|
-
|
|
4209
|
-
.grid-bg {
|
|
4210
|
-
position: relative;
|
|
4211
|
-
background-size: 40px 40px;
|
|
4212
|
-
background-repeat: repeat;
|
|
4213
|
-
}
|
|
4214
|
-
|
|
4215
|
-
|
|
4216
|
-
/* 🔶 2. Dotted Background */
|
|
4217
|
-
.bg-pattern-dots {
|
|
4218
|
-
background-size: 20px 20px;
|
|
4219
|
-
}
|
|
4220
|
-
|
|
4221
|
-
/* 🔷 3. Diagonal Lines */
|
|
4222
|
-
.bg-pattern-diagonal {
|
|
4223
|
-
background-size: 20px 20px;
|
|
4224
|
-
}
|
|
4225
|
-
|
|
4226
|
-
/* 🔶 4. Checkerboard Pattern */
|
|
4227
|
-
.bg-pattern-checkerboard {
|
|
4228
|
-
background-size: 40px 40px;
|
|
4229
|
-
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
|
|
4230
|
-
}
|
|
4231
|
-
|
|
4232
|
-
/* 🟦 7. Horizontal Lines Only */
|
|
4233
|
-
.bg-pattern-horizontal {
|
|
4234
|
-
background-size: 100% 40px;
|
|
4235
|
-
}
|
|
4236
|
-
|
|
4237
|
-
/* 🟥 8. Vertical Lines Only */
|
|
4238
|
-
.bg-pattern-vertical {
|
|
4239
|
-
background-size: 40px 100%;
|
|
4240
|
-
}
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
.vista.centered .vista-container {
|
|
4245
|
-
flex-direction: column;
|
|
4246
|
-
text-align: center;
|
|
4247
|
-
gap: 0.5rem;
|
|
4248
|
-
}
|
|
4249
|
-
|
|
4250
|
-
.vista.stacked .vista-container {
|
|
4251
|
-
flex-direction: column;
|
|
4252
|
-
}
|
|
4253
|
-
|
|
4254
|
-
.vista.imageLeft .vista-container,
|
|
4255
|
-
.vista.imageRight .vista-container {
|
|
4256
|
-
flex-direction: row;
|
|
4257
|
-
}
|
|
4258
|
-
|
|
4259
|
-
.vista.reverse .vista-container {
|
|
4260
|
-
flex-direction: row-reverse;
|
|
4261
|
-
}
|
|
4262
|
-
|
|
4263
|
-
/* Text alignment */
|
|
4264
|
-
.vista.text-left .vista-text {
|
|
4265
|
-
text-align: left;
|
|
4266
|
-
}
|
|
4267
|
-
.vista.text-center .vista-text {
|
|
4268
|
-
text-align: center;
|
|
4269
|
-
}
|
|
4270
|
-
.vista.text-right .vista-text {
|
|
4271
|
-
text-align: right;
|
|
4272
|
-
}
|
|
4273
|
-
|
|
4274
|
-
|
|
4275
|
-
.vista-subtitle {
|
|
4276
|
-
font-size: 1.125rem;
|
|
4277
|
-
opacity: 0.8;
|
|
4278
|
-
margin-bottom: 1.5rem;
|
|
4279
|
-
}
|
|
4280
|
-
|
|
4281
|
-
.vista-image img {
|
|
4282
|
-
width: 100%;
|
|
4283
|
-
}
|
|
4284
|
-
|
|
4285
|
-
/* Responsive behavior */
|
|
4286
|
-
@media screen and (max-width: 768px) {
|
|
4287
|
-
.vista-container {
|
|
4288
|
-
flex-direction: column !important;
|
|
4289
|
-
text-align: center;
|
|
4290
|
-
}
|
|
4291
|
-
|
|
4292
|
-
.vista.reverse .vista-container {
|
|
4293
|
-
flex-direction: column !important;
|
|
4294
|
-
}
|
|
4295
|
-
|
|
4296
|
-
.vista-text,
|
|
4297
|
-
.vista-image {
|
|
4298
|
-
text-align: center;
|
|
4299
|
-
}
|
|
4300
|
-
}
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
/* Responsive */
|
|
4304
|
-
@media screen and (max-width: 768px) {
|
|
4305
|
-
.vista-container {
|
|
4306
|
-
flex-direction: column !important;
|
|
4307
|
-
text-align: center;
|
|
4308
|
-
}
|
|
4309
|
-
|
|
4310
|
-
.vista.reverse .vista-container {
|
|
4311
|
-
flex-direction: column !important;
|
|
4312
|
-
}
|
|
4313
|
-
} */
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
4173
|
/* Base Animation Setup */
|
|
4319
4174
|
.animated {
|
|
4320
4175
|
animation-duration: 0.4s;
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.8.
|
|
2
|
+
"version": "3.8.15",
|
|
3
3
|
"name": "funuicss",
|
|
4
4
|
"description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
|
|
5
5
|
"main": "index.js",
|