UNPKG

@chakra-ui/react

Version:

Responsive and accessible React UI components built with React and Emotion

263 lines (262 loc) • 8.92 kB
export interface Conditions { /** `@media (hover: hover),&:is(:hover, [data-hover]):not(:disabled, [data-disabled])` */ _hover: string /** `&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])` */ _active: string /** `&:is(:focus, [data-focus])` */ _focus: string /** `&:is(:focus-within, [data-focus-within])` */ _focusWithin: string /** `&:is(:focus-visible, [data-focus-visible])` */ _focusVisible: string /** `&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])` */ _disabled: string /** `&:visited` */ _visited: string /** `&:target` */ _target: string /** `&:is([data-readonly], [aria-readonly=true], [readonly])` */ _readOnly: string /** `&:read-write` */ _readWrite: string /** `&:is(:empty, [data-empty])` */ _empty: string /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])` */ _checked: string /** `&:enabled` */ _enabled: string /** `&:is([aria-expanded=true], [data-expanded], [data-state=expanded])` */ _expanded: string /** `&[data-highlighted]` */ _highlighted: string /** `&[data-complete]` */ _complete: string /** `&[data-incomplete]` */ _incomplete: string /** `&[data-dragging]` */ _dragging: string /** `&::before` */ _before: string /** `&::after` */ _after: string /** `&::first-letter` */ _firstLetter: string /** `&::first-line` */ _firstLine: string /** `&::marker` */ _marker: string /** `&::selection` */ _selection: string /** `&::file-selector-button` */ _file: string /** `&::backdrop` */ _backdrop: string /** `&:first-of-type` */ _first: string /** `&:last-of-type` */ _last: string /** `&:not(:first-of-type)` */ _notFirst: string /** `&:not(:last-of-type)` */ _notLast: string /** `&:only-child` */ _only: string /** `&:nth-of-type(even)` */ _even: string /** `&:nth-of-type(odd)` */ _odd: string /** `.peer:is(:focus, [data-focus]) ~ &` */ _peerFocus: string /** `.peer:is(:hover, [data-hover]):not(:disabled, [data-disabled]) ~ &` */ _peerHover: string /** `.peer:is(:active, [data-active]):not(:disabled, [data-disabled]) ~ &` */ _peerActive: string /** `.peer:focus-within ~ &` */ _peerFocusWithin: string /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ _peerFocusVisible: string /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ _peerDisabled: string /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) ~ &` */ _peerChecked: string /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ _peerInvalid: string /** `.peer:is([aria-expanded=true], [data-expanded], [data-state=expanded]) ~ &` */ _peerExpanded: string /** `.peer:placeholder-shown ~ &` */ _peerPlaceholderShown: string /** `.group:is(:focus, [data-focus]) &` */ _groupFocus: string /** `.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &` */ _groupHover: string /** `.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &` */ _groupActive: string /** `.group:focus-within &` */ _groupFocusWithin: string /** `.group:is(:focus-visible, [data-focus-visible]) &` */ _groupFocusVisible: string /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ _groupDisabled: string /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &` */ _groupChecked: string /** `.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &` */ _groupExpanded: string /** `.group:invalid &` */ _groupInvalid: string /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])` */ _indeterminate: string /** `&:is([data-required], [aria-required=true])` */ _required: string /** `&:is([data-valid], [data-state=valid])` */ _valid: string /** `&:is([data-invalid], [aria-invalid=true], [data-state=invalid])` */ _invalid: string /** `&:autofill` */ _autofill: string /** `&:is(:in-range, [data-in-range])` */ _inRange: string /** `&:is(:out-of-range, [data-outside-range])` */ _outOfRange: string /** `&::placeholder, &[data-placeholder]` */ _placeholder: string /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ _placeholderShown: string /** `&:is([aria-pressed=true], [data-pressed])` */ _pressed: string /** `&:is([aria-selected=true], [data-selected])` */ _selected: string /** `&:is([aria-grabbed=true], [data-grabbed])` */ _grabbed: string /** `&[data-state=under-value]` */ _underValue: string /** `&[data-state=over-value]` */ _overValue: string /** `&[data-state=at-value]` */ _atValue: string /** `&:default` */ _default: string /** `&:optional` */ _optional: string /** `&:is([open], [data-open], [data-state=open])` */ _open: string /** `&:is([closed], [data-closed], [data-state=closed])` */ _closed: string /** `&is(:fullscreen, [data-fullscreen])` */ _fullscreen: string /** `&:is([data-loading], [aria-busy=true])` */ _loading: string /** `&:is([hidden], [data-hidden])` */ _hidden: string /** `&[data-current]` */ _current: string /** `&[aria-current=page]` */ _currentPage: string /** `&[aria-current=step]` */ _currentStep: string /** `&[data-today]` */ _today: string /** `&[data-unavailable]` */ _unavailable: string /** `&[data-range-start]` */ _rangeStart: string /** `&[data-range-end]` */ _rangeEnd: string /** `&[data-now]` */ _now: string /** `&[data-topmost]` */ _topmost: string /** `@media (prefers-reduced-motion: reduce)` */ _motionReduce: string /** `@media (prefers-reduced-motion: no-preference)` */ _motionSafe: string /** `@media print` */ _print: string /** `@media (orientation: landscape)` */ _landscape: string /** `@media (orientation: portrait)` */ _portrait: string /** `.dark &, .dark .chakra-theme:not(.light) &` */ _dark: string /** `:root &, .light &` */ _light: string /** `@media (prefers-color-scheme: dark)` */ _osDark: string /** `@media (prefers-color-scheme: light)` */ _osLight: string /** `@media (forced-colors: active)` */ _highContrast: string /** `@media (prefers-contrast: less)` */ _lessContrast: string /** `@media (prefers-contrast: more)` */ _moreContrast: string /** `[dir=ltr] &` */ _ltr: string /** `[dir=rtl] &` */ _rtl: string /** `&::-webkit-scrollbar` */ _scrollbar: string /** `&::-webkit-scrollbar-thumb` */ _scrollbarThumb: string /** `&::-webkit-scrollbar-track` */ _scrollbarTrack: string /** `&[data-orientation=horizontal]` */ _horizontal: string /** `&[data-orientation=vertical]` */ _vertical: string /** `& :where(svg)` */ _icon: string /** `@starting-style` */ _starting: string /** `@media screen and (min-width: 30rem)` */ sm: string /** `@media screen and (min-width: 30rem) and (max-width: 47.9975rem)` */ smOnly: string /** `@media screen and (max-width: 29.9975rem)` */ smDown: string /** `@media screen and (min-width: 48rem)` */ md: string /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ mdOnly: string /** `@media screen and (max-width: 47.9975rem)` */ mdDown: string /** `@media screen and (min-width: 64rem)` */ lg: string /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ lgOnly: string /** `@media screen and (max-width: 63.9975rem)` */ lgDown: string /** `@media screen and (min-width: 80rem)` */ xl: string /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ xlOnly: string /** `@media screen and (max-width: 79.9975rem)` */ xlDown: string /** `@media screen and (min-width: 96rem)` */ "2xl": string /** `@media screen and (min-width: 96rem)` */ "2xlOnly": string /** `@media screen and (max-width: 95.9975rem)` */ "2xlDown": string /** `@media screen and (min-width: 30rem) and (max-width: 47.9975rem)` */ smToMd: string /** `@media screen and (min-width: 30rem) and (max-width: 63.9975rem)` */ smToLg: string /** `@media screen and (min-width: 30rem) and (max-width: 79.9975rem)` */ smToXl: string /** `@media screen and (min-width: 30rem) and (max-width: 95.9975rem)` */ smTo2xl: string /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ mdToLg: string /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ mdToXl: string /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ mdTo2xl: string /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ lgToXl: string /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ lgTo2xl: string /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ xlTo2xl: string /** The base (=no conditions) styles to apply */ base: string }