diff options
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 | 107 | ||||
-rw-r--r-- | packages/website/ts/constants/utilities.tsx | 22 |
5 files changed, 0 insertions, 197 deletions
diff --git a/packages/website/ts/constants/.gitkeep b/packages/website/ts/constants/.gitkeep deleted file mode 100644 index e69de29bb..000000000 --- a/packages/website/ts/constants/.gitkeep +++ /dev/null diff --git a/packages/website/ts/constants/animations.tsx b/packages/website/ts/constants/animations.tsx deleted file mode 100644 index 6a58c4b40..000000000 --- a/packages/website/ts/constants/animations.tsx +++ /dev/null @@ -1,18 +0,0 @@ -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 deleted file mode 100644 index 4c5105b50..000000000 --- a/packages/website/ts/constants/cssReset.js +++ /dev/null @@ -1,50 +0,0 @@ -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 deleted file mode 100644 index ef7ec9426..000000000 --- a/packages/website/ts/constants/globalStyle.tsx +++ /dev/null @@ -1,107 +0,0 @@ -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 deleted file mode 100644 index ee5c5b4ce..000000000 --- a/packages/website/ts/constants/utilities.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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`; - } -}; |