manolis-ui 0.5.4 → 0.6.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 +93 -11
- package/dist/manolis-ui.js +983 -706
- package/dist/manolis-ui.umd.cjs +9 -9
- package/dist/style.css +287 -0
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -848,6 +848,175 @@
|
|
|
848
848
|
.visible {
|
|
849
849
|
visibility: visible;
|
|
850
850
|
}
|
|
851
|
+
.list {
|
|
852
|
+
display: flex;
|
|
853
|
+
flex-direction: column;
|
|
854
|
+
font-size: 0.875rem;
|
|
855
|
+
:where(.list-row) {
|
|
856
|
+
--list-grid-cols: minmax(0, auto) 1fr;
|
|
857
|
+
position: relative;
|
|
858
|
+
display: grid;
|
|
859
|
+
grid-auto-flow: column;
|
|
860
|
+
gap: calc(0.25rem * 4);
|
|
861
|
+
border-radius: var(--radius-box);
|
|
862
|
+
padding: calc(0.25rem * 4);
|
|
863
|
+
word-break: break-word;
|
|
864
|
+
grid-template-columns: var(--list-grid-cols);
|
|
865
|
+
&:has(.list-col-grow:nth-child(1)) {
|
|
866
|
+
--list-grid-cols: 1fr;
|
|
867
|
+
}
|
|
868
|
+
&:has(.list-col-grow:nth-child(2)) {
|
|
869
|
+
--list-grid-cols: minmax(0, auto) 1fr;
|
|
870
|
+
}
|
|
871
|
+
&:has(.list-col-grow:nth-child(3)) {
|
|
872
|
+
--list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;
|
|
873
|
+
}
|
|
874
|
+
&:has(.list-col-grow:nth-child(4)) {
|
|
875
|
+
--list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
|
|
876
|
+
}
|
|
877
|
+
&:has(.list-col-grow:nth-child(5)) {
|
|
878
|
+
--list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
|
|
879
|
+
}
|
|
880
|
+
&:has(.list-col-grow:nth-child(6)) {
|
|
881
|
+
--list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto)
|
|
882
|
+
minmax(0, auto) 1fr;
|
|
883
|
+
}
|
|
884
|
+
:not(.list-col-wrap) {
|
|
885
|
+
grid-row-start: 1;
|
|
886
|
+
}
|
|
887
|
+
}
|
|
888
|
+
& > :not(:last-child) {
|
|
889
|
+
&.list-row, .list-row {
|
|
890
|
+
&:after {
|
|
891
|
+
content: "";
|
|
892
|
+
border-bottom: var(--border) solid;
|
|
893
|
+
inset-inline: var(--radius-box);
|
|
894
|
+
position: absolute;
|
|
895
|
+
bottom: calc(0.25rem * 0);
|
|
896
|
+
border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
|
|
897
|
+
}
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
.toggle {
|
|
902
|
+
border: var(--border) solid currentColor;
|
|
903
|
+
color: var(--input-color);
|
|
904
|
+
position: relative;
|
|
905
|
+
display: inline-grid;
|
|
906
|
+
flex-shrink: 0;
|
|
907
|
+
cursor: pointer;
|
|
908
|
+
appearance: none;
|
|
909
|
+
place-content: center;
|
|
910
|
+
vertical-align: middle;
|
|
911
|
+
webkit-user-select: none;
|
|
912
|
+
user-select: none;
|
|
913
|
+
grid-template-columns: 0fr 1fr 1fr;
|
|
914
|
+
--radius-selector-max: calc(
|
|
915
|
+
var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
|
|
916
|
+
);
|
|
917
|
+
border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
|
|
918
|
+
padding: var(--toggle-p);
|
|
919
|
+
box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
|
|
920
|
+
transition: color 0.3s, grid-template-columns 0.2s;
|
|
921
|
+
--input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
|
|
922
|
+
--toggle-p: 0.1875rem;
|
|
923
|
+
--size: calc(var(--size-selector, 0.25rem) * 6);
|
|
924
|
+
width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
|
|
925
|
+
height: var(--size);
|
|
926
|
+
> * {
|
|
927
|
+
z-index: 1;
|
|
928
|
+
grid-column: span 1 / span 1;
|
|
929
|
+
grid-column-start: 2;
|
|
930
|
+
grid-row-start: 1;
|
|
931
|
+
height: 100%;
|
|
932
|
+
cursor: pointer;
|
|
933
|
+
appearance: none;
|
|
934
|
+
background-color: transparent;
|
|
935
|
+
padding: calc(0.25rem * 0.5);
|
|
936
|
+
transition: opacity 0.2s, rotate 0.4s;
|
|
937
|
+
border: none;
|
|
938
|
+
&:focus {
|
|
939
|
+
outline-style: none;
|
|
940
|
+
@media (forced-colors: active) {
|
|
941
|
+
outline: 2px solid transparent;
|
|
942
|
+
outline-offset: 2px;
|
|
943
|
+
}
|
|
944
|
+
}
|
|
945
|
+
&:nth-child(2) {
|
|
946
|
+
color: var(--color-base-100);
|
|
947
|
+
rotate: 0deg;
|
|
948
|
+
}
|
|
949
|
+
&:nth-child(3) {
|
|
950
|
+
color: var(--color-base-100);
|
|
951
|
+
opacity: 0%;
|
|
952
|
+
rotate: -15deg;
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
&:has(:checked) {
|
|
956
|
+
> :nth-child(2) {
|
|
957
|
+
opacity: 0%;
|
|
958
|
+
rotate: 15deg;
|
|
959
|
+
}
|
|
960
|
+
> :nth-child(3) {
|
|
961
|
+
opacity: 100%;
|
|
962
|
+
rotate: 0deg;
|
|
963
|
+
}
|
|
964
|
+
}
|
|
965
|
+
&:before {
|
|
966
|
+
position: relative;
|
|
967
|
+
inset-inline-start: calc(0.25rem * 0);
|
|
968
|
+
grid-column-start: 2;
|
|
969
|
+
grid-row-start: 1;
|
|
970
|
+
aspect-ratio: 1 / 1;
|
|
971
|
+
height: 100%;
|
|
972
|
+
border-radius: var(--radius-selector);
|
|
973
|
+
background-color: currentColor;
|
|
974
|
+
@media print {
|
|
975
|
+
outline: .25rem solid;
|
|
976
|
+
}
|
|
977
|
+
@media print {
|
|
978
|
+
outline-offset: -1rem;
|
|
979
|
+
}
|
|
980
|
+
translate: 0;
|
|
981
|
+
--tw-content: "";
|
|
982
|
+
content: var(--tw-content);
|
|
983
|
+
transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
|
|
984
|
+
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
|
|
985
|
+
background-size: auto, calc(var(--noise) * 100%);
|
|
986
|
+
background-image: none, var(--fx-noise);
|
|
987
|
+
@media (forced-colors: active) {
|
|
988
|
+
outline-style: var(--tw-outline-style);
|
|
989
|
+
outline-width: 1px;
|
|
990
|
+
outline-offset: calc(1px * -1);
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
&:focus-visible, &:has(:focus-visible) {
|
|
994
|
+
outline: 2px solid currentColor;
|
|
995
|
+
outline-offset: 2px;
|
|
996
|
+
}
|
|
997
|
+
&:checked, &[aria-checked="true"], &:has(> input:checked) {
|
|
998
|
+
grid-template-columns: 1fr 1fr 0fr;
|
|
999
|
+
background-color: var(--color-base-100);
|
|
1000
|
+
--input-color: var(--color-base-content);
|
|
1001
|
+
&:before {
|
|
1002
|
+
background-color: currentColor;
|
|
1003
|
+
@starting-style {
|
|
1004
|
+
opacity: 0;
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
}
|
|
1008
|
+
&:indeterminate {
|
|
1009
|
+
grid-template-columns: 0.5fr 1fr 0.5fr;
|
|
1010
|
+
}
|
|
1011
|
+
&:disabled {
|
|
1012
|
+
cursor: not-allowed;
|
|
1013
|
+
opacity: 30%;
|
|
1014
|
+
&:before {
|
|
1015
|
+
background-color: transparent;
|
|
1016
|
+
border: var(--border) solid currentColor;
|
|
1017
|
+
}
|
|
1018
|
+
}
|
|
1019
|
+
}
|
|
851
1020
|
.input {
|
|
852
1021
|
cursor: text;
|
|
853
1022
|
border: var(--border) solid #0000;
|
|
@@ -1714,6 +1883,9 @@
|
|
|
1714
1883
|
.top-4 {
|
|
1715
1884
|
top: calc(var(--spacing) * 4);
|
|
1716
1885
|
}
|
|
1886
|
+
.top-full {
|
|
1887
|
+
top: 100%;
|
|
1888
|
+
}
|
|
1717
1889
|
.right-0 {
|
|
1718
1890
|
right: calc(var(--spacing) * 0);
|
|
1719
1891
|
}
|
|
@@ -1860,6 +2032,56 @@
|
|
|
1860
2032
|
.mx-auto {
|
|
1861
2033
|
margin-inline: auto;
|
|
1862
2034
|
}
|
|
2035
|
+
.input-lg {
|
|
2036
|
+
--size: calc(var(--size-field, 0.25rem) * 12);
|
|
2037
|
+
font-size: 1.125rem;
|
|
2038
|
+
&[type="number"] {
|
|
2039
|
+
&::-webkit-inner-spin-button {
|
|
2040
|
+
margin-block: calc(0.25rem * -3);
|
|
2041
|
+
margin-inline-end: calc(0.25rem * -3);
|
|
2042
|
+
}
|
|
2043
|
+
}
|
|
2044
|
+
}
|
|
2045
|
+
.input-md {
|
|
2046
|
+
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
2047
|
+
font-size: 0.875rem;
|
|
2048
|
+
&[type="number"] {
|
|
2049
|
+
&::-webkit-inner-spin-button {
|
|
2050
|
+
margin-block: calc(0.25rem * -3);
|
|
2051
|
+
margin-inline-end: calc(0.25rem * -3);
|
|
2052
|
+
}
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
2055
|
+
.input-sm {
|
|
2056
|
+
--size: calc(var(--size-field, 0.25rem) * 8);
|
|
2057
|
+
font-size: 0.75rem;
|
|
2058
|
+
&[type="number"] {
|
|
2059
|
+
&::-webkit-inner-spin-button {
|
|
2060
|
+
margin-block: calc(0.25rem * -2);
|
|
2061
|
+
margin-inline-end: calc(0.25rem * -3);
|
|
2062
|
+
}
|
|
2063
|
+
}
|
|
2064
|
+
}
|
|
2065
|
+
.input-xl {
|
|
2066
|
+
--size: calc(var(--size-field, 0.25rem) * 14);
|
|
2067
|
+
font-size: 1.375rem;
|
|
2068
|
+
&[type="number"] {
|
|
2069
|
+
&::-webkit-inner-spin-button {
|
|
2070
|
+
margin-block: calc(0.25rem * -4);
|
|
2071
|
+
margin-inline-end: calc(0.25rem * -3);
|
|
2072
|
+
}
|
|
2073
|
+
}
|
|
2074
|
+
}
|
|
2075
|
+
.input-xs {
|
|
2076
|
+
--size: calc(var(--size-field, 0.25rem) * 6);
|
|
2077
|
+
font-size: 0.6875rem;
|
|
2078
|
+
&[type="number"] {
|
|
2079
|
+
&::-webkit-inner-spin-button {
|
|
2080
|
+
margin-block: calc(0.25rem * -1);
|
|
2081
|
+
margin-inline-end: calc(0.25rem * -3);
|
|
2082
|
+
}
|
|
2083
|
+
}
|
|
2084
|
+
}
|
|
1863
2085
|
.my-4 {
|
|
1864
2086
|
margin-block: calc(var(--spacing) * 4);
|
|
1865
2087
|
}
|
|
@@ -1903,6 +2125,14 @@
|
|
|
1903
2125
|
justify-content: flex-end;
|
|
1904
2126
|
gap: calc(0.25rem * 2);
|
|
1905
2127
|
}
|
|
2128
|
+
.validator-hint {
|
|
2129
|
+
margin-top: calc(0.25rem * 2);
|
|
2130
|
+
font-size: var(--text-xs);
|
|
2131
|
+
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2132
|
+
}
|
|
2133
|
+
.mt-1 {
|
|
2134
|
+
margin-top: calc(var(--spacing) * 1);
|
|
2135
|
+
}
|
|
1906
2136
|
.mt-4 {
|
|
1907
2137
|
margin-top: calc(var(--spacing) * 4);
|
|
1908
2138
|
}
|
|
@@ -2159,6 +2389,9 @@
|
|
|
2159
2389
|
.hidden {
|
|
2160
2390
|
display: none;
|
|
2161
2391
|
}
|
|
2392
|
+
.inline {
|
|
2393
|
+
display: inline;
|
|
2394
|
+
}
|
|
2162
2395
|
.inline-block {
|
|
2163
2396
|
display: inline-block;
|
|
2164
2397
|
}
|
|
@@ -2409,6 +2642,9 @@
|
|
|
2409
2642
|
.h-svh {
|
|
2410
2643
|
height: 100svh;
|
|
2411
2644
|
}
|
|
2645
|
+
.max-h-60 {
|
|
2646
|
+
max-height: calc(var(--spacing) * 60);
|
|
2647
|
+
}
|
|
2412
2648
|
.min-h-40 {
|
|
2413
2649
|
min-height: calc(var(--spacing) * 40);
|
|
2414
2650
|
}
|
|
@@ -2620,6 +2856,9 @@
|
|
|
2620
2856
|
.overflow-x-scroll {
|
|
2621
2857
|
overflow-x: scroll;
|
|
2622
2858
|
}
|
|
2859
|
+
.overflow-y-auto {
|
|
2860
|
+
overflow-y: auto;
|
|
2861
|
+
}
|
|
2623
2862
|
.scroll-smooth {
|
|
2624
2863
|
scroll-behavior: smooth;
|
|
2625
2864
|
}
|
|
@@ -3022,6 +3261,10 @@
|
|
|
3022
3261
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
3023
3262
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
3024
3263
|
}
|
|
3264
|
+
.shadow-lg {
|
|
3265
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
3266
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
3267
|
+
}
|
|
3025
3268
|
.shadow-md {
|
|
3026
3269
|
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
3027
3270
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -3054,6 +3297,10 @@
|
|
|
3054
3297
|
}
|
|
3055
3298
|
}
|
|
3056
3299
|
}
|
|
3300
|
+
.blur {
|
|
3301
|
+
--tw-blur: blur(8px);
|
|
3302
|
+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
3303
|
+
}
|
|
3057
3304
|
.filter {
|
|
3058
3305
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
3059
3306
|
}
|
|
@@ -3124,6 +3371,46 @@
|
|
|
3124
3371
|
--btn-color: var(--color-warning);
|
|
3125
3372
|
--btn-fg: var(--color-warning-content);
|
|
3126
3373
|
}
|
|
3374
|
+
.input-accent {
|
|
3375
|
+
&, &:focus, &:focus-within {
|
|
3376
|
+
--input-color: var(--color-accent);
|
|
3377
|
+
}
|
|
3378
|
+
}
|
|
3379
|
+
.input-error {
|
|
3380
|
+
&, &:focus, &:focus-within {
|
|
3381
|
+
--input-color: var(--color-error);
|
|
3382
|
+
}
|
|
3383
|
+
}
|
|
3384
|
+
.input-info {
|
|
3385
|
+
&, &:focus, &:focus-within {
|
|
3386
|
+
--input-color: var(--color-info);
|
|
3387
|
+
}
|
|
3388
|
+
}
|
|
3389
|
+
.input-neutral {
|
|
3390
|
+
&, &:focus, &:focus-within {
|
|
3391
|
+
--input-color: var(--color-neutral);
|
|
3392
|
+
}
|
|
3393
|
+
}
|
|
3394
|
+
.input-primary {
|
|
3395
|
+
&, &:focus, &:focus-within {
|
|
3396
|
+
--input-color: var(--color-primary);
|
|
3397
|
+
}
|
|
3398
|
+
}
|
|
3399
|
+
.input-secondary {
|
|
3400
|
+
&, &:focus, &:focus-within {
|
|
3401
|
+
--input-color: var(--color-secondary);
|
|
3402
|
+
}
|
|
3403
|
+
}
|
|
3404
|
+
.input-success {
|
|
3405
|
+
&, &:focus, &:focus-within {
|
|
3406
|
+
--input-color: var(--color-success);
|
|
3407
|
+
}
|
|
3408
|
+
}
|
|
3409
|
+
.input-warning {
|
|
3410
|
+
&, &:focus, &:focus-within {
|
|
3411
|
+
--input-color: var(--color-warning);
|
|
3412
|
+
}
|
|
3413
|
+
}
|
|
3127
3414
|
.loading-bars {
|
|
3128
3415
|
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
|
|
3129
3416
|
}
|