alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Review SCSS refactoring for to-be-deprecated Bourbon functions (#1959)

Browse Source 
* [Frontend] Refactor SCSS to remove deprecated @includes

Fixes #1891
- In progress

* [Frontend] Refactor SCSS to remove deprecated @includes

Fixes #1891
Making bourbon happy by refactoring to-be-deprecated
calls to prefixing @includes:
- transform and related CSS;
- flex and related CSS;
- Fixed double semi-colons to single;
This commit is contained in:
Charles Hacskaylo
2018-04-20 10:18:29 -07:00
committed by Pete Richards
parent 8c739e9fd9
commit f4271c96a3
27 changed files with 147 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
platform/commonUI/general/res/sass/_animations.scss
View File

@@ -1,91 +1,91 @@
@include keyframes(rotation) {
100% { @include transform(rotate(360deg)); }
100% { transform: rotate(360deg); }
}
@include keyframes(rotation-centered) {
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@include keyframes(clock-hands) {
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@include keyframes(clock-hands-sticky) {
0% {
@include transform(translate(-50%, -50%) rotate(0deg));
transform: translate(-50%, -50%) rotate(0deg);
}
7% {
@include transform(translate(-50%, -50%) rotate(0deg));
transform: translate(-50%, -50%) rotate(0deg);
}
8% {
@include transform(translate(-50%, -50%) rotate(30deg));
transform: translate(-50%, -50%) rotate(30deg);
}
15% {
@include transform(translate(-50%, -50%) rotate(30deg));
transform: translate(-50%, -50%) rotate(30deg);
}
16% {
@include transform(translate(-50%, -50%) rotate(60deg));
transform: translate(-50%, -50%) rotate(60deg);
}
24% {
@include transform(translate(-50%, -50%) rotate(60deg));
transform: translate(-50%, -50%) rotate(60deg);
}
25% {
@include transform(translate(-50%, -50%) rotate(90deg));
transform: translate(-50%, -50%) rotate(90deg);
}
32% {
@include transform(translate(-50%, -50%) rotate(90deg));
transform: translate(-50%, -50%) rotate(90deg);
}
33% {
@include transform(translate(-50%, -50%) rotate(120deg));
transform: translate(-50%, -50%) rotate(120deg);
}
40% {
@include transform(translate(-50%, -50%) rotate(120deg));
transform: translate(-50%, -50%) rotate(120deg);
}
41% {
@include transform(translate(-50%, -50%) rotate(150deg));
transform: translate(-50%, -50%) rotate(150deg);
}
49% {
@include transform(translate(-50%, -50%) rotate(150deg));
transform: translate(-50%, -50%) rotate(150deg);
}
50% {
@include transform(translate(-50%, -50%) rotate(180deg));
transform: translate(-50%, -50%) rotate(180deg);
}
57% {
@include transform(translate(-50%, -50%) rotate(180deg));
transform: translate(-50%, -50%) rotate(180deg);
}
58% {
@include transform(translate(-50%, -50%) rotate(210deg));
transform: translate(-50%, -50%) rotate(210deg);
}
65% {
@include transform(translate(-50%, -50%) rotate(210deg));
transform: translate(-50%, -50%) rotate(210deg);
}
66% {
@include transform(translate(-50%, -50%) rotate(240deg));
transform: translate(-50%, -50%) rotate(240deg);
}
74% {
@include transform(translate(-50%, -50%) rotate(240deg));
transform: translate(-50%, -50%) rotate(240deg);
}
75% {
@include transform(translate(-50%, -50%) rotate(270deg));
transform: translate(-50%, -50%) rotate(270deg);
}
82% {
@include transform(translate(-50%, -50%) rotate(270deg));
transform: translate(-50%, -50%) rotate(270deg);
}
83% {
@include transform(translate(-50%, -50%) rotate(300deg));
transform: translate(-50%, -50%) rotate(300deg);
}
90% {
@include transform(translate(-50%, -50%) rotate(300deg));
transform: translate(-50%, -50%) rotate(300deg);
}
91% {
@include transform(translate(-50%, -50%) rotate(330deg));
transform: translate(-50%, -50%) rotate(330deg);
}
99% {
@include transform(translate(-50%, -50%) rotate(330deg));
transform: translate(-50%, -50%) rotate(330deg);
}
100% {
@include transform(translate(-50%, -50%) rotate(360deg));
transform: translate(-50%, -50%) rotate(360deg);
}
}