manolis-ui 0.17.16 → 0.18.1
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 +2 -0
- package/dist/manolis-ui.css +1 -1
- package/dist/manolis-ui.js +641 -612
- package/dist/manolis-ui.umd.cjs +1 -1
- package/dist/style.css +165 -0
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -940,6 +940,134 @@
|
|
|
940
940
|
}
|
|
941
941
|
}
|
|
942
942
|
}
|
|
943
|
+
.\!toggle {
|
|
944
|
+
border: var(--border) solid currentColor !important;
|
|
945
|
+
color: var(--input-color) !important;
|
|
946
|
+
position: relative !important;
|
|
947
|
+
display: inline-grid !important;
|
|
948
|
+
flex-shrink: 0 !important;
|
|
949
|
+
cursor: pointer !important;
|
|
950
|
+
appearance: none !important;
|
|
951
|
+
place-content: center !important;
|
|
952
|
+
vertical-align: middle !important;
|
|
953
|
+
webkit-user-select: none !important;
|
|
954
|
+
user-select: none !important;
|
|
955
|
+
grid-template-columns: 0fr 1fr 1fr !important;
|
|
956
|
+
--radius-selector-max: calc(
|
|
957
|
+
var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
|
|
958
|
+
) !important;
|
|
959
|
+
border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) ) !important;
|
|
960
|
+
padding: var(--toggle-p) !important;
|
|
961
|
+
box-shadow: 0 1px currentColor inset !important;
|
|
962
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
963
|
+
box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset !important;
|
|
964
|
+
}
|
|
965
|
+
transition: color 0.3s, grid-template-columns 0.2s !important;
|
|
966
|
+
--input-color: var(--color-base-content) !important;
|
|
967
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
968
|
+
--input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000) !important;
|
|
969
|
+
}
|
|
970
|
+
--toggle-p: 0.1875rem !important;
|
|
971
|
+
--size: calc(var(--size-selector, 0.25rem) * 6) !important;
|
|
972
|
+
width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2) !important;
|
|
973
|
+
height: var(--size) !important;
|
|
974
|
+
> * {
|
|
975
|
+
z-index: 1 !important;
|
|
976
|
+
grid-column: span 1 / span 1 !important;
|
|
977
|
+
grid-column-start: 2 !important;
|
|
978
|
+
grid-row-start: 1 !important;
|
|
979
|
+
height: 100% !important;
|
|
980
|
+
cursor: pointer !important;
|
|
981
|
+
appearance: none !important;
|
|
982
|
+
background-color: transparent !important;
|
|
983
|
+
padding: calc(0.25rem * 0.5) !important;
|
|
984
|
+
transition: opacity 0.2s, rotate 0.4s !important;
|
|
985
|
+
border: none !important;
|
|
986
|
+
&:focus {
|
|
987
|
+
outline-style: none !important;
|
|
988
|
+
@media (forced-colors: active) {
|
|
989
|
+
outline: 2px solid transparent !important;
|
|
990
|
+
outline-offset: 2px !important;
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
&:nth-child(2) {
|
|
994
|
+
color: var(--color-base-100) !important;
|
|
995
|
+
rotate: 0deg !important;
|
|
996
|
+
}
|
|
997
|
+
&:nth-child(3) {
|
|
998
|
+
color: var(--color-base-100) !important;
|
|
999
|
+
opacity: 0% !important;
|
|
1000
|
+
rotate: -15deg !important;
|
|
1001
|
+
}
|
|
1002
|
+
}
|
|
1003
|
+
&:has(:checked) {
|
|
1004
|
+
> :nth-child(2) {
|
|
1005
|
+
opacity: 0% !important;
|
|
1006
|
+
rotate: 15deg !important;
|
|
1007
|
+
}
|
|
1008
|
+
> :nth-child(3) {
|
|
1009
|
+
opacity: 100% !important;
|
|
1010
|
+
rotate: 0deg !important;
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
&:before {
|
|
1014
|
+
position: relative !important;
|
|
1015
|
+
inset-inline-start: calc(0.25rem * 0) !important;
|
|
1016
|
+
grid-column-start: 2 !important;
|
|
1017
|
+
grid-row-start: 1 !important;
|
|
1018
|
+
aspect-ratio: 1 / 1 !important;
|
|
1019
|
+
height: 100% !important;
|
|
1020
|
+
border-radius: var(--radius-selector) !important;
|
|
1021
|
+
background-color: currentColor !important;
|
|
1022
|
+
@media print {
|
|
1023
|
+
outline: .25rem solid !important;
|
|
1024
|
+
}
|
|
1025
|
+
@media print {
|
|
1026
|
+
outline-offset: -1rem !important;
|
|
1027
|
+
}
|
|
1028
|
+
translate: 0 !important;
|
|
1029
|
+
--tw-content: "" !important;
|
|
1030
|
+
content: var(--tw-content) !important;
|
|
1031
|
+
transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s !important;
|
|
1032
|
+
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 currentColor !important;
|
|
1033
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1034
|
+
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) !important;
|
|
1035
|
+
}
|
|
1036
|
+
background-size: auto, calc(var(--noise) * 100%) !important;
|
|
1037
|
+
background-image: none, var(--fx-noise) !important;
|
|
1038
|
+
@media (forced-colors: active) {
|
|
1039
|
+
outline-style: var(--tw-outline-style) !important;
|
|
1040
|
+
outline-width: 1px !important;
|
|
1041
|
+
outline-offset: calc(1px * -1) !important;
|
|
1042
|
+
}
|
|
1043
|
+
}
|
|
1044
|
+
&:focus-visible, &:has(:focus-visible) {
|
|
1045
|
+
outline: 2px solid currentColor !important;
|
|
1046
|
+
outline-offset: 2px !important;
|
|
1047
|
+
}
|
|
1048
|
+
&:checked, &[aria-checked="true"], &:has(> input:checked) {
|
|
1049
|
+
grid-template-columns: 1fr 1fr 0fr !important;
|
|
1050
|
+
background-color: var(--color-base-100) !important;
|
|
1051
|
+
--input-color: var(--color-base-content) !important;
|
|
1052
|
+
&:before {
|
|
1053
|
+
background-color: currentColor !important;
|
|
1054
|
+
@starting-style {
|
|
1055
|
+
opacity: 0 !important;
|
|
1056
|
+
}
|
|
1057
|
+
}
|
|
1058
|
+
}
|
|
1059
|
+
&:indeterminate {
|
|
1060
|
+
grid-template-columns: 0.5fr 1fr 0.5fr !important;
|
|
1061
|
+
}
|
|
1062
|
+
&:disabled {
|
|
1063
|
+
cursor: not-allowed !important;
|
|
1064
|
+
opacity: 30% !important;
|
|
1065
|
+
&:before {
|
|
1066
|
+
background-color: transparent !important;
|
|
1067
|
+
border: var(--border) solid currentColor !important;
|
|
1068
|
+
}
|
|
1069
|
+
}
|
|
1070
|
+
}
|
|
943
1071
|
.toggle {
|
|
944
1072
|
border: var(--border) solid currentColor;
|
|
945
1073
|
color: var(--input-color);
|
|
@@ -2262,6 +2390,43 @@
|
|
|
2262
2390
|
}
|
|
2263
2391
|
}
|
|
2264
2392
|
}
|
|
2393
|
+
.join-vertical {
|
|
2394
|
+
flex-direction: column;
|
|
2395
|
+
> .join-item:first-child {
|
|
2396
|
+
--join-ss: var(--radius-field);
|
|
2397
|
+
--join-se: var(--radius-field);
|
|
2398
|
+
--join-es: 0;
|
|
2399
|
+
--join-ee: 0;
|
|
2400
|
+
}
|
|
2401
|
+
:first-child:not(:last-child) {
|
|
2402
|
+
.join-item {
|
|
2403
|
+
--join-ss: var(--radius-field);
|
|
2404
|
+
--join-se: var(--radius-field);
|
|
2405
|
+
--join-es: 0;
|
|
2406
|
+
--join-ee: 0;
|
|
2407
|
+
}
|
|
2408
|
+
}
|
|
2409
|
+
> .join-item:last-child {
|
|
2410
|
+
--join-ss: 0;
|
|
2411
|
+
--join-se: 0;
|
|
2412
|
+
--join-es: var(--radius-field);
|
|
2413
|
+
--join-ee: var(--radius-field);
|
|
2414
|
+
}
|
|
2415
|
+
:last-child:not(:first-child) {
|
|
2416
|
+
.join-item {
|
|
2417
|
+
--join-ss: 0;
|
|
2418
|
+
--join-se: 0;
|
|
2419
|
+
--join-es: var(--radius-field);
|
|
2420
|
+
--join-ee: var(--radius-field);
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
.join-item {
|
|
2424
|
+
&:where(*:not(:first-child)) {
|
|
2425
|
+
margin-inline-start: 0;
|
|
2426
|
+
margin-block-start: calc(var(--border, 1px) * -1);
|
|
2427
|
+
}
|
|
2428
|
+
}
|
|
2429
|
+
}
|
|
2265
2430
|
.join-item {
|
|
2266
2431
|
&:where(*:not(:first-child)) {
|
|
2267
2432
|
margin-inline-start: calc(var(--border, 1px) * -1);
|