1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-08-02 01:55:52 -04:00
parent 6f21a963ea
commit 823f69bb92
68 changed files with 303 additions and 388 deletions

View file

@ -1,14 +1,15 @@
.mdl-spinner {
display: inline-block;
position: relative;
width: 28px;
height: 28px;
display: none;
}
.mdl-spinner.is-active {
-webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
}
.mdlSpinnerActive {
display: inline-block;
-webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
}
@-webkit-keyframes mdl-spinner__container-rotate {
to {
@ -35,11 +36,7 @@
border-color: rgb(66,165,245);
}
.mdl-spinner--single-color .mdl-spinner__layer-1 {
border-color: rgb(63,81,181);
}
.mdl-spinner.is-active .mdl-spinner__layer-1 {
.mdlSpinnerActive .mdl-spinner__layer-1 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -48,11 +45,7 @@
border-color: rgb(244,67,54);
}
.mdl-spinner--single-color .mdl-spinner__layer-2 {
border-color: rgb(63,81,181);
}
.mdl-spinner.is-active .mdl-spinner__layer-2 {
.mdlSpinnerActive .mdl-spinner__layer-2 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -61,11 +54,7 @@
border-color: rgb(253,216,53);
}
.mdl-spinner--single-color .mdl-spinner__layer-3 {
border-color: rgb(63,81,181);
}
.mdl-spinner.is-active .mdl-spinner__layer-3 {
.mdlSpinnerActive .mdl-spinner__layer-3 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -74,11 +63,7 @@
border-color: rgb(76,175,80);
}
.mdl-spinner--single-color .mdl-spinner__layer-4 {
border-color: rgb(63,81,181);
}
.mdl-spinner.is-active .mdl-spinner__layer-4 {
.mdlSpinnerActive .mdl-spinner__layer-4 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -360,30 +345,6 @@
}
}
/**
* Patch the gap that appear between the two adjacent
* div.mdl-spinner__circle-clipper while the spinner is rotating
* (appears on Chrome 38, Safari 7.1, and IE 11).
*
* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
* opacity is 0.99, but still does on Safari and IE.
*/
.mdl-spinner__gap-patch {
position: absolute;
box-sizing: border-box;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.mdl-spinner__gap-patch .mdl-spinner__circle {
width: 1000%;
left: -450%;
}
.mdl-spinner__circle-clipper {
display: inline-block;
position: relative;
@ -414,25 +375,25 @@
left: 0;
}
.mdl-spinner__left .mdl-spinner__circle {
.mdl-spinner__circleLeft {
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg);
}
.mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
.mdlSpinnerActive .mdl-spinner__circleLeft {
-webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__right .mdl-spinner__circle {
.mdl-spinner__circleRight {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}
.mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
.mdlSpinnerActive .mdl-spinner__circleRight {
-webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -516,7 +477,3 @@
z-index: 9999999;
contain: layout style;
}
.loadingHide {
display: none !important;
}

View file

@ -13,23 +13,20 @@ define(['css!./loading-lite'], function () {
elem.classList.add('docspinner');
elem.classList.add('mdl-spinner');
elem.classList.add('mdl-js-spinner');
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div>';
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
document.body.appendChild(elem);
}
elem.classList.add('is-active');
elem.classList.remove('loadingHide');
elem.classList.add('mdlSpinnerActive');
},
hide: function () {
var elem = loadingElem;
if (elem) {
elem.classList.remove('is-active');
elem.classList.add('loadingHide');
elem.classList.remove('mdlSpinnerActive');
}
}
};

View file

@ -1,14 +0,0 @@
.docspinner {
margin-top: -5vh;
margin-left: -5vh;
width: 10vh;
height: 10vh;
position: fixed;
top: 50%;
left: 50%;
z-index: 9999999;
}
.loadingHide {
display: none !important;
}

View file

@ -1,28 +0,0 @@
define(['paper-spinner', 'css!./loading'], function () {
return {
show: function () {
var elem = document.querySelector('.docspinner');
if (!elem) {
elem = document.createElement("paper-spinner");
elem.classList.add('docspinner');
document.body.appendChild(elem);
}
elem.active = true;
elem.classList.remove('loadingHide');
},
hide: function () {
var elem = document.querySelector('.docspinner');
if (elem) {
elem.active = false;
elem.classList.add('loadingHide');
}
}
};
});