1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
This commit is contained in:
Luke Pulverenti 2017-01-27 18:07:14 -05:00
parent 82bcca376f
commit 8a6884abef
494 changed files with 256 additions and 120180 deletions

View file

@ -1,139 +1 @@
.mdl-checkbox {
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-flex;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
padding-left: 2.6em;
align-items: center;
height: 2.3em;
}
.checkboxFieldDescription {
padding-left: 2.6em;
}
.checkboxContainer {
margin-bottom: 1.8em;
display: flex;
}
.checkboxContainer-withDescription {
flex-direction: column;
}
.mdl-checkbox__input {
position: absolute;
/* 1px is for focusing purposes, so the focusManager doesn't skip over it */
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
.checkboxOutline {
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 1.83em;
height: 1.83em;
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid currentcolor;
border-radius: 2px;
z-index: 2;
}
.mdl-checkbox__input:checked + span + span + .checkboxOutline {
border-color: #52B54B;
}
.mdl-checkbox__input[disabled] + span + span + .checkboxOutline {
border-color: rgba(0, 0, 0, 0.26);
cursor: auto;
}
.mdl-checkbox__focus-helper {
position: absolute;
top: -0.915em;
left: -0.915em;
width: 3.66em;
height: 3.66em;
display: inline-block;
box-sizing: border-box;
margin: 3px 0 0 0;
border-radius: 50%;
background-color: transparent;
}
.mdl-checkbox__input:focus + span + .mdl-checkbox__focus-helper {
background-color: rgba(82, 181, 75, 0.26);
}
.mdl-checkbox__tick-outline {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: transparent;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background;
}
.mdl-checkbox__input:checked + span + span + .checkboxOutline .mdl-checkbox__tick-outline {
background: #52B54B url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}
.mdl-checkbox__input:checked[disabled] + span + span + .checkboxOutline .mdl-checkbox__tick-outline {
background: rgba(0, 0, 0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}
.checkboxLabel {
position: relative;
cursor: pointer;
margin: 0;
}
.mdl-checkbox__input[disabled] + .checkboxLabel {
color: rgba(0, 0, 0, 0.26);
cursor: auto;
}
.checkboxList > .mdl-checkbox {
display: flex;
margin: .5em 0;
}
.checkboxList-paperList {
padding: 1em !important;
margin: .75em 0 !important;
}
.checkboxListLabel {
opacity: .7;
margin-bottom: 0;
}
@-webkit-keyframes repaintChrome {
from {
padding: 0;
}
to {
padding: 0;
}
}
.mdl-checkbox{position:relative;z-index:1;vertical-align:middle;display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:0;padding:0 0 0 2.6em;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:2.3em}.checkboxFieldDescription{padding-left:2.6em}.checkboxContainer{margin-bottom:1.8em;display:-webkit-box;display:-webkit-flex;display:flex}.checkboxContainer-withDescription{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.mdl-checkbox__input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;-ms-appearance:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;border:none}.checkboxOutline{position:absolute;top:3px;left:0;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;width:1.83em;height:1.83em;margin:0;cursor:pointer;overflow:hidden;border:2px solid currentcolor;-webkit-border-radius:2px;border-radius:2px;z-index:2}.mdl-checkbox__input:checked+span+span+.checkboxOutline{border-color:#52B54B}.mdl-checkbox__input[disabled]+span+span+.checkboxOutline{border-color:rgba(0,0,0,.26);cursor:auto}.mdl-checkbox__focus-helper{position:absolute;top:-.915em;left:-.915em;width:3.66em;height:3.66em;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:3px 0 0;-webkit-border-radius:50%;border-radius:50%;background-color:transparent}.mdl-checkbox__input:focus+span+.mdl-checkbox__focus-helper{background-color:rgba(82,181,75,.26)}.mdl-checkbox__tick-outline{position:absolute;top:0;left:0;height:100%;width:100%;background:0 0;-webkit-transition-duration:.28s;-o-transition-duration:.28s;transition-duration:.28s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);-o-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-property:background;-o-transition-property:background;transition-property:background}.mdl-checkbox__input:checked+span+span+.checkboxOutline .mdl-checkbox__tick-outline{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K) #52B54B}.mdl-checkbox__input:checked[disabled]+span+span+.checkboxOutline .mdl-checkbox__tick-outline{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K) rgba(0,0,0,.26)}.checkboxLabel{position:relative;cursor:pointer;margin:0}.mdl-checkbox__input[disabled]+.checkboxLabel{color:rgba(0,0,0,.26);cursor:auto}.checkboxList>.mdl-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;margin:.5em 0}.checkboxList-paperList{padding:1em!important;margin:.75em 0!important}.checkboxListLabel{opacity:.7;margin-bottom:0}@-webkit-keyframes repaintChrome{from,to{padding:0}}

View file

@ -1,89 +1 @@
define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
'use strict';
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) {
// Don't submit form on enter
if (e.keyCode === 13) {
e.preventDefault();
this.checked = !this.checked;
this.dispatchEvent(new CustomEvent('change', {
bubbles: true
}));
return false;
}
}
var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
function forceRefresh(loading) {
var elem = this.parentNode;
elem.style.webkitAnimationName = 'repaintChrome';
elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
elem.style.webkitAnimationDuration = '10ms';
elem.style.webkitAnimationIterationCount = '1';
setTimeout(function () {
elem.style.webkitAnimationName = '';
}, (loading === true ? 520 : 20));
}
EmbyCheckboxPrototype.attachedCallback = function () {
if (this.getAttribute('data-embycheckbox') === 'true') {
return;
}
this.setAttribute('data-embycheckbox', 'true');
this.classList.add('mdl-checkbox__input');
var labelElement = this.parentNode;
labelElement.classList.add('mdl-checkbox');
labelElement.classList.add('mdl-js-checkbox');
var labelTextElement = labelElement.querySelector('span');
var outlineClass = 'checkboxOutline';
var customClass = this.getAttribute('data-outlineclass');
if (customClass) {
outlineClass += ' ' + customClass;
}
labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-checkbox__focus-helper"></span><span class="' + outlineClass + '"><span class="mdl-checkbox__tick-outline"></span></span>');
labelTextElement.classList.add('checkboxLabel');
this.addEventListener('keydown', onKeyDown);
if (enableRefreshHack) {
forceRefresh.call(this, true);
dom.addEventListener(this, 'click', forceRefresh, {
passive: true
});
dom.addEventListener(this, 'blur', forceRefresh, {
passive: true
});
dom.addEventListener(this, 'focus', forceRefresh, {
passive: true
});
dom.addEventListener(this, 'change', forceRefresh, {
passive: true
});
}
};
document.registerElement('emby-checkbox', {
prototype: EmbyCheckboxPrototype,
extends: 'input'
});
});
define(["browser","dom","css!./emby-checkbox","registerElement"],function(browser,dom){"use strict";function onKeyDown(e){if(13===e.keyCode)return e.preventDefault(),this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0})),!1}function forceRefresh(loading){var elem=this.parentNode;elem.style.webkitAnimationName="repaintChrome",elem.style.webkitAnimationDelay=loading===!0?"500ms":"",elem.style.webkitAnimationDuration="10ms",elem.style.webkitAnimationIterationCount="1",setTimeout(function(){elem.style.webkitAnimationName=""},loading===!0?520:20)}var EmbyCheckboxPrototype=Object.create(HTMLInputElement.prototype),enableRefreshHack=!!(browser.tizen||browser.orsay||browser.operaTv||browser.web0s);EmbyCheckboxPrototype.attachedCallback=function(){if("true"!==this.getAttribute("data-embycheckbox")){this.setAttribute("data-embycheckbox","true"),this.classList.add("mdl-checkbox__input");var labelElement=this.parentNode;labelElement.classList.add("mdl-checkbox"),labelElement.classList.add("mdl-js-checkbox");var labelTextElement=labelElement.querySelector("span"),outlineClass="checkboxOutline",customClass=this.getAttribute("data-outlineclass");customClass&&(outlineClass+=" "+customClass),labelElement.insertAdjacentHTML("beforeend",'<span class="mdl-checkbox__focus-helper"></span><span class="'+outlineClass+'"><span class="mdl-checkbox__tick-outline"></span></span>'),labelTextElement.classList.add("checkboxLabel"),this.addEventListener("keydown",onKeyDown),enableRefreshHack&&(forceRefresh.call(this,!0),dom.addEventListener(this,"click",forceRefresh,{passive:!0}),dom.addEventListener(this,"blur",forceRefresh,{passive:!0}),dom.addEventListener(this,"focus",forceRefresh,{passive:!0}),dom.addEventListener(this,"change",forceRefresh,{passive:!0}))}},document.registerElement("emby-checkbox",{prototype:EmbyCheckboxPrototype,extends:"input"})});