BigW Consortium Gitlab

logo.scss 2.23 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
@mixin tanuki-logo-colors($path-color) {
  fill: $path-color;
  transition: all 0.8s;

  &:hover {
    fill: lighten($path-color, 25%);
    transition: all 0.1s;
  }
}

.tanuki-logo {

  .tanuki-left-ear,
  .tanuki-right-ear,
  .tanuki-nose {
    @include tanuki-logo-colors($tanuki-red);
  }

  .tanuki-left-eye,
  .tanuki-right-eye {
    @include tanuki-logo-colors($tanuki-orange);
  }

  .tanuki-left-cheek,
  .tanuki-right-cheek {
    @include tanuki-logo-colors($tanuki-yellow);
  }

  &.animate {
    .tanuki-shape {
      @include webkit-prefix(animation-duration, 1.5s);
      @include webkit-prefix(animation-iteration-count, infinite);
    }

    .tanuki-left-cheek {
36
      @include include-keyframes(animate-tanuki-left-cheek) {
37 38 39
        0%, 10%, 100% {
          fill: lighten($tanuki-yellow, 25%);
        }
40

41 42 43 44 45 46 47
        90% {
          fill: $tanuki-yellow;
        }
      }
    }

    .tanuki-left-eye {
48 49 50 51
      @include include-keyframes(animate-tanuki-left-eye) {
        10%, 80% {
          fill: $tanuki-orange;
        }
52

53 54 55 56
        20%, 90% {
          fill: lighten($tanuki-orange, 25%);
        }
      }
57 58 59
    }

    .tanuki-left-ear {
60 61 62 63
      @include include-keyframes(animate-tanuki-left-ear) {
        10%, 80% {
          fill: $tanuki-red;
        }
64

65 66 67 68
        20%, 90% {
          fill: lighten($tanuki-red, 25%);
        }
      }
69 70 71
    }

    .tanuki-nose {
72
      @include include-keyframes(animate-tanuki-nose) {
73 74 75
        20%, 70% {
          fill: $tanuki-red;
        }
76

77 78 79 80 81 82 83
        30%, 80% {
          fill: lighten($tanuki-red, 25%);
        }
      }
    }

    .tanuki-right-eye {
84 85 86 87
      @include include-keyframes(animate-tanuki-right-eye) {
        30%, 60% {
          fill: $tanuki-orange;
        }
88

89 90 91 92
        40%, 70% {
          fill: lighten($tanuki-orange, 25%);
        }
      }
93 94 95
    }

    .tanuki-right-ear {
96 97 98 99
      @include include-keyframes(animate-tanuki-right-ear) {
        30%, 60% {
          fill: $tanuki-red;
        }
100

101 102 103 104
        40%, 70% {
          fill: lighten($tanuki-red, 25%);
        }
      }
105 106 107
    }

    .tanuki-right-cheek {
108
      @include include-keyframes(animate-tanuki-right-cheek) {
109 110 111
        40% {
          fill: $tanuki-yellow;
        }
112

113 114 115 116 117 118
        60% {
          fill: lighten($tanuki-yellow, 25%);
        }
      }
    }
  }
119
}