debian-mirror-gitlab/app/assets/stylesheets/framework/animations.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

278 lines
5.9 KiB
SCSS
Raw Normal View History

2016-06-02 11:05:42 +05:30
// This file is based off animate.css 3.5.1, available here:
// https://github.com/daneden/animate.css/blob/3.5.1/animate.css
2017-08-17 22:00:37 +05:30
//
2016-06-02 11:05:42 +05:30
// animate.css - http://daneden.me/animate
// Version - 3.5.1
// Licensed under the MIT license - http://opensource.org/licenses/MIT
2017-08-17 22:00:37 +05:30
//
2016-06-02 11:05:42 +05:30
// Copyright (c) 2016 Daniel Eden
.animated {
2016-09-29 09:46:39 +05:30
@include webkit-prefix(animation-duration, 1s);
@include webkit-prefix(animation-fill-mode, both);
2016-06-02 11:05:42 +05:30
2016-09-29 09:46:39 +05:30
&.once {
@include webkit-prefix(animation-iteration-count, 1);
}
2016-06-02 11:05:42 +05:30
2016-09-29 09:46:39 +05:30
&.short {
@include webkit-prefix(animation-duration, 321ms);
@include webkit-prefix(animation-fill-mode, none);
2016-06-02 11:05:42 +05:30
}
}
2016-09-29 09:46:39 +05:30
@include keyframes(pulse) {
2017-08-17 22:00:37 +05:30
from,
to {
2016-09-29 09:46:39 +05:30
@include webkit-prefix(transform, scale3d(1, 1, 1));
2016-06-02 11:05:42 +05:30
}
50% {
2016-09-29 09:46:39 +05:30
@include webkit-prefix(transform, scale3d(1.05, 1.05, 1.05));
2016-06-02 11:05:42 +05:30
}
}
.pulse {
2016-09-29 09:46:39 +05:30
@include webkit-prefix(animation-name, pulse);
2016-06-02 11:05:42 +05:30
}
2017-08-17 22:00:37 +05:30
/*
* General hover animations
*/
// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
// Usage: @include transition(width, height 0.3s ease-in-out);
// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
// transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin transition($transitions...) {
2019-07-07 11:18:12 +05:30
$unfolded-transitions: ();
2017-08-17 22:00:37 +05:30
@each $transition in $transitions {
2019-07-07 11:18:12 +05:30
$unfolded-transitions: append($unfolded-transitions, unfold-transition($transition), comma);
2017-08-17 22:00:37 +05:30
}
2019-07-07 11:18:12 +05:30
transition: $unfolded-transitions;
2017-08-17 22:00:37 +05:30
}
2019-07-07 11:18:12 +05:30
@mixin disable-all-animation {
2017-08-17 22:00:37 +05:30
/*CSS transitions*/
transition-property: none !important;
/*CSS transforms*/
transform: none !important;
/*CSS animations*/
animation: none !important;
}
2019-07-07 11:18:12 +05:30
@function unfold-transition ($transition) {
2017-08-17 22:00:37 +05:30
// Default values
$property: all;
$duration: $general-hover-transition-duration;
$easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
2019-07-07 11:18:12 +05:30
$default-properties: ($property, $duration, $easing, $delay);
2017-08-17 22:00:37 +05:30
// Grab transition properties if they exist
2019-07-07 11:18:12 +05:30
$unfolded-transition: ();
@for $i from 1 through length($default-properties) {
2017-08-17 22:00:37 +05:30
$p: null;
@if $i <= length($transition) {
$p: nth($transition, $i);
} @else {
2019-07-07 11:18:12 +05:30
$p: nth($default-properties, $i);
2017-08-17 22:00:37 +05:30
}
2019-07-07 11:18:12 +05:30
$unfolded-transition: append($unfolded-transition, $p);
2017-08-17 22:00:37 +05:30
}
2019-07-07 11:18:12 +05:30
@return $unfolded-transition;
2017-08-17 22:00:37 +05:30
}
2018-03-17 18:26:18 +05:30
.btn {
2017-08-17 22:00:37 +05:30
@include transition(background-color, border-color, color, box-shadow);
}
.dropdown-menu-toggle,
.header-user-avatar {
@include transition(border-color);
}
2018-03-17 18:26:18 +05:30
.note-action-button,
2017-08-17 22:00:37 +05:30
.dropdown-toggle-caret {
@include transition(color);
}
2021-02-22 17:27:13 +05:30
a,
.notification-dot {
2017-08-17 22:00:37 +05:30
@include transition(background-color, color, border);
}
.stage-nav-item {
@include transition(background-color, box-shadow);
}
.dropdown-menu a,
2021-01-03 14:25:43 +05:30
.dropdown-menu button {
2017-08-17 22:00:37 +05:30
transition: none;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in {
animation: fadeIn $fade-in-duration 1;
}
@keyframes fadeInHalf {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
.fade-in-half {
animation: fadeInHalf $fade-in-duration 1;
}
@keyframes fadeInFull {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.fade-in-full {
animation: fadeInFull $fade-in-duration 1;
}
2017-09-10 17:25:29 +05:30
.animation-container {
height: 40px;
overflow: hidden;
&.animation-container-small {
height: 12px;
}
2018-03-17 18:26:18 +05:30
&.animation-container-right {
.skeleton-line-2 {
left: 0;
right: 150px;
}
}
2017-09-10 17:25:29 +05:30
2019-07-07 11:18:12 +05:30
[class^='skeleton-line-'] {
2017-09-10 17:25:29 +05:30
position: relative;
2020-06-23 00:09:42 +05:30
background-color: $gray-50;
2017-09-10 17:25:29 +05:30
height: 10px;
2018-05-09 12:01:36 +05:30
overflow: hidden;
2017-09-10 17:25:29 +05:30
2018-05-09 12:01:36 +05:30
&:not(:last-of-type) {
margin-bottom: 4px;
}
2017-09-10 17:25:29 +05:30
2018-05-09 12:01:36 +05:30
&::after {
content: ' ';
display: block;
animation: blockTextShine 1s linear infinite forwards;
background-repeat: no-repeat;
background-size: cover;
2019-07-07 11:18:12 +05:30
background-image: linear-gradient(to right,
2020-06-23 00:09:42 +05:30
$gray-50 0%,
2020-05-24 23:13:21 +05:30
$gray-10 20%,
2020-06-23 00:09:42 +05:30
$gray-50 40%,
$gray-50 100%);
2018-05-09 12:01:36 +05:30
height: 10px;
}
2017-09-10 17:25:29 +05:30
}
2018-05-09 12:01:36 +05:30
}
2017-09-10 17:25:29 +05:30
2018-05-09 12:01:36 +05:30
$skeleton-line-widths: (
156px,
235px,
200px,
);
2017-09-10 17:25:29 +05:30
2018-05-09 12:01:36 +05:30
@for $count from 1 through length($skeleton-line-widths) {
.skeleton-line-#{$count} {
width: nth($skeleton-line-widths, $count);
2017-09-10 17:25:29 +05:30
}
}
@keyframes blockTextShine {
0% {
transform: translateX(-468px);
}
100% {
transform: translateX(468px);
}
}
2018-11-08 19:23:39 +05:30
.slide-down-enter-active {
transition: transform 0.2s;
}
.slide-down-enter,
.slide-down-leave-to {
transform: translateY(-30%);
}
2019-02-15 15:39:39 +05:30
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
/** COMMON ANIMATION CLASSES **/
.transform-origin-center { @include webkit-prefix(transform-origin, 50% 50%); }
.animate-n-spin { @include webkit-prefix(animation-name, spin); }
.animate-c-infinite { @include webkit-prefix(animation-iteration-count, infinite); }
.animate-t-linear { @include webkit-prefix(animation-timing-function, linear); }
.animate-d-1 { @include webkit-prefix(animation-duration, 1s); }
.animate-d-2 { @include webkit-prefix(animation-duration, 2s); }
/** COMPOSITE ANIMATION CLASSES **/
.gl-spinner {
@include webkit-prefix(animation-name, spin);
@include webkit-prefix(animation-iteration-count, infinite);
@include webkit-prefix(animation-timing-function, linear);
@include webkit-prefix(animation-duration, 1s);
transform-origin: 50% 50%;
}
2019-09-04 21:01:54 +05:30
/* ----------------------------------------------
* Generated by Animista on 2019-4-26 17:40:41
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@keyframes slide-in-fwd-bottom {
0% {
transform: translateZ(-1400px) translateY(800px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
.slide-in-fwd-bottom-enter-active {
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slide-in-fwd-bottom-leave-active {
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both reverse;
}