46a1ca2889
Added stylelint to static-analysis Updated yarn dependencies CSS Fixes and rule adoptions of stylelint Added stylelint-scss Deduplicated yarn.lock to clear dependencies First round of advanced stylelint rules Mainly Vendor prefix updates related to flex Updates to more webkit specific vendor prefixes Finished all vendor specific fixes Moved now 4 rules to warning Fixed the new scss lint problems More stylelint adaptions after rebase
270 lines
5.6 KiB
SCSS
270 lines
5.6 KiB
SCSS
// This file is based off animate.css 3.5.1, available here:
|
|
// https://github.com/daneden/animate.css/blob/3.5.1/animate.css
|
|
//
|
|
// animate.css - http://daneden.me/animate
|
|
// Version - 3.5.1
|
|
// Licensed under the MIT license - http://opensource.org/licenses/MIT
|
|
//
|
|
// Copyright (c) 2016 Daniel Eden
|
|
|
|
.animated {
|
|
@include webkit-prefix(animation-duration, 1s);
|
|
@include webkit-prefix(animation-fill-mode, both);
|
|
|
|
&.infinite {
|
|
@include webkit-prefix(animation-iteration-count, infinite);
|
|
}
|
|
|
|
&.once {
|
|
@include webkit-prefix(animation-iteration-count, 1);
|
|
}
|
|
|
|
&.hinge {
|
|
@include webkit-prefix(animation-duration, 2s);
|
|
}
|
|
|
|
&.flipOutX,
|
|
&.flipOutY,
|
|
&.bounceIn,
|
|
&.bounceOut {
|
|
@include webkit-prefix(animation-duration, 0.75s);
|
|
}
|
|
|
|
&.short {
|
|
@include webkit-prefix(animation-duration, 321ms);
|
|
@include webkit-prefix(animation-fill-mode, none);
|
|
}
|
|
}
|
|
|
|
@include keyframes(pulse) {
|
|
from,
|
|
to {
|
|
@include webkit-prefix(transform, scale3d(1, 1, 1));
|
|
}
|
|
|
|
50% {
|
|
@include webkit-prefix(transform, scale3d(1.05, 1.05, 1.05));
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
@include webkit-prefix(animation-name, pulse);
|
|
}
|
|
|
|
/*
|
|
* 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...) {
|
|
$unfolded-transitions: ();
|
|
@each $transition in $transitions {
|
|
$unfolded-transitions: append($unfolded-transitions, unfold-transition($transition), comma);
|
|
}
|
|
|
|
transition: $unfolded-transitions;
|
|
}
|
|
|
|
@mixin disable-all-animation {
|
|
/*CSS transitions*/
|
|
transition-property: none !important;
|
|
/*CSS transforms*/
|
|
transform: none !important;
|
|
/*CSS animations*/
|
|
animation: none !important;
|
|
}
|
|
|
|
@function unfold-transition ($transition) {
|
|
// 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
|
|
$default-properties: ($property, $duration, $easing, $delay);
|
|
|
|
// Grab transition properties if they exist
|
|
$unfolded-transition: ();
|
|
@for $i from 1 through length($default-properties) {
|
|
$p: null;
|
|
@if $i <= length($transition) {
|
|
$p: nth($transition, $i);
|
|
} @else {
|
|
$p: nth($default-properties, $i);
|
|
}
|
|
$unfolded-transition: append($unfolded-transition, $p);
|
|
}
|
|
|
|
@return $unfolded-transition;
|
|
}
|
|
|
|
.btn {
|
|
@include transition(background-color, border-color, color, box-shadow);
|
|
}
|
|
|
|
.dropdown-menu-toggle,
|
|
.avatar-circle,
|
|
.header-user-avatar {
|
|
@include transition(border-color);
|
|
}
|
|
|
|
.note-action-button,
|
|
.toolbar-btn,
|
|
.dropdown-toggle-caret {
|
|
@include transition(color);
|
|
}
|
|
|
|
a {
|
|
@include transition(background-color, color, border);
|
|
}
|
|
|
|
.stage-nav-item {
|
|
@include transition(background-color, box-shadow);
|
|
}
|
|
|
|
.dropdown-menu a,
|
|
.dropdown-menu button,
|
|
.dropdown-menu-nav a {
|
|
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;
|
|
}
|
|
|
|
.animation-container {
|
|
height: 40px;
|
|
overflow: hidden;
|
|
|
|
&.animation-container-small {
|
|
height: 12px;
|
|
}
|
|
|
|
&.animation-container-right {
|
|
.skeleton-line-2 {
|
|
left: 0;
|
|
right: 150px;
|
|
}
|
|
}
|
|
|
|
[class^='skeleton-line-'] {
|
|
position: relative;
|
|
background-color: $gray-100;
|
|
height: 10px;
|
|
overflow: hidden;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
&::after {
|
|
content: ' ';
|
|
display: block;
|
|
animation: blockTextShine 1s linear infinite forwards;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: linear-gradient(to right,
|
|
$gray-100 0%,
|
|
$gray-50 20%,
|
|
$gray-100 40%,
|
|
$gray-100 100%);
|
|
height: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
$skeleton-line-widths: (
|
|
156px,
|
|
235px,
|
|
200px,
|
|
);
|
|
|
|
@for $count from 1 through length($skeleton-line-widths) {
|
|
.skeleton-line-#{$count} {
|
|
width: nth($skeleton-line-widths, $count);
|
|
}
|
|
}
|
|
|
|
@keyframes blockTextShine {
|
|
0% {
|
|
transform: translateX(-468px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(468px);
|
|
}
|
|
}
|
|
|
|
.slide-down-enter-active {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.slide-down-enter,
|
|
.slide-down-leave-to {
|
|
transform: translateY(-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%;
|
|
}
|