manolis-ui 0.18.1 → 0.19.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.
- package/dist/index.d.ts +109 -11
- package/dist/manolis-ui.css +1 -1
- package/dist/manolis-ui.js +1119 -937
- package/dist/manolis-ui.umd.cjs +9 -9
- package/dist/style.css +264 -0
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -887,6 +887,9 @@
|
|
|
887
887
|
.collapse {
|
|
888
888
|
visibility: collapse;
|
|
889
889
|
}
|
|
890
|
+
.visible {
|
|
891
|
+
visibility: visible;
|
|
892
|
+
}
|
|
890
893
|
.list {
|
|
891
894
|
display: flex;
|
|
892
895
|
flex-direction: column;
|
|
@@ -940,6 +943,102 @@
|
|
|
940
943
|
}
|
|
941
944
|
}
|
|
942
945
|
}
|
|
946
|
+
.toast {
|
|
947
|
+
position: fixed;
|
|
948
|
+
inset-inline-start: auto;
|
|
949
|
+
inset-inline-end: calc(0.25rem * 0);
|
|
950
|
+
top: auto;
|
|
951
|
+
bottom: calc(0.25rem * 0);
|
|
952
|
+
margin: calc(0.25rem * 4);
|
|
953
|
+
display: flex;
|
|
954
|
+
min-width: fit-content;
|
|
955
|
+
flex-direction: column;
|
|
956
|
+
gap: calc(0.25rem * 2);
|
|
957
|
+
background-color: transparent;
|
|
958
|
+
white-space: nowrap;
|
|
959
|
+
translate: var(--toast-x, 0) var(--toast-y, 0);
|
|
960
|
+
& > * {
|
|
961
|
+
animation: toast 0.25s ease-out;
|
|
962
|
+
}
|
|
963
|
+
&:where(.toast-start) {
|
|
964
|
+
inset-inline-start: calc(0.25rem * 0);
|
|
965
|
+
inset-inline-end: auto;
|
|
966
|
+
--toast-x: 0;
|
|
967
|
+
}
|
|
968
|
+
&:where(.toast-center) {
|
|
969
|
+
inset-inline-start: calc(1/2 * 100%);
|
|
970
|
+
inset-inline-end: calc(1/2 * 100%);
|
|
971
|
+
--toast-x: -50%;
|
|
972
|
+
}
|
|
973
|
+
&:where(.toast-end) {
|
|
974
|
+
inset-inline-start: auto;
|
|
975
|
+
inset-inline-end: calc(0.25rem * 0);
|
|
976
|
+
--toast-x: 0;
|
|
977
|
+
}
|
|
978
|
+
&:where(.toast-bottom) {
|
|
979
|
+
top: auto;
|
|
980
|
+
bottom: calc(0.25rem * 0);
|
|
981
|
+
--toast-y: 0;
|
|
982
|
+
}
|
|
983
|
+
&:where(.toast-middle) {
|
|
984
|
+
top: calc(1/2 * 100%);
|
|
985
|
+
bottom: auto;
|
|
986
|
+
--toast-y: -50%;
|
|
987
|
+
}
|
|
988
|
+
&:where(.toast-top) {
|
|
989
|
+
top: calc(0.25rem * 0);
|
|
990
|
+
bottom: auto;
|
|
991
|
+
--toast-y: 0;
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
.toast\! {
|
|
995
|
+
position: fixed !important;
|
|
996
|
+
inset-inline-start: auto !important;
|
|
997
|
+
inset-inline-end: calc(0.25rem * 0) !important;
|
|
998
|
+
top: auto !important;
|
|
999
|
+
bottom: calc(0.25rem * 0) !important;
|
|
1000
|
+
margin: calc(0.25rem * 4) !important;
|
|
1001
|
+
display: flex !important;
|
|
1002
|
+
min-width: fit-content !important;
|
|
1003
|
+
flex-direction: column !important;
|
|
1004
|
+
gap: calc(0.25rem * 2) !important;
|
|
1005
|
+
background-color: transparent !important;
|
|
1006
|
+
white-space: nowrap !important;
|
|
1007
|
+
translate: var(--toast-x, 0) var(--toast-y, 0) !important;
|
|
1008
|
+
& > * {
|
|
1009
|
+
animation: toast 0.25s ease-out !important;
|
|
1010
|
+
}
|
|
1011
|
+
&:where(.toast-start) {
|
|
1012
|
+
inset-inline-start: calc(0.25rem * 0) !important;
|
|
1013
|
+
inset-inline-end: auto !important;
|
|
1014
|
+
--toast-x: 0 !important;
|
|
1015
|
+
}
|
|
1016
|
+
&:where(.toast-center) {
|
|
1017
|
+
inset-inline-start: calc(1/2 * 100%) !important;
|
|
1018
|
+
inset-inline-end: calc(1/2 * 100%) !important;
|
|
1019
|
+
--toast-x: -50% !important;
|
|
1020
|
+
}
|
|
1021
|
+
&:where(.toast-end) {
|
|
1022
|
+
inset-inline-start: auto !important;
|
|
1023
|
+
inset-inline-end: calc(0.25rem * 0) !important;
|
|
1024
|
+
--toast-x: 0 !important;
|
|
1025
|
+
}
|
|
1026
|
+
&:where(.toast-bottom) {
|
|
1027
|
+
top: auto !important;
|
|
1028
|
+
bottom: calc(0.25rem * 0) !important;
|
|
1029
|
+
--toast-y: 0 !important;
|
|
1030
|
+
}
|
|
1031
|
+
&:where(.toast-middle) {
|
|
1032
|
+
top: calc(1/2 * 100%) !important;
|
|
1033
|
+
bottom: auto !important;
|
|
1034
|
+
--toast-y: -50% !important;
|
|
1035
|
+
}
|
|
1036
|
+
&:where(.toast-top) {
|
|
1037
|
+
top: calc(0.25rem * 0) !important;
|
|
1038
|
+
bottom: auto !important;
|
|
1039
|
+
--toast-y: 0 !important;
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
943
1042
|
.\!toggle {
|
|
944
1043
|
border: var(--border) solid currentColor !important;
|
|
945
1044
|
color: var(--input-color) !important;
|
|
@@ -2128,6 +2227,9 @@
|
|
|
2128
2227
|
.right-5 {
|
|
2129
2228
|
right: calc(var(--spacing) * 5);
|
|
2130
2229
|
}
|
|
2230
|
+
.bottom-0 {
|
|
2231
|
+
bottom: calc(var(--spacing) * 0);
|
|
2232
|
+
}
|
|
2131
2233
|
.bottom-5 {
|
|
2132
2234
|
bottom: calc(var(--spacing) * 5);
|
|
2133
2235
|
}
|
|
@@ -2137,6 +2239,83 @@
|
|
|
2137
2239
|
.left-5 {
|
|
2138
2240
|
left: calc(var(--spacing) * 5);
|
|
2139
2241
|
}
|
|
2242
|
+
.stack {
|
|
2243
|
+
display: inline-grid;
|
|
2244
|
+
grid-template-columns: 3px 4px 1fr 4px 3px;
|
|
2245
|
+
grid-template-rows: 3px 4px 1fr 4px 3px;
|
|
2246
|
+
& > * {
|
|
2247
|
+
height: 100%;
|
|
2248
|
+
width: 100%;
|
|
2249
|
+
&:nth-child(n + 2) {
|
|
2250
|
+
width: 100%;
|
|
2251
|
+
opacity: 70%;
|
|
2252
|
+
}
|
|
2253
|
+
&:nth-child(2) {
|
|
2254
|
+
z-index: 2;
|
|
2255
|
+
opacity: 90%;
|
|
2256
|
+
}
|
|
2257
|
+
&:nth-child(1) {
|
|
2258
|
+
z-index: 3;
|
|
2259
|
+
width: 100%;
|
|
2260
|
+
}
|
|
2261
|
+
}
|
|
2262
|
+
&, &.stack-bottom {
|
|
2263
|
+
> * {
|
|
2264
|
+
grid-column: 3 / 4;
|
|
2265
|
+
grid-row: 3 / 6;
|
|
2266
|
+
&:nth-child(2) {
|
|
2267
|
+
grid-column: 2 / 5;
|
|
2268
|
+
grid-row: 2 / 5;
|
|
2269
|
+
}
|
|
2270
|
+
&:nth-child(1) {
|
|
2271
|
+
grid-column: 1 / 6;
|
|
2272
|
+
grid-row: 1 / 4;
|
|
2273
|
+
}
|
|
2274
|
+
}
|
|
2275
|
+
}
|
|
2276
|
+
&.stack-top {
|
|
2277
|
+
> * {
|
|
2278
|
+
grid-column: 3 / 4;
|
|
2279
|
+
grid-row: 1 / 4;
|
|
2280
|
+
&:nth-child(2) {
|
|
2281
|
+
grid-column: 2 / 5;
|
|
2282
|
+
grid-row: 2 / 5;
|
|
2283
|
+
}
|
|
2284
|
+
&:nth-child(1) {
|
|
2285
|
+
grid-column: 1 / 6;
|
|
2286
|
+
grid-row: 3 / 6;
|
|
2287
|
+
}
|
|
2288
|
+
}
|
|
2289
|
+
}
|
|
2290
|
+
&.stack-start {
|
|
2291
|
+
> * {
|
|
2292
|
+
grid-column: 1 / 4;
|
|
2293
|
+
grid-row: 3 / 4;
|
|
2294
|
+
&:nth-child(2) {
|
|
2295
|
+
grid-column: 2 / 5;
|
|
2296
|
+
grid-row: 2 / 5;
|
|
2297
|
+
}
|
|
2298
|
+
&:nth-child(1) {
|
|
2299
|
+
grid-column: 3 / 6;
|
|
2300
|
+
grid-row: 1 / 6;
|
|
2301
|
+
}
|
|
2302
|
+
}
|
|
2303
|
+
}
|
|
2304
|
+
&.stack-end {
|
|
2305
|
+
> * {
|
|
2306
|
+
grid-column: 3 / 6;
|
|
2307
|
+
grid-row: 3 / 4;
|
|
2308
|
+
&:nth-child(2) {
|
|
2309
|
+
grid-column: 2 / 5;
|
|
2310
|
+
grid-row: 2 / 5;
|
|
2311
|
+
}
|
|
2312
|
+
&:nth-child(1) {
|
|
2313
|
+
grid-column: 1 / 4;
|
|
2314
|
+
grid-row: 1 / 6;
|
|
2315
|
+
}
|
|
2316
|
+
}
|
|
2317
|
+
}
|
|
2318
|
+
}
|
|
2140
2319
|
.modal-backdrop {
|
|
2141
2320
|
grid-column-start: 1;
|
|
2142
2321
|
grid-row-start: 1;
|
|
@@ -2474,6 +2653,9 @@
|
|
|
2474
2653
|
.mb-2 {
|
|
2475
2654
|
margin-bottom: calc(var(--spacing) * 2);
|
|
2476
2655
|
}
|
|
2656
|
+
.mb-4 {
|
|
2657
|
+
margin-bottom: calc(var(--spacing) * 4);
|
|
2658
|
+
}
|
|
2477
2659
|
.ml-1 {
|
|
2478
2660
|
margin-left: calc(var(--spacing) * 1);
|
|
2479
2661
|
}
|
|
@@ -2638,6 +2820,56 @@
|
|
|
2638
2820
|
display: none;
|
|
2639
2821
|
}
|
|
2640
2822
|
}
|
|
2823
|
+
.alert {
|
|
2824
|
+
display: grid;
|
|
2825
|
+
align-items: center;
|
|
2826
|
+
gap: calc(0.25rem * 4);
|
|
2827
|
+
border-radius: var(--radius-box);
|
|
2828
|
+
padding-inline: calc(0.25rem * 4);
|
|
2829
|
+
padding-block: calc(0.25rem * 3);
|
|
2830
|
+
color: var(--color-base-content);
|
|
2831
|
+
background-color: var(--alert-color, var(--color-base-200));
|
|
2832
|
+
justify-content: start;
|
|
2833
|
+
justify-items: start;
|
|
2834
|
+
grid-auto-flow: column;
|
|
2835
|
+
grid-template-columns: auto minmax(auto, 1fr);
|
|
2836
|
+
text-align: start;
|
|
2837
|
+
border: var(--border) solid var(--color-base-200);
|
|
2838
|
+
font-size: 0.875rem;
|
|
2839
|
+
line-height: 1.25rem;
|
|
2840
|
+
background-size: auto, calc(var(--noise) * 100%);
|
|
2841
|
+
background-image: none, var(--fx-noise);
|
|
2842
|
+
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
|
|
2843
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2844
|
+
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
|
|
2845
|
+
}
|
|
2846
|
+
&.alert-outline {
|
|
2847
|
+
background-color: transparent;
|
|
2848
|
+
color: var(--alert-color);
|
|
2849
|
+
box-shadow: none;
|
|
2850
|
+
background-image: none;
|
|
2851
|
+
}
|
|
2852
|
+
&.alert-dash {
|
|
2853
|
+
background-color: transparent;
|
|
2854
|
+
color: var(--alert-color);
|
|
2855
|
+
border-style: dashed;
|
|
2856
|
+
box-shadow: none;
|
|
2857
|
+
background-image: none;
|
|
2858
|
+
}
|
|
2859
|
+
&.alert-soft {
|
|
2860
|
+
color: var(--alert-color, var(--color-base-content));
|
|
2861
|
+
background: var(--alert-color, var(--color-base-content));
|
|
2862
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2863
|
+
background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
|
|
2864
|
+
}
|
|
2865
|
+
border-color: var(--alert-color, var(--color-base-content));
|
|
2866
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2867
|
+
border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) );
|
|
2868
|
+
}
|
|
2869
|
+
box-shadow: none;
|
|
2870
|
+
background-image: none;
|
|
2871
|
+
}
|
|
2872
|
+
}
|
|
2641
2873
|
.card-actions {
|
|
2642
2874
|
display: flex;
|
|
2643
2875
|
flex-wrap: wrap;
|
|
@@ -3318,6 +3550,9 @@
|
|
|
3318
3550
|
.shrink {
|
|
3319
3551
|
flex-shrink: 1;
|
|
3320
3552
|
}
|
|
3553
|
+
.shrink-0 {
|
|
3554
|
+
flex-shrink: 0;
|
|
3555
|
+
}
|
|
3321
3556
|
.flex-grow {
|
|
3322
3557
|
flex-grow: 1;
|
|
3323
3558
|
}
|
|
@@ -3538,6 +3773,26 @@
|
|
|
3538
3773
|
box-shadow: none;
|
|
3539
3774
|
}
|
|
3540
3775
|
}
|
|
3776
|
+
.alert-error {
|
|
3777
|
+
border-color: var(--color-error);
|
|
3778
|
+
color: var(--color-error-content);
|
|
3779
|
+
--alert-color: var(--color-error);
|
|
3780
|
+
}
|
|
3781
|
+
.alert-info {
|
|
3782
|
+
border-color: var(--color-info);
|
|
3783
|
+
color: var(--color-info-content);
|
|
3784
|
+
--alert-color: var(--color-info);
|
|
3785
|
+
}
|
|
3786
|
+
.alert-success {
|
|
3787
|
+
border-color: var(--color-success);
|
|
3788
|
+
color: var(--color-success-content);
|
|
3789
|
+
--alert-color: var(--color-success);
|
|
3790
|
+
}
|
|
3791
|
+
.alert-warning {
|
|
3792
|
+
border-color: var(--color-warning);
|
|
3793
|
+
color: var(--color-warning-content);
|
|
3794
|
+
--alert-color: var(--color-warning);
|
|
3795
|
+
}
|
|
3541
3796
|
.border-base-100 {
|
|
3542
3797
|
border-color: var(--color-base-100);
|
|
3543
3798
|
}
|
|
@@ -3666,6 +3921,9 @@
|
|
|
3666
3921
|
.fill-current {
|
|
3667
3922
|
fill: currentcolor;
|
|
3668
3923
|
}
|
|
3924
|
+
.stroke-current {
|
|
3925
|
+
stroke: currentcolor;
|
|
3926
|
+
}
|
|
3669
3927
|
.object-cover {
|
|
3670
3928
|
object-fit: cover;
|
|
3671
3929
|
}
|
|
@@ -3684,6 +3942,9 @@
|
|
|
3684
3942
|
.p-6 {
|
|
3685
3943
|
padding: calc(var(--spacing) * 6);
|
|
3686
3944
|
}
|
|
3945
|
+
.p-10 {
|
|
3946
|
+
padding: calc(var(--spacing) * 10);
|
|
3947
|
+
}
|
|
3687
3948
|
.p-\[25\%\] {
|
|
3688
3949
|
padding: 25%;
|
|
3689
3950
|
}
|
|
@@ -3838,6 +4099,9 @@
|
|
|
3838
4099
|
--badge-color: var(--color-warning);
|
|
3839
4100
|
color: var(--color-warning-content);
|
|
3840
4101
|
}
|
|
4102
|
+
.progress-neutral {
|
|
4103
|
+
color: var(--color-neutral);
|
|
4104
|
+
}
|
|
3841
4105
|
.text-accent {
|
|
3842
4106
|
color: var(--color-accent);
|
|
3843
4107
|
}
|