diff --git a/packages/component-app/src/components/App.local.scss b/packages/component-app/src/components/App.local.scss
index 1930fcdc29034720df3d0fed02ef5627d3e27f09..5de35ff72faf4842c95206e6e5a1aa1ec9e4a05b 100644
--- a/packages/component-app/src/components/App.local.scss
+++ b/packages/component-app/src/components/App.local.scss
@@ -1,12 +1,11 @@
:global(:root) {
// brand colors
- --color-primary: #0D78F2;
+ --color-primary: #0d78f2;
// colors for interactions
--color-danger: #ff2d1a;
- --color-valid: #00bf05;
- --color-warning:Â #ee7600;
-
+ --color-valid: #00bf05;
+ --color-warning: #ee7600;
// fonts for the different views
--font-author: "Vollkorn", serif;
@@ -15,12 +14,6 @@
--font-mono: "Fira Mono", monospace;
}
-.root {
- font-family: "Fira Sans", sans-serif;
-}
-
-
-
.root {
font-family: "Fira Sans", sans-serif;
}
diff --git a/packages/component-dashboard/src/components/DashboardItem.local.scss b/packages/component-dashboard/src/components/DashboardItem.local.scss
index 313cb671c02ae8fdee965824f704495ca486689e..8aec3782717de92e6695f97ef9ac7cd33d8c9d37 100644
--- a/packages/component-dashboard/src/components/DashboardItem.local.scss
+++ b/packages/component-dashboard/src/components/DashboardItem.local.scss
@@ -3,7 +3,8 @@
align-items: center;
}
-.main, .roles {
+.main,
+.roles {
padding-left: 40px;
}
diff --git a/packages/component-dashboard/src/components/UploadManuscript.local.scss b/packages/component-dashboard/src/components/UploadManuscript.local.scss
index 4e93048df408fa5f5f0e7b7c8c63bb8ba9515e5a..de9885410806a8f3c3de8e91012c5dac640f0562 100644
--- a/packages/component-dashboard/src/components/UploadManuscript.local.scss
+++ b/packages/component-dashboard/src/components/UploadManuscript.local.scss
@@ -38,6 +38,7 @@
0% {
transform: rotate(0deg);
}
+
100% {
transform: rotate(360deg);
}
diff --git a/packages/xpub-styleguide/src/components/Wrapper.local.scss b/packages/xpub-styleguide/src/components/Wrapper.local.scss
index 75bc41dd627087db1d328e3b694403f370d31f0d..f8d6b735205895d46cd0bff79fcdc2309ee59546 100644
--- a/packages/xpub-styleguide/src/components/Wrapper.local.scss
+++ b/packages/xpub-styleguide/src/components/Wrapper.local.scss
@@ -1,13 +1,12 @@
:global(:root) {
// brand colors
- --color-primary: #0D78F2;
+ --color-primary: #0d78f2;
// colors for interactions
--color-danger: #ff2d1a;
- --color-warning:Â #ee7600;
+ --color-warning: #ee7600;
--color-valid: #00bf05;
-
// fonts for the different views
--font-author: "Vollkorn", serif;
--font-reviewer: "Fira Mono", monospace;
diff --git a/packages/xpub-ui/src/atoms/Button.local.scss b/packages/xpub-ui/src/atoms/Button.local.scss
index 87740c7e0cf56dbacbba2613052f2bbaa063581f..c71bced0c1f1bc0893144e72d5989bfca9b30213 100644
--- a/packages/xpub-ui/src/atoms/Button.local.scss
+++ b/packages/xpub-ui/src/atoms/Button.local.scss
@@ -1,11 +1,12 @@
.root {
text-transform: uppercase;
- font-family: 'Fira Sans Condensed';
+ font-family: 'Fira Sans Condensed', sans-serif;
letter-spacing: 0.05em;
border: none;
font-size: inherit;
padding: 10px 20px;
position: relative;
+
&:not(.disabled) {
cursor: pointer;
border: 2px solid transparent;
@@ -30,9 +31,7 @@
outline: 1px solid transparent;
}
-
-
- &:after {
+ &::after {
content: "Saved!";
top: 20%;
left: 115%;
@@ -42,9 +41,11 @@
padding: 0.1em 0.3em;
opacity: 0;
}
+
&:active {
- transform: scale(0.80);
- &:after {
+ transform: scale(0.8);
+
+ &::after {
opacity: 1;
animation: 1s warning;
}
@@ -58,43 +59,45 @@
}
.disabled {
- // text-decoration: line-through;
- background: white;
- border: 2px solid transparent;
- border-bottom: 2px solid #bbb;
- color: #bbb;
+ // text-decoration: line-through;
+ background: white;
+ border: 2px solid transparent;
+ border-bottom: 2px solid #bbb;
+ color: #bbb;
- &:hover {
- // border: 2px solid #F10C08;
- cursor: not-allowed;
- &: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;
- }
- }
- }
+ &:hover {
+ // border: 2px solid #F10C08;
+ cursor: not-allowed;
+ &::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;
+ }
+ }
+}
- @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/packages/xpub-ui/src/atoms/Checkbox.local.scss b/packages/xpub-ui/src/atoms/Checkbox.local.scss
index 90392dfe2eaf2b3c86d8a2c105ec1795c92707a9..464259e84458754c08247194594e9c9a6a5358a1 100644
--- a/packages/xpub-ui/src/atoms/Checkbox.local.scss
+++ b/packages/xpub-ui/src/atoms/Checkbox.local.scss
@@ -26,9 +26,7 @@
display: none;
}
-
-
-.root span:before {
+.root span::before {
transition: border 0.5s ease, background-size 0.3s ease;
content: ' ';
display: inline-block;
@@ -40,16 +38,16 @@
margin-right: 0.3em;
}
-.root:hover span:before {
- background-size: 100%;
+.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;
}
-.root input:checked+span {
+.root input:checked + span {
font-weight: 500;
- &:before {
+ &::before {
transition: border 0.5s ease, background-size 0.3s ease;
border: 1px solid black;
background: black;
diff --git a/packages/xpub-ui/src/atoms/File.local.scss b/packages/xpub-ui/src/atoms/File.local.scss
index 7bb9e2390f40685364832b039dc3f8c2cd441a95..7877da0c068645b3b243302db23eaf945fb32cff 100644
--- a/packages/xpub-ui/src/atoms/File.local.scss
+++ b/packages/xpub-ui/src/atoms/File.local.scss
@@ -7,14 +7,13 @@
margin-right: 3em;
width: 20ch;
- &:before,
- &:after {
- transition: transform 0.5s;
+ &::before,
+ &::after {
transition: transform 0.3s;
cursor: pointer;
}
- &:after {
+ &::after {
content: 'remove';
background: var(--color-danger);
color: white;
@@ -31,7 +30,8 @@
cursor: pointer;
border: 1px solid white;
}
- &:before {
+
+ &::before {
content: 'replace';
background: var(--color-primary);
color: white;
@@ -77,7 +77,8 @@
color: #aaa;
margin: 5px;
max-width: 15ch;
- /*to divide into lines*/
+
+ /* to divide into lines */
word-break: break-all;
text-align: center;
}
@@ -89,13 +90,13 @@
border-right: 2px solid #ddd;
}
-
.icon {
background: var(--color-primary);
transform: skewY(6deg) rotate(-6deg);
}
- &:after,
- &:before {
+
+ &::after,
+ &::before {
transform: scaleX(1);
}
}
diff --git a/packages/xpub-ui/src/atoms/Menu.local.scss b/packages/xpub-ui/src/atoms/Menu.local.scss
index 4153588b65586886eb78bf988668f20b4ecf5d88..d19799fe4a0dca7d959b6d04546568feb1985af8 100644
--- a/packages/xpub-ui/src/atoms/Menu.local.scss
+++ b/packages/xpub-ui/src/atoms/Menu.local.scss
@@ -62,7 +62,7 @@
background-color: white;
border-left: 2px solid var(--color-primary);
border-bottom: 2px solid var(--color-primary);
- /*columns: 2 auto;*/
+ //columns: 2 auto;
max-height: 2px;
transition: max-height 3s;
}
@@ -83,7 +83,7 @@
}
.active {
- // placegolder for the semibold semibold
+ // placeholder for the semibold
font-weight: 500;
color: black;
}
diff --git a/packages/xpub-ui/src/atoms/Radio.local.scss b/packages/xpub-ui/src/atoms/Radio.local.scss
index b4f689063a72b8d17c3e8059d7b76927db51cef3..6124c6be2a87cee7aea511245ebb8f0bd52ccc37 100644
--- a/packages/xpub-ui/src/atoms/Radio.local.scss
+++ b/packages/xpub-ui/src/atoms/Radio.local.scss
@@ -22,7 +22,7 @@
display: none;
}
-.root span:before {
+.root span::before {
transition: border 0.5s ease, background-size 0.3s ease;
content: ' ';
display: inline-block;
@@ -37,22 +37,22 @@
}
.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%);
+ &::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
- -------------------------------------------------*/
+ /* less blurry circle: 2 lines below
+ ------------------------------------------------- */
border-color: transparent;
box-shadow: 0 0 0 1px var(--color-primary);
}
}
-.root input:checked+span {
+.root input:checked + span {
font-weight: 500;
- &:before {
- transition: border 0.5s ease background-size 0.3s ease;
+ &::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%);
diff --git a/packages/xpub-ui/src/atoms/Tags.scss b/packages/xpub-ui/src/atoms/Tags.scss
index 9a9ac433243323df0a67cff1915fcbe22823606b..0481c2651f4c705d986e0624112aefa0670b4534 100644
--- a/packages/xpub-ui/src/atoms/Tags.scss
+++ b/packages/xpub-ui/src/atoms/Tags.scss
@@ -1,16 +1,15 @@
-/*trying to reuse some parts frome pubsweet website: the mixins for the underlines for the tags*/
+/* 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);
+ background: linear-gradient($colorback 0, $colorback 1.2em, $color 1.2em, $color 1.25em, $colorback 1.25em, $colorback 2em) no-repeat;
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";
+ font-family: "Fira Sans Condensed", sans-serif;
}
.react-tags {
@@ -33,12 +32,11 @@ $color-back: white;
.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;
+ border: 0 solid transparent;
@include realBorder(#aaa, white);
/* match the font styles */
@@ -47,10 +45,11 @@ $color-back: white;
cursor: pointer;
}
-.react-tags__selected-tag:after {
+.react-tags__selected-tag::after {
content: '\2715';
margin-left: 8px;
- padding: 0; // margin: 0;
+ padding: 3px 0 0;
+ // margin: 0;
display: inline-block;
width: 13px;
height: 10px;
@@ -58,20 +57,20 @@ $color-back: white;
background: white;
color: #aaa;
font-weight: 600;
- padding-top: 3px;
+ text-shadow: none;
&: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 {
+ &::after {
color: var(--color-danger);
}
}
@@ -79,17 +78,15 @@ $color-back: white;
.react-tags__search {
display: inline-block;
-
/* match tag layout */
margin: 0 1em 1em 0;
padding: 0.1em 0.3em;
/* prevent autoresize overflowing the container */
- max-width: 100;
+ max-width: 100px;
}
@media screen and (min-width: 30em) {
-
.react-tags__search {
/* this will become the offsetParent for suggestions */
position: relative;
@@ -113,10 +110,12 @@ $color-back: white;
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);
diff --git a/packages/xpub-ui/src/atoms/TextField.local.scss b/packages/xpub-ui/src/atoms/TextField.local.scss
index b766d542d82d105e2dec2bce561c94624ad2eb66..5ec06046ff0e513f7ed3fad0f49001627f1e10b9 100644
--- a/packages/xpub-ui/src/atoms/TextField.local.scss
+++ b/packages/xpub-ui/src/atoms/TextField.local.scss
@@ -18,6 +18,7 @@
padding: 0;
border-bottom: 1px dashed #aaa;
font-family: "Vollkorn", serif;
+
&:hover,
&:focus {
outline-style: none;
diff --git a/packages/xpub-ui/src/atoms/UploadingFile.local.scss b/packages/xpub-ui/src/atoms/UploadingFile.local.scss
index 142f9b28bdc258090d255526a2ea7cfc8c081748..5eef06958b86a0ec005ece48aaa6c0e6c89b6b32 100644
--- a/packages/xpub-ui/src/atoms/UploadingFile.local.scss
+++ b/packages/xpub-ui/src/atoms/UploadingFile.local.scss
@@ -19,21 +19,22 @@
.progress {
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%);
+ background-image:
+ linear-gradient(
+ to top,
+ var(--color-primary-light) 50%,
+ var(--color-primary) 75%
+ );
- &:after {
- /*we can use a data attribute for the numbering below */
+ &::after {
+ /* we can use a data attribute for the numbering below */
content: "00%";
display: block;
color: white;
@@ -77,39 +78,36 @@
max-width: 20ch;
}
-
-
-/* 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);
- }
-}
-*/
+// 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/packages/xpub-ui/src/atoms/ValidatedField.local.scss b/packages/xpub-ui/src/atoms/ValidatedField.local.scss
index 623df40a16372b4ff4cb7277e7396108bd3a65bd..58eecfd094cfc792cdbd67ccf5931d85af8e0df6 100644
--- a/packages/xpub-ui/src/atoms/ValidatedField.local.scss
+++ b/packages/xpub-ui/src/atoms/ValidatedField.local.scss
@@ -1,5 +1,6 @@
.root {
- composes: root from "./TextField.local.scss";
+ display: flex;
+ align-items: center;
font-size: inherit;
}
@@ -9,6 +10,7 @@ input {
padding: 0;
border-bottom: 1px dashed #aaa;
font-family: "Vollkorn", serif;
+
&:hover,
&:focus {
outline-style: none;
@@ -18,7 +20,6 @@ input {
}
}
-
.messages {
// color: white;
margin-top: 10px;
@@ -42,6 +43,5 @@ input {
}
.warning {
- color: var(--color-warn);
- color: #ee7600;
+ color: var(--color-warning);
}
diff --git a/packages/xpub-ui/src/lib/animation.scss b/packages/xpub-ui/src/lib/animation.scss
index 6b81e6784575ac10b421f2937e119dcfc2da8337..21b94773710e9976eb746ef7a3e142ebf53c7999 100644
--- a/packages/xpub-ui/src/lib/animation.scss
+++ b/packages/xpub-ui/src/lib/animation.scss
@@ -1,29 +1,29 @@
- /*This file is here to share animations between modules, not used yet..*/
+/* This file is here to share animations between modules, not used yet.. */
- @keyframes bounce {
+@keyframes bounce {
33% {
transform: translateY(-20px);
}
+
66% {
- transform: translateY(0px);
+ transform: translateY(0);
}
- }
+}
- .bounce {
+.bounce {
animation: bounce 1s infinite ease-in-out;
- }
-
+}
-
- @keyframes rotate {
+@keyframes rotate {
from {
- transform: rotate(0)
+ transform: rotate(0);
}
+
to {
transform: rotate(360deg);
}
- }
+}
- .rotate {
+.rotate {
animation: rotate 1s infinite ease-in-out;
- }
+}
diff --git a/packages/xpub-ui/src/lib/colors.local.scss b/packages/xpub-ui/src/lib/colors.local.scss
index 8f2efef13d21ca7cbdec81be43e076d2f1c68b09..e06cf2a6b7113312ebe42ec117ee71a92416e3b7 100644
--- a/packages/xpub-ui/src/lib/colors.local.scss
+++ b/packages/xpub-ui/src/lib/colors.local.scss
@@ -2,5 +2,3 @@
background-color: cornflowerblue;
color: white;
}
-
-
diff --git a/packages/xpub-ui/src/molecules/AppBar.local.scss b/packages/xpub-ui/src/molecules/AppBar.local.scss
index 32f42096f1b67efa2ef664b457d872baf141cc1b..e3960e56c5ceabc750d05c1e45597c788fa1f750 100644
--- a/packages/xpub-ui/src/molecules/AppBar.local.scss
+++ b/packages/xpub-ui/src/molecules/AppBar.local.scss
@@ -5,7 +5,8 @@
.link {
color: var(--color-primary);
- &:before {
+
+ &::before {
// while waiting for the user icon. :D
content: "ʕ•ᴥ•ʔ";
text-align: center;
@@ -19,7 +20,8 @@
.link:hover {
text-decoration: underline;
cursor: pointer;
- &:before {
+
+ &::before {
color: var(--color-primary);
}
}
@@ -28,6 +30,6 @@
padding: 1rem;
}
-.logo:before {
+.logo::before {
content: "";
}