@hummingbirdui/hummingbird
Version:
An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.
250 lines (231 loc) • 8.33 kB
CSS
@utility form-check {
@layer base {
@apply flex items-center;
}
}
@utility form-check-inline {
@layer base {
@apply inline-flex items-center mr-2;
}
}
@utility form-check-input-wrapper {
@layer base {
--form-check-input-wrapper-bg: --alpha(var(--color-primary) / 12%);
@apply relative inline-flex items-center justify-center rounded-full cursor-pointer
appearance-none
p-2.5
bg-transparent
hover:bg-[var(--form-check-input-wrapper-bg)];
@variant focus-within {
@apply bg-[var(--form-check-input-wrapper-bg)];
}
input {
@variant focus-visible {
@apply ring-0;
}
}
&:has(input[type='checkbox'][disabled]),
&:has(input[type='radio'][disabled]) {
@apply cursor-default;
--form-check-input-wrapper-bg: transparent;
~ .form-check-label {
@apply cursor-default text-disabled;
}
}
&:has(.form-check-secondary) {
--form-check-input-wrapper-bg: --alpha(var(--color-secondary) / 12%);
}
&:has(.form-check-info) {
--form-check-input-wrapper-bg: --alpha(var(--color-info) / 12%);
}
&:has(.form-check-success) {
--form-check-input-wrapper-bg: --alpha(var(--color-success) / 12%);
}
&:has(.form-check-warning) {
--form-check-input-wrapper-bg: --alpha(var(--color-warning) / 12%);
}
&:has(.form-check-danger) {
--form-check-input-wrapper-bg: --alpha(var(--color-danger) / 12%);
}
&:has(.form-check-neutral) {
--form-check-input-wrapper-bg: var(--background-color-muted);
}
}
}
@utility form-check-input {
@layer base {
--form-check-input-bg: var(--background-color-default);
--form-check-input-checked-bg: var(--color-primary);
--form-check-input-with: --spacing(4);
--form-check-input-height: --spacing(4);
--form-check-input-border-width: 1px;
--form-check-input-border-color: var(--border-color-base);
--form-check-input-radius: var(--radius-sm);
--form-check-bg-image: none;
@apply cursor-pointer
shrink-0
appearance-none
w-[var(--form-check-input-with)]
h-[var(--form-check-input-height)]
align-top
bg-[var(--form-check-input-bg)]
bg-[image:var(--form-check-bg-image)]
bg-no-repeat
bg-center
bg-contain
border-[length:var(--form-check-input-border-width)]
border-[var(--form-check-input-border-color)]
rounded-[var(--form-check-input-radius)];
@variant focus-visible {
@apply outline-0 ring-4 ring-[--alpha(var(--form-check-input-checked-bg)/50%)] border-[var(--form-check-input-checked-bg)];
}
&[type='radio'] {
--form-check-input-radius: calc(infinity * 1px);
}
&:active {
@apply brightness-90;
}
@variant focus {
@apply outline-0;
}
&:checked {
--form-check-input-bg: var(--form-check-input-checked-bg);
--form-check-input-border-color: var(--form-check-input-checked-bg);
&[type='checkbox'] {
--form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z'/%3E%3C/svg%3E");
@variant dark {
--form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2307080a' d='m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z'/%3E%3C/svg%3E");
}
}
&[type='radio'] {
--form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='4' d='M24 33a9 9 0 1 0 0-18a9 9 0 0 0 0 18Z'/%3E%3C/svg%3E");
@variant dark {
--form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%2307080a' stroke='%2307080a' stroke-width='4' d='M24 33a9 9 0 1 0 0-18a9 9 0 0 0 0 18Z'/%3E%3C/svg%3E");
}
}
}
&[type='checkbox']:indeterminate {
--form-check-input-bg: var(--color-primary);
--form-check-input-border-color: var(--color-primary);
--form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 13q-.425 0-.712-.288T5 12t.288-.712T6 11h12q.425 0 .713.288T19 12t-.288.713T18 13z' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}
&:disabled {
@apply pointer-events-none;
filter: none;
--form-check-input-border-color: var(--border-color-light);
&:checked {
--form-check-input-border-color: var(--color-disabled-color);
--form-check-input-bg: var(--color-disabled-color);
}
}
}
}
@utility form-check-md {
@layer base {
--form-check-input-with: --spacing(5);
--form-check-input-height: --spacing(5);
}
}
@utility form-check-lg {
@layer base {
--form-check-input-with: --spacing(6);
--form-check-input-height: --spacing(6);
&[type='checkbox'] {
--form-check-input-radius: var(--radius-md);
}
}
}
@utility form-check-secondary {
@layer base {
--form-check-input-checked-bg: var(--color-secondary);
}
}
@utility form-check-success {
@layer base {
--form-check-input-checked-bg: var(--color-success);
}
}
@utility form-check-info {
@layer base {
--form-check-input-checked-bg: var(--color-info);
}
}
@utility form-check-warning {
@layer base {
--form-check-input-checked-bg: var(--color-warning);
}
}
@utility form-check-danger {
@layer base {
--form-check-input-checked-bg: var(--color-danger);
}
}
@utility form-check-neutral {
@layer base {
--form-check-input-checked-bg: var(--color-dark);
}
}
@utility form-switch {
@layer base {
@apply space-x-2;
.form-check-input {
--form-check-input-bg: var(--background-color-emphasis);
--form-check-input-with: --spacing(9);
--form-check-input-height: --spacing(6);
--form-check-input-radius: calc(infinity * 1px);
--form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
@apply transition-[background] duration-150 ease-in-out border-0 bg-[position:left_center];
&:checked {
--form-check-input-bg: var(--form-check-input-checked-bg);
@apply bg-[position:right_center];
&[type='checkbox'] {
--form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
@variant dark {
--form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2307080a'/%3e%3c/svg%3e");
}
}
}
&:disabled {
@apply opacity-50;
&:checked {
--form-check-input-bg: var(--form-check-input-checked-bg);
}
~ .form-check-label {
@apply cursor-default text-disabled;
}
}
&.form-check-sm {
--form-check-input-with: --spacing(8);
--form-check-input-height: --spacing(5);
}
&.form-check-lg {
--form-check-input-with: --spacing(10);
--form-check-input-height: --spacing(7);
&[type='checkbox'] {
--form-check-input-radius: calc(infinity * 1px);
}
}
@variant dark {
--form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231d2025'/%3e%3c/svg%3e");
}
}
}
}
@utility btn-check {
@layer base {
@apply absolute w-[1px] h-[1px] p-0 -m-[1px] overflow-hidden whitespace-nowrap border-0;
clip-path: inset(50%);
&[disabled],
&:disabled {
+ .btn {
@apply pointer-events-none opacity-50;
filter: none;
}
}
}
}
@utility form-check-label {
@layer base {
@apply cursor-pointer text-default;
}
}