mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared components
This commit is contained in:
Luke Pulverenti
parent
fb269362ff
commit
71811cb9e3
221 changed files with 32936 additions and 101 deletions
397
dashboard-ui/bower_components/material-design-lite/src/slider/_slider.scss
vendored
Normal file
397
dashboard-ui/bower_components/material-design-lite/src/slider/_slider.scss
vendored
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "../variables";
|
||||
|
||||
// Some CSS magic to target only IE.
|
||||
_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
|
||||
-ms-appearance: none;
|
||||
// The thumb can't overflow the track or the rest of the control in IE, so we
|
||||
// need to make it tall enough to contain the largest version of the thumb.
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Slider component (styled input[type=range]).
|
||||
.mdl-slider {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px;
|
||||
|
||||
&.is-upgraded {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
color: $range-color;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
// Disable default focus on Firefox.
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Disable tooltip on IE.
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/**************************** Tracks ****************************/
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background: none;
|
||||
color: transparent;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
padding: 0;
|
||||
// Margin on -ms-track doesn't work right, so we use gradients on the
|
||||
// fills.
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
transparent 16px,
|
||||
$range-color 16px,
|
||||
$range-color 0);
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
padding: 0;
|
||||
// Margin on -ms-track doesn't work right, so we use gradients on the
|
||||
// fills.
|
||||
background: linear-gradient(to left,
|
||||
transparent,
|
||||
transparent 16px,
|
||||
$range-bg-color 16px,
|
||||
$range-bg-color 0);
|
||||
}
|
||||
|
||||
|
||||
/**************************** Thumbs ****************************/
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: $range-color;
|
||||
border: none;
|
||||
transition: transform 0.18s $animation-curve-default,
|
||||
border 0.18s $animation-curve-default,
|
||||
box-shadow 0.18s $animation-curve-default,
|
||||
background 0.28s $animation-curve-default;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
background: $range-color;
|
||||
border: none;
|
||||
// -moz-range-thumb doesn't currently support transitions.
|
||||
}
|
||||
|
||||
&:focus:not(:active)::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 10px $range-faded-color;
|
||||
}
|
||||
|
||||
&:focus:not(:active)::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 10px $range-faded-color;
|
||||
}
|
||||
|
||||
&:active::-webkit-slider-thumb {
|
||||
background-image: none;
|
||||
background: $range-color;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&:active::-moz-range-thumb {
|
||||
background-image: none;
|
||||
background: $range-color;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $range-color;
|
||||
transform: scale(0.375);
|
||||
// -ms-thumb doesn't currently support transitions, but leaving this here
|
||||
// in case support ever gets added.
|
||||
transition: transform 0.18s $animation-curve-default,
|
||||
background 0.28s $animation-curve-default;
|
||||
}
|
||||
|
||||
&:focus:not(:active)::-ms-thumb {
|
||||
background: radial-gradient(circle closest-side,
|
||||
$range-color 0%,
|
||||
$range-color 37.5%,
|
||||
$range-faded-color 37.5%,
|
||||
$range-faded-color 100%);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&:active::-ms-thumb {
|
||||
background: $range-color;
|
||||
transform: scale(0.5625);
|
||||
}
|
||||
|
||||
|
||||
/**************************** 0-value ****************************/
|
||||
&.is-lowest-value::-webkit-slider-thumb {
|
||||
border: 2px solid $range-bg-color;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.is-lowest-value::-moz-range-thumb {
|
||||
border: 2px solid $range-bg-color;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.is-lowest-value +
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
&.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 10px $range-bg-focus-color;
|
||||
background: $range-bg-focus-color;
|
||||
}
|
||||
|
||||
&.is-lowest-value:focus:not(:active)::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 10px $range-bg-focus-color;
|
||||
background: $range-bg-focus-color;
|
||||
}
|
||||
|
||||
&.is-lowest-value:active::-webkit-slider-thumb {
|
||||
border: 1.6px solid $range-bg-color;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.is-lowest-value:active +
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
&.is-lowest-value:active::-moz-range-thumb {
|
||||
border: 1.5px solid $range-bg-color;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.is-lowest-value::-ms-thumb {
|
||||
background: radial-gradient(circle closest-side,
|
||||
transparent 0%,
|
||||
transparent 66.67%,
|
||||
$range-bg-color 66.67%,
|
||||
$range-bg-color 100%);
|
||||
}
|
||||
|
||||
&.is-lowest-value:focus:not(:active)::-ms-thumb {
|
||||
background: radial-gradient(circle closest-side,
|
||||
$range-bg-focus-color 0%,
|
||||
$range-bg-focus-color 25%,
|
||||
$range-bg-color 25%,
|
||||
$range-bg-color 37.5%,
|
||||
$range-bg-focus-color 37.5%,
|
||||
$range-bg-focus-color 100%);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&.is-lowest-value:active::-ms-thumb {
|
||||
transform: scale(0.5625);
|
||||
background: radial-gradient(circle closest-side,
|
||||
transparent 0%,
|
||||
transparent 77.78%,
|
||||
$range-bg-color 77.78%,
|
||||
$range-bg-color 100%);
|
||||
}
|
||||
|
||||
&.is-lowest-value::-ms-fill-lower {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.is-lowest-value::-ms-fill-upper {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&.is-lowest-value:active::-ms-fill-upper {
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
/**************************** Disabled ****************************/
|
||||
|
||||
&:disabled:focus::-webkit-slider-thumb,
|
||||
&:disabled:active::-webkit-slider-thumb,
|
||||
&:disabled::-webkit-slider-thumb {
|
||||
transform: scale(0.667);
|
||||
background: $range-bg-color;
|
||||
}
|
||||
|
||||
&:disabled:focus::-moz-range-thumb,
|
||||
&:disabled:active::-moz-range-thumb,
|
||||
&:disabled::-moz-range-thumb {
|
||||
transform: scale(0.667);
|
||||
background: $range-bg-color;
|
||||
}
|
||||
|
||||
&:disabled +
|
||||
.mdl-slider__background-flex > .mdl-slider__background-lower {
|
||||
background-color: $range-bg-color;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
&:disabled +
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
&.is-lowest-value:disabled:focus::-webkit-slider-thumb,
|
||||
&.is-lowest-value:disabled:active::-webkit-slider-thumb,
|
||||
&.is-lowest-value:disabled::-webkit-slider-thumb {
|
||||
border: 3px solid $range-bg-color;
|
||||
background: transparent;
|
||||
transform: scale(0.667);
|
||||
}
|
||||
|
||||
&.is-lowest-value:disabled:focus::-moz-range-thumb,
|
||||
&.is-lowest-value:disabled:active::-moz-range-thumb,
|
||||
&.is-lowest-value:disabled::-moz-range-thumb {
|
||||
border: 3px solid $range-bg-color;
|
||||
background: transparent;
|
||||
transform: scale(0.667);
|
||||
}
|
||||
|
||||
&.is-lowest-value:disabled:active +
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
&:disabled:focus::-ms-thumb,
|
||||
&:disabled:active::-ms-thumb,
|
||||
&:disabled::-ms-thumb {
|
||||
transform: scale(0.25);
|
||||
background: $range-bg-color;
|
||||
}
|
||||
|
||||
&.is-lowest-value:disabled:focus::-ms-thumb,
|
||||
&.is-lowest-value:disabled:active::-ms-thumb,
|
||||
&.is-lowest-value:disabled::-ms-thumb {
|
||||
transform: scale(0.25);
|
||||
background: radial-gradient(circle closest-side,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
$range-bg-color 50%,
|
||||
$range-bg-color 100%);
|
||||
}
|
||||
|
||||
&:disabled::-ms-fill-lower {
|
||||
margin-right: 6px;
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
transparent 25px,
|
||||
$range-bg-color 25px,
|
||||
$range-bg-color 0);
|
||||
}
|
||||
|
||||
&:disabled::-ms-fill-upper {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&.is-lowest-value:disabled:active::-ms-fill-upper {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Since we need to specify a height of 32px in IE, we add a class here for a
|
||||
// container that brings it back to a reasonable height.
|
||||
.mdl-slider__ie-container {
|
||||
height: 18px;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
margin: none;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
// We use a set of divs behind the track to style it in all non-IE browsers.
|
||||
// This one contains both the background and the slider.
|
||||
.mdl-slider__container {
|
||||
height: 18px;
|
||||
position: relative;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
// This one sets up a flex box for the styled upper and lower portions of the
|
||||
// the slider track.
|
||||
.mdl-slider__background-flex {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: calc(100% - 52px);
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin: 0 26px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transform: translate(0, -1px);
|
||||
}
|
||||
|
||||
// This one styles the lower part of the slider track.
|
||||
.mdl-slider__background-lower {
|
||||
background: $range-color;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// This one styles the upper part of the slider track.
|
||||
.mdl-slider__background-upper {
|
||||
background: $range-bg-color;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transition: left 0.18s $animation-curve-default
|
||||
}
|
||||
244
dashboard-ui/bower_components/material-design-lite/src/slider/slider.js
vendored
Normal file
244
dashboard-ui/bower_components/material-design-lite/src/slider/slider.js
vendored
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Class constructor for Slider MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
var MaterialSlider = function MaterialSlider(element) {
|
||||
this.element_ = element;
|
||||
// Browser feature detection.
|
||||
this.isIE_ = window.navigator.msPointerEnabled;
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
window['MaterialSlider'] = MaterialSlider;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.Constant_ = {
|
||||
// None for now.
|
||||
};
|
||||
|
||||
/**
|
||||
* Store strings for class names defined by this component that are used in
|
||||
* JavaScript. This allows us to simply change it in one place should we
|
||||
* decide to modify at a later date.
|
||||
*
|
||||
* @enum {string}
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.CssClasses_ = {
|
||||
IE_CONTAINER: 'mdl-slider__ie-container',
|
||||
SLIDER_CONTAINER: 'mdl-slider__container',
|
||||
BACKGROUND_FLEX: 'mdl-slider__background-flex',
|
||||
BACKGROUND_LOWER: 'mdl-slider__background-lower',
|
||||
BACKGROUND_UPPER: 'mdl-slider__background-upper',
|
||||
IS_LOWEST_VALUE: 'is-lowest-value',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle input on element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.onInput_ = function(event) {
|
||||
this.updateValueStyles_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle change on element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.onChange_ = function(event) {
|
||||
this.updateValueStyles_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle mouseup on element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.onMouseUp_ = function(event) {
|
||||
event.target.blur();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle mousedown on container element.
|
||||
* This handler is purpose is to not require the use to click
|
||||
* exactly on the 2px slider element, as FireFox seems to be very
|
||||
* strict about this.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
* @suppress {missingProperties}
|
||||
*/
|
||||
MaterialSlider.prototype.onContainerMouseDown_ = function(event) {
|
||||
// If this click is not on the parent element (but rather some child)
|
||||
// ignore. It may still bubble up.
|
||||
if (event.target !== this.element_.parentElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Discard the original event and create a new event that
|
||||
// is on the slider element.
|
||||
event.preventDefault();
|
||||
var newEvent = new MouseEvent('mousedown', {
|
||||
target: event.target,
|
||||
buttons: event.buttons,
|
||||
clientX: event.clientX,
|
||||
clientY: this.element_.getBoundingClientRect().y
|
||||
});
|
||||
this.element_.dispatchEvent(newEvent);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle updating of values.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.updateValueStyles_ = function() {
|
||||
// Calculate and apply percentages to div structure behind slider.
|
||||
var fraction = (this.element_.value - this.element_.min) /
|
||||
(this.element_.max - this.element_.min);
|
||||
|
||||
if (fraction === 0) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
|
||||
}
|
||||
|
||||
if (!this.isIE_) {
|
||||
this.backgroundLower_.style.flex = fraction;
|
||||
this.backgroundLower_.style.webkitFlex = fraction;
|
||||
this.backgroundUpper_.style.flex = 1 - fraction;
|
||||
this.backgroundUpper_.style.webkitFlex = 1 - fraction;
|
||||
}
|
||||
};
|
||||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Disable slider.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialSlider.prototype.disable = function() {
|
||||
this.element_.disabled = true;
|
||||
};
|
||||
MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
|
||||
|
||||
/**
|
||||
* Enable slider.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialSlider.prototype.enable = function() {
|
||||
|
||||
this.element_.disabled = false;
|
||||
};
|
||||
MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
|
||||
|
||||
/**
|
||||
* Update slider value.
|
||||
*
|
||||
* @param {number} value The value to which to set the control (optional).
|
||||
* @public
|
||||
*/
|
||||
MaterialSlider.prototype.change = function(value) {
|
||||
|
||||
if (typeof value !== 'undefined') {
|
||||
this.element_.value = value;
|
||||
}
|
||||
this.updateValueStyles_();
|
||||
};
|
||||
MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialSlider.prototype.init = function() {
|
||||
|
||||
if (this.element_) {
|
||||
if (this.isIE_) {
|
||||
// Since we need to specify a very large height in IE due to
|
||||
// implementation limitations, we add a parent here that trims it down to
|
||||
// a reasonable size.
|
||||
var containerIE = document.createElement('div');
|
||||
containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
|
||||
this.element_.parentElement.insertBefore(containerIE, this.element_);
|
||||
this.element_.parentElement.removeChild(this.element_);
|
||||
containerIE.appendChild(this.element_);
|
||||
} else {
|
||||
// For non-IE browsers, we need a div structure that sits behind the
|
||||
// slider and allows us to style the left and right sides of it with
|
||||
// different colors.
|
||||
var container = document.createElement('div');
|
||||
container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
|
||||
this.element_.parentElement.insertBefore(container, this.element_);
|
||||
this.element_.parentElement.removeChild(this.element_);
|
||||
container.appendChild(this.element_);
|
||||
var backgroundFlex = document.createElement('div');
|
||||
backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
|
||||
container.appendChild(backgroundFlex);
|
||||
this.backgroundLower_ = document.createElement('div');
|
||||
this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
|
||||
backgroundFlex.appendChild(this.backgroundLower_);
|
||||
this.backgroundUpper_ = document.createElement('div');
|
||||
this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
|
||||
backgroundFlex.appendChild(this.backgroundUpper_);
|
||||
}
|
||||
|
||||
this.boundInputHandler = this.onInput_.bind(this);
|
||||
this.boundChangeHandler = this.onChange_.bind(this);
|
||||
this.boundMouseUpHandler = this.onMouseUp_.bind(this);
|
||||
this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
|
||||
this.element_.addEventListener('input', this.boundInputHandler);
|
||||
this.element_.addEventListener('change', this.boundChangeHandler);
|
||||
this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
|
||||
this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
|
||||
|
||||
this.updateValueStyles_();
|
||||
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||
}
|
||||
};
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialSlider,
|
||||
classAsString: 'MaterialSlider',
|
||||
cssClass: 'mdl-js-slider',
|
||||
widget: true
|
||||
});
|
||||
})();
|
||||
10
dashboard-ui/bower_components/material-design-lite/src/slider/snippets/demo.html
vendored
Normal file
10
dashboard-ui/bower_components/material-design-lite/src/slider/snippets/demo.html
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="demo-preview-block">
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0">
|
||||
</p>
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="10" tabindex="0">
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<style>
|
||||
.demo-slider__slider-default .mdl-slider {
|
||||
width: 30vw;
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
{% include "slider-default.html" %}
|
||||
3
dashboard-ui/bower_components/material-design-lite/src/slider/snippets/slider-default.html
vendored
Normal file
3
dashboard-ui/bower_components/material-design-lite/src/slider/snippets/slider-default.html
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<!-- Default Slider -->
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0">
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<style>
|
||||
.demo-slider__slider-starting-value .mdl-slider {
|
||||
width: 30vw;
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "slider-starting-value.html" %}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<!-- Slider with Starting Value -->
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="25" tabindex="0">
|
||||
Loading…
Add table
Add a link
Reference in a new issue