Merge branch 'remove-unique-keyframes' into 'master'

Replace unique keyframes mixin with specific keyframe animation names ## What does this MR do? Replaces `unique-keyframes` mixin with `include-keyframes` mixin ## Are there points in the code the reviewer needs to double check? Shouldn't be 👍🏻 ## Why was this MR needed? Some users had GitLab hosted in a distributed environment that makes `unique-keyframes` a non-viable implementation. The randomized animation names from `unique-keyframes` was not being picked up by the different servers which resulted in 404 errors. ## Screenshots (if relevant) None ## Does this MR meet the acceptance criteria? - [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added - Tests - [x] All builds are passing - [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html) - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if you do - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? Closes #22629 See merge request !6603

Merge branch 'remove-unique-keyframes' into 'master'
6059ca02 · Annabel Dunstone Gray · caaa4597 · 0f3960cf · 6059ca02 · 6059ca02
Commit 6059ca02 authored Oct 13, 2016 by Annabel Dunstone Gray
Show whitespace changes
Inline Side-by-side

Showing with 43 additions and 41 deletions

CHANGELOG CHANGELOG +1 -0

logo.scss app/assets/stylesheets/framework/logo.scss +35 -41

mixins.scss app/assets/stylesheets/framework/mixins.scss +7 -0

No files found.
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -29,6 +29,7 @@ v 8.13.0 (unreleased)
  - Keep refs for each deployment
  - Allow browsing branches that end with '.atom'
  - Log LDAP lookup errors and don't swallow unrelated exceptions. !6103 (Markus Koller)
+  - Replace unique keyframes mixin with keyframe mixin with specific names (ClemMakesApps)
  - Add more tests for calendar contribution (ClemMakesApps)
  - Update Gitlab Shell to fix some problems with moving projects between storages
  - Cache rendered markdown in the database, rather than Redis

--- a/app/assets/stylesheets/framework/logo.scss
+++ b/app/assets/stylesheets/framework/logo.scss
-@mixin unique-keyframes {
-  $animation-name: unique-id();
-  @include webkit-prefix(animation-name, $animation-name);
-
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
 @mixin tanuki-logo-colors($path-color) {
  fill: $path-color;
  transition: all 0.8s;
@@ -20,28 +8,6 @@
  }
 }

-@mixin tanuki-second-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    10%, 80% {
-      fill: #{$tanuki-color}
-    }
-    20%, 90% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
-@mixin tanuki-forth-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    30%, 60% {
-      fill: #{$tanuki-color};
-    }
-    40%, 70% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
 .tanuki-logo {

  .tanuki-left-ear,
@@ -67,7 +33,7 @@
    }

    .tanuki-left-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-left-cheek) {
        0%, 10%, 100% {
          fill: lighten($tanuki-yellow, 25%);
        }
@@ -78,15 +44,29 @@
    }

    .tanuki-left-eye {
-      @include tanuki-second-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-left-eye) {
+        10%, 80% {
+          fill: $tanuki-orange;
+        }
+        20%, 90% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
    }

    .tanuki-left-ear {
-      @include tanuki-second-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-left-ear) {
+        10%, 80% {
+          fill: $tanuki-red;
+        }
+        20%, 90% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
    }

    .tanuki-nose {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-nose) {
        20%, 70% {
          fill: $tanuki-red;
        }
@@ -97,15 +77,29 @@
    }

    .tanuki-right-eye {
-      @include tanuki-forth-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-right-eye) {
+        30%, 60% {
+          fill: $tanuki-orange;
+        }
+        40%, 70% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
    }

    .tanuki-right-ear {
-      @include tanuki-forth-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-right-ear) {
+        30%, 60% {
+          fill: $tanuki-red;
+        }
+        40%, 70% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
    }

    .tanuki-right-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-right-cheek) {
        40% {
          fill: $tanuki-yellow;
        }

--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -84,3 +84,10 @@
    @content;
  }
 }
+
+@mixin include-keyframes($animation-name) {
+  @include webkit-prefix(animation-name, $animation-name);
+  @include keyframes($animation-name) {
+    @content;
+  }
+}