From 22090e650055e090883c020decc00d5f195f03f5 Mon Sep 17 00:00:00 2001
From: Julientaq <julientaq@gmail.com>
Date: Thu, 21 Sep 2017 15:31:51 +0200
Subject: [PATCH] =?UTF-8?q?WIP=C2=A0styling=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/atoms/Badge.local.scss | 19 +++++++++++++------
src/atoms/Badge.md | 3 ++-
src/atoms/Button.local.scss | 21 +++++++++++----------
src/atoms/ValidatedField.local.scss | 4 ++--
4 files changed, 28 insertions(+), 19 deletions(-)
diff --git a/src/atoms/Badge.local.scss b/src/atoms/Badge.local.scss
index 25e6450d8..440ad26b5 100644
--- a/src/atoms/Badge.local.scss
+++ b/src/atoms/Badge.local.scss
@@ -1,18 +1,25 @@
.root {
display: inline-flex;
align-items: center;
- border: 1px solid #eee;
- border-radius: 2px;
+ background: lightgrey;
+ background: linear-gradient(#fff 0, #fff 1.1em, grey 1.1em, grey 1.15em, #fff 1.15em, #fff 2em);
font-size: 0.8rem;
+ margin-right: 1em;
+ padding-bottom: 1em;
+ color: inherit;
}
.count {
- background: white;
- padding: 5px;
+ border-radius: 50%;
+ text-align: center;
+ font-weight: 600;
+ color: grey;
+ font-size: 1em;
+ padding-right: 0.5em;
}
.label {
display: inline-block;
- background: #eee;
- padding: 5px;
+ padding: 0;
+ text-shadow: 0.05em 0.05em 0 #fff, -0.05em -0.05em 0 #fff, -0.05em 0.05em 0 #fff, 0.05em -0.05em 0 #fff;
}
diff --git a/src/atoms/Badge.md b/src/atoms/Badge.md
index 0cb31a8fb..ed418eaab 100644
--- a/src/atoms/Badge.md
+++ b/src/atoms/Badge.md
@@ -9,7 +9,8 @@ A plural form of the label can be provided.
```js
<div>
<Badge count={1} label="thing" plural="things"/>
- <Badge count={10} label="thing" plural="things"/>
+ <Badge count={99} label="thing" plural="things"/>
<Badge count={0} label="thing" plural="things"/>
+ <Badge count={299} label="thing" plural="things"/>
</div>
```
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index c71bced0c..995635b7b 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -31,16 +31,17 @@
outline: 1px solid transparent;
}
- &::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);
diff --git a/src/atoms/ValidatedField.local.scss b/src/atoms/ValidatedField.local.scss
index feb7b74b3..0d3dcdb61 100644
--- a/src/atoms/ValidatedField.local.scss
+++ b/src/atoms/ValidatedField.local.scss
@@ -1,5 +1,5 @@
+
.messages {
- // color: white;
margin-top: 10px;
font-style: italic;
display: inline-block;
@@ -12,7 +12,7 @@
.error,
.warning {
- font-size: 0.9em; // padding: 0.3em 0.5em;
+ font-size: 0.9em;
letter-spacing: 0.01em;
}
--
GitLab