184 lines
3.6 KiB
CSS
184 lines
3.6 KiB
CSS
/**
|
|
* Module: Utility classes for style features.
|
|
*/
|
|
|
|
@utility font-main {
|
|
font-family: var(--font-main);
|
|
}
|
|
|
|
@utility font-controls {
|
|
font-family: var(--font-ui);
|
|
font-weight: 700;
|
|
}
|
|
|
|
@utility font-math {
|
|
font-family: var(--font-math);
|
|
}
|
|
|
|
@utility cc-selected {
|
|
color: var(--color-selected-foreground);
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
@utility cc-hover {
|
|
&:hover:not(:disabled) {
|
|
color: var(--color-accent-foreground);
|
|
background-color: var(--color-accent);
|
|
}
|
|
}
|
|
|
|
@utility focus-outline {
|
|
--focus-color: var(--color-ring);
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--focus-color);
|
|
border-color: var(--focus-color);
|
|
}
|
|
|
|
&[aria-invalid='true'] {
|
|
--focus-color: var(--color-destructive);
|
|
}
|
|
}
|
|
|
|
@utility focus-frame {
|
|
--focus-color: var(--color-ring);
|
|
|
|
&:focus-visible,
|
|
&:has(:focus-visible) {
|
|
outline: 2px solid var(--focus-color);
|
|
border-color: var(--focus-color);
|
|
}
|
|
|
|
&[aria-invalid='true'] {
|
|
--focus-color: var(--color-destructive);
|
|
}
|
|
}
|
|
|
|
@utility cc-controls {
|
|
color: var(--color-muted-foreground);
|
|
background-color: transparent;
|
|
|
|
&:disabled {
|
|
color: var(--color-muted-foreground);
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
@utility cc-remove {
|
|
color: var(--color-muted-foreground);
|
|
|
|
&:hover:not(:disabled) {
|
|
color: var(--color-destructive);
|
|
}
|
|
}
|
|
|
|
@utility icon-primary {
|
|
:not([disabled]) > & {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
@utility icon-red {
|
|
:not([disabled]) > & {
|
|
color: var(--color-destructive);
|
|
}
|
|
}
|
|
|
|
@utility icon-green {
|
|
:not([disabled]) > & {
|
|
color: var(--color-constructive);
|
|
}
|
|
}
|
|
|
|
@utility inline-icon {
|
|
display: inline-block;
|
|
|
|
margin-left: 0.1rem;
|
|
margin-right: 0.1rem;
|
|
transform: translate(0, -0.2rem);
|
|
|
|
font-size: 1.25rem;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
@utility cc-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
@utility cc-icons {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
@utility cc-scroll-row {
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
}
|
|
|
|
@utility cc-scroll-y {
|
|
overflow-y: auto;
|
|
overscroll-behavior-y: contain;
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
|
|
@utility cc-shadow-border {
|
|
box-shadow: 0 1px 2px 0 var(--color-border);
|
|
}
|
|
|
|
@utility cc-fade-in {
|
|
opacity: 1;
|
|
|
|
transition-property: opacity;
|
|
transition-timing-function: var(--ease-bezier);
|
|
transition-duration: var(--duration-fade);
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@utility cc-animate-position {
|
|
transition-property: transform top left bottom right margin padding;
|
|
transition-timing-function: var(--ease-bezier);
|
|
transition-duration: var(--duration-move);
|
|
}
|
|
|
|
@utility cc-animate-modal {
|
|
clip-path: inset(0% 0% 0% 0%);
|
|
opacity: 1;
|
|
|
|
transition-property: clip-path, opacity;
|
|
transition-timing-function: var(--ease-bezier);
|
|
transition-duration: var(--duration-modal);
|
|
|
|
@starting-style {
|
|
clip-path: inset(50% 50% 50% 50%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@utility cc-animate-color {
|
|
transition-property: color, background-color;
|
|
transition-timing-function: var(--ease-bezier);
|
|
transition-duration: var(--duration-select);
|
|
}
|
|
|
|
@utility cc-animate-background {
|
|
transition-property: background-color;
|
|
transition-timing-function: var(--ease-bezier);
|
|
transition-duration: var(--duration-select);
|
|
}
|
|
|
|
@utility cc-mask-sides {
|
|
--mask-border-size: 2rem;
|
|
|
|
mask-image: linear-gradient(to top, transparent, black calc(var(--mask-border-size))),
|
|
linear-gradient(to bottom, transparent, black calc(var(--mask-border-size))),
|
|
linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
|
|
linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
|
|
|
|
mask-composite: intersect;
|
|
}
|