update shared components

This commit is contained in:
Luke Pulverenti 2016-03-09 12:40:22 -05:00
parent fb269362ff
commit 71811cb9e3
221 changed files with 32936 additions and 101 deletions

View File

@ -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",

View File

@ -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": {

View File

@ -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;
}

View 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');
}
}
};
});

View File

@ -0,0 +1,9 @@
define([], function () {
return {
show: function () {
},
hide: function () {
}
};
});

View File

@ -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",

View File

@ -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

View File

@ -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",

View File

@ -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

View File

@ -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,13 +1678,17 @@ 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];
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,7 +2305,8 @@ var StreamController = function (_EventHandler) {
}
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) {
@ -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) {
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() {
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) {
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() {
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;
}
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;
}
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

View File

@ -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",

View File

@ -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);
}
}

View File

@ -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,13 +447,16 @@ class StreamController extends EventHandler {
}
getBufferRange(position) {
var i, range;
for (i = this.bufferRange.length - 1; i >=0; i--) {
range = this.bufferRange[i];
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 {

View File

@ -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'
};

View File

@ -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

View File

@ -38,12 +38,16 @@ class FragmentLoader extends EventHandler {
}
loaderror(event) {
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() {
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});
}

View File

@ -49,12 +49,16 @@ class KeyLoader extends EventHandler {
}
loaderror(event) {
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() {
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});
}

View File

@ -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;
}
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,7 +280,9 @@ class PlaylistLoader extends EventHandler {
details = ErrorDetails.LEVEL_LOAD_TIMEOUT;
fatal = false;
}
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});
}
}

View File

@ -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];

View File

@ -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"
}

View 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
}

View 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.

View 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"
]
}

View 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'));
});

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View 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"
}
}

View 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 &mdash; most importantly &mdash; 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.

View 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;

View 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);
}

View 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;
}

View 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;

View 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;
}

View 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;
}

View 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>

View 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'
});

View 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);
}
}
}

View File

@ -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" %}

View File

@ -0,0 +1 @@
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>

View File

@ -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" %}

View File

@ -0,0 +1,2 @@
<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>

View File

@ -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" %}

View File

@ -0,0 +1,2 @@
<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>

View File

@ -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" %}

View File

@ -0,0 +1,2 @@
<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>

View 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;
}

View 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
});
})();

View File

@ -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>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -0,0 +1,4 @@
<!-- FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>

View File

@ -0,0 +1,4 @@
<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>

View File

@ -0,0 +1,4 @@
<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>

View File

@ -0,0 +1,4 @@
<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>

View File

@ -0,0 +1,4 @@
<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>

View File

@ -0,0 +1,4 @@
<!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>

View 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>

View File

@ -0,0 +1,4 @@
<!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>

View File

@ -0,0 +1,4 @@
<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>

View File

@ -0,0 +1,4 @@
<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>

View File

@ -0,0 +1,4 @@
<!-- Raised disabled button-->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>

View File

@ -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>

View 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>

View File

@ -0,0 +1,4 @@
<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>

View 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;
}

View 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>

View 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>

View 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>

View 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>

View 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;
}
}

View 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
});
})();

View 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>

View 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>

View 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;
}

View 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'
});
})();

View 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>

View 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;
}

View 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;
}
}

View 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;
}
}

View 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;
}

View 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 &amp; Terms</a></li>
</ul>
</div>
</footer>

View 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 &amp; Terms</a></li>
</ul>
</div>
</footer>

View 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);
}
}
}

View 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;
}

View 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" %}

View 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>

View 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;
}
}

View 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
});
})();

View 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>

View 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>

View 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