From 25837a876465538689872870e4b4cd2e4fca726d Mon Sep 17 00:00:00 2001
From: Julientaq <julientaq@gmail.com>
Date: Wed, 11 Oct 2017 16:55:59 +0200
Subject: [PATCH] update to the styles of submission, adding a class named
[back] for the secondary button.
---
src/atoms/Button.js | 4 +-
src/atoms/Button.local.scss | 163 +++++++++++++++++----------------
src/atoms/Button.md | 6 ++
src/atoms/Checkbox.local.scss | 1 -
src/atoms/TextField.local.scss | 6 ++
src/atoms/TextField.md | 2 +
src/molecules/Files.local.scss | 10 +-
src/molecules/Files.md | 2 +-
src/molecules/Supplementary.js | 2 +-
9 files changed, 114 insertions(+), 82 deletions(-)
diff --git a/src/atoms/Button.js b/src/atoms/Button.js
index 52e6cf384..5f093c76a 100644
--- a/src/atoms/Button.js
+++ b/src/atoms/Button.js
@@ -2,10 +2,11 @@ import React from 'react'
import classnames from 'classnames'
import classes from './Button.local.scss'
-const Button = ({ children, type = 'button', disabled, primary, onClick}) => (
+const Button = ({ children, type = 'button', back, disabled, primary, onClick}) => (
<button
className={classnames(classes.root, {
[classes.disabled]: disabled,
+ [classes.back]: back,
[classes.primary]: primary
})}
type={type}
@@ -14,3 +15,4 @@ const Button = ({ children, type = 'button', disabled, primary, onClick}) => (
)
export default Button
+
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index 995635b7b..e40b34d9c 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -1,104 +1,113 @@
.root {
text-transform: uppercase;
- font-family: 'Fira Sans Condensed', sans-serif;
+ font-family: var(--font-interface);
letter-spacing: 0.05em;
border: none;
font-size: inherit;
padding: 10px 20px;
position: relative;
+ background: #ddd;
+}
- &:not(.disabled) {
- cursor: pointer;
- border: 2px solid transparent;
- border-bottom: 4px solid transparent;
- font-weight: 500;
- transition: border 0.3s, background 0.5s;
-
- &:hover {
- background: white;
- color: var(--color-primary);
- border: 2px solid var(--color-primary);
- border-bottom: 4px solid var(--color-primary);
- outline: 1px solid transparent;
- }
-
- &:focus {
- background: white;
- color: var(--color-primary);
- border: 2px solid var(--color-primary);
- border-bottom: 4px solid var(--color-primary);
- box-shadow: 0 2px 0 0 var(--color-primary);
- outline: 1px solid transparent;
- }
+.root:hover,
+.root:focus {
+ background: #777;
+ color: white;
+ outline: 1px solid transparent;
+}
- // this will be added to the button that need a feedback to the user.
- // &::after {
- // content: "Saved!";
- // top: 20%;
- // left: 115%;
- // position: absolute;
- // background: var(--color-primary);
- // color: white;
- // padding: 0.1em 0.3em;
- // opacity: 0;
- // }
+// this will be added to the button that need a feedback to the user.
+// &::after {
+// content: "Saved!";
+// top: 20%;
+// left: 115%;
+// position: absolute;
+// background: var(--color-primary);
+// color: white;
+// padding: 0.1em 0.3em;
+// opacity: 0;
+// }
- &:active {
- transform: scale(0.8);
+.root :active {
+ transform: scale(0.8);
+}
- &::after {
- opacity: 1;
- animation: 1s warning;
- }
- }
- }
+.root ::after {
+ opacity: 1;
+ animation: 1s warning;
}
.primary {
background-color: var(--color-primary);
color: white;
+ border: 2px solid transparent;
+ border-bottom: 4px solid var(--color-primary);
+}
+
+.primary:hover {
+ background: white;
+ color: var(--color-primary);
+ border: 2px solid var(--color-primary);
+ border-bottom: 4px solid var(--color-primary);
+ outline: 1px solid transparent;
+}
+
+.primary:focus {
+ background: white;
+ color: var(--color-primary);
+ border: 2px solid var(--color-primary);
+ border-bottom: 4px solid var(--color-primary);
+ box-shadow: 0 2px 0 0 var(--color-primary);
+ outline: 1px solid transparent;
}
.disabled {
- // text-decoration: line-through;
background: white;
border: 2px solid transparent;
border-bottom: 2px solid #bbb;
color: #bbb;
+}
+
+.disabled:hover {
+ cursor: not-allowed;
+ background: transparent;
+ color: #aaa;
+}
- &:hover {
- // border: 2px solid #F10C08;
- cursor: not-allowed;
+.disabled:hover::after {
+ text-transform: lowercase;
+ letter-spacing: 0;
+ content: "sorry, this action is not possible";
+ position: absolute;
+ display: inline;
+ top: 30%;
+ left: 115%;
+ font-style: italic;
+ font-size: 0.9em;
+ color: var(--color-danger);
+ width: 30ch;
+ text-align: left;
+ opacity: 1;
+}
- &::after {
- text-transform: lowercase;
- letter-spacing: 0;
- content: "sorry, this action is not possible";
- position: absolute;
- display: inline;
- top: 30%;
- left: 115%;
- font-style: italic;
- font-size: 0.9em;
- color: #f10c08;
- width: 30ch;
- text-align: left;
- // background: #F10C08;
- opacity: 1;
- }
- }
+.back {
+ background: none;
+ font-style: italic;
+ text-transform: none;
+ padding: 0;
+ letter-spacing: 0;
+ border: 0;
+ border-bottom: 2px solid #777;
}
-//@keyframes fadeout {
-// 0% {
-// opacity: 1;
-// }
-//
-// 90% {
-// opacity: 1;
-// }
-//
-// 100% {
-// opacity: 0;
-// }
-//}
+.back:hover,
+.back:focus {
+ border: 0;
+ background: transparent;
+ border-bottom: 2px solid var(--color-primary);
+ color: var(--color-primary);
+}
+
+.back:active {
+ transform: scale(0.99);
+}
diff --git a/src/atoms/Button.md b/src/atoms/Button.md
index a7871d1b7..d58c63951 100644
--- a/src/atoms/Button.md
+++ b/src/atoms/Button.md
@@ -16,3 +16,9 @@ A button can be marked as the "primary" action.
```js
<Button primary>Save</Button>
```
+
+A button can be marked as the "go back" action, as an alternative to the primary button.
+
+```js
+<Button back>Take me back to where i was.</Button>
+```
diff --git a/src/atoms/Checkbox.local.scss b/src/atoms/Checkbox.local.scss
index 464259e84..6af6908fd 100644
--- a/src/atoms/Checkbox.local.scss
+++ b/src/atoms/Checkbox.local.scss
@@ -1,7 +1,6 @@
.root {
display: flex;
align-items: center;
- cursor: pointer;
transition: all 2s;
font-size: 1em;
font-family: var(--font-author);
diff --git a/src/atoms/TextField.local.scss b/src/atoms/TextField.local.scss
index 5ec06046f..7c2767c7c 100644
--- a/src/atoms/TextField.local.scss
+++ b/src/atoms/TextField.local.scss
@@ -27,3 +27,9 @@
border-bottom: 1px dashed var(--color-primary);
}
}
+
+.root input::placeholder {
+ font-style: italic;
+ font-family: var(--font-interface);
+ color: #777;
+}
diff --git a/src/atoms/TextField.md b/src/atoms/TextField.md
index 578e62464..4c5743191 100644
--- a/src/atoms/TextField.md
+++ b/src/atoms/TextField.md
@@ -6,6 +6,7 @@ initialState = { value: '' };
<TextField
value={state.value}
+ placeholder="so you can write some in here"
onChange={event => setState({ value: event.target.value })}/>
```
@@ -17,5 +18,6 @@ initialState = { value: '' };
<TextField
label="Foo"
value={state.value}
+ placeholder="so you can write some in here"
onChange={event => setState({ value: event.target.value })}/>
```
diff --git a/src/molecules/Files.local.scss b/src/molecules/Files.local.scss
index fbee834e6..897130d7e 100644
--- a/src/molecules/Files.local.scss
+++ b/src/molecules/Files.local.scss
@@ -3,14 +3,22 @@
}
.button {
- border: none;
+ border: 1px dashed grey;
background: transparent;
padding: 10px;
cursor: pointer;
font-size: inherit;
font-family: inherit;
+ margin-bottom: 2em;
}
.button:hover {
color: var(--color-primary);
+ border-color: var(--color-primary);
+}
+
+.files {
+ font-style: italic;
+ line-height: 1.5;
+ font-size: 0.9em;
}
diff --git a/src/molecules/Files.md b/src/molecules/Files.md
index 0042861aa..c13062d66 100644
--- a/src/molecules/Files.md
+++ b/src/molecules/Files.md
@@ -15,7 +15,7 @@ const value = [
<Files
value={value}
- buttonText="Choose a file to upload"
+ buttonText="↑ Choose a file to upload"
uploadingFile={({ file, progress, error }) => <div style={{color:'gray'}}>{file.name}</div>}
uploadedFile={value => <div>{value.name}</div>}
uploadFile={file => new XMLHttpRequest()}/>
diff --git a/src/molecules/Supplementary.js b/src/molecules/Supplementary.js
index 85e5f7911..6a20b5aaf 100644
--- a/src/molecules/Supplementary.js
+++ b/src/molecules/Supplementary.js
@@ -6,7 +6,7 @@ import File from '../atoms/File'
const Supplementary = props => (
<Files
{...props}
- buttonText="â–² Upload files"
+ buttonText="↑ Upload files"
uploadingFile={({ file, progress, error }) => (
<UploadingFile
key={file.name}
--
GitLab