diff options
Diffstat (limited to 'packages/instant/src/components')
10 files changed, 23 insertions, 47 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx index 9adb565f9..1dff1b1fc 100644 --- a/packages/instant/src/components/animations/full_rotation.tsx +++ b/packages/instant/src/components/animations/full_rotation.tsx @@ -14,10 +14,7 @@ to { } `; -export const FullRotation = - styled.div < - FullRotationProps > - ` +export const FullRotation = styled.div<FullRotationProps>` animation: ${rotatingKeyframes} 2s linear infinite; height: ${props => props.height}; width: ${props => props.width}; diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index 8b3b294b7..4f8f25679 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -95,10 +95,7 @@ const animationForSize = ( return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`; }; -export const PositionAnimation = - styled.div < - PositionAnimationProps > - ` +export const PositionAnimation = styled.div<PositionAnimationProps>` && { ${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)} ${props => defaultAnimation(props.positionSettings)} diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx index 0bef85389..d1b20f4c9 100644 --- a/packages/instant/src/components/css_reset.tsx +++ b/packages/instant/src/components/css_reset.tsx @@ -4,9 +4,9 @@ import { createGlobalStyle } from '../style/theme'; export interface CSSResetProps {} /* -* Derived from -* https://github.com/jtrost/Complete-CSS-Reset -*/ + * Derived from + * https://github.com/jtrost/Complete-CSS-Reset + */ export const CSSReset = createGlobalStyle` .${INJECTED_DIV_CLASS} { a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx index b1644b871..287269af7 100644 --- a/packages/instant/src/components/timed_progress_bar.tsx +++ b/packages/instant/src/components/timed_progress_bar.tsx @@ -68,10 +68,7 @@ interface ProgressProps { animationSettings?: WidthAnimationSettings; } -export const Progress = - styled.div < - ProgressProps > - ` +export const Progress = styled.div<ProgressProps>` && { background-color: ${props => props.theme[ColorOption.primaryColor]}; border-radius: 6px; diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx index 4f9f56f12..e4f2c5260 100644 --- a/packages/instant/src/components/ui/circle.tsx +++ b/packages/instant/src/components/ui/circle.tsx @@ -8,16 +8,15 @@ export interface CircleProps { } export const Circle = withTheme( - styled.div < - CircleProps > - ` - && { - width: ${props => props.diameter}px; - height: ${props => props.diameter}px; - background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])}; - border-radius: 50%; - } -`, + styled.div<CircleProps>` + && { + width: ${props => props.diameter}px; + height: ${props => props.diameter}px; + background-color: ${props => + props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white]}; + border-radius: 50%; + } + `, ); Circle.displayName = 'Circle'; diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 58d7d5871..59b733f3e 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -51,10 +51,7 @@ const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgr return 'none'; }; -export const Container = - styled.div < - ContainerProps > - ` +export const Container = styled.div<ContainerProps>` && { box-sizing: border-box; ${props => cssRuleIfExists(props, 'flex-grow')} diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 274c46b9e..145e654f1 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -14,10 +14,7 @@ export interface FlexProps { flexGrow?: number | string; } -export const Flex = - styled.div < - FlexProps > - ` +export const Flex = styled.div<FlexProps>` && { display: ${props => (props.inline ? 'inline-flex' : 'flex')}; flex-direction: ${props => props.direction}; diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx index 53c43ea0b..024e81b15 100644 --- a/packages/instant/src/components/ui/input.tsx +++ b/packages/instant/src/components/ui/input.tsx @@ -14,10 +14,7 @@ export interface InputProps extends React.HTMLAttributes<HTMLInputElement> { onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; } -export const Input = - styled.input < - InputProps > - ` +export const Input = styled.input<InputProps>` && { all: initial; font-size: ${props => props.fontSize}; @@ -32,10 +29,11 @@ export const Input = color: ${props => props.theme[props.fontColor || 'white']} !important; opacity: 0.5 !important; } - &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; - } + } } `; diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 0b5eaf299..0b1be6a65 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -12,10 +12,7 @@ export interface OverlayProps { showMaxWidth?: ScreenWidths; } -export const Overlay = - styled.div < - OverlayProps > - ` +export const Overlay = styled.div<OverlayProps>` && { position: fixed; top: 0; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index 282477758..ca120f3bd 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -31,10 +31,7 @@ export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...re }; const opacityOnHoverAmount = 0.5; -export const StyledText = - styled.div < - TextProps > - ` +export const StyledText = styled.div<TextProps>` && { font-family: 'Inter UI', sans-serif; font-style: ${props => props.fontStyle}; |