diff options
| author | jackyzha0 <[email protected]> | 2021-03-06 16:32:09 -0800 |
|---|---|---|
| committer | jackyzha0 <[email protected]> | 2021-03-06 16:32:09 -0800 |
| commit | 75e8bdd2d4cdaefe28ed40a7735c993f98d15754 (patch) | |
| tree | 1b84a2222a11332075dc5de4405cd9d9e86193a5 /frontend/src/components/Form | |
| parent | paste modal fixes (diff) | |
| download | ctrl-v-75e8bdd2d4cdaefe28ed40a7735c993f98d15754.tar.xz ctrl-v-75e8bdd2d4cdaefe28ed40a7735c993f98d15754.zip | |
refactor form -> common
Diffstat (limited to 'frontend/src/components/Form')
| -rw-r--r-- | frontend/src/components/Form/Button.js | 31 | ||||
| -rw-r--r-- | frontend/src/components/Form/Input.js | 9 | ||||
| -rw-r--r-- | frontend/src/components/Form/mixins.js | 52 |
3 files changed, 0 insertions, 92 deletions
diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Form/Button.js deleted file mode 100644 index 290e52a..0000000 --- a/frontend/src/components/Form/Button.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled, {css} from 'styled-components' -import {Border, ButtonLike, DropShadow, Rounded} from "./mixins"; - -const Base = css` - ${DropShadow} - ${Rounded} - ${ButtonLike} - margin-right: 2em; - cursor: pointer; -` - -const Primary = css` - ${Base}; - border: none; - color: ${p => p.theme.colors.background}; - background-color: ${p => p.theme.colors.text}; -` -const Secondary = css` - ${Base}; - ${Border}; - color: ${p => p.theme.colors.text}; - background-color: ${p => p.theme.colors.background}; -` - -export const Button = styled.button` - ${p => p.secondary ? css`${Secondary}` : css`${Primary}` } -` - -export const SubmitButton = styled.input` - ${Primary} -`
\ No newline at end of file diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js deleted file mode 100644 index e000cfb..0000000 --- a/frontend/src/components/Form/Input.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components' -import {Border, DropShadow, InputLike, Rounded} from "./mixins"; - -export const Input = styled.input` - ${Border} - ${Rounded} - ${DropShadow} - ${InputLike} -`
\ No newline at end of file diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js deleted file mode 100644 index ca338d3..0000000 --- a/frontend/src/components/Form/mixins.js +++ /dev/null @@ -1,52 +0,0 @@ -import {css} from 'styled-components'; - -export const DropShadow = css` - box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02); -` - -export const Hover = css` - opacity: 0.5; - transition: all 0.5s cubic-bezier(.25,.8,.25,1); - - & ~ pre { - transition: all 0.5s cubic-bezier(.25,.8,.25,1); - opacity: 0.5; - } - - &:focus, &:hover, &:focus span, &:focus ~ pre { - opacity: 1; - } -` - -export const Rounded = css` - border-radius: 3px; -` - -export const Border = css` - border: 1px solid ${p => p.theme.colors.border}; -` - -export const InputLike = css` - ${Hover} - font-family: 'JetBrains Mono', monospace; - width: 100%; - font-size: 0.8em; - padding: 0.6em; - outline: none; - margin: 1.7em 0; -` - -export const CodeLike = css` - font-family: JetBrains Mono !important; - font-size: 13px !important; - line-height: 1.6em !important; - white-space: pre-wrap; -` - -export const ButtonLike = css` - font-family: 'JetBrains Mono', serif; - font-weight: 700; - padding: calc(0.6em + 1px) 1.5em; - margin: 2em 0; - outline: 0; -`
\ No newline at end of file |