raft-ui
Version:
React UI components for Raft.
678 lines (582 loc) • 21 kB
CSS
.r-float-button {
--r-float-button-size: 32px;
--r-float-button-width: var(--r-float-button-size);
--r-float-button-padding-x: 0px;
--r-float-button-border-radius: 9999px;
--r-float-button-border-width: 2px;
--r-float-button-border-style: solid;
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--layer-panel);
--r-float-button-bg-hover: var(--layer-panel);
--r-float-button-text-color: var(--foreground-strong);
--r-float-button-text-hover-color: var(--r-float-button-text-color);
--r-float-button-text-disabled-color: var(--r-float-button-text-color);
--r-float-button-box-shadow: var(--theme-shadow-md);
--r-float-button-shadow-hover: var(--theme-shadow-lg);
--r-float-button-shadow-active: var(--theme-shadow-sm);
--r-float-button-transform-hover: translate(-1px, -1px);
--r-float-button-transform-active: translate(0, 0);
--r-float-button-outline: 2px solid var(--line-strong);
--r-float-button-outline-offset: 2px;
--r-float-button-font-size: 12px;
--r-float-button-font-weight: 700;
--r-float-button-desc-font-size: 10px;
--r-float-button-icon-size: 16px;
--r-float-button-opacity-disabled: .4;
&.r-float-button--xs {
--r-float-button-size: 24px;
--r-float-button-icon-size: 12px;
--r-float-button-font-size: 11px;
--r-float-button-desc-font-size: 8px;
--r-float-button-padding-x: 8px;
}
&.r-float-button--sm {
--r-float-button-size: 28px;
--r-float-button-icon-size: 14px;
--r-float-button-font-size: 12px;
--r-float-button-desc-font-size: 9px;
--r-float-button-padding-x: 10px;
}
&.r-float-button--md {
--r-float-button-size: 32px;
--r-float-button-icon-size: 16px;
--r-float-button-font-size: 12px;
--r-float-button-desc-font-size: 10px;
--r-float-button-padding-x: 12px;
}
&.r-float-button--lg {
--r-float-button-size: 36px;
--r-float-button-icon-size: 18px;
--r-float-button-font-size: 14px;
--r-float-button-desc-font-size: 11px;
--r-float-button-padding-x: 14px;
}
&.r-float-button--with-text {
--r-float-button-width: auto;
}
&.r-float-button--circle {
--r-float-button-border-radius: 9999px;
}
&.r-float-button--pill {
--r-float-button-border-radius: 9999px;
--r-float-button-width: auto;
padding-left: var(--r-float-button-padding-x);
padding-right: var(--r-float-button-padding-x);
}
&.r-float-button--square {
--r-float-button-border-radius: 0px;
}
&.r-float-button--default {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--layer-panel);
--r-float-button-bg-hover: var(--layer-panel);
--r-float-button-text-color: var(--foreground-strong);
}
&.r-float-button--primary {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--color-brutal-yellow, var(--primary-400));
--r-float-button-bg-hover: var(--color-brutal-yellow, var(--primary-400));
--r-float-button-text-color: var(--foreground-strong);
}
&.r-float-button--accent {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--color-brutal-pink, var(--accent-400));
--r-float-button-bg-hover: var(--color-brutal-pink, var(--accent-400));
--r-float-button-text-color: var(--foreground-strong);
}
&.r-float-button--outline {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--layer-panel);
--r-float-button-bg-hover: var(--layer-panel);
--r-float-button-text-color: var(--foreground-strong);
}
&.r-float-button--ghost {
--r-float-button-border-color: transparent;
--r-float-button-bg: transparent;
--r-float-button-text-color: var(--foreground-strong);
--r-float-button-box-shadow: none;
--r-float-button-bg-hover: var(--fill-muted);
--r-float-button-shadow-hover: var(--theme-shadow-sm);
}
&.r-float-button--warning {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--color-brutal-orange, var(--warning));
--r-float-button-bg-hover: var(--color-brutal-orange, var(--warning));
--r-float-button-text-color: var(--foreground-strong);
}
&.r-float-button--danger {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--color-brutal-red, var(--danger));
--r-float-button-bg-hover: var(--color-brutal-red, var(--danger));
--r-float-button-text-color: var(--foreground-strong);
}
&.r-float-button--elegant, :where([data-theme="elegant"]) & {
--r-float-button-border-width: 1px;
--r-float-button-font-weight: 500;
--r-float-button-border-color: var(--line-muted);
--r-float-button-bg: var(--layer-panel);
--r-float-button-bg-hover: var(--fill-muted);
--r-float-button-text-color: var(--foreground);
--r-float-button-text-hover-color: var(--foreground);
--r-float-button-box-shadow: var(--theme-shadow-md);
--r-float-button-transform-hover: none;
--r-float-button-transform-active: scale(.97);
--r-float-button-shadow-hover: var(--theme-shadow-md);
--r-float-button-shadow-active: var(--theme-shadow-md);
--r-float-button-outline: 2px solid color-mix(in oklch, var(--primary-400) 80%, transparent);
--r-float-button-outline-offset: 2px;
}
&.r-float-button--elegant.r-float-button--square.r-float-button--xs, :where([data-theme="elegant"]) &.r-float-button--square.r-float-button--xs, &.r-float-button--elegant.r-float-button--square.r-float-button--sm, :where([data-theme="elegant"]) &.r-float-button--square.r-float-button--sm {
--r-float-button-border-radius: 4px;
}
&.r-float-button--elegant.r-float-button--square.r-float-button--md, :where([data-theme="elegant"]) &.r-float-button--square.r-float-button--md {
--r-float-button-border-radius: 6px;
}
&.r-float-button--elegant.r-float-button--square.r-float-button--lg, :where([data-theme="elegant"]) &.r-float-button--square.r-float-button--lg {
--r-float-button-border-radius: 8px;
}
&.r-float-button--elegant.r-float-button--default, :where([data-theme="elegant"]) &.r-float-button--default {
--r-float-button-border-color: var(--line-muted);
--r-float-button-bg: var(--layer-panel);
--r-float-button-bg-hover: var(--fill-muted);
--r-float-button-text-color: var(--foreground);
}
&.r-float-button--elegant.r-float-button--primary, :where([data-theme="elegant"]) &.r-float-button--primary {
--r-float-button-border-color: transparent;
--r-float-button-bg: var(--primary-400);
--r-float-button-bg-hover: var(--primary-500);
--r-float-button-text-color: var(--primary-950);
}
&.r-float-button--elegant.r-float-button--accent, :where([data-theme="elegant"]) &.r-float-button--accent {
--r-float-button-border-color: transparent;
--r-float-button-bg: var(--accent-400);
--r-float-button-bg-hover: var(--accent-500);
--r-float-button-text-color: var(--accent-950);
}
&.r-float-button--elegant.r-float-button--outline, :where([data-theme="elegant"]) &.r-float-button--outline {
--r-float-button-border-color: var(--line-strong);
--r-float-button-bg: var(--layer-panel);
--r-float-button-bg-hover: var(--fill-muted);
--r-float-button-text-color: var(--foreground);
}
&.r-float-button--elegant.r-float-button--ghost, :where([data-theme="elegant"]) &.r-float-button--ghost {
--r-float-button-border-color: transparent;
--r-float-button-bg: transparent;
--r-float-button-bg-hover: var(--fill-muted);
--r-float-button-text-color: var(--foreground);
--r-float-button-box-shadow: none;
--r-float-button-shadow-hover: var(--theme-shadow-sm);
}
&.r-float-button--elegant.r-float-button--warning, :where([data-theme="elegant"]) &.r-float-button--warning {
--r-float-button-border-color: transparent;
--r-float-button-bg: var(--warning);
--r-float-button-bg-hover: var(--warning);
--r-float-button-text-color: var(--warning-foreground);
}
&.r-float-button--elegant.r-float-button--danger, :where([data-theme="elegant"]) &.r-float-button--danger {
--r-float-button-border-color: transparent;
--r-float-button-bg: var(--danger);
--r-float-button-bg-hover: var(--danger-hover);
--r-float-button-text-color: var(--danger-foreground);
}
}
.r-float-button {
user-select: none;
cursor: pointer;
box-sizing: border-box;
width: var(--r-float-button-width, var(--r-float-button-size));
min-width: var(--r-float-button-size);
height: var(--r-float-button-size);
border-radius: var(--r-float-button-border-radius);
border-width: var(--r-float-button-border-width);
border-style: var(--r-float-button-border-style);
border-color: var(--r-float-button-border-color);
background-color: var(--r-float-button-bg);
color: var(--r-float-button-text-color);
box-shadow: var(--r-float-button-box-shadow);
font-size: var(--r-float-button-font-size);
font-weight: var(--r-float-button-font-weight);
outline: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
padding: 0;
transition: transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
display: inline-flex;
position: relative;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
&.r-float-button--with-text, &.r-float-button--pill {
padding-left: var(--r-float-button-padding-x);
padding-right: var(--r-float-button-padding-x);
}
&:hover:not(:disabled) {
background-color: var(--r-float-button-bg-hover);
color: var(--r-float-button-text-hover-color);
box-shadow: var(--r-float-button-shadow-hover);
transform: var(--r-float-button-transform-hover);
}
&:active:not(:disabled) {
box-shadow: var(--r-float-button-shadow-active);
transform: var(--r-float-button-transform-active);
}
&:focus-visible {
outline: var(--r-float-button-outline);
outline-offset: var(--r-float-button-outline-offset);
}
&:disabled {
pointer-events: none;
opacity: var(--r-float-button-opacity-disabled);
cursor: not-allowed;
color: var(--r-float-button-text-disabled-color);
}
& svg {
pointer-events: none;
width: var(--r-float-button-icon-size);
height: var(--r-float-button-icon-size);
flex-shrink: 0;
}
& > .r-float-button__content {
white-space: nowrap;
justify-content: center;
align-items: center;
gap: 6px;
display: inline-flex;
&.r-float-button__content--with-desc {
flex-direction: column;
gap: 2px;
}
}
&.r-float-button--square.r-float-button--with-desc {
padding-top: 2px;
padding-bottom: 2px;
}
& .r-float-button__text {
white-space: nowrap;
align-items: center;
line-height: 1;
display: inline-flex;
}
& .r-float-button__desc {
font-size: var(--r-float-button-desc-font-size);
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
overflow: hidden;
}
}
.r-float-button-group {
--r-float-button-group-gap: 10px;
user-select: none;
box-sizing: border-box;
align-items: center;
gap: var(--r-float-button-group-gap);
display: inline-flex;
&.r-float-button-group--vertical {
flex-direction: column;
}
&.r-float-button-group--horizontal {
flex-direction: row;
}
&.r-float-button-group--attached {
--r-float-button-group-gap: 0px;
gap: 0;
}
&.r-float-button-group--attached.r-float-button-group--vertical > .r-float-button:not(:last-child) {
border-bottom-width: 0;
}
&.r-float-button-group--attached.r-float-button-group--vertical > .r-float-button:not(:first-child):not(:last-child) {
border-radius: 0;
}
&.r-float-button-group--attached.r-float-button-group--horizontal > .r-float-button:not(:last-child) {
border-right-width: 0;
}
&.r-float-button-group--attached.r-float-button-group--horizontal > .r-float-button:not(:first-child):not(:last-child) {
border-radius: 0;
}
&.r-float-button-group--attached.r-float-button-group--vertical.r-float-button-group--circle > .r-float-button:first-child:not(:last-child) {
border-radius: 9999px 9999px 0 0;
}
&.r-float-button-group--attached.r-float-button-group--vertical.r-float-button-group--circle > .r-float-button:last-child:not(:first-child) {
border-radius: 0 0 9999px 9999px;
}
&.r-float-button-group--attached.r-float-button-group--horizontal.r-float-button-group--circle > .r-float-button:first-child:not(:last-child) {
border-radius: 9999px 0 0 9999px;
}
&.r-float-button-group--attached.r-float-button-group--horizontal.r-float-button-group--circle > .r-float-button:last-child:not(:first-child) {
border-radius: 0 9999px 9999px 0;
}
&.r-float-button-group--attached.r-float-button-group--square:not(.r-float-button-group--elegant):not([data-theme="elegant"] *) > .r-float-button {
border-radius: 0;
}
&.r-float-button-group--attached.r-float-button-group--vertical.r-float-button-group--square.r-float-button-group--elegant > .r-float-button:first-child:not(:last-child), :where([data-theme="elegant"]) &.r-float-button-group--attached.r-float-button-group--vertical.r-float-button-group--square > .r-float-button:first-child:not(:last-child) {
border-radius: 6px 6px 0 0;
}
&.r-float-button-group--attached.r-float-button-group--vertical.r-float-button-group--square.r-float-button-group--elegant > .r-float-button:last-child:not(:first-child), :where([data-theme="elegant"]) &.r-float-button-group--attached.r-float-button-group--vertical.r-float-button-group--square > .r-float-button:last-child:not(:first-child) {
border-radius: 0 0 6px 6px;
}
&.r-float-button-group--attached.r-float-button-group--horizontal.r-float-button-group--square.r-float-button-group--elegant > .r-float-button:first-child:not(:last-child), :where([data-theme="elegant"]) &.r-float-button-group--attached.r-float-button-group--horizontal.r-float-button-group--square > .r-float-button:first-child:not(:last-child) {
border-radius: 6px 0 0 6px;
}
&.r-float-button-group--attached.r-float-button-group--horizontal.r-float-button-group--square.r-float-button-group--elegant > .r-float-button:last-child:not(:first-child), :where([data-theme="elegant"]) &.r-float-button-group--attached.r-float-button-group--horizontal.r-float-button-group--square > .r-float-button:last-child:not(:first-child) {
border-radius: 0 6px 6px 0;
}
}
.r-combobox-select {
min-width: 0;
position: relative;
}
.r-combobox-select__control {
box-sizing: border-box;
border: 1px solid var(--line-muted);
background: var(--layer-panel);
min-width: 0;
color: var(--foreground-strong);
box-shadow: 0 1px 1px color-mix(in oklch, var(--ink) 5%, transparent);
border-radius: .375rem;
outline: 0;
align-items: center;
gap: .5rem;
padding: .375rem .5rem;
transition: background-color .15s, border-color .15s, box-shadow .15s;
display: flex;
}
.r-combobox-select__control:focus-within {
box-shadow: 0 0 0 1px var(--primary-400);
}
.r-combobox-select__input {
box-sizing: border-box;
width: 100%;
min-width: 3rem;
color: inherit;
font: inherit;
background: none;
border: 0;
outline: 0;
flex: 1;
padding: 0;
}
.r-combobox-select__input::placeholder {
color: var(--foreground-placeholder);
}
.r-combobox-select__chips {
border: 0;
flex-wrap: wrap;
flex: 1;
align-items: center;
gap: .25rem;
min-width: 0;
min-height: 2.25rem;
padding: .25rem .5rem;
display: flex;
}
.r-combobox-select__chip {
background: var(--fill-muted);
max-width: 100%;
min-height: 1.5rem;
color: var(--foreground-strong);
border-radius: .25rem;
align-items: center;
gap: .25rem;
padding: .125rem .375rem .125rem .5rem;
font-size: .75rem;
line-height: 1.25rem;
display: inline-flex;
overflow: hidden;
}
.r-combobox-select__control:not(:focus-within) .r-combobox-select__chip[data-overflow] {
display: none;
}
.r-combobox-select__text {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.r-combobox-select__actions {
flex: none;
align-items: center;
gap: .125rem;
display: inline-flex;
}
.r-combobox-select__action, .r-combobox-select__remove {
width: 1.5rem;
height: 1.5rem;
color: inherit;
background: none;
border: 0;
outline: 0;
flex: none;
justify-content: center;
align-items: center;
padding: 0;
transition: color .15s, background-color .15s;
display: inline-flex;
}
.r-combobox-select__remove {
width: 1.125rem;
height: 1.125rem;
}
.r-combobox-select__action > svg, .r-combobox-select__remove > svg {
pointer-events: none;
width: .875rem;
height: .875rem;
}
.r-combobox-select__action:hover, .r-combobox-select__remove:hover {
background: var(--ink-4);
color: var(--foreground);
}
.r-combobox-select__positioner {
z-index: 50;
isolation: isolate;
outline: 0;
}
.r-combobox-select__popup {
box-sizing: border-box;
width: var(--anchor-width, max-content);
min-width: 13.75rem;
max-width: var(--available-width);
max-height: min(var(--available-height), 24rem);
background: var(--layer-popover);
color: var(--foreground-strong);
box-shadow: var(--theme-shadow-lg);
border: 0;
border-radius: .375rem;
outline: 0;
overflow: hidden;
}
.r-combobox-select__list {
overscroll-behavior: contain;
max-height: 16rem;
padding-block: .25rem;
scroll-padding-block: .25rem;
overflow-y: auto;
}
.r-combobox-select__option {
box-sizing: border-box;
cursor: default;
user-select: none;
width: 100%;
min-height: 2rem;
color: var(--foreground-muted);
outline: 0;
justify-content: space-between;
align-items: center;
gap: .5rem;
padding: .375rem .75rem;
font-size: .875rem;
line-height: 1.5rem;
transition: background-color .12s, color .12s;
display: flex;
overflow: hidden;
}
.r-combobox-select__option:hover, .r-combobox-select__option[data-highlighted] {
background: var(--ink-4);
color: var(--foreground);
}
.r-combobox-select__option[data-disabled] {
pointer-events: none;
color: var(--foreground-disabled);
}
.r-combobox-select__option > svg {
pointer-events: none;
flex: none;
width: .875rem;
height: .875rem;
}
.r-combobox-select__indicator {
flex: none;
justify-content: center;
align-items: center;
margin-inline-start: auto;
display: inline-flex;
}
.r-combobox-select__indicator > svg {
width: .875rem;
height: .875rem;
}
.r-combobox-select__group-label {
color: var(--foreground-strong);
padding: .5rem .75rem .25rem;
font-size: .6875rem;
font-weight: 600;
line-height: 1;
}
.r-combobox-select__message {
color: var(--foreground-muted);
text-align: center;
padding: 1rem .75rem;
font-size: .875rem;
line-height: 1.25rem;
}
.r-combobox-select__overflow {
color: var(--foreground-muted);
font-size: .75rem;
}
.r-combobox-select__spinner {
width: .875rem;
height: .875rem;
animation: .7s linear infinite r-combobox-select-spin;
}
.r-combobox-select--sm.r-combobox-select__control {
min-height: 1.75rem;
padding-block: .125rem;
font-size: .75rem;
}
.r-combobox-select--sm .r-combobox-select__chips {
min-height: 1.5rem;
padding-block: .125rem;
}
.r-combobox-select--lg.r-combobox-select__control {
padding-block: .625rem;
font-size: .9375rem;
}
.r-combobox-select__control[data-status="error"] {
border-color: var(--danger);
}
.r-combobox-select__control[data-status="warning"] {
border-color: var(--warning);
}
.r-combobox-select--brutal.r-combobox-select__control {
border: 2px solid var(--line-strong);
box-shadow: var(--theme-shadow-sm);
border-radius: 0;
font-weight: 600;
}
.r-combobox-select--brutal.r-combobox-select__popup {
border: 2px solid var(--line-strong);
box-shadow: var(--theme-shadow-lg);
border-radius: 0;
}
.r-combobox-select--brutal .r-combobox-select__option {
border-bottom: 1px solid var(--ink-10);
color: var(--foreground-strong);
font-weight: 600;
}
.r-combobox-select--brutal .r-combobox-select__option:hover, .r-combobox-select--brutal .r-combobox-select__option[data-highlighted] {
background: color-mix(in oklch, var(--color-brutal-yellow) 30%, transparent);
}
.r-combobox-select--brutal .r-combobox-select__option[data-disabled] {
color: var(--foreground-disabled);
cursor: not-allowed;
background: none;
}
.r-combobox-select--brutal .r-combobox-select__chip {
border: 1px solid var(--line-strong);
background: var(--color-brutal-yellow);
border-radius: 0;
font-weight: 700;
}
@keyframes r-combobox-select-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.r-combobox-select *, .r-combobox-select__positioner {
transition-duration: .01ms ;
animation-duration: .01ms ;
}
}