From 1ac998ffa0aa5236535582da67f4d2d754977ff2 Mon Sep 17 00:00:00 2001
From: Julientaq <julientaq@gmail.com>
Date: Mon, 16 Oct 2017 18:36:52 +0200
Subject: [PATCH] style for the do review
---
src/atoms/Attachment.js | 2 +-
src/atoms/Attachment.local.scss | 14 ++++++----
src/atoms/Button.js | 3 ++-
src/atoms/Button.local.scss | 11 ++++++++
src/atoms/Checkbox.local.scss | 1 +
src/atoms/Radio.local.scss | 46 ++++++++++++++++++---------------
src/molecules/Attachments.js | 2 +-
src/molecules/Files.js | 2 +-
src/molecules/Files.local.scss | 15 +++++++++++
9 files changed, 66 insertions(+), 30 deletions(-)
diff --git a/src/atoms/Attachment.js b/src/atoms/Attachment.js
index e4136e3de..2fe8d16d3 100644
--- a/src/atoms/Attachment.js
+++ b/src/atoms/Attachment.js
@@ -8,7 +8,7 @@ const Attachment = ({ value }) => (
href={value.url}
className={classes.attachment}>
<span className={classes.icon}>
- <Icon color="cornflowerblue">paperclip</Icon>
+ <Icon color="var(--color-primary)">paperclip</Icon>
</span>
<span className={classes.filename}>
{value.name}
diff --git a/src/atoms/Attachment.local.scss b/src/atoms/Attachment.local.scss
index 86fc8df67..bdfe6f0ee 100644
--- a/src/atoms/Attachment.local.scss
+++ b/src/atoms/Attachment.local.scss
@@ -1,15 +1,19 @@
.attachment {
- display: flex;
- align-items: center;
- color: inherit;
- text-decoration: none;
+ position: absolute;
+ margin-right: -20ch;
+ width: 20ch;
}
.icon {
margin-right: 10px;
display: inline-flex;
+ color: var(--color-primary);
}
.filename {
- font-family: var(--font-mono);
+ font-size: 0.7em;
+ max-width: 25ch;
+ height: 2em;
+ overflow-wrap: break-word;
+ padding: 0;
}
diff --git a/src/atoms/Button.js b/src/atoms/Button.js
index 5f093c76a..70419e58c 100644
--- a/src/atoms/Button.js
+++ b/src/atoms/Button.js
@@ -2,11 +2,12 @@ import React from 'react'
import classnames from 'classnames'
import classes from './Button.local.scss'
-const Button = ({ children, type = 'button', back, disabled, primary, onClick}) => (
+const Button = ({ children, type = 'button', back, disabled, addFile, primary, onClick}) => (
<button
className={classnames(classes.root, {
[classes.disabled]: disabled,
[classes.back]: back,
+ [classes.addFile]: addFile,
[classes.primary]: primary
})}
type={type}
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index e40b34d9c..922affb74 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -72,6 +72,8 @@
cursor: not-allowed;
background: transparent;
color: #aaa;
+ border: 2px solid transparent;
+ border-bottom: 2px solid #bbb;
}
.disabled:hover::after {
@@ -111,3 +113,12 @@
.back:active {
transform: scale(0.99);
}
+
+.addFile {
+ background: none;
+ font-style: normal;
+ text-transform: none;
+ padding: 0;
+ letter-spacing: 0;
+ border: none;
+}
diff --git a/src/atoms/Checkbox.local.scss b/src/atoms/Checkbox.local.scss
index 6af6908fd..96ab615f9 100644
--- a/src/atoms/Checkbox.local.scss
+++ b/src/atoms/Checkbox.local.scss
@@ -53,3 +53,4 @@
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
}
}
+
diff --git a/src/atoms/Radio.local.scss b/src/atoms/Radio.local.scss
index c04404605..e312e2bba 100644
--- a/src/atoms/Radio.local.scss
+++ b/src/atoms/Radio.local.scss
@@ -1,3 +1,9 @@
+:root {
+ --color-activation: black;
+ --font-style: italic;
+ --letter-spacing: Â 1px;
+}
+
.root {
display: flex;
align-items: center;
@@ -21,10 +27,10 @@
.label {
font-size: 1em;
- font-family: "Vollkorn", serif;
- font-style: italic;
+ font-family: inherit;
+ font-style: var(--font-style);
display: inline-block;
- letter-spacing: 1px;
+ letter-spacing: var(--letter-spacing);
}
//.checked .label {
@@ -32,7 +38,7 @@ input:checked + .label {
font-weight: 500;
}
-/* hide the input */
+// hide the input
.input {
display: none;
@@ -57,14 +63,7 @@ input:checked + .label {
// TODO: don't apply this when checked
.root:hover .label::before {
//background-size: 100%;
- background:
- radial-gradient(
- closest-corner at center,
- var(--color-primary) 0%,
- var(--color-primary) 30%,
- white 30%,
- white 100%
- );
+ background: radial-gradient(closest-corner at center, var(--color-primary) 0%, var(--color-primary) 30%, white 30%, white 100%);
/* less blurry circle: 2 lines below
------------------------------------------------- */
@@ -76,13 +75,18 @@ input:checked + .label {
input:checked + .label::before {
transition: border 0.5s ease, background-size 0.3s ease;
border-color: transparent;
- box-shadow: 0 0 0 1px black;
- background:
- radial-gradient(
- closest-corner at center,
- black 0%,
- black 45%,
- white 45%,
- white 100%
- );
+ box-shadow: 0 0 0 1px var(--color-activation);
+ background: radial-gradient(closest-corner at center, var(--color-activation) 0%, var(--color-activation) 45%, white 45%, white 100%);
+}
+
+input[value="accept"]:checked + .label::before {
+ --color-activation: var(--color-valid);
+}
+
+input[value="reject"]:checked + .label::before {
+ --color-activation: var(--color-danger);
+}
+
+input[value="revise"]:checked + .label::before {
+ --color-activation: var(--color-warning);
}
diff --git a/src/molecules/Attachments.js b/src/molecules/Attachments.js
index e62bef075..6cf132182 100644
--- a/src/molecules/Attachments.js
+++ b/src/molecules/Attachments.js
@@ -13,7 +13,7 @@ const Attachments = props => (
uploadingFile={({ file, progress, error }) => (
<div className={classes.uploading}>
<span className={classes.icon}>
- <Icon color="cornflowerblue">paperclip</Icon>
+ <Icon color="var(--color-primary)">paperclip</Icon>
</span>
<span className={classes.filename}>
{error ? error : 'Uploading…'}
diff --git a/src/molecules/Files.js b/src/molecules/Files.js
index cc5291619..329119ae8 100644
--- a/src/molecules/Files.js
+++ b/src/molecules/Files.js
@@ -53,7 +53,7 @@ class Files extends React.Component {
<div className={classes.upload}>
<button
type="button"
- className={classes.button}
+ className={classes.attach}
onClick={() => this.fileInput.click()}>
{buttonText}
</button>
diff --git a/src/molecules/Files.local.scss b/src/molecules/Files.local.scss
index 897130d7e..0a31a81c1 100644
--- a/src/molecules/Files.local.scss
+++ b/src/molecules/Files.local.scss
@@ -22,3 +22,18 @@
line-height: 1.5;
font-size: 0.9em;
}
+
+.attach {
+ border: 0 dashed grey;
+ background: transparent;
+ padding: 0;
+ font-family: inherit;
+ margin-bottom: 0;
+ font-size: 0.8em;
+ border-bottom: 2px solid transparent;
+
+ &:hover {
+ border-bottom: 2px solid var(--color-primary);
+ color: primary;
+ }
+}
--
GitLab