neko-ui 2.8.24 → 2.8.26
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/es/button/style.js +23 -21
- package/es/button/style.js.map +1 -1
- package/es/carousel/style.js +3 -2
- package/es/carousel/style.js.map +1 -1
- package/es/checkbox/style.js +2 -2
- package/es/checkbox/style.js.map +1 -1
- package/es/code/style.js +1 -1
- package/es/code/style.js.map +1 -1
- package/es/md-style/index.js +1 -0
- package/es/md-style/index.js.map +1 -1
- package/es/pagination/styles.js +2 -2
- package/es/pagination/styles.js.map +1 -1
- package/es/radio/style.js +2 -2
- package/es/radio/style.js.map +1 -1
- package/es/switch/style.js +1 -1
- package/es/switch/style.js.map +1 -1
- package/es/table/styles.js +1 -1
- package/es/table/styles.js.map +1 -1
- package/es/tabs/style.js +1 -1
- package/es/tabs/style.js.map +1 -1
- package/lib/button/style.js +23 -21
- package/lib/button/style.js.map +1 -1
- package/lib/carousel/style.js +3 -2
- package/lib/carousel/style.js.map +1 -1
- package/lib/checkbox/style.js +2 -2
- package/lib/checkbox/style.js.map +1 -1
- package/lib/code/style.js +1 -1
- package/lib/code/style.js.map +1 -1
- package/lib/md-style/index.js +1 -0
- package/lib/md-style/index.js.map +1 -1
- package/lib/pagination/styles.js +2 -2
- package/lib/pagination/styles.js.map +1 -1
- package/lib/radio/style.js +2 -2
- package/lib/radio/style.js.map +1 -1
- package/lib/switch/style.js +1 -1
- package/lib/switch/style.js.map +1 -1
- package/lib/table/styles.js +1 -1
- package/lib/table/styles.js.map +1 -1
- package/lib/tabs/style.js +1 -1
- package/lib/tabs/style.js.map +1 -1
- package/package.json +12 -12
- package/umd/index.js +2 -2
- package/umd/js/{26a74dde46194c7a.js → 677a19fe3b670f0d.js} +1 -1
package/es/button/style.js
CHANGED
|
@@ -30,6 +30,28 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
|
|
|
30
30
|
transition-property: color;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.fill {
|
|
34
|
+
&:not(.disabled, .default) {
|
|
35
|
+
.label {
|
|
36
|
+
color: #fff !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
--btn-bg: var(--btn-hover-color) !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:active {
|
|
44
|
+
--btn-bg: var(--btn-active-color) !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.fill.danger.default {
|
|
50
|
+
.label {
|
|
51
|
+
color: #fff !important;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
33
55
|
.btn {
|
|
34
56
|
display: inline-flex;
|
|
35
57
|
justify-content: center;
|
|
@@ -139,27 +161,7 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
|
|
|
139
161
|
${r("error")}
|
|
140
162
|
${r("success")}
|
|
141
163
|
${r("warning")}
|
|
142
|
-
|
|
143
|
-
&:not(.disabled, .default) {
|
|
144
|
-
.label {
|
|
145
|
-
color: #fff !important;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
&:hover {
|
|
149
|
-
--btn-bg: var(--btn-hover-color) !important;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
&:active {
|
|
153
|
-
--btn-bg: var(--btn-active-color) !important;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.fill.danger.default {
|
|
159
|
-
.label {
|
|
160
|
-
color: #fff !important;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
164
|
+
|
|
163
165
|
|
|
164
166
|
.dashed {
|
|
165
167
|
border-style: dashed;
|
package/es/button/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n let _cls = `.${type}`,\n fillCls = `.${type}.fill`;\n\n if (type === 'error') {\n _cls = `.${type},.danger`;\n fillCls = `.${type}.fill,.danger.fill`;\n }\n\n return css`\n ${_cls}:not(.disabled) {\n --btn-border: var(--${type}-border);\n --btn-bg: var(--${type}-selection);\n --btn-hover-bg: var(--btn-bg);\n --btn-hover-color: var(--${type}-hover);\n --btn-active-color: var(--${type}-active);\n --btn-outline-color: var(--${type}-outline);\n --btn-color: var(--${type}-color);\n }\n ${fillCls} {\n --btn-bg: var(--${type}-color);\n --btn-border: var(--${type}-color);\n --btn-hover-bg: var(--${type}-hover);\n --btn-active-bg: var(--${type}-active);\n }\n `;\n}\n\nexport const style = css`\n .btn,\n .label {\n transition-duration: var(--transition-duration);\n }\n\n .label {\n display: block;\n line-height: normal;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n transition-property: color;\n }\n\n .btn {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--btn-border);\n border-radius: var(--border-radius);\n padding: 0 16px;\n inline-size: fit-content;\n min-inline-size: var(--btn-size);\n block-size: fit-content;\n min-block-size: var(--btn-size);\n font-size: var(--font-size);\n color: var(--btn-color);\n background-color: var(--btn-bg);\n outline-offset: 4px;\n gap: 3px;\n line-height: 1;\n cursor: pointer;\n transition-property: color, background-color, border-color, width, height, transform;\n touch-action: manipulation;\n box-sizing: border-box;\n user-select: none;\n outline: none;\n\n &:has(.icon) {\n padding: 4px 10px;\n }\n\n &:not(.disabled) {\n &:active {\n transform: scale(0.98);\n\n .label {\n color: var(--btn-active-color);\n }\n\n &:not(.link, .flat) {\n border-color: var(--btn-active-color);\n }\n\n &:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n }\n\n &:hover:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n\n &:hover:not(.link, .flat),\n &:focus:not(.link, .flat) {\n border-color: var(--btn-hover-color);\n }\n\n &:hover .label,\n &:focus .label {\n color: var(--btn-hover-color);\n }\n }\n\n &.disabled {\n --btn-color: var(--disable-color);\n --btn-bg: var(--disable-bg);\n --btn-border: var(--disable-border);\n\n cursor: not-allowed;\n }\n }\n\n .normal {\n --btn-size: 32px;\n }\n\n .small {\n --btn-size: 24px;\n\n gap: 2px;\n padding: 0 7px;\n font-size: var(--font-size-xs);\n\n &:has(.icon) {\n padding: 4px 5px;\n }\n }\n\n .large {\n --btn-size: 40px;\n\n font-size: var(--font-size-lg);\n gap: 4px;\n\n &:has(.icon) {\n padding: 4px 12px;\n }\n }\n\n .default:not(.disabled) {\n --btn-outline-color: var(--primary-outline);\n --btn-color: var(--text-color);\n --btn-bg: var(--component-bg);\n --btn-border: var(--border-color);\n --btn-hover-color: var(--primary-hover);\n --btn-active-color: var(--primary-active);\n }\n\n ${btnColor('primary')}\n ${btnColor('error')}\n ${btnColor('success')}\n ${btnColor('warning')}\n
|
|
1
|
+
{"version":3,"sources":["../../components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n let _cls = `.${type}`,\n fillCls = `.${type}.fill`;\n\n if (type === 'error') {\n _cls = `.${type},.danger`;\n fillCls = `.${type}.fill,.danger.fill`;\n }\n\n return css`\n ${_cls}:not(.disabled) {\n --btn-border: var(--${type}-border);\n --btn-bg: var(--${type}-selection);\n --btn-hover-bg: var(--btn-bg);\n --btn-hover-color: var(--${type}-hover);\n --btn-active-color: var(--${type}-active);\n --btn-outline-color: var(--${type}-outline);\n --btn-color: var(--${type}-color);\n }\n ${fillCls} {\n --btn-bg: var(--${type}-color);\n --btn-border: var(--${type}-color);\n --btn-hover-bg: var(--${type}-hover);\n --btn-active-bg: var(--${type}-active);\n }\n `;\n}\n\nexport const style = css`\n .btn,\n .label {\n transition-duration: var(--transition-duration);\n }\n\n .label {\n display: block;\n line-height: normal;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n transition-property: color;\n }\n\n .fill {\n &:not(.disabled, .default) {\n .label {\n color: #fff !important;\n }\n\n &:hover {\n --btn-bg: var(--btn-hover-color) !important;\n }\n\n &:active {\n --btn-bg: var(--btn-active-color) !important;\n }\n }\n }\n\n .fill.danger.default {\n .label {\n color: #fff !important;\n }\n }\n\n .btn {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--btn-border);\n border-radius: var(--border-radius);\n padding: 0 16px;\n inline-size: fit-content;\n min-inline-size: var(--btn-size);\n block-size: fit-content;\n min-block-size: var(--btn-size);\n font-size: var(--font-size);\n color: var(--btn-color);\n background-color: var(--btn-bg);\n outline-offset: 4px;\n gap: 3px;\n line-height: 1;\n cursor: pointer;\n transition-property: color, background-color, border-color, width, height, transform;\n touch-action: manipulation;\n box-sizing: border-box;\n user-select: none;\n outline: none;\n\n &:has(.icon) {\n padding: 4px 10px;\n }\n\n &:not(.disabled) {\n &:active {\n transform: scale(0.98);\n\n .label {\n color: var(--btn-active-color);\n }\n\n &:not(.link, .flat) {\n border-color: var(--btn-active-color);\n }\n\n &:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n }\n\n &:hover:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n\n &:hover:not(.link, .flat),\n &:focus:not(.link, .flat) {\n border-color: var(--btn-hover-color);\n }\n\n &:hover .label,\n &:focus .label {\n color: var(--btn-hover-color);\n }\n }\n\n &.disabled {\n --btn-color: var(--disable-color);\n --btn-bg: var(--disable-bg);\n --btn-border: var(--disable-border);\n\n cursor: not-allowed;\n }\n }\n\n .normal {\n --btn-size: 32px;\n }\n\n .small {\n --btn-size: 24px;\n\n gap: 2px;\n padding: 0 7px;\n font-size: var(--font-size-xs);\n\n &:has(.icon) {\n padding: 4px 5px;\n }\n }\n\n .large {\n --btn-size: 40px;\n\n font-size: var(--font-size-lg);\n gap: 4px;\n\n &:has(.icon) {\n padding: 4px 12px;\n }\n }\n\n .default:not(.disabled) {\n --btn-outline-color: var(--primary-outline);\n --btn-color: var(--text-color);\n --btn-bg: var(--component-bg);\n --btn-border: var(--border-color);\n --btn-hover-color: var(--primary-hover);\n --btn-active-color: var(--primary-active);\n }\n\n ${btnColor('primary')}\n ${btnColor('error')}\n ${btnColor('success')}\n ${btnColor('warning')}\n \n\n .dashed {\n border-style: dashed;\n }\n\n .link {\n --btn-bg: transparent !important;\n --btn-border: transparent !important;\n\n border-color: transparent !important;\n background-color: transparent !important;\n\n &::after {\n content: none;\n }\n }\n\n .flat {\n --btn-border: transparent !important;\n\n background-color: transparent;\n\n &:not(.disabled, .link).default {\n --btn-hover-bg: rgb(0 0 0 / 6%);\n }\n }\n\n .ghost {\n background-color: transparent !important;\n }\n\n .circle {\n border-radius: 50% !important;\n padding: 0;\n min-inline-size: var(--btn-size);\n max-inline-size: var(--btn-size);\n min-block-size: var(--btn-size);\n max-block-size: var(--btn-size);\n text-align: center;\n line-height: var(--btn-size);\n }\n\n .block {\n inline-size: 100%;\n }\n\n .without:not(.link, .flat)::before {\n animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n position: absolute;\n z-index: -1;\n display: block;\n border-radius: inherit;\n opacity: 0.2;\n box-shadow: 0 0 0 0 var(--btn-outline-color);\n inset: 0;\n animation-fill-mode: forwards;\n content: '';\n pointer-events: none;\n }\n\n @keyframes btn-wave-effect {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 var(--btn-hover-color);\n }\n\n /* 25% {\n opacity: 1;\n box-shadow: 0 0 0 4px var(--btn-hover-color);\n } */\n\n 100% {\n opacity: 0;\n box-shadow: 0 0 0 6px var(--btn-outline-color);\n }\n }\n`;\n"],"names":["css","btnColor","type","_cls","fillCls","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAIlC,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCF,CAAG,CAAC;IACT,EAAEG,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEA,OAAO,MAAMG,MAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8ExB,CAAC,AAAC"}
|
package/es/carousel/style.js
CHANGED
|
@@ -28,6 +28,7 @@ import{css as e}from"@moneko/css";export const style=e`
|
|
|
28
28
|
min-inline-size: 100%;
|
|
29
29
|
block-size: 100%;
|
|
30
30
|
min-block-size: 100%;
|
|
31
|
+
|
|
31
32
|
/* content-visibility: auto; */
|
|
32
33
|
transform: translate3d(-100%, 0, 0);
|
|
33
34
|
}
|
|
@@ -57,7 +58,7 @@ import{css as e}from"@moneko/css";export const style=e`
|
|
|
57
58
|
font-size: 16px;
|
|
58
59
|
font-weight: bold;
|
|
59
60
|
transition: transform var(--transition-duration);
|
|
60
|
-
inset-block: 0
|
|
61
|
+
inset-block: 0;
|
|
61
62
|
inline-size: fit-content;
|
|
62
63
|
block-size: fit-content;
|
|
63
64
|
line-height: 1;
|
|
@@ -89,7 +90,7 @@ import{css as e}from"@moneko/css";export const style=e`
|
|
|
89
90
|
|
|
90
91
|
.dots {
|
|
91
92
|
position: absolute;
|
|
92
|
-
inset-inline: 0
|
|
93
|
+
inset-inline: 0;
|
|
93
94
|
inset-block-end: 16px;
|
|
94
95
|
z-index: 1;
|
|
95
96
|
display: flex;
|
package/es/carousel/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n inline-size: 100%;\n }\n\n .carousel {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius);\n inline-size: 100%;\n block-size: 200px;\n color: #fff;\n user-select: none;\n line-height: normal;\n background-color: rgb(0 0 0 / 20%);\n\n & ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .item {\n display: flex;\n justify-content: center;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 100%;\n block-size: 100%;\n min-block-size: 100%;\n /* content-visibility: auto; */\n transform: translate3d(-100%, 0, 0);\n }\n\n .list {\n display: flex;\n border-radius: inherit;\n inline-size: 100%;\n block-size: 100%;\n transform: translate3d(0, 0, 0);\n\n &[data-dir='-1'] .item {\n animation: carousel-prev 500ms forwards;\n }\n\n &[data-dir='1'] .item {\n animation: carousel-next 500ms forwards;\n }\n }\n\n .prev,\n .next {\n position: absolute;\n z-index: 1;\n margin: auto;\n border-radius: var(--border-radius);\n font-size: 16px;\n font-weight: bold;\n transition: transform var(--transition-duration);\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n inline-size: 100%;\n }\n\n .carousel {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius);\n inline-size: 100%;\n block-size: 200px;\n color: #fff;\n user-select: none;\n line-height: normal;\n background-color: rgb(0 0 0 / 20%);\n\n & ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .item {\n display: flex;\n justify-content: center;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 100%;\n block-size: 100%;\n min-block-size: 100%;\n\n /* content-visibility: auto; */\n transform: translate3d(-100%, 0, 0);\n }\n\n .list {\n display: flex;\n border-radius: inherit;\n inline-size: 100%;\n block-size: 100%;\n transform: translate3d(0, 0, 0);\n\n &[data-dir='-1'] .item {\n animation: carousel-prev 500ms forwards;\n }\n\n &[data-dir='1'] .item {\n animation: carousel-next 500ms forwards;\n }\n }\n\n .prev,\n .next {\n position: absolute;\n z-index: 1;\n margin: auto;\n border-radius: var(--border-radius);\n font-size: 16px;\n font-weight: bold;\n transition: transform var(--transition-duration);\n inset-block: 0;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: 1;\n cursor: pointer;\n\n &::before {\n display: inline-block;\n transform: rotate(90deg);\n }\n }\n\n .prev {\n inset-inline-start: 4px;\n transform: translateX(-32px) scaleY(0);\n\n &::before {\n content: '﹀';\n }\n }\n\n .next {\n inset-inline-end: 4px;\n transform: translateX(32px) scaleY(0);\n\n &::before {\n content: '︿';\n }\n }\n\n .dots {\n position: absolute;\n inset-inline: 0;\n inset-block-end: 16px;\n z-index: 1;\n display: flex;\n overflow: hidden;\n margin: 0 auto;\n inline-size: fit-content;\n max-inline-size: calc(100% - 42px);\n transition:\n transform var(--transition-duration) linear,\n opacity var(--transition-duration) linear;\n gap: 4px;\n }\n\n .dot {\n --offset: 0;\n\n border-radius: 2px;\n inline-size: 16px;\n min-inline-size: 8px;\n block-size: 3px;\n background-color: rgb(255 255 255 / 80%);\n transition: background-color var(--transition-duration) linear;\n cursor: pointer;\n\n &:hover,\n &.active {\n background-color: var(--primary-color);\n }\n }\n\n .header {\n position: absolute;\n inset-block-start: 0;\n z-index: 1;\n display: flex;\n inline-size: 100%;\n transition: transform var(--transition-duration);\n transform: translate3d(0, -100%, 0);\n }\n\n .carousel:hover {\n .prev,\n .next {\n &:not([data-show='false']) {\n transform: translateX(0) scaleY(1.5);\n }\n }\n\n .header {\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes carousel-prev {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes carousel-next {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(-200%, 0, 0);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqKzB,CAAC,AAAC"}
|
package/es/checkbox/style.js
CHANGED
|
@@ -67,8 +67,8 @@ import{css as r}from"@moneko/css";export const style=r`
|
|
|
67
67
|
transition-timing-function: var(--transition-timing-function);
|
|
68
68
|
transition-property: background-color, transform, border-color, height;
|
|
69
69
|
box-sizing: border-box;
|
|
70
|
-
inset-block: 0
|
|
71
|
-
inset-inline: 0
|
|
70
|
+
inset-block: 0;
|
|
71
|
+
inset-inline: 0;
|
|
72
72
|
content: '';
|
|
73
73
|
inline-size: 10px;
|
|
74
74
|
block-size: 10px;
|
package/es/checkbox/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n .item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n box-sizing: border-box;\n gap: 6px;\n outline: 0;\n\n label {\n color: var(--text-color);\n cursor: pointer;\n }\n\n .checkbox {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--component-bg);\n outline: 0 solid transparent;\n box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n transition:\n 0.3s border-color var(--transition-timing-function),\n 0.3s box-shadow var(--transition-timing-function),\n 0.3s outline var(--transition-timing-function);\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &:active {\n --primary-color: var(--primary-active);\n --border-color: var(--primary-active);\n }\n\n &:disabled {\n --border-color: var(--disable-border);\n --primary-color: var(--disable-border);\n }\n\n &::before {\n position: absolute;\n display: block;\n margin: auto;\n border-style: solid;\n border-width: 0 0 2px 2px;\n border-color: transparent;\n transition-duration: 0.3s;\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color, height;\n box-sizing: border-box;\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n .item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n box-sizing: border-box;\n gap: 6px;\n outline: 0;\n\n label {\n color: var(--text-color);\n cursor: pointer;\n }\n\n .checkbox {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--component-bg);\n outline: 0 solid transparent;\n box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n transition:\n 0.3s border-color var(--transition-timing-function),\n 0.3s box-shadow var(--transition-timing-function),\n 0.3s outline var(--transition-timing-function);\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &:active {\n --primary-color: var(--primary-active);\n --border-color: var(--primary-active);\n }\n\n &:disabled {\n --border-color: var(--disable-border);\n --primary-color: var(--disable-border);\n }\n\n &::before {\n position: absolute;\n display: block;\n margin: auto;\n border-style: solid;\n border-width: 0 0 2px 2px;\n border-color: transparent;\n transition-duration: 0.3s;\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color, height;\n box-sizing: border-box;\n inset-block: 0;\n inset-inline: 0;\n content: '';\n inline-size: 10px;\n block-size: 10px;\n transform: scale(0);\n }\n\n &:checked {\n --shadow-w: 16px;\n --border-color: var(--primary-color);\n\n &::before {\n block-size: 5px;\n border-color: var(--primary-outline);\n transform: rotate(-55deg) translateY(-10%) translateX(5%) scale(1);\n }\n\n & + label {\n --text-color: var(--primary-color);\n }\n }\n\n &:indeterminate:not(:checked) {\n &::before {\n border-radius: 2px;\n background-color: var(--primary-color);\n transform: scale(1);\n }\n }\n\n &:not(:disabled, :checked):hover {\n --primary-color: var(--primary-hover);\n --border-color: var(--primary-hover);\n }\n }\n\n &:not([aria-disabled]:not([aria-disabled='false'])):focus .checkbox {\n outline: 3px solid var(--primary-outline);\n\n &:not(:checked) {\n border-color: var(--primary-hover);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: not-allowed;\n\n & > label {\n --text-color: var(--disable-color);\n\n cursor: not-allowed;\n }\n }\n\n &:last-child {\n margin-inline-end: 16px;\n }\n }\n\n ${['success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n )\n .join('')}\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC,AAAC"}
|
package/es/code/style.js
CHANGED
|
@@ -32,7 +32,7 @@ import{css as o}from"@moneko/css";export const style=o`
|
|
|
32
32
|
resize: none;
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
inset-block: 32px 8px;
|
|
35
|
-
inset-inline: 16px
|
|
35
|
+
inset-inline: 16px;
|
|
36
36
|
min-block-size: 64px;
|
|
37
37
|
caret-color: var(--text-color);
|
|
38
38
|
block-size: fit-content;
|
package/es/code/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n position: relative;\n box-sizing: border-box;\n }\n\n .not-toolbar code {\n padding-block-start: 8px !important;\n\n .line-numbers-rows {\n padding-block-start: 8px !important;\n }\n }\n\n .n-editor {\n --font-size: 13px;\n\n margin-block-start: 0;\n position: relative;\n\n textarea {\n position: absolute;\n z-index: 1;\n margin: 0;\n border: none;\n padding: 0;\n font-size: var(--font-size);\n white-space: inherit;\n color: transparent;\n background-color: transparent;\n outline: none;\n resize: none;\n box-sizing: border-box;\n inset-block: 32px 8px;\n inset-inline: 16px
|
|
1
|
+
{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n position: relative;\n box-sizing: border-box;\n }\n\n .not-toolbar code {\n padding-block-start: 8px !important;\n\n .line-numbers-rows {\n padding-block-start: 8px !important;\n }\n }\n\n .n-editor {\n --font-size: 13px;\n\n margin-block-start: 0;\n position: relative;\n\n textarea {\n position: absolute;\n z-index: 1;\n margin: 0;\n border: none;\n padding: 0;\n font-size: var(--font-size);\n white-space: inherit;\n color: transparent;\n background-color: transparent;\n outline: none;\n resize: none;\n box-sizing: border-box;\n inset-block: 32px 8px;\n inset-inline: 16px;\n min-block-size: 64px;\n caret-color: var(--text-color);\n block-size: fit-content;\n line-height: inherit !important;\n\n &.line-numbers {\n inset-inline: 54px 10px;\n }\n\n &.not-toolbar {\n inset-block-start: 8px;\n min-block-size: 20px;\n }\n }\n\n pre {\n margin-block-start: 0 !important;\n pointer-events: none;\n inline-size: 100%;\n block-size: 100%;\n min-block-size: 65px;\n line-height: inherit !important;\n\n &.not-toolbar {\n min-block-size: 36px;\n }\n\n .toolbar {\n pointer-events: all;\n }\n\n code {\n line-height: inherit !important;\n }\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEzB,CAAC,AAAC"}
|
package/es/md-style/index.js
CHANGED
package/es/md-style/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(10px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n border-radius: var(--border-radius);\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n /* content-visibility: auto;\n contain-intrinsic-size: 32px; */\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vb - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n n-img::part(img) {\n min-inline-size: 24px;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n\nexport default mdStyle;\n"],"names":["css","mdStyle"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAElC,IAAMC,EAAUD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAujBpB,CAAC,AAED,gBAAeC,CAAQ"}
|
|
1
|
+
{"version":3,"sources":["../../components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(10px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n border-radius: var(--border-radius);\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n\n /* content-visibility: auto;\n contain-intrinsic-size: 32px; */\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vb - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n n-img::part(img) {\n min-inline-size: 24px;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n\nexport default mdStyle;\n"],"names":["css","mdStyle"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAElC,IAAMC,EAAUD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwjBpB,CAAC,AAED,gBAAeC,CAAQ"}
|
package/es/pagination/styles.js
CHANGED
|
@@ -41,8 +41,8 @@ import{css as t}from"@moneko/css";export const styles=t`
|
|
|
41
41
|
inline-size: fit-content;
|
|
42
42
|
block-size: fit-content;
|
|
43
43
|
line-height: inherit;
|
|
44
|
-
inset-block: 0
|
|
45
|
-
inset-inline: 0
|
|
44
|
+
inset-block: 0;
|
|
45
|
+
inset-inline: 0;
|
|
46
46
|
content: '⋯';
|
|
47
47
|
pointer-events: none;
|
|
48
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/pagination/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n .pagination {\n ul {\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n gap: 4px;\n }\n }\n\n .pagination-item::part(button) {\n padding: 0 6px;\n }\n\n .pagination-prev {\n &::part(label) {\n transform: translateX(-25%);\n }\n }\n\n .pagination-next {\n &::part(label) {\n transform: translateX(25%);\n }\n }\n\n .pagination-p,\n .pagination-n {\n &::part(button) {\n position: relative;\n\n &::after {\n position: absolute;\n display: inline-block;\n margin: auto;\n font-size: inherit;\n font-weight: bold;\n opacity: 0.5;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: inherit;\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/pagination/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n .pagination {\n ul {\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n gap: 4px;\n }\n }\n\n .pagination-item::part(button) {\n padding: 0 6px;\n }\n\n .pagination-prev {\n &::part(label) {\n transform: translateX(-25%);\n }\n }\n\n .pagination-next {\n &::part(label) {\n transform: translateX(25%);\n }\n }\n\n .pagination-p,\n .pagination-n {\n &::part(button) {\n position: relative;\n\n &::after {\n position: absolute;\n display: inline-block;\n margin: auto;\n font-size: inherit;\n font-weight: bold;\n opacity: 0.5;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: inherit;\n inset-block: 0;\n inset-inline: 0;\n content: '⋯';\n pointer-events: none;\n }\n }\n\n &::part(label) {\n opacity: 0;\n }\n\n &:hover::part(button)::after {\n content: var(--content);\n font-weight: inherit;\n }\n }\n\n .pagination-p {\n --content: '《';\n\n &:hover {\n &::part(button)::after {\n transform: translateX(-25%);\n }\n }\n }\n\n .pagination-n {\n --content: '》';\n\n &:hover {\n &::part(button)::after {\n transform: translateX(25%);\n }\n }\n }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+E1B,CAAC,AAAC"}
|
package/es/radio/style.js
CHANGED
|
@@ -39,8 +39,8 @@ import{css as r}from"@moneko/css";export const style=r`
|
|
|
39
39
|
margin: auto;
|
|
40
40
|
border-radius: 50%;
|
|
41
41
|
box-shadow: inset 0 0 0 8px var(--primary-color);
|
|
42
|
-
inset-block: 0
|
|
43
|
-
inset-inline: 0
|
|
42
|
+
inset-block: 0;
|
|
43
|
+
inset-inline: 0;
|
|
44
44
|
content: '';
|
|
45
45
|
inline-size: 10px;
|
|
46
46
|
block-size: 10px;
|
package/es/radio/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/radio/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n\n .item,\n .item .label {\n display: inline-flex;\n gap: 6px;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: fit-content;\n }\n\n .item {\n outline: 0;\n\n .radio {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 50%;\n background-color: var(--component-bg);\n outline: none;\n transition: 120ms border-color linear;\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &::before {\n position: absolute;\n display: inline-block;\n margin: auto;\n border-radius: 50%;\n box-shadow: inset 0 0 0 8px var(--primary-color);\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/radio/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n\n .item,\n .item .label {\n display: inline-flex;\n gap: 6px;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: fit-content;\n }\n\n .item {\n outline: 0;\n\n .radio {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 50%;\n background-color: var(--component-bg);\n outline: none;\n transition: 120ms border-color linear;\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &::before {\n position: absolute;\n display: inline-block;\n margin: auto;\n border-radius: 50%;\n box-shadow: inset 0 0 0 8px var(--primary-color);\n inset-block: 0;\n inset-inline: 0;\n content: '';\n inline-size: 10px;\n block-size: 10px;\n transform: scale(0);\n transition: 120ms transform var(--transition-timing-function);\n }\n\n &:active {\n border-color: var(--primary-active);\n\n &::before {\n --primary-color: var(--primary-active);\n }\n }\n\n &:checked {\n border-color: var(--primary-color);\n\n &::before {\n transform: scale(1);\n }\n }\n\n &:disabled {\n border-color: var(--disable-border);\n\n &::before {\n --primary-color: var(--disable-border);\n }\n }\n\n &:not(:disabled, :checked):hover {\n border-color: var(--primary-hover);\n\n &::before {\n --primary-color: var(--primary-hover);\n }\n }\n }\n\n .label {\n color: var(--text-color);\n outline: 0;\n cursor: inherit;\n }\n\n &:has(:checked) {\n --text-color: var(--primary-color);\n }\n\n &:not([aria-disabled]:not([aria-disabled='false'])):focus .radio {\n box-shadow: 0 0 0 3px var(--primary-outline);\n\n &:not(:checked) {\n border-color: var(--primary-hover);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n --text-color: var(--disable-color);\n\n cursor: not-allowed;\n }\n }\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n ${['success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n )\n .join('')}\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqHvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC,AAAC"}
|
package/es/switch/style.js
CHANGED
|
@@ -47,7 +47,7 @@ import{css as r}from"@moneko/css";export const style=r`
|
|
|
47
47
|
var(--transition-duration) background-color 0.1s,
|
|
48
48
|
var(--transition-duration) border-color;
|
|
49
49
|
outline-offset: -0.05px;
|
|
50
|
-
inset-block: 3px
|
|
50
|
+
inset-block: 3px;
|
|
51
51
|
block-size: 14px;
|
|
52
52
|
min-inline-size: 14px;
|
|
53
53
|
content: '';
|
package/es/switch/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/switch/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .switch {\n position: relative;\n display: inline-block;\n border-radius: 12px;\n padding: 2px;\n font-size: 12px;\n background-color: var(--primary-border);\n opacity: 1;\n outline: 0;\n box-shadow:\n inset 0 0 0 0 var(--primary-color),\n 0 0 0 0 var(--primary-hover),\n 0 0 0 0 var(--primary-border);\n transition:\n 0.4s box-shadow,\n var(--transition-duration) background-color,\n var(--transition-duration) opacity;\n cursor: pointer;\n inline-size: fit-content;\n min-inline-size: 44px;\n block-size: 22px;\n line-height: 18px;\n user-select: none;\n box-sizing: border-box;\n\n &::before {\n color: var(--primary-secondary);\n padding-inline: 20px 8px;\n transition-duration: var(--transition-duration);\n transition-property: color, padding, background-color;\n content: attr(text-off) '';\n }\n\n &::after {\n position: absolute;\n margin: auto;\n border: 1.5px solid #fff;\n border-radius: 12px;\n background-color: #fff;\n outline: 2.05px solid #fff;\n box-shadow: 0 2px 4px 1px var(--primary-shadow);\n transition:\n 0.6s transform ease,\n var(--transition-duration) padding ease,\n var(--transition-duration) inset-inline-start ease,\n var(--transition-duration) background-color 0.1s,\n var(--transition-duration) border-color;\n outline-offset: -0.05px;\n inset-block: 3px
|
|
1
|
+
{"version":3,"sources":["../../components/switch/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .switch {\n position: relative;\n display: inline-block;\n border-radius: 12px;\n padding: 2px;\n font-size: 12px;\n background-color: var(--primary-border);\n opacity: 1;\n outline: 0;\n box-shadow:\n inset 0 0 0 0 var(--primary-color),\n 0 0 0 0 var(--primary-hover),\n 0 0 0 0 var(--primary-border);\n transition:\n 0.4s box-shadow,\n var(--transition-duration) background-color,\n var(--transition-duration) opacity;\n cursor: pointer;\n inline-size: fit-content;\n min-inline-size: 44px;\n block-size: 22px;\n line-height: 18px;\n user-select: none;\n box-sizing: border-box;\n\n &::before {\n color: var(--primary-secondary);\n padding-inline: 20px 8px;\n transition-duration: var(--transition-duration);\n transition-property: color, padding, background-color;\n content: attr(text-off) '';\n }\n\n &::after {\n position: absolute;\n margin: auto;\n border: 1.5px solid #fff;\n border-radius: 12px;\n background-color: #fff;\n outline: 2.05px solid #fff;\n box-shadow: 0 2px 4px 1px var(--primary-shadow);\n transition:\n 0.6s transform ease,\n var(--transition-duration) padding ease,\n var(--transition-duration) inset-inline-start ease,\n var(--transition-duration) background-color 0.1s,\n var(--transition-duration) border-color;\n outline-offset: -0.05px;\n inset-block: 3px;\n block-size: 14px;\n min-inline-size: 14px;\n content: '';\n inset-inline-start: 4px;\n box-sizing: border-box;\n }\n\n &:not([aria-disabled]),\n &[aria-disabled='false'] {\n &:not(.loading) {\n &:focus {\n box-shadow:\n inset 0 0 0 0 var(--primary-color),\n 0 0 0 1px var(--primary-hover),\n 0 0 1px 3px var(--primary-border);\n\n &.checked {\n box-shadow:\n inset 0 0 3px 12px var(--primary-color),\n 0 0 0 1px var(--primary-hover),\n 0 0 1px 3px var(--primary-border);\n }\n }\n\n &:hover {\n background-color: var(--primary-secondary-bg);\n }\n\n &:active {\n &::after {\n padding-inline: 10px;\n background-color: var(--primary-hover);\n }\n\n &.checked {\n &::after {\n transform: translateX(-10px);\n }\n }\n }\n }\n }\n\n &.loading,\n &[aria-disabled]:not([aria-disabled='false']) {\n color: var(--disable-color);\n background-color: var(--disable-bg);\n opacity: 0.8;\n cursor: not-allowed;\n }\n }\n\n .checked {\n box-shadow:\n inset 0 0 3px 12px var(--primary-color),\n 0 0 0 0 var(--primary-hover),\n 0 0 0 0 var(--primary-border);\n\n &::before {\n color: #fff;\n padding-inline: 8px 20px;\n content: attr(text-on) '';\n }\n\n &::after {\n inset-inline-start: calc(100% - 18px);\n }\n }\n\n .loading {\n &::after {\n border-block-start-color: var(--primary-color);\n border-block-end-color: var(--primary-color);\n animation: switch-loading 1.5s infinite linear;\n }\n }\n\n @keyframes switch-loading {\n form {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIzB,CAAC,AAAC"}
|
package/es/table/styles.js
CHANGED
package/es/table/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/table/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n :host {\n --table-heading-bg: var(--border-color);\n --distance-horizontal: 16px;\n --distance-vertical: 8px;\n }\n\n .table-cell {\n padding: var(--distance-vertical) var(--distance-horizontal);\n\n n-button::part(button) {\n padding: 0;\n min-block-size: unset;\n }\n }\n\n .small {\n --distance-horizontal: 12px;\n --distance-vertical: 6px;\n }\n\n .large {\n --distance-horizontal: 20px;\n --distance-vertical: 10px;\n }\n\n .table {\n border-collapse: collapse;\n display: table;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n\n &:has(.table-foot) {\n border-block-end: none;\n }\n\n .table-title {\n padding-block: var(--distance-vertical);\n font-weight: bold;\n text-align: start;\n }\n\n th {\n font-weight: 500;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n .table-head {\n .table-cell {\n min-inline-size: 54px;\n\n &:has(+ .table-cell) {\n position: relative;\n\n &::after {\n position: absolute;\n z-index: 1;\n display: block;\n margin: auto;\n background-color: var(--text-secondary);\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/table/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n :host {\n --table-heading-bg: var(--border-color);\n --distance-horizontal: 16px;\n --distance-vertical: 8px;\n }\n\n .table-cell {\n padding: var(--distance-vertical) var(--distance-horizontal);\n\n n-button::part(button) {\n padding: 0;\n min-block-size: unset;\n }\n }\n\n .small {\n --distance-horizontal: 12px;\n --distance-vertical: 6px;\n }\n\n .large {\n --distance-horizontal: 20px;\n --distance-vertical: 10px;\n }\n\n .table {\n border-collapse: collapse;\n display: table;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n\n &:has(.table-foot) {\n border-block-end: none;\n }\n\n .table-title {\n padding-block: var(--distance-vertical);\n font-weight: bold;\n text-align: start;\n }\n\n th {\n font-weight: 500;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n .table-head {\n .table-cell {\n min-inline-size: 54px;\n\n &:has(+ .table-cell) {\n position: relative;\n\n &::after {\n position: absolute;\n z-index: 1;\n display: block;\n margin: auto;\n background-color: var(--text-secondary);\n inset-block: 0;\n inset-inline-end: 0;\n content: '';\n block-size: 16px;\n inline-size: 1px;\n opacity: 0.5;\n }\n }\n }\n }\n\n :not(tfoot) {\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n }\n\n .table-body {\n tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n tr:hover {\n background-color: var(--primary-selection);\n }\n }\n\n .table-foot {\n background-color: var(--primary-selection);\n\n tr:last-child th:first-child {\n border-end-start-radius: var(--border-radius);\n }\n\n tr:last-child td:last-child {\n border-end-end-radius: var(--border-radius);\n }\n }\n\n .empty-val {\n opacity: 0.5;\n }\n }\n\n .table-pagination {\n display: block;\n inline-size: fit-content;\n margin-block-start: 16px;\n margin-inline-start: auto;\n }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwH1B,CAAC,AAAC"}
|
package/es/tabs/style.js
CHANGED
package/es/tabs/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/tabs/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n display: block;\n font-size: var(--font-size);\n }\n\n [aria-disabled='true'] {\n --primary-color: var(--disable-color);\n }\n\n .tabs {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n box-sizing: border-box;\n max-inline-size: 100%;\n\n &::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n content: '';\n display: block;\n inline-size: 100%;\n border-block-end: var(--border-base);\n }\n }\n\n .centered {\n justify-content: center;\n }\n\n .tab {\n cursor: pointer;\n position: relative;\n }\n\n .content {\n padding: 16px 0;\n }\n\n .slide-in {\n animation: slide-in var(--transition-timing-function) var(--transition-duration);\n }\n\n @keyframes slide-in {\n 0% {\n opacity: 0;\n transform: translateY(16px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .items {\n position: relative;\n display: flex;\n column-gap: 4px;\n max-inline-size: calc(100% - 38px);\n overflow-x: scroll;\n\n &::after,\n &::before {\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/tabs/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n display: block;\n font-size: var(--font-size);\n }\n\n [aria-disabled='true'] {\n --primary-color: var(--disable-color);\n }\n\n .tabs {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n box-sizing: border-box;\n max-inline-size: 100%;\n\n &::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n content: '';\n display: block;\n inline-size: 100%;\n border-block-end: var(--border-base);\n }\n }\n\n .centered {\n justify-content: center;\n }\n\n .tab {\n cursor: pointer;\n position: relative;\n }\n\n .content {\n padding: 16px 0;\n }\n\n .slide-in {\n animation: slide-in var(--transition-timing-function) var(--transition-duration);\n }\n\n @keyframes slide-in {\n 0% {\n opacity: 0;\n transform: translateY(16px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .items {\n position: relative;\n display: flex;\n column-gap: 4px;\n max-inline-size: calc(100% - 38px);\n overflow-x: scroll;\n\n &::after,\n &::before {\n inset-block: 0;\n inline-size: 30px;\n position: absolute;\n z-index: 1;\n opacity: 0;\n transition: opacity var(--transition-duration);\n content: '';\n pointer-events: none;\n }\n\n &::before {\n inset-inline-start: var(--s, 0);\n box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 8%);\n }\n\n &::after {\n inset-inline-end: 0;\n transform: translateX(var(--s, 0));\n box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 8%);\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .line {\n &::after {\n position: absolute;\n display: block;\n border-radius: 1px;\n background-color: var(--primary-color);\n content: '';\n inline-size: var(--w);\n inset-inline-start: var(--left);\n block-size: 2px;\n inset-block-end: -0.5px;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: inline-size, block-size, inset-inline-start, background-color;\n }\n }\n\n .card {\n gap: 4px;\n\n .tab {\n display: block;\n border: var(--border-base);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background-color: var(--tab-bg);\n transition:\n border-color var(--transition-timing-function) var(--transition-duration),\n background-color var(--transition-timing-function) var(--transition-duration);\n\n &.active {\n background-color: var(--tab-current-bg);\n border-block-end-color: var(--tab-current-bg);\n }\n }\n }\n\n .tab.add {\n position: sticky;\n background-color: initial;\n inset-inline-end: 0;\n }\n\n .warp-left::before {\n opacity: 1;\n }\n\n .warp-right::after {\n opacity: 1;\n }\n`;\n\nexport const btnCss = css`\n .remove {\n display: inline-block;\n font-size: 12px;\n font-weight: 400;\n color: var(--text-secondary);\n transition: color var(--transition-timing-function) var(--transition-duration);\n margin-inline-start: 8px;\n\n &:hover {\n color: var(--error-color);\n }\n }\n\n .btn:has(.remove) {\n padding-inline-end: 10px;\n }\n`;\n\nexport const addCss = css`\n .btn {\n padding: 4px;\n font-size: var(--font-size-lg);\n }\n`;\n"],"names":["css","style","btnCss","addCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IzB,CAAC,AAAC,AAEF,QAAO,MAAME,OAASF,CAAG,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,AAAC,AAEF,QAAO,MAAMG,OAASH,CAAG,CAAC;;;;;AAK1B,CAAC,AAAC"}
|
package/lib/button/style.js
CHANGED
|
@@ -30,6 +30,28 @@
|
|
|
30
30
|
transition-property: color;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.fill {
|
|
34
|
+
&:not(.disabled, .default) {
|
|
35
|
+
.label {
|
|
36
|
+
color: #fff !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
--btn-bg: var(--btn-hover-color) !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:active {
|
|
44
|
+
--btn-bg: var(--btn-active-color) !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.fill.danger.default {
|
|
50
|
+
.label {
|
|
51
|
+
color: #fff !important;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
33
55
|
.btn {
|
|
34
56
|
display: inline-flex;
|
|
35
57
|
justify-content: center;
|
|
@@ -139,27 +161,7 @@
|
|
|
139
161
|
${o("error")}
|
|
140
162
|
${o("success")}
|
|
141
163
|
${o("warning")}
|
|
142
|
-
|
|
143
|
-
&:not(.disabled, .default) {
|
|
144
|
-
.label {
|
|
145
|
-
color: #fff !important;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
&:hover {
|
|
149
|
-
--btn-bg: var(--btn-hover-color) !important;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
&:active {
|
|
153
|
-
--btn-bg: var(--btn-active-color) !important;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.fill.danger.default {
|
|
159
|
-
.label {
|
|
160
|
-
color: #fff !important;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
164
|
+
|
|
163
165
|
|
|
164
166
|
.dashed {
|
|
165
167
|
border-style: dashed;
|
package/lib/button/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n let _cls = `.${type}`,\n fillCls = `.${type}.fill`;\n\n if (type === 'error') {\n _cls = `.${type},.danger`;\n fillCls = `.${type}.fill,.danger.fill`;\n }\n\n return css`\n ${_cls}:not(.disabled) {\n --btn-border: var(--${type}-border);\n --btn-bg: var(--${type}-selection);\n --btn-hover-bg: var(--btn-bg);\n --btn-hover-color: var(--${type}-hover);\n --btn-active-color: var(--${type}-active);\n --btn-outline-color: var(--${type}-outline);\n --btn-color: var(--${type}-color);\n }\n ${fillCls} {\n --btn-bg: var(--${type}-color);\n --btn-border: var(--${type}-color);\n --btn-hover-bg: var(--${type}-hover);\n --btn-active-bg: var(--${type}-active);\n }\n `;\n}\n\nexport const style = css`\n .btn,\n .label {\n transition-duration: var(--transition-duration);\n }\n\n .label {\n display: block;\n line-height: normal;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n transition-property: color;\n }\n\n .btn {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--btn-border);\n border-radius: var(--border-radius);\n padding: 0 16px;\n inline-size: fit-content;\n min-inline-size: var(--btn-size);\n block-size: fit-content;\n min-block-size: var(--btn-size);\n font-size: var(--font-size);\n color: var(--btn-color);\n background-color: var(--btn-bg);\n outline-offset: 4px;\n gap: 3px;\n line-height: 1;\n cursor: pointer;\n transition-property: color, background-color, border-color, width, height, transform;\n touch-action: manipulation;\n box-sizing: border-box;\n user-select: none;\n outline: none;\n\n &:has(.icon) {\n padding: 4px 10px;\n }\n\n &:not(.disabled) {\n &:active {\n transform: scale(0.98);\n\n .label {\n color: var(--btn-active-color);\n }\n\n &:not(.link, .flat) {\n border-color: var(--btn-active-color);\n }\n\n &:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n }\n\n &:hover:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n\n &:hover:not(.link, .flat),\n &:focus:not(.link, .flat) {\n border-color: var(--btn-hover-color);\n }\n\n &:hover .label,\n &:focus .label {\n color: var(--btn-hover-color);\n }\n }\n\n &.disabled {\n --btn-color: var(--disable-color);\n --btn-bg: var(--disable-bg);\n --btn-border: var(--disable-border);\n\n cursor: not-allowed;\n }\n }\n\n .normal {\n --btn-size: 32px;\n }\n\n .small {\n --btn-size: 24px;\n\n gap: 2px;\n padding: 0 7px;\n font-size: var(--font-size-xs);\n\n &:has(.icon) {\n padding: 4px 5px;\n }\n }\n\n .large {\n --btn-size: 40px;\n\n font-size: var(--font-size-lg);\n gap: 4px;\n\n &:has(.icon) {\n padding: 4px 12px;\n }\n }\n\n .default:not(.disabled) {\n --btn-outline-color: var(--primary-outline);\n --btn-color: var(--text-color);\n --btn-bg: var(--component-bg);\n --btn-border: var(--border-color);\n --btn-hover-color: var(--primary-hover);\n --btn-active-color: var(--primary-active);\n }\n\n ${btnColor('primary')}\n ${btnColor('error')}\n ${btnColor('success')}\n ${btnColor('warning')}\n
|
|
1
|
+
{"version":3,"sources":["../../components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n let _cls = `.${type}`,\n fillCls = `.${type}.fill`;\n\n if (type === 'error') {\n _cls = `.${type},.danger`;\n fillCls = `.${type}.fill,.danger.fill`;\n }\n\n return css`\n ${_cls}:not(.disabled) {\n --btn-border: var(--${type}-border);\n --btn-bg: var(--${type}-selection);\n --btn-hover-bg: var(--btn-bg);\n --btn-hover-color: var(--${type}-hover);\n --btn-active-color: var(--${type}-active);\n --btn-outline-color: var(--${type}-outline);\n --btn-color: var(--${type}-color);\n }\n ${fillCls} {\n --btn-bg: var(--${type}-color);\n --btn-border: var(--${type}-color);\n --btn-hover-bg: var(--${type}-hover);\n --btn-active-bg: var(--${type}-active);\n }\n `;\n}\n\nexport const style = css`\n .btn,\n .label {\n transition-duration: var(--transition-duration);\n }\n\n .label {\n display: block;\n line-height: normal;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n transition-property: color;\n }\n\n .fill {\n &:not(.disabled, .default) {\n .label {\n color: #fff !important;\n }\n\n &:hover {\n --btn-bg: var(--btn-hover-color) !important;\n }\n\n &:active {\n --btn-bg: var(--btn-active-color) !important;\n }\n }\n }\n\n .fill.danger.default {\n .label {\n color: #fff !important;\n }\n }\n\n .btn {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--btn-border);\n border-radius: var(--border-radius);\n padding: 0 16px;\n inline-size: fit-content;\n min-inline-size: var(--btn-size);\n block-size: fit-content;\n min-block-size: var(--btn-size);\n font-size: var(--font-size);\n color: var(--btn-color);\n background-color: var(--btn-bg);\n outline-offset: 4px;\n gap: 3px;\n line-height: 1;\n cursor: pointer;\n transition-property: color, background-color, border-color, width, height, transform;\n touch-action: manipulation;\n box-sizing: border-box;\n user-select: none;\n outline: none;\n\n &:has(.icon) {\n padding: 4px 10px;\n }\n\n &:not(.disabled) {\n &:active {\n transform: scale(0.98);\n\n .label {\n color: var(--btn-active-color);\n }\n\n &:not(.link, .flat) {\n border-color: var(--btn-active-color);\n }\n\n &:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n }\n\n &:hover:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n\n &:hover:not(.link, .flat),\n &:focus:not(.link, .flat) {\n border-color: var(--btn-hover-color);\n }\n\n &:hover .label,\n &:focus .label {\n color: var(--btn-hover-color);\n }\n }\n\n &.disabled {\n --btn-color: var(--disable-color);\n --btn-bg: var(--disable-bg);\n --btn-border: var(--disable-border);\n\n cursor: not-allowed;\n }\n }\n\n .normal {\n --btn-size: 32px;\n }\n\n .small {\n --btn-size: 24px;\n\n gap: 2px;\n padding: 0 7px;\n font-size: var(--font-size-xs);\n\n &:has(.icon) {\n padding: 4px 5px;\n }\n }\n\n .large {\n --btn-size: 40px;\n\n font-size: var(--font-size-lg);\n gap: 4px;\n\n &:has(.icon) {\n padding: 4px 12px;\n }\n }\n\n .default:not(.disabled) {\n --btn-outline-color: var(--primary-outline);\n --btn-color: var(--text-color);\n --btn-bg: var(--component-bg);\n --btn-border: var(--border-color);\n --btn-hover-color: var(--primary-hover);\n --btn-active-color: var(--primary-active);\n }\n\n ${btnColor('primary')}\n ${btnColor('error')}\n ${btnColor('success')}\n ${btnColor('warning')}\n \n\n .dashed {\n border-style: dashed;\n }\n\n .link {\n --btn-bg: transparent !important;\n --btn-border: transparent !important;\n\n border-color: transparent !important;\n background-color: transparent !important;\n\n &::after {\n content: none;\n }\n }\n\n .flat {\n --btn-border: transparent !important;\n\n background-color: transparent;\n\n &:not(.disabled, .link).default {\n --btn-hover-bg: rgb(0 0 0 / 6%);\n }\n }\n\n .ghost {\n background-color: transparent !important;\n }\n\n .circle {\n border-radius: 50% !important;\n padding: 0;\n min-inline-size: var(--btn-size);\n max-inline-size: var(--btn-size);\n min-block-size: var(--btn-size);\n max-block-size: var(--btn-size);\n text-align: center;\n line-height: var(--btn-size);\n }\n\n .block {\n inline-size: 100%;\n }\n\n .without:not(.link, .flat)::before {\n animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n position: absolute;\n z-index: -1;\n display: block;\n border-radius: inherit;\n opacity: 0.2;\n box-shadow: 0 0 0 0 var(--btn-outline-color);\n inset: 0;\n animation-fill-mode: forwards;\n content: '';\n pointer-events: none;\n }\n\n @keyframes btn-wave-effect {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 var(--btn-hover-color);\n }\n\n /* 25% {\n opacity: 1;\n box-shadow: 0 0 0 4px var(--btn-hover-color);\n } */\n\n 100% {\n opacity: 0;\n box-shadow: 0 0 0 6px var(--btn-outline-color);\n }\n }\n`;\n"],"names":["style","btnColor","type","_cls","fillCls","css"],"mappings":"kGAgCaA,6CAAAA,qBAhCO,eAIpB,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCG,GAAAA,KAAG,CAAA,CAAC;IACT,EAAEF,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEO,MAAMF,EAAQK,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IvB,EAAEJ,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8ExB,CAAC"}
|
package/lib/carousel/style.js
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
min-inline-size: 100%;
|
|
29
29
|
block-size: 100%;
|
|
30
30
|
min-block-size: 100%;
|
|
31
|
+
|
|
31
32
|
/* content-visibility: auto; */
|
|
32
33
|
transform: translate3d(-100%, 0, 0);
|
|
33
34
|
}
|
|
@@ -57,7 +58,7 @@
|
|
|
57
58
|
font-size: 16px;
|
|
58
59
|
font-weight: bold;
|
|
59
60
|
transition: transform var(--transition-duration);
|
|
60
|
-
inset-block: 0
|
|
61
|
+
inset-block: 0;
|
|
61
62
|
inline-size: fit-content;
|
|
62
63
|
block-size: fit-content;
|
|
63
64
|
line-height: 1;
|
|
@@ -89,7 +90,7 @@
|
|
|
89
90
|
|
|
90
91
|
.dots {
|
|
91
92
|
position: absolute;
|
|
92
|
-
inset-inline: 0
|
|
93
|
+
inset-inline: 0;
|
|
93
94
|
inset-block-end: 16px;
|
|
94
95
|
z-index: 1;
|
|
95
96
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n inline-size: 100%;\n }\n\n .carousel {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius);\n inline-size: 100%;\n block-size: 200px;\n color: #fff;\n user-select: none;\n line-height: normal;\n background-color: rgb(0 0 0 / 20%);\n\n & ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .item {\n display: flex;\n justify-content: center;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 100%;\n block-size: 100%;\n min-block-size: 100%;\n /* content-visibility: auto; */\n transform: translate3d(-100%, 0, 0);\n }\n\n .list {\n display: flex;\n border-radius: inherit;\n inline-size: 100%;\n block-size: 100%;\n transform: translate3d(0, 0, 0);\n\n &[data-dir='-1'] .item {\n animation: carousel-prev 500ms forwards;\n }\n\n &[data-dir='1'] .item {\n animation: carousel-next 500ms forwards;\n }\n }\n\n .prev,\n .next {\n position: absolute;\n z-index: 1;\n margin: auto;\n border-radius: var(--border-radius);\n font-size: 16px;\n font-weight: bold;\n transition: transform var(--transition-duration);\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n inline-size: 100%;\n }\n\n .carousel {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius);\n inline-size: 100%;\n block-size: 200px;\n color: #fff;\n user-select: none;\n line-height: normal;\n background-color: rgb(0 0 0 / 20%);\n\n & ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .item {\n display: flex;\n justify-content: center;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 100%;\n block-size: 100%;\n min-block-size: 100%;\n\n /* content-visibility: auto; */\n transform: translate3d(-100%, 0, 0);\n }\n\n .list {\n display: flex;\n border-radius: inherit;\n inline-size: 100%;\n block-size: 100%;\n transform: translate3d(0, 0, 0);\n\n &[data-dir='-1'] .item {\n animation: carousel-prev 500ms forwards;\n }\n\n &[data-dir='1'] .item {\n animation: carousel-next 500ms forwards;\n }\n }\n\n .prev,\n .next {\n position: absolute;\n z-index: 1;\n margin: auto;\n border-radius: var(--border-radius);\n font-size: 16px;\n font-weight: bold;\n transition: transform var(--transition-duration);\n inset-block: 0;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: 1;\n cursor: pointer;\n\n &::before {\n display: inline-block;\n transform: rotate(90deg);\n }\n }\n\n .prev {\n inset-inline-start: 4px;\n transform: translateX(-32px) scaleY(0);\n\n &::before {\n content: '﹀';\n }\n }\n\n .next {\n inset-inline-end: 4px;\n transform: translateX(32px) scaleY(0);\n\n &::before {\n content: '︿';\n }\n }\n\n .dots {\n position: absolute;\n inset-inline: 0;\n inset-block-end: 16px;\n z-index: 1;\n display: flex;\n overflow: hidden;\n margin: 0 auto;\n inline-size: fit-content;\n max-inline-size: calc(100% - 42px);\n transition:\n transform var(--transition-duration) linear,\n opacity var(--transition-duration) linear;\n gap: 4px;\n }\n\n .dot {\n --offset: 0;\n\n border-radius: 2px;\n inline-size: 16px;\n min-inline-size: 8px;\n block-size: 3px;\n background-color: rgb(255 255 255 / 80%);\n transition: background-color var(--transition-duration) linear;\n cursor: pointer;\n\n &:hover,\n &.active {\n background-color: var(--primary-color);\n }\n }\n\n .header {\n position: absolute;\n inset-block-start: 0;\n z-index: 1;\n display: flex;\n inline-size: 100%;\n transition: transform var(--transition-duration);\n transform: translate3d(0, -100%, 0);\n }\n\n .carousel:hover {\n .prev,\n .next {\n &:not([data-show='false']) {\n transform: translateX(0) scaleY(1.5);\n }\n }\n\n .header {\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes carousel-prev {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes carousel-next {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(-200%, 0, 0);\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqKzB,CAAC"}
|
package/lib/checkbox/style.js
CHANGED
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
transition-timing-function: var(--transition-timing-function);
|
|
68
68
|
transition-property: background-color, transform, border-color, height;
|
|
69
69
|
box-sizing: border-box;
|
|
70
|
-
inset-block: 0
|
|
71
|
-
inset-inline: 0
|
|
70
|
+
inset-block: 0;
|
|
71
|
+
inset-inline: 0;
|
|
72
72
|
content: '';
|
|
73
73
|
inline-size: 10px;
|
|
74
74
|
block-size: 10px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n .item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n box-sizing: border-box;\n gap: 6px;\n outline: 0;\n\n label {\n color: var(--text-color);\n cursor: pointer;\n }\n\n .checkbox {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--component-bg);\n outline: 0 solid transparent;\n box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n transition:\n 0.3s border-color var(--transition-timing-function),\n 0.3s box-shadow var(--transition-timing-function),\n 0.3s outline var(--transition-timing-function);\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &:active {\n --primary-color: var(--primary-active);\n --border-color: var(--primary-active);\n }\n\n &:disabled {\n --border-color: var(--disable-border);\n --primary-color: var(--disable-border);\n }\n\n &::before {\n position: absolute;\n display: block;\n margin: auto;\n border-style: solid;\n border-width: 0 0 2px 2px;\n border-color: transparent;\n transition-duration: 0.3s;\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color, height;\n box-sizing: border-box;\n inset-block: 0
|
|
1
|
+
{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n .item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n box-sizing: border-box;\n gap: 6px;\n outline: 0;\n\n label {\n color: var(--text-color);\n cursor: pointer;\n }\n\n .checkbox {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--component-bg);\n outline: 0 solid transparent;\n box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n transition:\n 0.3s border-color var(--transition-timing-function),\n 0.3s box-shadow var(--transition-timing-function),\n 0.3s outline var(--transition-timing-function);\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &:active {\n --primary-color: var(--primary-active);\n --border-color: var(--primary-active);\n }\n\n &:disabled {\n --border-color: var(--disable-border);\n --primary-color: var(--disable-border);\n }\n\n &::before {\n position: absolute;\n display: block;\n margin: auto;\n border-style: solid;\n border-width: 0 0 2px 2px;\n border-color: transparent;\n transition-duration: 0.3s;\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color, height;\n box-sizing: border-box;\n inset-block: 0;\n inset-inline: 0;\n content: '';\n inline-size: 10px;\n block-size: 10px;\n transform: scale(0);\n }\n\n &:checked {\n --shadow-w: 16px;\n --border-color: var(--primary-color);\n\n &::before {\n block-size: 5px;\n border-color: var(--primary-outline);\n transform: rotate(-55deg) translateY(-10%) translateX(5%) scale(1);\n }\n\n & + label {\n --text-color: var(--primary-color);\n }\n }\n\n &:indeterminate:not(:checked) {\n &::before {\n border-radius: 2px;\n background-color: var(--primary-color);\n transform: scale(1);\n }\n }\n\n &:not(:disabled, :checked):hover {\n --primary-color: var(--primary-hover);\n --border-color: var(--primary-hover);\n }\n }\n\n &:not([aria-disabled]:not([aria-disabled='false'])):focus .checkbox {\n outline: 3px solid var(--primary-outline);\n\n &:not(:checked) {\n border-color: var(--primary-hover);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: not-allowed;\n\n & > label {\n --text-color: var(--disable-color);\n\n cursor: not-allowed;\n }\n }\n\n &:last-child {\n margin-inline-end: 16px;\n }\n }\n\n ${['success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n )\n .join('')}\n`;\n"],"names":["style","css","map","s","join"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BC,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC"}
|
package/lib/code/style.js
CHANGED
package/lib/code/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n position: relative;\n box-sizing: border-box;\n }\n\n .not-toolbar code {\n padding-block-start: 8px !important;\n\n .line-numbers-rows {\n padding-block-start: 8px !important;\n }\n }\n\n .n-editor {\n --font-size: 13px;\n\n margin-block-start: 0;\n position: relative;\n\n textarea {\n position: absolute;\n z-index: 1;\n margin: 0;\n border: none;\n padding: 0;\n font-size: var(--font-size);\n white-space: inherit;\n color: transparent;\n background-color: transparent;\n outline: none;\n resize: none;\n box-sizing: border-box;\n inset-block: 32px 8px;\n inset-inline: 16px
|
|
1
|
+
{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n position: relative;\n box-sizing: border-box;\n }\n\n .not-toolbar code {\n padding-block-start: 8px !important;\n\n .line-numbers-rows {\n padding-block-start: 8px !important;\n }\n }\n\n .n-editor {\n --font-size: 13px;\n\n margin-block-start: 0;\n position: relative;\n\n textarea {\n position: absolute;\n z-index: 1;\n margin: 0;\n border: none;\n padding: 0;\n font-size: var(--font-size);\n white-space: inherit;\n color: transparent;\n background-color: transparent;\n outline: none;\n resize: none;\n box-sizing: border-box;\n inset-block: 32px 8px;\n inset-inline: 16px;\n min-block-size: 64px;\n caret-color: var(--text-color);\n block-size: fit-content;\n line-height: inherit !important;\n\n &.line-numbers {\n inset-inline: 54px 10px;\n }\n\n &.not-toolbar {\n inset-block-start: 8px;\n min-block-size: 20px;\n }\n }\n\n pre {\n margin-block-start: 0 !important;\n pointer-events: none;\n inline-size: 100%;\n block-size: 100%;\n min-block-size: 65px;\n line-height: inherit !important;\n\n &.not-toolbar {\n min-block-size: 36px;\n }\n\n .toolbar {\n pointer-events: all;\n }\n\n code {\n line-height: inherit !important;\n }\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEzB,CAAC"}
|