lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix(style-lint): Bump stylelint and config to latest, fix lints

renovate/lint-staged-8.x
Ben Woosley 7 years ago
parent
ed5ad6cb1c
commit
7acb971c05
No known key found for this signature in database GPG Key ID: 4D8CA4BA18040906
7 changed files with 147 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .stylelintignore
  2. 18
      app/animated_checkmark.scss
  3. 57
      app/app.global.scss
  4. 34
      app/keyframes.scss
  5. 117
      app/tooltip.scss
  6. 24
      app/variables.scss
  7. 4
      package.json

1
.stylelintignore
View File

@ -0,0 +1 @@
app/reset.scss

18
app/animated_checkmark.scss
View File

@ -1,4 +1,4 @@
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); $curve: cubic-bezier(0.65, 0, 0.45, 1);
.checkmark__circle { .checkmark__circle {
stroke-dasharray: 166; stroke-dasharray: 166;
@ -7,7 +7,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
stroke-miterlimit: 10; stroke-miterlimit: 10;
stroke: $green; stroke: $green;
fill: none; fill: none;
animation: stroke .6s $curve forwards; animation: stroke 0.6s $curve forwards;
} }
.checkmark { .checkmark {
@ -17,15 +17,15 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
stroke-width: 2; stroke-width: 2;
stroke: #fff; stroke: #fff;
stroke-miterlimit: 10; stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px $green; box-shadow: inset 0 0 0 $green;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
} }
.checkmark__check { .checkmark__check {
transform-origin: 50% 50%; transform-origin: 50% 50%;
stroke-dasharray: 48; stroke-dasharray: 48;
stroke-dashoffset: 48; stroke-dashoffset: 48;
animation: stroke .3s $curve .8s forwards; animation: stroke 0.3s $curve 0.8s forwards;
} }
@keyframes stroke { @keyframes stroke {
@ -35,9 +35,11 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
} }
@keyframes scale { @keyframes scale {
0%, 100% { 0%,
100% {
transform: none; transform: none;
} }
50% { 50% {
transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1);
} }
@ -45,6 +47,6 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
@keyframes fill { @keyframes fill {
100% { 100% {
box-shadow: inset 0px 0px 0px 30px $green; box-shadow: inset 0 0 0 30px $green;
} }
} }

57
app/app.global.scss
View File

@ -20,13 +20,16 @@ body {
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
font-family: 'Roboto'; font-family: 'Roboto', Arial, Helvetica, sans-serif;
} }
// disable the pinball scrollers for windows // disable the pinball scrollers for windows
*, input[type=text], input[type=number] { *,
&::-webkit-inner-spin-button, &::-webkit-outer-spin-button { input[type=text],
input[type=number] {
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
} }
@ -60,15 +63,18 @@ body {
opacity: 1; opacity: 1;
stroke: $main; stroke: $main;
} }
15%{
15% {
opacity: 1; opacity: 1;
stroke: $main; stroke: $main;
} }
70%{
70% {
opacity: 1; opacity: 1;
stroke: $main; stroke: $main;
} }
100%{
100% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
opacity: 1; opacity: 1;
stroke: darken($main, 10%); stroke: darken($main, 10%);
@ -83,26 +89,19 @@ body {
// buttons // buttons
.buttonPrimary, .buttonSecondary { .buttonPrimary,
.buttonSecondary {
-webkit-user-select: none; -webkit-user-select: none;
cursor: pointer; cursor: pointer;
display: block; display: block;
padding-left: 30px; padding: 18px 30px 15px;
padding-right: 30px;
padding-top: 18px;
padding-bottom: 15px;
border-radius: 2px; border-radius: 2px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
letter-spacing: 1.5px; letter-spacing: 1.5px;
transition: none; transition: none;
position: relative; position: relative;
color: white; color: $white;
&:active {
transform: translate(0px, 3px);
outline: 0;
}
} }
.buttonPrimary { .buttonPrimary {
@ -110,7 +109,7 @@ body {
box-shadow: 0 3px 0 0 darken($main, 10%); box-shadow: 0 3px 0 0 darken($main, 10%);
&:active { &:active {
box-shadow: inset 0 1px 1px 1px darken($main, 10%); box-shadow: inset 0 1px 1px 1px darken($main, 10%);
} }
} }
@ -129,10 +128,16 @@ body {
box-shadow: 0 3px 0 0 darken($secondary, 10%); box-shadow: 0 3px 0 0 darken($secondary, 10%);
&:active { &:active {
box-shadow: inset 0 1px 1px 1px darken($secondary, 10%); box-shadow: inset 0 1px 1px 1px darken($secondary, 10%);
} }
} }
.buttonPrimary:active,
.buttonSecondary:active {
transform: translate(0, 3px);
outline: 0;
}
.buttonContainer.circleContainer { .buttonContainer.circleContainer {
display: inline-block; display: inline-block;
width: auto; width: auto;
@ -162,7 +167,7 @@ body {
.buttonContainer .small.active { .buttonContainer .small.active {
box-shadow: inset 0 1px 1px 1px #1f4b2e; box-shadow: inset 0 1px 1px 1px #1f4b2e;
transform: translate(0px, 3px); transform: translate(0, 3px);
outline: 0; outline: 0;
background: #002280; background: #002280;
} }
@ -181,9 +186,9 @@ body {
} }
// each node in the map // each node in the map
.network-node { // .network-node {
//
} // }
// each channel in the map // each channel in the map
.network-link { .network-link {
@ -191,12 +196,12 @@ body {
} }
.active-peer { .active-peer {
fill: #5589F3; fill: #5589f3;
} }
.active-channel { .active-channel {
opacity: 1; opacity: 1;
stroke: #88D4A2; stroke: #88d4a2;
stroke-width: 15; stroke-width: 15;
stroke-dasharray: 100; stroke-dasharray: 100;
animation: dash 2.5s infinite linear; animation: dash 2.5s infinite linear;

34
app/keyframes.scss
View File

@ -2,13 +2,15 @@
@keyframes fadeinOutD6 { @keyframes fadeinOutD6 {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50% { 50% {
transform: rotate(6deg); transform: rotate(6deg);
} }
100% { 100% {
transform: rotate(0deg); transform: rotate(0deg);
} }
} }
@ -16,28 +18,30 @@
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50% { 50% {
transform: rotate(13deg); transform: rotate(13deg);
} }
100% { 100% {
transform: rotate(0deg); transform: rotate(0deg);
} }
} }
@keyframes colorchange { @keyframes colorchange {
0% { color: $white; } 0% { color: $white; }
25% { color: $gold; } 25% { color: $gold; }
50% { color: $white; } 50% { color: $white; }
75% { color: $gold; } 75% { color: $gold; }
100% { color: $white; } 100% { color: $white; }
} }
@keyframes spin { @keyframes spin {
from { from {
transform:rotate(0deg) transform: rotate(0deg);
} }
to { to {
transform:rotate(360deg); transform: rotate(360deg);
} }
} }

117
app/tooltip.scss
View File

@ -1,10 +1,12 @@
/* Tooltips */ /* Tooltips */
[data-hint] { [data-hint] {
position: relative; position: relative;
/*display: inline-block;*/
// display: inline-block;
} }
[data-hint]:before,
[data-hint]:after { [data-hint]::before,
[data-hint]::after {
position: absolute; position: absolute;
will-change: transform; will-change: transform;
visibility: hidden; visibility: hidden;
@ -14,19 +16,16 @@
transition: 0.2s ease; transition: 0.2s ease;
transition-delay: 0ms; transition-delay: 0ms;
} }
[data-hint]:hover:before,
[data-hint]:hover:after { [data-hint]::before {
visibility: visible;
opacity: 1;
}
[data-hint]:before {
content: ''; content: '';
position: absolute; position: absolute;
background: transparent; background: transparent;
border: 6px solid transparent; border: 6px solid transparent;
z-index: 900006; z-index: 900006;
} }
[data-hint]:after {
[data-hint]::after {
content: attr(data-hint); content: attr(data-hint);
background: #404040; background: #404040;
color: #e0e0e0; color: #e0e0e0;
@ -40,94 +39,122 @@
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
font-style: inherit; font-style: inherit;
font-family: 'Noto Sans','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif; font-family: 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}
[data-hint]:hover::before,
[data-hint]:hover::after {
visibility: visible;
opacity: 1;
} }
.hint--bottom:before,
.hint--bottom-left:before { .hint--bottom::before,
.hint--bottom-left::before {
border-bottom-color: #404040; border-bottom-color: #404040;
} }
.hint--top:before,
.hint--top-left:before { .hint--top::before,
.hint--top-left::before {
border-top-color: #404040; border-top-color: #404040;
} }
.hint--bottom:before {
.hint--bottom::before {
margin-top: -12px; margin-top: -12px;
} }
.hint--bottom:after {
.hint--bottom::after {
margin-left: -18px; margin-left: -18px;
} }
.hint--bottom:before,
.hint--bottom:after { .hint--bottom::before,
.hint--bottom::after {
top: 100%; top: 100%;
left: 50%; left: 50%;
} }
.hint--bottom:hover:after,
.hint--bottom:hover:before { .hint--bottom:hover::after,
.hint--bottom:hover::before {
-webkit-transform: translateY(8px); -webkit-transform: translateY(8px);
transform: translateY(8px); transform: translateY(8px);
} }
.hint--top:before {
.hint--top::before {
margin-bottom: -12px; margin-bottom: -12px;
} }
.hint--top:after {
.hint--top::after {
margin-left: -18px; margin-left: -18px;
} }
.hint--top:before,
.hint--top:after { .hint--top::before,
.hint--top::after {
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
} }
.hint--top:hover:after,
.hint--top:hover:before { .hint--top:hover::after,
.hint--top:hover::before {
-webkit-transform: translateY(-8px); -webkit-transform: translateY(-8px);
transform: translateY(-8px); transform: translateY(-8px);
} }
.hint--top-left:before {
.hint--top-left::before {
margin-bottom: -12px; margin-bottom: -12px;
} }
.hint--top-left:after {
.hint--top-left::after {
margin-right: -6px; margin-right: -6px;
} }
.hint--top-left:before,
.hint--top-left:after { .hint--top-left::before,
.hint--top-left::after {
bottom: 100%; bottom: 100%;
right: 30%; right: 30%;
} }
.hint--top-left:hover:after,
.hint--top-left:hover:before { .hint--top-left:hover::after,
.hint--top-left:hover::before {
-webkit-transform: translateY(-8px); -webkit-transform: translateY(-8px);
transform: translateY(-8px); transform: translateY(-8px);
} }
.hint--bottom-left:before {
.hint--bottom-left::before {
margin-top: -12px; margin-top: -12px;
} }
.hint--bottom-left:after {
.hint--bottom-left::after {
margin-right: -6px; margin-right: -6px;
} }
.hint--bottom-left:before,
.hint--bottom-left:after { .hint--bottom-left::before,
.hint--bottom-left::after {
top: 100%; top: 100%;
right: 30%; right: 30%;
} }
.hint--bottom-left:hover:after,
.hint--bottom-left:hover:before { .hint--bottom-left:hover::after,
.hint--bottom-left:hover::before {
-webkit-transform: translateY(8px); -webkit-transform: translateY(8px);
transform: translateY(8px); transform: translateY(8px);
} }
.hint--left:before {
.hint--left::before {
margin-right: -12px; margin-right: -12px;
margin-top: -6px; margin-top: -6px;
} }
.hint--left:after {
.hint--left::after {
margin-right: -14px; margin-right: -14px;
} }
.hint--left:before,
.hint--left:after { .hint--left::before,
.hint--left::after {
right: 100%; right: 100%;
bottom: 50%; bottom: 50%;
} }
.hint--left:hover:after,
.hint--left:hover:before { .hint--left:hover::after,
.hint--left:hover::before {
-webkit-transform: translateX(-8px); -webkit-transform: translateX(-8px);
transform: translateX(-8px); transform: translateX(-8px);
} }

24
app/variables.scss
View File

@ -4,21 +4,21 @@ $black: #000;
$main: #ebb864; $main: #ebb864;
$secondary: #1d1d1d; $secondary: #1d1d1d;
$grey: #f2f2f2; $grey: #f2f2f2;
$traditionalgrey: #cccccc; $traditionalgrey: #ccc;
$lightgrey: #F7F7F7; $lightgrey: #f7f7f7;
$darkgrey: #EBEBEB; $darkgrey: #ebebeb;
$darkestgrey: #999999; $darkestgrey: #999;
$bluegrey: #2A2D38; $bluegrey: #2a2d38;
$spacegrey: #222E2B; $spacegrey: #222e2b;
$spaceblue: #252832; $spaceblue: #252832;
$darkspaceblue: #1c1e26; $darkspaceblue: #1c1e26;
$spaceborder: #404040; $spaceborder: #404040;
$gold: #DEA326; $gold: #dea326;
$green: #0bb634; $green: #0bb634;
$terminalgreen: #00FF00; $terminalgreen: #0f0;
$red: #FF556A; $red: #ff556a;
$blue: #007bb6; $blue: #007bb6;
$orange: #FF8A65; $orange: #ff8a65;
$yellow: #FFF680; $yellow: #fff680;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); $curve: cubic-bezier(0.65, 0, 0.45, 1);

4
package.json
View File

@ -189,8 +189,8 @@
"sinon": "^2.3.5", "sinon": "^2.3.5",
"spectron": "^3.7.0", "spectron": "^3.7.0",
"style-loader": "^0.18.1", "style-loader": "^0.18.1",
"stylelint": "^7.12.0", "stylelint": "^9.1.1",
"stylelint-config-standard": "^16.0.0", "stylelint-config-standard": "^18.2.0",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"webpack": "^3.7.1", "webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.8.2", "webpack-bundle-analyzer": "^2.8.2",

Write Preview
Loading…
Cancel
Save