oink-ui 1.0.6 → 1.0.8
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/README.md +21 -3
- package/dist/core/cornerCanvas.d.ts +18 -0
- package/dist/core/ime.d.ts +7 -0
- package/dist/inputs/NumberInput.d.ts +2 -0
- package/dist/inputs/Switch.d.ts +2 -0
- package/dist/oink-ui.cjs +1 -1
- package/dist/oink-ui.css +1 -1
- package/dist/oink-ui.js +3332 -3257
- package/dist/styles/accordion.css +1 -1
- package/dist/styles/button.css +1 -1
- package/dist/styles/group.css +1 -1
- package/dist/styles/input.css +1 -1
- package/dist/styles/kbd.css +1 -1
- package/dist/styles/menu.css +1 -1
- package/dist/styles/segmented.css +1 -1
- package/dist/styles/select.css +1 -1
- package/dist/styles/switch.css +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/accordion.css · 先引入 base、group */
|
|
2
|
-
.ok-accordion{min-width:0}.ok-accordion__item+.ok-accordion__item{border-top:1px solid var(--ok-line)}.ok-accordion__heading{margin:0;font:inherit}.ok-accordion__head{display:flex;align-items:center;justify-content:space-between;gap:
|
|
2
|
+
.ok-accordion{min-width:0}.ok-accordion__item+.ok-accordion__item{border-top:1px solid var(--ok-line)}.ok-accordion__heading{margin:0;font:inherit}.ok-accordion__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ok-s-4);width:100%;min-height:56px;padding:var(--_row, var(--ok-s-3)) var(--_inset, var(--ok-s-5));margin:0;border:0;border-radius:calc(20px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:400 14px/1.3 var(--ok-font);color:var(--ok-text);text-align:left;cursor:pointer}.ok-accordion__head.ok-focusable:focus-visible{outline-offset:-3px}.ok-accordion__title{min-width:0;overflow-wrap:anywhere}.ok-accordion--plain{--_inset: 0px}.ok-accordion--plain .ok-accordion__head{border-radius:calc(8px * var(--ok-rk))}.ok-accordion--plain .ok-accordion__head.ok-focusable:focus-visible{outline-offset:-2px}.ok-accordion__head .ok-icon{width:18px;height:18px;color:var(--ok-text-3);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}@media (hover: hover){.ok-accordion__head:not(:disabled):hover .ok-icon{color:var(--ok-text)}}.ok-accordion__head:disabled{cursor:not-allowed;opacity:.5}.ok-accordion{--_dur: calc(391ms * var(--ok-ms))}.ok-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--_dur) var(--ok-spring-soft)}.ok-accordion__body>div{min-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity calc(.1s * var(--ok-ms)) var(--ok-ease-in),transform calc(.16s * var(--ok-ms)) var(--ok-ease-out),visibility 0s linear var(--_dur)}.ok-accordion__content{padding:0 var(--_inset, var(--ok-s-5)) var(--_row, var(--ok-s-3));font:450 14px/1.65 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-accordion__content>:first-child{margin-top:0}.ok-accordion__content>:last-child{margin-bottom:0}.ok-accordion__item[data-state=open] .ok-accordion__head .ok-icon{transform:rotate(90deg);color:var(--ok-text)}.ok-accordion__item[data-state=open] .ok-accordion__body{grid-template-rows:1fr}.ok-accordion__item[data-state=open] .ok-accordion__body>div{opacity:1;transform:none;visibility:visible;transition:opacity calc(.16s * var(--ok-ms)) var(--ok-ease-out) calc(53ms * var(--ok-ms)),transform calc(.24s * var(--ok-ms)) var(--ok-ease-out) calc(40ms * var(--ok-ms)),visibility 0s}.ok-group>.ok-accordion--plain{--_inset: inherit}.ok-group>.ok-row+.ok-accordion--plain,.ok-group>.ok-accordion--plain+.ok-row{border-top:1px solid var(--ok-line)}.ok-group>.ok-accordion--plain .ok-accordion__head{border-radius:0}.ok-group>.ok-accordion--plain .ok-accordion__content{padding:0;font:inherit;color:inherit}.ok-group>.ok-accordion--plain .ok-accordion__content .ok-row{border-top:1px solid var(--ok-line)}
|
package/dist/styles/button.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/button.css · 先引入 base */
|
|
2
|
-
.ok-btn{--_h: var(--ok-h-md);--_bg: var(--ok-fill);--_bg-hover: var(--ok-fill-hover);--_fg: var(--ok-text);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--_h);min-width:var(--_h);padding:0 calc(var(--_h) * .48);border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;margin:0;background:var(--_bg);color:var(--_fg);font:
|
|
2
|
+
.ok-btn{--_h: var(--ok-h-md);--_bg: var(--ok-fill);--_bg-hover: var(--ok-fill-hover);--_fg: var(--ok-text);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--_h);min-width:var(--_h);padding:0 calc(var(--_h) * .48);border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;margin:0;background:var(--_bg);color:var(--_fg);font:400 15px/1 var(--ok-font);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out),outline-offset var(--ok-dur-3) var(--ok-ease-out)}@media (hover: hover){.ok-btn:hover{background:var(--_bg-hover)}}.ok-btn:active{transform:scale(.955);transition:transform var(--ok-dur-1) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}.ok-btn .ok-icon{width:18px;height:18px}.ok-btn--primary{--_bg: var(--ok-inverse);--_bg-hover: var(--ok-inverse-hover);--_fg: var(--ok-on-inverse)}.ok-btn--accent{--_bg: var(--ok-accent-fill);--_bg-hover: var(--ok-accent-fill-hover);--_fg: var(--ok-on-accent)}.ok-btn--ghost{--_bg: transparent;--_bg-hover: var(--ok-fill)}.ok-btn--outline{--_bg: transparent;--_bg-hover: var(--ok-fill);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-btn--danger{--_bg: var(--ok-danger-soft);--_fg: var(--ok-danger-text);--_bg-hover: var(--ok-danger-soft-2)}.ok-btn--sm{--_h: var(--ok-h-sm);font-size:13px;gap:6px}.ok-btn--sm .ok-icon{width:16px;height:16px}.ok-btn--lg{--_h: var(--ok-h-lg);font-size:16px}.ok-btn--icon{padding:0;width:var(--_h)}.ok-btn--block{display:flex;width:100%}.ok-btn:disabled,.ok-btn[aria-disabled=true]{opacity:.42;cursor:not-allowed;background:var(--_bg);transform:none}.ok-btn__label{display:inline-flex;align-items:center;gap:inherit;transition:transform var(--ok-dur-3) var(--ok-ease-out),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn__status{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.ok-btn__status>*{grid-area:1 / 1;opacity:0;transform:translateY(14px) scale(.5);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2) var(--ok-ease-in)}.ok-btn__status .ok-tail{width:20px;height:20px;color:currentColor}.ok-btn__check{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-btn__check path{stroke-dasharray:1;stroke-dashoffset:1}.ok-btn__cross{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.ok-btn__cross path{stroke-dasharray:1;stroke-dashoffset:1}.ok-btn[data-state=loading],.ok-btn[data-state=success]{pointer-events:none}.ok-btn[data-state=loading] .ok-btn__label,.ok-btn[data-state=success] .ok-btn__label{opacity:0;transform:translateY(-14px) scale(.9)}.ok-btn[data-state=loading] .ok-tail,.ok-btn[data-state=success] .ok-btn__check{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn[data-state=success] .ok-btn__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-4) var(--ok-ease-out) calc(80ms * var(--ok-ms))}.ok-btn[data-state=error]{animation:ok-shake var(--ok-dur-5) var(--ok-ease-out)}.ok-btn[data-state=error] .ok-btn__label{opacity:0;transform:translateY(-14px) scale(.9)}.ok-btn[data-state=error] .ok-btn__cross{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn[data-state=error] .ok-btn__cross path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(60ms * var(--ok-ms))}.ok-btn[data-state=error]:not(.ok-btn--primary,.ok-btn--accent,.ok-btn--danger) .ok-btn__cross{color:var(--ok-danger-text)}.ok-btn__status .ok-tail{overflow:visible;flex:none;transform-origin:20% 20%;animation:ok-tail-wag 1.5s var(--ok-ease-in-out) infinite}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([fill]){fill:none}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke]){stroke:currentColor}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke-width]){stroke-width:5.5}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect){stroke-linecap:round;stroke-linejoin:round}.ok-btn__status .ok-tail [pathLength="1"]{stroke-dasharray:1 1.2;animation:ok-tail-draw 1.5s var(--ok-ease-in-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-btn__status .ok-tail{animation:none}}:root[data-motion=reduced] .ok-btn__status .ok-tail{animation:none}.ok-btn:disabled,.ok-btn[aria-disabled=true]{--_bg-hover: var(--_bg)}.ok-btn{max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-btn[aria-pressed=true]{--_bg: var(--ok-well-2);--_bg-hover: var(--ok-well-2);--_fg: var(--ok-text)}.ok-btn--primary[aria-pressed=true]{--_bg: var(--ok-inverse);--_bg-hover: var(--ok-inverse-hover);--_fg: var(--ok-on-inverse)}.ok-btn-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2);min-width:0}.ok-btn-group--vertical{flex-direction:column;align-items:stretch}.ok-btn-group--block{display:flex}.ok-btn-group--block>.ok-btn{flex:1}.ok-btn-group--attached{flex-wrap:nowrap;gap:2px}.ok-btn-group--attached:not(.ok-btn-group--vertical)>.ok-btn:not(:first-child){border-start-start-radius:calc(6px * var(--ok-rk));border-end-start-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached:not(.ok-btn-group--vertical)>.ok-btn:not(:last-child){border-start-end-radius:calc(6px * var(--ok-rk));border-end-end-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn{border-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn:first-child{border-start-start-radius:calc(20px * var(--ok-rk));border-start-end-radius:calc(20px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn:last-child{border-end-start-radius:calc(20px * var(--ok-rk));border-end-end-radius:calc(20px * var(--ok-rk))}:where(.ok-btn){outline:2px solid transparent;outline-offset:5px}:where(.ok-btn):focus-visible{outline-color:var(--ok-accent);outline-offset:2px}
|
package/dist/styles/group.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/group.css · 先引入 base */
|
|
2
|
-
.ok-group{--_inset: var(--ok-s-5);--_row: var(--ok-s-3);display:block;min-width:0;margin:0;padding-inline:0;list-style:none;padding-block:calc(var(--_inset) - var(--_row));border-radius:var(--ok-r-nested, var(--ok-r-4));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-card);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ok-s-4);min-width:0;min-height:56px;padding:var(--_row, var(--ok-s-3)) var(--_inset, var(--ok-s-5));font:
|
|
2
|
+
.ok-group{--_inset: var(--ok-s-5);--_row: var(--ok-s-3);display:block;min-width:0;margin:0;padding-inline:0;list-style:none;padding-block:calc(var(--_inset) - var(--_row));border-radius:var(--ok-r-nested, var(--ok-r-4));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-card);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ok-s-4);min-width:0;min-height:56px;padding:var(--_row, var(--ok-s-3)) var(--_inset, var(--ok-s-5));font:400 14px/1.3 var(--ok-font);color:var(--ok-text);transition:min-height var(--ok-spring-soft-dur) var(--ok-spring-soft),padding var(--ok-spring-soft-dur) var(--ok-spring-soft)}a.ok-row,button.ok-row{width:100%;margin:0;border:0;background:none;text-align:start;text-decoration:none}.ok-row+.ok-row,.ok-row.has-divider{border-top:1px solid var(--ok-line)}.ok-row__leading{display:grid;place-items:center;flex:none;color:var(--ok-text-2)}.ok-row__text{display:grid;gap:2px;min-width:0;flex:1 1 auto;overflow-wrap:anywhere}.ok-row__desc{font:300 12.5px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-row__value{flex:0 1 auto;min-width:0;margin-left:auto;font:450 15px/1.3 var(--ok-font);color:var(--ok-text-2);text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-row--stack{flex-direction:column;align-items:stretch;gap:var(--ok-s-3)}.ok-row:where(:not(.ok-row--stack))>:where(:not(.ok-row__text,.ok-row__leading)){flex:none}.ok-row__control{display:flex;align-items:center;justify-content:flex-end;gap:var(--ok-s-2);min-width:0}.ok-row__control>.ok-slider{min-width:0}.ok-row--fill>.ok-row__text,.ok-row:not(.ok-row--stack):has(>.ok-slider)>.ok-row__text{flex:0 1 auto}.ok-row--fill>.ok-row__control,.ok-row:not(.ok-row--stack)>.ok-slider{flex:1 1 0;min-width:var(--ok-row-control-min, 50%)}.ok-row--fixed>.ok-row__control{flex:0 1 var(--_cw);min-width:min(var(--_cw),var(--ok-row-control-min, 50%))}.ok-row--stack>.ok-row__control{justify-content:flex-start}.ok-row.ok-row--wrap{flex-wrap:wrap;row-gap:var(--ok-s-3)}.ok-row.ok-row--wrap>.ok-row__text{flex:1 1 auto}.ok-row.ok-row--wrap>:is(.ok-row__control,.ok-slider){flex:1 1 var(--ok-row-wrap-at, 12rem);min-width:0}.ok-row--link{cursor:pointer;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit}.ok-row--link.ok-focusable:focus-visible{outline-offset:-3px}.ok-row--link .ok-row__chev{flex:none;color:var(--ok-text-3);transition:transform var(--ok-spring-dur) var(--ok-spring),color var(--ok-dur-2)}.ok-row--link .ok-row__value+.ok-row__chev{margin-left:calc(var(--ok-s-2) - var(--ok-s-4))}@media (hover: hover){.ok-row--link:hover .ok-row__chev{color:var(--ok-text)}}.ok-row--link:disabled,.ok-row--link[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ok-row--link:disabled .ok-row__chev,.ok-row--link[aria-disabled=true] .ok-row__chev{transform:none;color:var(--ok-text-3)}.ok-group--compact{--_inset: var(--ok-s-4);--_row: var(--ok-s-2)}.ok-group--compact .ok-row{min-height:48px}.ok-collapse{display:grid;grid-template-rows:1fr;min-width:0;transition:grid-template-rows var(--ok-spring-soft-dur) var(--ok-spring-soft),opacity var(--ok-dur-3) var(--ok-ease-out)}.ok-collapse>*{min-height:0;overflow:hidden}.ok-collapse.is-collapsed,.ok-collapse[data-state=closed]{grid-template-rows:0fr;opacity:0;pointer-events:none}
|
package/dist/styles/input.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/input.css · 先引入 base */
|
|
2
|
-
.ok-input{display:flex;align-items:center;gap:8px;height:var(--ok-h-md);padding:0 14px;border-radius:calc(14px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text-3);box-shadow:inset 0 0 0 1.5px transparent;cursor:text;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out),color var(--ok-dur-2)}@media (hover: hover){.ok-input:hover{background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}@media (hover: hover){:root[data-theme=dark] .ok-input:hover:not(:focus-within){background:color-mix(in srgb,var(--ok-well) 88%,var(--ok-well-2))}}.ok-input:focus-within{background:var(--ok-raised);color:var(--ok-text-2);box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-input input{all:unset;flex:1;min-width:0;height:100%;font:
|
|
2
|
+
.ok-input{display:flex;align-items:center;gap:8px;height:var(--ok-h-md);padding:0 14px;border-radius:calc(14px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text-3);box-shadow:inset 0 0 0 1.5px transparent;cursor:text;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out),color var(--ok-dur-2)}@media (hover: hover){.ok-input:hover{background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}@media (hover: hover){:root[data-theme=dark] .ok-input:hover:not(:focus-within){background:color-mix(in srgb,var(--ok-well) 88%,var(--ok-well-2))}}.ok-input:focus-within{background:var(--ok-raised);color:var(--ok-text-2);box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-input input{all:unset;flex:1;min-width:0;height:100%;font:400 15px/1 var(--ok-font);color:var(--ok-text)}.ok-input input[type=search]{font-weight:500}.ok-input input::placeholder{color:var(--ok-text-3)}.ok-input input::-webkit-search-cancel-button{display:none}.ok-input--pill{border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;padding:0 16px}.ok-input--lg{height:var(--ok-h-lg);padding:0 18px;gap:10px}.ok-input--lg input{font-size:16px}.ok-input__icon{width:18px;height:18px;flex:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}.ok-input:focus-within .ok-input__icon{color:var(--ok-accent-text);transform:scale(1.1)}.ok-input__clear{display:grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-text-3);color:var(--ok-raised);cursor:pointer;opacity:0;transform:scale(0) rotate(-90deg);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input__clear .ok-icon{width:12px;height:12px;stroke-width:2.4}@media (hover: hover){.ok-input__clear:hover{background:var(--ok-text-2)}}.ok-input.has-value .ok-input__clear{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input{min-width:0}.ok-input[data-has-value] .ok-input__clear{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input__clear:disabled{pointer-events:none}.ok-input--sm{height:var(--ok-h-sm);padding:0 12px;gap:6px;border-radius:calc(11px * var(--ok-rk))}.ok-input--sm input{font-size:13px}.ok-input--sm.ok-input--pill{border-radius:var(--ok-r-full)}.ok-input--inline{display:inline-flex;vertical-align:middle}.ok-input__affix{display:inline-flex;align-items:center;flex:none;gap:6px;font:400 14px/1 var(--ok-font);color:inherit;white-space:nowrap}.ok-input__affix .ok-icon{width:18px;height:18px}.ok-input__toggle{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-right:-6px;padding:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:transparent;color:var(--ok-text-2);cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out)}.ok-input__toggle .ok-icon{width:18px;height:18px}.ok-input{--_ih: var(--ok-h-md);--_ipx: 14px}.ok-input--pill{--_ipx: 16px}.ok-input--lg{--_ih: var(--ok-h-lg);--_ipx: 18px}.ok-input--sm{--_ih: var(--ok-h-sm);--_ipx: 12px}.ok-input>.ok-input__clear:last-child{margin-right:calc((var(--_ih) - 20px) / 2 - var(--_ipx))}.ok-input>.ok-input__toggle:last-child{margin-right:calc((var(--_ih) - 28px) / 2 - var(--_ipx))}@media (hover: hover){.ok-input__toggle:hover{background:var(--ok-hover);color:var(--ok-text)}}.ok-input[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-input[data-disabled]{opacity:.5;cursor:not-allowed}.ok-input[data-disabled] input{cursor:not-allowed}@media (hover: hover){.ok-input[data-disabled]:hover{background:var(--ok-well)}}@media (pointer: coarse){.ok-input--sm input{font-size:16px}}[data-touch] .ok-input--sm input{font-size:16px}
|
package/dist/styles/kbd.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/kbd.css · 先引入 base */
|
|
2
|
-
.ok-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 -1.5px 0 var(--ok-line-2);font:
|
|
2
|
+
.ok-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 -1.5px 0 var(--ok-line-2);font:500 13px/1 var(--ok-font)}.ok-kbd--sm{min-width:20px;height:20px;padding:0 5px;font-size:11px}.ok-kbd--lg{min-width:28px;height:28px;padding:0 9px;font-size:14px}
|
package/dist/styles/menu.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/menu.css · 先引入 base、popup */
|
|
2
|
-
.ok-popup--menu{--ok-popup-cap-h: 560px;width:max-content}.ok-menu{position:relative;flex:1 1 auto;min-width:0;min-height:0;padding:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;outline:none}.ok-menu[hidden]{display:none}.ok-menu--static{width:max-content;max-width:100%;border-radius:calc(18px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-pop);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}.ok-menu__hl{position:absolute;left:6px;right:6px;top:0;height:var(--ok-h-item);border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-hover);opacity:0;pointer-events:none;transform:translateY(var(--y, 0));transition:transform var(--ok-dur-1) var(--ok-ease-out),opacity var(--ok-dur-1) var(--ok-ease-out),height var(--ok-dur-1) var(--ok-ease-out),background-color var(--ok-dur-1) var(--ok-ease-out)}.ok-menu[data-hl]>.ok-menu__hl{opacity:1}.ok-menu__hl[data-tone=success]{background:var(--ok-success-soft)}.ok-menu__hl[data-tone=warning]{background:var(--ok-warning-soft)}.ok-menu__hl[data-tone=danger]{background:var(--ok-danger-soft)}.ok-menu__hl[data-tone=info]{background:var(--ok-info-soft)}.ok-menu__item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--ok-h-item);padding:0 10px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:
|
|
2
|
+
.ok-popup--menu{--ok-popup-cap-h: 560px;width:max-content}.ok-menu{position:relative;flex:1 1 auto;min-width:0;min-height:0;padding:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;outline:none}.ok-menu[hidden]{display:none}.ok-menu--static{width:max-content;max-width:100%;border-radius:calc(18px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-pop);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}.ok-menu__hl{position:absolute;left:6px;right:6px;top:0;height:var(--ok-h-item);border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-hover);opacity:0;pointer-events:none;transform:translateY(var(--y, 0));transition:transform var(--ok-dur-1) var(--ok-ease-out),opacity var(--ok-dur-1) var(--ok-ease-out),height var(--ok-dur-1) var(--ok-ease-out),background-color var(--ok-dur-1) var(--ok-ease-out)}.ok-menu[data-hl]>.ok-menu__hl{opacity:1}.ok-menu__hl[data-tone=success]{background:var(--ok-success-soft)}.ok-menu__hl[data-tone=warning]{background:var(--ok-warning-soft)}.ok-menu__hl[data-tone=danger]{background:var(--ok-danger-soft)}.ok-menu__hl[data-tone=info]{background:var(--ok-info-soft)}.ok-menu__item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--ok-h-item);padding:0 10px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:400 14px/1 var(--ok-font);color:var(--ok-text);text-align:left;white-space:nowrap;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}.ok-menu__item:focus-visible{outline-color:var(--ok-accent)}.ok-menu__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed}.ok-menu__item[aria-disabled=true] .ok-icon{color:var(--ok-text-3)}.ok-menu__label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.ok-menu__item[aria-selected=true],.ok-menu[data-measuring] .ok-menu__item{font-weight:400}.ok-menu__item .ok-icon{width:17px;height:17px;color:var(--ok-text-2)}.ok-menu__item--success,.ok-menu__item--success .ok-icon{color:var(--ok-success-text)}.ok-menu__item--warning,.ok-menu__item--warning .ok-icon{color:var(--ok-warning-text)}.ok-menu__item--danger,.ok-menu__item--danger .ok-icon{color:var(--ok-danger-text)}.ok-menu__item--info,.ok-menu__item--info .ok-icon{color:var(--ok-info-text)}.ok-menu__meta{margin-left:auto;padding-left:20px;font:400 12px/1 var(--ok-font);color:var(--ok-text-3)}.ok-menu__check{flex:none;width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--ok-text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-menu__meta+.ok-menu__check{margin-left:10px}.ok-menu__check path{stroke-dasharray:1;stroke-dashoffset:1}.ok-menu__item[aria-selected=true] .ok-menu__check path,.ok-menu__item[aria-checked=true] .ok-menu__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out)}.ok-menu[data-check=instant] .ok-menu__item .ok-menu__check path{transition:none}.ok-menu__item .ok-menu__chevron{width:14px;height:14px;margin-left:auto;color:var(--ok-text-3)}.ok-menu__meta+.ok-menu__chevron{margin-left:10px}.ok-menu__sep{height:1px;margin:6px 10px;background:var(--ok-line)}.ok-menu__heading{padding:8px 10px 4px;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3);white-space:nowrap}.ok-menu__empty{padding:14px 16px;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2);text-align:center}.ok-menu__empty+.ok-menu:not([hidden]){padding-top:0}.ok-context-area{-webkit-touch-callout:none}.ok-menu:has(.ok-menu__item[data-icon]) .ok-menu__item:not([data-icon]){padding-left:37px}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/segmented.css · 先引入 base */
|
|
2
|
-
.ok-seg{position:relative;isolation:isolate;display:inline-flex;padding:3px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well)}.ok-seg__thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:0;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-spring-dur) var(--ok-spring)}.ok-seg:not(.is-ready):not([data-ready]) .ok-seg__thumb{transition:none}.ok-seg__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;height:calc(var(--ok-h-md) - 6px);padding:0 16px;margin:0;border:0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:none;font:
|
|
2
|
+
.ok-seg{position:relative;isolation:isolate;display:inline-flex;flex:none;width:max-content;box-sizing:border-box;padding:3px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well)}.ok-seg__thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:0;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-spring-dur) var(--ok-spring)}.ok-seg:not(.is-ready):not([data-ready]) .ok-seg__thumb{transition:none}.ok-seg__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;height:calc(var(--ok-h-md) - 6px);padding:0 16px;margin:0;border:0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:none;font:400 14px/1 var(--ok-font);color:var(--ok-text-2);white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-seg__item:hover{color:var(--ok-text)}}.ok-seg__item:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-seg__item[aria-checked=true]{color:var(--ok-text)}.ok-seg__item .ok-icon{width:16px;height:16px}.ok-seg--sm .ok-seg__item{height:calc(var(--ok-h-sm) - 6px);padding:0 12px;font-size:13px}.ok-seg--block{display:flex;width:auto}.ok-seg{max-width:100%;min-width:0}.ok-seg--block .ok-seg__item{min-width:0}.ok-seg__item{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-seg__item>span{overflow:hidden;text-overflow:ellipsis}.ok-seg__item:disabled,.ok-seg__item[aria-disabled=true]{opacity:.42;cursor:not-allowed;transform:none;color:var(--ok-text-2)}.ok-seg--lg .ok-seg__item{height:calc(var(--ok-h-lg) - 6px);padding:0 20px;font-size:15px}.ok-seg{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ok-seg::-webkit-scrollbar{display:none}.ok-seg:not(.ok-seg--block) .ok-seg__item{min-width:max-content}@media (prefers-reduced-motion: no-preference){:root:not([data-motion=reduced]) .ok-seg[data-ready]{scroll-behavior:smooth}}:root[data-motion=full] .ok-seg[data-ready]{scroll-behavior:smooth}.ok-seg__item.ok-focusable:focus-visible{outline-offset:1px}
|
package/dist/styles/select.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/select.css · 先引入 base、popup、menu */
|
|
2
|
-
.ok-select{--ok-select-min: 168px;position:relative;display:inline-flex;flex-direction:column;min-width:0;max-width:100%}.ok-select:after{content:"";flex:none;width:var(--ok-select-min);max-width:100%;height:0}.ok-select--block{display:flex;width:100%}.ok-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;min-width:0;max-width:100%;height:var(--ok-h-md);padding:0 12px 0 16px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text);font:
|
|
2
|
+
.ok-select{--ok-select-min: 168px;position:relative;display:inline-flex;flex-direction:column;min-width:0;max-width:100%}.ok-select:after{content:"";flex:none;width:var(--ok-select-min);max-width:100%;height:0}.ok-select--block{display:flex;width:100%}.ok-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;min-width:0;max-width:100%;height:var(--ok-h-md);padding:0 12px 0 16px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text);font:400 14px/1 var(--ok-font);cursor:pointer;transition:background-color var(--ok-dur-2),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-select__trigger:hover:not(:disabled){background:var(--ok-fill-hover)}}.ok-select__trigger:active:not(:disabled){transform:scale(.97);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-select__trigger>.ok-icon{flex:none;width:16px;height:16px;color:var(--ok-text-3)}.ok-select__trigger:disabled{color:var(--ok-text-3);cursor:not-allowed}.ok-select__trigger[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-select__value{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ok-select__value[data-placeholder]{color:var(--ok-text-3);font-weight:500}.ok-select[data-size=sm]{--ok-select-min: 128px}.ok-select[data-size=sm] .ok-select__trigger{height:var(--ok-h-sm);padding:0 10px 0 12px;gap:8px;font-size:13px}.ok-select[data-size=lg] .ok-select__trigger{height:var(--ok-h-lg);padding:0 16px 0 20px;font-size:15px}.ok-select__chips{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.ok-select__chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-raised);font:600 12px/1.3 var(--ok-font);color:var(--ok-text)}.ok-select__chip--more{flex:none;color:var(--ok-text-2)}
|
package/dist/styles/switch.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* oink-ui/styles/switch.css · 先引入 base */
|
|
2
|
-
.ok-switch{position:relative;display:inline-flex;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-switch input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}.ok-switch__track{position:relative;display:block;width:
|
|
2
|
+
.ok-switch{position:relative;display:inline-flex;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-switch input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}.ok-switch__track{position:relative;display:block;width:44px;height:26px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well-2);outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-3) var(--ok-ease-out),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-switch__thumb{position:absolute;top:3px;left:3px;width:26px;height:20px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-thumb);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-dur-2) var(--ok-ease-out)}.ok-switch input:checked+.ok-switch__track{background:var(--ok-accent)}.ok-switch input:checked+.ok-switch__track .ok-switch__thumb{transform:translate(12px)}.ok-switch:active input:not(:disabled)+.ok-switch__track .ok-switch__thumb{width:31px}.ok-switch:active input:checked:not(:disabled)+.ok-switch__track .ok-switch__thumb{transform:translate(7px)}.ok-switch input:focus-visible+.ok-switch__track{outline-color:var(--ok-accent);outline-offset:2px}.ok-switch input:disabled{cursor:not-allowed}.ok-switch input:disabled+.ok-switch__track{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-switch input:disabled+.ok-switch__track .ok-switch__thumb{background:var(--ok-well-2)}.ok-switch input:disabled:checked+.ok-switch__track{background:var(--ok-accent-tint);box-shadow:none}.ok-switch input:disabled:checked+.ok-switch__track .ok-switch__thumb{background:var(--ok-raised)}.ok-switch{align-items:center;gap:10px;touch-action:manipulation}.ok-switch__label{font:500 15px/1.4 var(--ok-font);color:var(--ok-text)}.ok-switch:has(input:disabled){cursor:not-allowed}.ok-switch:has(input:disabled) .ok-switch__label{color:var(--ok-text-3)}.ok-switch__label{min-width:0}.ok-switch__track{flex:none}.ok-switch[data-label-position=start] .ok-switch__label{flex:1 1 auto}.ok-switch--sm .ok-switch__track{width:36px;height:22px}.ok-switch--sm .ok-switch__thumb{width:20px;height:16px}.ok-switch--sm input:checked+.ok-switch__track .ok-switch__thumb{transform:translate(10px)}.ok-switch--sm:active input:not(:disabled)+.ok-switch__track .ok-switch__thumb{width:24px}.ok-switch--sm:active input:checked:not(:disabled)+.ok-switch__track .ok-switch__thumb{transform:translate(6px)}.ok-switch--lg .ok-switch__track{width:54px;height:32px}.ok-switch--lg .ok-switch__thumb{width:32px;height:26px}.ok-switch--lg input:checked+.ok-switch__track .ok-switch__thumb{transform:translate(16px)}.ok-switch--lg:active input:not(:disabled)+.ok-switch__track .ok-switch__thumb{width:38px}.ok-switch--lg:active input:checked:not(:disabled)+.ok-switch__track .ok-switch__thumb{transform:translate(10px)}
|