mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
update shared components
This commit is contained in:
parent
fb269362ff
commit
71811cb9e3
@ -11,16 +11,17 @@
|
||||
"homepage": "https://github.com/MediaBrowser/emby-webcomponents",
|
||||
"dependencies": {
|
||||
"requirejs": "requirejs#^2.1.22",
|
||||
"isMobile": "isMobile#^0.3.9"
|
||||
"isMobile": "isMobile#^0.3.9",
|
||||
"material-design-lite": "material-design-lite#^1.1.2"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.1.26",
|
||||
"_release": "1.1.26",
|
||||
"version": "1.1.29",
|
||||
"_release": "1.1.29",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.1.26",
|
||||
"commit": "3cee1dd4f0c0b8727fbd8e03c77b989100082faa"
|
||||
"tag": "1.1.29",
|
||||
"commit": "5884bd203d5dcf32cc0e325018284bd078ac0c41"
|
||||
},
|
||||
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "~1.1.5",
|
||||
|
@ -11,7 +11,8 @@
|
||||
"homepage": "https://github.com/MediaBrowser/emby-webcomponents",
|
||||
"dependencies": {
|
||||
"requirejs": "requirejs#^2.1.22",
|
||||
"isMobile": "isMobile#^0.3.9"
|
||||
"isMobile": "isMobile#^0.3.9",
|
||||
"material-design-lite": "material-design-lite#^1.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
|
@ -9,7 +9,7 @@
|
||||
return true;
|
||||
}
|
||||
|
||||
if (userAgent.indexOf('samsung') != -1) {
|
||||
if (userAgent.indexOf('samsungbrowser') != -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -21,6 +21,10 @@
|
||||
return true;
|
||||
}
|
||||
|
||||
if (userAgent.indexOf('webos') != -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
35
dashboard-ui/bower_components/emby-webcomponents/loading/loading-lite.js
vendored
Normal file
35
dashboard-ui/bower_components/emby-webcomponents/loading/loading-lite.js
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
define(['layoutManager', 'material-design-lite', 'css!./loading'], function (layoutManager) {
|
||||
|
||||
return {
|
||||
show: function () {
|
||||
var elem = document.querySelector('.docspinner');
|
||||
|
||||
if (!elem) {
|
||||
|
||||
elem = document.createElement("div");
|
||||
elem.classList.add('docspinner');
|
||||
elem.classList.add('mdl-spinner');
|
||||
elem.classList.add('mdl-js-spinner');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
elem.classList.add('tv');
|
||||
}
|
||||
|
||||
document.body.appendChild(elem);
|
||||
componentHandler.upgradeElement(elem, 'MaterialSpinner');
|
||||
}
|
||||
|
||||
elem.classList.add('is-active');
|
||||
elem.classList.remove('loadingHide');
|
||||
},
|
||||
hide: function () {
|
||||
var elem = document.querySelector('.docspinner');
|
||||
|
||||
if (elem) {
|
||||
|
||||
elem.classList.remove('is-active');
|
||||
elem.classList.add('loadingHide');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
9
dashboard-ui/bower_components/emby-webcomponents/loading/loading-smarttv.js
vendored
Normal file
9
dashboard-ui/bower_components/emby-webcomponents/loading/loading-smarttv.js
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
define([], function () {
|
||||
|
||||
return {
|
||||
show: function () {
|
||||
},
|
||||
hide: function () {
|
||||
}
|
||||
};
|
||||
});
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hls.js",
|
||||
"version": "0.5.8",
|
||||
"version": "0.5.9",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
||||
"homepage": "https://github.com/dailymotion/hls.js",
|
||||
@ -16,11 +16,11 @@
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"_release": "0.5.8",
|
||||
"_release": "0.5.9",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.5.8",
|
||||
"commit": "688cec5b83fc596fb91944ad4934ae84ee40abb9"
|
||||
"tag": "v0.5.9",
|
||||
"commit": "b1579c58d1893c0b64ec7cd59973fea0581c3256"
|
||||
},
|
||||
"_source": "git://github.com/dailymotion/hls.js.git",
|
||||
"_target": "~0.5.7",
|
||||
|
29
dashboard-ui/bower_components/hls.js/API.md
vendored
29
dashboard-ui/bower_components/hls.js/API.md
vendored
@ -257,7 +257,7 @@ this is the guaranteed buffer length hls.js will try to reach, regardless of max
|
||||
#### ```maxBufferHole```
|
||||
(default 0.3s)
|
||||
|
||||
'maximum' inter-fragment buffer hole tolerance that hls.js can cope with.
|
||||
'maximum' inter-fragment buffer hole tolerance that hls.js can cope with when searching for the next fragment to load.
|
||||
When switching between quality level, fragments might not be perfectly aligned.
|
||||
This could result in small overlapping or hole in media buffer. This tolerance factor helps cope with this.
|
||||
|
||||
@ -295,6 +295,23 @@ if set to 10, the player will seek back to ```liveSyncDurationCount``` whenever
|
||||
If set, this value must be stricly superior to ```liveSyncDurationCount```
|
||||
a value too close from ```liveSyncDurationCount``` is likely to cause playback stalls.
|
||||
|
||||
#### ```liveSyncDuration```
|
||||
(default undefined)
|
||||
|
||||
Alternative parameter to ```liveSyncDurationCount```, expressed in seconds vs number of segments.
|
||||
If defined in the configuration object, ```liveSyncDuration``` will take precedence over the default```liveSyncDurationCount```.
|
||||
You can't define this parameter and either ```liveSyncDurationCount``` or ```liveMaxLatencyDurationCount``` in your configuration object at the same time.
|
||||
A value too low (inferior to ~3 segment durations) is likely to cause playback stalls.
|
||||
|
||||
#### ```liveMaxLatencyDuration```
|
||||
(default undefined)
|
||||
|
||||
Alternative parameter to ```liveMaxLatencyDurationCount```, expressed in seconds vs number of segments.
|
||||
If defined in the configuration object, ```liveMaxLatencyDuration``` will take precedence over the default```liveMaxLatencyDurationCount```.
|
||||
If set, this value must be stricly superior to ```liveSyncDuration``` which must be defined as well.
|
||||
You can't define this parameter and either ```liveSyncDurationCount``` or ```liveMaxLatencyDurationCount``` in your configuration object at the same time.
|
||||
A value too close from ```liveSyncDuration``` is likely to cause playback stalls.
|
||||
|
||||
#### ```enableWorker```
|
||||
(default true)
|
||||
|
||||
@ -603,9 +620,15 @@ full list of Errors is described below:
|
||||
- ```Hls.ErrorDetails.FRAG_PARSING_ERROR```raised when fragment parsing fails
|
||||
- data: { type : ```NETWORK_ERROR```, details : ```Hls.ErrorDetails.FRAG_PARSING_ERROR```, fatal : ```true/false```, reason : failure reason}
|
||||
- ```Hls.ErrorDetails.BUFFER_APPEND_ERROR```raised when exception is raised while calling buffer append
|
||||
- data: { type : ```NETWORK_ERROR```, details : ```Hls.ErrorDetails.BUFFER_APPEND_ERROR```, fatal : ```true```, frag : fragment object}
|
||||
- data: { type : ```MEDIA_ERROR```, details : ```Hls.ErrorDetails.BUFFER_APPEND_ERROR```, fatal : ```true```, frag : fragment object}
|
||||
- ```Hls.ErrorDetails.BUFFER_APPENDING_ERROR```raised when exception is raised during buffer appending
|
||||
- data: { type : ```NETWORK_ERROR```, details : ```Hls.ErrorDetails.BUFFER_APPENDING_ERROR```, fatal : ```false```, frag : fragment object}
|
||||
- data: { type : ```MEDIA_ERROR```, details : ```Hls.ErrorDetails.BUFFER_APPENDING_ERROR```, fatal : ```false```}
|
||||
- ```Hls.ErrorDetails.BUFFER_STALLED_ERROR```raised when playback is stuck because buffer is running out of data
|
||||
- data: { type : ```MEDIA_ERROR```, details : ```Hls.ErrorDetails.BUFFER_STALLED_ERROR```, fatal : ```false```}
|
||||
- ```Hls.ErrorDetails.BUFFER_FULL_ERROR```raised when no data can be appended anymore in media buffer because it is full. this error is recovered automatically by performing a smooth level switching that empty buffers (without disrupting the playback) and reducing the max buffer length.
|
||||
- data: { type : ```MEDIA_ERROR```, details : ```Hls.ErrorDetails.BUFFER_FULL_ERROR```, fatal : ```false```}
|
||||
- ```Hls.ErrorDetails.BUFFER_SEEK_OVER_HOLE```raised after hls.js seeks over a buffer hole to unstuck the playback,
|
||||
- data: { type : ```MEDIA_ERROR```, details : ```Hls.ErrorDetails.BUFFER_SEEK_OVER_HOLE```, fatal : ```false```}
|
||||
|
||||
## Objects
|
||||
### Level
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hls.js",
|
||||
"version": "0.5.8",
|
||||
"version": "0.5.9",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
||||
"homepage": "https://github.com/dailymotion/hls.js",
|
||||
|
18
dashboard-ui/bower_components/hls.js/design.md
vendored
18
dashboard-ui/bower_components/hls.js/design.md
vendored
@ -14,23 +14,27 @@ design idea is pretty simple :
|
||||
- [src/errors.js][]
|
||||
- definition of Hls.ErrorTypes and Hls.ErrorDetails
|
||||
- [src/controller/stream-controller.js][]
|
||||
- in charge of:
|
||||
- ensuring that buffer is filled as per defined quality selection logic.
|
||||
- stream controller actions are scheduled by a tick timer (invoked every 100ms) and actions are controlled by a state machine.
|
||||
- stream controller is in charge of:
|
||||
- **ensuring that buffer is filled as per defined quality selection logic**.
|
||||
- if buffer is not filled up appropriately (i.e. as per defined maximum buffer size, or as per defined quality level), buffer controller will trigger the following actions:
|
||||
- retrieve "not buffered" media position greater then current playback position. this is performed by comparing video.buffered and video.currentTime.
|
||||
- if there are holes in video.buffered, smaller than config.maxBufferHole, they will be ignored.
|
||||
- retrieve URL of fragment matching with this media position, and appropriate quality level
|
||||
- trigger FRAG_LOADING event
|
||||
- monitor fragment loading speed (by monitoring data received from FRAG_LOAD_PROGRESS event)
|
||||
- **monitor fragment loading speed** (by monitoring data received from FRAG_LOAD_PROGRESS event)
|
||||
- "expected time of fragment load completion" is computed using "fragment loading instant bandwidth".
|
||||
- this time is compared to the "expected time of buffer starvation".
|
||||
- if we have less than 2 fragments buffered and if "expected time of fragment load completion" is bigger than "expected time of buffer starvation" and also bigger than duration needed to load fragment at next quality level (determined by auto quality switch algorithm), current fragment loading is aborted, and an emergency switch down is triggered.
|
||||
- trigger fragment demuxing on FRAG_LOADED
|
||||
- if we have less than 2 fragments buffered and if "expected time of fragment load completion" is bigger than "expected time of buffer starvation" and also bigger than duration needed to load fragment at next quality level (determined by auto quality switch algorithm), current fragment loading is aborted, stream-controller will **trigger an emergency switch down**.
|
||||
- **trigger fragment demuxing** on FRAG_LOADED
|
||||
- trigger BUFFER_RESET on MANIFEST_PARSED or startLoad()
|
||||
- trigger BUFFER_CODECS on FRAG_PARSING_INIT_SEGMENT
|
||||
- trigger BUFFER_APPENDING on FRAG_PARSING_DATA
|
||||
- once FRAG_PARSED is received an all segments have been appended (BUFFER_APPENDED) then buffer controller will recheck whether it needs to buffer more data.
|
||||
- monitor current playback quality level (buffer controller maintains a map between media position and quality level)
|
||||
stream controller actions are scheduled by a tick timer (invoked every 100ms) and actions are controlled by a state machine.
|
||||
- **monitor current playback quality level** (buffer controller maintains a map between media position and quality level)
|
||||
- **monitor playback progress** : if playhead is not moving anymore although it should (video metadata is known and video is not ended, nor paused, nor in seeking state) and if we have less than 400ms buffered upfront, and if there is a new buffer range available upfront, less than config.maxSeekHole from currentTime, then hls.js will **jump over the buffer hole** and seek to the beginning of this new buffered range, to "unstuck" the playback.
|
||||
400 ms is a "magic number" that has been set to overcome browsers not always stopping playback at the exact end of a buffered range.
|
||||
these holes in media buffered are often encountered on stream discontinuity or on quality level switch. holes could be "large" especially if fragments are not starting with a keyframe.
|
||||
- [src/controller/buffer-controller.js][]
|
||||
- in charge of:
|
||||
- resetting media buffer upon BUFFER_RESET event reception
|
||||
|
88
dashboard-ui/bower_components/hls.js/dist/hls.js
vendored
88
dashboard-ui/bower_components/hls.js/dist/hls.js
vendored
@ -578,6 +578,7 @@ var BufferController = function (_EventHandler) {
|
||||
ms.removeEventListener('sourceclose', this.onmsc);
|
||||
// unlink MediaSource from video tag
|
||||
this.media.src = '';
|
||||
this.media.removeAttribute('src');
|
||||
this.mediaSource = null;
|
||||
this.media = null;
|
||||
this.pendingTracks = null;
|
||||
@ -810,9 +811,9 @@ var BufferController = function (_EventHandler) {
|
||||
}
|
||||
} else {
|
||||
// QuotaExceededError: http://www.w3.org/TR/html5/infrastructure.html#quotaexceedederror
|
||||
// let's stop appending any segments, and report BUFFER_FULL error
|
||||
// let's stop appending any segments, and report BUFFER_FULL_ERROR error
|
||||
segments = [];
|
||||
event.details = _errors.ErrorDetails.BUFFER_FULL;
|
||||
event.details = _errors.ErrorDetails.BUFFER_FULL_ERROR;
|
||||
hls.trigger(_events2.default.ERROR, event);
|
||||
}
|
||||
}
|
||||
@ -1417,8 +1418,11 @@ var StreamController = function (_EventHandler) {
|
||||
if (levelDetails.live) {
|
||||
// check if requested position is within seekable boundaries :
|
||||
//logger.log(`start/pos/bufEnd/seeking:${start.toFixed(3)}/${pos.toFixed(3)}/${bufferEnd.toFixed(3)}/${this.media.seeking}`);
|
||||
if (bufferEnd < Math.max(start, end - config.liveMaxLatencyDurationCount * levelDetails.targetduration)) {
|
||||
this.seekAfterBuffered = start + Math.max(0, levelDetails.totalduration - config.liveSyncDurationCount * levelDetails.targetduration);
|
||||
var maxLatency = config.liveMaxLatencyDuration !== undefined ? config.liveMaxLatencyDuration : config.liveMaxLatencyDurationCount * levelDetails.targetduration;
|
||||
|
||||
if (bufferEnd < Math.max(start, end - maxLatency)) {
|
||||
var targetLatency = config.liveSyncDuration !== undefined ? config.liveSyncDuration : config.liveSyncDurationCount * levelDetails.targetduration;
|
||||
this.seekAfterBuffered = start + Math.max(0, levelDetails.totalduration - targetLatency);
|
||||
_logger.logger.log('buffer end: ' + bufferEnd + ' is located too far from the end of live sliding playlist, media position will be reseted to: ' + this.seekAfterBuffered.toFixed(3));
|
||||
bufferEnd = this.seekAfterBuffered;
|
||||
}
|
||||
@ -1662,7 +1666,7 @@ var StreamController = function (_EventHandler) {
|
||||
if (pos + maxHoleDuration >= start && pos < end) {
|
||||
// play position is inside this buffer TimeRange, retrieve end of buffer position and buffer length
|
||||
bufferStart = start;
|
||||
bufferEnd = end + maxHoleDuration;
|
||||
bufferEnd = end;
|
||||
bufferLen = bufferEnd - pos;
|
||||
} else if (pos + maxHoleDuration < start) {
|
||||
bufferStartNext = start;
|
||||
@ -1674,11 +1678,15 @@ var StreamController = function (_EventHandler) {
|
||||
}, {
|
||||
key: 'getBufferRange',
|
||||
value: function getBufferRange(position) {
|
||||
var i, range;
|
||||
for (i = this.bufferRange.length - 1; i >= 0; i--) {
|
||||
range = this.bufferRange[i];
|
||||
if (position >= range.start && position <= range.end) {
|
||||
return range;
|
||||
var i,
|
||||
range,
|
||||
bufferRange = this.bufferRange;
|
||||
if (bufferRange) {
|
||||
for (i = bufferRange.length - 1; i >= 0; i--) {
|
||||
range = bufferRange[i];
|
||||
if (position >= range.start && position <= range.end) {
|
||||
return range;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
@ -1995,7 +2003,8 @@ var StreamController = function (_EventHandler) {
|
||||
if (this.startFragRequested === false) {
|
||||
// if live playlist, set start position to be fragment N-this.config.liveSyncDurationCount (usually 3)
|
||||
if (newDetails.live) {
|
||||
this.startPosition = Math.max(0, sliding + duration - this.config.liveSyncDurationCount * newDetails.targetduration);
|
||||
var targetLatency = this.config.liveSyncDuration !== undefined ? this.config.liveSyncDuration : this.config.liveSyncDurationCount * newDetails.targetduration;
|
||||
this.startPosition = Math.max(0, sliding + duration - targetLatency);
|
||||
}
|
||||
this.nextLoadPosition = this.startPosition;
|
||||
}
|
||||
@ -2249,7 +2258,7 @@ var StreamController = function (_EventHandler) {
|
||||
_logger.logger.warn('mediaController: ' + data.details + ' while loading frag,switch to ' + (data.fatal ? 'ERROR' : 'IDLE') + ' state ...');
|
||||
this.state = data.fatal ? State.ERROR : State.IDLE;
|
||||
break;
|
||||
case _errors.ErrorDetails.BUFFER_FULL:
|
||||
case _errors.ErrorDetails.BUFFER_FULL_ERROR:
|
||||
// trigger a smooth level switch to empty buffers
|
||||
// also reduce max buffer length as it might be too high. we do this to avoid loop flushing ...
|
||||
this.config.maxMaxBufferLength /= 2;
|
||||
@ -2296,8 +2305,9 @@ var StreamController = function (_EventHandler) {
|
||||
}
|
||||
var bufferInfo = this.bufferInfo(currentTime, 0),
|
||||
expectedPlaying = !(media.paused || media.ended || media.seeking || readyState < 2),
|
||||
jumpThreshold = 0.2,
|
||||
playheadMoving = currentTime > media.playbackRate * this.lastCurrentTime;
|
||||
jumpThreshold = 0.4,
|
||||
// tolerance needed as some browsers stalls playback before reaching buffered range end
|
||||
playheadMoving = currentTime > media.playbackRate * this.lastCurrentTime;
|
||||
|
||||
if (this.stalled && playheadMoving) {
|
||||
this.stalled = false;
|
||||
@ -2319,14 +2329,15 @@ var StreamController = function (_EventHandler) {
|
||||
}
|
||||
// if we are below threshold, try to jump if next buffer range is close
|
||||
if (bufferInfo.len <= jumpThreshold) {
|
||||
// no buffer available @ currentTime, check if next buffer is close (more than 5ms diff but within a config.maxSeekHole second range)
|
||||
// no buffer available @ currentTime, check if next buffer is close (within a config.maxSeekHole second range)
|
||||
var nextBufferStart = bufferInfo.nextStart,
|
||||
delta = nextBufferStart - currentTime;
|
||||
if (nextBufferStart && delta < this.config.maxSeekHole && delta > 0.005 && !media.seeking) {
|
||||
if (nextBufferStart && delta < this.config.maxSeekHole && delta > 0 && !media.seeking) {
|
||||
// next buffer is close ! adjust currentTime to nextBufferStart
|
||||
// this will ensure effective video decoding
|
||||
_logger.logger.log('adjust currentTime from ' + media.currentTime + ' to next buffered @ ' + nextBufferStart);
|
||||
media.currentTime = nextBufferStart;
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.MEDIA_ERROR, details: _errors.ErrorDetails.BUFFER_SEEK_OVER_HOLE, fatal: false });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -4920,8 +4931,10 @@ var ErrorDetails = exports.ErrorDetails = {
|
||||
BUFFER_APPENDING_ERROR: 'bufferAppendingError',
|
||||
// Identifier for a buffer stalled error event
|
||||
BUFFER_STALLED_ERROR: 'bufferStalledError',
|
||||
// Identifier for a buffer full error event
|
||||
BUFFER_FULL_ERROR: 'bufferFullError'
|
||||
// Identifier for a buffer full event
|
||||
BUFFER_FULL_ERROR: 'bufferFullError',
|
||||
// Identifier for a buffer seek over hole event
|
||||
BUFFER_SEEK_OVER_HOLE: 'bufferSeekOverHole'
|
||||
};
|
||||
|
||||
},{}],20:[function(require,module,exports){
|
||||
@ -5340,6 +5353,8 @@ var Hls = function () {
|
||||
maxSeekHole: 2,
|
||||
liveSyncDurationCount: 3,
|
||||
liveMaxLatencyDurationCount: Infinity,
|
||||
liveSyncDuration: undefined,
|
||||
liveMaxLatencyDuration: undefined,
|
||||
maxMaxBufferLength: 600,
|
||||
enableWorker: true,
|
||||
enableSoftwareAES: true,
|
||||
@ -5381,6 +5396,11 @@ var Hls = function () {
|
||||
_classCallCheck(this, Hls);
|
||||
|
||||
var defaultConfig = Hls.DefaultConfig;
|
||||
|
||||
if ((config.liveSyncDurationCount || config.liveMaxLatencyDurationCount) && (config.liveSyncDuration || config.liveMaxLatencyDuration)) {
|
||||
throw new Error('Illegal hls.js config: don\'t mix up liveSyncDurationCount/liveMaxLatencyDurationCount and liveSyncDuration/liveMaxLatencyDuration');
|
||||
}
|
||||
|
||||
for (var prop in defaultConfig) {
|
||||
if (prop in config) {
|
||||
continue;
|
||||
@ -5392,6 +5412,10 @@ var Hls = function () {
|
||||
throw new Error('Illegal hls.js config: "liveMaxLatencyDurationCount" must be gt "liveSyncDurationCount"');
|
||||
}
|
||||
|
||||
if (config.liveMaxLatencyDuration !== undefined && (config.liveMaxLatencyDuration <= config.liveSyncDuration || config.liveSyncDuration === undefined)) {
|
||||
throw new Error('Illegal hls.js config: "liveMaxLatencyDuration" must be gt "liveSyncDuration"');
|
||||
}
|
||||
|
||||
(0, _logger.enableLogs)(config.debug);
|
||||
this.config = config;
|
||||
// observer setup
|
||||
@ -5706,13 +5730,17 @@ var FragmentLoader = function (_EventHandler) {
|
||||
}, {
|
||||
key: 'loaderror',
|
||||
value: function loaderror(event) {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.NETWORK_ERROR, details: _errors.ErrorDetails.FRAG_LOAD_ERROR, fatal: false, frag: this.frag, response: event });
|
||||
}
|
||||
}, {
|
||||
key: 'loadtimeout',
|
||||
value: function loadtimeout() {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.NETWORK_ERROR, details: _errors.ErrorDetails.FRAG_LOAD_TIMEOUT, fatal: false, frag: this.frag });
|
||||
}
|
||||
}, {
|
||||
@ -5810,13 +5838,17 @@ var KeyLoader = function (_EventHandler) {
|
||||
}, {
|
||||
key: 'loaderror',
|
||||
value: function loaderror(event) {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.NETWORK_ERROR, details: _errors.ErrorDetails.KEY_LOAD_ERROR, fatal: false, frag: this.frag, response: event });
|
||||
}
|
||||
}, {
|
||||
key: 'loadtimeout',
|
||||
value: function loadtimeout() {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.NETWORK_ERROR, details: _errors.ErrorDetails.KEY_LOAD_TIMEOUT, fatal: false, frag: this.frag });
|
||||
}
|
||||
}, {
|
||||
@ -5907,7 +5939,7 @@ var PlaylistLoader = function (_EventHandler) {
|
||||
this.url = url;
|
||||
this.id = id1;
|
||||
this.id2 = id2;
|
||||
if (this.id === undefined) {
|
||||
if (this.id === null) {
|
||||
retry = config.manifestLoadingMaxRetry;
|
||||
timeout = config.manifestLoadingTimeOut;
|
||||
retryDelay = config.manifestLoadingRetryDelay;
|
||||
@ -6141,7 +6173,9 @@ var PlaylistLoader = function (_EventHandler) {
|
||||
details = _errors.ErrorDetails.LEVEL_LOAD_ERROR;
|
||||
fatal = false;
|
||||
}
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.NETWORK_ERROR, details: details, fatal: fatal, url: this.url, loader: this.loader, response: event.currentTarget, level: this.id, id: this.id2 });
|
||||
}
|
||||
}, {
|
||||
@ -6155,7 +6189,9 @@ var PlaylistLoader = function (_EventHandler) {
|
||||
details = _errors.ErrorDetails.LEVEL_LOAD_TIMEOUT;
|
||||
fatal = false;
|
||||
}
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(_events2.default.ERROR, { type: _errors.ErrorTypes.NETWORK_ERROR, details: details, fatal: fatal, url: this.url, loader: this.loader, level: this.id, id: this.id2 });
|
||||
}
|
||||
}]);
|
||||
@ -7951,7 +7987,7 @@ var URLHelper = {
|
||||
baseURL = baseURLQuerySplit[1];
|
||||
}
|
||||
|
||||
var baseURLDomainSplit = /^((([a-z]+):)?\/\/[a-z0-9\.-]+(:[0-9]+)?\/)(.*)$/i.exec(baseURL);
|
||||
var baseURLDomainSplit = /^((([a-z]+):)?\/\/[a-z0-9\.\-_~]+(:[0-9]+)?\/)(.*)$/i.exec(baseURL);
|
||||
var baseURLProtocol = baseURLDomainSplit[3];
|
||||
var baseURLDomain = baseURLDomainSplit[1];
|
||||
var baseURLPath = baseURLDomainSplit[5];
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hls.js",
|
||||
"version": "0.5.8",
|
||||
"version": "0.5.9",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
||||
"homepage": "https://github.com/dailymotion/hls.js",
|
||||
|
@ -63,6 +63,7 @@ class BufferController extends EventHandler {
|
||||
ms.removeEventListener('sourceclose', this.onmsc);
|
||||
// unlink MediaSource from video tag
|
||||
this.media.src = '';
|
||||
this.media.removeAttribute('src');
|
||||
this.mediaSource = null;
|
||||
this.media = null;
|
||||
this.pendingTracks = null;
|
||||
@ -280,9 +281,9 @@ class BufferController extends EventHandler {
|
||||
}
|
||||
} else {
|
||||
// QuotaExceededError: http://www.w3.org/TR/html5/infrastructure.html#quotaexceedederror
|
||||
// let's stop appending any segments, and report BUFFER_FULL error
|
||||
// let's stop appending any segments, and report BUFFER_FULL_ERROR error
|
||||
segments = [];
|
||||
event.details = ErrorDetails.BUFFER_FULL;
|
||||
event.details = ErrorDetails.BUFFER_FULL_ERROR;
|
||||
hls.trigger(Event.ERROR,event);
|
||||
}
|
||||
}
|
||||
|
@ -196,8 +196,11 @@ class StreamController extends EventHandler {
|
||||
if (levelDetails.live) {
|
||||
// check if requested position is within seekable boundaries :
|
||||
//logger.log(`start/pos/bufEnd/seeking:${start.toFixed(3)}/${pos.toFixed(3)}/${bufferEnd.toFixed(3)}/${this.media.seeking}`);
|
||||
if (bufferEnd < Math.max(start,end-config.liveMaxLatencyDurationCount*levelDetails.targetduration)) {
|
||||
this.seekAfterBuffered = start + Math.max(0, levelDetails.totalduration - config.liveSyncDurationCount * levelDetails.targetduration);
|
||||
let maxLatency = config.liveMaxLatencyDuration !== undefined ? config.liveMaxLatencyDuration : config.liveMaxLatencyDurationCount*levelDetails.targetduration;
|
||||
|
||||
if (bufferEnd < Math.max(start, end - maxLatency)) {
|
||||
let targetLatency = config.liveSyncDuration !== undefined ? config.liveSyncDuration : config.liveSyncDurationCount * levelDetails.targetduration;
|
||||
this.seekAfterBuffered = start + Math.max(0, levelDetails.totalduration - targetLatency);
|
||||
logger.log(`buffer end: ${bufferEnd} is located too far from the end of live sliding playlist, media position will be reseted to: ${this.seekAfterBuffered.toFixed(3)}`);
|
||||
bufferEnd = this.seekAfterBuffered;
|
||||
}
|
||||
@ -433,7 +436,7 @@ class StreamController extends EventHandler {
|
||||
if ((pos + maxHoleDuration) >= start && pos < end) {
|
||||
// play position is inside this buffer TimeRange, retrieve end of buffer position and buffer length
|
||||
bufferStart = start;
|
||||
bufferEnd = end + maxHoleDuration;
|
||||
bufferEnd = end;
|
||||
bufferLen = bufferEnd - pos;
|
||||
} else if ((pos + maxHoleDuration) < start) {
|
||||
bufferStartNext = start;
|
||||
@ -444,11 +447,14 @@ class StreamController extends EventHandler {
|
||||
}
|
||||
|
||||
getBufferRange(position) {
|
||||
var i, range;
|
||||
for (i = this.bufferRange.length - 1; i >=0; i--) {
|
||||
range = this.bufferRange[i];
|
||||
if (position >= range.start && position <= range.end) {
|
||||
return range;
|
||||
var i, range,
|
||||
bufferRange = this.bufferRange;
|
||||
if (bufferRange) {
|
||||
for (i = bufferRange.length - 1; i >=0; i--) {
|
||||
range = bufferRange[i];
|
||||
if (position >= range.start && position <= range.end) {
|
||||
return range;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
@ -770,7 +776,8 @@ class StreamController extends EventHandler {
|
||||
if (this.startFragRequested === false) {
|
||||
// if live playlist, set start position to be fragment N-this.config.liveSyncDurationCount (usually 3)
|
||||
if (newDetails.live) {
|
||||
this.startPosition = Math.max(0, sliding + duration - this.config.liveSyncDurationCount * newDetails.targetduration);
|
||||
let targetLatency = this.config.liveSyncDuration !== undefined ? this.config.liveSyncDuration : this.config.liveSyncDurationCount * newDetails.targetduration;
|
||||
this.startPosition = Math.max(0, sliding + duration - targetLatency);
|
||||
}
|
||||
this.nextLoadPosition = this.startPosition;
|
||||
}
|
||||
@ -1014,7 +1021,7 @@ class StreamController extends EventHandler {
|
||||
logger.warn(`mediaController: ${data.details} while loading frag,switch to ${data.fatal ? 'ERROR' : 'IDLE'} state ...`);
|
||||
this.state = data.fatal ? State.ERROR : State.IDLE;
|
||||
break;
|
||||
case ErrorDetails.BUFFER_FULL:
|
||||
case ErrorDetails.BUFFER_FULL_ERROR:
|
||||
// trigger a smooth level switch to empty buffers
|
||||
// also reduce max buffer length as it might be too high. we do this to avoid loop flushing ...
|
||||
this.config.maxMaxBufferLength/=2;
|
||||
@ -1060,7 +1067,7 @@ _checkBuffer() {
|
||||
}
|
||||
var bufferInfo = this.bufferInfo(currentTime,0),
|
||||
expectedPlaying = !(media.paused || media.ended || media.seeking || readyState < 2),
|
||||
jumpThreshold = 0.2,
|
||||
jumpThreshold = 0.4, // tolerance needed as some browsers stalls playback before reaching buffered range end
|
||||
playheadMoving = currentTime > media.playbackRate*this.lastCurrentTime;
|
||||
|
||||
if (this.stalled && playheadMoving) {
|
||||
@ -1083,16 +1090,17 @@ _checkBuffer() {
|
||||
}
|
||||
// if we are below threshold, try to jump if next buffer range is close
|
||||
if(bufferInfo.len <= jumpThreshold) {
|
||||
// no buffer available @ currentTime, check if next buffer is close (more than 5ms diff but within a config.maxSeekHole second range)
|
||||
// no buffer available @ currentTime, check if next buffer is close (within a config.maxSeekHole second range)
|
||||
var nextBufferStart = bufferInfo.nextStart, delta = nextBufferStart-currentTime;
|
||||
if(nextBufferStart &&
|
||||
(delta < this.config.maxSeekHole) &&
|
||||
(delta > 0.005) &&
|
||||
(delta > 0) &&
|
||||
!media.seeking) {
|
||||
// next buffer is close ! adjust currentTime to nextBufferStart
|
||||
// this will ensure effective video decoding
|
||||
logger.log(`adjust currentTime from ${media.currentTime} to next buffered @ ${nextBufferStart}`);
|
||||
media.currentTime = nextBufferStart;
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.MEDIA_ERROR, details: ErrorDetails.BUFFER_SEEK_OVER_HOLE, fatal: false});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
@ -40,6 +40,8 @@ export const ErrorDetails = {
|
||||
BUFFER_APPENDING_ERROR: 'bufferAppendingError',
|
||||
// Identifier for a buffer stalled error event
|
||||
BUFFER_STALLED_ERROR: 'bufferStalledError',
|
||||
// Identifier for a buffer full error event
|
||||
BUFFER_FULL_ERROR: 'bufferFullError'
|
||||
// Identifier for a buffer full event
|
||||
BUFFER_FULL_ERROR: 'bufferFullError',
|
||||
// Identifier for a buffer seek over hole event
|
||||
BUFFER_SEEK_OVER_HOLE: 'bufferSeekOverHole'
|
||||
};
|
||||
|
11
dashboard-ui/bower_components/hls.js/src/hls.js
vendored
11
dashboard-ui/bower_components/hls.js/src/hls.js
vendored
@ -47,6 +47,8 @@ class Hls {
|
||||
maxSeekHole: 2,
|
||||
liveSyncDurationCount:3,
|
||||
liveMaxLatencyDurationCount: Infinity,
|
||||
liveSyncDuration: undefined,
|
||||
liveMaxLatencyDuration: undefined,
|
||||
maxMaxBufferLength: 600,
|
||||
enableWorker: true,
|
||||
enableSoftwareAES: true,
|
||||
@ -84,6 +86,11 @@ class Hls {
|
||||
|
||||
constructor(config = {}) {
|
||||
var defaultConfig = Hls.DefaultConfig;
|
||||
|
||||
if ((config.liveSyncDurationCount || config.liveMaxLatencyDurationCount) && (config.liveSyncDuration || config.liveMaxLatencyDuration)) {
|
||||
throw new Error('Illegal hls.js config: don\'t mix up liveSyncDurationCount/liveMaxLatencyDurationCount and liveSyncDuration/liveMaxLatencyDuration');
|
||||
}
|
||||
|
||||
for (var prop in defaultConfig) {
|
||||
if (prop in config) { continue; }
|
||||
config[prop] = defaultConfig[prop];
|
||||
@ -93,6 +100,10 @@ class Hls {
|
||||
throw new Error('Illegal hls.js config: "liveMaxLatencyDurationCount" must be gt "liveSyncDurationCount"');
|
||||
}
|
||||
|
||||
if (config.liveMaxLatencyDuration !== undefined && (config.liveMaxLatencyDuration <= config.liveSyncDuration || config.liveSyncDuration === undefined)) {
|
||||
throw new Error('Illegal hls.js config: "liveMaxLatencyDuration" must be gt "liveSyncDuration"');
|
||||
}
|
||||
|
||||
enableLogs(config.debug);
|
||||
this.config = config;
|
||||
// observer setup
|
||||
|
@ -38,12 +38,16 @@ class FragmentLoader extends EventHandler {
|
||||
}
|
||||
|
||||
loaderror(event) {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: ErrorDetails.FRAG_LOAD_ERROR, fatal: false, frag: this.frag, response: event});
|
||||
}
|
||||
|
||||
loadtimeout() {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: ErrorDetails.FRAG_LOAD_TIMEOUT, fatal: false, frag: this.frag});
|
||||
}
|
||||
|
||||
|
@ -49,12 +49,16 @@ class KeyLoader extends EventHandler {
|
||||
}
|
||||
|
||||
loaderror(event) {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: ErrorDetails.KEY_LOAD_ERROR, fatal: false, frag: this.frag, response: event});
|
||||
}
|
||||
|
||||
loadtimeout() {
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: ErrorDetails.KEY_LOAD_TIMEOUT, fatal: false, frag: this.frag});
|
||||
}
|
||||
|
||||
|
@ -42,7 +42,7 @@ class PlaylistLoader extends EventHandler {
|
||||
this.url = url;
|
||||
this.id = id1;
|
||||
this.id2 = id2;
|
||||
if(this.id === undefined) {
|
||||
if(this.id === null) {
|
||||
retry = config.manifestLoadingMaxRetry;
|
||||
timeout = config.manifestLoadingTimeOut;
|
||||
retryDelay = config.manifestLoadingRetryDelay;
|
||||
@ -265,7 +265,9 @@ class PlaylistLoader extends EventHandler {
|
||||
details = ErrorDetails.LEVEL_LOAD_ERROR;
|
||||
fatal = false;
|
||||
}
|
||||
this.loader.abort();
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: details, fatal: fatal, url: this.url, loader: this.loader, response: event.currentTarget, level: this.id, id: this.id2});
|
||||
}
|
||||
|
||||
@ -278,8 +280,10 @@ class PlaylistLoader extends EventHandler {
|
||||
details = ErrorDetails.LEVEL_LOAD_TIMEOUT;
|
||||
fatal = false;
|
||||
}
|
||||
this.loader.abort();
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: details, fatal: fatal, url: this.url, loader: this.loader, level: this.id, id: this.id2});
|
||||
if (this.loader) {
|
||||
this.loader.abort();
|
||||
}
|
||||
this.hls.trigger(Event.ERROR, {type: ErrorTypes.NETWORK_ERROR, details: details, fatal: fatal, url: this.url, loader: this.loader, level: this.id, id: this.id2});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -33,7 +33,7 @@ var URLHelper = {
|
||||
baseURL = baseURLQuerySplit[1];
|
||||
}
|
||||
|
||||
var baseURLDomainSplit = /^((([a-z]+):)?\/\/[a-z0-9\.-]+(:[0-9]+)?\/)(.*)$/i.exec(baseURL);
|
||||
var baseURLDomainSplit = /^((([a-z]+):)?\/\/[a-z0-9\.\-_~]+(:[0-9]+)?\/)(.*)$/i.exec(baseURL);
|
||||
var baseURLProtocol = baseURLDomainSplit[3];
|
||||
var baseURLDomain = baseURLDomainSplit[1];
|
||||
var baseURLPath = baseURLDomainSplit[5];
|
||||
|
@ -36,7 +36,7 @@
|
||||
"tag": "v1.2.4",
|
||||
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-selector.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-selector"
|
||||
"_originalSource": "PolymerElements/iron-selector"
|
||||
}
|
39
dashboard-ui/bower_components/material-design-lite/.bower.json
vendored
Normal file
39
dashboard-ui/bower_components/material-design-lite/.bower.json
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.1.2",
|
||||
"homepage": "https://github.com/google/material-design-lite",
|
||||
"authors": [
|
||||
"Material Design Lite team"
|
||||
],
|
||||
"description": "Material Design Components in CSS, JS and HTML",
|
||||
"main": [
|
||||
"material.min.css",
|
||||
"material.min.js"
|
||||
],
|
||||
"keywords": [
|
||||
"material",
|
||||
"design",
|
||||
"styleguide",
|
||||
"style",
|
||||
"guide"
|
||||
],
|
||||
"license": "Apache-2",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"./lib/.bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"_release": "1.1.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.2",
|
||||
"commit": "38b5d9fbd7b86af5d8a5aaaadcc4bcfe71915195"
|
||||
},
|
||||
"_source": "git://github.com/google/material-design-lite.git",
|
||||
"_target": "~1.1.2",
|
||||
"_originalSource": "material-design-lite",
|
||||
"_direct": true
|
||||
}
|
212
dashboard-ui/bower_components/material-design-lite/LICENSE
vendored
Normal file
212
dashboard-ui/bower_components/material-design-lite/LICENSE
vendored
Normal file
@ -0,0 +1,212 @@
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright 2015 Google Inc
|
||||
|
||||
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.
|
||||
|
||||
All code in any directories or sub-directories that end with *.html or
|
||||
*.css is licensed under the Creative Commons Attribution International
|
||||
4.0 License, which full text can be found here:
|
||||
https://creativecommons.org/licenses/by/4.0/legalcode.
|
||||
|
||||
As an exception to this license, all html or css that is generated by
|
||||
the software at the direction of the user is copyright the user. The
|
||||
user has full ownership and control over such content, including
|
||||
whether and how they wish to license it.
|
29
dashboard-ui/bower_components/material-design-lite/bower.json
vendored
Normal file
29
dashboard-ui/bower_components/material-design-lite/bower.json
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.1.2",
|
||||
"homepage": "https://github.com/google/material-design-lite",
|
||||
"authors": [
|
||||
"Material Design Lite team"
|
||||
],
|
||||
"description": "Material Design Components in CSS, JS and HTML",
|
||||
"main": [
|
||||
"material.min.css",
|
||||
"material.min.js"
|
||||
],
|
||||
"keywords": [
|
||||
"material",
|
||||
"design",
|
||||
"styleguide",
|
||||
"style",
|
||||
"guide"
|
||||
],
|
||||
"license": "Apache-2",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"./lib/.bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
807
dashboard-ui/bower_components/material-design-lite/gulpfile.babel.js
vendored
Normal file
807
dashboard-ui/bower_components/material-design-lite/gulpfile.babel.js
vendored
Normal file
@ -0,0 +1,807 @@
|
||||
/**
|
||||
*
|
||||
* Material Design Lite
|
||||
* 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
|
||||
*
|
||||
* https://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
|
||||
*
|
||||
*/
|
||||
|
||||
// jscs:disable jsDoc
|
||||
|
||||
'use strict';
|
||||
|
||||
// Include Gulp & Tools We'll Use
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import mergeStream from 'merge-stream';
|
||||
import del from 'del';
|
||||
import vinylPaths from'vinyl-paths';
|
||||
import runSequence from 'run-sequence';
|
||||
import browserSync from 'browser-sync';
|
||||
import through from 'through2';
|
||||
import swig from 'swig';
|
||||
import gulp from 'gulp';
|
||||
import closureCompiler from 'gulp-closure-compiler';
|
||||
import gulpLoadPlugins from 'gulp-load-plugins';
|
||||
import uniffe from './utils/uniffe.js';
|
||||
import pkg from './package.json';
|
||||
|
||||
const $ = gulpLoadPlugins();
|
||||
const reload = browserSync.reload;
|
||||
const hostedLibsUrlPrefix = 'https://code.getmdl.io';
|
||||
const templateArchivePrefix = 'mdl-template-';
|
||||
const bucketProd = 'gs://www.getmdl.io';
|
||||
const bucketStaging = 'gs://mdl-staging';
|
||||
const bucketCode = 'gs://code.getmdl.io';
|
||||
const banner = ['/**',
|
||||
' * <%= pkg.name %> - <%= pkg.description %>',
|
||||
' * @version v<%= pkg.version %>',
|
||||
' * @license <%= pkg.license %>',
|
||||
' * @copyright 2015 Google, Inc.',
|
||||
' * @link https://github.com/google/material-design-lite',
|
||||
' */',
|
||||
''].join('\n');
|
||||
|
||||
let codeFiles = '';
|
||||
|
||||
const AUTOPREFIXER_BROWSERS = [
|
||||
'ie >= 10',
|
||||
'ie_mob >= 10',
|
||||
'ff >= 30',
|
||||
'chrome >= 34',
|
||||
'safari >= 7',
|
||||
'opera >= 23',
|
||||
'ios >= 7',
|
||||
'android >= 4.4',
|
||||
'bb >= 10'
|
||||
];
|
||||
|
||||
const SOURCES = [
|
||||
// Component handler
|
||||
'src/mdlComponentHandler.js',
|
||||
// Polyfills/dependencies
|
||||
'src/third_party/**/*.js',
|
||||
// Base components
|
||||
'src/button/button.js',
|
||||
'src/checkbox/checkbox.js',
|
||||
'src/icon-toggle/icon-toggle.js',
|
||||
'src/menu/menu.js',
|
||||
'src/progress/progress.js',
|
||||
'src/radio/radio.js',
|
||||
'src/slider/slider.js',
|
||||
'src/snackbar/snackbar.js',
|
||||
'src/spinner/spinner.js',
|
||||
'src/switch/switch.js',
|
||||
'src/tabs/tabs.js',
|
||||
'src/textfield/textfield.js',
|
||||
'src/tooltip/tooltip.js',
|
||||
// Complex components (which reuse base components)
|
||||
'src/layout/layout.js',
|
||||
'src/data-table/data-table.js',
|
||||
// And finally, the ripples
|
||||
'src/ripple/ripple.js'
|
||||
];
|
||||
|
||||
// ***** Development tasks ****** //
|
||||
|
||||
// Lint JavaScript
|
||||
gulp.task('lint', () => {
|
||||
return gulp.src([
|
||||
'src/**/*.js',
|
||||
'gulpfile.babel.js'
|
||||
])
|
||||
.pipe(reload({stream: true, once: true}))
|
||||
.pipe($.jshint())
|
||||
.pipe($.jscs())
|
||||
.pipe($.jshint.reporter('jshint-stylish'))
|
||||
.pipe($.jscs.reporter())
|
||||
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')))
|
||||
.pipe($.if(!browserSync.active, $.jscs.reporter('fail')));
|
||||
});
|
||||
|
||||
// ***** Production build tasks ****** //
|
||||
|
||||
// Optimize Images
|
||||
// TODO: Update image paths in final CSS to match root/images
|
||||
gulp.task('images', () => {
|
||||
return gulp.src('src/**/*.{svg,png,jpg}')
|
||||
.pipe($.flatten())
|
||||
.pipe($.cache($.imagemin({
|
||||
progressive: true,
|
||||
interlaced: true
|
||||
})))
|
||||
.pipe(gulp.dest('dist/images'))
|
||||
.pipe($.size({title: 'images'}));
|
||||
});
|
||||
|
||||
// Compile and Automatically Prefix Stylesheets (dev)
|
||||
gulp.task('styles:dev', () => {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe($.sass({
|
||||
precision: 10,
|
||||
onError: console.error.bind(console, 'Sass error:')
|
||||
}))
|
||||
.pipe($.cssInlineImages({
|
||||
webRoot: 'src'
|
||||
}))
|
||||
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
||||
.pipe(gulp.dest('.tmp/styles'))
|
||||
.pipe($.size({title: 'styles'}));
|
||||
});
|
||||
|
||||
// Compile and Automatically Prefix Stylesheet Templates (production)
|
||||
gulp.task('styletemplates', () => {
|
||||
// For best performance, don't add Sass partials to `gulp.src`
|
||||
return gulp.src('src/template.scss')
|
||||
// Generate Source Maps
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe($.sass({
|
||||
precision: 10,
|
||||
onError: console.error.bind(console, 'Sass error:')
|
||||
}))
|
||||
.pipe($.cssInlineImages({webRoot: 'src'}))
|
||||
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
||||
.pipe(gulp.dest('.tmp'))
|
||||
// Concatenate Styles
|
||||
.pipe($.concat('material.css.template'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
// Minify Styles
|
||||
.pipe($.if('*.css.template', $.csso()))
|
||||
.pipe($.concat('material.min.css.template'))
|
||||
.pipe($.header(banner, {pkg}))
|
||||
.pipe($.sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe($.size({title: 'styles'}));
|
||||
});
|
||||
|
||||
// Compile and Automatically Prefix Stylesheets (production)
|
||||
gulp.task('styles', () => {
|
||||
// For best performance, don't add Sass partials to `gulp.src`
|
||||
return gulp.src('src/material-design-lite.scss')
|
||||
// Generate Source Maps
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe($.sass({
|
||||
precision: 10,
|
||||
onError: console.error.bind(console, 'Sass error:')
|
||||
}))
|
||||
.pipe($.cssInlineImages({webRoot: 'src'}))
|
||||
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
||||
.pipe(gulp.dest('.tmp'))
|
||||
// Concatenate Styles
|
||||
.pipe($.concat('material.css'))
|
||||
.pipe($.header(banner, {pkg}))
|
||||
.pipe(gulp.dest('dist'))
|
||||
// Minify Styles
|
||||
.pipe($.if('*.css', $.csso()))
|
||||
.pipe($.concat('material.min.css'))
|
||||
.pipe($.header(banner, {pkg}))
|
||||
.pipe($.sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe($.size({title: 'styles'}));
|
||||
});
|
||||
|
||||
// Only generate CSS styles for the MDL grid
|
||||
gulp.task('styles-grid', () => {
|
||||
return gulp.src('src/material-design-lite-grid.scss')
|
||||
.pipe($.sass({
|
||||
precision: 10,
|
||||
onError: console.error.bind(console, 'Sass error:')
|
||||
}))
|
||||
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
||||
.pipe(gulp.dest('.tmp'))
|
||||
// Concatenate Styles
|
||||
.pipe($.concat('material-grid.css'))
|
||||
.pipe($.header(banner, {pkg}))
|
||||
.pipe(gulp.dest('dist'))
|
||||
// Minify Styles
|
||||
.pipe($.if('*.css', $.csso()))
|
||||
.pipe($.concat('material-grid.min.css'))
|
||||
.pipe($.header(banner, {pkg}))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe($.size({title: 'styles-grid'}));
|
||||
});
|
||||
|
||||
// Build with Google's Closure Compiler, requires Java 1.7+ installed.
|
||||
gulp.task('closure', () => {
|
||||
return gulp.src(SOURCES)
|
||||
.pipe(closureCompiler({
|
||||
compilerPath: 'node_modules/google-closure-compiler/compiler.jar',
|
||||
fileName: 'material.closure.min.js',
|
||||
compilerFlags: {
|
||||
// jscs:disable closureCamelCase
|
||||
compilation_level: 'ADVANCED_OPTIMIZATIONS',
|
||||
language_in: 'ECMASCRIPT6_STRICT',
|
||||
language_out: 'ECMASCRIPT5_STRICT',
|
||||
warning_level: 'VERBOSE'
|
||||
// jscs:enable closureCamelCase
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest('./dist'));
|
||||
});
|
||||
|
||||
// Concatenate And Minify JavaScript
|
||||
gulp.task('scripts', ['lint'], () => {
|
||||
return gulp.src(SOURCES)
|
||||
.pipe($.if(/mdlComponentHandler\.js/, $.util.noop(), uniffe()))
|
||||
.pipe($.sourcemaps.init())
|
||||
// Concatenate Scripts
|
||||
.pipe($.concat('material.js'))
|
||||
.pipe($.iife({useStrict: true}))
|
||||
.pipe(gulp.dest('dist'))
|
||||
// Minify Scripts
|
||||
.pipe($.uglify({
|
||||
sourceRoot: '.',
|
||||
sourceMapIncludeSources: true
|
||||
}))
|
||||
.pipe($.header(banner, {pkg}))
|
||||
.pipe($.concat('material.min.js'))
|
||||
// Write Source Maps
|
||||
.pipe($.sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe($.size({title: 'scripts'}));
|
||||
});
|
||||
|
||||
// Clean Output Directory
|
||||
gulp.task('clean', () => del(['dist', '.publish']));
|
||||
|
||||
// Copy package manger and LICENSE files to dist
|
||||
gulp.task('metadata', () => {
|
||||
return gulp.src([
|
||||
'package.json',
|
||||
'bower.json',
|
||||
'LICENSE'
|
||||
])
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
// Build Production Files, the Default Task
|
||||
gulp.task('default', ['clean'], cb => {
|
||||
runSequence(
|
||||
['styles', 'styles-grid'],
|
||||
['scripts'],
|
||||
['mocha'],
|
||||
cb);
|
||||
});
|
||||
|
||||
// Build production files and microsite
|
||||
gulp.task('all', ['clean'], cb => {
|
||||
runSequence(
|
||||
['styletemplates'],
|
||||
['styles-grid', 'styles:gen'],
|
||||
['scripts'],
|
||||
['mocha'],
|
||||
['assets', 'pages',
|
||||
'templates', 'images', 'metadata'],
|
||||
['zip'],
|
||||
cb);
|
||||
});
|
||||
|
||||
// ***** Testing tasks ***** //
|
||||
|
||||
gulp.task('mocha', ['styles'], () => {
|
||||
return gulp.src('test/index.html')
|
||||
.pipe($.mochaPhantomjs({reporter: 'tap'}));
|
||||
});
|
||||
|
||||
gulp.task('mocha:closure', ['closure'], () => {
|
||||
return gulp.src('test/index.html')
|
||||
.pipe($.replace('src="../dist/material.js"',
|
||||
'src="../dist/material.closure.min.js"'))
|
||||
.pipe($.rename('temp.html'))
|
||||
.pipe(gulp.dest('test'))
|
||||
.pipe($.mochaPhantomjs({reporter: 'tap'}))
|
||||
.on('finish', () => del.sync('test/temp.html'))
|
||||
.on('error', () => del.sync('test/temp.html'));
|
||||
});
|
||||
|
||||
gulp.task('test', [
|
||||
'lint',
|
||||
'mocha',
|
||||
'mocha:closure'
|
||||
]);
|
||||
|
||||
gulp.task('test:visual', () => {
|
||||
browserSync({
|
||||
notify: false,
|
||||
server: '.',
|
||||
startPath: 'test/visual/index.html'
|
||||
});
|
||||
|
||||
gulp.watch('test/visual/**', reload);
|
||||
});
|
||||
|
||||
// ***** Landing page tasks ***** //
|
||||
|
||||
/**
|
||||
* Site metadata for use with templates.
|
||||
* @type {Object}
|
||||
*/
|
||||
const site = {};
|
||||
|
||||
/**
|
||||
* Generates an HTML file based on a template and file metadata.
|
||||
*/
|
||||
function applyTemplate() {
|
||||
return through.obj((file, enc, cb) => {
|
||||
const data = {
|
||||
site,
|
||||
page: file.page,
|
||||
content: file.contents.toString()
|
||||
};
|
||||
|
||||
const templateFile = path.join(
|
||||
__dirname, 'docs', '_templates', `${file.page.layout}.html`);
|
||||
const tpl = swig.compileFile(templateFile, {cache: false});
|
||||
|
||||
file.contents = new Buffer(tpl(data));
|
||||
cb(null, file);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates an index.html file for each README in MDL/src directory.
|
||||
*/
|
||||
gulp.task('components', ['demos'], () => {
|
||||
return gulp.src('src/**/README.md', {base: 'src'})
|
||||
// Add basic front matter.
|
||||
.pipe($.header('---\nlayout: component\nbodyclass: component\ninclude_prefix: ../../\n---\n\n'))
|
||||
.pipe($.frontMatter({
|
||||
property: 'page',
|
||||
remove: true
|
||||
}))
|
||||
.pipe($.marked())
|
||||
.pipe((() => {
|
||||
return through.obj((file, enc, cb) => {
|
||||
file.page.component = file.relative.split('/')[0];
|
||||
cb(null, file);
|
||||
});
|
||||
})())
|
||||
.pipe(applyTemplate())
|
||||
.pipe($.rename(path => path.basename = 'index'))
|
||||
.pipe(gulp.dest('dist/components'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Copies demo files from MDL/src directory.
|
||||
*/
|
||||
gulp.task('demoresources', () => {
|
||||
return gulp.src([
|
||||
'src/**/demos.css',
|
||||
'src/**/demo.css',
|
||||
'src/**/demo.js'
|
||||
], {base: 'src'})
|
||||
.pipe($.if('*.scss', $.sass({
|
||||
precision: 10,
|
||||
onError: console.error.bind(console, 'Sass error:')
|
||||
})))
|
||||
.pipe($.cssInlineImages({webRoot: 'src'}))
|
||||
.pipe($.if('*.css', $.autoprefixer(AUTOPREFIXER_BROWSERS)))
|
||||
.pipe(gulp.dest('dist/components'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Generates demo files for testing made of all the snippets and the demo file
|
||||
* put together.
|
||||
*/
|
||||
gulp.task('demos', ['demoresources'], () => {
|
||||
/**
|
||||
* Retrieves the list of component folders.
|
||||
*/
|
||||
function getComponentFolders() {
|
||||
return fs.readdirSync('src')
|
||||
.filter(file => fs.statSync(path.join('src', file)).isDirectory());
|
||||
}
|
||||
|
||||
const tasks = getComponentFolders().map(component => {
|
||||
return gulp.src([
|
||||
path.join('src', component, 'snippets', '*.html'),
|
||||
path.join('src', component, 'demo.html')
|
||||
])
|
||||
.pipe($.concat('/demo.html'))
|
||||
// Add basic front matter.
|
||||
.pipe($.header('---\nlayout: demo\nbodyclass: demo\ninclude_prefix: ../../\n---\n\n'))
|
||||
.pipe($.frontMatter({
|
||||
property: 'page',
|
||||
remove: true
|
||||
}))
|
||||
.pipe($.marked())
|
||||
.pipe((() => {
|
||||
return through.obj((file, enc, cb) => {
|
||||
file.page.component = component;
|
||||
cb(null, file);
|
||||
});
|
||||
})())
|
||||
.pipe(applyTemplate())
|
||||
.pipe(gulp.dest(path.join('dist', 'components', component)));
|
||||
});
|
||||
|
||||
return mergeStream(tasks);
|
||||
});
|
||||
|
||||
/**
|
||||
* Generates an HTML file for each md file in _pages directory.
|
||||
*/
|
||||
gulp.task('pages', ['components'], () => {
|
||||
return gulp.src('docs/_pages/*.md')
|
||||
.pipe($.frontMatter({
|
||||
property: 'page',
|
||||
remove: true
|
||||
}))
|
||||
.pipe($.marked())
|
||||
.pipe(applyTemplate())
|
||||
.pipe($.replace('$$version$$', pkg.version))
|
||||
.pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
|
||||
.pipe($.replace('$$template_archive_prefix$$', templateArchivePrefix))
|
||||
/* Replacing code blocks class name to match Prism's. */
|
||||
.pipe($.replace('class="lang-', 'class="language-'))
|
||||
/* Translate html code blocks to "markup" because that's what Prism uses. */
|
||||
.pipe($.replace('class="language-html', 'class="language-markup'))
|
||||
.pipe($.rename(path => {
|
||||
if (path.basename !== 'index') {
|
||||
path.dirname = path.basename;
|
||||
path.basename = 'index';
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Copies assets from MDL and _assets directory.
|
||||
*/
|
||||
gulp.task('assets', () => {
|
||||
return gulp.src([
|
||||
'docs/_assets/**/*',
|
||||
'node_modules/clippy/build/clippy.swf',
|
||||
'node_modules/swfobject-npm/swfobject/src/swfobject.js',
|
||||
'node_modules/prismjs/prism.js',
|
||||
'node_modules/prismjs/components/prism-markup.min.js',
|
||||
'node_modules/prismjs/components/prism-javascript.min.js',
|
||||
'node_modules/prismjs/components/prism-css.min.js',
|
||||
'node_modules/prismjs/components/prism-bash.min.js',
|
||||
'node_modules/prismjs/dist/prism-default/prism-default.css'
|
||||
])
|
||||
.pipe($.if(/\.js/i, $.replace('$$version$$', pkg.version)))
|
||||
.pipe($.if(/\.js/i, $.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix)))
|
||||
.pipe($.if(/\.(svg|jpg|png)$/i, $.imagemin({
|
||||
progressive: true,
|
||||
interlaced: true
|
||||
})))
|
||||
.pipe($.if(/\.css/i, $.autoprefixer(AUTOPREFIXER_BROWSERS)))
|
||||
.pipe($.if(/\.css/i, $.csso()))
|
||||
.pipe($.if(/\.js/i, $.uglify({
|
||||
preserveComments: 'some',
|
||||
sourceRoot: '.',
|
||||
sourceMapIncludeSources: true
|
||||
})))
|
||||
.pipe(gulp.dest('dist/assets'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Defines the list of resources to watch for changes.
|
||||
*/
|
||||
function watch() {
|
||||
gulp.watch(['src/**/*.js', '!src/**/README.md'],
|
||||
['scripts', 'demos', 'components', reload]);
|
||||
gulp.watch(['src/**/*.{scss,css}'],
|
||||
['styles', 'styles-grid', 'styletemplates', reload]);
|
||||
gulp.watch(['src/**/*.html'], ['pages', reload]);
|
||||
gulp.watch(['src/**/*.{svg,png,jpg}'], ['images', reload]);
|
||||
gulp.watch(['src/**/README.md'], ['pages', reload]);
|
||||
gulp.watch(['templates/**/*'], ['templates', reload]);
|
||||
gulp.watch(['docs/**/*'], ['pages', 'assets', reload]);
|
||||
gulp.watch(['package.json', 'bower.json', 'LICENSE'], ['metadata']);
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves the landing page from "out" directory.
|
||||
*/
|
||||
gulp.task('serve:browsersync', () => {
|
||||
browserSync({
|
||||
notify: false,
|
||||
server: {
|
||||
baseDir: ['dist']
|
||||
}
|
||||
});
|
||||
|
||||
watch();
|
||||
});
|
||||
|
||||
gulp.task('serve', () => {
|
||||
$.connect.server({
|
||||
root: 'dist',
|
||||
port: 5000,
|
||||
livereload: true
|
||||
});
|
||||
|
||||
watch();
|
||||
|
||||
gulp.src('dist/index.html')
|
||||
.pipe($.open({uri: 'http://localhost:5000'}));
|
||||
});
|
||||
|
||||
// Generate release archive containing just JS, CSS, Source Map deps
|
||||
gulp.task('zip:mdl', () => {
|
||||
return gulp.src([
|
||||
'dist/material?(.min)@(.js|.css)?(.map)',
|
||||
'LICENSE',
|
||||
'bower.json',
|
||||
'package.json'
|
||||
])
|
||||
.pipe($.zip('mdl.zip'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns the list of children directories inside the given directory.
|
||||
* @param {string} dir the parent directory
|
||||
* @return {Array<string>} list of child directories
|
||||
*/
|
||||
function getSubDirectories(dir) {
|
||||
return fs.readdirSync(dir)
|
||||
.filter(file => fs.statSync(path.join(dir, file)).isDirectory());
|
||||
}
|
||||
|
||||
// Generate release archives containing the templates and assets for templates.
|
||||
gulp.task('zip:templates', () => {
|
||||
const templates = getSubDirectories('dist/templates');
|
||||
|
||||
// Generate a zip file for each template.
|
||||
const generateZips = templates.map(template => {
|
||||
return gulp.src([
|
||||
`dist/templates/${template}/**/*.*`,
|
||||
'LICENSE'
|
||||
])
|
||||
.pipe($.rename(path => {
|
||||
path.dirname = path.dirname.replace(`dist/templates/${template}`, '');
|
||||
}))
|
||||
.pipe($.zip(`${templateArchivePrefix}${template}.zip`))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
return mergeStream(generateZips);
|
||||
});
|
||||
|
||||
gulp.task('zip', [
|
||||
'zip:templates',
|
||||
'zip:mdl'
|
||||
]);
|
||||
|
||||
gulp.task('genCodeFiles', () => {
|
||||
return gulp.src([
|
||||
'dist/material.*@(js|css)?(.map)',
|
||||
'dist/mdl.zip',
|
||||
`dist/${templateArchivePrefix}*.zip`
|
||||
], {read: false})
|
||||
.pipe($.tap(file => {
|
||||
codeFiles += ` dist/${path.basename(file.path)}`;
|
||||
}));
|
||||
});
|
||||
|
||||
// Push the latest version of code resources (CSS+JS) to Google Cloud Storage.
|
||||
// Public-read objects in GCS are served by a Google provided and supported
|
||||
// global, high performance caching/content delivery network (CDN) service.
|
||||
// This task requires gsutil to be installed and configured.
|
||||
// For info on gsutil: https://cloud.google.com/storage/docs/gsutil.
|
||||
gulp.task('pushCodeFiles', () => {
|
||||
const dest = bucketCode;
|
||||
console.log(`Publishing ${pkg.version} to CDN (${dest})`);
|
||||
|
||||
// Build cache control and gsutil cmd to copy
|
||||
// each object into a GCS bucket. The dest is a version specific path.
|
||||
// The gsutil -m option requests parallel copies.
|
||||
// The gsutil -h option is used to set metadata headers
|
||||
// (cache control, in this case).
|
||||
// Code files should NEVER be touched after uploading, therefore
|
||||
// 30 days caching is a safe value.
|
||||
const cacheControl = '-h "Cache-Control:public,max-age=2592000"';
|
||||
const gsutilCpCmd = 'gsutil -m cp -z js,css,map ';
|
||||
const gsutilCacheCmd = `gsutil -m setmeta -R ${cacheControl}`;
|
||||
|
||||
// Upload the goodies to a separate GCS bucket with versioning.
|
||||
// Using a sep bucket avoids the risk of accidentally blowing away
|
||||
// old versions in the microsite bucket.
|
||||
return gulp.src('')
|
||||
.pipe($.shell([
|
||||
`${gsutilCpCmd}${codeFiles} ${dest}/${pkg.version}`,
|
||||
`${gsutilCacheCmd} ${dest}/${pkg.version}`
|
||||
]));
|
||||
});
|
||||
|
||||
gulp.task('publish:code', cb => {
|
||||
runSequence(
|
||||
['zip:mdl', 'zip:templates'],
|
||||
'genCodeFiles',
|
||||
'pushCodeFiles',
|
||||
cb);
|
||||
});
|
||||
|
||||
/**
|
||||
* Function to publish staging or prod version from local tree,
|
||||
* or to promote staging to prod, per passed arg.
|
||||
* @param {string} pubScope the scope to publish to.
|
||||
*/
|
||||
function mdlPublish(pubScope) {
|
||||
let cacheTtl = null;
|
||||
let src = null;
|
||||
let dest = null;
|
||||
|
||||
if (pubScope === 'staging') {
|
||||
// Set staging specific vars here.
|
||||
cacheTtl = 0;
|
||||
src = 'dist/*';
|
||||
dest = bucketStaging;
|
||||
} else if (pubScope === 'prod') {
|
||||
// Set prod specific vars here.
|
||||
cacheTtl = 60;
|
||||
src = 'dist/*';
|
||||
dest = bucketProd;
|
||||
} else if (pubScope === 'promote') {
|
||||
// Set promote (essentially prod) specific vars here.
|
||||
cacheTtl = 60;
|
||||
src = `${bucketStaging}/*`;
|
||||
dest = bucketProd;
|
||||
}
|
||||
|
||||
let infoMsg = `Publishing ${pubScope}/${pkg.version} to GCS (${dest})`;
|
||||
if (src) {
|
||||
infoMsg += ` from ${src}`;
|
||||
}
|
||||
console.log(infoMsg);
|
||||
|
||||
// Build gsutil commands:
|
||||
// The gsutil -h option is used to set metadata headers.
|
||||
// The gsutil -m option requests parallel copies.
|
||||
// The gsutil -R option is used for recursive file copy.
|
||||
const cacheControl = `-h "Cache-Control:public,max-age=${cacheTtl}"`;
|
||||
const gsutilCacheCmd = `gsutil -m setmeta ${cacheControl} ${dest}/**`;
|
||||
const gsutilCpCmd = `gsutil -m cp -r -z html,css,js,svg ${src} ${dest}`;
|
||||
|
||||
gulp.src('').pipe($.shell([gsutilCpCmd, gsutilCacheCmd]));
|
||||
}
|
||||
|
||||
// Push the local build of the MDL microsite and release artifacts to the
|
||||
// production Google Cloud Storage bucket for general serving to the web.
|
||||
// Public-read objects in GCS are served by a Google provided and supported
|
||||
// global, high performance caching/content delivery network (CDN) service.
|
||||
// This task requires gsutil to be installed and configured.
|
||||
// For info on gsutil: https://cloud.google.com/storage/docs/gsutil.
|
||||
//
|
||||
gulp.task('publish:prod', () => {
|
||||
mdlPublish('prod');
|
||||
});
|
||||
|
||||
// Promote the staging version of the MDL microsite and release artifacts
|
||||
// to the production Google Cloud Storage bucket for general serving.
|
||||
// Public-read objects in GCS are served by a Google provided and supported
|
||||
// global, high performance caching/content delivery network (CDN) service.
|
||||
// This task requires gsutil to be installed and configured.
|
||||
// For info on gsutil: https://cloud.google.com/storage/docs/gsutil.
|
||||
//
|
||||
gulp.task('publish:promote', () => {
|
||||
mdlPublish('promote');
|
||||
});
|
||||
|
||||
// Push the staged version of the MDL microsite and release artifacts
|
||||
// to a production Google Cloud Storage bucket for staging and pre-production testing.
|
||||
//
|
||||
// This task requires gsutil to be installed and configured.
|
||||
// For info on gsutil: https://cloud.google.com/storage/docs/gsutil.
|
||||
//
|
||||
gulp.task('publish:staging', () => {
|
||||
mdlPublish('staging');
|
||||
});
|
||||
|
||||
gulp.task('_release', () => {
|
||||
return gulp.src([
|
||||
'dist/material?(.min)@(.js|.css)?(.map)',
|
||||
'LICENSE',
|
||||
'README.md',
|
||||
'bower.json',
|
||||
'package.json',
|
||||
'.jscsrc',
|
||||
'.jshintrc',
|
||||
'./sr?/**/*',
|
||||
'gulpfile.babel.js',
|
||||
'./util?/**/*'
|
||||
])
|
||||
.pipe(gulp.dest('_release'));
|
||||
});
|
||||
|
||||
gulp.task('publish:release', ['_release'], () => {
|
||||
return gulp.src('_release')
|
||||
.pipe($.subtree({
|
||||
remote: 'origin',
|
||||
branch: 'release'
|
||||
}))
|
||||
.pipe(vinylPaths(del));
|
||||
});
|
||||
|
||||
gulp.task('templates:styles', () => {
|
||||
return gulp.src('templates/**/*.css')
|
||||
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
||||
// FIXME: This crashes. It's a bug in gulp-csso,
|
||||
// not csso itself.
|
||||
//.pipe($.csso())
|
||||
.pipe(gulp.dest('dist/templates'));
|
||||
});
|
||||
|
||||
gulp.task('templates:static', () => {
|
||||
return gulp.src('templates/**/*.html')
|
||||
.pipe($.replace('$$version$$', pkg.version))
|
||||
.pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
|
||||
.pipe(gulp.dest('dist/templates'));
|
||||
});
|
||||
|
||||
// This task can be used if you want to test the templates against locally
|
||||
// built version of the MDL libraries.
|
||||
gulp.task('templates:localtestingoverride', () => {
|
||||
return gulp.src('templates/**/*.html')
|
||||
.pipe($.replace('$$version$$', '.'))
|
||||
.pipe($.replace('$$hosted_libs_prefix$$', ''))
|
||||
.pipe(gulp.dest('dist/templates'));
|
||||
});
|
||||
|
||||
gulp.task('templates:images', () => {
|
||||
return gulp.src('templates/*/images/**/*')
|
||||
.pipe($.imagemin({
|
||||
progressive: true,
|
||||
interlaced: true
|
||||
}))
|
||||
.pipe(gulp.dest('dist/templates'));
|
||||
});
|
||||
|
||||
gulp.task('templates:fonts', () => {
|
||||
return gulp.src('templates/*/fonts/**/*')
|
||||
.pipe(gulp.dest('dist/templates/'));
|
||||
});
|
||||
|
||||
gulp.task('templates', [
|
||||
'templates:static',
|
||||
'templates:images',
|
||||
'templates:fonts',
|
||||
'templates:styles'
|
||||
]);
|
||||
|
||||
gulp.task('styles:gen', ['styles'], () => {
|
||||
const MaterialCustomizer = require('./docs/_assets/customizer.js');
|
||||
const templatePath = path.join(__dirname, 'dist', 'material.min.css.template');
|
||||
// TODO: This task needs refactoring once we turn MaterialCustomizer
|
||||
// into a proper Node module.
|
||||
const mc = new MaterialCustomizer();
|
||||
mc.template = fs.readFileSync(templatePath).toString();
|
||||
|
||||
let stream = gulp.src('');
|
||||
|
||||
mc.paletteIndices.forEach(primary => {
|
||||
mc.paletteIndices.forEach(accent => {
|
||||
if (primary === accent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (mc.forbiddenAccents.indexOf(accent) !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const primaryName = primary.toLowerCase().replace(' ', '_');
|
||||
const accentName = accent.toLowerCase().replace(' ', '_');
|
||||
|
||||
stream = stream.pipe($.file(
|
||||
`material.${primaryName}-${accentName}.min.css`,
|
||||
mc.processTemplate(primary, accent)
|
||||
));
|
||||
});
|
||||
});
|
||||
|
||||
stream.pipe(gulp.dest('dist'));
|
||||
});
|
10989
dashboard-ui/bower_components/material-design-lite/material.css
vendored
Normal file
10989
dashboard-ui/bower_components/material-design-lite/material.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
3971
dashboard-ui/bower_components/material-design-lite/material.js
vendored
Normal file
3971
dashboard-ui/bower_components/material-design-lite/material.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9
dashboard-ui/bower_components/material-design-lite/material.min.css
vendored
Normal file
9
dashboard-ui/bower_components/material-design-lite/material.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dashboard-ui/bower_components/material-design-lite/material.min.css.map
vendored
Normal file
1
dashboard-ui/bower_components/material-design-lite/material.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
10
dashboard-ui/bower_components/material-design-lite/material.min.js
vendored
Normal file
10
dashboard-ui/bower_components/material-design-lite/material.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dashboard-ui/bower_components/material-design-lite/material.min.js.map
vendored
Normal file
1
dashboard-ui/bower_components/material-design-lite/material.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
72
dashboard-ui/bower_components/material-design-lite/package.json
vendored
Normal file
72
dashboard-ui/bower_components/material-design-lite/package.json
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.1.2",
|
||||
"description": "Material Design Components in CSS, JS and HTML",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
"author": "Google",
|
||||
"repository": "google/material-design-lite",
|
||||
"main": "dist/material.min.js",
|
||||
"devDependencies": {
|
||||
"acorn": "^2.2.0",
|
||||
"babel-core": "^5.8.25",
|
||||
"browser-sync": "^2.2.3",
|
||||
"chai": "^3.3.0",
|
||||
"chai-jquery": "^2.0.0",
|
||||
"del": "^2.0.2",
|
||||
"drool": "^0.3.1",
|
||||
"escodegen": "^1.6.1",
|
||||
"google-closure-compiler": "",
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-autoprefixer": "^3.0.2",
|
||||
"gulp-cache": "^0.3.0",
|
||||
"gulp-closure-compiler": "^0.3.1",
|
||||
"gulp-concat": "^2.4.1",
|
||||
"gulp-connect": "^2.2.0",
|
||||
"gulp-css-inline-images": "^0.1.1",
|
||||
"gulp-csso": "1.0.0",
|
||||
"gulp-file": "^0.2.0",
|
||||
"gulp-flatten": "^0.2.0",
|
||||
"gulp-front-matter": "^1.2.2",
|
||||
"gulp-header": "^1.2.2",
|
||||
"gulp-if": "^2.0.0",
|
||||
"gulp-iife": "^0.1.0",
|
||||
"gulp-imagemin": "^2.2.1",
|
||||
"gulp-jscs": "^3.0.1",
|
||||
"gulp-jshint": "^1.6.3",
|
||||
"gulp-load-plugins": "^0.10.0",
|
||||
"gulp-marked": "^1.0.0",
|
||||
"gulp-mocha-phantomjs": "^0.10.1",
|
||||
"gulp-open": "^1.0.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.5.3",
|
||||
"gulp-sass": "2.0.*",
|
||||
"gulp-shell": "^0.4.2",
|
||||
"gulp-size": "^2.0.0",
|
||||
"gulp-sourcemaps": "^1.3.0",
|
||||
"gulp-subtree": "^0.1.0",
|
||||
"gulp-tap": "^0.1.3",
|
||||
"gulp-uglify": "^1.0.1",
|
||||
"gulp-util": "^3.0.4",
|
||||
"gulp-zip": "^3.0.2",
|
||||
"humanize": "0.0.9",
|
||||
"jquery": "^2.1.3",
|
||||
"jshint-stylish": "^2.0.1",
|
||||
"merge-stream": "^1.0.0",
|
||||
"mocha": "^2.1.0",
|
||||
"prismjs": "0.0.1",
|
||||
"run-sequence": "^1.0.2",
|
||||
"swig": "^1.4.2",
|
||||
"through2": "^2.0.0",
|
||||
"vinyl-paths": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
|
||||
},
|
||||
"babel": {
|
||||
"only": "gulpfile.babel.js"
|
||||
}
|
||||
}
|
44
dashboard-ui/bower_components/material-design-lite/src/INTRODUCTION.md
vendored
Normal file
44
dashboard-ui/bower_components/material-design-lite/src/INTRODUCTION.md
vendored
Normal file
@ -0,0 +1,44 @@
|
||||
# Material Design Lite
|
||||
|
||||
## Introduction
|
||||
**Material Design Light (MDL)** is a library of components for web developers based on Google's **Material Design** philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the MDL components. If you have not yet read the [Material Design Introduction](http://www.google.com/design/spec/material-design/introduction.html), you should do so before attempting to use the components.
|
||||
|
||||
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
|
||||
|
||||
The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more.
|
||||
|
||||
MDL is free to download and use, and may be used with or without any build library or development environment (such as [Material Design Lite](http://www.getmdl.io/)). It is a cross-browser, cross-OS web developer's toolkit that can be used by anyone who wants to write more productive, portable, and — most importantly — usable web pages.
|
||||
|
||||
## Getting started
|
||||
|
||||
### Get the components
|
||||
To obtain the components, clone or download the [GitHub MDL repository](https://github.com/google/material-design-lite). Copy the entire package (the top-level folder and everything below it) to the project folder where you will write your HTML pages. This ensures that your project can access all of MDL's components and assets, and that you always have the original files for reference in case you break something. :-)
|
||||
|
||||
### Include the master CSS and JavaScript
|
||||
In each HTML page in your project, include the minified (compressed) CSS and JavaScript files using standard relative-path references and the Material Icon font. This example assumes that a copy of the MDL package folders resides in your project folder.
|
||||
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/material.min.css">
|
||||
<script src="js/material.min.js"></script>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
```
|
||||
|
||||
That's it! You are now ready to use the MDL components.
|
||||
|
||||
### Use the components
|
||||
In general, follow these basic steps to use an MDL component in your HTML page.
|
||||
|
||||
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br><br>
|
||||
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button` or `mdl-tabs__panel` again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br><br>
|
||||
3. View the page, preferably in multiple browsers on multiple devices, to ensure that the component looks and behaves as expected.
|
||||
|
||||
>**A note about HTML elements and MDL CSS classes**
|
||||
>Material Design Lite uses CSS *independent classes*, which can apply to any HTML element, to construct components. For some components, you can use almost any element. For other components, some elements give better visual or behavioral performance than others. The examples in each component's README file use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
|
||||
|
||||
## What's next?
|
||||
Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in each component's `README.md` file. Working examples using various options are in each component's `demo.html` page.
|
||||
|
||||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
599
dashboard-ui/bower_components/material-design-lite/src/_color-definitions.scss
vendored
Normal file
599
dashboard-ui/bower_components/material-design-lite/src/_color-definitions.scss
vendored
Normal file
@ -0,0 +1,599 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/* ========== Color Palettes ========== */
|
||||
|
||||
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
|
||||
// A400, A700.
|
||||
|
||||
$palette-red:
|
||||
"255,235,238"
|
||||
"255,205,210"
|
||||
"239,154,154"
|
||||
"229,115,115"
|
||||
"239,83,80"
|
||||
"244,67,54"
|
||||
"229,57,53"
|
||||
"211,47,47"
|
||||
"198,40,40"
|
||||
"183,28,28"
|
||||
"255,138,128"
|
||||
"255,82,82"
|
||||
"255,23,68"
|
||||
"213,0,0";
|
||||
|
||||
$palette-red-50: nth($palette-red, 1);
|
||||
$palette-red-100: nth($palette-red, 2);
|
||||
$palette-red-200: nth($palette-red, 3);
|
||||
$palette-red-300: nth($palette-red, 4);
|
||||
$palette-red-400: nth($palette-red, 5);
|
||||
$palette-red-500: nth($palette-red, 6);
|
||||
$palette-red-600: nth($palette-red, 7);
|
||||
$palette-red-700: nth($palette-red, 8);
|
||||
$palette-red-800: nth($palette-red, 9);
|
||||
$palette-red-900: nth($palette-red, 10);
|
||||
$palette-red-A100: nth($palette-red, 11);
|
||||
$palette-red-A200: nth($palette-red, 12);
|
||||
$palette-red-A400: nth($palette-red, 13);
|
||||
$palette-red-A700: nth($palette-red, 14);
|
||||
|
||||
$palette-pink:
|
||||
"252,228,236"
|
||||
"248,187,208"
|
||||
"244,143,177"
|
||||
"240,98,146"
|
||||
"236,64,122"
|
||||
"233,30,99"
|
||||
"216,27,96"
|
||||
"194,24,91"
|
||||
"173,20,87"
|
||||
"136,14,79"
|
||||
"255,128,171"
|
||||
"255,64,129"
|
||||
"245,0,87"
|
||||
"197,17,98";
|
||||
|
||||
$palette-pink-50: nth($palette-pink, 1);
|
||||
$palette-pink-100: nth($palette-pink, 2);
|
||||
$palette-pink-200: nth($palette-pink, 3);
|
||||
$palette-pink-300: nth($palette-pink, 4);
|
||||
$palette-pink-400: nth($palette-pink, 5);
|
||||
$palette-pink-500: nth($palette-pink, 6);
|
||||
$palette-pink-600: nth($palette-pink, 7);
|
||||
$palette-pink-700: nth($palette-pink, 8);
|
||||
$palette-pink-800: nth($palette-pink, 9);
|
||||
$palette-pink-900: nth($palette-pink, 10);
|
||||
$palette-pink-A100: nth($palette-pink, 11);
|
||||
$palette-pink-A200: nth($palette-pink, 12);
|
||||
$palette-pink-A400: nth($palette-pink, 13);
|
||||
$palette-pink-A700: nth($palette-pink, 14);
|
||||
|
||||
$palette-purple:
|
||||
"243,229,245"
|
||||
"225,190,231"
|
||||
"206,147,216"
|
||||
"186,104,200"
|
||||
"171,71,188"
|
||||
"156,39,176"
|
||||
"142,36,170"
|
||||
"123,31,162"
|
||||
"106,27,154"
|
||||
"74,20,140"
|
||||
"234,128,252"
|
||||
"224,64,251"
|
||||
"213,0,249"
|
||||
"170,0,255";
|
||||
|
||||
$palette-purple-50: nth($palette-purple, 1);
|
||||
$palette-purple-100: nth($palette-purple, 2);
|
||||
$palette-purple-200: nth($palette-purple, 3);
|
||||
$palette-purple-300: nth($palette-purple, 4);
|
||||
$palette-purple-400: nth($palette-purple, 5);
|
||||
$palette-purple-500: nth($palette-purple, 6);
|
||||
$palette-purple-600: nth($palette-purple, 7);
|
||||
$palette-purple-700: nth($palette-purple, 8);
|
||||
$palette-purple-800: nth($palette-purple, 9);
|
||||
$palette-purple-900: nth($palette-purple, 10);
|
||||
$palette-purple-A100: nth($palette-purple, 11);
|
||||
$palette-purple-A200: nth($palette-purple, 12);
|
||||
$palette-purple-A400: nth($palette-purple, 13);
|
||||
$palette-purple-A700: nth($palette-purple, 14);
|
||||
|
||||
$palette-deep-purple:
|
||||
"237,231,246"
|
||||
"209,196,233"
|
||||
"179,157,219"
|
||||
"149,117,205"
|
||||
"126,87,194"
|
||||
"103,58,183"
|
||||
"94,53,177"
|
||||
"81,45,168"
|
||||
"69,39,160"
|
||||
"49,27,146"
|
||||
"179,136,255"
|
||||
"124,77,255"
|
||||
"101,31,255"
|
||||
"98,0,234";
|
||||
|
||||
$palette-deep-purple-50: nth($palette-deep-purple, 1);
|
||||
$palette-deep-purple-100: nth($palette-deep-purple, 2);
|
||||
$palette-deep-purple-200: nth($palette-deep-purple, 3);
|
||||
$palette-deep-purple-300: nth($palette-deep-purple, 4);
|
||||
$palette-deep-purple-400: nth($palette-deep-purple, 5);
|
||||
$palette-deep-purple-500: nth($palette-deep-purple, 6);
|
||||
$palette-deep-purple-600: nth($palette-deep-purple, 7);
|
||||
$palette-deep-purple-700: nth($palette-deep-purple, 8);
|
||||
$palette-deep-purple-800: nth($palette-deep-purple, 9);
|
||||
$palette-deep-purple-900: nth($palette-deep-purple, 10);
|
||||
$palette-deep-purple-A100: nth($palette-deep-purple, 11);
|
||||
$palette-deep-purple-A200: nth($palette-deep-purple, 12);
|
||||
$palette-deep-purple-A400: nth($palette-deep-purple, 13);
|
||||
$palette-deep-purple-A700: nth($palette-deep-purple, 14);
|
||||
|
||||
$palette-indigo:
|
||||
"232,234,246"
|
||||
"197,202,233"
|
||||
"159,168,218"
|
||||
"121,134,203"
|
||||
"92,107,192"
|
||||
"63,81,181"
|
||||
"57,73,171"
|
||||
"48,63,159"
|
||||
"40,53,147"
|
||||
"26,35,126"
|
||||
"140,158,255"
|
||||
"83,109,254"
|
||||
"61,90,254"
|
||||
"48,79,254";
|
||||
|
||||
$palette-indigo-50: nth($palette-indigo, 1);
|
||||
$palette-indigo-100: nth($palette-indigo, 2);
|
||||
$palette-indigo-200: nth($palette-indigo, 3);
|
||||
$palette-indigo-300: nth($palette-indigo, 4);
|
||||
$palette-indigo-400: nth($palette-indigo, 5);
|
||||
$palette-indigo-500: nth($palette-indigo, 6);
|
||||
$palette-indigo-600: nth($palette-indigo, 7);
|
||||
$palette-indigo-700: nth($palette-indigo, 8);
|
||||
$palette-indigo-800: nth($palette-indigo, 9);
|
||||
$palette-indigo-900: nth($palette-indigo, 10);
|
||||
$palette-indigo-A100: nth($palette-indigo, 11);
|
||||
$palette-indigo-A200: nth($palette-indigo, 12);
|
||||
$palette-indigo-A400: nth($palette-indigo, 13);
|
||||
$palette-indigo-A700: nth($palette-indigo, 14);
|
||||
|
||||
$palette-blue:
|
||||
"227,242,253"
|
||||
"187,222,251"
|
||||
"144,202,249"
|
||||
"100,181,246"
|
||||
"66,165,245"
|
||||
"33,150,243"
|
||||
"30,136,229"
|
||||
"25,118,210"
|
||||
"21,101,192"
|
||||
"13,71,161"
|
||||
"130,177,255"
|
||||
"68,138,255"
|
||||
"41,121,255"
|
||||
"41,98,255";
|
||||
|
||||
$palette-blue-50: nth($palette-blue, 1);
|
||||
$palette-blue-100: nth($palette-blue, 2);
|
||||
$palette-blue-200: nth($palette-blue, 3);
|
||||
$palette-blue-300: nth($palette-blue, 4);
|
||||
$palette-blue-400: nth($palette-blue, 5);
|
||||
$palette-blue-500: nth($palette-blue, 6);
|
||||
$palette-blue-600: nth($palette-blue, 7);
|
||||
$palette-blue-700: nth($palette-blue, 8);
|
||||
$palette-blue-800: nth($palette-blue, 9);
|
||||
$palette-blue-900: nth($palette-blue, 10);
|
||||
$palette-blue-A100: nth($palette-blue, 11);
|
||||
$palette-blue-A200: nth($palette-blue, 12);
|
||||
$palette-blue-A400: nth($palette-blue, 13);
|
||||
$palette-blue-A700: nth($palette-blue, 14);
|
||||
|
||||
$palette-light-blue:
|
||||
"225,245,254"
|
||||
"179,229,252"
|
||||
"129,212,250"
|
||||
"79,195,247"
|
||||
"41,182,246"
|
||||
"3,169,244"
|
||||
"3,155,229"
|
||||
"2,136,209"
|
||||
"2,119,189"
|
||||
"1,87,155"
|
||||
"128,216,255"
|
||||
"64,196,255"
|
||||
"0,176,255"
|
||||
"0,145,234";
|
||||
|
||||
$palette-light-blue-50: nth($palette-light-blue, 1);
|
||||
$palette-light-blue-100: nth($palette-light-blue, 2);
|
||||
$palette-light-blue-200: nth($palette-light-blue, 3);
|
||||
$palette-light-blue-300: nth($palette-light-blue, 4);
|
||||
$palette-light-blue-400: nth($palette-light-blue, 5);
|
||||
$palette-light-blue-500: nth($palette-light-blue, 6);
|
||||
$palette-light-blue-600: nth($palette-light-blue, 7);
|
||||
$palette-light-blue-700: nth($palette-light-blue, 8);
|
||||
$palette-light-blue-800: nth($palette-light-blue, 9);
|
||||
$palette-light-blue-900: nth($palette-light-blue, 10);
|
||||
$palette-light-blue-A100: nth($palette-light-blue, 11);
|
||||
$palette-light-blue-A200: nth($palette-light-blue, 12);
|
||||
$palette-light-blue-A400: nth($palette-light-blue, 13);
|
||||
$palette-light-blue-A700: nth($palette-light-blue, 14);
|
||||
|
||||
$palette-cyan:
|
||||
"224,247,250"
|
||||
"178,235,242"
|
||||
"128,222,234"
|
||||
"77,208,225"
|
||||
"38,198,218"
|
||||
"0,188,212"
|
||||
"0,172,193"
|
||||
"0,151,167"
|
||||
"0,131,143"
|
||||
"0,96,100"
|
||||
"132,255,255"
|
||||
"24,255,255"
|
||||
"0,229,255"
|
||||
"0,184,212";
|
||||
|
||||
$palette-cyan-50: nth($palette-cyan, 1);
|
||||
$palette-cyan-100: nth($palette-cyan, 2);
|
||||
$palette-cyan-200: nth($palette-cyan, 3);
|
||||
$palette-cyan-300: nth($palette-cyan, 4);
|
||||
$palette-cyan-400: nth($palette-cyan, 5);
|
||||
$palette-cyan-500: nth($palette-cyan, 6);
|
||||
$palette-cyan-600: nth($palette-cyan, 7);
|
||||
$palette-cyan-700: nth($palette-cyan, 8);
|
||||
$palette-cyan-800: nth($palette-cyan, 9);
|
||||
$palette-cyan-900: nth($palette-cyan, 10);
|
||||
$palette-cyan-A100: nth($palette-cyan, 11);
|
||||
$palette-cyan-A200: nth($palette-cyan, 12);
|
||||
$palette-cyan-A400: nth($palette-cyan, 13);
|
||||
$palette-cyan-A700: nth($palette-cyan, 14);
|
||||
|
||||
$palette-teal:
|
||||
"224,242,241"
|
||||
"178,223,219"
|
||||
"128,203,196"
|
||||
"77,182,172"
|
||||
"38,166,154"
|
||||
"0,150,136"
|
||||
"0,137,123"
|
||||
"0,121,107"
|
||||
"0,105,92"
|
||||
"0,77,64"
|
||||
"167,255,235"
|
||||
"100,255,218"
|
||||
"29,233,182"
|
||||
"0,191,165";
|
||||
|
||||
$palette-teal-50: nth($palette-teal, 1);
|
||||
$palette-teal-100: nth($palette-teal, 2);
|
||||
$palette-teal-200: nth($palette-teal, 3);
|
||||
$palette-teal-300: nth($palette-teal, 4);
|
||||
$palette-teal-400: nth($palette-teal, 5);
|
||||
$palette-teal-500: nth($palette-teal, 6);
|
||||
$palette-teal-600: nth($palette-teal, 7);
|
||||
$palette-teal-700: nth($palette-teal, 8);
|
||||
$palette-teal-800: nth($palette-teal, 9);
|
||||
$palette-teal-900: nth($palette-teal, 10);
|
||||
$palette-teal-A100: nth($palette-teal, 11);
|
||||
$palette-teal-A200: nth($palette-teal, 12);
|
||||
$palette-teal-A400: nth($palette-teal, 13);
|
||||
$palette-teal-A700: nth($palette-teal, 14);
|
||||
|
||||
$palette-green:
|
||||
"232,245,233"
|
||||
"200,230,201"
|
||||
"165,214,167"
|
||||
"129,199,132"
|
||||
"102,187,106"
|
||||
"76,175,80"
|
||||
"67,160,71"
|
||||
"56,142,60"
|
||||
"46,125,50"
|
||||
"27,94,32"
|
||||
"185,246,202"
|
||||
"105,240,174"
|
||||
"0,230,118"
|
||||
"0,200,83";
|
||||
|
||||
$palette-green-50: nth($palette-green, 1);
|
||||
$palette-green-100: nth($palette-green, 2);
|
||||
$palette-green-200: nth($palette-green, 3);
|
||||
$palette-green-300: nth($palette-green, 4);
|
||||
$palette-green-400: nth($palette-green, 5);
|
||||
$palette-green-500: nth($palette-green, 6);
|
||||
$palette-green-600: nth($palette-green, 7);
|
||||
$palette-green-700: nth($palette-green, 8);
|
||||
$palette-green-800: nth($palette-green, 9);
|
||||
$palette-green-900: nth($palette-green, 10);
|
||||
$palette-green-A100: nth($palette-green, 11);
|
||||
$palette-green-A200: nth($palette-green, 12);
|
||||
$palette-green-A400: nth($palette-green, 13);
|
||||
$palette-green-A700: nth($palette-green, 14);
|
||||
|
||||
$palette-light-green:
|
||||
"241,248,233"
|
||||
"220,237,200"
|
||||
"197,225,165"
|
||||
"174,213,129"
|
||||
"156,204,101"
|
||||
"139,195,74"
|
||||
"124,179,66"
|
||||
"104,159,56"
|
||||
"85,139,47"
|
||||
"51,105,30"
|
||||
"204,255,144"
|
||||
"178,255,89"
|
||||
"118,255,3"
|
||||
"100,221,23";
|
||||
|
||||
$palette-light-green-50: nth($palette-light-green, 1);
|
||||
$palette-light-green-100: nth($palette-light-green, 2);
|
||||
$palette-light-green-200: nth($palette-light-green, 3);
|
||||
$palette-light-green-300: nth($palette-light-green, 4);
|
||||
$palette-light-green-400: nth($palette-light-green, 5);
|
||||
$palette-light-green-500: nth($palette-light-green, 6);
|
||||
$palette-light-green-600: nth($palette-light-green, 7);
|
||||
$palette-light-green-700: nth($palette-light-green, 8);
|
||||
$palette-light-green-800: nth($palette-light-green, 9);
|
||||
$palette-light-green-900: nth($palette-light-green, 10);
|
||||
$palette-light-green-A100: nth($palette-light-green, 11);
|
||||
$palette-light-green-A200: nth($palette-light-green, 12);
|
||||
$palette-light-green-A400: nth($palette-light-green, 13);
|
||||
$palette-light-green-A700: nth($palette-light-green, 14);
|
||||
|
||||
$palette-lime:
|
||||
"249,251,231"
|
||||
"240,244,195"
|
||||
"230,238,156"
|
||||
"220,231,117"
|
||||
"212,225,87"
|
||||
"205,220,57"
|
||||
"192,202,51"
|
||||
"175,180,43"
|
||||
"158,157,36"
|
||||
"130,119,23"
|
||||
"244,255,129"
|
||||
"238,255,65"
|
||||
"198,255,0"
|
||||
"174,234,0";
|
||||
|
||||
$palette-lime-50: nth($palette-lime, 1);
|
||||
$palette-lime-100: nth($palette-lime, 2);
|
||||
$palette-lime-200: nth($palette-lime, 3);
|
||||
$palette-lime-300: nth($palette-lime, 4);
|
||||
$palette-lime-400: nth($palette-lime, 5);
|
||||
$palette-lime-500: nth($palette-lime, 6);
|
||||
$palette-lime-600: nth($palette-lime, 7);
|
||||
$palette-lime-700: nth($palette-lime, 8);
|
||||
$palette-lime-800: nth($palette-lime, 9);
|
||||
$palette-lime-900: nth($palette-lime, 10);
|
||||
$palette-lime-A100: nth($palette-lime, 11);
|
||||
$palette-lime-A200: nth($palette-lime, 12);
|
||||
$palette-lime-A400: nth($palette-lime, 13);
|
||||
$palette-lime-A700: nth($palette-lime, 14);
|
||||
|
||||
$palette-yellow:
|
||||
"255,253,231"
|
||||
"255,249,196"
|
||||
"255,245,157"
|
||||
"255,241,118"
|
||||
"255,238,88"
|
||||
"255,235,59"
|
||||
"253,216,53"
|
||||
"251,192,45"
|
||||
"249,168,37"
|
||||
"245,127,23"
|
||||
"255,255,141"
|
||||
"255,255,0"
|
||||
"255,234,0"
|
||||
"255,214,0";
|
||||
|
||||
$palette-yellow-50: nth($palette-yellow, 1);
|
||||
$palette-yellow-100: nth($palette-yellow, 2);
|
||||
$palette-yellow-200: nth($palette-yellow, 3);
|
||||
$palette-yellow-300: nth($palette-yellow, 4);
|
||||
$palette-yellow-400: nth($palette-yellow, 5);
|
||||
$palette-yellow-500: nth($palette-yellow, 6);
|
||||
$palette-yellow-600: nth($palette-yellow, 7);
|
||||
$palette-yellow-700: nth($palette-yellow, 8);
|
||||
$palette-yellow-800: nth($palette-yellow, 9);
|
||||
$palette-yellow-900: nth($palette-yellow, 10);
|
||||
$palette-yellow-A100: nth($palette-yellow, 11);
|
||||
$palette-yellow-A200: nth($palette-yellow, 12);
|
||||
$palette-yellow-A400: nth($palette-yellow, 13);
|
||||
$palette-yellow-A700: nth($palette-yellow, 14);
|
||||
|
||||
$palette-amber:
|
||||
"255,248,225"
|
||||
"255,236,179"
|
||||
"255,224,130"
|
||||
"255,213,79"
|
||||
"255,202,40"
|
||||
"255,193,7"
|
||||
"255,179,0"
|
||||
"255,160,0"
|
||||
"255,143,0"
|
||||
"255,111,0"
|
||||
"255,229,127"
|
||||
"255,215,64"
|
||||
"255,196,0"
|
||||
"255,171,0";
|
||||
|
||||
$palette-amber-50: nth($palette-amber, 1);
|
||||
$palette-amber-100: nth($palette-amber, 2);
|
||||
$palette-amber-200: nth($palette-amber, 3);
|
||||
$palette-amber-300: nth($palette-amber, 4);
|
||||
$palette-amber-400: nth($palette-amber, 5);
|
||||
$palette-amber-500: nth($palette-amber, 6);
|
||||
$palette-amber-600: nth($palette-amber, 7);
|
||||
$palette-amber-700: nth($palette-amber, 8);
|
||||
$palette-amber-800: nth($palette-amber, 9);
|
||||
$palette-amber-900: nth($palette-amber, 10);
|
||||
$palette-amber-A100: nth($palette-amber, 11);
|
||||
$palette-amber-A200: nth($palette-amber, 12);
|
||||
$palette-amber-A400: nth($palette-amber, 13);
|
||||
$palette-amber-A700: nth($palette-amber, 14);
|
||||
|
||||
$palette-orange:
|
||||
"255,243,224"
|
||||
"255,224,178"
|
||||
"255,204,128"
|
||||
"255,183,77"
|
||||
"255,167,38"
|
||||
"255,152,0"
|
||||
"251,140,0"
|
||||
"245,124,0"
|
||||
"239,108,0"
|
||||
"230,81,0"
|
||||
"255,209,128"
|
||||
"255,171,64"
|
||||
"255,145,0"
|
||||
"255,109,0";
|
||||
|
||||
$palette-orange-50: nth($palette-orange, 1);
|
||||
$palette-orange-100: nth($palette-orange, 2);
|
||||
$palette-orange-200: nth($palette-orange, 3);
|
||||
$palette-orange-300: nth($palette-orange, 4);
|
||||
$palette-orange-400: nth($palette-orange, 5);
|
||||
$palette-orange-500: nth($palette-orange, 6);
|
||||
$palette-orange-600: nth($palette-orange, 7);
|
||||
$palette-orange-700: nth($palette-orange, 8);
|
||||
$palette-orange-800: nth($palette-orange, 9);
|
||||
$palette-orange-900: nth($palette-orange, 10);
|
||||
$palette-orange-A100: nth($palette-orange, 11);
|
||||
$palette-orange-A200: nth($palette-orange, 12);
|
||||
$palette-orange-A400: nth($palette-orange, 13);
|
||||
$palette-orange-A700: nth($palette-orange, 14);
|
||||
|
||||
$palette-deep-orange:
|
||||
"251,233,231"
|
||||
"255,204,188"
|
||||
"255,171,145"
|
||||
"255,138,101"
|
||||
"255,112,67"
|
||||
"255,87,34"
|
||||
"244,81,30"
|
||||
"230,74,25"
|
||||
"216,67,21"
|
||||
"191,54,12"
|
||||
"255,158,128"
|
||||
"255,110,64"
|
||||
"255,61,0"
|
||||
"221,44,0";
|
||||
|
||||
$palette-deep-orange-50: nth($palette-deep-orange, 1);
|
||||
$palette-deep-orange-100: nth($palette-deep-orange, 2);
|
||||
$palette-deep-orange-200: nth($palette-deep-orange, 3);
|
||||
$palette-deep-orange-300: nth($palette-deep-orange, 4);
|
||||
$palette-deep-orange-400: nth($palette-deep-orange, 5);
|
||||
$palette-deep-orange-500: nth($palette-deep-orange, 6);
|
||||
$palette-deep-orange-600: nth($palette-deep-orange, 7);
|
||||
$palette-deep-orange-700: nth($palette-deep-orange, 8);
|
||||
$palette-deep-orange-800: nth($palette-deep-orange, 9);
|
||||
$palette-deep-orange-900: nth($palette-deep-orange, 10);
|
||||
$palette-deep-orange-A100: nth($palette-deep-orange, 11);
|
||||
$palette-deep-orange-A200: nth($palette-deep-orange, 12);
|
||||
$palette-deep-orange-A400: nth($palette-deep-orange, 13);
|
||||
$palette-deep-orange-A700: nth($palette-deep-orange, 14);
|
||||
|
||||
|
||||
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
|
||||
|
||||
$palette-brown:
|
||||
"239,235,233"
|
||||
"215,204,200"
|
||||
"188,170,164"
|
||||
"161,136,127"
|
||||
"141,110,99"
|
||||
"121,85,72"
|
||||
"109,76,65"
|
||||
"93,64,55"
|
||||
"78,52,46"
|
||||
"62,39,35";
|
||||
|
||||
$palette-brown-50: nth($palette-brown, 1);
|
||||
$palette-brown-100: nth($palette-brown, 2);
|
||||
$palette-brown-200: nth($palette-brown, 3);
|
||||
$palette-brown-300: nth($palette-brown, 4);
|
||||
$palette-brown-400: nth($palette-brown, 5);
|
||||
$palette-brown-500: nth($palette-brown, 6);
|
||||
$palette-brown-600: nth($palette-brown, 7);
|
||||
$palette-brown-700: nth($palette-brown, 8);
|
||||
$palette-brown-800: nth($palette-brown, 9);
|
||||
$palette-brown-900: nth($palette-brown, 10);
|
||||
|
||||
$palette-grey:
|
||||
"250,250,250"
|
||||
"245,245,245"
|
||||
"238,238,238"
|
||||
"224,224,224"
|
||||
"189,189,189"
|
||||
"158,158,158"
|
||||
"117,117,117"
|
||||
"97,97,97"
|
||||
"66,66,66"
|
||||
"33,33,33";
|
||||
|
||||
$palette-grey-50: nth($palette-grey, 1);
|
||||
$palette-grey-100: nth($palette-grey, 2);
|
||||
$palette-grey-200: nth($palette-grey, 3);
|
||||
$palette-grey-300: nth($palette-grey, 4);
|
||||
$palette-grey-400: nth($palette-grey, 5);
|
||||
$palette-grey-500: nth($palette-grey, 6);
|
||||
$palette-grey-600: nth($palette-grey, 7);
|
||||
$palette-grey-700: nth($palette-grey, 8);
|
||||
$palette-grey-800: nth($palette-grey, 9);
|
||||
$palette-grey-900: nth($palette-grey, 10);
|
||||
|
||||
$palette-blue-grey:
|
||||
"236,239,241"
|
||||
"207,216,220"
|
||||
"176,190,197"
|
||||
"144,164,174"
|
||||
"120,144,156"
|
||||
"96,125,139"
|
||||
"84,110,122"
|
||||
"69,90,100"
|
||||
"55,71,79"
|
||||
"38,50,56";
|
||||
|
||||
$palette-blue-grey-50: nth($palette-blue-grey, 1);
|
||||
$palette-blue-grey-100: nth($palette-blue-grey, 2);
|
||||
$palette-blue-grey-200: nth($palette-blue-grey, 3);
|
||||
$palette-blue-grey-300: nth($palette-blue-grey, 4);
|
||||
$palette-blue-grey-400: nth($palette-blue-grey, 5);
|
||||
$palette-blue-grey-500: nth($palette-blue-grey, 6);
|
||||
$palette-blue-grey-600: nth($palette-blue-grey, 7);
|
||||
$palette-blue-grey-700: nth($palette-blue-grey, 8);
|
||||
$palette-blue-grey-800: nth($palette-blue-grey, 9);
|
||||
$palette-blue-grey-900: nth($palette-blue-grey, 10);
|
||||
|
||||
$color-black: "0,0,0";
|
||||
$color-white: "255,255,255";
|
||||
|
||||
|
||||
/* colors.scss */
|
||||
$styleguide-generate-template: false !default;
|
||||
|
||||
// The two possible colors for overlayed text.
|
||||
$color-dark-contrast: $color-white !default;
|
||||
$color-light-contrast: $color-black !default;
|
19
dashboard-ui/bower_components/material-design-lite/src/_functions.scss
vendored
Normal file
19
dashboard-ui/bower_components/material-design-lite/src/_functions.scss
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* 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 strip-units($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
301
dashboard-ui/bower_components/material-design-lite/src/_mixins.scss
vendored
Normal file
301
dashboard-ui/bower_components/material-design-lite/src/_mixins.scss
vendored
Normal file
@ -0,0 +1,301 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/* Typography */
|
||||
|
||||
@mixin typo-preferred-font($usePreferred: true) {
|
||||
@if $usePreferred {
|
||||
font-family: $preferred_font;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.02em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
line-height: 48px;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-headline($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-title($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
@if $usePreferred {
|
||||
font-weight: 500;
|
||||
} @else {
|
||||
font-weight: bold;
|
||||
}
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-caption($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0.08em;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
content: '“';
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '”';
|
||||
margin-left: -0.05em;
|
||||
}
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-menu($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-button($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-icon() {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
word-wrap: normal;
|
||||
font-feature-settings: 'liga';
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Shadows */
|
||||
|
||||
// Focus shadow mixin.
|
||||
@mixin focus-shadow() {
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp() {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-3dp() {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-4dp() {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-6dp() {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-8dp() {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp() {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-24dp() {
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 24px 38px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-linear-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-fast-out-linear-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-default($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
|
||||
@mixin dialog-width($units:5) {
|
||||
@if(type_of($units) != 'number') {
|
||||
@error "The unit given to dialog-width should be a number.";
|
||||
}
|
||||
// 56dp is the base unit width for Dialogs.
|
||||
// With 5 units being the number of units for a mobile device.
|
||||
// https://goo.gl/sK2O5o
|
||||
width: $units * 56px;
|
||||
}
|
584
dashboard-ui/bower_components/material-design-lite/src/_variables.scss
vendored
Normal file
584
dashboard-ui/bower_components/material-design-lite/src/_variables.scss
vendored
Normal file
@ -0,0 +1,584 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*------------------------------------*\
|
||||
$CONTENTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
|
||||
* -----Typography
|
||||
* -----Colors
|
||||
* -----Textfield
|
||||
* -----Switch
|
||||
* -----Spinner
|
||||
* -----Radio
|
||||
* -----Menu
|
||||
* -----List
|
||||
* -----Layout
|
||||
* -----Icon toggles
|
||||
* -----Footer
|
||||
* -----Column
|
||||
* -----Checkbox
|
||||
* -----Card
|
||||
* -----Button
|
||||
* -----Animation
|
||||
* -----Progress
|
||||
* -----Badge
|
||||
* -----Shadows
|
||||
* -----Grid
|
||||
* -----Data table
|
||||
* -----Dialog
|
||||
* -----Snackbar
|
||||
*
|
||||
* Even though all variables have the `!default` directive, most of them
|
||||
* should not be changed as they are dependent one another. This can cause
|
||||
* visual distortions (like alignment issues) that are hard to track down
|
||||
* and fix.
|
||||
*/
|
||||
|
||||
|
||||
/* ========== TYPOGRAPHY ========== */
|
||||
|
||||
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
||||
page loading. For important text, such as the body, we want it to load
|
||||
immediately and not wait for the web font load, whereas for other sections,
|
||||
such as headers and titles, we're OK with things taking a bit longer to load.
|
||||
We do have some optional classes and parameters in the mixins, in case you
|
||||
definitely want to make sure you're using the preferred font and don't mind
|
||||
the performance hit.
|
||||
We should be able to improve on this once CSS Font Loading L3 becomes more
|
||||
widely available.
|
||||
*/
|
||||
$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
|
||||
$performance_font: 'Helvetica', 'Arial', sans-serif !default;
|
||||
|
||||
/* ========== COLORS ========== */
|
||||
|
||||
/**
|
||||
*
|
||||
* Material design color palettes.
|
||||
* @see http://www.google.com/design/spec/style/color.html
|
||||
*
|
||||
**/
|
||||
|
||||
@import "color-definitions";
|
||||
@import "functions";
|
||||
|
||||
/* ========== IMAGES ========== */
|
||||
$image_path: '/images' !default;
|
||||
|
||||
/* ========== Color & Themes ========== */
|
||||
|
||||
// Define whether individual color palette items should have classes created.
|
||||
// Setting this to true will remove individual color classes for each color in the palettes.
|
||||
// To improve overall performance (assuming they aren't used) by:
|
||||
// * Saving server bandwidth sending the extra classes
|
||||
// * Save client computation against the classes
|
||||
// it is RECOMMENDED you set this to true.
|
||||
$trim-color-classes: false !default;
|
||||
|
||||
// Use color primarily for emphasis. Choose colors that fit with
|
||||
// your brand and provide good contrast between visual components.
|
||||
$color-primary: $palette-indigo-500 !default;
|
||||
$color-primary-dark: $palette-indigo-700 !default;
|
||||
$color-accent: $palette-pink-A200 !default;
|
||||
|
||||
// Our primary is dark, so use $color-dark-contrast for overlaid text.
|
||||
$color-primary-contrast: $color-dark-contrast !default;
|
||||
// Our accent is dark, so use $color-dark-contrast for overlaid text.
|
||||
$color-accent-contrast: $color-dark-contrast !default;
|
||||
|
||||
// Replace all colors with placeholders if we're generating a template.
|
||||
@if $styleguide-generate-template == true {
|
||||
$color-primary: '$color-primary';
|
||||
$color-primary-dark: '$color-primary-dark';
|
||||
$color-accent: '$color-accent';
|
||||
$color-primary-contrast: '$color-primary-contrast';
|
||||
$color-accent-contrast: '$color-accent-contrast';
|
||||
}
|
||||
|
||||
/* ========== Typography ========== */
|
||||
|
||||
// We use the following default color styles: text-color-primary and
|
||||
// text-color-secondary. For light themes, use text-color-primary-inverse
|
||||
// and text-color-secondary-inverse.
|
||||
|
||||
$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$text-link-color: unquote("rgb(#{$color-accent})") !default;
|
||||
|
||||
// Define whether to target elements directly for typographic enhancements.
|
||||
// Turning this off means you need to use mdl-* classes more often.
|
||||
// Other components may also fail to adhere to MD without these rules.
|
||||
// It is strongly recommended you leave this as true.
|
||||
|
||||
$target-elements-directly: true !default;
|
||||
|
||||
/* ========== Components ========== */
|
||||
|
||||
/* ========== Standard Buttons ========== */
|
||||
|
||||
// Default button colors.
|
||||
$button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
$button-secondary-color: unquote("rgb(#{$color-black})") !default;
|
||||
$button-hover-color: $button-primary-color !default;
|
||||
$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
|
||||
$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
// Colored button colors.
|
||||
$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-focus-color-alt: $button-focus-color !default;
|
||||
|
||||
// Ripple color for colored raised buttons.
|
||||
$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
|
||||
// Disabled button colors.
|
||||
$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
|
||||
// FAB colors and sizes.
|
||||
$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
|
||||
$button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
|
||||
|
||||
// Icon button colors and sizes.
|
||||
$button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
|
||||
$button-icon-focus-color: $button-focus-color !default;
|
||||
|
||||
/* ========== Icon Toggles ========== */
|
||||
|
||||
$icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
|
||||
$icon-toggle-focus-color: $button-focus-color !default;
|
||||
$icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
|
||||
/* ========== Radio Buttons ========== */
|
||||
|
||||
$radio-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
|
||||
/* ========== Ripple effect ========== */
|
||||
|
||||
$ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
|
||||
|
||||
/* ========== Layout ========== */
|
||||
|
||||
$layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
// Drawer
|
||||
$layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
|
||||
$layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
|
||||
$layout-drawer-navigation-color: #757575 !default;
|
||||
$layout-drawer-navigation-link-active-background: unquote("rgb(#{$color-light-contrast})") !default;
|
||||
$layout-drawer-navigation-link-active-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
// Header
|
||||
$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
|
||||
$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
|
||||
|
||||
// Tabs
|
||||
$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
|
||||
|
||||
/* ========== Content Tabs ========== */
|
||||
|
||||
$tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
/* ========== Checkboxes ========== */
|
||||
|
||||
$checkbox-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$checkbox-image-path: $image_path;
|
||||
|
||||
/* ========== Switches ========== */
|
||||
|
||||
$switch-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$switch-thumb-color: $switch-color !default;
|
||||
$switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
|
||||
|
||||
$switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
|
||||
$switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
|
||||
$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
/* ========== Spinner ========== */
|
||||
|
||||
$spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
|
||||
$spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
|
||||
$spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
|
||||
$spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
|
||||
|
||||
$spinner-single-color: unquote("rgb(#{$color-primary})") !default;
|
||||
|
||||
/* ========== Text fields ========== */
|
||||
|
||||
$input-text-background-color: transparent !default;
|
||||
$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
||||
$input-text-disabled-text-color: $input-text-label-color !default;
|
||||
$input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
|
||||
|
||||
/* ========== Card ========== */
|
||||
|
||||
$card-background-color: unquote("rgb(#{$color-white})") !default;
|
||||
$card-text-color: unquote("rgb(#{$color-black})") !default;
|
||||
$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
|
||||
$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$card-border-color: rgba(0,0,0,0.1) !default;
|
||||
$card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
|
||||
/* ========== Sliders ========== */
|
||||
|
||||
$range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$range-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
/* ========== Progress ========== */
|
||||
$progress-main-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
|
||||
$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
|
||||
$progress-image-path: $image_path;
|
||||
|
||||
/* ========== List ========== */
|
||||
|
||||
$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
|
||||
$list-avatar-color: white !default;
|
||||
|
||||
/* ========== Item ========== */
|
||||
|
||||
// Default Item Colors
|
||||
$default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
|
||||
$default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
|
||||
$default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
|
||||
$default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
$default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
// Disabled Button Colors
|
||||
$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
|
||||
|
||||
/* ========== Dropdown menu ========== */
|
||||
|
||||
$default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
|
||||
|
||||
/* ========== Tooltips ========== */
|
||||
|
||||
$tooltip-text-color: unquote("rgb(#{$color-white})") !default;
|
||||
$tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
|
||||
|
||||
/* ========== Footer ========== */
|
||||
|
||||
$footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
|
||||
$footer-color: unquote("rgb(#{$palette-grey-500})") !default;
|
||||
$footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
$footer-button-fill-color: $footer-color !default;
|
||||
$footer-underline-color: $footer-color !default;
|
||||
|
||||
|
||||
/* TEXTFIELD */
|
||||
|
||||
$input-text-font-size: 16px !default;
|
||||
$input-text-width: 100% !default;
|
||||
$input-text-padding: 4px !default;
|
||||
$input-text-vertical-spacing: 20px !default;
|
||||
|
||||
$input-text-button-size: 32px !default;
|
||||
$input-text-floating-label-fontsize: 12px !default;
|
||||
$input-text-expandable-icon-top: 16px !default;
|
||||
|
||||
|
||||
/* SWITCH */
|
||||
|
||||
$switch-label-font-size: 16px !default;
|
||||
$switch-label-height: 24px !default;
|
||||
$switch-track-height: 14px !default;
|
||||
$switch-track-length: 36px !default;
|
||||
$switch-thumb-size: 20px !default;
|
||||
$switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
|
||||
$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
|
||||
$switch-ripple-size: $switch-label-height * 2 !default;
|
||||
$switch-helper-size: 8px !default;
|
||||
|
||||
/* SPINNER */
|
||||
|
||||
$spinner-size: 28px !default;
|
||||
$spinner-stroke-width: 3px !default;
|
||||
|
||||
// Amount of circle the arc takes up.
|
||||
$spinner-arc-size: 270deg !default;
|
||||
// Time it takes to expand and contract arc.
|
||||
$spinner-arc-time: 1333ms !default;
|
||||
// How much the start location of the arc should rotate each time.
|
||||
$spinner-arc-start-rot: 216deg !default;
|
||||
|
||||
$spinner-duration: 360 * $spinner-arc-time / (
|
||||
strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
|
||||
|
||||
|
||||
/* RADIO */
|
||||
|
||||
$radio-label-font-size: 16px !default;
|
||||
$radio-label-height: 24px !default;
|
||||
$radio-button-size: 16px !default;
|
||||
$radio-inner-margin: $radio-button-size / 4;
|
||||
$radio-padding: 8px !default;
|
||||
$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
|
||||
$radio-ripple-size: 42px !default;
|
||||
|
||||
|
||||
/* MENU */
|
||||
|
||||
$menu-expand-duration: 0.3s !default;
|
||||
$menu-fade-duration: 0.2s !default;
|
||||
|
||||
/* LIST */
|
||||
|
||||
$list-border: 8px !default;
|
||||
$list-min-height: 48px !default;
|
||||
$list-min-padding: 16px !default;
|
||||
$list-bottom-padding: 20px !default;
|
||||
$list-avatar-text-left-distance: 72px !default;
|
||||
$list-icon-text-left-distance: 72px !default;
|
||||
|
||||
$list-avatar-size: 40px !default;
|
||||
$list-icon-size: 24px !default;
|
||||
|
||||
$list-two-line-height: 72px !default;
|
||||
$list-three-line-height: 88px !default;
|
||||
|
||||
/* LAYOUT */
|
||||
|
||||
$layout-drawer-narrow: 240px !default;
|
||||
$layout-drawer-wide: 456px !default;
|
||||
$layout-drawer-width: $layout-drawer-narrow !default;
|
||||
|
||||
$layout-header-icon-size: 32px !default;
|
||||
$layout-screen-size-threshold: 1024px !default;
|
||||
$layout-header-icon-margin: 24px !default;
|
||||
$layout-drawer-button-mobile-size: 32px !default;
|
||||
$layout-drawer-button-desktop-size: 48px !default;
|
||||
|
||||
$layout-header-mobile-row-height: 56px !default;
|
||||
$layout-mobile-header-height: $layout-header-mobile-row-height;
|
||||
$layout-header-desktop-row-height: 64px !default;
|
||||
$layout-desktop-header-height: $layout-header-desktop-row-height;
|
||||
|
||||
$layout-header-desktop-baseline: 80px !default;
|
||||
$layout-header-mobile-baseline: 72px !default;
|
||||
$layout-header-mobile-indent: 16px !default;
|
||||
$layout-header-desktop-indent: 40px !default;
|
||||
|
||||
$layout-tab-font-size: 14px !default;
|
||||
$layout-tab-bar-height: 48px !default;
|
||||
$layout-tab-mobile-padding: 12px !default;
|
||||
$layout-tab-desktop-padding: 24px !default;
|
||||
$layout-tab-highlight-thickness: 2px !default;
|
||||
|
||||
|
||||
/* ICON TOGGLE */
|
||||
|
||||
$icon-toggle-size: 32px !default;
|
||||
$icon-toggle-font-size: 24px !default;
|
||||
$icon-toggle-ripple-size: 36px !default;
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
/*mega-footer*/
|
||||
$footer-min-padding: 16px !default;
|
||||
$footer-padding-sides: 40px !default;
|
||||
$footer-heading-font-size: 14px !default;
|
||||
$footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
|
||||
$footer-btn-size: 36px !default;
|
||||
|
||||
/*mini-footer*/
|
||||
$padding: 16px !default;
|
||||
$footer-heading-font-size: 24px !default;
|
||||
$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
|
||||
$footer-btn-size: 36px !default;
|
||||
|
||||
/* CHECKBOX */
|
||||
|
||||
$checkbox-label-font-size: 16px !default;
|
||||
$checkbox-label-height: 24px !default;
|
||||
$checkbox-button-size: 16px !default;
|
||||
$checkbox-inner-margin: 2px !default;
|
||||
$checkbox-padding: 8px !default;
|
||||
$checkbox-top-offset:
|
||||
($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
|
||||
$checkbox-ripple-size: $checkbox-label-height * 1.5;
|
||||
|
||||
/* CARD */
|
||||
|
||||
/* Card dimensions */
|
||||
$card-width: 330px !default;
|
||||
$card-height: 200px !default;
|
||||
$card-font-size: 16px !default;
|
||||
$card-title-font-size: 24px !default;
|
||||
$card-subtitle-font-size: 14px !default;
|
||||
$card-horizontal-padding: 16px !default;
|
||||
$card-vertical-padding: 16px !default;
|
||||
|
||||
$card-title-perspective-origin-x: 165px !default;
|
||||
$card-title-perspective-origin-y: 56px !default;
|
||||
|
||||
$card-title-transform-origin-x: 165px !default;
|
||||
$card-title-transform-origin-y: 56px !default;
|
||||
|
||||
$card-title-text-transform-origin-x: 149px !default;
|
||||
$card-title-text-transform-origin-y: 48px !default;
|
||||
|
||||
$card-supporting-text-font-size: 1rem !default;
|
||||
$card-supporting-text-line-height: 18px !default;
|
||||
|
||||
$card-actions-font-size: 16px !default;
|
||||
|
||||
$card-title-text-font-weight: 300 !default;
|
||||
$card-z-index: 1 !default;
|
||||
|
||||
/* Cover image */
|
||||
$card-cover-image-height: 186px !default;
|
||||
$card-background-image-url: '' !default;
|
||||
|
||||
|
||||
/* BUTTON */
|
||||
/**
|
||||
*
|
||||
* Dimensions
|
||||
*
|
||||
*/
|
||||
$button-min-width: 64px !default;
|
||||
$button-height: 36px !default;
|
||||
$button-padding: 16px !default;
|
||||
$button-margin: 4px !default;
|
||||
$button-border-radius: 2px !default;
|
||||
|
||||
$button-fab-size: 56px !default;
|
||||
$button-fab-size-mini: 40px !default;
|
||||
$button-fab-font-size: 24px !default;
|
||||
|
||||
$button-icon-size: 32px !default;
|
||||
$button-icon-size-mini: 24px !default;
|
||||
|
||||
|
||||
/* ANIMATION */
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
|
||||
/* PROGRESS */
|
||||
$bar-height: 4px !default;
|
||||
|
||||
/* BADGE */
|
||||
$badge-font-size: 12px !default;
|
||||
$badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
|
||||
$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
|
||||
$badge-background: unquote("rgb(#{$color-accent})") !default;
|
||||
$badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
|
||||
$badge-size : 22px !default;
|
||||
$badge-padding: 2px !default;
|
||||
$badge-overlap: 12px !default;
|
||||
|
||||
/* SHADOWS */
|
||||
|
||||
$shadow-key-umbra-opacity: 0.2 !default;
|
||||
$shadow-key-penumbra-opacity: 0.14 !default;
|
||||
$shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
/* GRID */
|
||||
|
||||
$grid-desktop-columns: 12 !default;
|
||||
$grid-desktop-gutter: 16px !default;
|
||||
$grid-desktop-margin: 16px !default;
|
||||
|
||||
$grid-desktop-breakpoint: 840px !default;
|
||||
|
||||
$grid-tablet-columns: 8 !default;
|
||||
$grid-tablet-gutter: $grid-desktop-gutter !default;
|
||||
$grid-tablet-margin: $grid-desktop-margin !default;
|
||||
|
||||
$grid-tablet-breakpoint: 480px !default;
|
||||
|
||||
$grid-phone-columns: 4 !default;
|
||||
$grid-phone-gutter: $grid-desktop-gutter !default;
|
||||
$grid-phone-margin: $grid-desktop-margin !default;
|
||||
|
||||
$grid-cell-default-columns: $grid-phone-columns !default;
|
||||
$grid-max-columns: $grid-desktop-columns !default;
|
||||
|
||||
/* DATA TABLE */
|
||||
|
||||
$data-table-font-size: 13px !default;
|
||||
$data-table-header-font-size: 12px !default;
|
||||
$data-table-header-sort-icon-size: 16px !default;
|
||||
|
||||
$data-table-header-color: rgba(#000, 0.54) !default;
|
||||
$data-table-header-sorted-color: rgba(#000, 0.87) !default;
|
||||
$data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
|
||||
$data-table-divider-color: rgba(#000, 0.12) !default;
|
||||
|
||||
$data-table-hover-color: #eeeeee !default;
|
||||
$data-table-selection-color: #e0e0e0 !default;
|
||||
|
||||
$data-table-dividers: 1px solid $data-table-divider-color !default;
|
||||
|
||||
$data-table-row-height: 48px !default;
|
||||
$data-table-last-row-height: 56px !default;
|
||||
$data-table-header-height: 56px !default;
|
||||
|
||||
$data-table-column-spacing: 36px !default;
|
||||
$data-table-column-padding: $data-table-column-spacing / 2;
|
||||
|
||||
$data-table-card-header-height: 64px !default;
|
||||
$data-table-card-title-top: 20px !default;
|
||||
$data-table-card-padding: 24px !default;
|
||||
$data-table-button-padding-right: 16px !default;
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
|
||||
/* DIALOG */
|
||||
$dialog-content-color: $card-supporting-text-text-color;
|
||||
|
||||
/* SNACKBAR */
|
||||
|
||||
// Hard coded since the color is not present in any palette.
|
||||
$snackbar-background-color: #323232 !default;
|
||||
$snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
|
||||
$snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
|
||||
|
||||
/* TOOLTIP */
|
||||
$tooltip-font-size: 10px !default;
|
||||
$tooltip-font-size-large: 14px !default;
|
34
dashboard-ui/bower_components/material-design-lite/src/animation/_animation.scss
vendored
Normal file
34
dashboard-ui/bower_components/material-design-lite/src/animation/_animation.scss
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 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";
|
||||
|
||||
|
||||
.mdl-animation--default {
|
||||
transition-timing-function: $animation-curve-default;
|
||||
}
|
||||
|
||||
.mdl-animation--fast-out-slow-in {
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
}
|
||||
|
||||
.mdl-animation--linear-out-slow-in {
|
||||
transition-timing-function: $animation-curve-linear-out-slow-in;
|
||||
}
|
||||
|
||||
.mdl-animation--fast-out-linear-in {
|
||||
transition-timing-function: $animation-curve-fast-out-linear-in;
|
||||
}
|
95
dashboard-ui/bower_components/material-design-lite/src/animation/demo.css
vendored
Normal file
95
dashboard-ui/bower_components/material-design-lite/src/animation/demo.css
vendored
Normal file
@ -0,0 +1,95 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.demo-animation {
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.demo-animation__container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.demo-animation__container-foreground {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.demo-animation__container-background {
|
||||
line-height: 200px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
/* Outside the view, on the left.
|
||||
We leave the view when moving to this state, so we use fast-out-linear-in. */
|
||||
.demo-animation--position-0 {
|
||||
left: -102px;
|
||||
}
|
||||
|
||||
/* Left side.
|
||||
We enter the view when moving to this state, so we use linear-out-slow-in. */
|
||||
.demo-animation--position-1 {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
/* Right side.
|
||||
We're always visible when moving to this state, so we use default. */
|
||||
.demo-animation--position-2 {
|
||||
left: 180px;
|
||||
}
|
||||
|
||||
/* Outside the view, on the right.
|
||||
We leave the view when moving to this state, so we use fast-out-linear-in. */
|
||||
.demo-animation--position-3 {
|
||||
left: 302px;
|
||||
}
|
||||
|
||||
/* Right side.
|
||||
We enter the view when moving to this state, so we use linear-out-slow-in. */
|
||||
.demo-animation--position-4 {
|
||||
left: 180px;
|
||||
}
|
||||
|
||||
/* Left side.
|
||||
We're always visible when moving to this state, so we use default. */
|
||||
.demo-animation--position-5 {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.demo-animation__movable {
|
||||
background-color: red;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
transition-property: left;
|
||||
transition-duration: 0.2s;
|
||||
}
|
7
dashboard-ui/bower_components/material-design-lite/src/animation/demo.html
vendored
Normal file
7
dashboard-ui/bower_components/material-design-lite/src/animation/demo.html
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="demo-preview-block demo-animation demo-js-animation">
|
||||
<div class="demo-animation__container">
|
||||
<div class="demo-animation__container-background">Click me to animate</div>
|
||||
<div class="demo-animation__container-foreground"></div>
|
||||
<div class="demo-animation__movable demo-animation--position-0 mdl-shadow--2dp"></div>
|
||||
</div>
|
||||
</div>
|
112
dashboard-ui/bower_components/material-design-lite/src/animation/demo.js
vendored
Normal file
112
dashboard-ui/bower_components/material-design-lite/src/animation/demo.js
vendored
Normal file
@ -0,0 +1,112 @@
|
||||
/**
|
||||
* @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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class constructor for Animation MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function DemoAnimation(element) {
|
||||
'use strict';
|
||||
|
||||
this.element_ = element;
|
||||
this.position_ = this.Constant_.STARTING_POSITION;
|
||||
this.movable_ = this.element_.querySelector('.' + this.CssClasses_.MOVABLE);
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
DemoAnimation.prototype.CssClasses_ = {
|
||||
MOVABLE: 'demo-animation__movable',
|
||||
POSITION_PREFIX: 'demo-animation--position-',
|
||||
FAST_OUT_SLOW_IN: 'mdl-animation--fast-out-slow-in',
|
||||
LINEAR_OUT_SLOW_IN: 'mdl-animation--linear-out-slow-in',
|
||||
FAST_OUT_LINEAR_IN: 'mdl-animation--fast-out-linear-in'
|
||||
};
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
DemoAnimation.prototype.Constant_ = {
|
||||
STARTING_POSITION: 0,
|
||||
// Which animation to use for which state. Check demo.css for an explanation.
|
||||
ANIMATIONS: [
|
||||
DemoAnimation.prototype.CssClasses_.FAST_OUT_LINEAR_IN,
|
||||
DemoAnimation.prototype.CssClasses_.LINEAR_OUT_SLOW_IN,
|
||||
DemoAnimation.prototype.CssClasses_.FAST_OUT_SLOW_IN,
|
||||
DemoAnimation.prototype.CssClasses_.FAST_OUT_LINEAR_IN,
|
||||
DemoAnimation.prototype.CssClasses_.LINEAR_OUT_SLOW_IN,
|
||||
DemoAnimation.prototype.CssClasses_.FAST_OUT_SLOW_IN
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle click of element.
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
DemoAnimation.prototype.handleClick_ = function(event) {
|
||||
'use strict';
|
||||
|
||||
this.movable_.classList.remove(this.CssClasses_.POSITION_PREFIX +
|
||||
this.position_);
|
||||
this.movable_.classList.remove(this.Constant_.ANIMATIONS[this.position_]);
|
||||
|
||||
this.position_++;
|
||||
if (this.position_ > 5) {
|
||||
this.position_ = 0;
|
||||
}
|
||||
|
||||
this.movable_.classList.add(this.Constant_.ANIMATIONS[this.position_]);
|
||||
this.movable_.classList.add(this.CssClasses_.POSITION_PREFIX +
|
||||
this.position_);
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
DemoAnimation.prototype.init = function() {
|
||||
'use strict';
|
||||
|
||||
if (this.element_) {
|
||||
if (!this.movable_) {
|
||||
console.error('Was expecting to find an element with class name ' +
|
||||
this.CssClasses_.MOVABLE + ' inside of: ', this.element_);
|
||||
return;
|
||||
}
|
||||
|
||||
this.element_.addEventListener('click', this.handleClick_.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: DemoAnimation,
|
||||
classAsString: 'DemoAnimation',
|
||||
cssClass: 'demo-js-animation'
|
||||
});
|
72
dashboard-ui/bower_components/material-design-lite/src/badge/_badge.scss
vendored
Normal file
72
dashboard-ui/bower_components/material-design-lite/src/badge/_badge.scss
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
/**
|
||||
* 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";
|
||||
|
||||
.mdl-badge {
|
||||
position : relative;
|
||||
white-space: nowrap;
|
||||
margin-right: ($badge-size + $badge-padding);
|
||||
|
||||
&:not([data-badge]) {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&[data-badge]:after {
|
||||
content: attr(data-badge);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
top: -($badge-size / 2);
|
||||
right: -($badge-size + $badge-padding);
|
||||
|
||||
.mdl-button & {
|
||||
top: -10px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
font-family: $preferred_font;
|
||||
font-weight: 600;
|
||||
font-size: $badge-font-size;
|
||||
width: $badge-size;
|
||||
height: $badge-size;
|
||||
border-radius : 50%;
|
||||
|
||||
background: $badge-background;
|
||||
color: $badge-color;
|
||||
}
|
||||
|
||||
&.mdl-badge--no-background {
|
||||
&[data-badge]:after {
|
||||
color: $badge-color-inverse;
|
||||
background: $badge-background-inverse;
|
||||
|
||||
box-shadow: 0 0 1px gray;
|
||||
}
|
||||
}
|
||||
&.mdl-badge--overlap {
|
||||
margin-right: ($badge-size - $badge-overlap);
|
||||
&:after {
|
||||
right: -($badge-size - $badge-overlap);
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,9 @@
|
||||
<style>
|
||||
.demo-badge__badge-on-icon-icon .mdl-badge {
|
||||
color: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.demo-badge__badge-on-icon-icon .mdl-badge.material-icons {
|
||||
font-size: 32px;
|
||||
}
|
||||
</style>
|
||||
{% include "badge-on-icon-icon.html" %}
|
@ -0,0 +1 @@
|
||||
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
|
@ -0,0 +1,9 @@
|
||||
<style>
|
||||
.demo-badge__badge-on-icon-text .mdl-badge {
|
||||
color: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.demo-badge__badge-on-icon-text .mdl-badge.material-icons {
|
||||
font-size: 32px;
|
||||
}
|
||||
</style>
|
||||
{% include "badge-on-icon-text.html" %}
|
@ -0,0 +1,2 @@
|
||||
<!-- Number badge on icon -->
|
||||
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
|
@ -0,0 +1,6 @@
|
||||
<style>
|
||||
.demo-badge__badge-on-text-icon .mdl-badge {
|
||||
color: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
</style>
|
||||
{% include "badge-on-text-icon.html" %}
|
@ -0,0 +1,2 @@
|
||||
<!-- Icon badge -->
|
||||
<span class="mdl-badge" data-badge="♥">Mood</span>
|
@ -0,0 +1,7 @@
|
||||
<style>
|
||||
.demo-badge__badge-on-text-text .mdl-badge {
|
||||
color: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "badge-on-text-text.html" %}
|
@ -0,0 +1,2 @@
|
||||
<!-- Number badge -->
|
||||
<span class="mdl-badge" data-badge="4">Inbox</span>
|
305
dashboard-ui/bower_components/material-design-lite/src/button/_button.scss
vendored
Normal file
305
dashboard-ui/bower_components/material-design-lite/src/button/_button.scss
vendored
Normal file
@ -0,0 +1,305 @@
|
||||
/**
|
||||
* 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";
|
||||
@import "../mixins";
|
||||
|
||||
// The button component. Defaults to a flat button.
|
||||
.mdl-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $button-border-radius;
|
||||
color: $button-secondary-color;
|
||||
position: relative;
|
||||
height: $button-height;
|
||||
margin: 0;
|
||||
min-width: $button-min-width;
|
||||
padding: 0 $button-padding;
|
||||
display: inline-block;
|
||||
@include typo-button();
|
||||
overflow: hidden;
|
||||
will-change: box-shadow;
|
||||
transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
|
||||
background-color 0.2s $animation-curve-default,
|
||||
color 0.2s $animation-curve-default;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $button-hover-color;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-focus-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&.mdl-button--colored {
|
||||
color: $button-primary-color-alt;
|
||||
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-focus-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.mdl-button[type="submit"] {
|
||||
-webkit-appearance:none;
|
||||
}
|
||||
|
||||
// Raised buttons
|
||||
.mdl-button--raised {
|
||||
background: $button-primary-color;
|
||||
@include shadow-2dp();
|
||||
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&.mdl-button--colored {
|
||||
background: $button-primary-color-alt;
|
||||
color: $button-secondary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background-color: $button-hover-color-alt;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $button-active-color-alt;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-active-color-alt;
|
||||
}
|
||||
|
||||
& .mdl-ripple {
|
||||
background: $button-ripple-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FABs
|
||||
.mdl-button--fab {
|
||||
border-radius: 50%;
|
||||
font-size: $button-fab-font-size;
|
||||
height: $button-fab-size;
|
||||
margin: auto;
|
||||
min-width: $button-fab-size;
|
||||
width: $button-fab-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: $button-primary-color;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
|
||||
& .material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
|
||||
line-height: $button-fab-font-size;
|
||||
width: $button-fab-font-size;
|
||||
}
|
||||
|
||||
&.mdl-button--mini-fab {
|
||||
height: $button-fab-size-mini;
|
||||
min-width: $button-fab-size-mini;
|
||||
width: $button-fab-size-mini;
|
||||
}
|
||||
|
||||
& .mdl-button__ripple-container {
|
||||
border-radius: 50%;
|
||||
// Fixes clipping bug in Safari.
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&.mdl-button--colored {
|
||||
background: $button-fab-color-alt;
|
||||
color: $button-fab-text-color-alt;
|
||||
|
||||
&:hover {
|
||||
background-color: $button-fab-hover-color-alt;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-fab-active-color-alt;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $button-fab-active-color-alt;
|
||||
}
|
||||
|
||||
& .mdl-ripple {
|
||||
background: $button-fab-ripple-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Icon buttons
|
||||
.mdl-button--icon {
|
||||
border-radius: 50%;
|
||||
font-size: $button-fab-font-size;
|
||||
height: $button-icon-size;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
min-width: $button-icon-size;
|
||||
width: $button-icon-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
line-height: normal;
|
||||
|
||||
& .material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
|
||||
line-height: $button-fab-font-size;
|
||||
width: $button-fab-font-size;
|
||||
}
|
||||
|
||||
&.mdl-button--mini-icon {
|
||||
height: $button-icon-size-mini;
|
||||
min-width: $button-icon-size-mini;
|
||||
width: $button-icon-size-mini;
|
||||
|
||||
& .material-icons {
|
||||
top: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||
left: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
& .mdl-button__ripple-container {
|
||||
border-radius: 50%;
|
||||
// Fixes clipping bug in Safari.
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Ripples
|
||||
.mdl-button__ripple-container {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.mdl-button[disabled] & .mdl-ripple,
|
||||
.mdl-button.mdl-button--disabled & .mdl-ripple {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Colorized buttons
|
||||
|
||||
.mdl-button--primary.mdl-button--primary {
|
||||
color: $button-primary-color-alt;
|
||||
& .mdl-ripple {
|
||||
background: $button-secondary-color-alt;
|
||||
}
|
||||
&.mdl-button--raised, &.mdl-button--fab {
|
||||
color: $button-secondary-color-alt;
|
||||
background-color: $button-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-button--accent.mdl-button--accent {
|
||||
color: $button-fab-color-alt;
|
||||
& .mdl-ripple {
|
||||
background: $button-fab-text-color-alt;
|
||||
}
|
||||
&.mdl-button--raised, &.mdl-button--fab {
|
||||
color: $button-fab-text-color-alt;
|
||||
background-color: $button-fab-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled buttons
|
||||
|
||||
.mdl-button {
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled],
|
||||
&.mdl-button--disabled.mdl-button--disabled {
|
||||
color: $button-secondary-color-disabled;
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&--fab {
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled],
|
||||
&.mdl-button--disabled.mdl-button--disabled {
|
||||
background-color: $button-primary-color-disabled;
|
||||
color: $button-secondary-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&--raised {
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled],
|
||||
&.mdl-button--disabled.mdl-button--disabled {
|
||||
background-color: $button-primary-color-disabled;
|
||||
color: $button-secondary-color-disabled;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&--colored {
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled],
|
||||
&.mdl-button--disabled.mdl-button--disabled {
|
||||
color: $button-secondary-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Align icons inside buttons with text
|
||||
.mdl-button .material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
123
dashboard-ui/bower_components/material-design-lite/src/button/button.js
vendored
Normal file
123
dashboard-ui/bower_components/material-design-lite/src/button/button.js
vendored
Normal file
@ -0,0 +1,123 @@
|
||||
/**
|
||||
* @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 Button MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
*
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
var MaterialButton = function MaterialButton(element) {
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
window['MaterialButton'] = MaterialButton;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialButton.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
|
||||
*/
|
||||
MaterialButton.prototype.CssClasses_ = {
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'mdl-button__ripple-container',
|
||||
RIPPLE: 'mdl-ripple'
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle blur of element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialButton.prototype.blurHandler_ = function(event) {
|
||||
if (event) {
|
||||
this.element_.blur();
|
||||
}
|
||||
};
|
||||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Disable button.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialButton.prototype.disable = function() {
|
||||
this.element_.disabled = true;
|
||||
};
|
||||
MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
|
||||
|
||||
/**
|
||||
* Enable button.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialButton.prototype.enable = function() {
|
||||
this.element_.disabled = false;
|
||||
};
|
||||
MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialButton.prototype.init = function() {
|
||||
if (this.element_) {
|
||||
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
|
||||
var rippleContainer = document.createElement('span');
|
||||
rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
|
||||
this.rippleElement_ = document.createElement('span');
|
||||
this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
|
||||
rippleContainer.appendChild(this.rippleElement_);
|
||||
this.boundRippleBlurHandler = this.blurHandler_.bind(this);
|
||||
this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
|
||||
this.element_.appendChild(rippleContainer);
|
||||
}
|
||||
this.boundButtonBlurHandler = this.blurHandler_.bind(this);
|
||||
this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
|
||||
this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
|
||||
}
|
||||
};
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialButton,
|
||||
classAsString: 'MaterialButton',
|
||||
cssClass: 'mdl-js-button',
|
||||
widget: true
|
||||
});
|
||||
})();
|
@ -0,0 +1,4 @@
|
||||
<!-- Colored FAB button with ripple -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-colored.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-colored.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Colored FAB button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-disabled.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-disabled.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Disabled FAB button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-mini-colored.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-mini-colored.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Colored mini FAB button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-mini.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-mini.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Mini FAB button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-ripple.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab-ripple.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- FAB button with ripple -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/fab.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- FAB button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab">
|
||||
<i class="material-icons">add</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-accent.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-accent.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Accent-colored flat button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--accent">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-disabled.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-disabled.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Disabled flat button -->
|
||||
<button class="mdl-button mdl-js-button" disabled>
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-primary.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-primary.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Primary-colored flat button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--primary">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-ripple.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat-ripple.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Flat button with ripple -->
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/flat.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Flat button -->
|
||||
<button class="mdl-button mdl-js-button">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/icon-colored.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/icon-colored.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Colored icon button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
||||
<i class="material-icons">mood</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/icon.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/icon.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Icon button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--icon">
|
||||
<i class="material-icons">mood</i>
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-accent.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-accent.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Accent-colored raised button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-colored.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-colored.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Colored raised button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-disabled.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-disabled.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Raised disabled button-->
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
|
||||
Button
|
||||
</button>
|
@ -0,0 +1,4 @@
|
||||
<!-- Accent-colored raised button with ripple -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-ripple.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised-ripple.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Raised button with ripple -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
|
||||
Button
|
||||
</button>
|
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/button/snippets/raised.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Raised button -->
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised">
|
||||
Button
|
||||
</button>
|
111
dashboard-ui/bower_components/material-design-lite/src/card/_card.scss
vendored
Normal file
111
dashboard-ui/bower_components/material-design-lite/src/card/_card.scss
vendored
Normal file
@ -0,0 +1,111 @@
|
||||
/**
|
||||
* 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";
|
||||
|
||||
.mdl-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $card-font-size;
|
||||
font-weight: 400;
|
||||
min-height: $card-height;
|
||||
overflow: hidden;
|
||||
width: $card-width;
|
||||
z-index: $card-z-index;
|
||||
position: relative;
|
||||
background: $card-background-color;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-card__media {
|
||||
background-color: $card-image-placeholder-color;
|
||||
background-repeat: repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
background-origin: padding-box;
|
||||
background-attachment: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-card__title {
|
||||
align-items: center;
|
||||
color: $card-text-color;
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
line-height: normal;
|
||||
padding: $card-vertical-padding $card-horizontal-padding;
|
||||
perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
|
||||
transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.mdl-card--border {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-card__title-text {
|
||||
align-self: flex-end;
|
||||
color: inherit;
|
||||
display: block;
|
||||
display: flex;
|
||||
font-size: $card-title-font-size;
|
||||
font-weight: $card-title-text-font-weight;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-card__subtitle-text {
|
||||
font-size: $card-subtitle-font-size;
|
||||
color: $card-subtitle-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-card__supporting-text {
|
||||
color: $card-supporting-text-text-color;
|
||||
font-size: $card-supporting-text-font-size;
|
||||
line-height: $card-supporting-text-line-height;
|
||||
overflow: hidden;
|
||||
padding: $card-vertical-padding $card-horizontal-padding;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.mdl-card__actions {
|
||||
font-size: $card-actions-font-size;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.mdl-card--border {
|
||||
border-top: 1px solid $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-card--expand {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.mdl-card__menu {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
}
|
47
dashboard-ui/bower_components/material-design-lite/src/card/snippets/event.html
vendored
Normal file
47
dashboard-ui/bower_components/material-design-lite/src/card/snippets/event.html
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
<!-- Event card -->
|
||||
<style>
|
||||
.demo-card-event.mdl-card {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: #3E4EB8;
|
||||
}
|
||||
.demo-card-event > .mdl-card__actions {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.demo-card-event > .mdl-card__title {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.demo-card-event > .mdl-card__title > h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.demo-card-event > .mdl-card__actions {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-card-event > .mdl-card__actions > .material-icons {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.demo-card-event > .mdl-card__title,
|
||||
.demo-card-event > .mdl-card__actions,
|
||||
.demo-card-event > .mdl-card__actions > .mdl-button {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-event mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h4>
|
||||
Featured event:<br>
|
||||
May 24, 2016<br>
|
||||
7-11pm
|
||||
</h4>
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Add to Calendar
|
||||
</a>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<i class="material-icons">event</i>
|
||||
</div>
|
||||
</div>
|
25
dashboard-ui/bower_components/material-design-lite/src/card/snippets/image.html
vendored
Normal file
25
dashboard-ui/bower_components/material-design-lite/src/card/snippets/image.html
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
<!-- Image card -->
|
||||
<style>
|
||||
.demo-card-image.mdl-card {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: url('../assets/demos/image_card.jpg') center / cover;
|
||||
}
|
||||
.demo-card-image > .mdl-card__actions {
|
||||
height: 52px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.demo-card-image__filename {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand"></div>
|
||||
<div class="mdl-card__actions">
|
||||
<span class="demo-card-image__filename">Image.jpg</span>
|
||||
</div>
|
||||
</div>
|
27
dashboard-ui/bower_components/material-design-lite/src/card/snippets/square.html
vendored
Normal file
27
dashboard-ui/bower_components/material-design-lite/src/card/snippets/square.html
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
<!-- Square card -->
|
||||
<style>
|
||||
.demo-card-square.mdl-card {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
.demo-card-square > .mdl-card__title {
|
||||
color: #fff;
|
||||
background:
|
||||
url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Update</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Aenan convallis.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
View Updates
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
34
dashboard-ui/bower_components/material-design-lite/src/card/snippets/wide.html
vendored
Normal file
34
dashboard-ui/bower_components/material-design-lite/src/card/snippets/wide.html
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
<!-- Wide card with share menu button -->
|
||||
<style>
|
||||
.demo-card-wide.mdl-card {
|
||||
width: 512px;
|
||||
}
|
||||
.demo-card-wide > .mdl-card__title {
|
||||
color: #fff;
|
||||
height: 176px;
|
||||
background: url('../assets/demos/welcome_card.jpg') center / cover;
|
||||
}
|
||||
.demo-card-wide > .mdl-card__menu {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title">
|
||||
<h2 class="mdl-card__title-text">Welcome</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Mauris sagittis pellentesque lacus eleifend lacinia...
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
<div class="mdl-card__menu">
|
||||
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
|
||||
<i class="material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
180
dashboard-ui/bower_components/material-design-lite/src/checkbox/_checkbox.scss
vendored
Normal file
180
dashboard-ui/bower_components/material-design-lite/src/checkbox/_checkbox.scss
vendored
Normal file
@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 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";
|
||||
@import "../mixins";
|
||||
|
||||
.mdl-checkbox {
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: $checkbox-label-height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.is-upgraded {
|
||||
padding-left: $checkbox-button-size + $checkbox-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-checkbox__input {
|
||||
line-height: $checkbox-label-height;
|
||||
|
||||
.mdl-checkbox.is-upgraded & {
|
||||
// Hide input element, while still making it respond to focus.
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-checkbox__box-outline {
|
||||
position: absolute;
|
||||
top: $checkbox-top-offset;
|
||||
left: 0;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: $checkbox-button-size;
|
||||
height: $checkbox-button-size;
|
||||
margin: 0;
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
border: 2px solid $checkbox-off-color;
|
||||
border-radius: 2px;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
.mdl-checkbox.is-checked & {
|
||||
border: 2px solid $checkbox-color;
|
||||
}
|
||||
|
||||
fieldset[disabled] .mdl-checkbox &,
|
||||
.mdl-checkbox.is-disabled & {
|
||||
border: 2px solid $checkbox-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-checkbox__focus-helper {
|
||||
position: absolute;
|
||||
top: $checkbox-top-offset;
|
||||
left: 0;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: $checkbox-button-size;
|
||||
height: $checkbox-button-size;
|
||||
border-radius: 50%;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.mdl-checkbox.is-focused & {
|
||||
box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mdl-checkbox.is-focused.is-checked & {
|
||||
box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
|
||||
background-color: $checkbox-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-checkbox__tick-outline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
mask: url("#{$checkbox-image-path}/tick-mask.svg?embed");
|
||||
|
||||
background: transparent;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background;
|
||||
|
||||
.mdl-checkbox.is-checked & {
|
||||
background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed");
|
||||
}
|
||||
|
||||
fieldset[disabled] .mdl-checkbox.is-checked &,
|
||||
.mdl-checkbox.is-checked.is-disabled & {
|
||||
background: $checkbox-disabled-color url("#{$checkbox-image-path}/tick.svg?embed");
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-checkbox__label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: $checkbox-label-font-size;
|
||||
line-height: $checkbox-label-height;
|
||||
margin: 0;
|
||||
|
||||
fieldset[disabled] .mdl-checkbox &,
|
||||
.mdl-checkbox.is-disabled & {
|
||||
color: $checkbox-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-checkbox__ripple-container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
|
||||
left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
|
||||
|
||||
box-sizing: border-box;
|
||||
width: $checkbox-ripple-size;
|
||||
height: $checkbox-ripple-size;
|
||||
border-radius: 50%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
|
||||
& .mdl-ripple {
|
||||
background: $checkbox-color;
|
||||
}
|
||||
|
||||
fieldset[disabled] .mdl-checkbox &,
|
||||
.mdl-checkbox.is-disabled & {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
fieldset[disabled] .mdl-checkbox & .mdl-ripple,
|
||||
.mdl-checkbox.is-disabled & .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
269
dashboard-ui/bower_components/material-design-lite/src/checkbox/checkbox.js
vendored
Normal file
269
dashboard-ui/bower_components/material-design-lite/src/checkbox/checkbox.js
vendored
Normal file
@ -0,0 +1,269 @@
|
||||
/**
|
||||
* @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 Checkbox 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 MaterialCheckbox = function MaterialCheckbox(element) {
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
window['MaterialCheckbox'] = MaterialCheckbox;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.Constant_ = {
|
||||
TINY_TIMEOUT: 0.001
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
MaterialCheckbox.prototype.CssClasses_ = {
|
||||
INPUT: 'mdl-checkbox__input',
|
||||
BOX_OUTLINE: 'mdl-checkbox__box-outline',
|
||||
FOCUS_HELPER: 'mdl-checkbox__focus-helper',
|
||||
TICK_OUTLINE: 'mdl-checkbox__tick-outline',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle change of state.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.onChange_ = function(event) {
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle focus of element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.onFocus_ = function(event) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle lost focus of element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.onBlur_ = function(event) {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle mouseup.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.onMouseUp_ = function(event) {
|
||||
this.blur_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle class updates.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.updateClasses_ = function() {
|
||||
this.checkDisabled();
|
||||
this.checkToggleState();
|
||||
};
|
||||
|
||||
/**
|
||||
* Add blur.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.blur_ = function() {
|
||||
// TODO: figure out why there's a focus event being fired after our blur,
|
||||
// so that we can avoid this hack.
|
||||
window.setTimeout(function() {
|
||||
this.inputElement_.blur();
|
||||
}.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
|
||||
};
|
||||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Check the inputs toggle state and update display.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.checkToggleState = function() {
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
};
|
||||
MaterialCheckbox.prototype['checkToggleState'] =
|
||||
MaterialCheckbox.prototype.checkToggleState;
|
||||
|
||||
/**
|
||||
* Check the inputs disabled state and update display.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.checkDisabled = function() {
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
};
|
||||
MaterialCheckbox.prototype['checkDisabled'] =
|
||||
MaterialCheckbox.prototype.checkDisabled;
|
||||
|
||||
/**
|
||||
* Disable checkbox.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.disable = function() {
|
||||
this.inputElement_.disabled = true;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
|
||||
|
||||
/**
|
||||
* Enable checkbox.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.enable = function() {
|
||||
this.inputElement_.disabled = false;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
|
||||
|
||||
/**
|
||||
* Check checkbox.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.check = function() {
|
||||
this.inputElement_.checked = true;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
|
||||
|
||||
/**
|
||||
* Uncheck checkbox.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.uncheck = function() {
|
||||
this.inputElement_.checked = false;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialCheckbox.prototype.init = function() {
|
||||
if (this.element_) {
|
||||
this.inputElement_ = this.element_.querySelector('.' +
|
||||
this.CssClasses_.INPUT);
|
||||
|
||||
var boxOutline = document.createElement('span');
|
||||
boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
|
||||
|
||||
var tickContainer = document.createElement('span');
|
||||
tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
|
||||
|
||||
var tickOutline = document.createElement('span');
|
||||
tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
|
||||
|
||||
boxOutline.appendChild(tickOutline);
|
||||
|
||||
this.element_.appendChild(tickContainer);
|
||||
this.element_.appendChild(boxOutline);
|
||||
|
||||
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
|
||||
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
||||
this.rippleContainerElement_ = document.createElement('span');
|
||||
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
|
||||
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
|
||||
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
||||
this.boundRippleMouseUp = this.onMouseUp_.bind(this);
|
||||
this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
|
||||
|
||||
var ripple = document.createElement('span');
|
||||
ripple.classList.add(this.CssClasses_.RIPPLE);
|
||||
|
||||
this.rippleContainerElement_.appendChild(ripple);
|
||||
this.element_.appendChild(this.rippleContainerElement_);
|
||||
}
|
||||
this.boundInputOnChange = this.onChange_.bind(this);
|
||||
this.boundInputOnFocus = this.onFocus_.bind(this);
|
||||
this.boundInputOnBlur = this.onBlur_.bind(this);
|
||||
this.boundElementMouseUp = this.onMouseUp_.bind(this);
|
||||
this.inputElement_.addEventListener('change', this.boundInputOnChange);
|
||||
this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
|
||||
this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
|
||||
this.element_.addEventListener('mouseup', this.boundElementMouseUp);
|
||||
|
||||
this.updateClasses_();
|
||||
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: MaterialCheckbox,
|
||||
classAsString: 'MaterialCheckbox',
|
||||
cssClass: 'mdl-js-checkbox',
|
||||
widget: true
|
||||
});
|
||||
})();
|
4
dashboard-ui/bower_components/material-design-lite/src/checkbox/snippets/check-off.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/checkbox/snippets/check-off.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Checkbox</span>
|
||||
</label>
|
4
dashboard-ui/bower_components/material-design-lite/src/checkbox/snippets/check-on.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/checkbox/snippets/check-on.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
|
||||
<span class="mdl-checkbox__label">Checkbox</span>
|
||||
</label>
|
120
dashboard-ui/bower_components/material-design-lite/src/data-table/_data-table.scss
vendored
Normal file
120
dashboard-ui/bower_components/material-design-lite/src/data-table/_data-table.scss
vendored
Normal file
@ -0,0 +1,120 @@
|
||||
/**
|
||||
* 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";
|
||||
@import "../mixins";
|
||||
|
||||
.mdl-data-table {
|
||||
position: relative;
|
||||
border: $data-table-dividers;
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
font-size: $data-table-font-size;
|
||||
background-color: unquote("rgb(#{$color-white})");
|
||||
|
||||
thead {
|
||||
padding-bottom: 3px;
|
||||
|
||||
.mdl-data-table__select {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
position: relative;
|
||||
height: $data-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
|
||||
&.is-selected {
|
||||
background-color: $data-table-selection-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $data-table-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0 $data-table-column-padding 12px $data-table-column-padding;
|
||||
text-align: right;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
height: $data-table-row-height;
|
||||
border-top: $data-table-dividers;
|
||||
border-bottom: $data-table-dividers;
|
||||
padding-top: $data-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mdl-data-table__select {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
@include typo-body-2();
|
||||
height: $data-table-row-height;
|
||||
font-size: $data-table-header-font-size;
|
||||
color: $data-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.mdl-data-table__header--sorted-ascending,
|
||||
&.mdl-data-table__header--sorted-descending {
|
||||
color: $data-table-header-sorted-color;
|
||||
&:before {
|
||||
@include typo-icon;
|
||||
font-size: $data-table-header-sort-icon-size;
|
||||
content: "\e5d8";
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
color: $data-table-header-sorted-icon-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mdl-data-table__header--sorted-descending:before {
|
||||
content: "\e5db";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-data-table__select {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
|
||||
text-align: left;
|
||||
}
|
177
dashboard-ui/bower_components/material-design-lite/src/data-table/data-table.js
vendored
Normal file
177
dashboard-ui/bower_components/material-design-lite/src/data-table/data-table.js
vendored
Normal file
@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @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 Data Table Card MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
*
|
||||
* @constructor
|
||||
* @param {Element} element The element that will be upgraded.
|
||||
*/
|
||||
var MaterialDataTable = function MaterialDataTable(element) {
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
|
||||
window['MaterialDataTable'] = MaterialDataTable;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialDataTable.prototype.Constant_ = {
|
||||
// None at the moment.
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
MaterialDataTable.prototype.CssClasses_ = {
|
||||
DATA_TABLE: 'mdl-data-table',
|
||||
SELECTABLE: 'mdl-data-table--selectable',
|
||||
SELECT_ELEMENT: 'mdl-data-table__select',
|
||||
IS_SELECTED: 'is-selected',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates and returns a function that toggles the selection state of a
|
||||
* single row (or multiple rows).
|
||||
*
|
||||
* @param {Element} checkbox Checkbox that toggles the selection state.
|
||||
* @param {Element} row Row to toggle when checkbox changes.
|
||||
* @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
|
||||
* @private
|
||||
*/
|
||||
MaterialDataTable.prototype.selectRow_ = function(checkbox, row, opt_rows) {
|
||||
if (row) {
|
||||
return function() {
|
||||
if (checkbox.checked) {
|
||||
row.classList.add(this.CssClasses_.IS_SELECTED);
|
||||
} else {
|
||||
row.classList.remove(this.CssClasses_.IS_SELECTED);
|
||||
}
|
||||
}.bind(this);
|
||||
}
|
||||
|
||||
if (opt_rows) {
|
||||
return function() {
|
||||
var i;
|
||||
var el;
|
||||
if (checkbox.checked) {
|
||||
for (i = 0; i < opt_rows.length; i++) {
|
||||
el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
|
||||
el['MaterialCheckbox'].check();
|
||||
opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i < opt_rows.length; i++) {
|
||||
el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
|
||||
el['MaterialCheckbox'].uncheck();
|
||||
opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
|
||||
}
|
||||
}
|
||||
}.bind(this);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a checkbox for a single or or multiple rows and hooks up the
|
||||
* event handling.
|
||||
*
|
||||
* @param {Element} row Row to toggle when checkbox changes.
|
||||
* @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
|
||||
* @private
|
||||
*/
|
||||
MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) {
|
||||
var label = document.createElement('label');
|
||||
var labelClasses = [
|
||||
'mdl-checkbox',
|
||||
'mdl-js-checkbox',
|
||||
'mdl-js-ripple-effect',
|
||||
this.CssClasses_.SELECT_ELEMENT
|
||||
];
|
||||
label.className = labelClasses.join(' ');
|
||||
var checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.classList.add('mdl-checkbox__input');
|
||||
|
||||
if (row) {
|
||||
checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
|
||||
checkbox.addEventListener('change', this.selectRow_(checkbox, row));
|
||||
} else if (opt_rows) {
|
||||
checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
|
||||
}
|
||||
|
||||
label.appendChild(checkbox);
|
||||
componentHandler.upgradeElement(label, 'MaterialCheckbox');
|
||||
return label;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialDataTable.prototype.init = function() {
|
||||
if (this.element_) {
|
||||
var firstHeader = this.element_.querySelector('th');
|
||||
var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr'));
|
||||
var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr'));
|
||||
var rows = bodyRows.concat(footRows);
|
||||
|
||||
if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
|
||||
var th = document.createElement('th');
|
||||
var headerCheckbox = this.createCheckbox_(null, rows);
|
||||
th.appendChild(headerCheckbox);
|
||||
firstHeader.parentElement.insertBefore(th, firstHeader);
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var firstCell = rows[i].querySelector('td');
|
||||
if (firstCell) {
|
||||
var td = document.createElement('td');
|
||||
if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
|
||||
var rowCheckbox = this.createCheckbox_(rows[i]);
|
||||
td.appendChild(rowCheckbox);
|
||||
}
|
||||
rows[i].insertBefore(td, firstCell);
|
||||
}
|
||||
}
|
||||
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: MaterialDataTable,
|
||||
classAsString: 'MaterialDataTable',
|
||||
cssClass: 'mdl-js-data-table'
|
||||
});
|
||||
})();
|
26
dashboard-ui/bower_components/material-design-lite/src/data-table/snippets/data-table.html
vendored
Normal file
26
dashboard-ui/bower_components/material-design-lite/src/data-table/snippets/data-table.html
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="mdl-data-table__cell--non-numeric">Material</th>
|
||||
<th>Quantity</th>
|
||||
<th>Unit price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
|
||||
<td>25</td>
|
||||
<td>$2.90</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
|
||||
<td>50</td>
|
||||
<td>$1.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
|
||||
<td>10</td>
|
||||
<td>$2.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
39
dashboard-ui/bower_components/material-design-lite/src/demos.css
vendored
Normal file
39
dashboard-ui/bower_components/material-design-lite/src/demos.css
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.demo-page {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.demo-preview-block {
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-code {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
57
dashboard-ui/bower_components/material-design-lite/src/dialog/_dialog.scss
vendored
Normal file
57
dashboard-ui/bower_components/material-design-lite/src/dialog/_dialog.scss
vendored
Normal file
@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 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";
|
||||
@import "../mixins";
|
||||
|
||||
.mdl-dialog {
|
||||
border: none;
|
||||
@include shadow-24dp;
|
||||
@include dialog-width;
|
||||
|
||||
&__title {
|
||||
padding: 24px 24px 0;
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
&__actions {
|
||||
padding: 8px 8px 8px 24px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
height: 36px;
|
||||
&:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&--full-width {
|
||||
padding: 0 0 8px 0;
|
||||
> * {
|
||||
height: 48px;
|
||||
flex: 0 0 100%;
|
||||
padding-right: 16px;
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
padding: 20px 24px 24px 24px;
|
||||
color: $dialog-content-color;
|
||||
}
|
||||
}
|
321
dashboard-ui/bower_components/material-design-lite/src/footer/_mega_footer.scss
vendored
Normal file
321
dashboard-ui/bower_components/material-design-lite/src/footer/_mega_footer.scss
vendored
Normal file
@ -0,0 +1,321 @@
|
||||
/**
|
||||
* 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";
|
||||
@import "../mixins";
|
||||
|
||||
.mdl-mega-footer {
|
||||
padding: $footer-min-padding $footer-padding-sides;
|
||||
|
||||
color: $footer-color;
|
||||
background-color: $footer-bg-color;
|
||||
}
|
||||
|
||||
|
||||
.mdl-mega-footer--top-section:after,
|
||||
.mdl-mega-footer--middle-section:after,
|
||||
.mdl-mega-footer--bottom-section:after,
|
||||
.mdl-mega-footer__top-section:after,
|
||||
.mdl-mega-footer__middle-section:after,
|
||||
.mdl-mega-footer__bottom-section:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--left-section,
|
||||
.mdl-mega-footer__left-section {
|
||||
margin-bottom: $footer-min-padding;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--right-section,
|
||||
.mdl-mega-footer__right-section {
|
||||
margin-bottom: $footer-min-padding;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--right-section a,
|
||||
.mdl-mega-footer__right-section a {
|
||||
display: block;
|
||||
|
||||
margin-bottom: $footer-min-padding;
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.mdl-mega-footer--left-section,
|
||||
.mdl-mega-footer__left-section {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--right-section,
|
||||
.mdl-mega-footer__right-section {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--right-section a,
|
||||
.mdl-mega-footer__right-section a {
|
||||
display: inline-block;
|
||||
|
||||
margin-left: $footer-min-padding;
|
||||
|
||||
line-height: $footer-btn-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--social-btn,
|
||||
.mdl-mega-footer__social-btn {
|
||||
width: $footer-btn-size;
|
||||
height: $footer-btn-size;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
background-color: $footer-button-fill-color;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--drop-down-section,
|
||||
.mdl-mega-footer__drop-down-section {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.mdl-mega-footer--drop-down-section,
|
||||
.mdl-mega-footer__drop-down-section {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--drop-down-section:nth-child(1),
|
||||
.mdl-mega-footer--drop-down-section:nth-child(2),
|
||||
.mdl-mega-footer__drop-down-section:nth-child(1),
|
||||
.mdl-mega-footer__drop-down-section:nth-child(2) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--drop-down-section:nth-child(3),
|
||||
.mdl-mega-footer__drop-down-section:nth-child(3) {
|
||||
float: right;
|
||||
|
||||
&:after {
|
||||
clear: right;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--drop-down-section:nth-child(4),
|
||||
.mdl-mega-footer__drop-down-section:nth-child(4) {
|
||||
clear: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--middle-section:after,
|
||||
.mdl-mega-footer__middle-section:after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--bottom-section,
|
||||
.mdl-mega-footer__bottom-section {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.mdl-mega-footer--drop-down-section,
|
||||
.mdl-mega-footer--drop-down-section:nth-child(3),
|
||||
.mdl-mega-footer--drop-down-section:nth-child(4),
|
||||
.mdl-mega-footer__drop-down-section,
|
||||
.mdl-mega-footer__drop-down-section:nth-child(3),
|
||||
.mdl-mega-footer__drop-down-section:nth-child(4) {
|
||||
width: 24%;
|
||||
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--heading-checkbox,
|
||||
.mdl-mega-footer__heading-checkbox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $footer-heading-line-height + ($footer-min-padding * 2);
|
||||
|
||||
padding: ($footer-min-padding * 2);
|
||||
margin: 0;
|
||||
margin-top: -$footer-min-padding;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
|
||||
& + .mdl-mega-footer--heading:after,
|
||||
& + .mdl-mega-footer__heading:after {
|
||||
font-family: 'Material Icons';
|
||||
content: '\E5CE'
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--heading-checkbox:checked,
|
||||
.mdl-mega-footer__heading-checkbox:checked {
|
||||
// WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
|
||||
// break consecutive "+" operators in some cases. Therefore, we need to use
|
||||
// both here to cover all the bases.
|
||||
& ~ .mdl-mega-footer--link-list,
|
||||
& ~ .mdl-mega-footer__link-list,
|
||||
& + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
|
||||
& + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& + .mdl-mega-footer--heading:after,
|
||||
& + .mdl-mega-footer__heading:after {
|
||||
font-family: 'Material Icons';
|
||||
content: '\E5CF'
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--heading,
|
||||
.mdl-mega-footer__heading {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
padding-right: $footer-heading-line-height + $footer-min-padding;
|
||||
margin-bottom: $footer-min-padding;
|
||||
|
||||
box-sizing:border-box;
|
||||
|
||||
font-size: $footer-heading-font-size;
|
||||
line-height: $footer-heading-line-height;
|
||||
|
||||
font-weight: 500;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
color: $footer-heading-color;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--heading:after,
|
||||
.mdl-mega-footer__heading:after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: $footer-heading-line-height;
|
||||
height: $footer-heading-line-height;
|
||||
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--link-list,
|
||||
.mdl-mega-footer__link-list {
|
||||
list-style: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
margin-bottom: $footer-min-padding * 2;
|
||||
&:after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--link-list li,
|
||||
.mdl-mega-footer__link-list li {
|
||||
@include typo-body-1();
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--link-list a,
|
||||
.mdl-mega-footer__link-list a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.mdl-mega-footer--heading-checkbox,
|
||||
.mdl-mega-footer__heading-checkbox {
|
||||
display: none;
|
||||
|
||||
& + .mdl-mega-footer--heading:after,
|
||||
& + .mdl-mega-footer__heading:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
.mdl-mega-footer--heading-checkbox:checked,
|
||||
.mdl-mega-footer__heading-checkbox:checked {
|
||||
// WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
|
||||
// break consecutive "+" operators in some cases. Therefore, we need to use
|
||||
// both here to cover all the bases.
|
||||
& ~ .mdl-mega-footer--link-list,
|
||||
& ~ .mdl-mega-footer__link-list,
|
||||
& + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
|
||||
& + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& + .mdl-mega-footer--heading:after,
|
||||
& + .mdl-mega-footer__heading:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mega-footer--bottom-section,
|
||||
.mdl-mega-footer__bottom-section {
|
||||
padding-top: $footer-min-padding;
|
||||
margin-bottom: $footer-min-padding;
|
||||
}
|
||||
|
||||
.mdl-logo {
|
||||
margin-bottom: $footer-min-padding;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
|
||||
.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
|
||||
float: left;
|
||||
|
||||
margin-bottom: 0;
|
||||
margin-right: $footer-min-padding;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.mdl-logo {
|
||||
float: left;
|
||||
|
||||
margin-bottom: 0;
|
||||
margin-right: $footer-min-padding;
|
||||
}
|
||||
}
|
88
dashboard-ui/bower_components/material-design-lite/src/footer/_mini_footer.scss
vendored
Normal file
88
dashboard-ui/bower_components/material-design-lite/src/footer/_mini_footer.scss
vendored
Normal file
@ -0,0 +1,88 @@
|
||||
/**
|
||||
* 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";
|
||||
|
||||
.mdl-mini-footer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: ($padding * 2) $padding;
|
||||
|
||||
color: $footer-color;
|
||||
background-color: $footer-bg-color;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .mdl-logo {
|
||||
line-height: $footer-btn-size;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mini-footer--link-list,
|
||||
.mdl-mini-footer__link-list {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
list-style: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& li {
|
||||
margin-bottom: 0;
|
||||
margin-right: $padding;
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
line-height: $footer-btn-size;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-mini-footer--left-section,
|
||||
.mdl-mini-footer__left-section {
|
||||
display: inline-block;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.mdl-mini-footer--right-section,
|
||||
.mdl-mini-footer__right-section {
|
||||
display: inline-block;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.mdl-mini-footer--social-btn,
|
||||
.mdl-mini-footer__social-btn {
|
||||
width: $footer-btn-size;
|
||||
height: $footer-btn-size;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
background-color: $footer-button-fill-color;
|
||||
|
||||
border: none;
|
||||
}
|
57
dashboard-ui/bower_components/material-design-lite/src/footer/snippets/mega-footer.html
vendored
Normal file
57
dashboard-ui/bower_components/material-design-lite/src/footer/snippets/mega-footer.html
vendored
Normal file
@ -0,0 +1,57 @@
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer__middle-section">
|
||||
|
||||
<div class="mdl-mega-footer__drop-down-section">
|
||||
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer__heading">Features</h1>
|
||||
<ul class="mdl-mega-footer__link-list">
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Partners</a></li>
|
||||
<li><a href="#">Updates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer__drop-down-section">
|
||||
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer__heading">Details</h1>
|
||||
<ul class="mdl-mega-footer__link-list">
|
||||
<li><a href="#">Specs</a></li>
|
||||
<li><a href="#">Tools</a></li>
|
||||
<li><a href="#">Resources</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer__drop-down-section">
|
||||
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer__heading">Technology</h1>
|
||||
<ul class="mdl-mega-footer__link-list">
|
||||
<li><a href="#">How it works</a></li>
|
||||
<li><a href="#">Patterns</a></li>
|
||||
<li><a href="#">Usage</a></li>
|
||||
<li><a href="#">Products</a></li>
|
||||
<li><a href="#">Contracts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer__drop-down-section">
|
||||
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer__heading">FAQ</h1>
|
||||
<ul class="mdl-mega-footer__link-list">
|
||||
<li><a href="#">Questions</a></li>
|
||||
<li><a href="#">Answers</a></li>
|
||||
<li><a href="#">Contact us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer__bottom-section">
|
||||
<div class="mdl-logo">Title</div>
|
||||
<ul class="mdl-mega-footer__link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</footer>
|
9
dashboard-ui/bower_components/material-design-lite/src/footer/snippets/mini-footer.html
vendored
Normal file
9
dashboard-ui/bower_components/material-design-lite/src/footer/snippets/mini-footer.html
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer__left-section">
|
||||
<div class="mdl-logo">Title</div>
|
||||
<ul class="mdl-mini-footer__link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
231
dashboard-ui/bower_components/material-design-lite/src/grid/_grid.scss
vendored
Normal file
231
dashboard-ui/bower_components/material-design-lite/src/grid/_grid.scss
vendored
Normal file
@ -0,0 +1,231 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*
|
||||
* NOTE: Some rules here are applied using duplicate selectors.
|
||||
* This is on purpose to increase their specificity when applied.
|
||||
* For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
|
||||
*/
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.mdl-grid {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 auto 0 auto;
|
||||
align-items: stretch;
|
||||
|
||||
&.mdl-grid--no-spacing {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-cell {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.mdl-cell--top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.mdl-cell--middle {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mdl-cell--bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.mdl-cell--stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Define order override classes.
|
||||
@for $i from 1 through $grid-max-columns {
|
||||
.mdl-cell--order-#{$i} {
|
||||
order: $i;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Mixins for width calculation.
|
||||
@mixin partial-size($size, $columns, $gutter) {
|
||||
width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
|
||||
|
||||
.mdl-grid--no-spacing > & {
|
||||
width: #{(($size / $columns) * 100)+"%"};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin full-size($gutter) {
|
||||
@include partial-size(1, 1, $gutter);
|
||||
}
|
||||
|
||||
@mixin offset-size($size, $columns, $gutter) {
|
||||
margin-left: calc(#{(($size / $columns) * 100)+"%"} + #{$gutter / 2});
|
||||
|
||||
.mdl-grid.mdl-grid--no-spacing > & {
|
||||
margin-left: #{(($size / $columns) * 100)+"%"};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
////////// Phone //////////
|
||||
|
||||
@media (max-width: $grid-tablet-breakpoint - 1) {
|
||||
.mdl-grid {
|
||||
padding: $grid-phone-margin - ($grid-phone-gutter / 2);
|
||||
}
|
||||
|
||||
.mdl-cell {
|
||||
margin: $grid-phone-gutter / 2;
|
||||
@include partial-size($grid-cell-default-columns, $grid-phone-columns,
|
||||
$grid-phone-gutter);
|
||||
}
|
||||
|
||||
.mdl-cell--hide-phone {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Define order override classes.
|
||||
@for $i from 1 through $grid-max-columns {
|
||||
.mdl-cell--order-#{$i}-phone.mdl-cell--order-#{$i}-phone {
|
||||
order: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Define partial sizes for columnNumber < totalColumns.
|
||||
@for $i from 1 through ($grid-phone-columns - 1) {
|
||||
.mdl-cell--#{$i}-col,
|
||||
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
|
||||
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
// Define 100% for everything else.
|
||||
@for $i from $grid-phone-columns through $grid-desktop-columns {
|
||||
.mdl-cell--#{$i}-col,
|
||||
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
|
||||
@include full-size($grid-phone-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
// Define valid phone offsets.
|
||||
@for $i from 1 through ($grid-phone-columns - 1) {
|
||||
.mdl-cell--#{$i}-offset,
|
||||
.mdl-cell--#{$i}-offset-phone.mdl-cell--#{$i}-offset-phone {
|
||||
@include offset-size($i, $grid-phone-columns, $grid-phone-gutter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
////////// Tablet //////////
|
||||
|
||||
@media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) {
|
||||
.mdl-grid {
|
||||
padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);
|
||||
}
|
||||
|
||||
.mdl-cell {
|
||||
margin: $grid-tablet-gutter / 2;
|
||||
@include partial-size($grid-cell-default-columns, $grid-tablet-columns,
|
||||
$grid-tablet-gutter);
|
||||
}
|
||||
|
||||
.mdl-cell--hide-tablet {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Define order override classes.
|
||||
@for $i from 1 through $grid-max-columns {
|
||||
.mdl-cell--order-#{$i}-tablet.mdl-cell--order-#{$i}-tablet {
|
||||
order: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Define partial sizes for columnNumber < totalColumns.
|
||||
@for $i from 1 through ($grid-tablet-columns - 1) {
|
||||
.mdl-cell--#{$i}-col,
|
||||
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
|
||||
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
// Define 100% for everything else.
|
||||
@for $i from $grid-tablet-columns through $grid-desktop-columns {
|
||||
.mdl-cell--#{$i}-col,
|
||||
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
|
||||
@include full-size($grid-tablet-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
// Define valid tablet offsets.
|
||||
@for $i from 1 through ($grid-tablet-columns - 1) {
|
||||
.mdl-cell--#{$i}-offset,
|
||||
.mdl-cell--#{$i}-offset-tablet.mdl-cell--#{$i}-offset-tablet {
|
||||
@include offset-size($i, $grid-tablet-columns, $grid-tablet-gutter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
////////// Desktop //////////
|
||||
|
||||
@media (min-width: $grid-desktop-breakpoint) {
|
||||
.mdl-grid {
|
||||
padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
|
||||
}
|
||||
|
||||
.mdl-cell {
|
||||
margin: $grid-desktop-gutter / 2;
|
||||
@include partial-size($grid-cell-default-columns, $grid-desktop-columns,
|
||||
$grid-desktop-gutter);
|
||||
}
|
||||
|
||||
.mdl-cell--hide-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Define order override classes.
|
||||
@for $i from 1 through $grid-max-columns {
|
||||
.mdl-cell--order-#{$i}-desktop.mdl-cell--order-#{$i}-desktop {
|
||||
order: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Define partial sizes for all numbers of columns.
|
||||
@for $i from 1 through $grid-desktop-columns {
|
||||
.mdl-cell--#{$i}-col,
|
||||
.mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
|
||||
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
// Define valid desktop offsets.
|
||||
@for $i from 1 through ($grid-desktop-columns - 1) {
|
||||
.mdl-cell--#{$i}-offset,
|
||||
.mdl-cell--#{$i}-offset-desktop.mdl-cell--#{$i}-offset-desktop {
|
||||
@include offset-size($i, $grid-desktop-columns, $grid-desktop-gutter);
|
||||
}
|
||||
}
|
||||
}
|
11
dashboard-ui/bower_components/material-design-lite/src/grid/snippets/codepen-grid.css
vendored
Normal file
11
dashboard-ui/bower_components/material-design-lite/src/grid/snippets/codepen-grid.css
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
.mdl-cell {
|
||||
box-sizing: border-box;
|
||||
background-color: #BDBDBD;
|
||||
height: 200px;
|
||||
padding-left: 8px;
|
||||
padding-top: 4px;
|
||||
color: white;
|
||||
}
|
||||
.mdl-grid:first-of-type .mdl-cell {
|
||||
height: 50px;
|
||||
}
|
15
dashboard-ui/bower_components/material-design-lite/src/grid/snippets/grid-demo.html
vendored
Normal file
15
dashboard-ui/bower_components/material-design-lite/src/grid/snippets/grid-demo.html
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
<style>
|
||||
.demo-grid .mdl-cell {
|
||||
box-sizing: border-box;
|
||||
background-color: #BDBDBD;
|
||||
height: 200px;
|
||||
padding-left: 8px;
|
||||
padding-top: 4px;
|
||||
color: white;
|
||||
}
|
||||
.demo-grid .mdl-grid:first-of-type .mdl-cell {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "grid.html" %}
|
29
dashboard-ui/bower_components/material-design-lite/src/grid/snippets/grid.html
vendored
Normal file
29
dashboard-ui/bower_components/material-design-lite/src/grid/snippets/grid.html
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
<div class="mdl-cell mdl-cell--1-col">1</div>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--4-col">4</div>
|
||||
<div class="mdl-cell mdl-cell--4-col">4</div>
|
||||
<div class="mdl-cell mdl-cell--4-col">4</div>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--6-col">6</div>
|
||||
<div class="mdl-cell mdl-cell--4-col">4</div>
|
||||
<div class="mdl-cell mdl-cell--2-col">2</div>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
|
||||
<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
|
||||
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
|
||||
</div>
|
121
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/_icon-toggle.scss
vendored
Normal file
121
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/_icon-toggle.scss
vendored
Normal file
@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 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";
|
||||
|
||||
.mdl-icon-toggle {
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
display: inline-block;
|
||||
height: $icon-toggle-size;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle__input {
|
||||
line-height: $icon-toggle-size;
|
||||
|
||||
.mdl-icon-toggle.is-upgraded & {
|
||||
// Hide input element, while still making it respond to focus.
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-icon-toggle__label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: $icon-toggle-size;
|
||||
width: $icon-toggle-size;
|
||||
min-width: $icon-toggle-size;
|
||||
color: $icon-toggle-color;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
will-change: background-color;
|
||||
transition: background-color 0.2s $animation-curve-default,
|
||||
color 0.2s $animation-curve-default;
|
||||
|
||||
&.material-icons {
|
||||
line-height: $icon-toggle-size;
|
||||
font-size: $icon-toggle-font-size;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle.is-checked & {
|
||||
color: $icon-toggle-checked-color;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle.is-disabled & {
|
||||
color: $icon-toggle-disabled-color;
|
||||
cursor: auto;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle.is-focused & {
|
||||
background-color: $icon-toggle-focus-color;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle.is-focused.is-checked & {
|
||||
background-color: $icon-toggle-checked-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mdl-icon-toggle__ripple-container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
||||
left: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
||||
|
||||
box-sizing: border-box;
|
||||
width: $icon-toggle-ripple-size;
|
||||
height: $icon-toggle-ripple-size;
|
||||
border-radius: 50%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
|
||||
& .mdl-ripple {
|
||||
background: $icon-toggle-color;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle.is-disabled & {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mdl-icon-toggle.is-disabled & .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
255
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/icon-toggle.js
vendored
Normal file
255
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/icon-toggle.js
vendored
Normal file
@ -0,0 +1,255 @@
|
||||
/**
|
||||
* @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 icon toggle 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 MaterialIconToggle = function MaterialIconToggle(element) {
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
window['MaterialIconToggle'] = MaterialIconToggle;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.Constant_ = {
|
||||
TINY_TIMEOUT: 0.001
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
MaterialIconToggle.prototype.CssClasses_ = {
|
||||
INPUT: 'mdl-icon-toggle__input',
|
||||
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked'
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle change of state.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.onChange_ = function(event) {
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle focus of element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.onFocus_ = function(event) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle lost focus of element.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.onBlur_ = function(event) {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle mouseup.
|
||||
*
|
||||
* @param {Event} event The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.onMouseUp_ = function(event) {
|
||||
this.blur_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle class updates.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.updateClasses_ = function() {
|
||||
this.checkDisabled();
|
||||
this.checkToggleState();
|
||||
};
|
||||
|
||||
/**
|
||||
* Add blur.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.blur_ = function() {
|
||||
// TODO: figure out why there's a focus event being fired after our blur,
|
||||
// so that we can avoid this hack.
|
||||
window.setTimeout(function() {
|
||||
this.inputElement_.blur();
|
||||
}.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
|
||||
};
|
||||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Check the inputs toggle state and update display.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.checkToggleState = function() {
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
};
|
||||
MaterialIconToggle.prototype['checkToggleState'] =
|
||||
MaterialIconToggle.prototype.checkToggleState;
|
||||
|
||||
/**
|
||||
* Check the inputs disabled state and update display.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.checkDisabled = function() {
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
};
|
||||
MaterialIconToggle.prototype['checkDisabled'] =
|
||||
MaterialIconToggle.prototype.checkDisabled;
|
||||
|
||||
/**
|
||||
* Disable icon toggle.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.disable = function() {
|
||||
this.inputElement_.disabled = true;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialIconToggle.prototype['disable'] =
|
||||
MaterialIconToggle.prototype.disable;
|
||||
|
||||
/**
|
||||
* Enable icon toggle.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.enable = function() {
|
||||
this.inputElement_.disabled = false;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
|
||||
|
||||
/**
|
||||
* Check icon toggle.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.check = function() {
|
||||
this.inputElement_.checked = true;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
|
||||
|
||||
/**
|
||||
* Uncheck icon toggle.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.uncheck = function() {
|
||||
this.inputElement_.checked = false;
|
||||
this.updateClasses_();
|
||||
};
|
||||
MaterialIconToggle.prototype['uncheck'] =
|
||||
MaterialIconToggle.prototype.uncheck;
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialIconToggle.prototype.init = function() {
|
||||
|
||||
if (this.element_) {
|
||||
this.inputElement_ =
|
||||
this.element_.querySelector('.' + this.CssClasses_.INPUT);
|
||||
|
||||
if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
|
||||
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
||||
this.rippleContainerElement_ = document.createElement('span');
|
||||
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
|
||||
this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
|
||||
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
||||
this.boundRippleMouseUp = this.onMouseUp_.bind(this);
|
||||
this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
|
||||
|
||||
var ripple = document.createElement('span');
|
||||
ripple.classList.add(this.CssClasses_.RIPPLE);
|
||||
|
||||
this.rippleContainerElement_.appendChild(ripple);
|
||||
this.element_.appendChild(this.rippleContainerElement_);
|
||||
}
|
||||
|
||||
this.boundInputOnChange = this.onChange_.bind(this);
|
||||
this.boundInputOnFocus = this.onFocus_.bind(this);
|
||||
this.boundInputOnBlur = this.onBlur_.bind(this);
|
||||
this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
|
||||
this.inputElement_.addEventListener('change', this.boundInputOnChange);
|
||||
this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
|
||||
this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
|
||||
this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
|
||||
|
||||
this.updateClasses_();
|
||||
this.element_.classList.add('is-upgraded');
|
||||
}
|
||||
};
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialIconToggle,
|
||||
classAsString: 'MaterialIconToggle',
|
||||
cssClass: 'mdl-js-icon-toggle',
|
||||
widget: true
|
||||
});
|
||||
})();
|
4
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/snippets/icon-off.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/snippets/icon-off.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
|
||||
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
|
||||
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
|
||||
</label>
|
4
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/snippets/icon-on.html
vendored
Normal file
4
dashboard-ui/bower_components/material-design-lite/src/icon-toggle/snippets/icon-on.html
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
|
||||
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
|
||||
</label>
|
9
dashboard-ui/bower_components/material-design-lite/src/images/buffer.svg
vendored
Normal file
9
dashboard-ui/bower_components/material-design-lite/src/images/buffer.svg
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="12" height="4" viewPort="0 0 12 4" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="2" cy="2" rx="2" ry="2">
|
||||
<animate attributeName="cx" from="2" to="-10" dur="0.6s" repeatCount="indefinite" />
|
||||
</ellipse>
|
||||
<ellipse cx="14" cy="2" rx="2" ry="2" class="loader">
|
||||
<animate attributeName="cx" from="14" to="2" dur="0.6s" repeatCount="indefinite" />
|
||||
</ellipse>
|
||||
</svg>
|
After Width: | Height: | Size: 425 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user