diff options
author | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
---|---|---|
committer | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
commit | 7ae38906926dc09bc10670c361af0d2bf0050426 (patch) | |
tree | 5fb10ae366b987db09e4ddb4bc3ba0f75404ad08 /packages/instant/src/style | |
parent | b5fd3c72a08aaa6957917d74c333387a16edf66b (diff) | |
download | dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.gz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.zst dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.zip |
Update dependency packages
Diffstat (limited to 'packages/instant/src/style')
-rw-r--r-- | packages/instant/src/style/fonts.ts | 10 | ||||
-rw-r--r-- | packages/instant/src/style/media.ts | 51 | ||||
-rw-r--r-- | packages/instant/src/style/theme.ts | 56 | ||||
-rw-r--r-- | packages/instant/src/style/util.ts | 11 | ||||
-rw-r--r-- | packages/instant/src/style/z_index.ts | 9 |
5 files changed, 0 insertions, 137 deletions
diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts deleted file mode 100644 index 92450502d..000000000 --- a/packages/instant/src/style/fonts.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const fonts = { - include: () => { - // Inject the inter-ui font into the page - const appendTo = document.head || document.getElementsByTagName('head')[0] || document.body; - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`)); - appendTo.appendChild(style); - }, -}; diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts deleted file mode 100644 index bbf376694..000000000 --- a/packages/instant/src/style/media.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { InterpolationValue } from 'styled-components'; - -import { css } from './theme'; - -export enum ScreenWidths { - Sm = 40, - Md = 52, - Lg = 64, -} - -export const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css` - @media (max-width: ${screenWidth}em) { - ${css.apply(css, args)}; - } -`; - -export const media = { - small: generateMediaWrapper(ScreenWidths.Sm), - medium: generateMediaWrapper(ScreenWidths.Md), - large: generateMediaWrapper(ScreenWidths.Lg), -}; - -export interface ScreenSpecification<T> { - default: T; - sm?: T; - md?: T; - lg?: T; -} -export type OptionallyScreenSpecific<T> = T | ScreenSpecification<T>; -export type MediaChoice = OptionallyScreenSpecific<string>; -/** - * Given a css property name and a OptionallyScreenSpecific value, - * generates css properties with screen-specific viewport styling - */ -export function stylesForMedia<T extends string | number>( - cssPropertyName: string, - choice: OptionallyScreenSpecific<T>, -): InterpolationValue[] { - if (typeof choice === 'object') { - return css` - ${cssPropertyName}: ${choice.default}; - ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} - ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} - ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} - `; - } else { - return css` - ${cssPropertyName}: ${choice}; - `; - } -} diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts deleted file mode 100644 index 49f3c81e6..000000000 --- a/packages/instant/src/style/theme.ts +++ /dev/null @@ -1,56 +0,0 @@ -import * as styledComponents from 'styled-components'; - -const { - default: styled, - css, - keyframes, - withTheme, - createGlobalStyle, - ThemeConsumer, - ThemeProvider, -} = styledComponents; - -export type Theme = { [key in ColorOption]: string }; -// tslint:disable:enum-naming -export enum ColorOption { - primaryColor = 'primaryColor', - black = 'black', - lightGrey = 'lightGrey', - grey = 'grey', - feintGrey = 'feintGrey', - lightestGrey = 'lightestGrey', - darkGrey = 'darkGrey', - white = 'white', - lightOrange = 'lightOrange', - darkOrange = 'darkOrange', - green = 'green', - red = 'red', - darkBlue = 'darkBlue', - lightBlue = 'lightBlue', -} - -export const theme: Theme = { - primaryColor: '#333', - black: 'black', - lightGrey: '#999999', - grey: '#666666', - feintGrey: '#DEDEDE', - lightestGrey: '#EEEEEE', - darkGrey: '#333333', - white: 'white', - lightOrange: '#FFF8F2', - darkOrange: '#F7A24F', - green: '#3CB34F', - red: '#D00000', - darkBlue: '#135df6', - lightBlue: '#F2F7FF', -}; - -export const transparentWhite = 'rgba(255,255,255,0.3)'; -export const completelyTransparent = 'rga(0, 0, 0, 0)'; - -export const generateOverlayBlack = (opacity = 0.6) => { - return `rgba(0, 0, 0, ${opacity})`; -}; - -export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeConsumer, ThemeProvider }; diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts deleted file mode 100644 index 3e38c4a7d..000000000 --- a/packages/instant/src/style/util.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ObjectMap } from '@0x/types'; -import * as _ from 'lodash'; - -export const cssRuleIfExists = (props: ObjectMap<any>, rule: string): string => { - const camelCaseRule = _.camelCase(rule); - const ruleValueIfExists = props[camelCaseRule]; - if (!_.isUndefined(ruleValueIfExists)) { - return `${rule}: ${ruleValueIfExists};`; - } - return ''; -}; diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts deleted file mode 100644 index ba2d27a17..000000000 --- a/packages/instant/src/style/z_index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const zIndex = { - errorPopBehind: 10, - mainContainer: 20, - dropdownItems: 30, - panel: 40, - containerOverlay: 45, - errorPopup: 50, - overlayDefault: 100, -}; |