app/assets/stylesheets/framework/logo.scss


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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

@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 {
    @include tanuki-logo-colors($tanuki-red);
  }

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

  .chin {
    @include tanuki-logo-colors($tanuki-yellow);
  }

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

    .tanuki {
      @include include-keyframes(animate-tanuki-base) {
        0%,
        50% {
          fill: $tanuki-red;
        }

        25% {
          fill: lighten($tanuki-red, 25%);
        }
      }
    }

    .right-cheek {
      @include include-keyframes(animate-tanuki-right-cheek) {
        25%,
        75% {
          fill: $tanuki-orange;
        }

        50% {
          fill: lighten($tanuki-orange, 25%);
        }
      }
    }

    .chin {
      @include include-keyframes(animate-tanuki-chin) {
        50%,
        100% {
          fill: $tanuki-yellow;
        }

        75% {
          fill: lighten($tanuki-yellow, 25%);
        }
      }
    }

    .left-cheek {
      @include include-keyframes(animate-tanuki-left-cheek) {
        25%,
        75% {
          fill: $tanuki-orange;
        }

        100% {
          fill: lighten($tanuki-orange, 25%);
        }
      }
    }
  }
}