Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update to pc

Browse Source
This commit is contained in:
silas
2018-06-17 20:05:09 +02:00
parent ac0363f28b
commit f4ce1d54ee
25 changed files with 467 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/scss/wordRotator.scss
View File

@@ -1,25 +1,35 @@
$rotationDegrees: (90 180 270 360);
@for $i from 1 through 10 {
$value: percentage($i/10);
.height-#{$i}0 {
height: $value;
}
.width-#{$i}0 {
width: $value;
}
}
@for $i from 1 through length($rotationDegrees) {
$startDegree: ((nth($rotationDegrees, $i)+270)%360);
@keyframes rotate-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{$startDegree}deg)
transform: rotate(#{$startDegree}deg);
background-color: transparent;
z-index: 0;
}
99% {
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: transparent;
z-index: 0;
}
100% {
transform: rotate(#{nth($rotationDegrees, $i)}deg)
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
}
}
//@keyframes rotate-minus-#{nth($rotationDegrees, $i)} {
// 0% {
// transform: rotate(#{nth($rotationDegrees, $i)}deg)
// }
// 100% {
// transform: rotate(calc(90 - #{nth($rotationDegrees, $i)}) deg)
// }
//}
}
.segment:not(.segment-row) {
@@ -52,24 +62,39 @@ $rotationDegrees: (90 180 270 360);
}
}
#level {
white-space: nowrap;
transition: none;
max-width: 100%;
* {
transition: none;
}
overflow-y: visible;
}
.segment {
white-space: initial;
cursor: pointer;
display: inline-block;
text-align: center;
position: relative;
transition: .0s;
transition: none;
user-select: none;
z-index: 1;
background-color: white;
&.segment-row {
display: block;
width: 100%;
animation: none !important;
white-space: nowrap;
}
&.segment-leaf {
min-width: 17px;
height: 34px;
line-height: 34px;
min-width: 1em;
height: 2em;
line-height: 2em;
}
&.segment-parent {
@@ -79,44 +104,26 @@ $rotationDegrees: (90 180 270 360);
width: 50%;
}
}
}
//&.rotate-0 {
// animation-name: rotate-360;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(360deg);
// .segment {
// transform: rotate(-360deg);
// }
//}
//
//&.rotate-90 {
// animation-name: rotate-90;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(90deg);
// .segment {
// transform: rotate(-90deg);
// }
//}
//
//&.rotate-180 {
// animation-name: rotate-180;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(180deg);
// .segment {
// transform: rotate(-180deg);
// }
//}
//
//&.rotate-270 {
// animation-name: rotate-270;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(270deg);
// .segment {
// transform: rotate(-270deg);
// }
//}
}
//Won-screen
.show-when-won {
visibility: hidden;
transition: none;
* {
transition: none;
}
}
.won {
.show-when-won {
visibility: initial;
}
}
#continue-button {
//width: 80%;
//margin-left: 10%;
//margin-right: 10%;
//margin-bottom: 20%
}