From 910ed7ab81d05bf0cf71c2ccf5409c440cbabf34 Mon Sep 17 00:00:00 2001
From: julientaq <julientaq>
Date: Tue, 5 Sep 2017 14:05:14 +0200
Subject: [PATCH] first shoot at styling-patch
---
src/atoms/Button.local.scss | 142 +++++++++++-----------
src/atoms/Checkbox.local.scss | 66 +++++-----
src/atoms/File.local.scss | 182 ++++++++++++++--------------
src/atoms/Menu.local.scss | 88 ++++++--------
src/atoms/Radio.local.scss | 82 ++++++-------
src/atoms/Tags.scss | 181 +++++++++++++--------------
src/atoms/TextField.local.scss | 34 +++---
src/atoms/UploadingFile.local.scss | 161 ++++++++++++------------
src/atoms/ValidatedField.local.scss | 51 ++++----
src/lib/animation.scss | 38 +++---
src/lib/colors.local.scss | 1 +
src/molecules/AppBar.local.scss | 9 +-
12 files changed, 510 insertions(+), 525 deletions(-)
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index 75fa0d7dd..87740c7e0 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -1,60 +1,60 @@
.root {
- text-transform: uppercase;
- font-family: 'Fira Sans Condensed';
- letter-spacing: 0.05em;
- border: none;
- font-size: inherit;
- padding: 10px 20px;
- position: relative;
- &:not(.disabled) {
- cursor: pointer;
- border: 2px solid transparent;
- border-bottom: 4px solid transparent;
- font-weight: 500;
- transition: border 0.3s, background 0.5s;
+ text-transform: uppercase;
+ font-family: 'Fira Sans Condensed';
+ letter-spacing: 0.05em;
+ border: none;
+ font-size: inherit;
+ padding: 10px 20px;
+ position: relative;
+ &: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;
- }
+ &: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;
- }
+ &: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;
+ }
- &: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.80);
- &:after {
- opacity: 1;
- animation: 1s warning;
- }
- }
+ &: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.80);
+ &:after {
+ opacity: 1;
+ animation: 1s warning;
+ }
}
+ }
}
.primary {
- background-color: var(--color-primary);
- color: white;
+ background-color: var(--color-primary);
+ color: white;
}
.disabled {
@@ -68,33 +68,33 @@
// border: 2px solid #F10C08;
cursor: not-allowed;
&:after {
- text-transform: lowercase;
- letter-spacing: 0;
+ 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;
+ 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;
+ }
}
- }
-}
+ }
-@keyframes fadeout {
- 0% {
- opacity: 1;
- }
- 90% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
+ @keyframes fadeout {
+ 0% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
diff --git a/src/atoms/Checkbox.local.scss b/src/atoms/Checkbox.local.scss
index 8072e1425..90392dfe2 100644
--- a/src/atoms/Checkbox.local.scss
+++ b/src/atoms/Checkbox.local.scss
@@ -1,58 +1,58 @@
.root {
- display: flex;
- align-items: center;
- cursor: pointer;
- transition: all 2s;
- font-size: 1em;
- font-family: var(--font-author);
- font-style: italic;
- letter-spacing: 1px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ transition: all 2s;
+ font-size: 1em;
+ font-family: var(--font-author);
+ font-style: italic;
+ letter-spacing: 1px;
}
.root.inline {
- display: inline-flex;
+ display: inline-flex;
}
.root.inline:not(:last-child) {
- margin-right: 2.7em;
+ margin-right: 2.7em;
}
.root:not(.inline):not(:last-child) {
- margin-bottom: 0.5rem;
+ margin-bottom: 0.5rem;
}
.root .input {
- margin-right: 0.25rem;
- display: none;
+ margin-right: 0.25rem;
+ display: none;
}
.root span:before {
- transition: border 0.5s ease, background-size 0.3s ease;
- content: ' ';
- display: inline-block;
- vertical-align: middle;
- width: 9px;
- height: 9px;
- border: 1px solid black; // border-radius: 20px;
- background-size: 0;
- margin-right: 0.3em;
+ transition: border 0.5s ease, background-size 0.3s ease;
+ content: ' ';
+ display: inline-block;
+ vertical-align: middle;
+ width: 9px;
+ height: 9px;
+ border: 1px solid black; // border-radius: 20px;
+ background-size: 0;
+ margin-right: 0.3em;
}
.root:hover span:before {
- background-size: 100%;
- background: var(--color-primary);
- box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
+ background-size: 100%;
+ background: var(--color-primary);
+ box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
}
.root input:checked+span {
- font-weight: 500;
-
- &:before {
- transition: border 0.5s ease, background-size 0.3s ease;
- border: 1px solid black;
- background: black;
- box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
- }
+ font-weight: 500;
+
+ &:before {
+ transition: border 0.5s ease, background-size 0.3s ease;
+ border: 1px solid black;
+ background: black;
+ box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
+ }
}
diff --git a/src/atoms/File.local.scss b/src/atoms/File.local.scss
index ef09051e9..7bb9e2390 100644
--- a/src/atoms/File.local.scss
+++ b/src/atoms/File.local.scss
@@ -1,106 +1,102 @@
.root {
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- margin-bottom: 2em;
-
- margin-right: 3em;
- width: 20ch;
-
-&:before, &:after {
- transition: transform 0.5s;
- transition: transform 0.3s;
- cursor: pointer;
-}
-
- &:after {
- content: 'remove';
- background: var(--color-danger);
- color: white;
- position: absolute;
- left: 70%;
- top: 4em;
- transform: scaleX(0);
- transform-origin: 0 0;
- font-size: 0.8em;
- padding: 0.2em 0.4em;
- letter-spacing: 0.5px;
- text-transform: uppercase;
- z-index: 2;
- cursor:Â pointer;
- border: 1px solid white;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ margin-bottom: 2em;
+ margin-right: 3em;
+ width: 20ch;
- }
- &:before {
- content: 'replace';
- background: var(--color-primary);
- color: white;
- position: absolute;
- left: 70%;
- top: 6em;
- transform-origin: 0 0;
- cursor:Â pointer;
+ &:before,
+ &:after {
+ transition: transform 0.5s;
+ transition: transform 0.3s;
+ cursor: pointer;
+ }
- transform: scaleX(0);
- font-size: 0.8em;
- padding: 0.2em 0.4em;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- z-index: 3;
- border: 1px solid white;
+ &:after {
+ content: 'remove';
+ background: var(--color-danger);
+ color: white;
+ position: absolute;
+ left: 70%;
+ top: 4em;
+ transform: scaleX(0);
+ transform-origin: 0 0;
+ font-size: 0.8em;
+ padding: 0.2em 0.4em;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ z-index: 2;
+ cursor: pointer;
+ border: 1px solid white;
+ }
+ &:before {
+ content: 'replace';
+ background: var(--color-primary);
+ color: white;
+ position: absolute;
+ left: 70%;
+ top: 6em;
+ transform-origin: 0 0;
+ cursor: pointer;
+ transform: scaleX(0);
+ font-size: 0.8em;
+ padding: 0.2em 0.4em;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ z-index: 3;
+ border: 1px solid white;
+ }
- }
+ .icon {
+ transition: transform 0.3s ease;
+ width: 70px;
+ height: 100px;
+ background: #ddd;
+ position: relative;
+ padding: 5px;
+ }
- .icon {
- transition: transform 0.3s ease;
+ .extension {
+ position: absolute;
+ top: 20px;
+ right: 0;
+ left: 20px;
+ text-align: center;
+ text-transform: uppercase;
+ background: #888;
+ color: white;
+ font-size: 12px;
+ padding: 2px;
+ }
- width: 70px;
- height: 100px;
- background: #ddd;
- position: relative;
- padding: 5px;
- }
+ .name {
+ font-style: italic;
+ font-size: 0.9em;
+ color: #aaa;
+ margin: 5px;
+ max-width: 15ch;
+ /*to divide into lines*/
+ word-break: break-all;
+ text-align: center;
+ }
+ &:hover {
.extension {
- position: absolute;
- top: 20px;
- right: 0;
- left: 20px;
- text-align: center;
- text-transform: uppercase;
- background: #888;
- color: white;
- font-size: 12px;
- padding: 2px;
- }
-
- .name {
- font-style: italic;
- font-size: 0.9em;
- color: #aaa;
- margin: 5px;
- max-width: 15ch;
- /*to divide into lines*/
- word-break: break-all;
- text-align: center;
+ background: white;
+ color: var(--color-primary);
+ border-right: 2px solid #ddd;
}
- &:hover {
- .extension {
- background: white;
- color: var(--color-primary);
- border-right: 2px solid #ddd;
- }
-
- .icon {
- background: var(--color-primary);
- transform: skewY(6deg) rotate(-6deg);
- }
- &:after,
- &:before {
- transform: scaleX(1);
- }
+ .icon {
+ background: var(--color-primary);
+ transform: skewY(6deg) rotate(-6deg);
+ }
+ &:after,
+ &:before {
+ transform: scaleX(1);
}
+ }
}
diff --git a/src/atoms/Menu.local.scss b/src/atoms/Menu.local.scss
index 53cbdc237..2eeca8657 100644
--- a/src/atoms/Menu.local.scss
+++ b/src/atoms/Menu.local.scss
@@ -1,89 +1,79 @@
.root button {
- font-family: var(--font-author);
+ font-family: var(--font-author);
}
.menuContainer {
- position: relative;
-
+ position: relative;
}
.opener {
- border: none;
- outline: none;
- cursor: pointer;
- background: transparent;
- font-size: inherit;
- display: flex;
- align-items: center;
- /*min-width: 10em;*/
- /*justify-content: end;*/
- font-family: var(--font-interface);
- // #semibold
- font-weight: 600;
-
- border-left: 2px solid transparent;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ background: transparent;
+ font-size: inherit;
+ display: flex;
+ align-items: center;
+ border-left: 2px solid transparent;
}
.open .opener {
- border-left: 2px solid var(--color-primary);
+ border-left: 2px solid var(--color-primary);
}
.opener:hover,
.open .opener,
.opener:hover .placeholder {
- color: var(--color-primary);
+ color: var(--color-primary);
}
.placeholder {
- color: #aaa;
- font-family: var(--font-interface);
- font-weight: 400;
+ color: #aaa;
+ font-family: var(--font-interface);
+ font-weight: 400;
}
.arrow {
- margin-left: 10px;
- font-size: 50%;
- transform: scaleY(1.2) scaleX(2.2);
- transition: transform 0.2s;
+ margin-left: 10px;
+ font-size: 50%;
+ transform: scaleY(1.2) scaleX(2.2);
+ transition: transform 0.2s;
}
.open .arrow {
- transform: scaleX(2.2) scaleY(-1.2);
+ transform: scaleX(2.2) scaleY(-1.2);
}
.menu {
- position: absolute;
- top: 0;
- left: 0;
- min-width: 10em;
- background-color: white;
- border-left: 2px solid var(--color-primary);
- border-bottom: 2px solid var(--color-primary);
-
- /*columns: 2 auto;*/
- // opening animation
- max-height: 2px;
- transition: max-height 3s;
+ position: absolute;
+ top: 0;
+ left: 0;
+ min-width: 10em;
+ background-color: white;
+ border-left: 2px solid var(--color-primary);
+ border-bottom: 2px solid var(--color-primary);
+ /*columns: 2 auto;*/
+ max-height: 2px;
+ transition: max-height 3s;
}
-
-
.open .menu {
- max-height: 3000px;
+ max-height: 3000px;
}
.option {
- font-family: var(--font-author);
- cursor: pointer;
- padding: 10px;
- white-space: nowrap;
+ font-family: var(--font-author);
+ cursor: pointer;
+ padding: 10px;
+ white-space: nowrap;
}
.option:hover {
- color: var(--color-primary);
+ color: var(--color-primary);
}
.active {
-
- font-weight: 600;
+ // placegolder for the semibold semibold
+ font-weight: 500;
+ color: black;
}
diff --git a/src/atoms/Radio.local.scss b/src/atoms/Radio.local.scss
index 4884c311c..b4f689063 100644
--- a/src/atoms/Radio.local.scss
+++ b/src/atoms/Radio.local.scss
@@ -1,68 +1,68 @@
.root {
- display: flex;
- align-items: center;
- cursor: pointer;
- transition: all 2s;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ transition: all 2s;
}
.root.inline {
- display: inline-flex;
+ display: inline-flex;
}
.root.inline:not(:last-child) {
- margin-right: 2.7em;
+ margin-right: 2.7em;
}
.root:not(.inline):not(:last-child) {
- margin-bottom: 0.5rem;
+ margin-bottom: 0.5rem;
}
.root .input {
- margin-right: 0.25rem;
- display: none;
+ margin-right: 0.25rem;
+ display: none;
}
-
-
.root span:before {
- transition: border 0.5s ease, background-size 0.3s ease;
- content: ' ';
- display: inline-block;
- vertical-align: middle;
- width: 10px;
- height: 10px;
- border-color: transparent;
- box-shadow: 0 0 0 1px black;
- border-radius: 10px;
- background-size: 0;
- margin-right: 0.3em;
+ transition: border 0.5s ease, background-size 0.3s ease;
+ content: ' ';
+ display: inline-block;
+ vertical-align: middle;
+ width: 10px;
+ height: 10px;
+ border-color: transparent;
+ box-shadow: 0 0 0 1px black;
+ border-radius: 10px;
+ background-size: 0;
+ margin-right: 0.3em;
}
.root:hover span {
- &:before {
- background-size: 100%;
- background: radial-gradient(closest-corner at center, var(--color-primary) 0%, var(--color-primary) 30%, white 30%, white 100%); // less blurry circle
- border-color: transparent;
- box-shadow: 0 0 0 1px var(--color-primary);
- }
+ &:before {
+ background-size: 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
+ -------------------------------------------------*/
+ border-color: transparent;
+ box-shadow: 0 0 0 1px var(--color-primary);
+ }
}
.root input:checked+span {
- font-weight: 500;
-
- &:before {
- transition: border 0.5s ease, background-size 0.3s ease;
+ font-weight: 500;
- 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%);
- }
+ &: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%);
+ }
}
.root span {
- font-size: 1em;
- font-family: "Vollkorn", serif;
- font-style: italic;
- display: inline-block;
- letter-spacing: 1px;
+ font-size: 1em;
+ font-family: "Vollkorn", serif;
+ font-style: italic;
+ display: inline-block;
+ letter-spacing: 1px;
}
diff --git a/src/atoms/Tags.scss b/src/atoms/Tags.scss
index f4f504a39..9a9ac4332 100644
--- a/src/atoms/Tags.scss
+++ b/src/atoms/Tags.scss
@@ -1,135 +1,128 @@
-.root {
- font-family: "Fira Sans Condensed";
-}
+/*trying to reuse some parts frome pubsweet website: the mixins for the underlines for the tags*/
$color: var(--color-primary);
$color-back: white;
@mixin realBorder($color, $colorback) {
- background: linear-gradient($colorback 0, $colorback 1.2em, $color 1.2em, $color 1.25em, $colorback 1.25em, $colorback 2em);
- text-shadow: 0.05em 0.05em 0 $colorback, -0.05em -0.05em 0 $colorback, -0.05em 0.05em 0 $colorback, 0.05em -0.05em 0 $colorback;
- background-repeat: no-repeat;
+ background: linear-gradient($colorback 0, $colorback 1.2em, $color 1.2em, $color 1.25em, $colorback 1.25em, $colorback 2em);
+ text-shadow: 0.05em 0.05em 0 $colorback, -0.05em -0.05em 0 $colorback, -0.05em 0.05em 0 $colorback, 0.05em -0.05em 0 $colorback;
+ background-repeat: no-repeat;
+}
+
+.root {
+ font-family: "Fira Sans Condensed";
}
.react-tags {
- position: relative;
- padding: 6px 0 0 6px;
- /*border: 1px solid #D1D1D1;*/
- /*border-radius: 1px;*/
- /* shared font styles */
- font-size: 1em;
- line-height: 1.2;
-
- /* clicking anywhere will focus the input */
- cursor: text;
+ position: relative;
+ padding: 6px 0 0 6px;
+ font-size: 1em;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
}
.react-tags.is-focused {
- border-color: var(--color-primary);
+ border-color: var(--color-primary);
}
.react-tags__selected {
- display: inline;
+ display: inline;
}
.react-tags__selected-tag {
- font-family: "Vollkorn", serif;
-
- display: inline-block;
- box-sizing: border-box;
- margin: 0 1em 1em 0;
- padding: 0.1em 0.3em;
- border: 0px solid transparent;
- @include realBorder(#aaa, white);
-
-
- /* match the font styles */
- font-size: inherit;
- line-height: inherit;
- cursor: pointer;
+ font-family: "Vollkorn", serif;
+
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0 1em 1em 0;
+ padding: 0.1em 0.3em;
+ border: 0px solid transparent;
+ @include realBorder(#aaa, white);
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+ cursor: pointer;
}
.react-tags__selected-tag:after {
- content: '\2715';
- margin-left: 8px;
- padding: 0; // margin: 0;
- display: inline-block;
- width: 13px;
- height: 10px;
- font-size: 0.9em;
- background: white;
- color: #aaa;
- font-weight: 600;
- padding-top: 3px;
-
- &:hover {
- background: var(--color-primary);
- }
- text-shadow: none;
+ content: '\2715';
+ margin-left: 8px;
+ padding: 0; // margin: 0;
+ display: inline-block;
+ width: 13px;
+ height: 10px;
+ font-size: 0.9em;
+ background: white;
+ color: #aaa;
+ font-weight: 600;
+ padding-top: 3px;
+
+ &:hover {
+ background: var(--color-primary);
+ }
+ text-shadow: none;
}
.react-tags__selected-tag:hover,
.react-tags__selected-tag:focus {
- @include realBorder(transparent, white);
- text-decoration: line-through;
-
- &:after {
- color: var(--color-danger);
- }
+ @include realBorder(transparent, white);
+ text-decoration: line-through;
+
+ &:after {
+ color: var(--color-danger);
+ }
}
.react-tags__search {
- display: inline-block;
-
+ display: inline-block;
- /* match tag layout */
- margin: 0 1em 1em 0;
- padding: 0.1em 0.3em;
- /* prevent autoresize overflowing the container */
- max-width: 100;
- // @include realBorder(var(--color-primary), white);
+ /* match tag layout */
+ margin: 0 1em 1em 0;
+ padding: 0.1em 0.3em;
- }
+ /* prevent autoresize overflowing the container */
+ max-width: 100;
+}
@media screen and (min-width: 30em) {
- .react-tags__search {
- /* this will become the offsetParent for suggestions */
- position: relative;
- }
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
}
.react-tags__search input {
- /* prevent autoresize overflowing the container */
- max-width: 100%;
-
- /* remove styles and layout from this element */
- margin: 0;
- padding: 0;
- border: 0;
- outline: none;
-
- /* match the font styles */
- font-size: inherit;
- line-height: inherit;
- border-bottom: 1px dashed grey;
- min-width: 15ch;
- font-family: "Vollkorn", serif;
- color: black; // color: red;
- &::placeholder {
- font-family: "Fira Sans Condensed", sans-serif;
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+ border-bottom: 1px dashed grey;
+ min-width: 15ch;
+ font-family: "Vollkorn", serif;
+ color: black; // color: red;
+ &::placeholder {
+ font-family: "Fira Sans Condensed", sans-serif;
opacity: 0.5;
-
- }
- &:focus , &:hover {
- border-bottom: 1px dashed var(--color-primary);
-
- }
-
-
+ }
+ &:focus,
+ &:hover {
+ border-bottom: 1px dashed var(--color-primary);
+ }
}
.react-tags__search input::-ms-clear {
- display: none;
+ display: none;
}
diff --git a/src/atoms/TextField.local.scss b/src/atoms/TextField.local.scss
index 2b46d5485..b766d542d 100644
--- a/src/atoms/TextField.local.scss
+++ b/src/atoms/TextField.local.scss
@@ -1,28 +1,28 @@
.root {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.text {
- margin-right: 10px;
+ margin-right: 10px;
}
.input {
- flex: 1;
- font-size: inherit;
- padding: 0.5em;
+ flex: 1;
+ font-size: inherit;
+ padding: 0.5em;
}
.root input {
- border: 0 none;
- padding: 0;
- border-bottom: 1px dashed #aaa;
- font-family: "Vollkorn", serif;
- &:hover,
- &:focus {
- outline-style: none;
- box-shadow: none;
- border-color: transparent;
- border-bottom: 1px dashed var(--color-primary);
- }
+ border: 0 none;
+ padding: 0;
+ border-bottom: 1px dashed #aaa;
+ font-family: "Vollkorn", serif;
+ &:hover,
+ &:focus {
+ outline-style: none;
+ box-shadow: none;
+ border-color: transparent;
+ border-bottom: 1px dashed var(--color-primary);
+ }
}
diff --git a/src/atoms/UploadingFile.local.scss b/src/atoms/UploadingFile.local.scss
index a16c7770f..142f9b28b 100644
--- a/src/atoms/UploadingFile.local.scss
+++ b/src/atoms/UploadingFile.local.scss
@@ -1,72 +1,46 @@
.root {
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- margin-bottom: 2em;
- margin-right: 3em;
- width: 20ch;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ margin-bottom: 2em;
+ margin-right: 3em;
+ width: 20ch;
}
.icon {
- opacity: 0.5;
-
- width: 70px;
- height: 100px;
- background: #ddd;
- position: relative;
- margin: 5px;
+ opacity: 0.5;
+ width: 70px;
+ height: 100px;
+ background: #ddd;
+ position: relative;
+ margin: 5px;
}
-/* clock experiment, on hold.
.progress {
- opacity: 1;
- background: var(--color-primary);
- position: absolute;
- bottom: 10%;
- right: 10%;
- content: '';
- width: 3px;
- height: 1em;
- display: block;
- // margin-left: 30%;
- transform-origin: 0 0;
- animation: rotate 1s infinite ease-in-out ;
- background-image:
- &:after {
- content:Â "uploading";
- display: block;
- position: absolute;
- width: 1em;
- height: 1em;
- }
-}*/
+ opacity: 1;
+ background: var(--color-primary);
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ content: '';
+ display: block;
+ transform-origin: 0 0;
+ background-image: linear-gradient( to top,
+ var(--color-primary-light) 50%,
+ var(--color-primary) 75%);
-.progress {
- opacity: 1;
- background: var(--color-primary);
- position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- content: '';
-
+ &:after {
+ /*we can use a data attribute for the numbering below */
+ content: "00%";
display: block;
- transform-origin: 0 0;
- background-image: linear-gradient( to top,
- var(--color-primary-light) 50%,
- var(--color-primary) 75%);
-
- &:after {
- content: "XX%";
-
- display: block;
- color: white;
- position: absolute;
- bottom: 2px;
- right: 2px;
- }
+ color: white;
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ }
}
.error {
@@ -83,32 +57,59 @@
}
.extension {
- position: absolute;
- top: 20px;
- right: 0;
- left: 20px;
- text-align: center;
- text-transform: uppercase;
- background: #888;
- color: white;
- font-size: 12px;
- padding: 2px;
+ position: absolute;
+ top: 20px;
+ right: 0;
+ left: 20px;
+ text-align: center;
+ text-transform: uppercase;
+ background: #888;
+ color: white;
+ font-size: 12px;
+ padding: 2px;
}
.name {
- font-style: italic;
- font-size: 90%;
- color: gray;
- margin: 5px;
- max-width: 20ch;
+ font-style: italic;
+ font-size: 90%;
+ color: gray;
+ margin: 5px;
+ max-width: 20ch;
}
-@keyframes rotate {
- 0% {
- transform: rotate(0)
- }
- 100% {
- transform: rotate(360deg);
+
+/* clock experiment, on hold.
+.progress {
+ opacity: 1;
+ background: var(--color-primary);
+ position: absolute;
+ bottom: 10%;
+ right: 10%;
+ content: '';
+ width: 3px;
+ height: 1em;
+ display: block;
+ // margin-left: 30%;
+ transform-origin: 0 0;
+ animation: rotate 1s infinite ease-in-out ;
+ background-image:
+ &:after {
+ content:Â "uploading";
+ display: block;
+ position: absolute;
+ width: 1em;
+ height: 1em;
}
}
+
+
+@keyframes rotate {
+ 0% {
+ transform: rotate(0)
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+*/
diff --git a/src/atoms/ValidatedField.local.scss b/src/atoms/ValidatedField.local.scss
index 3e1d783fa..623df40a1 100644
--- a/src/atoms/ValidatedField.local.scss
+++ b/src/atoms/ValidatedField.local.scss
@@ -1,45 +1,44 @@
.root {
- composes: root from "./TextField.local.scss";
- font-size: inherit;
+ composes: root from "./TextField.local.scss";
+ font-size: inherit;
}
input {
- font-size: inherit;
- border: 0 none;
- padding: 0;
- border-bottom: 1px dashed #aaa;
- font-family: "Vollkorn", serif;
- &:hover,
- &:focus {
- outline-style: none;
- box-shadow: none;
- border-color: transparent;
- border-bottom: 1px dashed var(--color-primary);
- }
+ font-size: inherit;
+ border: 0 none;
+ padding: 0;
+ border-bottom: 1px dashed #aaa;
+ font-family: "Vollkorn", serif;
+ &:hover,
+ &:focus {
+ outline-style: none;
+ box-shadow: none;
+ border-color: transparent;
+ border-bottom: 1px dashed var(--color-primary);
+ }
}
.messages {
- // color: white;
- margin-top: 10px;
- font-style: italic;
- display: inline-block;
- margin-left: 1em;
+ // color: white;
+ margin-top: 10px;
+ font-style: italic;
+ display: inline-block;
+ margin-left: 1em;
}
.message:not(:last-child) {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
-.error, .warning {
- font-size: 0.9em;
- // padding: 0.3em 0.5em;
- letter-spacing: 0.01em;
-
+.error,
+.warning {
+ font-size: 0.9em; // padding: 0.3em 0.5em;
+ letter-spacing: 0.01em;
}
.error {
- color: var(--color-danger);
+ color: var(--color-danger);
}
.warning {
diff --git a/src/lib/animation.scss b/src/lib/animation.scss
index 62235bdc3..6b81e6784 100644
--- a/src/lib/animation.scss
+++ b/src/lib/animation.scss
@@ -1,23 +1,29 @@
-@keyframes bounce {
- 33% { transform: translateY(-20px); }
- 66% { transform: translateY(0px); }
-}
+ /*This file is here to share animations between modules, not used yet..*/
-.bounce {
+ @keyframes bounce {
+ 33% {
+ transform: translateY(-20px);
+ }
+ 66% {
+ transform: translateY(0px);
+ }
+ }
+
+ .bounce {
animation: bounce 1s infinite ease-in-out;
-}
+ }
-@keyframes rotate {
- from {
- transform: rotate(0)
- }
- to {
- transform: rotate(360deg);
- }
-}
+ @keyframes rotate {
+ from {
+ transform: rotate(0)
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
-.rotate {
+ .rotate {
animation: rotate 1s infinite ease-in-out;
-}
+ }
diff --git a/src/lib/colors.local.scss b/src/lib/colors.local.scss
index 7041a5528..8f2efef13 100644
--- a/src/lib/colors.local.scss
+++ b/src/lib/colors.local.scss
@@ -3,3 +3,4 @@
color: white;
}
+
diff --git a/src/molecules/AppBar.local.scss b/src/molecules/AppBar.local.scss
index f43ad5c78..32f42096f 100644
--- a/src/molecules/AppBar.local.scss
+++ b/src/molecules/AppBar.local.scss
@@ -9,20 +9,19 @@
// while waiting for the user icon. :D
content: "ʕ•ᴥ•ʔ";
text-align: center;
- // letter-spacing: -1px;
- color: grey;
- // width: 1em;
+ color: #aaa;
height: 1em;
display: inline-block;
margin-right: 0.3em;
- // background: #aaa;
-
}
}
.link:hover {
text-decoration: underline;
cursor: pointer;
+ &:before {
+ color: var(--color-primary);
+ }
}
.item {
--
GitLab