Commit 6059ca02 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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
parents caaa4597 0f3960cf
......@@ -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
......
@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;
}
......
......@@ -84,3 +84,10 @@
@content;
}
}
@mixin include-keyframes($animation-name) {
@include webkit-prefix(animation-name, $animation-name);
@include keyframes($animation-name) {
@content;
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment