Skip to content
Snippets Groups Projects
Commit c95a4752 authored by Alf Eaton's avatar Alf Eaton
Browse files

Fix stylelint errors

parent baa44739
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 157 additions and 163 deletions
packages/component-app/src/components/App.local.scss
+ 3
− 10
View file @ c95a4752
: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;
}
......
packages/component-dashboard/src/components/DashboardItem.local.scss
+ 2
− 1
View file @ c95a4752
......@@ -3,7 +3,8 @@
align-items: center;
}
.main, .roles {
.main,
.roles {
padding-left: 40px;
}
......
packages/component-dashboard/src/components/UploadManuscript.local.scss
+ 1
− 0
View file @ c95a4752
......@@ -38,6 +38,7 @@
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
......
packages/xpub-styleguide/src/components/Wrapper.local.scss
+ 2
− 3
View file @ c95a4752
: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;
......
packages/xpub-ui/src/atoms/Button.local.scss
+ 46
− 43
View file @ c95a4752
.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;
// }
//}
packages/xpub-ui/src/atoms/Checkbox.local.scss
+ 5
− 7
View file @ c95a4752
......@@ -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;
......
packages/xpub-ui/src/atoms/File.local.scss
+ 10
− 9
View file @ c95a4752
......@@ -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);
}
}
......
packages/xpub-ui/src/atoms/Menu.local.scss
+ 2
− 2
View file @ c95a4752
......@@ -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;
}
packages/xpub-ui/src/atoms/Radio.local.scss
+ 9
− 9
View file @ c95a4752
......@@ -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%);
......
packages/xpub-ui/src/atoms/Tags.scss
+ 13
− 14
View file @ c95a4752
/*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);
......
packages/xpub-ui/src/atoms/TextField.local.scss
+ 1
− 0
View file @ c95a4752
......@@ -18,6 +18,7 @@
padding: 0;
border-bottom: 1px dashed #aaa;
font-family: "Vollkorn", serif;
&:hover,
&:focus {
outline-style: none;
......
packages/xpub-ui/src/atoms/UploadingFile.local.scss
+ 41
− 43
View file @ c95a4752
......@@ -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);
// }
//}
packages/xpub-ui/src/atoms/ValidatedField.local.scss
+ 4
− 4
View file @ c95a4752
.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);
}
packages/xpub-ui/src/lib/animation.scss
+ 13
− 13
View file @ c95a4752
/*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;
}
}
packages/xpub-ui/src/lib/colors.local.scss
+ 0
− 2
View file @ c95a4752
......@@ -2,5 +2,3 @@
background-color: cornflowerblue;
color: white;
}
packages/xpub-ui/src/molecules/AppBar.local.scss
+ 5
− 3
View file @ c95a4752
......@@ -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: "";
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment