Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
},
},
});
const checkboxScale = style({
transform: 'scale(0.85)',
selectors: {
[`${realField}:active + * > ${fakeFieldBase} > * > &`]: {
transform: 'scale(0.75)',
},
},
});
export const checkboxIndicator = [indicator, checkboxScale];
const radioScale = style({
transform: 'scale(0.6)',
selectors: {
[`${realField}:active + * > ${fakeFieldBase} > * > &`]: {
transform: 'scale(0.5)',
},
},
});
export const radioIndicator = [indicator, radioScale];
selectors: {
[`${realField}:checked + * > ${fakeFieldBase} > &`]: {
opacity: 1,
},
},
});
export const focusOverlay = style({
selectors: {
[`${realField}:focus + * > ${fakeFieldBase} > &`]: {
opacity: 1,
},
},
});
export const hoverOverlay = style({
selectors: {
[`${realField}:hover:not(:checked):not(:disabled) + * > ${fakeFieldBase} > &`]: {
opacity: 1,
},
},
});
export const indicator = style({
selectors: {
[`${hoverOverlay} > &`]: {
opacity: 0.2,
},
},
});
const checkboxScale = style({
import { style, styleMap } from 'sku/treat';
import * as zIndex from '../private/zIndex';
export const zIndexContainer = style({
zIndex: zIndex.pageOverlay,
});
export const cancelButton = style({
top: 0,
right: 0,
});
export const backdrop = style({
top: 0,
left: 0,
width: '100vw',
height: '100vh',
zIndex: zIndex.backdrop,
background: 'black',
});
export const backdropVisibility = styleMap({
hidden: { opacity: 0 },
visible: { opacity: 0.7 },
[`${isOpen} &`]: {
transform: 'translateY(11px) rotate(45deg)',
},
},
});
export const bar2 = style({
top: '11px',
selectors: {
[`${isOpen} &`]: {
opacity: 0,
},
},
});
export const bar3 = style({
top: '22px',
selectors: {
[`${isOpen} &`]: {
transform: 'translateY(-11px) rotate(-45deg)',
},
},
});
opacity: 1,
},
},
});
export const content = style({
overflow: 'hidden',
textOverflow: 'ellipsis',
userSelect: 'none',
whiteSpace: 'nowrap',
});
export const loading = style({
verticalAlign: 'top',
});
export const ellipsis = style({
width: 0,
overflowX: 'hidden',
animationDuration: '1s',
animationIterationCount: 'infinite',
'@keyframes': {
to: {
width: 20,
},
},
});
export const visibilityHidden = style({
visibility: 'hidden',
});
import { style } from 'sku/treat';
export const code = style({
background: '#010d19',
overflowX: 'auto',
borderBottomLeftRadius: '0 !important',
borderBottomRightRadius: '0 !important',
});
export const toolbar = style({
borderTopLeftRadius: '0 !important',
borderTopRightRadius: '0 !important',
});
export const button = style({
outline: 'none',
});
export const activeOverlay = [
selectors: {
[`${realField}:hover:not(:checked):not(:disabled) + * > ${fakeFieldBase} > &`]: {
opacity: 1,
},
},
});
export const indicator = style({
selectors: {
[`${hoverOverlay} > &`]: {
opacity: 0.2,
},
},
});
const checkboxScale = style({
transform: 'scale(0.85)',
selectors: {
[`${realField}:active + * > ${fakeFieldBase} > * > &`]: {
transform: 'scale(0.75)',
},
},
});
export const checkboxIndicator = [indicator, checkboxScale];
const radioScale = style({
transform: 'scale(0.6)',
selectors: {
[`${realField}:active + * > ${fakeFieldBase} > * > &`]: {
transform: 'scale(0.5)',
},
import { style } from 'sku/treat';
export const root = style({
transition: 'transform 0.3s ease',
transformOrigin: '50% 50%',
});
export const left = style({
transform: 'rotate(90deg)',
});
export const up = style({
transform: 'rotate(180deg)',
});
export const right = style({
transform: 'rotate(270deg)',
});
export const icon = style({
top: 0,
left: 0,
});
export const clearButton = style({
top: 0,
right: 0,
});
export const clearButtonVisibility = styleMap({
hidden: { opacity: 0 },
visible: { opacity: 100 },
});
export const focusOverlay = style({
selectors: {
[`${field}:focus ~ &`]: {
opacity: 1,
},
},
});
export const hoverOverlay = style({
selectors: {
[`${field}:hover:not(:disabled) ~ &`]: {
opacity: 1,
},
},
});
const wave = {
'0%, 100%': {
transform: 'rotate(0)',
},
'20%, 60%': {
transform: 'rotate(-25deg)',
},
'40%, 80%': {
transform: 'rotate(10deg)',
},
};
export const root = style({});
export const octoArm = style({
transformOrigin: '130px 106px',
selectors: {
[`${root}:hover &`]: {
'@keyframes': wave,
animationDuration: '560ms',
animationTimingFunction: 'ease-in-out',
},
},
});