diff --git a/packages/component-app/src/components/App.local.scss b/packages/component-app/src/components/App.local.scss
index ca7d1b2f50308f9c3ba2ccf15060045f38436039..1930fcdc29034720df3d0fed02ef5627d3e27f09 100644
--- a/packages/component-app/src/components/App.local.scss
+++ b/packages/component-app/src/components/App.local.scss
@@ -1,7 +1,26 @@
:global(:root) {
- --primary-color: cornflowerblue;
+ // brand colors
+ --color-primary: #0D78F2;
+
+ // colors for interactions
+ --color-danger: #ff2d1a;
+ --color-valid: #00bf05;
+ --color-warning:Â #ee7600;
+
+
+ // fonts for the different views
+ --font-author: "Vollkorn", serif;
+ --font-reviewer: "Fira Mono", monospace;
+ --font-interface: "Fira Sans Condensed", sans-serif;
+ --font-mono: "Fira Mono", monospace;
}
+.root {
+ font-family: "Fira Sans", sans-serif;
+}
+
+
+
.root {
font-family: "Fira Sans", sans-serif;
}
diff --git a/packages/xpub-ui/src/atoms/Button.local.scss b/packages/xpub-ui/src/atoms/Button.local.scss
index 02e18e592d1a4e9142ef073a8fa98c0c6ca67ed5..75fa0d7dde73df58636c3aa243fcfc26d3b8f51f 100644
--- a/packages/xpub-ui/src/atoms/Button.local.scss
+++ b/packages/xpub-ui/src/atoms/Button.local.scss
@@ -1,17 +1,100 @@
.root {
- text-transform: uppercase;
- border: none;
- font-size: inherit;
- padding: 10px 20px;
- cursor: pointer;
+ 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;
+ }
+
+ &: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;
+ }
+ }
+ }
}
.primary {
- background-color: var(--primary-color);
- color: white;
+ background-color: var(--color-primary);
+ color: white;
}
.disabled {
- background-color: gray;
- color: white;
+ // 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;
+ }
+ }
+}
+
+
+@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 3b6f369c014b9af7f48769d2e64f2a3c35c33c87..8072e1425a99a03e6d9056bac8291cb23199d439 100644
--- a/packages/xpub-ui/src/atoms/Checkbox.local.scss
+++ b/packages/xpub-ui/src/atoms/Checkbox.local.scss
@@ -1,21 +1,58 @@
.root {
- display: flex;
- align-items: center;
- cursor: pointer;
+ 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: 1rem;
+ margin-right: 2.7em;
}
.root:not(.inline):not(:last-child) {
- margin-bottom: 0.5rem;
+ margin-bottom: 0.5rem;
}
-.input {
- margin-right: 0.25rem;
+.root .input {
+ 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;
+}
+
+.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 {
+ 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/packages/xpub-ui/src/atoms/File.local.scss b/packages/xpub-ui/src/atoms/File.local.scss
index ce07107f1baa0ed11859a46e7d46b865b2b158f4..ef09051e95e3b1f35991e8196b66cd8f77ccb342 100644
--- a/packages/xpub-ui/src/atoms/File.local.scss
+++ b/packages/xpub-ui/src/atoms/File.local.scss
@@ -1,33 +1,106 @@
.root {
- display: inline-flex;
- flex-direction: column;
- align-items: center;
-}
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ margin-bottom: 2em;
-.icon {
- width: 70px;
- height: 100px;
- background: #ddd;
- position: relative;
- margin: 5px;
+ margin-right: 3em;
+ width: 20ch;
+
+&:before, &:after {
+ transition: transform 0.5s;
+ transition: transform 0.3s;
+ cursor: pointer;
}
-.extension {
- position: absolute;
- top: 20px;
- right: 0;
- left: 20px;
- text-align: center;
- text-transform: uppercase;
- background: #888;
- color: white;
- font-size: 12px;
- padding: 2px;
-}
+ &: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;
+ }
+
+ .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;
+ }
+
+ &:hover {
+ .extension {
+ background: white;
+ color: var(--color-primary);
+ border-right: 2px solid #ddd;
+ }
+
-.name {
- font-style: italic;
- font-size: 90%;
- color: gray;
- margin: 5px;
+ .icon {
+ background: var(--color-primary);
+ transform: skewY(6deg) rotate(-6deg);
+ }
+ &: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 03cdb9f31c7ab2b820e8a317ab170a9eee772970..53cbdc237c8b96798b65d5f9c9104df74355bb8a 100644
--- a/packages/xpub-ui/src/atoms/Menu.local.scss
+++ b/packages/xpub-ui/src/atoms/Menu.local.scss
@@ -1,57 +1,89 @@
+.root button {
+ font-family: var(--font-author);
+}
+
.menuContainer {
- position: relative;
+ position: relative;
+
}
.opener {
- border: none;
- cursor: pointer;
- background: transparent;
- font-size: inherit;
- display: flex;
- align-items: center;
- /*min-width: 10em;*/
- /*justify-content: end;*/
+ 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;
+}
+
+.open .opener {
+ border-left: 2px solid var(--color-primary);
}
.opener:hover,
+.open .opener,
.opener:hover .placeholder {
- color: cornflowerblue;
+ color: var(--color-primary);
}
.placeholder {
- color: gray;
+ color: #aaa;
+ font-family: var(--font-interface);
+ font-weight: 400;
}
.arrow {
- margin-left: 10px;
- font-size: 50%;
+ margin-left: 10px;
+ font-size: 50%;
+ transform: scaleY(1.2) scaleX(2.2);
+ transition: transform 0.2s;
}
.open .arrow {
- transform: scaleY(-1)
+ transform: scaleX(2.2) scaleY(-1.2);
}
.menu {
- position: absolute;
- top: 0;
- left: 0;
- min-width: 10em;
- background-color: white;
- border-left: 1px solid #aaa;
- border-bottom: 1px solid #aaa;
- /*columns: 2 auto;*/
+ 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;
+}
+
+
+
+.open .menu {
+ max-height: 3000px;
}
.option {
- cursor: pointer;
- padding: 10px;
- white-space: nowrap;
+ font-family: var(--font-author);
+ cursor: pointer;
+ padding: 10px;
+ white-space: nowrap;
}
.option:hover {
- color: cornflowerblue;
+ color: var(--color-primary);
}
.active {
- color: cornflowerblue;
+
+ font-weight: 600;
}
diff --git a/packages/xpub-ui/src/atoms/Radio.local.scss b/packages/xpub-ui/src/atoms/Radio.local.scss
index 596c321cca1958f0d522e148e450a115430d1a5d..4884c311c9ffd8f1724b81219c1d1254eabab8b6 100644
--- a/packages/xpub-ui/src/atoms/Radio.local.scss
+++ b/packages/xpub-ui/src/atoms/Radio.local.scss
@@ -1,21 +1,68 @@
.root {
- display: flex;
- align-items: center;
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ transition: all 2s;
}
-.inline {
- display: inline-flex;
+.root.inline {
+ display: inline-flex;
}
-.inline:not(:last-child) {
- margin-right: 1rem;
+.root.inline:not(:last-child) {
+ margin-right: 2.7em;
}
.root:not(.inline):not(:last-child) {
- margin-bottom: 0.5rem;
+ margin-bottom: 0.5rem;
}
-.input {
- margin-right: 0.25rem;
+.root .input {
+ 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;
+}
+
+.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);
+ }
+}
+
+.root input:checked+span {
+ font-weight: 500;
+
+ &: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;
}
diff --git a/packages/xpub-ui/src/atoms/Tags.scss b/packages/xpub-ui/src/atoms/Tags.scss
index 57140d0e991f6154071401775893e81186fadbb9..f4f504a39cb40daea1c5c035890c4fead73be48b 100644
--- a/packages/xpub-ui/src/atoms/Tags.scss
+++ b/packages/xpub-ui/src/atoms/Tags.scss
@@ -1,87 +1,135 @@
-.react-tags {
- position: relative;
- padding: 6px 0 0 6px;
- /*border: 1px solid #D1D1D1;*/
- /*border-radius: 1px;*/
+.root {
+ font-family: "Fira Sans Condensed";
+}
- /* shared font styles */
- font-size: 1em;
- line-height: 1.2;
+$color: var(--color-primary);
+$color-back: white;
- /* clicking anywhere will focus the input */
- cursor: text;
+@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;
+}
+
+.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;
}
.react-tags.is-focused {
- border-color: #B1B1B1;
+ border-color: var(--color-primary);
}
.react-tags__selected {
- display: inline;
+ display: inline;
}
.react-tags__selected-tag {
- display: inline-block;
- box-sizing: border-box;
- margin: 0 6px 6px 0;
- padding: 6px 8px;
- border: 1px solid #D1D1D1;
- border-radius: 2px;
- background: #F1F1F1;
-
- /* match the font styles */
- font-size: inherit;
- line-height: inherit;
+ 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';
- color: #AAA;
- margin-left: 8px;
+ 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 {
- border-color: #B1B1B1;
+ @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 */
- padding: 7px 2px;
- margin-bottom: 6px;
- /* prevent autoresize overflowing the container */
- max-width: 100%;
-}
+ /* match tag layout */
+ margin: 0 1em 1em 0;
+ padding: 0.1em 0.3em;
-@media screen and (min-width: 30em) {
+ /* prevent autoresize overflowing the container */
+ max-width: 100;
+ // @include realBorder(var(--color-primary), white);
- .react-tags__search {
- /* this will become the offsetParent for suggestions */
- position: relative;
}
+@media screen and (min-width: 30em) {
+
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
}
.react-tags__search input {
- /* prevent autoresize overflowing the container */
- max-width: 100%;
+ /* 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);
- /* 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;
- opacity: 0.5;
}
.react-tags__search input::-ms-clear {
- display: none;
+ display: none;
}
diff --git a/packages/xpub-ui/src/atoms/TextField.local.scss b/packages/xpub-ui/src/atoms/TextField.local.scss
index 0ea16c51e3504c3ace249ecef42a6f352144e42b..2b46d5485bdf323a540fc3f4abc11e023b70ddbd 100644
--- a/packages/xpub-ui/src/atoms/TextField.local.scss
+++ b/packages/xpub-ui/src/atoms/TextField.local.scss
@@ -1,14 +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);
+ }
}
diff --git a/packages/xpub-ui/src/atoms/UploadingFile.local.scss b/packages/xpub-ui/src/atoms/UploadingFile.local.scss
index a1a80d38e1d69ccdeb4d6f7cff334a513ba30d4f..a16c7770f22aeb72bccaea00d27b2ce660745123 100644
--- a/packages/xpub-ui/src/atoms/UploadingFile.local.scss
+++ b/packages/xpub-ui/src/atoms/UploadingFile.local.scss
@@ -1,47 +1,114 @@
.root {
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- opacity: 0.5;
-}
-
-.error {
- color: red;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ margin-bottom: 2em;
+ margin-right: 3em;
+ width: 20ch;
}
.icon {
- 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: 0.5;
- background: lawngreen;
+ 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;
+ }
+}*/
+
+
+.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%);
+
+ &:after {
+ content: "XX%";
+
+ display: block;
+ color: white;
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ }
+}
+
+.error {
+ font-size: 0.8em;
+ letter-spacing: 0.01em;
+ background: var(--color-danger);
+ border: 2px solid white;
+ color: white;
+ opacity: 1;
position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
+ top: 25%;
+ z-index: 4;
+ padding: 0.3em 0.5em;
}
.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;
+ font-style: italic;
+ font-size: 90%;
+ color: gray;
+ margin: 5px;
+ max-width: 20ch;
+}
+
+
+@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 9fb9d6b612b9cc553436a2c77ca692bd98b98aac..3e1d783fa3569de9f19116bf5d53b7f952575bd7 100644
--- a/packages/xpub-ui/src/atoms/ValidatedField.local.scss
+++ b/packages/xpub-ui/src/atoms/ValidatedField.local.scss
@@ -1,15 +1,48 @@
+.root {
+ 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);
+ }
+}
+
+
.messages {
- margin-top: 10px;
+ // 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 {
- color: red;
+ color: var(--color-danger);
}
.warning {
- color: orange;
+ color: var(--color-warn);
+ color: #ee7600;
}
diff --git a/packages/xpub-ui/src/lib/animation.scss b/packages/xpub-ui/src/lib/animation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..62235bdc38f971c1139d0976459659fcf86dc706
--- /dev/null
+++ b/packages/xpub-ui/src/lib/animation.scss
@@ -0,0 +1,23 @@
+@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);
+ }
+}
+
+.rotate {
+ animation: rotate 1s infinite ease-in-out;
+}
diff --git a/packages/xpub-ui/src/molecules/AppBar.js b/packages/xpub-ui/src/molecules/AppBar.js
index ab9443f71b2a0b8efc2f671e2fafb6e26132f54e..c2d7f00967db7a4ca7a6e1d88cce9e7c79e1d343 100644
--- a/packages/xpub-ui/src/molecules/AppBar.js
+++ b/packages/xpub-ui/src/molecules/AppBar.js
@@ -6,7 +6,7 @@ import classes from './AppBar.local.scss'
const AppBar = ({ brandLink, brandName, loginLink, logoutLink, userName }) => (
<div className={classes.root}>
<Link to={brandLink || '/'}
- className={classes.link}>{brandName}</Link>
+ className={classnames(classes.link, classes.logo)}>{brandName}</Link>
<div>
{userName && (
diff --git a/packages/xpub-ui/src/molecules/AppBar.local.scss b/packages/xpub-ui/src/molecules/AppBar.local.scss
index 40bc1c54826d4835033f1384105090268c33e8b7..f43ad5c78ff2f6710e9d402595c06a3c00030f17 100644
--- a/packages/xpub-ui/src/molecules/AppBar.local.scss
+++ b/packages/xpub-ui/src/molecules/AppBar.local.scss
@@ -4,13 +4,31 @@
}
.link {
- color: cornflowerblue;
+ color: var(--color-primary);
+ &:before {
+ // while waiting for the user icon. :D
+ content: "ʕ•ᴥ•ʔ";
+ text-align: center;
+ // letter-spacing: -1px;
+ color: grey;
+ // width: 1em;
+ height: 1em;
+ display: inline-block;
+ margin-right: 0.3em;
+ // background: #aaa;
+
+ }
}
.link:hover {
text-decoration: underline;
+ cursor: pointer;
}
.item {
padding: 1rem;
}
+
+.logo:before {
+ content: "";
+}
diff --git a/packages/xpub-ui/src/molecules/Files.local.scss b/packages/xpub-ui/src/molecules/Files.local.scss
index 1ef498c6a0c689f97056e65bd44bbeec476a5b88..fbee834e69e8c2dcf227b5a351c9441dd1e6eaab 100644
--- a/packages/xpub-ui/src/molecules/Files.local.scss
+++ b/packages/xpub-ui/src/molecules/Files.local.scss
@@ -12,5 +12,5 @@
}
.button:hover {
- color: cornflowerblue;
+ color: var(--color-primary);
}