wordRotator/src/scss/wordRotator.scss

//ActionBar
nav.top-bar.title-bar {
  padding: 0.3rem 0.6rem 0;
}

#action-bar .top-bar-right .menu .action.img a {
  padding-bottom: 0;
  img {
    max-height: 1.8rem;
  }
}

.menu, .dropdown.menu {
  a {
    padding: 0.2rem 0.5rem;
  }
}

#level-number-container {
  z-index: 1;
  transition: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 3px solid white;
  border-radius: 50%;
  visibility: hidden;
  display: table-cell;

  height: 35px;
  width: 35px;
  text-align: center;
  vertical-align: middle;

  &.visible {
    visibility: visible;
  }
  &.in-main-menu{
    background: white;
    border-color: black;

    height: 1em;
    width: 1em;
    min-height: 1em;
    min-width: 1em;
    max-height:1em;
    max-width:1em;
  }

  #level-number {
    transition: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
  }
}

$coinTowerDimension: 28px;
//coin element
.coin-counter {
  display: inline-block;
  position: relative;
  font-size: 1.6rem;
  :after {
    background-image: url('../img/coinTower.png');
    background-size: $coinTowerDimension $coinTowerDimension;
    width: $coinTowerDimension;
    height: $coinTowerDimension;
    display: inline-block;
    content: "";
  }
}

#coin-container {
  height: 30px;
  .coin {
    margin-left: 3px;
    margin-right: 3px;
    //height: 30px;
    max-width:30px;
    display: inline-block;
  }
}

//Segments
$rotationDegrees: (90 180 270 360);
$animationDuration: .25s;

@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);
    }
    100% {
      transform: rotate(#{nth($rotationDegrees, $i)}deg);
    }
  }
  @keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
    0% {
      transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
    }
    100% {
      transform: rotate(#{$startDegree+90}deg);
    }
  }

}

.segment:not(.segment-row):not(.segment-triangle) {
  &.rotating {
    z-index: 10 !important;
    overflow: hidden;

    @for $i from 1 through length($rotationDegrees) {
      &.rotate-#{nth($rotationDegrees, $i)} {
        animation-name: rotate-#{nth($rotationDegrees, $i)};
        animation-duration: $animationDuration;
        animation-fill-mode: forwards;
        animation-timing-function: linear;

        > .child-container {
          > .segment {
            animation-name: rotate-#{450- nth($rotationDegrees, $i)};
            animation-duration: $animationDuration;
            animation-fill-mode: forwards;
            animation-direction: reverse;
            animation-timing-function: linear;

            @for $j from 1 through length($rotationDegrees) {
              $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
              &.rotate-#{nth($rotationDegrees, $j)} {
                animation-name: rotate-#{$animationName};
              }
            }
          }
        }

        &.reverse{
          //animation-name: rotate-reverse-#{(nth($rotationDegrees, $i))%360+90};
          animation-name: rotate-reverse-#{nth($rotationDegrees, $i)};
          > .child-container {
            > .segment {
              //animation-name: rotate-reverse-#{360- (nth($rotationDegrees, $i)%360)};
              animation-name: rotate-reverse-#{(540- nth($rotationDegrees, $i))%360+90};
              @for $j from 1 through length($rotationDegrees) {
                $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
                &.rotate-#{nth($rotationDegrees, $j)} {
                  animation-name: rotate-reverse-#{($animationName+90)%360+90};
                }
              }
            }
          }
        }
      }
    }
  }

  &:not(.rotating) {
    @for $i from 1 through length($rotationDegrees) {
      &.rotate-#{nth($rotationDegrees, $i)} {
        transform: rotate(#{nth($rotationDegrees, $i)}deg);
        background-color: white;
        z-index: 1;
        > .child-container {
          > .segment {
            transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
            background-color: white;
            z-index: 1;

            @for $j from 1 through length($rotationDegrees) {
              $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
              @if $animationName==0 {
                $animationName: 360;
              }

              &.rotate-#{nth($rotationDegrees, $j)} {
                transform: rotate(#{$animationName}deg);
                background-color: white;
                z-index: 1;

                &.rotating {
                  animation-name: rotate-#{$animationName};
                  animation-duration: $animationDuration;
                  animation-fill-mode: forwards;
                  animation-timing-function: linear;

                  &.reverse{
                    animation-name: rotate-reverse-#{$animationName};
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

#level {
  user-select: none;
  white-space: nowrap;
  transition: none;
  max-width: 100%;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  //width: 100%;

  * {
    transition: none;
  }
  overflow-y: visible;
}

.segment {
  vertical-align: top;
  white-space: initial;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  transition: none;
  user-select: none;
  z-index: 1;
  background-color: white;
  line-height: 0;

  &.segment-row {
    display: block;
    width: 100%;
    animation: none !important;
    white-space: nowrap;
  }

  &.segment-leaf {
    background-color: transparent;
    min-width: 1em;
    padding: 0.8em;
    &:before {
      content: " ";
      display: block;
      padding-top: 100%;
    }
    .leaf-element {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 1.5em;
      top: 0;
      left: 0;
    }
  }

  &.segment-parent {
    border: solid 1px #a9a9a9;
    border-radius: 3px;
    padding: 1px;

    &.layer-2 {
      border: solid 3px #000000;
    }
  }

  &.segment-triangle {
    > .child-container {
      > .segment-parent {
        //border: solid 3px #000000;
        //position: relative;
      }
    }
  }
}

#site-content > :not(.won) .segment.locked {
  border-color: #3adb76;
  background-color: #9ffbb5 !important;
  > .child-container > .segment-leaf {
    border-color: #3adb76;
    background-color: #9ffbb5 !important;
  }
}

//Won-screen
#site-content > :not(.won) {
  .show-when-won {
    //visibility: hidden;
    display: none;
    //transition: none;
    //* {
    //  transition: none;
    //}
  }
}

.level-container {
  //flex: 1;
  transition: none;
}

.won {
  .level-container {
    //height: 60%;
  }
  .show-when-won {
    //visibility: initial;
  }
  .show-while-playing {
    display: none;
  }
}

.text-right {
  text-align: right;
}
#continue-button{
  margin-bottom: 2px;
}