Skip to content

Instantly share code, notes, and snippets.

@VityaSchel

VityaSchel/unity-ui-kit.html

Last active October 2, 2024 01:19
Show Gist options
  • Save VityaSchel/c79724dc727e4f17df61c82d6ab76648 to your computer and use it in GitHub Desktop.
Save VityaSchel/c79724dc727e4f17df61c82d6ab76648 to your computer and use it in GitHub Desktop.
Download ZIP
Unity 2017 button, checkbox and button group with tailwind
Raw
unity-ui-kit.html
<div class="flex flex-col items-start gap-8 p-8">
<!-- Checkbox -->
<div class="flex items-center gap-1.5">
<div class="relative">
<input type="checkbox" class="peer absolute z-[10] h-[12px] w-[12px] opacity-0" id="my_checkbox_1" />
<div class="h-[12px] w-[12px] rounded-[2px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] peer-active:from-[#6B6B6B] peer-active:to-[#5E5E5E]"></div>
<div class="top-px left-px absolute z-[5] h-[10px] w-[10px] bg-gradient-to-b from-[#606060] to-[#3D3D3D] peer-active:from-[#525252] peer-active:to-[#5C5C5C]"></div>
<img src="data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.06066' y1='13.9393' x2='14.0607' y2='19.9393' stroke='white' stroke-width='3'/%3E%3Cline x1='11.9765' y1='19.9034' x2='26.9765' y2='5.90342' stroke='white' stroke-width='3'/%3E%3C/svg%3E" width="14" height="14" class="absolute -top-px -left-px hidden h-[14px] min-h-[14px] w-[14px] min-w-[14px] select-none peer-checked:block z-[8]" />
</div>
<label for="my_checkbox_1" class="select-none font-[Inter] text-sm text-[#B4B4B4]">Label</label>
</div>
<!-------------->
<!-- Button -->
<button class="rounded-[4px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] group active:from-[#666666] active:to-[#5A5A5A]">
<div class="rounded-[3px] bg-gradient-to-b from-[#5E5E5E] to-[#3C3C3C] px-12 py-[3px] font-[Inter] text-sm font-light text-[#B4B4B4] group-active:from-[#4D4D4D] group-active:to-[#5A5A5A]">Add Component</div>
</button>
<!------------>
<!-- Button group -->
<div class="flex h-[21px] shadow-[0px_1px_1px_1px_#2B2B2B] [&>*:first-child]:rounded-s-[4px] [&>*:first-child>div]:rounded-s-[3px] [&>*:last-child]:rounded-e-[4px] [&>*:last-child>div]:rounded-e-[3px] [&>*::after]:content-[''] [&>*::after]:absolute [&>*::after]:bg-[rgba(0,0,0,0.35)] [&>*::after]:w-px [&>*::after]:h-[calc(100%-2px)] [&>*]:relative [&>*::after]:top-[1px] [&>*::after]:right-0 rounded-[4px] [&>*:last-child::after]:opacity-0">
<button class="bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]">
<div class="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M188 80a27.8 27.8 0 0 0-13.36 3.4a28 28 0 0 0-46.64-11A28 28 0 0 0 80 92v20H68a28 28 0 0 0-28 28v12a88 88 0 0 0 176 0v-44a28 28 0 0 0-28-28m12 72a72 72 0 0 1-144 0v-12a12 12 0 0 1 12-12h12v24a8 8 0 0 0 16 0V92a12 12 0 0 1 24 0v28a8 8 0 0 0 16 0V92a12 12 0 0 1 24 0v28a8 8 0 0 0 16 0v-12a12 12 0 0 1 24 0Z"></path></svg>
</div>
</button>
<button class="bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]">
<div class="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 2l4 4h-3v7.85l6.53 3.76L21 15.03l1.5 5.47l-5.5 1.46l1.53-2.61L12 15.58l-6.53 3.77L7 21.96L1.5 20.5L3 15.03l1.47 2.58L11 13.85V6H8z"></path></svg>
</div>
</button>
<button class="bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]">
<div class="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fillRule="evenodd" d="M8 1.5a6.5 6.5 0 0 0-6.445 5.649a.75.75 0 1 0 1.488.194A5.001 5.001 0 0 1 11.57 4.5h-1.32a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-1.5 0v1.06A6.48 6.48 0 0 0 8 1.5m-5.25 13a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5H4.43a5.001 5.001 0 0 0 8.528-2.843a.75.75 0 1 1 1.487.194A6.501 6.501 0 0 1 3.5 12.691v1.059a.75.75 0 0 1-.75.75" clipRule="evenodd"></path></svg>
</div>
</button>
</div>
<!------------>
</div>
Raw
unity-ui-kit.tsx
import cx from 'classnames'
/**
* Example:
* ```tsx
* <Checkbox id="checkbox" />
* ```
*/
export function Checkbox({ id }: { id: string }) {
return (
<div className="relative">
<input type="checkbox" className="peer absolute z-[10] h-[12px] w-[12px] opacity-0" id={id} />
<div className="h-[12px] w-[12px] rounded-[2px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] peer-active:from-[#6B6B6B] peer-active:to-[#5E5E5E]"></div>
<div className="top-px left-px absolute z-[5] h-[10px] w-[10px] bg-gradient-to-b from-[#606060] to-[#3D3D3D] peer-active:from-[#525252] peer-active:to-[#5C5C5C]"></div>
<img src="data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.06066' y1='13.9393' x2='14.0607' y2='19.9393' stroke='white' stroke-width='3'/%3E%3Cline x1='11.9765' y1='19.9034' x2='26.9765' y2='5.90342' stroke='white' stroke-width='3'/%3E%3C/svg%3E" width="14" height="14" className="absolute -top-px -left-px hidden h-[14px] min-h-[14px] w-[14px] min-w-[14px] select-none peer-checked:block z-[8]" />
</div>
)
}
/**
* Example:
* ```tsx
* <LabelCheckbox>
* <Checkbox id="checkbox" />
* <CheckboxLabel htmlFor="checkbox">Label</CheckboxLabel>
* </LabelCheckbox>
* ```
*/
export function LabeledCheckbox({ children }: React.PropsWithChildren) {
return (
<div className="flex items-center gap-1.5">
{children}
</div>
)
}
/**
* Example:
* ```tsx
* <LabelCheckbox>
* <Checkbox id="checkbox" />
* <CheckboxLabel htmlFor="checkbox">Label</CheckboxLabel>
* </LabelCheckbox>
* ```
*/
export function CheckboxLabel({ htmlFor, children }: React.PropsWithChildren<{
htmlFor: string
}>) {
return (
<label htmlFor={htmlFor} className="select-none font-[Inter] text-sm text-[#B4B4B4]">
{children}
</label>
)
}
/**
* Example:
* ```tsx
* <Button>Add component</Button>
* ```
*/
export function Button({ children, className, ...props }: React.PropsWithChildren<{
className?: string
}> & React.ComponentProps<'button'>) {
return (
<button className={cx('rounded-[4px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] group active:from-[#666666] active:to-[#5A5A5A]', className)} {...props}>
<div className="rounded-[3px] bg-gradient-to-b from-[#5E5E5E] to-[#3C3C3C] px-12 py-[3px] font-[Inter] text-sm font-light text-[#B4B4B4] group-active:from-[#4D4D4D] group-active:to-[#5A5A5A]">
{children}
</div>
</button>
)
}
/**
* Example:
* ```tsx
* <ButtonGroup>
* <ButtonGroupItem>
* <GrabIcon />
* </ButtonGroupItem>
* <ButtonGroupItem>
* <MoveIcon />
* </ButtonGroupItem>
* <ButtonGroupItem>
* <RotateIcon />
* </ButtonGroupItem>
* </ButtonGroup>
*/
export function ButtonGroup({ children }: React.PropsWithChildren) {
return (
<div className="flex h-[21px] shadow-[0px_1px_1px_1px_#2B2B2B] [&>*:first-child]:rounded-s-[4px] [&>*:first-child>div]:rounded-s-[3px] [&>*:last-child]:rounded-e-[4px] [&>*:last-child>div]:rounded-e-[3px] [&>*::after]:content-[''] [&>*::after]:absolute [&>*::after]:bg-[rgba(0,0,0,0.35)] [&>*::after]:w-px [&>*::after]:h-[calc(100%-2px)] [&>*]:relative [&>*::after]:top-[1px] [&>*::after]:right-0 rounded-[4px] [&>*:last-child::after]:opacity-0">
{children}
</div>
)
}
/**
* Example:
* ```tsx
* <ButtonGroup>
* <ButtonGroupItem>
* <GrabIcon />
* </ButtonGroupItem>
* <ButtonGroupItem>
* <MoveIcon />
* </ButtonGroupItem>
* <ButtonGroupItem>
* <RotateIcon />
* </ButtonGroupItem>
* </ButtonGroup>
*/
export function ButtonGroupItem({ children, className, ...props }: React.PropsWithChildren<{
className?: string
}> & React.ComponentProps<'button'>) {
return (
<button className={cx('bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]', className)} {...props}>
<div className="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
{children}
</div>
</button>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment