@cn-ui/core
Version:
The @cn-ui/core is a collection of UI components and utilities for building modern web applications with SolidJS.
2 lines (1 loc) • 15.8 kB
CSS
.cn-modal-list{--modal-show-position: -120px;pointer-events:none;z-index:20000;.cn-virtual-list-container{pointer-events:auto}.cn-virtual-list-item{transition:top .3s,bottom .3s,transform .3s,opacity linear .1s;animation:cn-modal-show .3s}}.cn-modal-list{.cn-virtual-list::-webkit-scrollbar{width:0;height:0}.cn-virtual-list-item:nth-child(1){z-index:9999}}.cn-modal-stack:not(:hover){.cn-virtual-list-container{height:100px}.cn-virtual-list-normal{.cn-virtual-list-item{top:1.25rem;transform:scale(.8);opacity:0}.cn-virtual-list-item:nth-child(1){top:0;transform:scale(1);z-index:9999;opacity:1}.cn-virtual-list-item:nth-child(2){top:.5rem;transform:scale(.95);z-index:9998;opacity:1}.cn-virtual-list-item:nth-child(3){top:1rem;transform:scale(.9);z-index:9997;opacity:1}.cn-virtual-list-item:nth-child(4){top:1.25rem;transform:scale(.8);z-index:9996;opacity:0}}.cn-virtual-list-reverse{.cn-virtual-list-item{bottom:1.25rem;transform:scale(.8);opacity:0}.cn-virtual-list-item:nth-child(1){bottom:0;transform:scale(1);z-index:9999;opacity:1}.cn-virtual-list-item:nth-child(2){bottom:.5rem;transform:scale(.95);z-index:9998;opacity:.8}.cn-virtual-list-item:nth-child(3){bottom:1rem;transform:scale(.9);z-index:9997;opacity:.5}.cn-virtual-list-item:nth-child(4){bottom:1.25rem;transform:scale(.8);z-index:9996;opacity:0}}}@keyframes cn-modal-show{0%{opacity:0;translate:var(--modal-show-position)}to{opacity:1;translate:0px}}.cn-fade-enter-active,.cn-fade-exit-active{transition:opacity linear .3s,transform .3s}.cn-fade-enter,.cn-fade-exit-to{transform:scale(.7);opacity:0}.cn-fade-enter{transform:scale(1.3)}.cn-fade-exit-active{position:absolute}.cn-animate-spin{animation:cn-spin 1s linear infinite}@keyframes cn-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cn-textarea-auto-size{display:inline-grid}.cn-textarea-auto-size:after{content:attr(data-replicated-value) " ";white-space:pre-wrap;visibility:hidden}.cn-textarea-auto-size>textarea{resize:none;overflow:hidden}.cn-textarea-auto-size>textarea,.cn-textarea-auto-size:after{font:inherit;grid-area:1 / 1 / 2 / 2}.cn-slide-from-left-enter-active,.cn-slide-from-left-exit-active{transition:transform .3s}.cn-slide-from-left-enter,.cn-slide-from-left-exit-to{transform:translate(-100%)}.cn-slide-from-left-exit-active{position:absolute}.cn-slide-from-right-enter-active,.cn-slide-from-right-exit-active{transition:transform .3s}.cn-slide-from-right-enter,.cn-slide-from-right-exit-to{transform:translate(100%)}.cn-slide-from-right-exit-active{position:absolute}.cn-opacity-fade-enter-active,.cn-opacity-fade-exit-active{transition:opacity linear .15s}.cn-opacity-fade-enter,.cn-opacity-fade-exit-to{opacity:0}.cn-opacity-fade-exit-active{position:absolute}.cn-list-move,.cn-list-enter-active,.cn-list-exit-active{transition:all .3s ease}.cn-list-enter-from,.cn-list-exit-to{opacity:0;transform:translateY(30px)}.cn-list-exit-active{position:absolute}.popover__content{box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.popover__arrow,.popover__arrow:before{width:.5rem;height:.5rem;position:absolute;z-index:-1}.popover__arrow:before{content:"";transform:rotate(45deg);top:0;left:0;--at-apply: bg-design-thick}.popover__arrow:before{transition:transform .2s ease-out,visibility .2s ease-out;visibility:visible;transform:translate(0) rotate(45deg);transform-origin:center}[data-popper-placement^=top]>.popover__arrow{bottom:-.2rem}[data-popper-placement^=bottom]>.popover__arrow{top:-.2rem}[data-popper-placement^=left]>.popover__arrow{right:-.2rem}[data-popper-placement^=right]>.popover__arrow{left:-.2rem}.cn-select-option.cn-selected:not(.cn-select-option.disabled):has(+.cn-select-option.cn-selected:not(.cn-select-option.disabled)){border-end-start-radius:0;border-end-end-radius:0}.cn-select-option.cn-selected:not(.cn-select-option.disabled):has(+.cn-select-option.cn-selected:not(.cn-select-option.disabled))+.cn-select-option.cn-selected:not(.cn-select-option.disabled){border-start-start-radius:0;border-start-end-radius:0}.cn-select-input input[readonly]{cursor:pointer}.cn-form-core{margin-bottom:var(--cn-form-error-message-height, 12px);.cn-base-input,.cn-date-picker-range,.cn-input-number{width:100%}}:root{--bounce-spinner__color: rgb(var(--cn-colors-primary-600))}.gutter{background-repeat:no-repeat;background-position:50%;transition:background-color,transform,.3s;flex-basis:3px}.gutter:hover{transform:scaleX(1.5);background-color:#1a53ff}.gutter.gutter-horizontal{cursor:col-resize}.gutter.gutter-vertical{cursor:row-resize}.theme-switch{--container-width: 5.625em;--container-height: 2.5em;--container-radius: 6.25em;--container-light-bg: #3d7eae;--container-night-bg: #1d1f2c;--circle-container-diameter: 3.375em;--sun-moon-diameter: 2.125em;--sun-bg: #ecca2f;--moon-bg: #c4c9d1;--spot-color: #959db1;--circle-container-offset: calc( (var(--circle-container-diameter) - var(--container-height)) / 2 * -1 );--stars-color: #fff;--clouds-color: #f3fdff;--back-clouds-color: #aacadf;--transition: .5s cubic-bezier(0, -.02, .4, 1.25);--circle-transition: .3s cubic-bezier(0, -.02, .35, 1.17)}.theme-switch,.theme-switch *,.theme-switch *:before,.theme-switch *:after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}.theme-switch__container{width:var(--container-width);height:var(--container-height);background-color:var(--container-light-bg);border-radius:var(--container-radius);overflow:hidden;cursor:pointer;-webkit-box-shadow:0em -.062em .062em rgba(0,0,0,.25),0em .062em .125em rgba(255,255,255,.94);box-shadow:0 -.062em .062em #00000040,0 .062em .125em #fffffff0;-webkit-transition:var(--transition);-o-transition:var(--transition);transition:var(--transition);position:relative}.theme-switch__container:before{content:"";position:absolute;z-index:1;inset:0;-webkit-box-shadow:0em .05em .187em rgba(0,0,0,.25) inset,0em .05em .187em rgba(0,0,0,.25) inset;box-shadow:0 .05em .187em #00000040 inset,0 .05em .187em #00000040 inset;border-radius:var(--container-radius)}.theme-switch__checkbox{display:none}.theme-switch__circle-container{width:var(--circle-container-diameter);height:var(--circle-container-diameter);background-color:#ffffff1a;position:absolute;left:var(--circle-container-offset);top:var(--circle-container-offset);border-radius:var(--container-radius);-webkit-box-shadow:inset 0 0 0 3.375em rgba(255,255,255,.1),inset 0 0 0 3.375em rgba(255,255,255,.1),0 0 0 .625em rgba(255,255,255,.1),0 0 0 1.25em rgba(255,255,255,.1);box-shadow:inset 0 0 0 3.375em #ffffff1a,inset 0 0 0 3.375em #ffffff1a,0 0 0 .625em #ffffff1a,0 0 0 1.25em #ffffff1a;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:var(--circle-transition);-o-transition:var(--circle-transition);transition:var(--circle-transition);pointer-events:none}.theme-switch__sun-moon-container{pointer-events:auto;position:relative;z-index:2;width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);margin:auto;border-radius:var(--container-radius);background-color:var(--sun-bg);-webkit-box-shadow:.062em .062em .062em 0em rgba(254,255,239,.61) inset,0em -.062em .062em 0em #a1872a inset;box-shadow:.062em .062em .062em #feffef9c inset,0 -.062em .062em #a1872a inset;-webkit-filter:drop-shadow(.062em .125em .125em rgba(0,0,0,.25)) drop-shadow(0em .062em .125em rgba(0,0,0,.25));filter:drop-shadow(.062em .125em .125em rgba(0,0,0,.25)) drop-shadow(0em .062em .125em rgba(0,0,0,.25));overflow:hidden;-webkit-transition:var(--transition);-o-transition:var(--transition);transition:var(--transition)}.theme-switch__moon{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translate(100%);width:100%;height:100%;background-color:var(--moon-bg);border-radius:inherit;-webkit-box-shadow:.062em .062em .062em 0em rgba(254,255,239,.61) inset,0em -.062em .062em 0em #969696 inset;box-shadow:.062em .062em .062em #feffef9c inset,0 -.062em .062em #969696 inset;-webkit-transition:var(--transition);-o-transition:var(--transition);transition:var(--transition);position:relative}.theme-switch__spot{position:absolute;top:.75em;left:.312em;width:.75em;height:.75em;border-radius:var(--container-radius);background-color:var(--spot-color);-webkit-box-shadow:0em .0312em .062em rgba(0,0,0,.25) inset;box-shadow:0 .0312em .062em #00000040 inset}.theme-switch__spot:nth-of-type(2){width:.375em;height:.375em;top:.937em;left:1.375em}.theme-switch__spot:nth-last-of-type(3){width:.25em;height:.25em;top:.312em;left:.812em}.theme-switch__clouds{width:1.25em;height:1.25em;background-color:var(--clouds-color);border-radius:var(--container-radius);position:absolute;bottom:-.625em;left:.312em;-webkit-box-shadow:.937em .312em var(--clouds-color),-.312em -.312em var(--back-clouds-color),1.437em .375em var(--clouds-color),.5em -.125em var(--back-clouds-color),2.187em 0 var(--clouds-color),1.25em -.062em var(--back-clouds-color),2.937em .312em var(--clouds-color),2em -.312em var(--back-clouds-color),3.625em -.062em var(--clouds-color),2.625em 0em var(--back-clouds-color),4.5em -.312em var(--clouds-color),3.375em -.437em var(--back-clouds-color),4.625em -1.75em 0 .437em var(--clouds-color),4em -.625em var(--back-clouds-color),4.125em -2.125em 0 .437em var(--back-clouds-color);box-shadow:.937em .312em var(--clouds-color),-.312em -.312em var(--back-clouds-color),1.437em .375em var(--clouds-color),.5em -.125em var(--back-clouds-color),2.187em 0 var(--clouds-color),1.25em -.062em var(--back-clouds-color),2.937em .312em var(--clouds-color),2em -.312em var(--back-clouds-color),3.625em -.062em var(--clouds-color),2.625em 0 var(--back-clouds-color),4.5em -.312em var(--clouds-color),3.375em -.437em var(--back-clouds-color),4.625em -1.75em 0 .437em var(--clouds-color),4em -.625em var(--back-clouds-color),4.125em -2.125em 0 .437em var(--back-clouds-color);-webkit-transition:.5s cubic-bezier(0,-.02,.4,1.25);-o-transition:.5s cubic-bezier(0,-.02,.4,1.25);transition:.5s cubic-bezier(0,-.02,.4,1.25)}.theme-switch__stars-container{position:absolute;color:var(--stars-color);top:-100%;left:.312em;width:2.75em;height:auto;-webkit-transition:var(--transition);-o-transition:var(--transition);transition:var(--transition)}.theme-switch__checkbox:checked+.theme-switch__container{background-color:var(--container-night-bg)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter))}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container:hover{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - .187em)}.theme-switch__circle-container:hover{left:calc(var(--circle-container-offset) + .187em)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds{bottom:-4.062em}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.cn-switch{--button-width: 3rem;--button-height: 1.5rem;--toggle-diameter: 1rem;--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);--toggle-shadow-offset: 10px;--toggle-wider: 3rem}.cn-switch .slider:after{content:"";display:inline-block;width:var(--toggle-diameter);height:var(--toggle-diameter);background-color:#fff;border-radius:calc(var(--toggle-diameter) / 2);position:absolute;top:var(--button-toggle-offset);transform:translate(var(--button-toggle-offset));box-shadow:var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) #0000001a;transition:.3s all ease-in-out}.cn-switch input[type=checkbox]:checked+.slider:after{transform:translate(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));box-shadow:calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) #0000001a}.cn-switch input[type=checkbox]{display:none}.cn-switch input[type=checkbox]:active+.slider:after{width:var(--toggle-wider)}.cn-switch input[type=checkbox]:checked:active+.slider:after{transform:translate(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)))}.cn-selected.cn-table-body-row .cn-table-body-cell{--at-apply: "bg-primary-50"}.cn-selected.cn-table-body-row:hover .cn-table-body-cell{--at-apply: "bg-primary-100"}.cn-table-body-row:hover .cn-table-body-cell{--at-apply: "bg-design-secondary"}.cn-table-body-row .cn-table-body-cell{--at-apply: "bg-design-primary"}.cn-timeline-item-tail{position:absolute;inset-block-start:10px;inset-inline-start:.45rem;height:100%;border-inline-start:2px solid var(--cn-border-design-separator-0)}.cn-timeline-item-tail-col{position:absolute;width:100%;height:2px;top:.65rem;--at-apply: bg-gray-400}.cn-typography ::-webkit-scrollbar{--at-apply: h-2 w-2}.cn-typography ::-webkit-scrollbar-thumb{--at-apply: bg-design-border}.cn-typography ::-webkit-scrollbar-track-piece{--at-apply: bg-transparent}.cn-typography{font-family:var(--default-font);--at-apply: box-border w-full pb-12 text-design-text}.cn-typography ins,.cn-typography a,.cn-typography u{--at-apply: underline underline-offset-2}.cn-typography mark{--at-apply: mx-4 bg-yellow-200 px-0.5}.cn-typography pre,.cn-typography pre tt{font-family:Courier,Courier New,monospace}.cn-typography pre{--at-apply: overflow-auto rounded-2xl px-4}.cn-typography p,.cn-typography pre,.cn-typography ul,.cn-typography ol,.cn-typography dl,.cn-typography form,.cn-typography table,.cn-typography blockquote{--at-apply: mb-4}.cn-typography hr{--at-apply: my-2 border-design-border}.cn-typography blockquote{--at-apply: relative my-2 border-l-4 border-solid border-design-border pl-2 font-normal text-design-h2}.cn-typography :not(pre)>code{--at-apply: mx-1 my-2 rounded-md px-1}.cn-typography h1,.cn-typography h2,.cn-typography h3,.cn-typography h4,.cn-typography h5,.cn-typography h6{--at-apply: mb-[.6em] mt-[.75em] leading-snug pb-4 text-design-title}.cn-typography h1,.cn-typography h2,.cn-typography h3,.cn-typography h4{--at-apply: font-bold}.cn-typography h1{--at-apply: text-3xl}.cn-typography h2{--at-apply: text-2xl border-b border-design-border}.cn-typography h3{--at-apply: text-xl mt-[1.5em] pb-2}.cn-typography h4{--at-apply: text-lg}.cn-typography h5{--at-apply: text-sm}.cn-typography h6{--at-apply: text-xs}.cn-typography ul{--at-apply: ml-6 list-disc}.cn-typography ol{--at-apply: ml-6 list-decimal}.cn-typography li ul,.cn-typography li ol{--at-apply: ml-8 mb-3}.cn-typography li ul{list-style:circle;--at-apply: list-[circle]}.cn-typography table{--at-apply: w-full overflow-auto}.cn-typography table th,.cn-typography table td,.cn-typography table caption{--at-apply: border border-design-border px-2 py-4}.cn-typography table caption{--at-apply: border-b-0}.cn-typography input,.cn-typography textarea{--at-apply: appearance-none rounded-none}.cn-typography em,.cn-typography legend,.cn-typography caption{font-weight:inherit}.cn-typography em{--at-apply: relative mx-1}.cn-typography abbr{--at-apply: underline-offset-4 cursor-pointer}.cn-typography img{max-width:100%}.cn-typography>p{--at-apply: whitespace-pre-wrap}.cn-typography.cn-indent p:not(.indent-none){--at-apply: indent-[2em]}.cn-typography a{--at-apply: text-primary-500 hover: text-primary-400}.cn-typography strong{--at-apply: mx-1}.cn-typography summary{--at-apply: cursor-pointer select-none}.cn-typography figcaption{--at-apply: mt-2 pt-2 border-t border-design-border}.cn-typography section{--at-apply: my-4}