diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 08:56:49 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 08:56:49 +0800 |
commit | edb3a613879ecb4ae077dc4e4256965de2092e48 (patch) | |
tree | b7860f548c5399238d466f51241d86720b3a87a2 /packages/website/ts/constants | |
parent | 89f67b9becf3b4c0d13cceeaca4d5656ad500a9a (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.gz dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.bz2 dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.lz dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.xz dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.zst dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.zip |
Merge branch 'development' into feature/instant/tell-amount-available
Diffstat (limited to 'packages/website/ts/constants')
-rw-r--r-- | packages/website/ts/constants/.gitkeep | 0 | ||||
-rw-r--r-- | packages/website/ts/constants/animations.tsx | 18 | ||||
-rw-r--r-- | packages/website/ts/constants/cssReset.js | 50 | ||||
-rw-r--r-- | packages/website/ts/constants/globalStyle.tsx | 109 | ||||
-rw-r--r-- | packages/website/ts/constants/utilities.tsx | 22 |
5 files changed, 199 insertions, 0 deletions
diff --git a/packages/website/ts/constants/.gitkeep b/packages/website/ts/constants/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/packages/website/ts/constants/.gitkeep diff --git a/packages/website/ts/constants/animations.tsx b/packages/website/ts/constants/animations.tsx new file mode 100644 index 000000000..6a58c4b40 --- /dev/null +++ b/packages/website/ts/constants/animations.tsx @@ -0,0 +1,18 @@ +import { css, keyframes } from 'styled-components'; + +export const fadeIn = keyframes` + 0% { + transform: translateY(10px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +`; + +export const addFadeInAnimation = (duration: string = '0.5s', delay: string = '0s') => css` + opacity: 0; + transform: translateY(10px); + animation: ${fadeIn} ${duration} ${delay} forwards; +`; diff --git a/packages/website/ts/constants/cssReset.js b/packages/website/ts/constants/cssReset.js new file mode 100644 index 000000000..4c5105b50 --- /dev/null +++ b/packages/website/ts/constants/cssReset.js @@ -0,0 +1,50 @@ +export const cssReset = ` + *, + *:before, + *:after { + box-sizing: border-box; + } + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } +`; diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx new file mode 100644 index 000000000..5abb758c5 --- /dev/null +++ b/packages/website/ts/constants/globalStyle.tsx @@ -0,0 +1,109 @@ +import { createGlobalStyle, withTheme } from 'styled-components'; +import { cssReset } from 'ts/constants/cssReset'; + +export interface GlobalStyle { + theme: { + bgColor: string; + textColor: string; + linkColor: string; + dropdownButtonBg: string; + }; +} + +const GlobalStyles = withTheme( + createGlobalStyle < + GlobalStyle > + ` + ${cssReset}; + + html { + font-size: 18px; + background-color: ${props => props.theme.bgColor}; + overflow-x: hidden; + } + + @media (min-width: 768px) { + :root { + --smallHeading: 20px; + --defaultHeading: 28px; + --mediumHeading: 50px; + --largeHeading: 80px; + --smallHeadingHeight: 1.4em; + --defaultHeadingHeight: 1.357142857em; + --mediumHeadingHeight: 1.16em; + --largeHeadingHeight: 1em; + --smallParagraph: 14px; + --defaultParagraph: 18px; + --mediumParagraph: 22px; + --largeParagraph: 28px; + --smallIcon: 75px; + --mediumIcon: 85px; + --largeIcon: 145px; + --heroIcon: 282px; + } + } + + @media (max-width: 1170px) { + :root { + --largeHeading: 60px; + } + } + + @media (max-width: 768px) { + :root { + --smallHeading: 18px; + --defaultHeading: 18px; + --mediumHeading: 40px; + --largeHeading: 46px; + --smallHeadingHeight: 1.4em; // TO DO + --defaultHeadingHeight: 1.357142857em; // TO DO + --mediumHeadingHeight: 1.16em; // TO DO + --largeHeadingHeight: 1.108695652em; // TO DO + --smallParagraph: 14px; // TO DO + --defaultParagraph: 16px; // TO DO + --mediumParagraph: 20px; // TO DO + --largeParagraph: 20px; // TO DO + --smallIcon: 55px; + --mediumIcon: 85px; + --largeIcon: 115px; + } + } + + body { + font-family: 'Formular', sans-serif !important; + -webkit-font-smoothing: antialiased; + color: ${props => props.theme.textColor}; + font-feature-settings: "zero"; + scroll-behavior: smooth; + } + + .visuallyHidden { + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; + } + + img, svg { + max-width: 100%; + object-fit: contain; + } + + a, button { + text-decoration: none; + font-family: inherit; + outline: none; + } + + svg + p, + img + p { + padding-top: 30px; + } +`, +); + +export { GlobalStyles }; diff --git a/packages/website/ts/constants/utilities.tsx b/packages/website/ts/constants/utilities.tsx new file mode 100644 index 000000000..ee5c5b4ce --- /dev/null +++ b/packages/website/ts/constants/utilities.tsx @@ -0,0 +1,22 @@ +export interface PaddingInterface { + padding?: number | Array<'large' | 'default' | 'small' | number>; + margin?: number | Array<'large' | 'default' | 'small' | number>; +} + +interface PaddingSizes { + [key: string]: string; +} + +export const PADDING_SIZES: PaddingSizes = { + default: '30px', + large: '60px', + small: '15px', +}; + +export const getCSSPadding = (value: number | Array<string | number> = 0): string => { + if (Array.isArray(value)) { + return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); + } else { + return `${value}px`; + } +}; |