scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fixed linting errors

Browse source
This commit is contained in:
Linda 2018-09-07 16:45:17 -04:00
parent b582b31491
commit 7313f26530
1 changed files with 47 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/components/modal/addtostudio/modal.scss
View file

@ -92,6 +92,7 @@
.studio-selector-button { .studio-selector-button {
display: flex; display: flex;
position: relative; position: relative;
transition: all .5s;
margin: .21875rem .21875rem; margin: .21875rem .21875rem;
border-radius: .5rem; border-radius: .5rem;
background-color: $ui-white; background-color: $ui-white;
@ -101,7 +102,7 @@
height: 2.5rem; height: 2.5rem;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
transition: all .5s;
} }
.studio-selector-button-text { .studio-selector-button-text {
@ -164,72 +165,74 @@
background-color: $ui-blue; background-color: $ui-blue;
} }
.studio-status-icon-plus-img, .studio-status-icon-checkmark-img, .studio-status-icon-spinner { .studio-status-icon-plus-img,
width: 1.4rem; .studio-status-icon-checkmark-img,
height: 1.4rem; .studio-status-icon-spinner {
transform-origin: center; animation-direction: normal;
animation-direction: normal; width: 1.4rem;
height: 1.4rem;
transform-origin: center;
} }
.studio-status-icon-with-animation { .studio-status-icon-with-animation {
animation-duration: .25s; animation-name: bump;
animation-name: bump; animation-duration: .25s;
animation-iteration-count: 1; animation-timing-function: cubic-bezier(.3, -3, .6, 3);
animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3); animation-iteration-count: 1;
} }
.studio-status-icon-spinner { .studio-status-icon-spinner {
/* This class can be used on an icon that should spin. /* This class can be used on an icon that should spin.
It first plays the intro animation, then spins forever. */ It first plays the intro animation, then spins forever. */
animation-name: intro, spin; animation-name: intro, spin;
-webkit-animation-name: intro, spin;
animation-duration: .25s, .5s; animation-duration: .25s, .5s;
-webkit-animation-duration: .25s, .5s; animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear;
animation-iteration-count: 1, infinite;
-webkit-animation-iteration-count: 1, infinite;
animation-delay: 0s, .25s; animation-delay: 0s, .25s;
animation-iteration-count: 1, infinite;
-webkit-animation-name: intro, spin;
-webkit-animation-duration: .25s, .5s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-delay: 0s, .25s; -webkit-animation-delay: 0s, .25s;
animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear; -webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear;
-webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear;
} }
@keyframes intro { @keyframes intro {
0% { 0% {
transform: scale(0); transform: scale(0);
-webkit-transform: scale(0); opacity: 0;
opacity: 0; -webkit-transform: scale(0);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
-webkit-transform: scale(1); opacity: 1;
opacity: 1; -webkit-transform: scale(1);
} }
} }
/* intro and bump look the same but for some reason, /* intro and bump look the same but for some reason,
I need two keyframes and if I don't make two separate ones the I need two keyframes and if I don't make two separate ones the
animations don't get called. */ animations don't get called. */
@keyframes bump { @keyframes bump {
0% { 0% {
transform: scale(0); transform: scale(0);
-webkit-transform: scale(0); opacity: 0;
opacity: 0; -webkit-transform: scale(0);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
-webkit-transform: scale(1); opacity: 1;
opacity: 1; -webkit-transform: scale(1);
} }
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0); transform: rotate(0);
-webkit-transform: rotate(0); -webkit-transform: rotate(0);
} }
100% { 100% {
transform: rotate(359deg); transform: rotate(359deg);
-webkit-transform: rotate(359deg); -webkit-transform: rotate(359deg);
} }
} }