@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
1 lines • 2.78 kB
CSS
@layer components{.InputWrapper{cursor:none;display:inline-block;line-height:0}.InputWrapper:hover{cursor:pointer}.InputWrapper[data-radio-control=true]{position:absolute}.CheckboxInput{--w:24px;--h:24px;appearance:none;-webkit-backdrop-filter:saturate(180%) blur(62px);backdrop-filter:saturate(180%) blur(62px);background-color:var(--global-vibrancy-background);block-size:var(--h);border-radius:.25rem;box-shadow:0 0 0 1px var(--global-background),inset 0 0 0 1px var(--dimmed-2);color:var(--global-background);cursor:none;inline-size:var(--w);max-block-size:var(--h);max-inline-size:var(--w);position:relative}.CheckboxInput:hover{cursor:pointer}.CheckboxInput:after{block-size:27%;border-bottom:2px solid;border-left:2px solid;content:"";display:none;inline-size:50%;left:50%;position:absolute;top:50%;transform:translate(-50%,-80%) rotate(-45deg)}.CheckboxInput:active{background-color:var(--global-vibrancy-background-hard)}.CheckboxInput:checked,.CheckboxInput:indeterminate{background:var(--dimmed-7);box-shadow:0 0 0 1px var(--global-background),inset 0 0 0 1px transparent}.CheckboxInput:checked:after,.CheckboxInput:indeterminate:after{display:block}.CheckboxInput:disabled{background-color:var(--global-disabled-background);box-shadow:none;color:var(--global-disabled-foreground);cursor:not-allowed}.CheckboxInput[data-control-dimension=small]{--w:16px;--h:16px;margin-top:.125rem}.CheckboxInput:indeterminate:after{block-size:2px;border-left:0;transform:translate(-50%,-50%)}.RadioInput{composes:CheckboxInput;border-radius:100%}.RadioInput:after{background-color:currentcolor;block-size:50%;border:0;border-radius:100%;inline-size:50%;transform:translate(-50%,-50%)}.RadioInput:disabled{box-shadow:none}.RadioInput:indeterminate{background-color:var(--global-vibrancy-background);box-shadow:0 0 0 1px var(--global-background),inset 0 0 0 1px var(--dimmed-2)}.RadioInput:indeterminate:disabled{box-shadow:none}.RadioInput:indeterminate:after{block-size:0}.Toggle{--w:44px;--h:24px;--p:2px;composes:RadioInput;border-radius:200px;color:var(--dimmed-7);min-width:var(--w)}.Toggle:checked{color:var(--global-background)}.Toggle:disabled{color:var(--global-disabled-foreground)}.Toggle:after{block-size:calc(var(--h) - var(--p)*2);bottom:var(--p);display:block;inline-size:calc(var(--h) - var(--p)*2);left:var(--p);top:var(--p);transform:none;transition:transform .1s cubic-bezier(.3,.07,.34,1),background-color .1s cubic-bezier(.3,.07,.34,1)}.Toggle:checked:after{display:block;transform:translateX(100%)}.Toggle[data-control-dimension=small]{--w:28px;--h:16px;margin-top:.125rem;min-width:var(--w)}label.Label{cursor:none;word-break:break-word}label.Label:hover{cursor:pointer}label.Label[aria-disabled=true]{color:var(--global-disabled-foreground);cursor:not-allowed}}