B: Fix tailwind and other minor bug
This commit is contained in:
Ivan
parent
39006a70bc
commit
ea0c4565bf
|
|
@ -29,8 +29,9 @@ export function NavigationButton({
|
|||
data-tooltip-hidden={hideTitle}
|
||||
onClick={onClick}
|
||||
className={clsx(
|
||||
'mr-1 h-full', //
|
||||
'mr-1 h-full',
|
||||
'flex items-center gap-1',
|
||||
'cursor-pointer',
|
||||
'clr-btn-nav cc-animate-color duration-500',
|
||||
'rounded-xl',
|
||||
'font-controls whitespace-nowrap',
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@ export function SearchBar({
|
|||
noOutline
|
||||
placeholder={placeholder}
|
||||
type='search'
|
||||
className={clsx('outline-hidden bg-transparent', !noIcon && 'pl-10')}
|
||||
colors='bg-transparent'
|
||||
className={clsx(!noIcon && 'pl-10')}
|
||||
noBorder={noBorder}
|
||||
value={query}
|
||||
onChange={event => onChangeQuery?.(event.target.value)}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export function MenuOssTabs() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='flex'>
|
||||
<div className='flex border-r-2'>
|
||||
<div ref={schemaMenu.ref}>
|
||||
<Button
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -73,10 +73,10 @@ export function PickConstituenta({
|
|||
];
|
||||
|
||||
return (
|
||||
<div className={clsx('border divide-y', className)} {...restProps}>
|
||||
<div className={clsx('border', className)} {...restProps}>
|
||||
<SearchBar
|
||||
id={id ? `${id}__search` : undefined}
|
||||
className='clr-input rounded-t-md'
|
||||
className='clr-input border-b rounded-t-md'
|
||||
noBorder
|
||||
query={filterText}
|
||||
onChangeQuery={newValue => setFilterText(newValue)}
|
||||
|
|
|
|||
|
|
@ -58,9 +58,19 @@ export function PickSubstitutions({
|
|||
const [rightArgument, setRightArgument] = useState<ILibraryItem | null>(
|
||||
schemas.length === 1 && allowSelfSubstitution ? schemas[0] : null
|
||||
);
|
||||
const leftItems = !leftArgument
|
||||
? []
|
||||
: (leftArgument as IRSForm).items.filter(
|
||||
cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
|
||||
);
|
||||
|
||||
const [leftCst, setLeftCst] = useState<IConstituenta | null>(null);
|
||||
const [rightCst, setRightCst] = useState<IConstituenta | null>(null);
|
||||
const rightItems = !rightArgument
|
||||
? []
|
||||
: (rightArgument as IRSForm).items.filter(
|
||||
cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
|
||||
);
|
||||
|
||||
const [deleteRight, setDeleteRight] = useState(true);
|
||||
const toggleDelete = () => setDeleteRight(prev => !prev);
|
||||
|
|
@ -228,14 +238,7 @@ export function PickSubstitutions({
|
|||
value={leftArgument}
|
||||
onChange={setLeftArgument}
|
||||
/>
|
||||
<SelectConstituenta
|
||||
noBorder
|
||||
items={(leftArgument as IRSForm)?.items.filter(
|
||||
cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
|
||||
)}
|
||||
value={leftCst}
|
||||
onChange={setLeftCst}
|
||||
/>
|
||||
<SelectConstituenta noBorder items={leftItems} value={leftCst} onChange={setLeftCst} />
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<MiniButton
|
||||
|
|
@ -266,14 +269,7 @@ export function PickSubstitutions({
|
|||
value={rightArgument}
|
||||
onChange={setRightArgument}
|
||||
/>
|
||||
<SelectConstituenta
|
||||
noBorder
|
||||
items={(rightArgument as IRSForm)?.items.filter(
|
||||
cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
|
||||
)}
|
||||
value={rightCst}
|
||||
onChange={setRightCst}
|
||||
/>
|
||||
<SelectConstituenta noBorder items={rightItems} value={rightCst} onChange={setRightCst} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import { Grammeme } from '../models/language';
|
||||
import { type Grammeme } from '../models/language';
|
||||
|
||||
interface WordformButtonProps {
|
||||
text: string;
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ export function TabArguments() {
|
|||
noTooltip
|
||||
id='result'
|
||||
placeholder='Итоговое определение'
|
||||
className='mt-[1.2rem]'
|
||||
className='mt-[1.1rem]'
|
||||
height='5.1rem'
|
||||
value={definition}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export function TabSubstitutions() {
|
|||
allowSelfSubstitution={selfSubstitution}
|
||||
rows={10}
|
||||
schemas={selfSubstitution ? [source] : [source, receiver]}
|
||||
filterCst={selected.length === 0 ? undefined : cst => selected.includes(cst.id)}
|
||||
filterCst={selected.length === 0 ? undefined : cst => cst.schema !== source.id || selected.includes(cst.id)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export function ToolbarConstituenta({
|
|||
|
||||
return (
|
||||
<Overlay
|
||||
position='cc-tab-tools right-1/2 translate-x-1/2 xs:right-4 xs:translate-x-0 md:right-1/2 md:translate-x-1/2'
|
||||
position='cc-tab-tools right-1/2 translate-x-0 xs:right-4 xs:-translate-x-1/2 md:right-1/2 md:translate-x-0'
|
||||
className='cc-icons cc-animate-position outline-hidden cc-blur px-1 rounded-b-2xl'
|
||||
>
|
||||
{schema.oss.length > 0 ? (
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export function ToolbarRSList() {
|
|||
|
||||
return (
|
||||
<Overlay
|
||||
position='cc-tab-tools right-4 translate-x-0 md:right-1/2 md:translate-x-1/2'
|
||||
position='cc-tab-tools right-4 md:right-1/2 -translate-x-1/2 md:translate-x-0'
|
||||
className='cc-icons cc-animate-position items-start outline-hidden'
|
||||
>
|
||||
{schema.oss.length > 0 ? (
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ export function MenuRSTabs() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='flex'>
|
||||
<div className='flex border-r-2'>
|
||||
<div ref={schemaMenu.ref}>
|
||||
<Button
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
@import 'tailwindcss';
|
||||
|
||||
@import './styling/setup.css';
|
||||
@import './styling/setup.utilities.css';
|
||||
@import './styling/overrides.css';
|
||||
@import './styling/styles.css';
|
||||
@import './styling/styles.utilities.css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
|
|
|
|||
|
|
@ -4,21 +4,13 @@
|
|||
|
||||
@import './constants.css' layer(base);
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
border-color: var(--clr-prim-400);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,3 +156,11 @@
|
|||
content: '–\2009';
|
||||
}
|
||||
}
|
||||
|
||||
@utility border {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
@utility sticky {
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
@utility border {
|
||||
border-radius: 0.25rem;
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-x {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-y {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-b {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-t {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-l {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-r {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-x-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-y-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-b-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-t-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-l-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility border-r-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility divide-x {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility divide-y {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility divide-x-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility divide-y-2 {
|
||||
border-color: var(--clr-prim-400);
|
||||
& > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@utility sticky {
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -1,22 +1,232 @@
|
|||
/**
|
||||
* Module: Custom styling.
|
||||
*/
|
||||
@import './constants.css' layer(base);
|
||||
@utility font-main {
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
@utility font-controls {
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
@utility font-math {
|
||||
font-family: var(--font-math);
|
||||
}
|
||||
|
||||
@utility clr-input {
|
||||
background-color: var(--clr-prim-0);
|
||||
&:disabled {
|
||||
background-color: var(--clr-prim-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-selected {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-200);
|
||||
}
|
||||
|
||||
@utility clr-btn-default {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-prim-200);
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: var(--clr-prim-200);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-btn-primary {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-200);
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: var(--clr-prim-200);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:focus-visible {
|
||||
color: var(--clr-sec-0);
|
||||
background-color: var(--clr-sec-600);
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
.focus-frame:has(:focus-visible) {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-btn-nav {
|
||||
color: var(--clr-prim-800);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-hover {
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-outline {
|
||||
:is(&, .focus-frame):focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility focus-frame {
|
||||
:is(.clr-outline, &):focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
|
||||
&:has(:focus-visible) {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-text-default {
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: var(--clr-prim-999);
|
||||
color: var(--clr-prim-999);
|
||||
}
|
||||
|
||||
@utility clr-text-controls {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: transparent;
|
||||
&:disabled {
|
||||
color: var(--clr-prim-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility icon-primary {
|
||||
:not([disabled]) > & {
|
||||
color: var(--clr-sec-800);
|
||||
}
|
||||
}
|
||||
|
||||
@utility icon-red {
|
||||
:not([disabled]) > & {
|
||||
color: var(--clr-warn-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility icon-green {
|
||||
:not([disabled]) > & {
|
||||
color: var(--clr-ok-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility inline-icon {
|
||||
display: inline-block;
|
||||
font-size: 1.25rem;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
transform: translate(0, -0.2rem);
|
||||
color: var(--clr-sec-800);
|
||||
}
|
||||
|
||||
@utility cc-tab-tools {
|
||||
top: 1.7rem;
|
||||
right: 50%;
|
||||
padding-top: 0.4rem;
|
||||
transform: translate(50%, 0%);
|
||||
}
|
||||
|
||||
@utility cc-label {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
user-select: text;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@utility cc-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@utility cc-icons {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
@utility cc-fit-content {
|
||||
field-sizing: content;
|
||||
}
|
||||
|
||||
@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-blur {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
@utility cc-shadow-border {
|
||||
box-shadow: 0 1px 2px 0 var(--clr-prim-400);
|
||||
}
|
||||
|
||||
@utility cc-fade-in {
|
||||
opacity: 1;
|
||||
|
||||
transition-property: opacity;
|
||||
transition-timing-function: var(--transition-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(--transition-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(--transition-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(--transition-bezier);
|
||||
transition-duration: var(--duration-select);
|
||||
}
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
@utility font-main {
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
@utility font-controls {
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@utility font-math {
|
||||
font-family: var(--font-math);
|
||||
}
|
||||
|
||||
@utility clr-input {
|
||||
background-color: var(--clr-prim-0);
|
||||
&:disabled {
|
||||
background-color: var(--clr-prim-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-selected {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-200);
|
||||
}
|
||||
|
||||
@utility clr-btn-default {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-prim-200);
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: var(--clr-prim-200);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-btn-primary {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-200);
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: var(--clr-prim-200);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:focus-visible {
|
||||
color: var(--clr-sec-0);
|
||||
background-color: var(--clr-sec-600);
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
.focus-frame:has(:focus-visible) {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-btn-nav {
|
||||
color: var(--clr-prim-800);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-hover {
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--clr-prim-999);
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-outline {
|
||||
:is(&, .focus-frame):focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility focus-frame {
|
||||
:is(.clr-outline, &):focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
|
||||
&:has(:focus-visible) {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-text-default {
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: var(--clr-prim-999);
|
||||
color: var(--clr-prim-999);
|
||||
}
|
||||
|
||||
@utility clr-text-controls {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: transparent;
|
||||
&:disabled {
|
||||
color: var(--clr-prim-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility icon-primary {
|
||||
:not([disabled]) > & {
|
||||
color: var(--clr-sec-800);
|
||||
}
|
||||
}
|
||||
|
||||
@utility icon-red {
|
||||
:not([disabled]) > & {
|
||||
color: var(--clr-warn-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility icon-green {
|
||||
:not([disabled]) > & {
|
||||
color: var(--clr-ok-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility inline-icon {
|
||||
display: inline-block;
|
||||
font-size: 1.25rem;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
transform: translate(0, -0.2rem);
|
||||
color: var(--clr-sec-800);
|
||||
}
|
||||
|
||||
@utility cc-tab-tools {
|
||||
top: 1.7rem;
|
||||
right: 50%;
|
||||
padding-top: 0.4rem;
|
||||
transform: translate(50%, 0%);
|
||||
}
|
||||
|
||||
@utility cc-label {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
user-select: text;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@utility cc-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@utility cc-icons {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
@utility cc-fit-content {
|
||||
field-sizing: content;
|
||||
}
|
||||
|
||||
@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-blur {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
@utility cc-shadow-border {
|
||||
box-shadow: 0 1px 2px 0 var(--clr-prim-400);
|
||||
}
|
||||
|
||||
@utility cc-fade-in {
|
||||
opacity: 1;
|
||||
|
||||
transition-property: opacity;
|
||||
transition-timing-function: var(--transition-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(--transition-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(--transition-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(--transition-bezier);
|
||||
transition-duration: var(--duration-select);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user