【pad/pda】模板上传
This commit is contained in:
14278/caihao
parent
98f8fb4b2d
commit
63f45a37c2
2433
SRC/iMES_PAD/JSplugins/JDA/jdajia.js
Normal file
2433
SRC/iMES_PAD/JSplugins/JDA/jdajia.js
Normal file
File diff suppressed because it is too large
Load Diff
202
SRC/iMES_PAD/JSplugins/ModuleInstaller/ModuleInstaller.js
Normal file
202
SRC/iMES_PAD/JSplugins/ModuleInstaller/ModuleInstaller.js
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
(function(window,angular){
|
||||||
|
'use strict';
|
||||||
|
(function(){
|
||||||
|
'use strict';
|
||||||
|
angular.module('ngModuleInstaller',['ng'])
|
||||||
|
.provider('$moduleInstaller', function(){
|
||||||
|
this.$get = ['$filter', '$translate', '$rootScope',
|
||||||
|
function($filter, $translate, $rootScope){
|
||||||
|
var $moduleInstaller = {status:{msg : '', is_complete: true}},
|
||||||
|
module_content = {root_path: '', zip_name: 'module_update.zip'};
|
||||||
|
//Module update(content = {version[模組現有版本], callback[更新成功], errorback[更新失敗]})
|
||||||
|
$moduleInstaller.update = function(content){
|
||||||
|
$moduleInstaller.status.is_complete = false;
|
||||||
|
$moduleInstaller.status.msg = '';
|
||||||
|
|
||||||
|
module_content.root_path = content.root_path||module_content.root_path;
|
||||||
|
module_content.zip_name = content.zip_name||module_content.zip_name;
|
||||||
|
if(content.url != ''){
|
||||||
|
//need update
|
||||||
|
if(window.cordova){
|
||||||
|
downloadZIP_cordova(content.url, function(){
|
||||||
|
if(content.callback)
|
||||||
|
content.callback();
|
||||||
|
}, function(){
|
||||||
|
if(content.errorback){
|
||||||
|
content.errorback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if(window.nodeRequire){
|
||||||
|
downloadZIP_electron(content.url, function(){
|
||||||
|
if(content.callback)
|
||||||
|
content.callback();
|
||||||
|
}, function(){
|
||||||
|
if(content.errorback){
|
||||||
|
content.errorback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
content.callback();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//don't need update
|
||||||
|
if(content.callback)
|
||||||
|
content.callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//App platform download ZIP File
|
||||||
|
function downloadZIP_cordova(url, callback, errorback){
|
||||||
|
var zipDistUrl = cordova.file.dataDirectory;
|
||||||
|
var ft = new FileTransfer();
|
||||||
|
ft.onprogress = function(progressEvent) {
|
||||||
|
if (progressEvent.lengthComputable) {
|
||||||
|
//更新下載中
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.update_downloading')+Math.floor(progressEvent.loaded / progressEvent.total * 100)+'%';
|
||||||
|
$rootScope.$apply();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ft.download(url, zipDistUrl+'//'+module_content.zip_name,
|
||||||
|
function(r) {
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.updating');//程式更新中...
|
||||||
|
//$rootScope.$apply();
|
||||||
|
ExtractZIP_Cordova(zipDistUrl, callback, errorback);
|
||||||
|
}, function(error) {
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.cant_download');//無法下載更新，請確認伺服器連線是否正常;
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(errorback)
|
||||||
|
errorback(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//App Android platform extract ZIP File
|
||||||
|
function ExtractZIP_Cordova(zipDistUrl, callback, errorback){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.updating');//程式更新中...
|
||||||
|
//$rootScope.$apply();
|
||||||
|
var dstDir = zipDistUrl + 'update//'+module_content.root_path;
|
||||||
|
zip.unzip(zipDistUrl + module_content.zip_name, dstDir,
|
||||||
|
function(result){
|
||||||
|
if(result==0){
|
||||||
|
clearUpdate(zipDistUrl, module_content.zip_name, function(){
|
||||||
|
if(callback)
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.zip_server_connect');//'更新檔解析失敗，請重新下載';
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(errorback)
|
||||||
|
errorback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function(progressEvent){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.updating') + Math.round((progressEvent.loaded / progressEvent.total) * 100)+'%';
|
||||||
|
//$rootScope.$apply();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Desktop platform download ZIP File and extract zip
|
||||||
|
function downloadZIP_electron(url, callback, errorback){
|
||||||
|
var data = {
|
||||||
|
url : url,
|
||||||
|
method : 'GET',
|
||||||
|
type:"application/octet-stream",
|
||||||
|
responseType: 'arraybuffer'
|
||||||
|
};
|
||||||
|
var request = nodeRequire('request');
|
||||||
|
var progress = nodeRequire('request-progress');
|
||||||
|
var fs = nodeRequire('fs');
|
||||||
|
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.updating');
|
||||||
|
//$rootScope.$apply();
|
||||||
|
var Zip = nodeRequire('adm-zip-electron');
|
||||||
|
var AppPath;
|
||||||
|
if(nodeRequire('electron')){
|
||||||
|
AppPath = nodeRequire('electron').remote.app.getAppPath()+'\\';
|
||||||
|
} else {
|
||||||
|
var nwDir = nodeRequire('path').dirname(process.execPath);
|
||||||
|
AppPath = nwDir+'\\package.nw\\';
|
||||||
|
}
|
||||||
|
|
||||||
|
var updateFile = AppPath + module_content.zip_name;//zip檔下載位置
|
||||||
|
var tempFile = fs.createWriteStream(updateFile);
|
||||||
|
tempFile.on('finish', function(){
|
||||||
|
tempFile.close(function(){
|
||||||
|
try{
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.updating');//程式更新中...
|
||||||
|
//$rootScope.$apply();
|
||||||
|
var zip = new Zip(updateFile);
|
||||||
|
zip.extractAllTo(AppPath+'www\\'+module_content.root_path+'\\', true);
|
||||||
|
clearUpdate(AppPath, module_content.zip_name, callback);
|
||||||
|
}catch(e){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.zip_cant_download')+'<br>'+e;//無法下載更新，更新用的檔案不存在，請確認伺服器連線資訊是否正確
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(errorback)
|
||||||
|
errorback(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var request = request(url, function(error, response, body){
|
||||||
|
if(error){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.zip_cant_download')+'<br>'+error;//無法下載更新，更新用的檔案不存在，請確認伺服器連線資訊是否正確
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(errorback)
|
||||||
|
errorback(error);
|
||||||
|
} else {
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.update_downloading')+'100%';
|
||||||
|
//$rootScope.$apply();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
request.pipe(tempFile);
|
||||||
|
progress(request, {throttle: 200})
|
||||||
|
.on('progress', function (state) {
|
||||||
|
//更新下載中
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.update_downloading')+
|
||||||
|
(Math.round(state.percent * 100))+'%';
|
||||||
|
$rootScope.$apply();
|
||||||
|
})
|
||||||
|
.on('error', function (err) {
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.zip_cant_download')+'<br>'+err;//無法下載更新，更新用的檔案不存在，請確認伺服器連線資訊是否正確
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(errorback)
|
||||||
|
errorback(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//delete sJDS\\update.zip file
|
||||||
|
function clearUpdate(url, fileName, feedback){
|
||||||
|
try{
|
||||||
|
window.resolveLocalFileSystemURL(url, function(dir) {
|
||||||
|
dir.getFile(fileName, {create:false}, function(fileEntry) {
|
||||||
|
fileEntry.remove(function(){
|
||||||
|
if(feedback)
|
||||||
|
feedback();
|
||||||
|
// The file has been removed succesfully
|
||||||
|
},function(error){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.temp_file_cant_dele');//暫存檔案刪除失敗
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(feedback)
|
||||||
|
feedback();
|
||||||
|
},function(){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('update.msg.temp_file_not_exist');//暫存檔案不存在
|
||||||
|
//$rootScope.$apply();
|
||||||
|
if(feedback)
|
||||||
|
feedback();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch(e){
|
||||||
|
nodeRequire('fs').unlink(url+'\\'+fileName, function(error){
|
||||||
|
if(feedback)
|
||||||
|
feedback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return $moduleInstaller;
|
||||||
|
}
|
||||||
|
];
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
})(window, window.angular);
|
||||||
31
SRC/iMES_PAD/JSplugins/ModuleInstaller/sJDSConfig.css
Normal file
31
SRC/iMES_PAD/JSplugins/ModuleInstaller/sJDSConfig.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.sJDSConfig-dialog{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .kmi-layout-main-content{
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .kmi-text-fields{
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .loading-msg{
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .kmi-text-fields--triangle{
|
||||||
|
border: 1px solid #1ab7cd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .kmi-text-fields--triangle .label>label:FIRST-CHILD{
|
||||||
|
background: #1ab7cd;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .kmi-text-fields--triangle .triangle{
|
||||||
|
border-color: transparent transparent transparent #1ab7cd;
|
||||||
|
}
|
||||||
|
.sJDSConfig-dialog .btn-content{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sJDSConfig-dialog .btn-content .kmi-button{
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
60
SRC/iMES_PAD/JSplugins/ModuleInstaller/sJDSConfig.tmp.html
Normal file
60
SRC/iMES_PAD/JSplugins/ModuleInstaller/sJDSConfig.tmp.html
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header sJDSConfig-dialog"style="background-color: #fafafa">
|
||||||
|
<!--
|
||||||
|
<div class="kmi-header-row">
|
||||||
|
<div class="header-title" ng-bind="dialog.title | translate"></div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<div class="kmi-layout-main-content">
|
||||||
|
<div class="kmi-layout-page">
|
||||||
|
<div class="loading-content" ng-hide="dialog.mode == 'setting'">
|
||||||
|
<div class="kmi-text-fields" style="height:60px;">
|
||||||
|
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
|
||||||
|
<div class="loading-msg" ng-bind="dialog.status.msg"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="config-content" ng-show="dialog.mode == 'setting'">
|
||||||
|
<div class="kmi-text-fields">
|
||||||
|
<div class="loading-msg" ng-bind="dialog.status.msg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="kmi-text-fields--triangle fields-ip">
|
||||||
|
<div class="label">
|
||||||
|
<label ng-bind="'sJDS.server.ip' | translate"></label>
|
||||||
|
<label class="triangle"></label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input ng-repeat="ip in dialog.serverIp track by $index" type="text" mdl-calculater="dialog.serverIp[$index]"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kmi-text-fields--triangle">
|
||||||
|
<div class="label">
|
||||||
|
<label ng-bind="'sJDS.server.port' | translate"></label>
|
||||||
|
<label class="triangle"></label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input type="text" mdl-calculater="dialog.port"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kmi-text-fields--triangle">
|
||||||
|
<div class="label">
|
||||||
|
<label ng-bind="'sJDS.server.name' | translate"></label>
|
||||||
|
<label class="triangle"></label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input type="text" ng-model="dialog.server_name"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-content" ng-show="dialog.mode == 'setting'">
|
||||||
|
<div class="kmi-button kmi-button-confirm"
|
||||||
|
ng-click="dialog.confirm()" style="width:100px">
|
||||||
|
<label ng-bind="'common.btn.confirm' | translate"></label>
|
||||||
|
<div class="kmi-can-click"></div>
|
||||||
|
</div>
|
||||||
|
<div class="kmi-button kmi-button-cancel" ng-click="dialog.cancel()" style="width:100px">
|
||||||
|
<label ng-bind="'common.btn.cancel' | translate"></label>
|
||||||
|
<div class="kmi-can-click"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
219
SRC/iMES_PAD/JSplugins/ModuleInstaller/sJDSInstallerService.js
Normal file
219
SRC/iMES_PAD/JSplugins/ModuleInstaller/sJDSInstallerService.js
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
define(['angularAMD'], function (angularAMD) {
|
||||||
|
angularAMD.service('sJDSInstallerService', ['$rootScope', '$filter', '$translate', 'config', '$http', '$mdDialog', '$moduleInstaller', '$css', '$timeout',
|
||||||
|
function($rootScope, $filter, $translate, config, $http, $mdDialog, $moduleInstaller, $css, $timeout){
|
||||||
|
var $sJDSInstallerService = this, configDialog;
|
||||||
|
function checkVersion(sJDSLoginInfo, callback, errorback){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('sJDS.msg.check_version');
|
||||||
|
send(sJDSLoginInfo, function(data){
|
||||||
|
if(data.url != ''){
|
||||||
|
//sJDSLoginInfo.version = data.version;
|
||||||
|
var temp_version = data.version;
|
||||||
|
var url = 'http://'+sJDSLoginInfo.ip+':'+sJDSLoginInfo.port+data.url;
|
||||||
|
if(callback)
|
||||||
|
callback(sJDSLoginInfo, url, temp_version);
|
||||||
|
} else {
|
||||||
|
entersJDS(sJDSLoginInfo);
|
||||||
|
}
|
||||||
|
}, errorback);
|
||||||
|
}
|
||||||
|
|
||||||
|
//20190718 modify by Dustdusk for M#:
|
||||||
|
function getsJDSInfo(callback){
|
||||||
|
var sJDSLoginInfo = {};
|
||||||
|
//20180420 modify by Dustdusk for M#45433:智派工的ip / port / 站台名稱 一律由SMES傳入
|
||||||
|
sJDSLoginInfo.ip = config.server.ip;
|
||||||
|
sJDSLoginInfo.port = config.server.port;
|
||||||
|
sJDSLoginInfo.name = 'sJDS_'+config.setting.environment;
|
||||||
|
|
||||||
|
sJDSLoginInfo.account = config.cache.account;
|
||||||
|
sJDSLoginInfo.user_name = config.cache.name;
|
||||||
|
sJDSLoginInfo.password = config.cache.password;
|
||||||
|
sJDSLoginInfo.session = config.mdssessionno;
|
||||||
|
sJDSLoginInfo.lang = $translate.use();
|
||||||
|
require(['text!sJDS/config/config.json'], function(sJDSConfig){
|
||||||
|
//找到，表示智派工已下載
|
||||||
|
try{
|
||||||
|
sJDSLoginInfo.version = JSON.parse(sJDSConfig).appVersion||'0.0.0.0';
|
||||||
|
}catch(e){
|
||||||
|
sJDSLoginInfo.version = '0.0.0.0';
|
||||||
|
}
|
||||||
|
if(typeof(callback) == 'function')
|
||||||
|
callback(sJDSLoginInfo);
|
||||||
|
}, function(e){
|
||||||
|
//找不到，表示未下載
|
||||||
|
sJDSLoginInfo.version = '0.0.0.0';
|
||||||
|
if(typeof(callback) == 'function')
|
||||||
|
callback(sJDSLoginInfo);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function entersJDS(sJDSLoginInfo, version){
|
||||||
|
if(version){
|
||||||
|
sJDSLoginInfo.version = version;
|
||||||
|
}
|
||||||
|
localStorage.setItem('sJDS_login', JSON.stringify(sJDSLoginInfo));
|
||||||
|
if(window.resolveLocalFileSystemURL){
|
||||||
|
window.resolveLocalFileSystemURL(cordova.file.dataDirectory+'update//sJDS',
|
||||||
|
function(updateFolder){
|
||||||
|
document.location.href = updateFolder.toURL() + '//index.html';
|
||||||
|
},
|
||||||
|
function(){
|
||||||
|
$sJDSInstallerService.showConfigDialog();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
document.location.href = 'sJDS/index.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function combineIP(array){
|
||||||
|
var totalip;
|
||||||
|
array.forEach(function(ipstring){
|
||||||
|
if(!totalip)
|
||||||
|
totalip = ipstring;
|
||||||
|
else
|
||||||
|
totalip += '.' +ipstring;
|
||||||
|
});
|
||||||
|
return totalip;
|
||||||
|
}
|
||||||
|
|
||||||
|
function doUpdate(sJDSLoginInfo, dialog){
|
||||||
|
$sJDSInstallerService.update(sJDSLoginInfo, function(sJDSLoginInfo, version){
|
||||||
|
$timeout(function(){
|
||||||
|
entersJDS(sJDSLoginInfo, version);
|
||||||
|
});
|
||||||
|
}, function(msg){
|
||||||
|
$timeout(function(){
|
||||||
|
dialog.mode = 'setting';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function send(sendData, callback, errorback){
|
||||||
|
var lang = {
|
||||||
|
'zh_CN':'Chs',
|
||||||
|
'zh_TW':'Chs',
|
||||||
|
'en_US':'Eng'
|
||||||
|
};
|
||||||
|
var data = {
|
||||||
|
url: 'http://' + sendData.ip + ':' + sendData.port + '/'+sendData.name+'/Api/Adapter',
|
||||||
|
method : 'POST',
|
||||||
|
headers : {
|
||||||
|
'Content-Type': 'application/json;charset=UTF-8'
|
||||||
|
},
|
||||||
|
data :{
|
||||||
|
uri:'IUpdateService',
|
||||||
|
method:'GetUpdate',
|
||||||
|
userNo:sendData.account,
|
||||||
|
applicationId:config.applicationId,
|
||||||
|
cookie:'',
|
||||||
|
session:sendData.session,
|
||||||
|
language:lang[sendData.lang],
|
||||||
|
data:sendData.version
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$http(data).success(function(data, status, headers) {
|
||||||
|
$rootScope.hideLoading();
|
||||||
|
if(data.success){
|
||||||
|
callback(data.result);
|
||||||
|
} else {
|
||||||
|
//$rootScope.showAlert(data.message, errorback);
|
||||||
|
$moduleInstaller.status.msg = data.message;
|
||||||
|
if(errorback)
|
||||||
|
errorback();
|
||||||
|
}
|
||||||
|
}).error(function(respose,status_code,c,d){
|
||||||
|
$rootScope.hideLoading();
|
||||||
|
$moduleInstaller.status.msg = status_code;
|
||||||
|
if(errorback)
|
||||||
|
errorback();
|
||||||
|
//$rootScope.showAlert(respose, errorback);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$sJDSInstallerService.update = function(sJDSLoginInfo, callback, errorback){
|
||||||
|
checkVersion(sJDSLoginInfo,
|
||||||
|
function(sJDSLoginInfo, url, version){
|
||||||
|
$moduleInstaller.update({
|
||||||
|
url:url,
|
||||||
|
root_path:'sJDS',
|
||||||
|
callback:function(){
|
||||||
|
if(callback){
|
||||||
|
callback(sJDSLoginInfo, version);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
errorback:function(){
|
||||||
|
if(errorback){
|
||||||
|
errorback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, function(){
|
||||||
|
if(errorback){
|
||||||
|
errorback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
$sJDSInstallerService.back = function(){
|
||||||
|
localStorage.setItem('SMES_login', localStorage.getItem('sJDS_login'));
|
||||||
|
if(window.resolveLocalFileSystemURL){
|
||||||
|
window.resolveLocalFileSystemURL(cordova.file.dataDirectory+'update', function(updateFolder){
|
||||||
|
document.location.href = updateFolder.toURL() + '/index.html';
|
||||||
|
}, function(){
|
||||||
|
document.location.href = '../index.html';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
document.location.href = '../index.html';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$sJDSInstallerService.open = function(content){
|
||||||
|
if(content.mode == 'setting'){
|
||||||
|
$moduleInstaller.status.msg = $filter('translate')('sJDS.msg.input_server_info');
|
||||||
|
}
|
||||||
|
if(content.msg){
|
||||||
|
$moduleInstaller.status.msg = content.msg;
|
||||||
|
}
|
||||||
|
getsJDSInfo(function(sJDSLoginInfo){
|
||||||
|
$mdDialog.dialog(
|
||||||
|
'JSplugins/ModuleInstaller/sJDSConfig.tmp.html',
|
||||||
|
function(dialog){
|
||||||
|
configDialog = dialog;
|
||||||
|
return {
|
||||||
|
mode:content.mode,
|
||||||
|
serverIp: sJDSLoginInfo.ip.split('.'),
|
||||||
|
port: sJDSLoginInfo.port,
|
||||||
|
server_name: sJDSLoginInfo.name,
|
||||||
|
status:$moduleInstaller.status,
|
||||||
|
beforeShown: function(){
|
||||||
|
$css.add('JSplugins/ModuleInstaller/sJDSConfig.css');
|
||||||
|
componentHandler.upgradeAllRegistered();
|
||||||
|
if(content.mode != 'setting'){
|
||||||
|
$timeout(function(){
|
||||||
|
doUpdate(sJDSLoginInfo, dialog);
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
confirm:function(){
|
||||||
|
dialog.mode = undefined;
|
||||||
|
sJDSLoginInfo.ip = combineIP(dialog.serverIp);
|
||||||
|
sJDSLoginInfo.port = dialog.port;
|
||||||
|
sJDSLoginInfo.name = dialog.server_name;
|
||||||
|
//localStorage.setItem('sJDS_login', JSON.stringify(sJDSLoginInfo));
|
||||||
|
$timeout(function(){
|
||||||
|
doUpdate(sJDSLoginInfo, dialog);
|
||||||
|
}, 200);
|
||||||
|
},
|
||||||
|
cancel:function(){
|
||||||
|
$css.remove('JSplugins/ModuleInstaller/sJDSConfig.css');
|
||||||
|
dialog.hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
});
|
||||||
4139
SRC/iMES_PAD/JSplugins/angular-animate/angular-animate.js
vendored
Normal file
4139
SRC/iMES_PAD/JSplugins/angular-animate/angular-animate.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
57
SRC/iMES_PAD/JSplugins/angular-animate/angular-animate.min.js
vendored
Normal file
57
SRC/iMES_PAD/JSplugins/angular-animate/angular-animate.min.js
vendored
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
/*
|
||||||
|
AngularJS v1.5.8
|
||||||
|
(c) 2010-2016 Google, Inc. http://angularjs.org
|
||||||
|
License: MIT
|
||||||
|
*/
|
||||||
|
(function(R,B){'use strict';function Da(a,b,c){if(!a)throw Ma("areq",b||"?",c||"required");return a}function Ea(a,b){if(!a&&!b)return"";if(!a)return b;if(!b)return a;Y(a)&&(a=a.join(" "));Y(b)&&(b=b.join(" "));return a+" "+b}function Na(a){var b={};a&&(a.to||a.from)&&(b.to=a.to,b.from=a.from);return b}function Z(a,b,c){var d="";a=Y(a)?a:a&&G(a)&&a.length?a.split(/\s+/):[];s(a,function(a,l){a&&0<a.length&&(d+=0<l?" ":"",d+=c?b+a:a+b)});return d}function Oa(a){if(a instanceof F)switch(a.length){case 0:return a;
|
||||||
|
case 1:if(1===a[0].nodeType)return a;break;default:return F(ta(a))}if(1===a.nodeType)return F(a)}function ta(a){if(!a[0])return a;for(var b=0;b<a.length;b++){var c=a[b];if(1==c.nodeType)return c}}function Pa(a,b,c){s(b,function(b){a.addClass(b,c)})}function Qa(a,b,c){s(b,function(b){a.removeClass(b,c)})}function V(a){return function(b,c){c.addClass&&(Pa(a,b,c.addClass),c.addClass=null);c.removeClass&&(Qa(a,b,c.removeClass),c.removeClass=null)}}function oa(a){a=a||{};if(!a.$$prepared){var b=a.domOperation||
|
||||||
|
P;a.domOperation=function(){a.$$domOperationFired=!0;b();b=P};a.$$prepared=!0}return a}function ha(a,b){Fa(a,b);Ga(a,b)}function Fa(a,b){b.from&&(a.css(b.from),b.from=null)}function Ga(a,b){b.to&&(a.css(b.to),b.to=null)}function W(a,b,c){var d=b.options||{};c=c.options||{};var e=(d.addClass||"")+" "+(c.addClass||""),l=(d.removeClass||"")+" "+(c.removeClass||"");a=Ra(a.attr("class"),e,l);c.preparationClasses&&(d.preparationClasses=$(c.preparationClasses,d.preparationClasses),delete c.preparationClasses);
|
||||||
|
e=d.domOperation!==P?d.domOperation:null;ua(d,c);e&&(d.domOperation=e);d.addClass=a.addClass?a.addClass:null;d.removeClass=a.removeClass?a.removeClass:null;b.addClass=d.addClass;b.removeClass=d.removeClass;return d}function Ra(a,b,c){function d(a){G(a)&&(a=a.split(" "));var b={};s(a,function(a){a.length&&(b[a]=!0)});return b}var e={};a=d(a);b=d(b);s(b,function(a,b){e[b]=1});c=d(c);s(c,function(a,b){e[b]=1===e[b]?null:-1});var l={addClass:"",removeClass:""};s(e,function(b,c){var d,e;1===b?(d="addClass",
|
||||||
|
e=!a[c]||a[c+"-remove"]):-1===b&&(d="removeClass",e=a[c]||a[c+"-add"]);e&&(l[d].length&&(l[d]+=" "),l[d]+=c)});return l}function y(a){return a instanceof F?a[0]:a}function Sa(a,b,c){var d="";b&&(d=Z(b,"ng-",!0));c.addClass&&(d=$(d,Z(c.addClass,"-add")));c.removeClass&&(d=$(d,Z(c.removeClass,"-remove")));d.length&&(c.preparationClasses=d,a.addClass(d))}function pa(a,b){var c=b?"-"+b+"s":"";la(a,[ma,c]);return[ma,c]}function va(a,b){var c=b?"paused":"",d=aa+"PlayState";la(a,[d,c]);return[d,c]}function la(a,
|
||||||
|
b){a.style[b[0]]=b[1]}function $(a,b){return a?b?a+" "+b:a:b}function Ha(a,b,c){var d=Object.create(null),e=a.getComputedStyle(b)||{};s(c,function(a,b){var c=e[a];if(c){var g=c.charAt(0);if("-"===g||"+"===g||0<=g)c=Ta(c);0===c&&(c=null);d[b]=c}});return d}function Ta(a){var b=0;a=a.split(/\s*,\s*/);s(a,function(a){"s"==a.charAt(a.length-1)&&(a=a.substring(0,a.length-1));a=parseFloat(a)||0;b=b?Math.max(a,b):a});return b}function wa(a){return 0===a||null!=a}function Ia(a,b){var c=S,d=a+"s";b?c+="Duration":
|
||||||
|
d+=" linear all";return[c,d]}function Ja(){var a=Object.create(null);return{flush:function(){a=Object.create(null)},count:function(b){return(b=a[b])?b.total:0},get:function(b){return(b=a[b])&&b.value},put:function(b,c){a[b]?a[b].total++:a[b]={total:1,value:c}}}}function Ka(a,b,c){s(c,function(c){a[c]=xa(a[c])?a[c]:b.style.getPropertyValue(c)})}var S,ya,aa,za;void 0===R.ontransitionend&&void 0!==R.onwebkittransitionend?(S="WebkitTransition",ya="webkitTransitionEnd transitionend"):(S="transition",ya=
|
||||||
|
"transitionend");void 0===R.onanimationend&&void 0!==R.onwebkitanimationend?(aa="WebkitAnimation",za="webkitAnimationEnd animationend"):(aa="animation",za="animationend");var qa=aa+"Delay",Aa=aa+"Duration",ma=S+"Delay",La=S+"Duration",Ma=B.$$minErr("ng"),Ua={transitionDuration:La,transitionDelay:ma,transitionProperty:S+"Property",animationDuration:Aa,animationDelay:qa,animationIterationCount:aa+"IterationCount"},Va={transitionDuration:La,transitionDelay:ma,animationDuration:Aa,animationDelay:qa},
|
||||||
|
Ba,ua,s,Y,xa,ea,Ca,ba,G,J,F,P;B.module("ngAnimate",[],function(){P=B.noop;Ba=B.copy;ua=B.extend;F=B.element;s=B.forEach;Y=B.isArray;G=B.isString;ba=B.isObject;J=B.isUndefined;xa=B.isDefined;Ca=B.isFunction;ea=B.isElement}).directive("ngAnimateSwap",["$animate","$rootScope",function(a,b){return{restrict:"A",transclude:"element",terminal:!0,priority:600,link:function(b,d,e,l,n){var I,g;b.$watchCollection(e.ngAnimateSwap||e["for"],function(e){I&&a.leave(I);g&&(g.$destroy(),g=null);if(e||0===e)g=b.$new(),
|
||||||
|
n(g,function(b){I=b;a.enter(b,null,d)})})}}}]).directive("ngAnimateChildren",["$interpolate",function(a){return{link:function(b,c,d){function e(a){c.data("$$ngAnimateChildren","on"===a||"true"===a)}var l=d.ngAnimateChildren;G(l)&&0===l.length?c.data("$$ngAnimateChildren",!0):(e(a(l)(b)),d.$observe("ngAnimateChildren",e))}}}]).factory("$$rAFScheduler",["$$rAF",function(a){function b(a){d=d.concat(a);c()}function c(){if(d.length){for(var b=d.shift(),n=0;n<b.length;n++)b[n]();e||a(function(){e||c()})}}
|
||||||
|
var d,e;d=b.queue=[];b.waitUntilQuiet=function(b){e&&e();e=a(function(){e=null;b();c()})};return b}]).provider("$$animateQueue",["$animateProvider",function(a){function b(a){if(!a)return null;a=a.split(" ");var b=Object.create(null);s(a,function(a){b[a]=!0});return b}function c(a,c){if(a&&c){var d=b(c);return a.split(" ").some(function(a){return d[a]})}}function d(a,b,c,d){return l[a].some(function(a){return a(b,c,d)})}function e(a,b){var c=0<(a.addClass||"").length,d=0<(a.removeClass||"").length;
|
||||||
|
return b?c&&d:c||d}var l=this.rules={skip:[],cancel:[],join:[]};l.join.push(function(a,b,c){return!b.structural&&e(b)});l.skip.push(function(a,b,c){return!b.structural&&!e(b)});l.skip.push(function(a,b,c){return"leave"==c.event&&b.structural});l.skip.push(function(a,b,c){return c.structural&&2===c.state&&!b.structural});l.cancel.push(function(a,b,c){return c.structural&&b.structural});l.cancel.push(function(a,b,c){return 2===c.state&&b.structural});l.cancel.push(function(a,b,d){if(d.structural)return!1;
|
||||||
|
a=b.addClass;b=b.removeClass;var e=d.addClass;d=d.removeClass;return J(a)&&J(b)||J(e)&&J(d)?!1:c(a,d)||c(b,e)});this.$get=["$$rAF","$rootScope","$rootElement","$document","$$HashMap","$$animation","$$AnimateRunner","$templateRequest","$$jqLite","$$forceReflow",function(b,c,g,l,C,Wa,Q,t,H,T){function O(){var a=!1;return function(b){a?b():c.$$postDigest(function(){a=!0;b()})}}function x(a,b,c){var f=y(b),d=y(a),N=[];(a=h[c])&&s(a,function(a){w.call(a.node,f)?N.push(a.callback):"leave"===c&&w.call(a.node,
|
||||||
|
d)&&N.push(a.callback)});return N}function r(a,b,c){var f=ta(b);return a.filter(function(a){return!(a.node===f&&(!c||a.callback===c))})}function p(a,h,v){function r(c,f,d,h){sa(function(){var c=x(T,a,f);c.length?b(function(){s(c,function(b){b(a,d,h)});"close"!==d||a[0].parentNode||ra.off(a)}):"close"!==d||a[0].parentNode||ra.off(a)});c.progress(f,d,h)}function k(b){var c=a,f=m;f.preparationClasses&&(c.removeClass(f.preparationClasses),f.preparationClasses=null);f.activeClasses&&(c.removeClass(f.activeClasses),
|
||||||
|
f.activeClasses=null);E(a,m);ha(a,m);m.domOperation();A.complete(!b)}var m=Ba(v),p,T;if(a=Oa(a))p=y(a),T=a.parent();var m=oa(m),A=new Q,sa=O();Y(m.addClass)&&(m.addClass=m.addClass.join(" "));m.addClass&&!G(m.addClass)&&(m.addClass=null);Y(m.removeClass)&&(m.removeClass=m.removeClass.join(" "));m.removeClass&&!G(m.removeClass)&&(m.removeClass=null);m.from&&!ba(m.from)&&(m.from=null);m.to&&!ba(m.to)&&(m.to=null);if(!p)return k(),A;v=[p.className,m.addClass,m.removeClass].join(" ");if(!Xa(v))return k(),
|
||||||
|
A;var g=0<=["enter","move","leave"].indexOf(h),w=l[0].hidden,t=!f||w||N.get(p);v=!t&&z.get(p)||{};var H=!!v.state;t||H&&1==v.state||(t=!M(a,T,h));if(t)return w&&r(A,h,"start"),k(),w&&r(A,h,"close"),A;g&&K(a);w={structural:g,element:a,event:h,addClass:m.addClass,removeClass:m.removeClass,close:k,options:m,runner:A};if(H){if(d("skip",a,w,v)){if(2===v.state)return k(),A;W(a,v,w);return v.runner}if(d("cancel",a,w,v))if(2===v.state)v.runner.end();else if(v.structural)v.close();else return W(a,v,w),v.runner;
|
||||||
|
else if(d("join",a,w,v))if(2===v.state)W(a,w,{});else return Sa(a,g?h:null,m),h=w.event=v.event,m=W(a,v,w),v.runner}else W(a,w,{});(H=w.structural)||(H="animate"===w.event&&0<Object.keys(w.options.to||{}).length||e(w));if(!H)return k(),ka(a),A;var C=(v.counter||0)+1;w.counter=C;L(a,1,w);c.$$postDigest(function(){var b=z.get(p),c=!b,b=b||{},f=0<(a.parent()||[]).length&&("animate"===b.event||b.structural||e(b));if(c||b.counter!==C||!f){c&&(E(a,m),ha(a,m));if(c||g&&b.event!==h)m.domOperation(),A.end();
|
||||||
|
f||ka(a)}else h=!b.structural&&e(b,!0)?"setClass":b.event,L(a,2),b=Wa(a,h,b.options),A.setHost(b),r(A,h,"start",{}),b.done(function(b){k(!b);(b=z.get(p))&&b.counter===C&&ka(y(a));r(A,h,"close",{})})});return A}function K(a){a=y(a).querySelectorAll("[data-ng-animate]");s(a,function(a){var b=parseInt(a.getAttribute("data-ng-animate")),c=z.get(a);if(c)switch(b){case 2:c.runner.end();case 1:z.remove(a)}})}function ka(a){a=y(a);a.removeAttribute("data-ng-animate");z.remove(a)}function k(a,b){return y(a)===
|
||||||
|
y(b)}function M(a,b,c){c=F(l[0].body);var f=k(a,c)||"HTML"===a[0].nodeName,d=k(a,g),h=!1,r,e=N.get(y(a));(a=F.data(a[0],"$ngAnimatePin"))&&(b=a);for(b=y(b);b;){d||(d=k(b,g));if(1!==b.nodeType)break;a=z.get(b)||{};if(!h){var p=N.get(b);if(!0===p&&!1!==e){e=!0;break}else!1===p&&(e=!1);h=a.structural}if(J(r)||!0===r)a=F.data(b,"$$ngAnimateChildren"),xa(a)&&(r=a);if(h&&!1===r)break;f||(f=k(b,c));if(f&&d)break;if(!d&&(a=F.data(b,"$ngAnimatePin"))){b=y(a);continue}b=b.parentNode}return(!h||r)&&!0!==e&&
|
||||||
|
d&&f}function L(a,b,c){c=c||{};c.state=b;a=y(a);a.setAttribute("data-ng-animate",b);c=(b=z.get(a))?ua(b,c):c;z.put(a,c)}var z=new C,N=new C,f=null,A=c.$watch(function(){return 0===t.totalPendingRequests},function(a){a&&(A(),c.$$postDigest(function(){c.$$postDigest(function(){null===f&&(f=!0)})}))}),h=Object.create(null),sa=a.classNameFilter(),Xa=sa?function(a){return sa.test(a)}:function(){return!0},E=V(H),w=R.Node.prototype.contains||function(a){return this===a||!!(this.compareDocumentPosition(a)&
|
||||||
|
16)},ra={on:function(a,b,c){var f=ta(b);h[a]=h[a]||[];h[a].push({node:f,callback:c});F(b).on("$destroy",function(){z.get(f)||ra.off(a,b,c)})},off:function(a,b,c){if(1!==arguments.length||G(arguments[0])){var f=h[a];f&&(h[a]=1===arguments.length?null:r(f,b,c))}else for(f in b=arguments[0],h)h[f]=r(h[f],b)},pin:function(a,b){Da(ea(a),"element","not an element");Da(ea(b),"parentElement","not an element");a.data("$ngAnimatePin",b)},push:function(a,b,c,f){c=c||{};c.domOperation=f;return p(a,b,c)},enabled:function(a,
|
||||||
|
b){var c=arguments.length;if(0===c)b=!!f;else if(ea(a)){var d=y(a);1===c?b=!N.get(d):N.put(d,!b)}else b=f=!!a;return b}};return ra}]}]).provider("$$animation",["$animateProvider",function(a){var b=this.drivers=[];this.$get=["$$jqLite","$rootScope","$injector","$$AnimateRunner","$$HashMap","$$rAFScheduler",function(a,d,e,l,n,I){function g(a){function b(a){if(a.processed)return a;a.processed=!0;var d=a.domNode,p=d.parentNode;e.put(d,a);for(var K;p;){if(K=e.get(p)){K.processed||(K=b(K));break}p=p.parentNode}(K||
|
||||||
|
c).children.push(a);return a}var c={children:[]},d,e=new n;for(d=0;d<a.length;d++){var g=a[d];e.put(g.domNode,a[d]={domNode:g.domNode,fn:g.fn,children:[]})}for(d=0;d<a.length;d++)b(a[d]);return function(a){var b=[],c=[],d;for(d=0;d<a.children.length;d++)c.push(a.children[d]);a=c.length;var e=0,k=[];for(d=0;d<c.length;d++){var g=c[d];0>=a&&(a=e,e=0,b.push(k),k=[]);k.push(g.fn);g.children.forEach(function(a){e++;c.push(a)});a--}k.length&&b.push(k);return b}(c)}var u=[],C=V(a);return function(n,Q,t){function H(a){a=
|
||||||
|
a.hasAttribute("ng-animate-ref")?[a]:a.querySelectorAll("[ng-animate-ref]");var b=[];s(a,function(a){var c=a.getAttribute("ng-animate-ref");c&&c.length&&b.push(a)});return b}function T(a){var b=[],c={};s(a,function(a,d){var h=y(a.element),e=0<=["enter","move"].indexOf(a.event),h=a.structural?H(h):[];if(h.length){var k=e?"to":"from";s(h,function(a){var b=a.getAttribute("ng-animate-ref");c[b]=c[b]||{};c[b][k]={animationID:d,element:F(a)}})}else b.push(a)});var d={},e={};s(c,function(c,k){var r=c.from,
|
||||||
|
p=c.to;if(r&&p){var z=a[r.animationID],g=a[p.animationID],A=r.animationID.toString();if(!e[A]){var n=e[A]={structural:!0,beforeStart:function(){z.beforeStart();g.beforeStart()},close:function(){z.close();g.close()},classes:O(z.classes,g.classes),from:z,to:g,anchors:[]};n.classes.length?b.push(n):(b.push(z),b.push(g))}e[A].anchors.push({out:r.element,"in":p.element})}else r=r?r.animationID:p.animationID,p=r.toString(),d[p]||(d[p]=!0,b.push(a[r]))});return b}function O(a,b){a=a.split(" ");b=b.split(" ");
|
||||||
|
for(var c=[],d=0;d<a.length;d++){var e=a[d];if("ng-"!==e.substring(0,3))for(var r=0;r<b.length;r++)if(e===b[r]){c.push(e);break}}return c.join(" ")}function x(a){for(var c=b.length-1;0<=c;c--){var d=e.get(b[c])(a);if(d)return d}}function r(a,b){function c(a){(a=a.data("$$animationRunner"))&&a.setHost(b)}a.from&&a.to?(c(a.from.element),c(a.to.element)):c(a.element)}function p(){var a=n.data("$$animationRunner");!a||"leave"===Q&&t.$$domOperationFired||a.end()}function K(b){n.off("$destroy",p);n.removeData("$$animationRunner");
|
||||||
|
C(n,t);ha(n,t);t.domOperation();L&&a.removeClass(n,L);n.removeClass("ng-animate");k.complete(!b)}t=oa(t);var ka=0<=["enter","move","leave"].indexOf(Q),k=new l({end:function(){K()},cancel:function(){K(!0)}});if(!b.length)return K(),k;n.data("$$animationRunner",k);var M=Ea(n.attr("class"),Ea(t.addClass,t.removeClass)),L=t.tempClasses;L&&(M+=" "+L,t.tempClasses=null);var z;ka&&(z="ng-"+Q+"-prepare",a.addClass(n,z));u.push({element:n,classes:M,event:Q,structural:ka,options:t,beforeStart:function(){n.addClass("ng-animate");
|
||||||
|
L&&a.addClass(n,L);z&&(a.removeClass(n,z),z=null)},close:K});n.on("$destroy",p);if(1<u.length)return k;d.$$postDigest(function(){var a=[];s(u,function(b){b.element.data("$$animationRunner")?a.push(b):b.close()});u.length=0;var b=T(a),c=[];s(b,function(a){c.push({domNode:y(a.from?a.from.element:a.element),fn:function(){a.beforeStart();var b,c=a.close;if((a.anchors?a.from.element||a.to.element:a.element).data("$$animationRunner")){var d=x(a);d&&(b=d.start)}b?(b=b(),b.done(function(a){c(!a)}),r(a,b)):
|
||||||
|
c()}})});I(g(c))});return k}}]}]).provider("$animateCss",["$animateProvider",function(a){var b=Ja(),c=Ja();this.$get=["$window","$$jqLite","$$AnimateRunner","$timeout","$$forceReflow","$sniffer","$$rAFScheduler","$$animateQueue",function(a,e,l,n,I,g,u,C){function B(a,b){var c=a.parentNode;return(c.$$ngAnimateParentKey||(c.$$ngAnimateParentKey=++O))+"-"+a.getAttribute("class")+"-"+b}function Q(r,p,g,n){var k;0<b.count(g)&&(k=c.get(g),k||(p=Z(p,"-stagger"),e.addClass(r,p),k=Ha(a,r,n),k.animationDuration=
|
||||||
|
Math.max(k.animationDuration,0),k.transitionDuration=Math.max(k.transitionDuration,0),e.removeClass(r,p),c.put(g,k)));return k||{}}function t(a){x.push(a);u.waitUntilQuiet(function(){b.flush();c.flush();for(var a=I(),d=0;d<x.length;d++)x[d](a);x.length=0})}function H(c,e,g){e=b.get(g);e||(e=Ha(a,c,Ua),"infinite"===e.animationIterationCount&&(e.animationIterationCount=1));b.put(g,e);c=e;g=c.animationDelay;e=c.transitionDelay;c.maxDelay=g&&e?Math.max(g,e):g||e;c.maxDuration=Math.max(c.animationDuration*
|
||||||
|
c.animationIterationCount,c.transitionDuration);return c}var T=V(e),O=0,x=[];return function(a,c){function d(){k()}function u(){k(!0)}function k(b){if(!(w||F&&O)){w=!0;O=!1;f.$$skipPreparationClasses||e.removeClass(a,ga);e.removeClass(a,ea);va(h,!1);pa(h,!1);s(x,function(a){h.style[a[0]]=""});T(a,f);ha(a,f);Object.keys(A).length&&s(A,function(a,b){a?h.style.setProperty(b,a):h.style.removeProperty(b)});if(f.onDone)f.onDone();fa&&fa.length&&a.off(fa.join(" "),z);var c=a.data("$$animateCss");c&&(n.cancel(c[0].timer),
|
||||||
|
a.removeData("$$animateCss"));G&&G.complete(!b)}}function M(a){q.blockTransition&&pa(h,a);q.blockKeyframeAnimation&&va(h,!!a)}function L(){G=new l({end:d,cancel:u});t(P);k();return{$$willAnimate:!1,start:function(){return G},end:d}}function z(a){a.stopPropagation();var b=a.originalEvent||a;a=b.$manualTimeStamp||Date.now();b=parseFloat(b.elapsedTime.toFixed(3));Math.max(a-W,0)>=R&&b>=m&&(F=!0,k())}function N(){function b(){if(!w){M(!1);s(x,function(a){h.style[a[0]]=a[1]});T(a,f);e.addClass(a,ea);if(q.recalculateTimingStyles){na=
|
||||||
|
h.className+" "+ga;ia=B(h,na);D=H(h,na,ia);ca=D.maxDelay;J=Math.max(ca,0);m=D.maxDuration;if(0===m){k();return}q.hasTransitions=0<D.transitionDuration;q.hasAnimations=0<D.animationDuration}q.applyAnimationDelay&&(ca="boolean"!==typeof f.delay&&wa(f.delay)?parseFloat(f.delay):ca,J=Math.max(ca,0),D.animationDelay=ca,da=[qa,ca+"s"],x.push(da),h.style[da[0]]=da[1]);R=1E3*J;V=1E3*m;if(f.easing){var d,g=f.easing;q.hasTransitions&&(d=S+"TimingFunction",x.push([d,g]),h.style[d]=g);q.hasAnimations&&(d=aa+
|
||||||
|
"TimingFunction",x.push([d,g]),h.style[d]=g)}D.transitionDuration&&fa.push(ya);D.animationDuration&&fa.push(za);W=Date.now();var p=R+1.5*V;d=W+p;var g=a.data("$$animateCss")||[],N=!0;if(g.length){var l=g[0];(N=d>l.expectedEndTime)?n.cancel(l.timer):g.push(k)}N&&(p=n(c,p,!1),g[0]={timer:p,expectedEndTime:d},g.push(k),a.data("$$animateCss",g));if(fa.length)a.on(fa.join(" "),z);f.to&&(f.cleanupStyles&&Ka(A,h,Object.keys(f.to)),Ga(a,f))}}function c(){var b=a.data("$$animateCss");if(b){for(var d=1;d<b.length;d++)b[d]();
|
||||||
|
a.removeData("$$animateCss")}}if(!w)if(h.parentNode){var d=function(a){if(F)O&&a&&(O=!1,k());else if(O=!a,D.animationDuration)if(a=va(h,O),O)x.push(a);else{var b=x,c=b.indexOf(a);0<=a&&b.splice(c,1)}},g=0<ba&&(D.transitionDuration&&0===X.transitionDuration||D.animationDuration&&0===X.animationDuration)&&Math.max(X.animationDelay,X.transitionDelay);g?n(b,Math.floor(g*ba*1E3),!1):b();v.resume=function(){d(!0)};v.pause=function(){d(!1)}}else k()}var f=c||{};f.$$prepared||(f=oa(Ba(f)));var A={},h=y(a);
|
||||||
|
if(!h||!h.parentNode||!C.enabled())return L();var x=[],I=a.attr("class"),E=Na(f),w,O,F,G,v,J,R,m,V,W,fa=[];if(0===f.duration||!g.animations&&!g.transitions)return L();var ja=f.event&&Y(f.event)?f.event.join(" "):f.event,$="",U="";ja&&f.structural?$=Z(ja,"ng-",!0):ja&&($=ja);f.addClass&&(U+=Z(f.addClass,"-add"));f.removeClass&&(U.length&&(U+=" "),U+=Z(f.removeClass,"-remove"));f.applyClassesEarly&&U.length&&T(a,f);var ga=[$,U].join(" ").trim(),na=I+" "+ga,ea=Z(ga,"-active"),I=E.to&&0<Object.keys(E.to).length;
|
||||||
|
if(!(0<(f.keyframeStyle||"").length||I||ga))return L();var ia,X;0<f.stagger?(E=parseFloat(f.stagger),X={transitionDelay:E,animationDelay:E,transitionDuration:0,animationDuration:0}):(ia=B(h,na),X=Q(h,ga,ia,Va));f.$$skipPreparationClasses||e.addClass(a,ga);f.transitionStyle&&(E=[S,f.transitionStyle],la(h,E),x.push(E));0<=f.duration&&(E=0<h.style[S].length,E=Ia(f.duration,E),la(h,E),x.push(E));f.keyframeStyle&&(E=[aa,f.keyframeStyle],la(h,E),x.push(E));var ba=X?0<=f.staggerIndex?f.staggerIndex:b.count(ia):
|
||||||
|
0;(ja=0===ba)&&!f.skipBlocking&&pa(h,9999);var D=H(h,na,ia),ca=D.maxDelay;J=Math.max(ca,0);m=D.maxDuration;var q={};q.hasTransitions=0<D.transitionDuration;q.hasAnimations=0<D.animationDuration;q.hasTransitionAll=q.hasTransitions&&"all"==D.transitionProperty;q.applyTransitionDuration=I&&(q.hasTransitions&&!q.hasTransitionAll||q.hasAnimations&&!q.hasTransitions);q.applyAnimationDuration=f.duration&&q.hasAnimations;q.applyTransitionDelay=wa(f.delay)&&(q.applyTransitionDuration||q.hasTransitions);q.applyAnimationDelay=
|
||||||
|
wa(f.delay)&&q.hasAnimations;q.recalculateTimingStyles=0<U.length;if(q.applyTransitionDuration||q.applyAnimationDuration)m=f.duration?parseFloat(f.duration):m,q.applyTransitionDuration&&(q.hasTransitions=!0,D.transitionDuration=m,E=0<h.style[S+"Property"].length,x.push(Ia(m,E))),q.applyAnimationDuration&&(q.hasAnimations=!0,D.animationDuration=m,x.push([Aa,m+"s"]));if(0===m&&!q.recalculateTimingStyles)return L();if(null!=f.delay){var da;"boolean"!==typeof f.delay&&(da=parseFloat(f.delay),J=Math.max(da,
|
||||||
|
0));q.applyTransitionDelay&&x.push([ma,da+"s"]);q.applyAnimationDelay&&x.push([qa,da+"s"])}null==f.duration&&0<D.transitionDuration&&(q.recalculateTimingStyles=q.recalculateTimingStyles||ja);R=1E3*J;V=1E3*m;f.skipBlocking||(q.blockTransition=0<D.transitionDuration,q.blockKeyframeAnimation=0<D.animationDuration&&0<X.animationDelay&&0===X.animationDuration);f.from&&(f.cleanupStyles&&Ka(A,h,Object.keys(f.from)),Fa(a,f));q.blockTransition||q.blockKeyframeAnimation?M(m):f.skipBlocking||pa(h,!1);return{$$willAnimate:!0,
|
||||||
|
end:d,start:function(){if(!w)return v={end:d,cancel:u,resume:null,pause:null},G=new l(v),t(N),G}}}}]}]).provider("$$animateCssDriver",["$$animationProvider",function(a){a.drivers.push("$$animateCssDriver");this.$get=["$animateCss","$rootScope","$$AnimateRunner","$rootElement","$sniffer","$$jqLite","$document",function(a,c,d,e,l,n,I){function g(a){return a.replace(/\bng-\S+\b/g,"")}function u(a,b){G(a)&&(a=a.split(" "));G(b)&&(b=b.split(" "));return a.filter(function(a){return-1===b.indexOf(a)}).join(" ")}
|
||||||
|
function C(c,e,n){function l(a){var b={},c=y(a).getBoundingClientRect();s(["width","height","top","left"],function(a){var d=c[a];switch(a){case "top":d+=t.scrollTop;break;case "left":d+=t.scrollLeft}b[a]=Math.floor(d)+"px"});return b}function p(){var c=g(n.attr("class")||""),d=u(c,k),c=u(k,c),d=a(C,{to:l(n),addClass:"ng-anchor-in "+d,removeClass:"ng-anchor-out "+c,delay:!0});return d.$$willAnimate?d:null}function I(){C.remove();e.removeClass("ng-animate-shim");n.removeClass("ng-animate-shim")}var C=
|
||||||
|
F(y(e).cloneNode(!0)),k=g(C.attr("class")||"");e.addClass("ng-animate-shim");n.addClass("ng-animate-shim");C.addClass("ng-anchor");H.append(C);var M;c=function(){var c=a(C,{addClass:"ng-anchor-out",delay:!0,from:l(e)});return c.$$willAnimate?c:null}();if(!c&&(M=p(),!M))return I();var L=c||M;return{start:function(){function a(){c&&c.end()}var b,c=L.start();c.done(function(){c=null;if(!M&&(M=p()))return c=M.start(),c.done(function(){c=null;I();b.complete()}),c;I();b.complete()});return b=new d({end:a,
|
||||||
|
cancel:a})}}}function B(a,b,c,e){var g=Q(a,P),n=Q(b,P),l=[];s(e,function(a){(a=C(c,a.out,a["in"]))&&l.push(a)});if(g||n||0!==l.length)return{start:function(){function a(){s(b,function(a){a.end()})}var b=[];g&&b.push(g.start());n&&b.push(n.start());s(l,function(a){b.push(a.start())});var c=new d({end:a,cancel:a});d.all(b,function(a){c.complete(a)});return c}}}function Q(c){var d=c.element,e=c.options||{};c.structural&&(e.event=c.event,e.structural=!0,e.applyClassesEarly=!0,"leave"===c.event&&(e.onDone=
|
||||||
|
e.domOperation));e.preparationClasses&&(e.event=$(e.event,e.preparationClasses));c=a(d,e);return c.$$willAnimate?c:null}if(!l.animations&&!l.transitions)return P;var t=I[0].body;c=y(e);var H=F(c.parentNode&&11===c.parentNode.nodeType||t.contains(c)?c:t);V(n);return function(a){return a.from&&a.to?B(a.from,a.to,a.classes,a.anchors):Q(a)}}]}]).provider("$$animateJs",["$animateProvider",function(a){this.$get=["$injector","$$AnimateRunner","$$jqLite",function(b,c,d){function e(c){c=Y(c)?c:c.split(" ");
|
||||||
|
for(var d=[],e={},l=0;l<c.length;l++){var s=c[l],B=a.$$registeredAnimations[s];B&&!e[s]&&(d.push(b.get(B)),e[s]=!0)}return d}var l=V(d);return function(a,b,d,u){function C(){u.domOperation();l(a,u)}function B(a,b,d,e,f){switch(d){case "animate":b=[b,e.from,e.to,f];break;case "setClass":b=[b,F,G,f];break;case "addClass":b=[b,F,f];break;case "removeClass":b=[b,G,f];break;default:b=[b,f]}b.push(e);if(a=a.apply(a,b))if(Ca(a.start)&&(a=a.start()),a instanceof c)a.done(f);else if(Ca(a))return a;return P}
|
||||||
|
function y(a,b,d,e,f){var g=[];s(e,function(e){var k=e[f];k&&g.push(function(){var e,f,g=!1,h=function(a){g||(g=!0,(f||P)(a),e.complete(!a))};e=new c({end:function(){h()},cancel:function(){h(!0)}});f=B(k,a,b,d,function(a){h(!1===a)});return e})});return g}function t(a,b,d,e,f){var g=y(a,b,d,e,f);if(0===g.length){var h,k;"beforeSetClass"===f?(h=y(a,"removeClass",d,e,"beforeRemoveClass"),k=y(a,"addClass",d,e,"beforeAddClass")):"setClass"===f&&(h=y(a,"removeClass",d,e,"removeClass"),k=y(a,"addClass",
|
||||||
|
d,e,"addClass"));h&&(g=g.concat(h));k&&(g=g.concat(k))}if(0!==g.length)return function(a){var b=[];g.length&&s(g,function(a){b.push(a())});b.length?c.all(b,a):a();return function(a){s(b,function(b){a?b.cancel():b.end()})}}}var H=!1;3===arguments.length&&ba(d)&&(u=d,d=null);u=oa(u);d||(d=a.attr("class")||"",u.addClass&&(d+=" "+u.addClass),u.removeClass&&(d+=" "+u.removeClass));var F=u.addClass,G=u.removeClass,x=e(d),r,p;if(x.length){var K,J;"leave"==b?(J="leave",K="afterLeave"):(J="before"+b.charAt(0).toUpperCase()+
|
||||||
|
b.substr(1),K=b);"enter"!==b&&"move"!==b&&(r=t(a,b,u,x,J));p=t(a,b,u,x,K)}if(r||p){var k;return{$$willAnimate:!0,end:function(){k?k.end():(H=!0,C(),ha(a,u),k=new c,k.complete(!0));return k},start:function(){function b(c){H=!0;C();ha(a,u);k.complete(c)}if(k)return k;k=new c;var d,e=[];r&&e.push(function(a){d=r(a)});e.length?e.push(function(a){C();a(!0)}):C();p&&e.push(function(a){d=p(a)});k.setHost({end:function(){H||((d||P)(void 0),b(void 0))},cancel:function(){H||((d||P)(!0),b(!0))}});c.chain(e,
|
||||||
|
b);return k}}}}}]}]).provider("$$animateJsDriver",["$$animationProvider",function(a){a.drivers.push("$$animateJsDriver");this.$get=["$$animateJs","$$AnimateRunner",function(a,c){function d(c){return a(c.element,c.event,c.classes,c.options)}return function(a){if(a.from&&a.to){var b=d(a.from),n=d(a.to);if(b||n)return{start:function(){function a(){return function(){s(d,function(a){a.end()})}}var d=[];b&&d.push(b.start());n&&d.push(n.start());c.all(d,function(a){e.complete(a)});var e=new c({end:a(),cancel:a()});
|
||||||
|
return e}}}else return d(a)}}]}])})(window,window.angular);
|
||||||
|
//# sourceMappingURL=angular-animate.min.js.map
|
||||||
405
SRC/iMES_PAD/JSplugins/angular-aria/angular-aria.js
vendored
Normal file
405
SRC/iMES_PAD/JSplugins/angular-aria/angular-aria.js
vendored
Normal file
@ -0,0 +1,405 @@
|
|||||||
|
/**
|
||||||
|
* @license AngularJS v1.5.8
|
||||||
|
* (c) 2010-2016 Google, Inc. http://angularjs.org
|
||||||
|
* License: MIT
|
||||||
|
*/
|
||||||
|
(function(window, angular) {'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc module
|
||||||
|
* @name ngAria
|
||||||
|
* @description
|
||||||
|
*
|
||||||
|
* The `ngAria` module provides support for common
|
||||||
|
* [<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](http://www.w3.org/TR/wai-aria/)
|
||||||
|
* attributes that convey state or semantic information about the application for users
|
||||||
|
* of assistive technologies, such as screen readers.
|
||||||
|
*
|
||||||
|
* <div doc-module-components="ngAria"></div>
|
||||||
|
*
|
||||||
|
* ## Usage
|
||||||
|
*
|
||||||
|
* For ngAria to do its magic, simply include the module `ngAria` as a dependency. The following
|
||||||
|
* directives are supported:
|
||||||
|
* `ngModel`, `ngChecked`, `ngReadonly`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`, `ngClick`,
|
||||||
|
* `ngDblClick`, and `ngMessages`.
|
||||||
|
*
|
||||||
|
* Below is a more detailed breakdown of the attributes handled by ngAria:
|
||||||
|
*
|
||||||
|
* | Directive | Supported Attributes |
|
||||||
|
* |---------------------------------------------|----------------------------------------------------------------------------------------|
|
||||||
|
* | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles |
|
||||||
|
* | {@link ng.directive:ngDisabled ngDisabled} | aria-disabled |
|
||||||
|
* | {@link ng.directive:ngRequired ngRequired} | aria-required
|
||||||
|
* | {@link ng.directive:ngChecked ngChecked} | aria-checked
|
||||||
|
* | {@link ng.directive:ngReadonly ngReadonly} | aria-readonly |
|
||||||
|
* | {@link ng.directive:ngValue ngValue} | aria-checked |
|
||||||
|
* | {@link ng.directive:ngShow ngShow} | aria-hidden |
|
||||||
|
* | {@link ng.directive:ngHide ngHide} | aria-hidden |
|
||||||
|
* | {@link ng.directive:ngDblclick ngDblclick} | tabindex |
|
||||||
|
* | {@link module:ngMessages ngMessages} | aria-live |
|
||||||
|
* | {@link ng.directive:ngClick ngClick} | tabindex, keypress event, button role |
|
||||||
|
*
|
||||||
|
* Find out more information about each directive by reading the
|
||||||
|
* {@link guide/accessibility ngAria Developer Guide}.
|
||||||
|
*
|
||||||
|
* ## Example
|
||||||
|
* Using ngDisabled with ngAria:
|
||||||
|
* ```html
|
||||||
|
* <md-checkbox ng-disabled="disabled">
|
||||||
|
* ```
|
||||||
|
* Becomes:
|
||||||
|
* ```html
|
||||||
|
* <md-checkbox ng-disabled="disabled" aria-disabled="true">
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* ## Disabling Attributes
|
||||||
|
* It's possible to disable individual attributes added by ngAria with the
|
||||||
|
* {@link ngAria.$ariaProvider#config config} method. For more details, see the
|
||||||
|
* {@link guide/accessibility Developer Guide}.
|
||||||
|
*/
|
||||||
|
/* global -ngAriaModule */
|
||||||
|
var ngAriaModule = angular.module('ngAria', ['ng']).
|
||||||
|
provider('$aria', $AriaProvider);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal Utilities
|
||||||
|
*/
|
||||||
|
var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS', 'SUMMARY'];
|
||||||
|
|
||||||
|
var isNodeOneOf = function(elem, nodeTypeArray) {
|
||||||
|
if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* @ngdoc provider
|
||||||
|
* @name $ariaProvider
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
*
|
||||||
|
* Used for configuring the ARIA attributes injected and managed by ngAria.
|
||||||
|
*
|
||||||
|
* ```js
|
||||||
|
* angular.module('myApp', ['ngAria'], function config($ariaProvider) {
|
||||||
|
* $ariaProvider.config({
|
||||||
|
* ariaValue: true,
|
||||||
|
* tabindex: false
|
||||||
|
* });
|
||||||
|
* });
|
||||||
|
*```
|
||||||
|
*
|
||||||
|
* ## Dependencies
|
||||||
|
* Requires the {@link ngAria} module to be installed.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
function $AriaProvider() {
|
||||||
|
var config = {
|
||||||
|
ariaHidden: true,
|
||||||
|
ariaChecked: true,
|
||||||
|
ariaReadonly: true,
|
||||||
|
ariaDisabled: true,
|
||||||
|
ariaRequired: true,
|
||||||
|
ariaInvalid: true,
|
||||||
|
ariaValue: true,
|
||||||
|
tabindex: true,
|
||||||
|
bindKeypress: true,
|
||||||
|
bindRoleForClick: true
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc method
|
||||||
|
* @name $ariaProvider#config
|
||||||
|
*
|
||||||
|
* @param {object} config object to enable/disable specific ARIA attributes
|
||||||
|
*
|
||||||
|
* - **ariaHidden** – `{boolean}` – Enables/disables aria-hidden tags
|
||||||
|
* - **ariaChecked** – `{boolean}` – Enables/disables aria-checked tags
|
||||||
|
* - **ariaReadonly** – `{boolean}` – Enables/disables aria-readonly tags
|
||||||
|
* - **ariaDisabled** – `{boolean}` – Enables/disables aria-disabled tags
|
||||||
|
* - **ariaRequired** – `{boolean}` – Enables/disables aria-required tags
|
||||||
|
* - **ariaInvalid** – `{boolean}` – Enables/disables aria-invalid tags
|
||||||
|
* - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags
|
||||||
|
* - **tabindex** – `{boolean}` – Enables/disables tabindex tags
|
||||||
|
* - **bindKeypress** – `{boolean}` – Enables/disables keypress event binding on `div` and
|
||||||
|
* `li` elements with ng-click
|
||||||
|
* - **bindRoleForClick** – `{boolean}` – Adds role=button to non-interactive elements like `div`
|
||||||
|
* using ng-click, making them more accessible to users of assistive technologies
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Enables/disables various ARIA attributes
|
||||||
|
*/
|
||||||
|
this.config = function(newConfig) {
|
||||||
|
config = angular.extend(config, newConfig);
|
||||||
|
};
|
||||||
|
|
||||||
|
function watchExpr(attrName, ariaAttr, nodeBlackList, negate) {
|
||||||
|
return function(scope, elem, attr) {
|
||||||
|
var ariaCamelName = attr.$normalize(ariaAttr);
|
||||||
|
if (config[ariaCamelName] && !isNodeOneOf(elem, nodeBlackList) && !attr[ariaCamelName]) {
|
||||||
|
scope.$watch(attr[attrName], function(boolVal) {
|
||||||
|
// ensure boolean value
|
||||||
|
boolVal = negate ? !boolVal : !!boolVal;
|
||||||
|
elem.attr(ariaAttr, boolVal);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @ngdoc service
|
||||||
|
* @name $aria
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* @priority 200
|
||||||
|
*
|
||||||
|
* The $aria service contains helper methods for applying common
|
||||||
|
* [ARIA](http://www.w3.org/TR/wai-aria/) attributes to HTML directives.
|
||||||
|
*
|
||||||
|
* ngAria injects common accessibility attributes that tell assistive technologies when HTML
|
||||||
|
* elements are enabled, selected, hidden, and more. To see how this is performed with ngAria,
|
||||||
|
* let's review a code snippet from ngAria itself:
|
||||||
|
*
|
||||||
|
*```js
|
||||||
|
* ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
|
||||||
|
* return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
|
||||||
|
* }])
|
||||||
|
*```
|
||||||
|
* Shown above, the ngAria module creates a directive with the same signature as the
|
||||||
|
* traditional `ng-disabled` directive. But this ngAria version is dedicated to
|
||||||
|
* solely managing accessibility attributes on custom elements. The internal `$aria` service is
|
||||||
|
* used to watch the boolean attribute `ngDisabled`. If it has not been explicitly set by the
|
||||||
|
* developer, `aria-disabled` is injected as an attribute with its value synchronized to the
|
||||||
|
* value in `ngDisabled`.
|
||||||
|
*
|
||||||
|
* Because ngAria hooks into the `ng-disabled` directive, developers do not have to do
|
||||||
|
* anything to enable this feature. The `aria-disabled` attribute is automatically managed
|
||||||
|
* simply as a silent side-effect of using `ng-disabled` with the ngAria module.
|
||||||
|
*
|
||||||
|
* The full list of directives that interface with ngAria:
|
||||||
|
* * **ngModel**
|
||||||
|
* * **ngChecked**
|
||||||
|
* * **ngReadonly**
|
||||||
|
* * **ngRequired**
|
||||||
|
* * **ngDisabled**
|
||||||
|
* * **ngValue**
|
||||||
|
* * **ngShow**
|
||||||
|
* * **ngHide**
|
||||||
|
* * **ngClick**
|
||||||
|
* * **ngDblclick**
|
||||||
|
* * **ngMessages**
|
||||||
|
*
|
||||||
|
* Read the {@link guide/accessibility ngAria Developer Guide} for a thorough explanation of each
|
||||||
|
* directive.
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* ## Dependencies
|
||||||
|
* Requires the {@link ngAria} module to be installed.
|
||||||
|
*/
|
||||||
|
this.$get = function() {
|
||||||
|
return {
|
||||||
|
config: function(key) {
|
||||||
|
return config[key];
|
||||||
|
},
|
||||||
|
$$watchExpr: watchExpr
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ngAriaModule.directive('ngShow', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngShow', 'aria-hidden', [], true);
|
||||||
|
}])
|
||||||
|
.directive('ngHide', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngHide', 'aria-hidden', [], false);
|
||||||
|
}])
|
||||||
|
.directive('ngValue', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngValue', 'aria-checked', nodeBlackList, false);
|
||||||
|
}])
|
||||||
|
.directive('ngChecked', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngChecked', 'aria-checked', nodeBlackList, false);
|
||||||
|
}])
|
||||||
|
.directive('ngReadonly', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngReadonly', 'aria-readonly', nodeBlackList, false);
|
||||||
|
}])
|
||||||
|
.directive('ngRequired', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngRequired', 'aria-required', nodeBlackList, false);
|
||||||
|
}])
|
||||||
|
.directive('ngModel', ['$aria', function($aria) {
|
||||||
|
|
||||||
|
function shouldAttachAttr(attr, normalizedAttr, elem, allowBlacklistEls) {
|
||||||
|
return $aria.config(normalizedAttr) && !elem.attr(attr) && (allowBlacklistEls || !isNodeOneOf(elem, nodeBlackList));
|
||||||
|
}
|
||||||
|
|
||||||
|
function shouldAttachRole(role, elem) {
|
||||||
|
// if element does not have role attribute
|
||||||
|
// AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
|
||||||
|
// AND element is not INPUT
|
||||||
|
return !elem.attr('role') && (elem.attr('type') === role) && (elem[0].nodeName !== 'INPUT');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getShape(attr, elem) {
|
||||||
|
var type = attr.type,
|
||||||
|
role = attr.role;
|
||||||
|
|
||||||
|
return ((type || role) === 'checkbox' || role === 'menuitemcheckbox') ? 'checkbox' :
|
||||||
|
((type || role) === 'radio' || role === 'menuitemradio') ? 'radio' :
|
||||||
|
(type === 'range' || role === 'progressbar' || role === 'slider') ? 'range' : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
restrict: 'A',
|
||||||
|
require: 'ngModel',
|
||||||
|
priority: 200, //Make sure watches are fired after any other directives that affect the ngModel value
|
||||||
|
compile: function(elem, attr) {
|
||||||
|
var shape = getShape(attr, elem);
|
||||||
|
|
||||||
|
return {
|
||||||
|
pre: function(scope, elem, attr, ngModel) {
|
||||||
|
if (shape === 'checkbox') {
|
||||||
|
//Use the input[checkbox] $isEmpty implementation for elements with checkbox roles
|
||||||
|
ngModel.$isEmpty = function(value) {
|
||||||
|
return value === false;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
post: function(scope, elem, attr, ngModel) {
|
||||||
|
var needsTabIndex = shouldAttachAttr('tabindex', 'tabindex', elem, false);
|
||||||
|
|
||||||
|
function ngAriaWatchModelValue() {
|
||||||
|
return ngModel.$modelValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRadioReaction(newVal) {
|
||||||
|
var boolVal = (attr.value == ngModel.$viewValue);
|
||||||
|
elem.attr('aria-checked', boolVal);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCheckboxReaction() {
|
||||||
|
elem.attr('aria-checked', !ngModel.$isEmpty(ngModel.$viewValue));
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (shape) {
|
||||||
|
case 'radio':
|
||||||
|
case 'checkbox':
|
||||||
|
if (shouldAttachRole(shape, elem)) {
|
||||||
|
elem.attr('role', shape);
|
||||||
|
}
|
||||||
|
if (shouldAttachAttr('aria-checked', 'ariaChecked', elem, false)) {
|
||||||
|
scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
|
||||||
|
getRadioReaction : getCheckboxReaction);
|
||||||
|
}
|
||||||
|
if (needsTabIndex) {
|
||||||
|
elem.attr('tabindex', 0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'range':
|
||||||
|
if (shouldAttachRole(shape, elem)) {
|
||||||
|
elem.attr('role', 'slider');
|
||||||
|
}
|
||||||
|
if ($aria.config('ariaValue')) {
|
||||||
|
var needsAriaValuemin = !elem.attr('aria-valuemin') &&
|
||||||
|
(attr.hasOwnProperty('min') || attr.hasOwnProperty('ngMin'));
|
||||||
|
var needsAriaValuemax = !elem.attr('aria-valuemax') &&
|
||||||
|
(attr.hasOwnProperty('max') || attr.hasOwnProperty('ngMax'));
|
||||||
|
var needsAriaValuenow = !elem.attr('aria-valuenow');
|
||||||
|
|
||||||
|
if (needsAriaValuemin) {
|
||||||
|
attr.$observe('min', function ngAriaValueMinReaction(newVal) {
|
||||||
|
elem.attr('aria-valuemin', newVal);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (needsAriaValuemax) {
|
||||||
|
attr.$observe('max', function ngAriaValueMinReaction(newVal) {
|
||||||
|
elem.attr('aria-valuemax', newVal);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (needsAriaValuenow) {
|
||||||
|
scope.$watch(ngAriaWatchModelValue, function ngAriaValueNowReaction(newVal) {
|
||||||
|
elem.attr('aria-valuenow', newVal);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (needsTabIndex) {
|
||||||
|
elem.attr('tabindex', 0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!attr.hasOwnProperty('ngRequired') && ngModel.$validators.required
|
||||||
|
&& shouldAttachAttr('aria-required', 'ariaRequired', elem, false)) {
|
||||||
|
// ngModel.$error.required is undefined on custom controls
|
||||||
|
attr.$observe('required', function() {
|
||||||
|
elem.attr('aria-required', !!attr['required']);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldAttachAttr('aria-invalid', 'ariaInvalid', elem, true)) {
|
||||||
|
scope.$watch(function ngAriaInvalidWatch() {
|
||||||
|
return ngModel.$invalid;
|
||||||
|
}, function ngAriaInvalidReaction(newVal) {
|
||||||
|
elem.attr('aria-invalid', !!newVal);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}])
|
||||||
|
.directive('ngDisabled', ['$aria', function($aria) {
|
||||||
|
return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
|
||||||
|
}])
|
||||||
|
.directive('ngMessages', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'A',
|
||||||
|
require: '?ngMessages',
|
||||||
|
link: function(scope, elem, attr, ngMessages) {
|
||||||
|
if (!elem.attr('aria-live')) {
|
||||||
|
elem.attr('aria-live', 'assertive');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.directive('ngClick',['$aria', '$parse', function($aria, $parse) {
|
||||||
|
return {
|
||||||
|
restrict: 'A',
|
||||||
|
compile: function(elem, attr) {
|
||||||
|
var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true);
|
||||||
|
return function(scope, elem, attr) {
|
||||||
|
|
||||||
|
if (!isNodeOneOf(elem, nodeBlackList)) {
|
||||||
|
|
||||||
|
if ($aria.config('bindRoleForClick') && !elem.attr('role')) {
|
||||||
|
elem.attr('role', 'button');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($aria.config('tabindex') && !elem.attr('tabindex')) {
|
||||||
|
elem.attr('tabindex', 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($aria.config('bindKeypress') && !attr.ngKeypress) {
|
||||||
|
elem.on('keypress', function(event) {
|
||||||
|
var keyCode = event.which || event.keyCode;
|
||||||
|
if (keyCode === 32 || keyCode === 13) {
|
||||||
|
scope.$apply(callback);
|
||||||
|
}
|
||||||
|
|
||||||
|
function callback() {
|
||||||
|
fn(scope, { $event: event });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}])
|
||||||
|
.directive('ngDblclick', ['$aria', function($aria) {
|
||||||
|
return function(scope, elem, attr) {
|
||||||
|
if ($aria.config('tabindex') && !elem.attr('tabindex') && !isNodeOneOf(elem, nodeBlackList)) {
|
||||||
|
elem.attr('tabindex', 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
|
||||||
|
|
||||||
|
})(window, window.angular);
|
||||||
14
SRC/iMES_PAD/JSplugins/angular-aria/angular-aria.min.js
vendored
Normal file
14
SRC/iMES_PAD/JSplugins/angular-aria/angular-aria.min.js
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/*
|
||||||
|
AngularJS v1.5.8
|
||||||
|
(c) 2010-2016 Google, Inc. http://angularjs.org
|
||||||
|
License: MIT
|
||||||
|
*/
|
||||||
|
(function(t,p){'use strict';var b="BUTTON A INPUT TEXTAREA SELECT DETAILS SUMMARY".split(" "),l=function(a,c){if(-1!==c.indexOf(a[0].nodeName))return!0};p.module("ngAria",["ng"]).provider("$aria",function(){function a(a,b,m,h){return function(d,f,e){var q=e.$normalize(b);!c[q]||l(f,m)||e[q]||d.$watch(e[a],function(a){a=h?!a:!!a;f.attr(b,a)})}}var c={ariaHidden:!0,ariaChecked:!0,ariaReadonly:!0,ariaDisabled:!0,ariaRequired:!0,ariaInvalid:!0,ariaValue:!0,tabindex:!0,bindKeypress:!0,bindRoleForClick:!0};
|
||||||
|
this.config=function(a){c=p.extend(c,a)};this.$get=function(){return{config:function(a){return c[a]},$$watchExpr:a}}}).directive("ngShow",["$aria",function(a){return a.$$watchExpr("ngShow","aria-hidden",[],!0)}]).directive("ngHide",["$aria",function(a){return a.$$watchExpr("ngHide","aria-hidden",[],!1)}]).directive("ngValue",["$aria",function(a){return a.$$watchExpr("ngValue","aria-checked",b,!1)}]).directive("ngChecked",["$aria",function(a){return a.$$watchExpr("ngChecked","aria-checked",b,!1)}]).directive("ngReadonly",
|
||||||
|
["$aria",function(a){return a.$$watchExpr("ngReadonly","aria-readonly",b,!1)}]).directive("ngRequired",["$aria",function(a){return a.$$watchExpr("ngRequired","aria-required",b,!1)}]).directive("ngModel",["$aria",function(a){function c(c,h,d,f){return a.config(h)&&!d.attr(c)&&(f||!l(d,b))}function g(a,c){return!c.attr("role")&&c.attr("type")===a&&"INPUT"!==c[0].nodeName}function k(a,c){var d=a.type,f=a.role;return"checkbox"===(d||f)||"menuitemcheckbox"===f?"checkbox":"radio"===(d||f)||"menuitemradio"===
|
||||||
|
f?"radio":"range"===d||"progressbar"===f||"slider"===f?"range":""}return{restrict:"A",require:"ngModel",priority:200,compile:function(b,h){var d=k(h,b);return{pre:function(a,e,c,b){"checkbox"===d&&(b.$isEmpty=function(a){return!1===a})},post:function(f,e,b,n){function h(){return n.$modelValue}function k(a){e.attr("aria-checked",b.value==n.$viewValue)}function l(){e.attr("aria-checked",!n.$isEmpty(n.$viewValue))}var m=c("tabindex","tabindex",e,!1);switch(d){case "radio":case "checkbox":g(d,e)&&e.attr("role",
|
||||||
|
d);c("aria-checked","ariaChecked",e,!1)&&f.$watch(h,"radio"===d?k:l);m&&e.attr("tabindex",0);break;case "range":g(d,e)&&e.attr("role","slider");if(a.config("ariaValue")){var p=!e.attr("aria-valuemin")&&(b.hasOwnProperty("min")||b.hasOwnProperty("ngMin")),r=!e.attr("aria-valuemax")&&(b.hasOwnProperty("max")||b.hasOwnProperty("ngMax")),s=!e.attr("aria-valuenow");p&&b.$observe("min",function(a){e.attr("aria-valuemin",a)});r&&b.$observe("max",function(a){e.attr("aria-valuemax",a)});s&&f.$watch(h,function(a){e.attr("aria-valuenow",
|
||||||
|
a)})}m&&e.attr("tabindex",0)}!b.hasOwnProperty("ngRequired")&&n.$validators.required&&c("aria-required","ariaRequired",e,!1)&&b.$observe("required",function(){e.attr("aria-required",!!b.required)});c("aria-invalid","ariaInvalid",e,!0)&&f.$watch(function(){return n.$invalid},function(a){e.attr("aria-invalid",!!a)})}}}}}]).directive("ngDisabled",["$aria",function(a){return a.$$watchExpr("ngDisabled","aria-disabled",b,!1)}]).directive("ngMessages",function(){return{restrict:"A",require:"?ngMessages",
|
||||||
|
link:function(a,b,g,k){b.attr("aria-live")||b.attr("aria-live","assertive")}}}).directive("ngClick",["$aria","$parse",function(a,c){return{restrict:"A",compile:function(g,k){var m=c(k.ngClick,null,!0);return function(c,d,f){if(!l(d,b)&&(a.config("bindRoleForClick")&&!d.attr("role")&&d.attr("role","button"),a.config("tabindex")&&!d.attr("tabindex")&&d.attr("tabindex",0),a.config("bindKeypress")&&!f.ngKeypress))d.on("keypress",function(a){function b(){m(c,{$event:a})}var d=a.which||a.keyCode;32!==d&&
|
||||||
|
13!==d||c.$apply(b)})}}}}]).directive("ngDblclick",["$aria",function(a){return function(c,g,k){!a.config("tabindex")||g.attr("tabindex")||l(g,b)||g.attr("tabindex",0)}}])})(window,window.angular);
|
||||||
|
//# sourceMappingURL=angular-aria.min.js.map
|
||||||
690
SRC/iMES_PAD/JSplugins/angular-css/angular-css.js
vendored
Normal file
690
SRC/iMES_PAD/JSplugins/angular-css/angular-css.js
vendored
Normal file
@ -0,0 +1,690 @@
|
|||||||
|
/**
|
||||||
|
* AngularCSS - CSS on-demand for AngularJS
|
||||||
|
* @version v1.0.8
|
||||||
|
* @author Alex Castillo
|
||||||
|
* @link http://castillo-io.github.io/angular-css
|
||||||
|
* @license MIT License, http://www.opensource.org/licenses/MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
(function (angular) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AngularCSS Module
|
||||||
|
* Contains: config, constant, provider and run
|
||||||
|
**/
|
||||||
|
var angularCSS = angular.module('angularCSS', []);
|
||||||
|
|
||||||
|
// Old module name handler
|
||||||
|
angular.module('door3.css', [])
|
||||||
|
.run(function () {
|
||||||
|
console.error('AngularCSS: The module name "door3.css" is now deprecated. Please use "angularCSS" instead.');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Provider
|
||||||
|
angularCSS.provider('$css', [function $cssProvider() {
|
||||||
|
|
||||||
|
// Defaults - default options that can be overridden from application config
|
||||||
|
var defaults = this.defaults = {
|
||||||
|
element: 'link',
|
||||||
|
rel: 'stylesheet',
|
||||||
|
type: 'text/css',
|
||||||
|
container: 'head',
|
||||||
|
method: 'append',
|
||||||
|
weight: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
var DEBUG = false,
|
||||||
|
load_cache = {};
|
||||||
|
|
||||||
|
// Turn off/on in order to see console logs during dev mode
|
||||||
|
this.debugMode = function(mode) {
|
||||||
|
if (angular.isDefined(mode))
|
||||||
|
DEBUG = mode;
|
||||||
|
return DEBUG;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$get = ['$rootScope','$injector','$q','$window','$timeout','$compile','$http','$filter','$log', '$interpolate',
|
||||||
|
function $get($rootScope, $injector, $q, $window, $timeout, $compile, $http, $filter, $log, $interpolate) {
|
||||||
|
|
||||||
|
var $css = {};
|
||||||
|
|
||||||
|
var template = '<link ng-repeat="stylesheet in stylesheets | orderBy: \'weight\' track by $id(stylesheet)" rel="{{ stylesheet.rel }}" type="{{ stylesheet.type }}" ng-href="{{ stylesheet.href }}" ng-attr-media="{{ stylesheet.media }}">';
|
||||||
|
|
||||||
|
// Using correct interpolation symbols.
|
||||||
|
template = template
|
||||||
|
.replace(/{{/g, $interpolate.startSymbol())
|
||||||
|
.replace(/}}/g, $interpolate.endSymbol());
|
||||||
|
|
||||||
|
// Variables - default options that can be overridden from application config
|
||||||
|
var mediaQuery = {}, mediaQueryListener = {}, mediaQueriesToIgnore = ['print'], options = angular.extend({}, defaults),
|
||||||
|
container = angular.element(document.querySelector ? document.querySelector(options.container) : document.getElementsByTagName(options.container)[0]),
|
||||||
|
dynamicPaths = [];
|
||||||
|
|
||||||
|
// Parse all directives
|
||||||
|
angular.forEach($directives, function (directive, key) {
|
||||||
|
if (directive.hasOwnProperty('css')) {
|
||||||
|
$directives[key] = parse(directive.css);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listen for directive add event in order to add stylesheet(s)
|
||||||
|
**/
|
||||||
|
function $directiveAddEventListener(event, directive, scope) {
|
||||||
|
// Binds directive's css
|
||||||
|
if (scope && directive.hasOwnProperty('css')) {
|
||||||
|
$css.bind(directive.css, scope);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listen for route change event and add/remove stylesheet(s)
|
||||||
|
**/
|
||||||
|
function $routeEventListener(event, current, prev) {
|
||||||
|
// Removes previously added css rules
|
||||||
|
if (prev) {
|
||||||
|
$css.remove($css.getFromRoute(prev).concat(dynamicPaths));
|
||||||
|
// Reset dynamic paths array
|
||||||
|
dynamicPaths.length = 0;
|
||||||
|
}
|
||||||
|
// Adds current css rules
|
||||||
|
if (current) {
|
||||||
|
$css.add($css.getFromRoute(current));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listen for state change event and add stylesheet(s)
|
||||||
|
**/
|
||||||
|
function $stateAddEventListener(event, current, params, prev) {
|
||||||
|
if (current) {
|
||||||
|
$css.add($css.getFromState(current));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listen for state change event and remove stylesheet(s)
|
||||||
|
**/
|
||||||
|
function $stateRemoveEventListener(event, current, params, prev) {
|
||||||
|
$timeout(function(){
|
||||||
|
if (prev) {
|
||||||
|
$css.remove($css.getFromState(prev).concat(dynamicPaths));
|
||||||
|
// Reset dynamic paths array
|
||||||
|
dynamicPaths.length = 0;
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Map breakpoitns defined in defaults to stylesheet media attribute
|
||||||
|
**/
|
||||||
|
function mapBreakpointToMedia(stylesheet) {
|
||||||
|
if (angular.isDefined(options.breakpoints)) {
|
||||||
|
if (stylesheet.breakpoint in options.breakpoints) {
|
||||||
|
stylesheet.media = options.breakpoints[stylesheet.breakpoint];
|
||||||
|
}
|
||||||
|
delete stylesheet.breakpoints;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse: returns array with full all object based on defaults
|
||||||
|
**/
|
||||||
|
function parse(obj) {
|
||||||
|
if (!obj) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Function syntax
|
||||||
|
if (angular.isFunction(obj)) {
|
||||||
|
obj = angular.copy($injector.invoke(obj));
|
||||||
|
}
|
||||||
|
// String syntax
|
||||||
|
if (angular.isString(obj)) {
|
||||||
|
obj = angular.extend({
|
||||||
|
href: obj
|
||||||
|
}, options);
|
||||||
|
}
|
||||||
|
// Array of strings syntax
|
||||||
|
if (angular.isArray(obj) && angular.isString(obj[0])) {
|
||||||
|
angular.forEach(obj, function (item) {
|
||||||
|
obj = angular.extend({
|
||||||
|
href: item
|
||||||
|
}, options);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Object syntax
|
||||||
|
if (angular.isObject(obj) && !angular.isArray(obj)) {
|
||||||
|
obj = angular.extend({}, options, obj);
|
||||||
|
}
|
||||||
|
// Array of objects syntax
|
||||||
|
if (angular.isArray(obj) && angular.isObject(obj[0])) {
|
||||||
|
angular.forEach(obj, function (item) {
|
||||||
|
obj = angular.extend(item, options);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Map breakpoint to media attribute
|
||||||
|
mapBreakpointToMedia(obj);
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add stylesheets to scope
|
||||||
|
$rootScope.stylesheets = [];
|
||||||
|
|
||||||
|
// Adds compiled link tags to container element
|
||||||
|
container[options.method]($compile(template)($rootScope));
|
||||||
|
|
||||||
|
// Directive event listener (emulated internally)
|
||||||
|
$rootScope.$on('$directiveAdd', $directiveAddEventListener);
|
||||||
|
|
||||||
|
// Routes event listener ($route required)
|
||||||
|
$rootScope.$on('$routeChangeSuccess', $routeEventListener);
|
||||||
|
|
||||||
|
// States event listener ($state required)
|
||||||
|
$rootScope.$on('$stateChangeStart', $stateAddEventListener);
|
||||||
|
$rootScope.$on('$stateChangeSuccess', $stateRemoveEventListener);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bust Cache
|
||||||
|
**/
|
||||||
|
function bustCache(stylesheet) {
|
||||||
|
if (!stylesheet) {
|
||||||
|
if(DEBUG) $log.error('No stylesheets provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var queryString = '?cache=';
|
||||||
|
// Append query string for bust cache only once
|
||||||
|
if (stylesheet.href.indexOf(queryString) === -1) {
|
||||||
|
stylesheet.href = stylesheet.href + (stylesheet.bustCache ? queryString + (new Date().getTime()) : '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filter By: returns an array of routes based on a property option
|
||||||
|
**/
|
||||||
|
function filterBy(array, prop) {
|
||||||
|
if (!array || !prop) {
|
||||||
|
if(DEBUG) $log.error('filterBy: missing array or property');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return $filter('filter')(array, function (item) {
|
||||||
|
return item[prop];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Media Query
|
||||||
|
**/
|
||||||
|
function addViaMediaQuery(stylesheet) {
|
||||||
|
if (!stylesheet) {
|
||||||
|
if(DEBUG) $log.error('No stylesheet provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Media query object
|
||||||
|
mediaQuery[stylesheet.href] = $window.matchMedia(stylesheet.media);
|
||||||
|
// Media Query Listener function
|
||||||
|
mediaQueryListener[stylesheet.href] = function(mediaQuery) {
|
||||||
|
// Trigger digest
|
||||||
|
$timeout(function () {
|
||||||
|
if (mediaQuery.matches) {
|
||||||
|
// Add stylesheet
|
||||||
|
$rootScope.stylesheets.push(stylesheet);
|
||||||
|
} else {
|
||||||
|
var index = $rootScope.stylesheets.indexOf($filter('filter')($rootScope.stylesheets, {
|
||||||
|
href: stylesheet.href
|
||||||
|
})[0]);
|
||||||
|
// Remove stylesheet
|
||||||
|
if (index !== -1) {
|
||||||
|
$rootScope.stylesheets.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// Listen for media query changes
|
||||||
|
mediaQuery[stylesheet.href].addListener(mediaQueryListener[stylesheet.href]);
|
||||||
|
// Invoke first media query check
|
||||||
|
mediaQueryListener[stylesheet.href](mediaQuery[stylesheet.href]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove Media Query
|
||||||
|
**/
|
||||||
|
function removeViaMediaQuery(stylesheet) {
|
||||||
|
if (!stylesheet) {
|
||||||
|
if(DEBUG) $log.error('No stylesheet provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Remove media query listener
|
||||||
|
if ($rootScope && angular.isDefined(mediaQuery)
|
||||||
|
&& mediaQuery[stylesheet.href]
|
||||||
|
&& angular.isDefined(mediaQueryListener)) {
|
||||||
|
mediaQuery[stylesheet.href].removeListener(mediaQueryListener[stylesheet.href]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Is Media Query: checks for media settings, media queries to be ignore and match media support
|
||||||
|
**/
|
||||||
|
function isMediaQuery(stylesheet) {
|
||||||
|
if (!stylesheet) {
|
||||||
|
if(DEBUG) $log.error('No stylesheet provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return !!(
|
||||||
|
// Check for media query setting
|
||||||
|
stylesheet.media
|
||||||
|
// Check for media queries to be ignored
|
||||||
|
&& (mediaQueriesToIgnore.indexOf(stylesheet.media) === -1)
|
||||||
|
// Check for matchMedia support
|
||||||
|
&& $window.matchMedia
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get From Route: returns array of css objects from single route
|
||||||
|
**/
|
||||||
|
$css.getFromRoute = function (route) {
|
||||||
|
if (!route) {
|
||||||
|
if(DEBUG) $log.error('Get From Route: No route provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var css = null, result = [];
|
||||||
|
if (route.$$route && route.$$route.css) {
|
||||||
|
css = route.$$route.css;
|
||||||
|
}
|
||||||
|
else if (route.css) {
|
||||||
|
css = route.css;
|
||||||
|
}
|
||||||
|
// Adds route css rules to array
|
||||||
|
if (css) {
|
||||||
|
if (angular.isArray(css)) {
|
||||||
|
angular.forEach(css, function (cssItem) {
|
||||||
|
if (angular.isFunction(cssItem)) {
|
||||||
|
dynamicPaths.push(parse(cssItem));
|
||||||
|
}
|
||||||
|
result.push(parse(cssItem));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (angular.isFunction(css)) {
|
||||||
|
dynamicPaths.push(parse(css));
|
||||||
|
}
|
||||||
|
result.push(parse(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get From Routes: returns array of css objects from ng routes
|
||||||
|
**/
|
||||||
|
$css.getFromRoutes = function (routes) {
|
||||||
|
if (!routes) {
|
||||||
|
if(DEBUG) $log.error('Get From Routes: No routes provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var result = [];
|
||||||
|
// Make array of all routes
|
||||||
|
angular.forEach(routes, function (route) {
|
||||||
|
var css = $css.getFromRoute(route);
|
||||||
|
if (css.length) {
|
||||||
|
result.push(css[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get From State: returns array of css objects from single state
|
||||||
|
**/
|
||||||
|
$css.getFromState = function (state) {
|
||||||
|
if (!state) {
|
||||||
|
if(DEBUG) $log.error('Get From State: No state provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var result = [];
|
||||||
|
// State "views" notation
|
||||||
|
if (angular.isDefined(state.views)) {
|
||||||
|
angular.forEach(state.views, function (item) {
|
||||||
|
if (item.css) {
|
||||||
|
if (angular.isFunction(item.css)) {
|
||||||
|
dynamicPaths.push(parse(item.css));
|
||||||
|
}
|
||||||
|
result.push(parse(item.css));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// State "children" notation
|
||||||
|
if (angular.isDefined(state.children)) {
|
||||||
|
angular.forEach(state.children, function (child) {
|
||||||
|
if (child.css) {
|
||||||
|
if (angular.isFunction(child.css)) {
|
||||||
|
dynamicPaths.push(parse(child.css));
|
||||||
|
}
|
||||||
|
result.push(parse(child.css));
|
||||||
|
}
|
||||||
|
if (angular.isDefined(child.children)) {
|
||||||
|
angular.forEach(child.children, function (childChild) {
|
||||||
|
if (childChild.css) {
|
||||||
|
if (angular.isFunction(childChild.css)) {
|
||||||
|
dynamicPaths.push(parse(childChild.css));
|
||||||
|
}
|
||||||
|
result.push(parse(childChild.css));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// State default notation
|
||||||
|
if (
|
||||||
|
angular.isDefined(state.css) ||
|
||||||
|
(angular.isDefined(state.data) && angular.isDefined(state.data.css))
|
||||||
|
) {
|
||||||
|
var css = state.css || state.data.css;
|
||||||
|
// For multiple stylesheets
|
||||||
|
if (angular.isArray(css)) {
|
||||||
|
angular.forEach(css, function (itemCss) {
|
||||||
|
if (angular.isFunction(itemCss)) {
|
||||||
|
dynamicPaths.push(parse(itemCss));
|
||||||
|
}
|
||||||
|
result.push(parse(itemCss));
|
||||||
|
});
|
||||||
|
// For single stylesheets
|
||||||
|
} else {
|
||||||
|
if (angular.isFunction(css)) {
|
||||||
|
dynamicPaths.push(parse(css));
|
||||||
|
}
|
||||||
|
result.push(parse(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get From States: returns array of css objects from states
|
||||||
|
**/
|
||||||
|
$css.getFromStates = function (states) {
|
||||||
|
if (!states) {
|
||||||
|
if(DEBUG) $log.error('Get From States: No states provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var result = [];
|
||||||
|
// Make array of all routes
|
||||||
|
angular.forEach(states, function (state) {
|
||||||
|
var css = $css.getFromState(state);
|
||||||
|
if (angular.isArray(css)) {
|
||||||
|
angular.forEach(css, function (cssItem) {
|
||||||
|
result.push(cssItem);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
result.push(css);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Preload: preloads css via http request
|
||||||
|
**/
|
||||||
|
$css.preload = function (stylesheets, callback) {
|
||||||
|
// If no stylesheets provided, then preload all
|
||||||
|
if (!stylesheets) {
|
||||||
|
stylesheets = [];
|
||||||
|
// Add all stylesheets from custom directives to array
|
||||||
|
if ($directives.length) {
|
||||||
|
Array.prototype.push.apply(stylesheets, $directives);
|
||||||
|
}
|
||||||
|
// Add all stylesheets from ngRoute to array
|
||||||
|
if ($injector.has('$route')) {
|
||||||
|
Array.prototype.push.apply(stylesheets, $css.getFromRoutes($injector.get('$route').routes));
|
||||||
|
}
|
||||||
|
// Add all stylesheets from UI Router to array
|
||||||
|
if ($injector.has('$state')) {
|
||||||
|
Array.prototype.push.apply(stylesheets, $css.getFromStates($injector.get('$state').get()));
|
||||||
|
}
|
||||||
|
stylesheets = filterBy(stylesheets, 'preload');
|
||||||
|
}
|
||||||
|
if (!angular.isArray(stylesheets)) {
|
||||||
|
stylesheets = [stylesheets];
|
||||||
|
}
|
||||||
|
var stylesheetLoadPromises = [];
|
||||||
|
angular.forEach(stylesheets, function(stylesheet, key) {
|
||||||
|
stylesheet = stylesheets[key] = parse(stylesheet);
|
||||||
|
stylesheetLoadPromises.push(
|
||||||
|
// Preload via ajax request
|
||||||
|
$http.get(stylesheet.href).error(function (response) {
|
||||||
|
if(DEBUG) $log.error('AngularCSS: Incorrect path for ' + stylesheet.href);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
if (angular.isFunction(callback)) {
|
||||||
|
$q.all(stylesheetLoadPromises).then(function () {
|
||||||
|
callback(stylesheets);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bind: binds css in scope with own scope create/destroy events
|
||||||
|
**/
|
||||||
|
$css.bind = function (css, $scope) {
|
||||||
|
if (!css || !$scope) {
|
||||||
|
if(DEBUG) $log.error('No scope or stylesheets provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var result = [];
|
||||||
|
// Adds route css rules to array
|
||||||
|
if (angular.isArray(css)) {
|
||||||
|
angular.forEach(css, function (cssItem) {
|
||||||
|
result.push(parse(cssItem));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
result.push(parse(css));
|
||||||
|
}
|
||||||
|
$css.add(result);
|
||||||
|
if(DEBUG) $log.debug('$css.bind(): Added', result);
|
||||||
|
$scope.$on('$destroy', function () {
|
||||||
|
$css.remove(result);
|
||||||
|
if(DEBUG) $log.debug('$css.bind(): Removed', result);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add: adds stylesheets to scope
|
||||||
|
**/
|
||||||
|
$css.add = function (stylesheets, callback) {
|
||||||
|
if (!stylesheets) {
|
||||||
|
if(DEBUG) $log.error('No stylesheets provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!angular.isArray(stylesheets)) {
|
||||||
|
stylesheets = [stylesheets];
|
||||||
|
}
|
||||||
|
angular.forEach(stylesheets, function(stylesheet) {
|
||||||
|
stylesheet = parse(stylesheet);
|
||||||
|
if (stylesheet.href) {
|
||||||
|
// keep css load record
|
||||||
|
if(load_cache[stylesheet.href] == undefined){
|
||||||
|
load_cache[stylesheet.href] = 1;
|
||||||
|
} else {
|
||||||
|
load_cache[stylesheet.href] = load_cache[stylesheet.href]+1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Avoid adding duplicate stylesheets
|
||||||
|
if(!$filter('filter')($rootScope.stylesheets, { href: stylesheet.href }).length){
|
||||||
|
// Bust Cache feature
|
||||||
|
bustCache(stylesheet);
|
||||||
|
// Media Query add support check
|
||||||
|
if (isMediaQuery(stylesheet)) {
|
||||||
|
addViaMediaQuery(stylesheet);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$rootScope.stylesheets.push(stylesheet);
|
||||||
|
}
|
||||||
|
if(DEBUG) $log.debug('$css.add(): ' + stylesheet.href);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Broadcasts custom event for css add
|
||||||
|
$rootScope.$broadcast('$cssAdd', stylesheets, $rootScope.stylesheets);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove: removes stylesheets from scope
|
||||||
|
**/
|
||||||
|
$css.remove = function (stylesheets, callback) {
|
||||||
|
if (!stylesheets) {
|
||||||
|
if(DEBUG) $log.error('No stylesheets provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!angular.isArray(stylesheets)) {
|
||||||
|
stylesheets = [stylesheets];
|
||||||
|
}
|
||||||
|
// Only proceed based on persist setting
|
||||||
|
stylesheets = $filter('filter')(stylesheets, function (stylesheet) {
|
||||||
|
return !stylesheet.persist;
|
||||||
|
});
|
||||||
|
angular.forEach(stylesheets, function(stylesheet) {
|
||||||
|
if(load_cache[stylesheet.href] != undefined){
|
||||||
|
load_cache[stylesheet.href] = load_cache[stylesheet.href]-1;
|
||||||
|
if(load_cache[stylesheet.href] === 0){
|
||||||
|
stylesheet = parse(stylesheet);
|
||||||
|
// Get index of current item to be removed based on href
|
||||||
|
var index = $rootScope.stylesheets.indexOf($filter('filter')($rootScope.stylesheets, {
|
||||||
|
href: stylesheet.href
|
||||||
|
})[0]);
|
||||||
|
// Remove stylesheet from scope (if found)
|
||||||
|
if (index !== -1) {
|
||||||
|
$rootScope.stylesheets.splice(index, 1);
|
||||||
|
}
|
||||||
|
// Remove stylesheet via media query
|
||||||
|
removeViaMediaQuery(stylesheet);
|
||||||
|
if(DEBUG) $log.debug('$css.remove(): ' + stylesheet.href);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
// Broadcasts custom event for css remove
|
||||||
|
$rootScope.$broadcast('$cssRemove', stylesheets, $rootScope.stylesheets);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove All: removes all style tags from the DOM
|
||||||
|
**/
|
||||||
|
$css.removeAll = function () {
|
||||||
|
// Remove all stylesheets from scope
|
||||||
|
if ($rootScope && $rootScope.hasOwnProperty('stylesheets')) {
|
||||||
|
$rootScope.stylesheets.length = 0;
|
||||||
|
load_cache = {};
|
||||||
|
}
|
||||||
|
if(DEBUG) $log.debug('all stylesheets removed');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Preload all stylesheets
|
||||||
|
$css.preload();
|
||||||
|
|
||||||
|
return $css;
|
||||||
|
|
||||||
|
}];
|
||||||
|
|
||||||
|
}]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Links filter - renders the stylesheets array in html format
|
||||||
|
**/
|
||||||
|
angularCSS.filter('$cssLinks', function () {
|
||||||
|
return function (stylesheets) {
|
||||||
|
if (!stylesheets || !angular.isArray(stylesheets)) {
|
||||||
|
return stylesheets;
|
||||||
|
}
|
||||||
|
var result = '';
|
||||||
|
angular.forEach(stylesheets, function (stylesheet) {
|
||||||
|
result += '<link rel="' + stylesheet.rel + '" type="' + stylesheet.type + '" href="' + stylesheet.href + '"';
|
||||||
|
result += (stylesheet.media ? ' media="' + stylesheet.media + '"' : '');
|
||||||
|
result += '>\n\n';
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Run - auto instantiate the $css provider by injecting it in the run phase of this module
|
||||||
|
**/
|
||||||
|
angularCSS.run(['$css', function ($css) { } ]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AngularJS hack - This way we can get and decorate all custom directives
|
||||||
|
* in order to broadcast a custom $directiveAdd event
|
||||||
|
**/
|
||||||
|
var $directives = [];
|
||||||
|
var originalModule = angular.module;
|
||||||
|
var arraySelect = function(array, action) {
|
||||||
|
return array.reduce(
|
||||||
|
function(previous, current) {
|
||||||
|
previous.push(action(current));
|
||||||
|
return previous;
|
||||||
|
}, []);
|
||||||
|
};
|
||||||
|
var arrayExists = function(array, value) {
|
||||||
|
return array.indexOf(value) > -1;
|
||||||
|
};
|
||||||
|
|
||||||
|
angular.module = function () {
|
||||||
|
var module = originalModule.apply(this, arguments);
|
||||||
|
var originalDirective = module.directive;
|
||||||
|
module.directive = function(directiveName, directiveFactory) {
|
||||||
|
var originalDirectiveFactory = angular.isFunction(directiveFactory) ?
|
||||||
|
directiveFactory : directiveFactory[directiveFactory ? (directiveFactory.length - 1) : 0];
|
||||||
|
try {
|
||||||
|
var directive = angular.copy(originalDirectiveFactory)();
|
||||||
|
directive.directiveName = directiveName;
|
||||||
|
if (directive.hasOwnProperty('css') && !arrayExists(arraySelect($directives, function(x) {return x.ddo.directiveName}), directiveName)) {
|
||||||
|
$directives.push({ ddo: directive, handled: false });
|
||||||
|
}
|
||||||
|
} catch (e) { }
|
||||||
|
return originalDirective.apply(this, arguments);
|
||||||
|
};
|
||||||
|
var originalComponent = module.component;
|
||||||
|
module.component = function (componentName, componentObject) {
|
||||||
|
componentObject.directiveName = componentName;
|
||||||
|
if (componentObject.hasOwnProperty('css') && !arrayExists(arraySelect($directives, function(x) {return x.ddo.directiveName}), componentName)) {
|
||||||
|
$directives.push({ ddo: componentObject, handled: false });
|
||||||
|
}
|
||||||
|
return originalComponent.apply(this, arguments);
|
||||||
|
};
|
||||||
|
module.config(['$provide','$injector', function ($provide, $injector) {
|
||||||
|
angular.forEach($directives, function ($dir) {
|
||||||
|
if (!$dir.handled) {
|
||||||
|
var $directive = $dir.ddo;
|
||||||
|
var dirProvider = $directive.directiveName + 'Directive';
|
||||||
|
if ($injector.has(dirProvider)) {
|
||||||
|
$dir.handled = true;
|
||||||
|
$provide.decorator(dirProvider, ['$delegate', '$rootScope', '$timeout', function ($delegate, $rootScope, $timeout) {
|
||||||
|
var directive = $delegate[0];
|
||||||
|
var compile = directive.compile;
|
||||||
|
if (!directive.css) {
|
||||||
|
directive.css = $directive.css;
|
||||||
|
}
|
||||||
|
directive.compile = function() {
|
||||||
|
var link = compile ? compile.apply(this, arguments): false;
|
||||||
|
return function(scope) {
|
||||||
|
var linkArgs = arguments;
|
||||||
|
$timeout(function () {
|
||||||
|
if (link) {
|
||||||
|
link.apply(this, linkArgs);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$rootScope.$broadcast('$directiveAdd', directive, scope);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
return $delegate;
|
||||||
|
}]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}]);
|
||||||
|
return module;
|
||||||
|
};
|
||||||
|
/* End of hack */
|
||||||
|
|
||||||
|
})(angular);
|
||||||
1
SRC/iMES_PAD/JSplugins/angular-css/angular-css.min.js
vendored
Normal file
1
SRC/iMES_PAD/JSplugins/angular-css/angular-css.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@
|
|||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #dddddd66;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #999999;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
2448
SRC/iMES_PAD/JSplugins/angular-material-lite/angular-material-lite.js
vendored
Normal file
2448
SRC/iMES_PAD/JSplugins/angular-material-lite/angular-material-lite.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 275 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,9 @@
|
|||||||
|
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
|
rel="stylesheet">
|
||||||
|
```
|
||||||
|
|
||||||
|
Read more in our full usage guide:
|
||||||
|
http://google.github.io/material-design-icons/#icon-font-for-the-web
|
||||||
932
SRC/iMES_PAD/JSplugins/angular-material-lite/iconfont/codepoints
Normal file
932
SRC/iMES_PAD/JSplugins/angular-material-lite/iconfont/codepoints
Normal file
@ -0,0 +1,932 @@
|
|||||||
|
3d_rotation e84d
|
||||||
|
ac_unit eb3b
|
||||||
|
access_alarm e190
|
||||||
|
access_alarms e191
|
||||||
|
access_time e192
|
||||||
|
accessibility e84e
|
||||||
|
accessible e914
|
||||||
|
account_balance e84f
|
||||||
|
account_balance_wallet e850
|
||||||
|
account_box e851
|
||||||
|
account_circle e853
|
||||||
|
adb e60e
|
||||||
|
add e145
|
||||||
|
add_a_photo e439
|
||||||
|
add_alarm e193
|
||||||
|
add_alert e003
|
||||||
|
add_box e146
|
||||||
|
add_circle e147
|
||||||
|
add_circle_outline e148
|
||||||
|
add_location e567
|
||||||
|
add_shopping_cart e854
|
||||||
|
add_to_photos e39d
|
||||||
|
add_to_queue e05c
|
||||||
|
adjust e39e
|
||||||
|
airline_seat_flat e630
|
||||||
|
airline_seat_flat_angled e631
|
||||||
|
airline_seat_individual_suite e632
|
||||||
|
airline_seat_legroom_extra e633
|
||||||
|
airline_seat_legroom_normal e634
|
||||||
|
airline_seat_legroom_reduced e635
|
||||||
|
airline_seat_recline_extra e636
|
||||||
|
airline_seat_recline_normal e637
|
||||||
|
airplanemode_active e195
|
||||||
|
airplanemode_inactive e194
|
||||||
|
airplay e055
|
||||||
|
airport_shuttle eb3c
|
||||||
|
alarm e855
|
||||||
|
alarm_add e856
|
||||||
|
alarm_off e857
|
||||||
|
alarm_on e858
|
||||||
|
album e019
|
||||||
|
all_inclusive eb3d
|
||||||
|
all_out e90b
|
||||||
|
android e859
|
||||||
|
announcement e85a
|
||||||
|
apps e5c3
|
||||||
|
archive e149
|
||||||
|
arrow_back e5c4
|
||||||
|
arrow_downward e5db
|
||||||
|
arrow_drop_down e5c5
|
||||||
|
arrow_drop_down_circle e5c6
|
||||||
|
arrow_drop_up e5c7
|
||||||
|
arrow_forward e5c8
|
||||||
|
arrow_upward e5d8
|
||||||
|
art_track e060
|
||||||
|
aspect_ratio e85b
|
||||||
|
assessment e85c
|
||||||
|
assignment e85d
|
||||||
|
assignment_ind e85e
|
||||||
|
assignment_late e85f
|
||||||
|
assignment_return e860
|
||||||
|
assignment_returned e861
|
||||||
|
assignment_turned_in e862
|
||||||
|
assistant e39f
|
||||||
|
assistant_photo e3a0
|
||||||
|
attach_file e226
|
||||||
|
attach_money e227
|
||||||
|
attachment e2bc
|
||||||
|
audiotrack e3a1
|
||||||
|
autorenew e863
|
||||||
|
av_timer e01b
|
||||||
|
backspace e14a
|
||||||
|
backup e864
|
||||||
|
battery_alert e19c
|
||||||
|
battery_charging_full e1a3
|
||||||
|
battery_full e1a4
|
||||||
|
battery_std e1a5
|
||||||
|
battery_unknown e1a6
|
||||||
|
beach_access eb3e
|
||||||
|
beenhere e52d
|
||||||
|
block e14b
|
||||||
|
bluetooth e1a7
|
||||||
|
bluetooth_audio e60f
|
||||||
|
bluetooth_connected e1a8
|
||||||
|
bluetooth_disabled e1a9
|
||||||
|
bluetooth_searching e1aa
|
||||||
|
blur_circular e3a2
|
||||||
|
blur_linear e3a3
|
||||||
|
blur_off e3a4
|
||||||
|
blur_on e3a5
|
||||||
|
book e865
|
||||||
|
bookmark e866
|
||||||
|
bookmark_border e867
|
||||||
|
border_all e228
|
||||||
|
border_bottom e229
|
||||||
|
border_clear e22a
|
||||||
|
border_color e22b
|
||||||
|
border_horizontal e22c
|
||||||
|
border_inner e22d
|
||||||
|
border_left e22e
|
||||||
|
border_outer e22f
|
||||||
|
border_right e230
|
||||||
|
border_style e231
|
||||||
|
border_top e232
|
||||||
|
border_vertical e233
|
||||||
|
branding_watermark e06b
|
||||||
|
brightness_1 e3a6
|
||||||
|
brightness_2 e3a7
|
||||||
|
brightness_3 e3a8
|
||||||
|
brightness_4 e3a9
|
||||||
|
brightness_5 e3aa
|
||||||
|
brightness_6 e3ab
|
||||||
|
brightness_7 e3ac
|
||||||
|
brightness_auto e1ab
|
||||||
|
brightness_high e1ac
|
||||||
|
brightness_low e1ad
|
||||||
|
brightness_medium e1ae
|
||||||
|
broken_image e3ad
|
||||||
|
brush e3ae
|
||||||
|
bubble_chart e6dd
|
||||||
|
bug_report e868
|
||||||
|
build e869
|
||||||
|
burst_mode e43c
|
||||||
|
business e0af
|
||||||
|
business_center eb3f
|
||||||
|
cached e86a
|
||||||
|
cake e7e9
|
||||||
|
call e0b0
|
||||||
|
call_end e0b1
|
||||||
|
call_made e0b2
|
||||||
|
call_merge e0b3
|
||||||
|
call_missed e0b4
|
||||||
|
call_missed_outgoing e0e4
|
||||||
|
call_received e0b5
|
||||||
|
call_split e0b6
|
||||||
|
call_to_action e06c
|
||||||
|
camera e3af
|
||||||
|
camera_alt e3b0
|
||||||
|
camera_enhance e8fc
|
||||||
|
camera_front e3b1
|
||||||
|
camera_rear e3b2
|
||||||
|
camera_roll e3b3
|
||||||
|
cancel e5c9
|
||||||
|
card_giftcard e8f6
|
||||||
|
card_membership e8f7
|
||||||
|
card_travel e8f8
|
||||||
|
casino eb40
|
||||||
|
cast e307
|
||||||
|
cast_connected e308
|
||||||
|
center_focus_strong e3b4
|
||||||
|
center_focus_weak e3b5
|
||||||
|
change_history e86b
|
||||||
|
chat e0b7
|
||||||
|
chat_bubble e0ca
|
||||||
|
chat_bubble_outline e0cb
|
||||||
|
check e5ca
|
||||||
|
check_box e834
|
||||||
|
check_box_outline_blank e835
|
||||||
|
check_circle e86c
|
||||||
|
chevron_left e5cb
|
||||||
|
chevron_right e5cc
|
||||||
|
child_care eb41
|
||||||
|
child_friendly eb42
|
||||||
|
chrome_reader_mode e86d
|
||||||
|
class e86e
|
||||||
|
clear e14c
|
||||||
|
clear_all e0b8
|
||||||
|
close e5cd
|
||||||
|
closed_caption e01c
|
||||||
|
cloud e2bd
|
||||||
|
cloud_circle e2be
|
||||||
|
cloud_done e2bf
|
||||||
|
cloud_download e2c0
|
||||||
|
cloud_off e2c1
|
||||||
|
cloud_queue e2c2
|
||||||
|
cloud_upload e2c3
|
||||||
|
code e86f
|
||||||
|
collections e3b6
|
||||||
|
collections_bookmark e431
|
||||||
|
color_lens e3b7
|
||||||
|
colorize e3b8
|
||||||
|
comment e0b9
|
||||||
|
compare e3b9
|
||||||
|
compare_arrows e915
|
||||||
|
computer e30a
|
||||||
|
confirmation_number e638
|
||||||
|
contact_mail e0d0
|
||||||
|
contact_phone e0cf
|
||||||
|
contacts e0ba
|
||||||
|
content_copy e14d
|
||||||
|
content_cut e14e
|
||||||
|
content_paste e14f
|
||||||
|
control_point e3ba
|
||||||
|
control_point_duplicate e3bb
|
||||||
|
copyright e90c
|
||||||
|
create e150
|
||||||
|
create_new_folder e2cc
|
||||||
|
credit_card e870
|
||||||
|
crop e3be
|
||||||
|
crop_16_9 e3bc
|
||||||
|
crop_3_2 e3bd
|
||||||
|
crop_5_4 e3bf
|
||||||
|
crop_7_5 e3c0
|
||||||
|
crop_din e3c1
|
||||||
|
crop_free e3c2
|
||||||
|
crop_landscape e3c3
|
||||||
|
crop_original e3c4
|
||||||
|
crop_portrait e3c5
|
||||||
|
crop_rotate e437
|
||||||
|
crop_square e3c6
|
||||||
|
dashboard e871
|
||||||
|
data_usage e1af
|
||||||
|
date_range e916
|
||||||
|
dehaze e3c7
|
||||||
|
delete e872
|
||||||
|
delete_forever e92b
|
||||||
|
delete_sweep e16c
|
||||||
|
description e873
|
||||||
|
desktop_mac e30b
|
||||||
|
desktop_windows e30c
|
||||||
|
details e3c8
|
||||||
|
developer_board e30d
|
||||||
|
developer_mode e1b0
|
||||||
|
device_hub e335
|
||||||
|
devices e1b1
|
||||||
|
devices_other e337
|
||||||
|
dialer_sip e0bb
|
||||||
|
dialpad e0bc
|
||||||
|
directions e52e
|
||||||
|
directions_bike e52f
|
||||||
|
directions_boat e532
|
||||||
|
directions_bus e530
|
||||||
|
directions_car e531
|
||||||
|
directions_railway e534
|
||||||
|
directions_run e566
|
||||||
|
directions_subway e533
|
||||||
|
directions_transit e535
|
||||||
|
directions_walk e536
|
||||||
|
disc_full e610
|
||||||
|
dns e875
|
||||||
|
do_not_disturb e612
|
||||||
|
do_not_disturb_alt e611
|
||||||
|
do_not_disturb_off e643
|
||||||
|
do_not_disturb_on e644
|
||||||
|
dock e30e
|
||||||
|
domain e7ee
|
||||||
|
done e876
|
||||||
|
done_all e877
|
||||||
|
donut_large e917
|
||||||
|
donut_small e918
|
||||||
|
drafts e151
|
||||||
|
drag_handle e25d
|
||||||
|
drive_eta e613
|
||||||
|
dvr e1b2
|
||||||
|
edit e3c9
|
||||||
|
edit_location e568
|
||||||
|
eject e8fb
|
||||||
|
email e0be
|
||||||
|
enhanced_encryption e63f
|
||||||
|
equalizer e01d
|
||||||
|
error e000
|
||||||
|
error_outline e001
|
||||||
|
euro_symbol e926
|
||||||
|
ev_station e56d
|
||||||
|
event e878
|
||||||
|
event_available e614
|
||||||
|
event_busy e615
|
||||||
|
event_note e616
|
||||||
|
event_seat e903
|
||||||
|
exit_to_app e879
|
||||||
|
expand_less e5ce
|
||||||
|
expand_more e5cf
|
||||||
|
explicit e01e
|
||||||
|
explore e87a
|
||||||
|
exposure e3ca
|
||||||
|
exposure_neg_1 e3cb
|
||||||
|
exposure_neg_2 e3cc
|
||||||
|
exposure_plus_1 e3cd
|
||||||
|
exposure_plus_2 e3ce
|
||||||
|
exposure_zero e3cf
|
||||||
|
extension e87b
|
||||||
|
face e87c
|
||||||
|
fast_forward e01f
|
||||||
|
fast_rewind e020
|
||||||
|
favorite e87d
|
||||||
|
favorite_border e87e
|
||||||
|
featured_play_list e06d
|
||||||
|
featured_video e06e
|
||||||
|
feedback e87f
|
||||||
|
fiber_dvr e05d
|
||||||
|
fiber_manual_record e061
|
||||||
|
fiber_new e05e
|
||||||
|
fiber_pin e06a
|
||||||
|
fiber_smart_record e062
|
||||||
|
file_download e2c4
|
||||||
|
file_upload e2c6
|
||||||
|
filter e3d3
|
||||||
|
filter_1 e3d0
|
||||||
|
filter_2 e3d1
|
||||||
|
filter_3 e3d2
|
||||||
|
filter_4 e3d4
|
||||||
|
filter_5 e3d5
|
||||||
|
filter_6 e3d6
|
||||||
|
filter_7 e3d7
|
||||||
|
filter_8 e3d8
|
||||||
|
filter_9 e3d9
|
||||||
|
filter_9_plus e3da
|
||||||
|
filter_b_and_w e3db
|
||||||
|
filter_center_focus e3dc
|
||||||
|
filter_drama e3dd
|
||||||
|
filter_frames e3de
|
||||||
|
filter_hdr e3df
|
||||||
|
filter_list e152
|
||||||
|
filter_none e3e0
|
||||||
|
filter_tilt_shift e3e2
|
||||||
|
filter_vintage e3e3
|
||||||
|
find_in_page e880
|
||||||
|
find_replace e881
|
||||||
|
fingerprint e90d
|
||||||
|
first_page e5dc
|
||||||
|
fitness_center eb43
|
||||||
|
flag e153
|
||||||
|
flare e3e4
|
||||||
|
flash_auto e3e5
|
||||||
|
flash_off e3e6
|
||||||
|
flash_on e3e7
|
||||||
|
flight e539
|
||||||
|
flight_land e904
|
||||||
|
flight_takeoff e905
|
||||||
|
flip e3e8
|
||||||
|
flip_to_back e882
|
||||||
|
flip_to_front e883
|
||||||
|
folder e2c7
|
||||||
|
folder_open e2c8
|
||||||
|
folder_shared e2c9
|
||||||
|
folder_special e617
|
||||||
|
font_download e167
|
||||||
|
format_align_center e234
|
||||||
|
format_align_justify e235
|
||||||
|
format_align_left e236
|
||||||
|
format_align_right e237
|
||||||
|
format_bold e238
|
||||||
|
format_clear e239
|
||||||
|
format_color_fill e23a
|
||||||
|
format_color_reset e23b
|
||||||
|
format_color_text e23c
|
||||||
|
format_indent_decrease e23d
|
||||||
|
format_indent_increase e23e
|
||||||
|
format_italic e23f
|
||||||
|
format_line_spacing e240
|
||||||
|
format_list_bulleted e241
|
||||||
|
format_list_numbered e242
|
||||||
|
format_paint e243
|
||||||
|
format_quote e244
|
||||||
|
format_shapes e25e
|
||||||
|
format_size e245
|
||||||
|
format_strikethrough e246
|
||||||
|
format_textdirection_l_to_r e247
|
||||||
|
format_textdirection_r_to_l e248
|
||||||
|
format_underlined e249
|
||||||
|
forum e0bf
|
||||||
|
forward e154
|
||||||
|
forward_10 e056
|
||||||
|
forward_30 e057
|
||||||
|
forward_5 e058
|
||||||
|
free_breakfast eb44
|
||||||
|
fullscreen e5d0
|
||||||
|
fullscreen_exit e5d1
|
||||||
|
functions e24a
|
||||||
|
g_translate e927
|
||||||
|
gamepad e30f
|
||||||
|
games e021
|
||||||
|
gavel e90e
|
||||||
|
gesture e155
|
||||||
|
get_app e884
|
||||||
|
gif e908
|
||||||
|
golf_course eb45
|
||||||
|
gps_fixed e1b3
|
||||||
|
gps_not_fixed e1b4
|
||||||
|
gps_off e1b5
|
||||||
|
grade e885
|
||||||
|
gradient e3e9
|
||||||
|
grain e3ea
|
||||||
|
graphic_eq e1b8
|
||||||
|
grid_off e3eb
|
||||||
|
grid_on e3ec
|
||||||
|
group e7ef
|
||||||
|
group_add e7f0
|
||||||
|
group_work e886
|
||||||
|
hd e052
|
||||||
|
hdr_off e3ed
|
||||||
|
hdr_on e3ee
|
||||||
|
hdr_strong e3f1
|
||||||
|
hdr_weak e3f2
|
||||||
|
headset e310
|
||||||
|
headset_mic e311
|
||||||
|
healing e3f3
|
||||||
|
hearing e023
|
||||||
|
help e887
|
||||||
|
help_outline e8fd
|
||||||
|
high_quality e024
|
||||||
|
highlight e25f
|
||||||
|
highlight_off e888
|
||||||
|
history e889
|
||||||
|
home e88a
|
||||||
|
hot_tub eb46
|
||||||
|
hotel e53a
|
||||||
|
hourglass_empty e88b
|
||||||
|
hourglass_full e88c
|
||||||
|
http e902
|
||||||
|
https e88d
|
||||||
|
image e3f4
|
||||||
|
image_aspect_ratio e3f5
|
||||||
|
import_contacts e0e0
|
||||||
|
import_export e0c3
|
||||||
|
important_devices e912
|
||||||
|
inbox e156
|
||||||
|
indeterminate_check_box e909
|
||||||
|
info e88e
|
||||||
|
info_outline e88f
|
||||||
|
input e890
|
||||||
|
insert_chart e24b
|
||||||
|
insert_comment e24c
|
||||||
|
insert_drive_file e24d
|
||||||
|
insert_emoticon e24e
|
||||||
|
insert_invitation e24f
|
||||||
|
insert_link e250
|
||||||
|
insert_photo e251
|
||||||
|
invert_colors e891
|
||||||
|
invert_colors_off e0c4
|
||||||
|
iso e3f6
|
||||||
|
keyboard e312
|
||||||
|
keyboard_arrow_down e313
|
||||||
|
keyboard_arrow_left e314
|
||||||
|
keyboard_arrow_right e315
|
||||||
|
keyboard_arrow_up e316
|
||||||
|
keyboard_backspace e317
|
||||||
|
keyboard_capslock e318
|
||||||
|
keyboard_hide e31a
|
||||||
|
keyboard_return e31b
|
||||||
|
keyboard_tab e31c
|
||||||
|
keyboard_voice e31d
|
||||||
|
kitchen eb47
|
||||||
|
label e892
|
||||||
|
label_outline e893
|
||||||
|
landscape e3f7
|
||||||
|
language e894
|
||||||
|
laptop e31e
|
||||||
|
laptop_chromebook e31f
|
||||||
|
laptop_mac e320
|
||||||
|
laptop_windows e321
|
||||||
|
last_page e5dd
|
||||||
|
launch e895
|
||||||
|
layers e53b
|
||||||
|
layers_clear e53c
|
||||||
|
leak_add e3f8
|
||||||
|
leak_remove e3f9
|
||||||
|
lens e3fa
|
||||||
|
library_add e02e
|
||||||
|
library_books e02f
|
||||||
|
library_music e030
|
||||||
|
lightbulb_outline e90f
|
||||||
|
line_style e919
|
||||||
|
line_weight e91a
|
||||||
|
linear_scale e260
|
||||||
|
link e157
|
||||||
|
linked_camera e438
|
||||||
|
list e896
|
||||||
|
live_help e0c6
|
||||||
|
live_tv e639
|
||||||
|
local_activity e53f
|
||||||
|
local_airport e53d
|
||||||
|
local_atm e53e
|
||||||
|
local_bar e540
|
||||||
|
local_cafe e541
|
||||||
|
local_car_wash e542
|
||||||
|
local_convenience_store e543
|
||||||
|
local_dining e556
|
||||||
|
local_drink e544
|
||||||
|
local_florist e545
|
||||||
|
local_gas_station e546
|
||||||
|
local_grocery_store e547
|
||||||
|
local_hospital e548
|
||||||
|
local_hotel e549
|
||||||
|
local_laundry_service e54a
|
||||||
|
local_library e54b
|
||||||
|
local_mall e54c
|
||||||
|
local_movies e54d
|
||||||
|
local_offer e54e
|
||||||
|
local_parking e54f
|
||||||
|
local_pharmacy e550
|
||||||
|
local_phone e551
|
||||||
|
local_pizza e552
|
||||||
|
local_play e553
|
||||||
|
local_post_office e554
|
||||||
|
local_printshop e555
|
||||||
|
local_see e557
|
||||||
|
local_shipping e558
|
||||||
|
local_taxi e559
|
||||||
|
location_city e7f1
|
||||||
|
location_disabled e1b6
|
||||||
|
location_off e0c7
|
||||||
|
location_on e0c8
|
||||||
|
location_searching e1b7
|
||||||
|
lock e897
|
||||||
|
lock_open e898
|
||||||
|
lock_outline e899
|
||||||
|
looks e3fc
|
||||||
|
looks_3 e3fb
|
||||||
|
looks_4 e3fd
|
||||||
|
looks_5 e3fe
|
||||||
|
looks_6 e3ff
|
||||||
|
looks_one e400
|
||||||
|
looks_two e401
|
||||||
|
loop e028
|
||||||
|
loupe e402
|
||||||
|
low_priority e16d
|
||||||
|
loyalty e89a
|
||||||
|
mail e158
|
||||||
|
mail_outline e0e1
|
||||||
|
map e55b
|
||||||
|
markunread e159
|
||||||
|
markunread_mailbox e89b
|
||||||
|
memory e322
|
||||||
|
menu e5d2
|
||||||
|
merge_type e252
|
||||||
|
message e0c9
|
||||||
|
mic e029
|
||||||
|
mic_none e02a
|
||||||
|
mic_off e02b
|
||||||
|
mms e618
|
||||||
|
mode_comment e253
|
||||||
|
mode_edit e254
|
||||||
|
monetization_on e263
|
||||||
|
money_off e25c
|
||||||
|
monochrome_photos e403
|
||||||
|
mood e7f2
|
||||||
|
mood_bad e7f3
|
||||||
|
more e619
|
||||||
|
more_horiz e5d3
|
||||||
|
more_vert e5d4
|
||||||
|
motorcycle e91b
|
||||||
|
mouse e323
|
||||||
|
move_to_inbox e168
|
||||||
|
movie e02c
|
||||||
|
movie_creation e404
|
||||||
|
movie_filter e43a
|
||||||
|
multiline_chart e6df
|
||||||
|
music_note e405
|
||||||
|
music_video e063
|
||||||
|
my_location e55c
|
||||||
|
nature e406
|
||||||
|
nature_people e407
|
||||||
|
navigate_before e408
|
||||||
|
navigate_next e409
|
||||||
|
navigation e55d
|
||||||
|
near_me e569
|
||||||
|
network_cell e1b9
|
||||||
|
network_check e640
|
||||||
|
network_locked e61a
|
||||||
|
network_wifi e1ba
|
||||||
|
new_releases e031
|
||||||
|
next_week e16a
|
||||||
|
nfc e1bb
|
||||||
|
no_encryption e641
|
||||||
|
no_sim e0cc
|
||||||
|
not_interested e033
|
||||||
|
note e06f
|
||||||
|
note_add e89c
|
||||||
|
notifications e7f4
|
||||||
|
notifications_active e7f7
|
||||||
|
notifications_none e7f5
|
||||||
|
notifications_off e7f6
|
||||||
|
notifications_paused e7f8
|
||||||
|
offline_pin e90a
|
||||||
|
ondemand_video e63a
|
||||||
|
opacity e91c
|
||||||
|
open_in_browser e89d
|
||||||
|
open_in_new e89e
|
||||||
|
open_with e89f
|
||||||
|
pages e7f9
|
||||||
|
pageview e8a0
|
||||||
|
palette e40a
|
||||||
|
pan_tool e925
|
||||||
|
panorama e40b
|
||||||
|
panorama_fish_eye e40c
|
||||||
|
panorama_horizontal e40d
|
||||||
|
panorama_vertical e40e
|
||||||
|
panorama_wide_angle e40f
|
||||||
|
party_mode e7fa
|
||||||
|
pause e034
|
||||||
|
pause_circle_filled e035
|
||||||
|
pause_circle_outline e036
|
||||||
|
payment e8a1
|
||||||
|
people e7fb
|
||||||
|
people_outline e7fc
|
||||||
|
perm_camera_mic e8a2
|
||||||
|
perm_contact_calendar e8a3
|
||||||
|
perm_data_setting e8a4
|
||||||
|
perm_device_information e8a5
|
||||||
|
perm_identity e8a6
|
||||||
|
perm_media e8a7
|
||||||
|
perm_phone_msg e8a8
|
||||||
|
perm_scan_wifi e8a9
|
||||||
|
person e7fd
|
||||||
|
person_add e7fe
|
||||||
|
person_outline e7ff
|
||||||
|
person_pin e55a
|
||||||
|
person_pin_circle e56a
|
||||||
|
personal_video e63b
|
||||||
|
pets e91d
|
||||||
|
phone e0cd
|
||||||
|
phone_android e324
|
||||||
|
phone_bluetooth_speaker e61b
|
||||||
|
phone_forwarded e61c
|
||||||
|
phone_in_talk e61d
|
||||||
|
phone_iphone e325
|
||||||
|
phone_locked e61e
|
||||||
|
phone_missed e61f
|
||||||
|
phone_paused e620
|
||||||
|
phonelink e326
|
||||||
|
phonelink_erase e0db
|
||||||
|
phonelink_lock e0dc
|
||||||
|
phonelink_off e327
|
||||||
|
phonelink_ring e0dd
|
||||||
|
phonelink_setup e0de
|
||||||
|
photo e410
|
||||||
|
photo_album e411
|
||||||
|
photo_camera e412
|
||||||
|
photo_filter e43b
|
||||||
|
photo_library e413
|
||||||
|
photo_size_select_actual e432
|
||||||
|
photo_size_select_large e433
|
||||||
|
photo_size_select_small e434
|
||||||
|
picture_as_pdf e415
|
||||||
|
picture_in_picture e8aa
|
||||||
|
picture_in_picture_alt e911
|
||||||
|
pie_chart e6c4
|
||||||
|
pie_chart_outlined e6c5
|
||||||
|
pin_drop e55e
|
||||||
|
place e55f
|
||||||
|
play_arrow e037
|
||||||
|
play_circle_filled e038
|
||||||
|
play_circle_outline e039
|
||||||
|
play_for_work e906
|
||||||
|
playlist_add e03b
|
||||||
|
playlist_add_check e065
|
||||||
|
playlist_play e05f
|
||||||
|
plus_one e800
|
||||||
|
poll e801
|
||||||
|
polymer e8ab
|
||||||
|
pool eb48
|
||||||
|
portable_wifi_off e0ce
|
||||||
|
portrait e416
|
||||||
|
power e63c
|
||||||
|
power_input e336
|
||||||
|
power_settings_new e8ac
|
||||||
|
pregnant_woman e91e
|
||||||
|
present_to_all e0df
|
||||||
|
print e8ad
|
||||||
|
priority_high e645
|
||||||
|
public e80b
|
||||||
|
publish e255
|
||||||
|
query_builder e8ae
|
||||||
|
question_answer e8af
|
||||||
|
queue e03c
|
||||||
|
queue_music e03d
|
||||||
|
queue_play_next e066
|
||||||
|
radio e03e
|
||||||
|
radio_button_checked e837
|
||||||
|
radio_button_unchecked e836
|
||||||
|
rate_review e560
|
||||||
|
receipt e8b0
|
||||||
|
recent_actors e03f
|
||||||
|
record_voice_over e91f
|
||||||
|
redeem e8b1
|
||||||
|
redo e15a
|
||||||
|
refresh e5d5
|
||||||
|
remove e15b
|
||||||
|
remove_circle e15c
|
||||||
|
remove_circle_outline e15d
|
||||||
|
remove_from_queue e067
|
||||||
|
remove_red_eye e417
|
||||||
|
remove_shopping_cart e928
|
||||||
|
reorder e8fe
|
||||||
|
repeat e040
|
||||||
|
repeat_one e041
|
||||||
|
replay e042
|
||||||
|
replay_10 e059
|
||||||
|
replay_30 e05a
|
||||||
|
replay_5 e05b
|
||||||
|
reply e15e
|
||||||
|
reply_all e15f
|
||||||
|
report e160
|
||||||
|
report_problem e8b2
|
||||||
|
restaurant e56c
|
||||||
|
restaurant_menu e561
|
||||||
|
restore e8b3
|
||||||
|
restore_page e929
|
||||||
|
ring_volume e0d1
|
||||||
|
room e8b4
|
||||||
|
room_service eb49
|
||||||
|
rotate_90_degrees_ccw e418
|
||||||
|
rotate_left e419
|
||||||
|
rotate_right e41a
|
||||||
|
rounded_corner e920
|
||||||
|
router e328
|
||||||
|
rowing e921
|
||||||
|
rss_feed e0e5
|
||||||
|
rv_hookup e642
|
||||||
|
satellite e562
|
||||||
|
save e161
|
||||||
|
scanner e329
|
||||||
|
schedule e8b5
|
||||||
|
school e80c
|
||||||
|
screen_lock_landscape e1be
|
||||||
|
screen_lock_portrait e1bf
|
||||||
|
screen_lock_rotation e1c0
|
||||||
|
screen_rotation e1c1
|
||||||
|
screen_share e0e2
|
||||||
|
sd_card e623
|
||||||
|
sd_storage e1c2
|
||||||
|
search e8b6
|
||||||
|
security e32a
|
||||||
|
select_all e162
|
||||||
|
send e163
|
||||||
|
sentiment_dissatisfied e811
|
||||||
|
sentiment_neutral e812
|
||||||
|
sentiment_satisfied e813
|
||||||
|
sentiment_very_dissatisfied e814
|
||||||
|
sentiment_very_satisfied e815
|
||||||
|
settings e8b8
|
||||||
|
settings_applications e8b9
|
||||||
|
settings_backup_restore e8ba
|
||||||
|
settings_bluetooth e8bb
|
||||||
|
settings_brightness e8bd
|
||||||
|
settings_cell e8bc
|
||||||
|
settings_ethernet e8be
|
||||||
|
settings_input_antenna e8bf
|
||||||
|
settings_input_component e8c0
|
||||||
|
settings_input_composite e8c1
|
||||||
|
settings_input_hdmi e8c2
|
||||||
|
settings_input_svideo e8c3
|
||||||
|
settings_overscan e8c4
|
||||||
|
settings_phone e8c5
|
||||||
|
settings_power e8c6
|
||||||
|
settings_remote e8c7
|
||||||
|
settings_system_daydream e1c3
|
||||||
|
settings_voice e8c8
|
||||||
|
share e80d
|
||||||
|
shop e8c9
|
||||||
|
shop_two e8ca
|
||||||
|
shopping_basket e8cb
|
||||||
|
shopping_cart e8cc
|
||||||
|
short_text e261
|
||||||
|
show_chart e6e1
|
||||||
|
shuffle e043
|
||||||
|
signal_cellular_4_bar e1c8
|
||||||
|
signal_cellular_connected_no_internet_4_bar e1cd
|
||||||
|
signal_cellular_no_sim e1ce
|
||||||
|
signal_cellular_null e1cf
|
||||||
|
signal_cellular_off e1d0
|
||||||
|
signal_wifi_4_bar e1d8
|
||||||
|
signal_wifi_4_bar_lock e1d9
|
||||||
|
signal_wifi_off e1da
|
||||||
|
sim_card e32b
|
||||||
|
sim_card_alert e624
|
||||||
|
skip_next e044
|
||||||
|
skip_previous e045
|
||||||
|
slideshow e41b
|
||||||
|
slow_motion_video e068
|
||||||
|
smartphone e32c
|
||||||
|
smoke_free eb4a
|
||||||
|
smoking_rooms eb4b
|
||||||
|
sms e625
|
||||||
|
sms_failed e626
|
||||||
|
snooze e046
|
||||||
|
sort e164
|
||||||
|
sort_by_alpha e053
|
||||||
|
spa eb4c
|
||||||
|
space_bar e256
|
||||||
|
speaker e32d
|
||||||
|
speaker_group e32e
|
||||||
|
speaker_notes e8cd
|
||||||
|
speaker_notes_off e92a
|
||||||
|
speaker_phone e0d2
|
||||||
|
spellcheck e8ce
|
||||||
|
star e838
|
||||||
|
star_border e83a
|
||||||
|
star_half e839
|
||||||
|
stars e8d0
|
||||||
|
stay_current_landscape e0d3
|
||||||
|
stay_current_portrait e0d4
|
||||||
|
stay_primary_landscape e0d5
|
||||||
|
stay_primary_portrait e0d6
|
||||||
|
stop e047
|
||||||
|
stop_screen_share e0e3
|
||||||
|
storage e1db
|
||||||
|
store e8d1
|
||||||
|
store_mall_directory e563
|
||||||
|
straighten e41c
|
||||||
|
streetview e56e
|
||||||
|
strikethrough_s e257
|
||||||
|
style e41d
|
||||||
|
subdirectory_arrow_left e5d9
|
||||||
|
subdirectory_arrow_right e5da
|
||||||
|
subject e8d2
|
||||||
|
subscriptions e064
|
||||||
|
subtitles e048
|
||||||
|
subway e56f
|
||||||
|
supervisor_account e8d3
|
||||||
|
surround_sound e049
|
||||||
|
swap_calls e0d7
|
||||||
|
swap_horiz e8d4
|
||||||
|
swap_vert e8d5
|
||||||
|
swap_vertical_circle e8d6
|
||||||
|
switch_camera e41e
|
||||||
|
switch_video e41f
|
||||||
|
sync e627
|
||||||
|
sync_disabled e628
|
||||||
|
sync_problem e629
|
||||||
|
system_update e62a
|
||||||
|
system_update_alt e8d7
|
||||||
|
tab e8d8
|
||||||
|
tab_unselected e8d9
|
||||||
|
tablet e32f
|
||||||
|
tablet_android e330
|
||||||
|
tablet_mac e331
|
||||||
|
tag_faces e420
|
||||||
|
tap_and_play e62b
|
||||||
|
terrain e564
|
||||||
|
text_fields e262
|
||||||
|
text_format e165
|
||||||
|
textsms e0d8
|
||||||
|
texture e421
|
||||||
|
theaters e8da
|
||||||
|
thumb_down e8db
|
||||||
|
thumb_up e8dc
|
||||||
|
thumbs_up_down e8dd
|
||||||
|
time_to_leave e62c
|
||||||
|
timelapse e422
|
||||||
|
timeline e922
|
||||||
|
timer e425
|
||||||
|
timer_10 e423
|
||||||
|
timer_3 e424
|
||||||
|
timer_off e426
|
||||||
|
title e264
|
||||||
|
toc e8de
|
||||||
|
today e8df
|
||||||
|
toll e8e0
|
||||||
|
tonality e427
|
||||||
|
touch_app e913
|
||||||
|
toys e332
|
||||||
|
track_changes e8e1
|
||||||
|
traffic e565
|
||||||
|
train e570
|
||||||
|
tram e571
|
||||||
|
transfer_within_a_station e572
|
||||||
|
transform e428
|
||||||
|
translate e8e2
|
||||||
|
trending_down e8e3
|
||||||
|
trending_flat e8e4
|
||||||
|
trending_up e8e5
|
||||||
|
tune e429
|
||||||
|
turned_in e8e6
|
||||||
|
turned_in_not e8e7
|
||||||
|
tv e333
|
||||||
|
unarchive e169
|
||||||
|
undo e166
|
||||||
|
unfold_less e5d6
|
||||||
|
unfold_more e5d7
|
||||||
|
update e923
|
||||||
|
usb e1e0
|
||||||
|
verified_user e8e8
|
||||||
|
vertical_align_bottom e258
|
||||||
|
vertical_align_center e259
|
||||||
|
vertical_align_top e25a
|
||||||
|
vibration e62d
|
||||||
|
video_call e070
|
||||||
|
video_label e071
|
||||||
|
video_library e04a
|
||||||
|
videocam e04b
|
||||||
|
videocam_off e04c
|
||||||
|
videogame_asset e338
|
||||||
|
view_agenda e8e9
|
||||||
|
view_array e8ea
|
||||||
|
view_carousel e8eb
|
||||||
|
view_column e8ec
|
||||||
|
view_comfy e42a
|
||||||
|
view_compact e42b
|
||||||
|
view_day e8ed
|
||||||
|
view_headline e8ee
|
||||||
|
view_list e8ef
|
||||||
|
view_module e8f0
|
||||||
|
view_quilt e8f1
|
||||||
|
view_stream e8f2
|
||||||
|
view_week e8f3
|
||||||
|
vignette e435
|
||||||
|
visibility e8f4
|
||||||
|
visibility_off e8f5
|
||||||
|
voice_chat e62e
|
||||||
|
voicemail e0d9
|
||||||
|
volume_down e04d
|
||||||
|
volume_mute e04e
|
||||||
|
volume_off e04f
|
||||||
|
volume_up e050
|
||||||
|
vpn_key e0da
|
||||||
|
vpn_lock e62f
|
||||||
|
wallpaper e1bc
|
||||||
|
warning e002
|
||||||
|
watch e334
|
||||||
|
watch_later e924
|
||||||
|
wb_auto e42c
|
||||||
|
wb_cloudy e42d
|
||||||
|
wb_incandescent e42e
|
||||||
|
wb_iridescent e436
|
||||||
|
wb_sunny e430
|
||||||
|
wc e63d
|
||||||
|
web e051
|
||||||
|
web_asset e069
|
||||||
|
weekend e16b
|
||||||
|
whatshot e80e
|
||||||
|
widgets e1bd
|
||||||
|
wifi e63e
|
||||||
|
wifi_lock e1e1
|
||||||
|
wifi_tethering e1e2
|
||||||
|
work e8f9
|
||||||
|
wrap_text e25b
|
||||||
|
youtube_searched_for e8fa
|
||||||
|
zoom_in e8ff
|
||||||
|
zoom_out e900
|
||||||
|
zoom_out_map e56b
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||||
|
src: local('Material Icons'),
|
||||||
|
local('MaterialIcons-Regular'),
|
||||||
|
url(MaterialIcons-Regular.woff2) format('woff2'),
|
||||||
|
url(MaterialIcons-Regular.woff) format('woff'),
|
||||||
|
url(MaterialIcons-Regular.ttf) format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px; /* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
/* Support for IE. */
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"preset": "google",
|
||||||
|
"esnext": true,
|
||||||
|
"disallowSpacesInAnonymousFunctionExpression": null,
|
||||||
|
"validateLineBreaks": "LF",
|
||||||
|
"validateIndentation": 2,
|
||||||
|
"excludeFiles": ["node_modules/**"],
|
||||||
|
"maximumLineLength": 130,
|
||||||
|
"validateQuoteMarks": "'",
|
||||||
|
"requireDotNotation": false,
|
||||||
|
"requireCamelCaseOrUpperCaseIdentifiers": null,
|
||||||
|
"additionalRules": ["./utils/jscs-rules/*.js", "../utils/jscs-rules/*.js"],
|
||||||
|
"closureCamelCase": true,
|
||||||
|
"jsDoc": {
|
||||||
|
"checkAnnotations": {
|
||||||
|
"preset": "closurecompiler",
|
||||||
|
"extra": {
|
||||||
|
"type": true,
|
||||||
|
"suppress": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"checkTypes": "strictNativeCase",
|
||||||
|
"enforceExistence": "exceptExports"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"node": true,
|
||||||
|
"browser": true,
|
||||||
|
"esnext": true,
|
||||||
|
"bitwise": true,
|
||||||
|
"curly": true,
|
||||||
|
"eqeqeq": true,
|
||||||
|
"immed": true,
|
||||||
|
"newcap": true,
|
||||||
|
"noarg": true,
|
||||||
|
"undef": true,
|
||||||
|
"unused": "vars",
|
||||||
|
"strict": true,
|
||||||
|
"sub": true,
|
||||||
|
"globals": {
|
||||||
|
"componentHandler": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,979 @@
|
|||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
/* Material Design Lite Grid*/
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* -----Tooltip
|
||||||
|
* -----Chip
|
||||||
|
*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
/* ========== COLORS ========== */
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Material design color palettes.
|
||||||
|
* @see http://www.google.com/design/spec/style/color.html
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
/**
|
||||||
|
* 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 ========== */
|
||||||
|
/* colors.scss */
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
/* ========== IMAGES ========== */
|
||||||
|
/* ========== Color & Themes ========== */
|
||||||
|
/* ========== Typography ========== */
|
||||||
|
/* ========== Components ========== */
|
||||||
|
/* ========== Standard Buttons ========== */
|
||||||
|
/* ========== Icon Toggles ========== */
|
||||||
|
/* ========== Radio Buttons ========== */
|
||||||
|
/* ========== Ripple effect ========== */
|
||||||
|
/* ========== Layout ========== */
|
||||||
|
/* ========== Content Tabs ========== */
|
||||||
|
/* ========== Checkboxes ========== */
|
||||||
|
/* ========== Switches ========== */
|
||||||
|
/* ========== Spinner ========== */
|
||||||
|
/* ========== Text fields ========== */
|
||||||
|
/* ========== Card ========== */
|
||||||
|
/* ========== Sliders ========== */
|
||||||
|
/* ========== Progress ========== */
|
||||||
|
/* ========== List ========== */
|
||||||
|
/* ========== Item ========== */
|
||||||
|
/* ========== Dropdown menu ========== */
|
||||||
|
/* ========== Tooltips ========== */
|
||||||
|
/* ========== Footer ========== */
|
||||||
|
/* TEXTFIELD */
|
||||||
|
/* SWITCH */
|
||||||
|
/* SPINNER */
|
||||||
|
/* RADIO */
|
||||||
|
/* MENU */
|
||||||
|
/* LIST */
|
||||||
|
/* LAYOUT */
|
||||||
|
/* ICON TOGGLE */
|
||||||
|
/* FOOTER */
|
||||||
|
/*mega-footer*/
|
||||||
|
/*mini-footer*/
|
||||||
|
/* CHECKBOX */
|
||||||
|
/* CARD */
|
||||||
|
/* Card dimensions */
|
||||||
|
/* Cover image */
|
||||||
|
/* BUTTON */
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Dimensions
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/* ANIMATION */
|
||||||
|
/* PROGRESS */
|
||||||
|
/* BADGE */
|
||||||
|
/* SHADOWS */
|
||||||
|
/* GRID */
|
||||||
|
/* DATA TABLE */
|
||||||
|
/* DIALOG */
|
||||||
|
/* SNACKBAR */
|
||||||
|
/* TOOLTIP */
|
||||||
|
/* CHIP */
|
||||||
|
/**
|
||||||
|
* 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 */
|
||||||
|
/* Shadows */
|
||||||
|
/* Animations */
|
||||||
|
/* Dialog */
|
||||||
|
/**
|
||||||
|
* 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`
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* -----Tooltip
|
||||||
|
* -----Chip
|
||||||
|
*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
/* ========== COLORS ========== */
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Material design color palettes.
|
||||||
|
* @see http://www.google.com/design/spec/style/color.html
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
/**
|
||||||
|
* 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 ========== */
|
||||||
|
/* colors.scss */
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
/* ========== IMAGES ========== */
|
||||||
|
/* ========== Color & Themes ========== */
|
||||||
|
/* ========== Typography ========== */
|
||||||
|
/* ========== Components ========== */
|
||||||
|
/* ========== Standard Buttons ========== */
|
||||||
|
/* ========== Icon Toggles ========== */
|
||||||
|
/* ========== Radio Buttons ========== */
|
||||||
|
/* ========== Ripple effect ========== */
|
||||||
|
/* ========== Layout ========== */
|
||||||
|
/* ========== Content Tabs ========== */
|
||||||
|
/* ========== Checkboxes ========== */
|
||||||
|
/* ========== Switches ========== */
|
||||||
|
/* ========== Spinner ========== */
|
||||||
|
/* ========== Text fields ========== */
|
||||||
|
/* ========== Card ========== */
|
||||||
|
/* ========== Sliders ========== */
|
||||||
|
/* ========== Progress ========== */
|
||||||
|
/* ========== List ========== */
|
||||||
|
/* ========== Item ========== */
|
||||||
|
/* ========== Dropdown menu ========== */
|
||||||
|
/* ========== Tooltips ========== */
|
||||||
|
/* ========== Footer ========== */
|
||||||
|
/* TEXTFIELD */
|
||||||
|
/* SWITCH */
|
||||||
|
/* SPINNER */
|
||||||
|
/* RADIO */
|
||||||
|
/* MENU */
|
||||||
|
/* LIST */
|
||||||
|
/* LAYOUT */
|
||||||
|
/* ICON TOGGLE */
|
||||||
|
/* FOOTER */
|
||||||
|
/*mega-footer*/
|
||||||
|
/*mini-footer*/
|
||||||
|
/* CHECKBOX */
|
||||||
|
/* CARD */
|
||||||
|
/* Card dimensions */
|
||||||
|
/* Cover image */
|
||||||
|
/* BUTTON */
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Dimensions
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/* ANIMATION */
|
||||||
|
/* PROGRESS */
|
||||||
|
/* BADGE */
|
||||||
|
/* SHADOWS */
|
||||||
|
/* GRID */
|
||||||
|
/* DATA TABLE */
|
||||||
|
/* DIALOG */
|
||||||
|
/* SNACKBAR */
|
||||||
|
/* TOOLTIP */
|
||||||
|
/* CHIP */
|
||||||
|
.mdl-grid {
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-flex-flow: row wrap;
|
||||||
|
-ms-flex-flow: row wrap;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
margin: 0 auto 0 auto;
|
||||||
|
-webkit-align-items: stretch;
|
||||||
|
-ms-flex-align: stretch;
|
||||||
|
align-items: stretch; }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing {
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
.mdl-cell {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
.mdl-cell--top {
|
||||||
|
-webkit-align-self: flex-start;
|
||||||
|
-ms-flex-item-align: start;
|
||||||
|
align-self: flex-start; }
|
||||||
|
|
||||||
|
.mdl-cell--middle {
|
||||||
|
-webkit-align-self: center;
|
||||||
|
-ms-flex-item-align: center;
|
||||||
|
align-self: center; }
|
||||||
|
|
||||||
|
.mdl-cell--bottom {
|
||||||
|
-webkit-align-self: flex-end;
|
||||||
|
-ms-flex-item-align: end;
|
||||||
|
align-self: flex-end; }
|
||||||
|
|
||||||
|
.mdl-cell--stretch {
|
||||||
|
-webkit-align-self: stretch;
|
||||||
|
-ms-flex-item-align: stretch;
|
||||||
|
align-self: stretch; }
|
||||||
|
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
.mdl-cell--order-1 {
|
||||||
|
-webkit-order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1; }
|
||||||
|
|
||||||
|
.mdl-cell--order-2 {
|
||||||
|
-webkit-order: 2;
|
||||||
|
-ms-flex-order: 2;
|
||||||
|
order: 2; }
|
||||||
|
|
||||||
|
.mdl-cell--order-3 {
|
||||||
|
-webkit-order: 3;
|
||||||
|
-ms-flex-order: 3;
|
||||||
|
order: 3; }
|
||||||
|
|
||||||
|
.mdl-cell--order-4 {
|
||||||
|
-webkit-order: 4;
|
||||||
|
-ms-flex-order: 4;
|
||||||
|
order: 4; }
|
||||||
|
|
||||||
|
.mdl-cell--order-5 {
|
||||||
|
-webkit-order: 5;
|
||||||
|
-ms-flex-order: 5;
|
||||||
|
order: 5; }
|
||||||
|
|
||||||
|
.mdl-cell--order-6 {
|
||||||
|
-webkit-order: 6;
|
||||||
|
-ms-flex-order: 6;
|
||||||
|
order: 6; }
|
||||||
|
|
||||||
|
.mdl-cell--order-7 {
|
||||||
|
-webkit-order: 7;
|
||||||
|
-ms-flex-order: 7;
|
||||||
|
order: 7; }
|
||||||
|
|
||||||
|
.mdl-cell--order-8 {
|
||||||
|
-webkit-order: 8;
|
||||||
|
-ms-flex-order: 8;
|
||||||
|
order: 8; }
|
||||||
|
|
||||||
|
.mdl-cell--order-9 {
|
||||||
|
-webkit-order: 9;
|
||||||
|
-ms-flex-order: 9;
|
||||||
|
order: 9; }
|
||||||
|
|
||||||
|
.mdl-cell--order-10 {
|
||||||
|
-webkit-order: 10;
|
||||||
|
-ms-flex-order: 10;
|
||||||
|
order: 10; }
|
||||||
|
|
||||||
|
.mdl-cell--order-11 {
|
||||||
|
-webkit-order: 11;
|
||||||
|
-ms-flex-order: 11;
|
||||||
|
order: 11; }
|
||||||
|
|
||||||
|
.mdl-cell--order-12 {
|
||||||
|
-webkit-order: 12;
|
||||||
|
-ms-flex-order: 12;
|
||||||
|
order: 12; }
|
||||||
|
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.mdl-grid {
|
||||||
|
padding: 8px; }
|
||||||
|
.mdl-cell {
|
||||||
|
margin: 8px;
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--hide-phone {
|
||||||
|
display: none !important; }
|
||||||
|
.mdl-cell--order-1-phone.mdl-cell--order-1-phone {
|
||||||
|
-webkit-order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1; }
|
||||||
|
.mdl-cell--order-2-phone.mdl-cell--order-2-phone {
|
||||||
|
-webkit-order: 2;
|
||||||
|
-ms-flex-order: 2;
|
||||||
|
order: 2; }
|
||||||
|
.mdl-cell--order-3-phone.mdl-cell--order-3-phone {
|
||||||
|
-webkit-order: 3;
|
||||||
|
-ms-flex-order: 3;
|
||||||
|
order: 3; }
|
||||||
|
.mdl-cell--order-4-phone.mdl-cell--order-4-phone {
|
||||||
|
-webkit-order: 4;
|
||||||
|
-ms-flex-order: 4;
|
||||||
|
order: 4; }
|
||||||
|
.mdl-cell--order-5-phone.mdl-cell--order-5-phone {
|
||||||
|
-webkit-order: 5;
|
||||||
|
-ms-flex-order: 5;
|
||||||
|
order: 5; }
|
||||||
|
.mdl-cell--order-6-phone.mdl-cell--order-6-phone {
|
||||||
|
-webkit-order: 6;
|
||||||
|
-ms-flex-order: 6;
|
||||||
|
order: 6; }
|
||||||
|
.mdl-cell--order-7-phone.mdl-cell--order-7-phone {
|
||||||
|
-webkit-order: 7;
|
||||||
|
-ms-flex-order: 7;
|
||||||
|
order: 7; }
|
||||||
|
.mdl-cell--order-8-phone.mdl-cell--order-8-phone {
|
||||||
|
-webkit-order: 8;
|
||||||
|
-ms-flex-order: 8;
|
||||||
|
order: 8; }
|
||||||
|
.mdl-cell--order-9-phone.mdl-cell--order-9-phone {
|
||||||
|
-webkit-order: 9;
|
||||||
|
-ms-flex-order: 9;
|
||||||
|
order: 9; }
|
||||||
|
.mdl-cell--order-10-phone.mdl-cell--order-10-phone {
|
||||||
|
-webkit-order: 10;
|
||||||
|
-ms-flex-order: 10;
|
||||||
|
order: 10; }
|
||||||
|
.mdl-cell--order-11-phone.mdl-cell--order-11-phone {
|
||||||
|
-webkit-order: 11;
|
||||||
|
-ms-flex-order: 11;
|
||||||
|
order: 11; }
|
||||||
|
.mdl-cell--order-12-phone.mdl-cell--order-12-phone {
|
||||||
|
-webkit-order: 12;
|
||||||
|
-ms-flex-order: 12;
|
||||||
|
order: 12; }
|
||||||
|
.mdl-cell--1-col,
|
||||||
|
.mdl-cell--1-col-phone.mdl-cell--1-col-phone {
|
||||||
|
width: calc(25% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--1-col-phone.mdl-cell--1-col-phone {
|
||||||
|
width: 25%; }
|
||||||
|
.mdl-cell--2-col,
|
||||||
|
.mdl-cell--2-col-phone.mdl-cell--2-col-phone {
|
||||||
|
width: calc(50% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--2-col-phone.mdl-cell--2-col-phone {
|
||||||
|
width: 50%; }
|
||||||
|
.mdl-cell--3-col,
|
||||||
|
.mdl-cell--3-col-phone.mdl-cell--3-col-phone {
|
||||||
|
width: calc(75% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--3-col-phone.mdl-cell--3-col-phone {
|
||||||
|
width: 75%; }
|
||||||
|
.mdl-cell--4-col,
|
||||||
|
.mdl-cell--4-col-phone.mdl-cell--4-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--4-col-phone.mdl-cell--4-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--5-col,
|
||||||
|
.mdl-cell--5-col-phone.mdl-cell--5-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--5-col-phone.mdl-cell--5-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--6-col,
|
||||||
|
.mdl-cell--6-col-phone.mdl-cell--6-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--6-col-phone.mdl-cell--6-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--7-col,
|
||||||
|
.mdl-cell--7-col-phone.mdl-cell--7-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--7-col-phone.mdl-cell--7-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--8-col,
|
||||||
|
.mdl-cell--8-col-phone.mdl-cell--8-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--8-col-phone.mdl-cell--8-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--9-col,
|
||||||
|
.mdl-cell--9-col-phone.mdl-cell--9-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--9-col-phone.mdl-cell--9-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--10-col,
|
||||||
|
.mdl-cell--10-col-phone.mdl-cell--10-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--10-col-phone.mdl-cell--10-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--11-col,
|
||||||
|
.mdl-cell--11-col-phone.mdl-cell--11-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--11-col-phone.mdl-cell--11-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--12-col,
|
||||||
|
.mdl-cell--12-col-phone.mdl-cell--12-col-phone {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--12-col-phone.mdl-cell--12-col-phone {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--1-offset,
|
||||||
|
.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
|
||||||
|
margin-left: calc(25% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
|
||||||
|
margin-left: 25%; }
|
||||||
|
.mdl-cell--2-offset,
|
||||||
|
.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
|
||||||
|
margin-left: calc(50% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
|
||||||
|
margin-left: 50%; }
|
||||||
|
.mdl-cell--3-offset,
|
||||||
|
.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
|
||||||
|
margin-left: calc(75% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
|
||||||
|
margin-left: 75%; } }
|
||||||
|
|
||||||
|
@media (min-width: 480px) and (max-width: 839px) {
|
||||||
|
.mdl-grid {
|
||||||
|
padding: 8px; }
|
||||||
|
.mdl-cell {
|
||||||
|
margin: 8px;
|
||||||
|
width: calc(50% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell {
|
||||||
|
width: 50%; }
|
||||||
|
.mdl-cell--hide-tablet {
|
||||||
|
display: none !important; }
|
||||||
|
.mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
|
||||||
|
-webkit-order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1; }
|
||||||
|
.mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
|
||||||
|
-webkit-order: 2;
|
||||||
|
-ms-flex-order: 2;
|
||||||
|
order: 2; }
|
||||||
|
.mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
|
||||||
|
-webkit-order: 3;
|
||||||
|
-ms-flex-order: 3;
|
||||||
|
order: 3; }
|
||||||
|
.mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
|
||||||
|
-webkit-order: 4;
|
||||||
|
-ms-flex-order: 4;
|
||||||
|
order: 4; }
|
||||||
|
.mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
|
||||||
|
-webkit-order: 5;
|
||||||
|
-ms-flex-order: 5;
|
||||||
|
order: 5; }
|
||||||
|
.mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
|
||||||
|
-webkit-order: 6;
|
||||||
|
-ms-flex-order: 6;
|
||||||
|
order: 6; }
|
||||||
|
.mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
|
||||||
|
-webkit-order: 7;
|
||||||
|
-ms-flex-order: 7;
|
||||||
|
order: 7; }
|
||||||
|
.mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
|
||||||
|
-webkit-order: 8;
|
||||||
|
-ms-flex-order: 8;
|
||||||
|
order: 8; }
|
||||||
|
.mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
|
||||||
|
-webkit-order: 9;
|
||||||
|
-ms-flex-order: 9;
|
||||||
|
order: 9; }
|
||||||
|
.mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
|
||||||
|
-webkit-order: 10;
|
||||||
|
-ms-flex-order: 10;
|
||||||
|
order: 10; }
|
||||||
|
.mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
|
||||||
|
-webkit-order: 11;
|
||||||
|
-ms-flex-order: 11;
|
||||||
|
order: 11; }
|
||||||
|
.mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
|
||||||
|
-webkit-order: 12;
|
||||||
|
-ms-flex-order: 12;
|
||||||
|
order: 12; }
|
||||||
|
.mdl-cell--1-col,
|
||||||
|
.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
|
||||||
|
width: calc(12.5% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
|
||||||
|
width: 12.5%; }
|
||||||
|
.mdl-cell--2-col,
|
||||||
|
.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
|
||||||
|
width: calc(25% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
|
||||||
|
width: 25%; }
|
||||||
|
.mdl-cell--3-col,
|
||||||
|
.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
|
||||||
|
width: calc(37.5% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
|
||||||
|
width: 37.5%; }
|
||||||
|
.mdl-cell--4-col,
|
||||||
|
.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
|
||||||
|
width: calc(50% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
|
||||||
|
width: 50%; }
|
||||||
|
.mdl-cell--5-col,
|
||||||
|
.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
|
||||||
|
width: calc(62.5% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
|
||||||
|
width: 62.5%; }
|
||||||
|
.mdl-cell--6-col,
|
||||||
|
.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
|
||||||
|
width: calc(75% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
|
||||||
|
width: 75%; }
|
||||||
|
.mdl-cell--7-col,
|
||||||
|
.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
|
||||||
|
width: calc(87.5% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
|
||||||
|
width: 87.5%; }
|
||||||
|
.mdl-cell--8-col,
|
||||||
|
.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--9-col,
|
||||||
|
.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--10-col,
|
||||||
|
.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--11-col,
|
||||||
|
.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--12-col,
|
||||||
|
.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--1-offset,
|
||||||
|
.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
|
||||||
|
margin-left: calc(12.5% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
|
||||||
|
margin-left: 12.5%; }
|
||||||
|
.mdl-cell--2-offset,
|
||||||
|
.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
|
||||||
|
margin-left: calc(25% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
|
||||||
|
margin-left: 25%; }
|
||||||
|
.mdl-cell--3-offset,
|
||||||
|
.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
|
||||||
|
margin-left: calc(37.5% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
|
||||||
|
margin-left: 37.5%; }
|
||||||
|
.mdl-cell--4-offset,
|
||||||
|
.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
|
||||||
|
margin-left: calc(50% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
|
||||||
|
margin-left: 50%; }
|
||||||
|
.mdl-cell--5-offset,
|
||||||
|
.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
|
||||||
|
margin-left: calc(62.5% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
|
||||||
|
margin-left: 62.5%; }
|
||||||
|
.mdl-cell--6-offset,
|
||||||
|
.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
|
||||||
|
margin-left: calc(75% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
|
||||||
|
margin-left: 75%; }
|
||||||
|
.mdl-cell--7-offset,
|
||||||
|
.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
|
||||||
|
margin-left: calc(87.5% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
|
||||||
|
margin-left: 87.5%; } }
|
||||||
|
|
||||||
|
@media (min-width: 840px) {
|
||||||
|
.mdl-grid {
|
||||||
|
padding: 8px; }
|
||||||
|
.mdl-cell {
|
||||||
|
margin: 8px;
|
||||||
|
width: calc(33.3333333333% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell {
|
||||||
|
width: 33.3333333333%; }
|
||||||
|
.mdl-cell--hide-desktop {
|
||||||
|
display: none !important; }
|
||||||
|
.mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
|
||||||
|
-webkit-order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1; }
|
||||||
|
.mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
|
||||||
|
-webkit-order: 2;
|
||||||
|
-ms-flex-order: 2;
|
||||||
|
order: 2; }
|
||||||
|
.mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
|
||||||
|
-webkit-order: 3;
|
||||||
|
-ms-flex-order: 3;
|
||||||
|
order: 3; }
|
||||||
|
.mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
|
||||||
|
-webkit-order: 4;
|
||||||
|
-ms-flex-order: 4;
|
||||||
|
order: 4; }
|
||||||
|
.mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
|
||||||
|
-webkit-order: 5;
|
||||||
|
-ms-flex-order: 5;
|
||||||
|
order: 5; }
|
||||||
|
.mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
|
||||||
|
-webkit-order: 6;
|
||||||
|
-ms-flex-order: 6;
|
||||||
|
order: 6; }
|
||||||
|
.mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
|
||||||
|
-webkit-order: 7;
|
||||||
|
-ms-flex-order: 7;
|
||||||
|
order: 7; }
|
||||||
|
.mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
|
||||||
|
-webkit-order: 8;
|
||||||
|
-ms-flex-order: 8;
|
||||||
|
order: 8; }
|
||||||
|
.mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
|
||||||
|
-webkit-order: 9;
|
||||||
|
-ms-flex-order: 9;
|
||||||
|
order: 9; }
|
||||||
|
.mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
|
||||||
|
-webkit-order: 10;
|
||||||
|
-ms-flex-order: 10;
|
||||||
|
order: 10; }
|
||||||
|
.mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
|
||||||
|
-webkit-order: 11;
|
||||||
|
-ms-flex-order: 11;
|
||||||
|
order: 11; }
|
||||||
|
.mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
|
||||||
|
-webkit-order: 12;
|
||||||
|
-ms-flex-order: 12;
|
||||||
|
order: 12; }
|
||||||
|
.mdl-cell--1-col,
|
||||||
|
.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
|
||||||
|
width: calc(8.3333333333% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
|
||||||
|
width: 8.3333333333%; }
|
||||||
|
.mdl-cell--2-col,
|
||||||
|
.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
|
||||||
|
width: calc(16.6666666667% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
|
||||||
|
width: 16.6666666667%; }
|
||||||
|
.mdl-cell--3-col,
|
||||||
|
.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
|
||||||
|
width: calc(25% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
|
||||||
|
width: 25%; }
|
||||||
|
.mdl-cell--4-col,
|
||||||
|
.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
|
||||||
|
width: calc(33.3333333333% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
|
||||||
|
width: 33.3333333333%; }
|
||||||
|
.mdl-cell--5-col,
|
||||||
|
.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
|
||||||
|
width: calc(41.6666666667% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
|
||||||
|
width: 41.6666666667%; }
|
||||||
|
.mdl-cell--6-col,
|
||||||
|
.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
|
||||||
|
width: calc(50% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
|
||||||
|
width: 50%; }
|
||||||
|
.mdl-cell--7-col,
|
||||||
|
.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
|
||||||
|
width: calc(58.3333333333% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
|
||||||
|
width: 58.3333333333%; }
|
||||||
|
.mdl-cell--8-col,
|
||||||
|
.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
|
||||||
|
width: calc(66.6666666667% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
|
||||||
|
width: 66.6666666667%; }
|
||||||
|
.mdl-cell--9-col,
|
||||||
|
.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
|
||||||
|
width: calc(75% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
|
||||||
|
width: 75%; }
|
||||||
|
.mdl-cell--10-col,
|
||||||
|
.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
|
||||||
|
width: calc(83.3333333333% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
|
||||||
|
width: 83.3333333333%; }
|
||||||
|
.mdl-cell--11-col,
|
||||||
|
.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
|
||||||
|
width: calc(91.6666666667% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
|
||||||
|
width: 91.6666666667%; }
|
||||||
|
.mdl-cell--12-col,
|
||||||
|
.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
.mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
|
||||||
|
width: 100%; }
|
||||||
|
.mdl-cell--1-offset,
|
||||||
|
.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
|
||||||
|
margin-left: calc(8.3333333333% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
|
||||||
|
margin-left: 8.3333333333%; }
|
||||||
|
.mdl-cell--2-offset,
|
||||||
|
.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
|
||||||
|
margin-left: calc(16.6666666667% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
|
||||||
|
margin-left: 16.6666666667%; }
|
||||||
|
.mdl-cell--3-offset,
|
||||||
|
.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
|
||||||
|
margin-left: calc(25% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
|
||||||
|
margin-left: 25%; }
|
||||||
|
.mdl-cell--4-offset,
|
||||||
|
.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
|
||||||
|
margin-left: calc(33.3333333333% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
|
||||||
|
margin-left: 33.3333333333%; }
|
||||||
|
.mdl-cell--5-offset,
|
||||||
|
.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
|
||||||
|
margin-left: calc(41.6666666667% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
|
||||||
|
margin-left: 41.6666666667%; }
|
||||||
|
.mdl-cell--6-offset,
|
||||||
|
.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
|
||||||
|
margin-left: calc(50% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
|
||||||
|
margin-left: 50%; }
|
||||||
|
.mdl-cell--7-offset,
|
||||||
|
.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
|
||||||
|
margin-left: calc(58.3333333333% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
|
||||||
|
margin-left: 58.3333333333%; }
|
||||||
|
.mdl-cell--8-offset,
|
||||||
|
.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
|
||||||
|
margin-left: calc(66.6666666667% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
|
||||||
|
margin-left: 66.6666666667%; }
|
||||||
|
.mdl-cell--9-offset,
|
||||||
|
.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
|
||||||
|
margin-left: calc(75% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
|
||||||
|
margin-left: 75%; }
|
||||||
|
.mdl-cell--10-offset,
|
||||||
|
.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
|
||||||
|
margin-left: calc(83.3333333333% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
|
||||||
|
margin-left: 83.3333333333%; }
|
||||||
|
.mdl-cell--11-offset,
|
||||||
|
.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
|
||||||
|
margin-left: calc(91.6666666667% + 8px); }
|
||||||
|
.mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
|
||||||
|
.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
|
||||||
|
margin-left: 91.6666666667%; } }
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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.
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
# Material Design Lite
|
||||||
|
|
||||||
|
[](https://badge.fury.io/gh/google%2Fmaterial-design-lite)
|
||||||
|
[](https://badge.fury.io/js/material-design-lite)
|
||||||
|
[](https://badge.fury.io/bo/material-design-lite)
|
||||||
|
[](https://gitter.im/google/material-design-lite)
|
||||||
|
[](https://david-dm.org/google/material-design-lite)
|
||||||
|
|
||||||
|
> An implementation of [Material Design](http://www.google.com/design/spec/material-design/introduction.html)
|
||||||
|
components in vanilla CSS, JS, and HTML.
|
||||||
|
|
||||||
|
Material Design Lite (MDL) lets you add a Material Design look and feel to your
|
||||||
|
static content websites. It doesn't rely on any JavaScript frameworks or
|
||||||
|
libraries. Optimized for cross-device use, gracefully degrades in older
|
||||||
|
browsers, and offers an experience that is accessible from the get-go.
|
||||||
|
|
||||||
|
## Want to contribute?
|
||||||
|
|
||||||
|
If you found a bug, have any questions or want to contribute. Follow our
|
||||||
|
[guidelines](https://github.com/google/material-design-lite/blob/master/CONTRIBUTING.md),
|
||||||
|
and help improve the Material Design Lite. For more information visit our
|
||||||
|
[wiki](https://github.com/google/material-design-lite/wiki).
|
||||||
|
|
||||||
|
If you are submitting a bug fix or a new component for the 1.x line, please send those into `mdl-1.x` currently.
|
||||||
|
|
||||||
|
The `master` branch is where we are working on 2.0.
|
||||||
|
It is currently **highly** experimental and no support building or using it will be provided.
|
||||||
|
|
||||||
|
## Use MDL on your site?
|
||||||
|
|
||||||
|
**This document is targeted at developers that will contribute to or compile
|
||||||
|
MDL. If you are looking to use MDL on your website or web app please head to
|
||||||
|
[getmdl.io](http://getmdl.io).**
|
||||||
|
|
||||||
|
## Browser Support in v1
|
||||||
|
|
||||||
|
|
||||||
|
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|
||||||
|
|-----|------|------|--------|-------|---------|--------|------------------|---------------|
|
||||||
|
| B | A | A | A | A | A | A | A | A |
|
||||||
|
|
||||||
|
A-grade browsers are fully supported. B-grade browsers will gracefully degrade
|
||||||
|
to our CSS-only experience.
|
||||||
|
|
||||||
|
## Browser Support in v2 (in development)
|
||||||
|
|
||||||
|
Supported evergreen browsers:
|
||||||
|
|
||||||
|
- Chrome
|
||||||
|
- Edge
|
||||||
|
- Firefox
|
||||||
|
- Opera
|
||||||
|
|
||||||
|
Supported versioned browsers:
|
||||||
|
|
||||||
|
- Internet Explorer 11
|
||||||
|
- Safari 8
|
||||||
|
- Mobile Safari 8
|
||||||
|
|
||||||
|
### Download / Clone
|
||||||
|
|
||||||
|
Clone the repo using Git:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/google/material-design-lite.git
|
||||||
|
```
|
||||||
|
|
||||||
|
Alternatively you can [download](https://github.com/google/material-design-lite/archive/master.zip)
|
||||||
|
this repository.
|
||||||
|
|
||||||
|
Windows users, if you have trouble compiling due to line endings then make sure
|
||||||
|
you configure git to checkout the repository with `lf` (unix) line endings. This
|
||||||
|
can be achieved by setting `core.eol`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git config core.eol lf
|
||||||
|
git config core.autocrlf input
|
||||||
|
git rm --cached -r .
|
||||||
|
git reset --hard
|
||||||
|
```
|
||||||
|
|
||||||
|
> Remember, the master branch is considered unstable. Do not use this in
|
||||||
|
production. Use a tagged state of the repository, npm, or bower for stability!
|
||||||
|
|
||||||
|
## Feature requests
|
||||||
|
|
||||||
|
If you find MDL doesn't contain a particular component you think would be
|
||||||
|
useful, please check the issue tracker in case work has already started on it.
|
||||||
|
If not, you can request a [new component](https://github.com/Google/material-design-lite/issues/new?title=[Component%20Request]%20{Component}&body=Please%20include:%0A*%20Description%0A*%20Material%20Design%20Spec%20link%0A*%20Use%20Case%28s%29).
|
||||||
|
Please keep in mind that one of the goals of MDL is to adhere to the Material
|
||||||
|
Design specs and therefore some requests might not be within the scope of this
|
||||||
|
project.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
© Google, 2015. Licensed under an
|
||||||
|
[Apache-2](https://github.com/google/material-design-lite/blob/master/LICENSE)
|
||||||
|
license.
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "material-design-lite",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"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"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -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
3977
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/material.js
vendored
Normal file
3977
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/material.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/material.min.css
vendored
Normal file
9
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/material.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
10
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/material.min.js
vendored
Normal file
10
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/material.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,114 @@
|
|||||||
|
{
|
||||||
|
"name": "material-design-lite",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"description": "Material Design Components in CSS, JS and HTML",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"author": {
|
||||||
|
"name": "Google"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/google/material-design-lite.git"
|
||||||
|
},
|
||||||
|
"main": "dist/material.min.js",
|
||||||
|
"devDependencies": {
|
||||||
|
"acorn": "^3.3.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": "^5.0.0",
|
||||||
|
"gulp-css-inline-images": "^0.1.1",
|
||||||
|
"gulp-csso": "1.0.0",
|
||||||
|
"gulp-file": "^0.2.0",
|
||||||
|
"gulp-flatten": "^0.3.1",
|
||||||
|
"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": "^2.0.0",
|
||||||
|
"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": "^3.0.2",
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"gitHead": "eff220450b027466af5e8e070e47051b203d2d0f",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/google/material-design-lite/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/google/material-design-lite#readme",
|
||||||
|
"_id": "material-design-lite@1.2.1",
|
||||||
|
"_shasum": "09e5caab2575af8ee21b2630bff175c5a822c662",
|
||||||
|
"_from": "material-design-lite@*",
|
||||||
|
"_npmVersion": "3.10.3",
|
||||||
|
"_nodeVersion": "6.3.1",
|
||||||
|
"_npmUser": {
|
||||||
|
"name": "sgomes",
|
||||||
|
"email": "mail@sgomes.io"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"shasum": "09e5caab2575af8ee21b2630bff175c5a822c662",
|
||||||
|
"tarball": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.2.1.tgz"
|
||||||
|
},
|
||||||
|
"maintainers": [
|
||||||
|
{
|
||||||
|
"name": "addyosmani",
|
||||||
|
"email": "addyosmani@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "surma",
|
||||||
|
"email": "surma@surmair.de"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "sgomes",
|
||||||
|
"email": "mail@sgomes.io"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"_npmOperationalInternal": {
|
||||||
|
"host": "packages-16-east.internal.npmjs.com",
|
||||||
|
"tmp": "tmp/material-design-lite-1.2.1.tgz_1473348324818_0.17705722921527922"
|
||||||
|
},
|
||||||
|
"directories": {},
|
||||||
|
"_resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.2.1.tgz"
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
# Material Design Lite
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
**Material Design Light (MDL)** is a library of components for web developers based on Google's **Material Design** philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the MDL components. If you have not yet read the [Material Design Introduction](http://www.google.com/design/spec/material-design/introduction.html), you should do so before attempting to use the components.
|
||||||
|
|
||||||
|
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
|
||||||
|
|
||||||
|
The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more.
|
||||||
|
|
||||||
|
MDL is free to download and use, and may be used with or without any build library or development environment (such as [Material Design Lite](http://www.getmdl.io/)). It is a cross-browser, cross-OS web developer's toolkit that can be used by anyone who wants to write more productive, portable, and — most importantly — usable web pages.
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
|
||||||
|
### Get the components
|
||||||
|
To obtain the components, clone or download the [GitHub MDL repository](https://github.com/google/material-design-lite). Copy the entire package (the top-level folder and everything below it) to the project folder where you will write your HTML pages. This ensures that your project can access all of MDL's components and assets, and that you always have the original files for reference in case you break something. :-)
|
||||||
|
|
||||||
|
### Include the master CSS and JavaScript
|
||||||
|
In each HTML page in your project, include the minified (compressed) CSS and JavaScript files using standard relative-path references and the Material Icon font. This example assumes that a copy of the MDL package folders resides in your project folder.
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="css/material.min.css">
|
||||||
|
<script src="js/material.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
```
|
||||||
|
|
||||||
|
That's it! You are now ready to use the MDL components.
|
||||||
|
|
||||||
|
### Use the components
|
||||||
|
In general, follow these basic steps to use an MDL component in your HTML page.
|
||||||
|
|
||||||
|
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br><br>
|
||||||
|
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button` or `mdl-tabs__panel` again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br><br>
|
||||||
|
3. View the page, preferably in multiple browsers on multiple devices, to ensure that the component looks and behaves as expected.
|
||||||
|
|
||||||
|
>**A note about HTML elements and MDL CSS classes**
|
||||||
|
>Material Design Lite uses CSS *independent classes*, which can apply to any HTML element, to construct components. For some components, you can use almost any element. For other components, some elements give better visual or behavioral performance than others. The examples in each component's README file use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
|
||||||
|
|
||||||
|
## What's next?
|
||||||
|
Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in each component's `README.md` file. Working examples using various options are in each component's `demo.html` page.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||||
@ -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;
|
||||||
@ -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);
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -0,0 +1,592 @@
|
|||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* -----Tooltip
|
||||||
|
* -----Chip
|
||||||
|
*
|
||||||
|
* 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(#{$palette-grey-300})") !default;
|
||||||
|
$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !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;
|
||||||
|
|
||||||
|
/* CHIP */
|
||||||
|
$chip-bg-color: rgb(222, 222, 222) !default;
|
||||||
|
$chip-bg-active-color: rgb(214, 214, 214) !default;
|
||||||
|
$chip-height: 32px !default;
|
||||||
|
$chip-font-size: 13px !default;
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<div class="demo-preview-block demo-animation demo-js-animation">
|
||||||
|
<div class="demo-animation__container">
|
||||||
|
<div class="demo-animation__container-background">Click me to animate</div>
|
||||||
|
<div class="demo-animation__container-foreground"></div>
|
||||||
|
<div class="demo-animation__movable demo-animation--position-0 mdl-shadow--2dp"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
112
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/src/animation/demo.js
vendored
Normal file
112
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/src/animation/demo.js
vendored
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class constructor for Animation MDL component.
|
||||||
|
* Implements MDL component design pattern defined at:
|
||||||
|
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||||
|
* @param {HTMLElement} element The element that will be upgraded.
|
||||||
|
*/
|
||||||
|
function DemoAnimation(element) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
this.element_ = element;
|
||||||
|
this.position_ = this.Constant_.STARTING_POSITION;
|
||||||
|
this.movable_ = this.element_.querySelector('.' + this.CssClasses_.MOVABLE);
|
||||||
|
// Initialize instance.
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store strings for class names defined by this component that are used in
|
||||||
|
* JavaScript. This allows us to simply change it in one place should we
|
||||||
|
* decide to modify at a later date.
|
||||||
|
* @enum {string}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
DemoAnimation.prototype.CssClasses_ = {
|
||||||
|
MOVABLE: 'demo-animation__movable',
|
||||||
|
POSITION_PREFIX: 'demo-animation--position-',
|
||||||
|
FAST_OUT_SLOW_IN: 'mdl-animation--fast-out-slow-in',
|
||||||
|
LINEAR_OUT_SLOW_IN: 'mdl-animation--linear-out-slow-in',
|
||||||
|
FAST_OUT_LINEAR_IN: 'mdl-animation--fast-out-linear-in'
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store constants in one place so they can be updated easily.
|
||||||
|
* @enum {string | number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
DemoAnimation.prototype.Constant_ = {
|
||||||
|
STARTING_POSITION: 0,
|
||||||
|
// Which animation to use for which state. Check demo.css for an explanation.
|
||||||
|
ANIMATIONS: [
|
||||||
|
DemoAnimation.prototype.CssClasses_.FAST_OUT_LINEAR_IN,
|
||||||
|
DemoAnimation.prototype.CssClasses_.LINEAR_OUT_SLOW_IN,
|
||||||
|
DemoAnimation.prototype.CssClasses_.FAST_OUT_SLOW_IN,
|
||||||
|
DemoAnimation.prototype.CssClasses_.FAST_OUT_LINEAR_IN,
|
||||||
|
DemoAnimation.prototype.CssClasses_.LINEAR_OUT_SLOW_IN,
|
||||||
|
DemoAnimation.prototype.CssClasses_.FAST_OUT_SLOW_IN
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle click of element.
|
||||||
|
* @param {Event} event The event that fired.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
DemoAnimation.prototype.handleClick_ = function(event) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
this.movable_.classList.remove(this.CssClasses_.POSITION_PREFIX +
|
||||||
|
this.position_);
|
||||||
|
this.movable_.classList.remove(this.Constant_.ANIMATIONS[this.position_]);
|
||||||
|
|
||||||
|
this.position_++;
|
||||||
|
if (this.position_ > 5) {
|
||||||
|
this.position_ = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.movable_.classList.add(this.Constant_.ANIMATIONS[this.position_]);
|
||||||
|
this.movable_.classList.add(this.CssClasses_.POSITION_PREFIX +
|
||||||
|
this.position_);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize element.
|
||||||
|
*/
|
||||||
|
DemoAnimation.prototype.init = function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
if (this.element_) {
|
||||||
|
if (!this.movable_) {
|
||||||
|
console.error('Was expecting to find an element with class name ' +
|
||||||
|
this.CssClasses_.MOVABLE + ' inside of: ', this.element_);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.element_.addEventListener('click', this.handleClick_.bind(this));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// The component registers itself. It can assume componentHandler is available
|
||||||
|
// in the global scope.
|
||||||
|
componentHandler.register({
|
||||||
|
constructor: DemoAnimation,
|
||||||
|
classAsString: 'DemoAnimation',
|
||||||
|
cssClass: 'demo-js-animation'
|
||||||
|
});
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Material Design Lite (MDL) **badge** component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
|
||||||
|
|
||||||
|
You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:
|
||||||
|
|
||||||
|
* A "New messages" notification might be followed by a badge containing the number of unread messages.
|
||||||
|
* A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
|
||||||
|
* A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.
|
||||||
|
|
||||||
|
A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.
|
||||||
|
|
||||||
|
Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.
|
||||||
|
|
||||||
|
### To include an MDL **badge** component:
|
||||||
|
|
||||||
|
1. Code an `<a>` (anchor/link) or a `<span>` element. Include any desired attributes and content.
|
||||||
|
```html
|
||||||
|
<a href="#">This link has a badge.</a>
|
||||||
|
```
|
||||||
|
2. Add one or more MDL classes, separated by spaces, to the element using the `class` attribute.
|
||||||
|
```html
|
||||||
|
<a href="#" class="mdl-badge">This link has a badge.</a>
|
||||||
|
```
|
||||||
|
3. Add a `data-badge` attribute and quoted string value for the badge.
|
||||||
|
```html
|
||||||
|
<a href="#" class="mdl-badge" data-badge="5">This link has a badge.</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
The badge component is ready for use.
|
||||||
|
|
||||||
|
>**Note:** Because of the badge component's small size, the `data-badge` value should typically contain one to three characters. More than three characters will not cause an error, but some characters may fall outside the badge and thus be difficult or impossible to see. The value of the `data-badge` attribute is centered in the badge.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
A badge inside a link.
|
||||||
|
```html
|
||||||
|
<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
A badge near, but not included in, a link.
|
||||||
|
```html
|
||||||
|
<a href="#">This link is followed by a badge.</a>
|
||||||
|
<span class="mdl-badge" data-badge="12"></span>
|
||||||
|
```
|
||||||
|
|
||||||
|
A badge inside a link with too many characters to fit inside the badge.
|
||||||
|
```html
|
||||||
|
<a href="#" class="mdl-badge" data-badge="123456789">
|
||||||
|
This badge has too many characters.</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
A badge inside a link with no badge background color.
|
||||||
|
```html
|
||||||
|
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
|
||||||
|
This badge has no background color.</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration options
|
||||||
|
|
||||||
|
The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.
|
||||||
|
|
||||||
|
| MDL class | Effect | Remarks |
|
||||||
|
|-----------|--------|---------|
|
||||||
|
| `mdl-badge` | Defines badge as an MDL component | Required on span or link |
|
||||||
|
| `mdl-badge--no-background` | Applies open-circle effect to badge | Optional |
|
||||||
|
| `mdl-badge--overlap` | Make the badge overlap with its container | Optional |
|
||||||
|
| `data-badge="value"` | Assigns string value to badge | Not a class, but a separate attribute; required on span or link |
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
/**
|
||||||
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "../variables";
|
||||||
|
|
||||||
|
.mdl-badge {
|
||||||
|
position : relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: ($badge-size + $badge-padding);
|
||||||
|
|
||||||
|
&:not([data-badge]) {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-badge]:after {
|
||||||
|
content: attr(data-badge);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: -($badge-size / 2);
|
||||||
|
right: -($badge-size + $badge-padding);
|
||||||
|
|
||||||
|
.mdl-button & {
|
||||||
|
top: -10px;
|
||||||
|
right: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-family: $preferred_font;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: $badge-font-size;
|
||||||
|
width: $badge-size;
|
||||||
|
height: $badge-size;
|
||||||
|
border-radius : 50%;
|
||||||
|
|
||||||
|
background: $badge-background;
|
||||||
|
color: $badge-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mdl-badge--no-background {
|
||||||
|
&[data-badge]:after {
|
||||||
|
color: $badge-color-inverse;
|
||||||
|
background: $badge-background-inverse;
|
||||||
|
|
||||||
|
box-shadow: 0 0 1px gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mdl-badge--overlap {
|
||||||
|
margin-right: ($badge-size - $badge-overlap);
|
||||||
|
&:after {
|
||||||
|
right: -($badge-size - $badge-overlap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<style>
|
||||||
|
.demo-badge__badge-on-icon-icon .mdl-badge {
|
||||||
|
color: rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
.demo-badge__badge-on-icon-icon .mdl-badge.material-icons {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% include "badge-on-icon-icon.html" %}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<style>
|
||||||
|
.demo-badge__badge-on-icon-text .mdl-badge {
|
||||||
|
color: rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
.demo-badge__badge-on-icon-text .mdl-badge.material-icons {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% include "badge-on-icon-text.html" %}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<!-- Number badge on icon -->
|
||||||
|
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<style>
|
||||||
|
.demo-badge__badge-on-text-icon .mdl-badge {
|
||||||
|
color: rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% include "badge-on-text-icon.html" %}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<!-- Icon badge -->
|
||||||
|
<span class="mdl-badge" data-badge="♥">Mood</span>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<style>
|
||||||
|
.demo-badge__badge-on-text-text .mdl-badge {
|
||||||
|
color: rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{% include "badge-on-text-text.html" %}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<!-- Number badge -->
|
||||||
|
<span class="mdl-badge" data-badge="4">Inbox</span>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
|
||||||
|
|
||||||
|
Buttons are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the button component's [Material Design specifications page](http://www.google.com/design/spec/components/buttons.html) for details.
|
||||||
|
|
||||||
|
The available button display types are *flat* (default), *raised*, *fab*, *mini-fab*, and *icon*; any of these types may be plain (light gray) or *colored*, and may be initially or programmatically *disabled*. The *fab*, *mini-fab*, and *icon* button types typically use a small image as their caption rather than text.
|
||||||
|
|
||||||
|
### To include an MDL **button** component:
|
||||||
|
|
||||||
|
1. Code a `<button>` element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate.
|
||||||
|
```html
|
||||||
|
<button>Save</button>
|
||||||
|
```
|
||||||
|
2. Add one or more MDL classes, separated by spaces, to the button using the `class` attribute.
|
||||||
|
```html
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
The button component is ready for use.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
A button with the "raised" effect.
|
||||||
|
```html
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
A button with the "fab" effect.
|
||||||
|
```html
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--fab">OK</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
A button with the "icon" and "colored" effects.
|
||||||
|
```html
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Configuration options
|
||||||
|
|
||||||
|
The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects.
|
||||||
|
|
||||||
|
| MDL class | Effect | Remarks |
|
||||||
|
|-----------|--------|---------|
|
||||||
|
| `mdl-button` | Defines button as an MDL component | Required |
|
||||||
|
| `mdl-js-button` | Assigns basic MDL behavior to button | Required |
|
||||||
|
| (none) | Applies *flat* display effect to button (default) | |
|
||||||
|
| `mdl-button--raised` | Applies *raised* display effect | Mutually exclusive with *fab*, *mini-fab*, and *icon* |
|
||||||
|
| `mdl-button--fab` | Applies *fab* (circular) display effect | Mutually exclusive with *raised*, *mini-fab*, and *icon* |
|
||||||
|
| `mdl-button--mini-fab` | Applies *mini-fab* (small fab circular) display effect | Mutually exclusive with *raised*, *fab*, and *icon* |
|
||||||
|
| `mdl-button--icon` | Applies *icon* (small plain circular) display effect | Mutually exclusive with *raised*, *fab*, and *mini-fab* |
|
||||||
|
| `mdl-button--colored` | Applies *colored* display effect (primary or accent color, depending on the type of button) | Colors are defined in `material.min.css` |
|
||||||
|
| `mdl-button--primary` | Applies *primary* color display effect | Colors are defined in `material.min.css` |
|
||||||
|
| `mdl-button--accent` | Applies *accent* color display effect | Colors are defined in `material.min.css` |
|
||||||
|
| `mdl-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
|
||||||
|
|
||||||
|
>**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>`. Alternatively, the `mdl-button--disabled` class can be used to achieve the same style but it does not disable the functionality of the element.
|
||||||
|
>This attribute may be added or removed programmatically via scripting.
|
||||||
@ -0,0 +1,305 @@
|
|||||||
|
/**
|
||||||
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "../variables";
|
||||||
|
@import "../mixins";
|
||||||
|
|
||||||
|
// The button component. Defaults to a flat button.
|
||||||
|
.mdl-button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: $button-border-radius;
|
||||||
|
color: $button-secondary-color;
|
||||||
|
position: relative;
|
||||||
|
height: $button-height;
|
||||||
|
margin: 0;
|
||||||
|
min-width: $button-min-width;
|
||||||
|
padding: 0 $button-padding;
|
||||||
|
display: inline-block;
|
||||||
|
@include typo-button();
|
||||||
|
overflow: hidden;
|
||||||
|
will-change: box-shadow;
|
||||||
|
transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
|
||||||
|
background-color 0.2s $animation-curve-default,
|
||||||
|
color 0.2s $animation-curve-default;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: $button-height;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:not(:active) {
|
||||||
|
background-color: $button-focus-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mdl-button--colored {
|
||||||
|
color: $button-primary-color-alt;
|
||||||
|
|
||||||
|
&:focus:not(:active) {
|
||||||
|
background-color: $button-focus-color-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input.mdl-button[type="submit"] {
|
||||||
|
-webkit-appearance:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Raised buttons
|
||||||
|
.mdl-button--raised {
|
||||||
|
background: $button-primary-color;
|
||||||
|
@include shadow-2dp();
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include shadow-4dp();
|
||||||
|
background-color: $button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:not(:active) {
|
||||||
|
@include focus-shadow();
|
||||||
|
background-color: $button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mdl-button--colored {
|
||||||
|
background: $button-primary-color-alt;
|
||||||
|
color: $button-secondary-color-alt;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $button-hover-color-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $button-active-color-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:not(:active) {
|
||||||
|
background-color: $button-active-color-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .mdl-ripple {
|
||||||
|
background: $button-ripple-color-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// FABs
|
||||||
|
.mdl-button--fab {
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: $button-fab-font-size;
|
||||||
|
height: $button-fab-size;
|
||||||
|
margin: auto;
|
||||||
|
min-width: $button-fab-size;
|
||||||
|
width: $button-fab-size;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: $button-primary-color;
|
||||||
|
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
|
||||||
|
position: relative;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
& .material-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
|
||||||
|
line-height: $button-fab-font-size;
|
||||||
|
width: $button-fab-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mdl-button--mini-fab {
|
||||||
|
height: $button-fab-size-mini;
|
||||||
|
min-width: $button-fab-size-mini;
|
||||||
|
width: $button-fab-size-mini;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .mdl-button__ripple-container {
|
||||||
|
border-radius: 50%;
|
||||||
|
// Fixes clipping bug in Safari.
|
||||||
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include shadow-4dp();
|
||||||
|
background-color: $button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:not(:active) {
|
||||||
|
@include focus-shadow();
|
||||||
|
background-color: $button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mdl-button--colored {
|
||||||
|
background: $button-fab-color-alt;
|
||||||
|
color: $button-fab-text-color-alt;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $button-fab-hover-color-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:not(:active) {
|
||||||
|
background-color: $button-fab-active-color-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $button-fab-active-color-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .mdl-ripple {
|
||||||
|
background: $button-fab-ripple-color-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Icon buttons
|
||||||
|
.mdl-button--icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: $button-fab-font-size;
|
||||||
|
height: $button-icon-size;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
min-width: $button-icon-size;
|
||||||
|
width: $button-icon-size;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: inherit;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
& .material-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
|
||||||
|
line-height: $button-fab-font-size;
|
||||||
|
width: $button-fab-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mdl-button--mini-icon {
|
||||||
|
height: $button-icon-size-mini;
|
||||||
|
min-width: $button-icon-size-mini;
|
||||||
|
width: $button-icon-size-mini;
|
||||||
|
|
||||||
|
& .material-icons {
|
||||||
|
top: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||||
|
left: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .mdl-button__ripple-container {
|
||||||
|
border-radius: 50%;
|
||||||
|
// Fixes clipping bug in Safari.
|
||||||
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Ripples
|
||||||
|
.mdl-button__ripple-container {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.mdl-button[disabled] & .mdl-ripple,
|
||||||
|
.mdl-button.mdl-button--disabled & .mdl-ripple {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Colorized buttons
|
||||||
|
|
||||||
|
.mdl-button--primary.mdl-button--primary {
|
||||||
|
color: $button-primary-color-alt;
|
||||||
|
& .mdl-ripple {
|
||||||
|
background: $button-secondary-color-alt;
|
||||||
|
}
|
||||||
|
&.mdl-button--raised, &.mdl-button--fab {
|
||||||
|
color: $button-secondary-color-alt;
|
||||||
|
background-color: $button-primary-color-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-button--accent.mdl-button--accent {
|
||||||
|
color: $button-fab-color-alt;
|
||||||
|
& .mdl-ripple {
|
||||||
|
background: $button-fab-text-color-alt;
|
||||||
|
}
|
||||||
|
&.mdl-button--raised, &.mdl-button--fab {
|
||||||
|
color: $button-fab-text-color-alt;
|
||||||
|
background-color: $button-fab-color-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled buttons
|
||||||
|
|
||||||
|
.mdl-button {
|
||||||
|
// Bump up specificity by using [disabled] twice.
|
||||||
|
&[disabled][disabled],
|
||||||
|
&.mdl-button--disabled.mdl-button--disabled {
|
||||||
|
color: $button-secondary-color-disabled;
|
||||||
|
cursor: default;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--fab {
|
||||||
|
// Bump up specificity by using [disabled] twice.
|
||||||
|
&[disabled][disabled],
|
||||||
|
&.mdl-button--disabled.mdl-button--disabled {
|
||||||
|
background-color: $button-primary-color-disabled;
|
||||||
|
color: $button-secondary-color-disabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--raised {
|
||||||
|
// Bump up specificity by using [disabled] twice.
|
||||||
|
&[disabled][disabled],
|
||||||
|
&.mdl-button--disabled.mdl-button--disabled {
|
||||||
|
background-color: $button-primary-color-disabled;
|
||||||
|
color: $button-secondary-color-disabled;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--colored {
|
||||||
|
// Bump up specificity by using [disabled] twice.
|
||||||
|
&[disabled][disabled],
|
||||||
|
&.mdl-button--disabled.mdl-button--disabled {
|
||||||
|
color: $button-secondary-color-disabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Align icons inside buttons with text
|
||||||
|
.mdl-button .material-icons {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
123
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/src/button/button.js
vendored
Normal file
123
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/src/button/button.js
vendored
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class constructor for Button MDL component.
|
||||||
|
* Implements MDL component design pattern defined at:
|
||||||
|
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||||
|
*
|
||||||
|
* @param {HTMLElement} element The element that will be upgraded.
|
||||||
|
*/
|
||||||
|
var MaterialButton = function MaterialButton(element) {
|
||||||
|
this.element_ = element;
|
||||||
|
|
||||||
|
// Initialize instance.
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
window['MaterialButton'] = MaterialButton;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store constants in one place so they can be updated easily.
|
||||||
|
*
|
||||||
|
* @enum {string | number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialButton.prototype.Constant_ = {
|
||||||
|
// None for now.
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store strings for class names defined by this component that are used in
|
||||||
|
* JavaScript. This allows us to simply change it in one place should we
|
||||||
|
* decide to modify at a later date.
|
||||||
|
*
|
||||||
|
* @enum {string}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialButton.prototype.CssClasses_ = {
|
||||||
|
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||||
|
RIPPLE_CONTAINER: 'mdl-button__ripple-container',
|
||||||
|
RIPPLE: 'mdl-ripple'
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle blur of element.
|
||||||
|
*
|
||||||
|
* @param {Event} event The event that fired.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialButton.prototype.blurHandler_ = function(event) {
|
||||||
|
if (event) {
|
||||||
|
this.element_.blur();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Public methods.
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable button.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialButton.prototype.disable = function() {
|
||||||
|
this.element_.disabled = true;
|
||||||
|
};
|
||||||
|
MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enable button.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialButton.prototype.enable = function() {
|
||||||
|
this.element_.disabled = false;
|
||||||
|
};
|
||||||
|
MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize element.
|
||||||
|
*/
|
||||||
|
MaterialButton.prototype.init = function() {
|
||||||
|
if (this.element_) {
|
||||||
|
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
|
||||||
|
var rippleContainer = document.createElement('span');
|
||||||
|
rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
|
||||||
|
this.rippleElement_ = document.createElement('span');
|
||||||
|
this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
|
||||||
|
rippleContainer.appendChild(this.rippleElement_);
|
||||||
|
this.boundRippleBlurHandler = this.blurHandler_.bind(this);
|
||||||
|
this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
|
||||||
|
this.element_.appendChild(rippleContainer);
|
||||||
|
}
|
||||||
|
this.boundButtonBlurHandler = this.blurHandler_.bind(this);
|
||||||
|
this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
|
||||||
|
this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// The component registers itself. It can assume componentHandler is available
|
||||||
|
// in the global scope.
|
||||||
|
componentHandler.register({
|
||||||
|
constructor: MaterialButton,
|
||||||
|
classAsString: 'MaterialButton',
|
||||||
|
cssClass: 'mdl-js-button',
|
||||||
|
widget: true
|
||||||
|
});
|
||||||
|
})();
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Colored FAB button with ripple -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
|
||||||
|
<i class="material-icons">add</i>
|
||||||
|
</button>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- FAB button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--fab">
|
||||||
|
<i class="material-icons">add</i>
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Accent-colored flat button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--accent">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Disabled flat button -->
|
||||||
|
<button class="mdl-button mdl-js-button" disabled>
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Primary-colored flat button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--primary">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Flat button with ripple -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Flat button -->
|
||||||
|
<button class="mdl-button mdl-js-button">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -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>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Icon button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--icon">
|
||||||
|
<i class="material-icons">mood</i>
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Accent-colored raised button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Colored raised button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Raised disabled button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Accent-colored raised button with ripple -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Raised button with ripple -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Raised button -->
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Material Design Lite (MDL) **card** component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject.
|
||||||
|
|
||||||
|
Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.
|
||||||
|
|
||||||
|
Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's [Material Design specifications page](http://www.google.com/design/spec/components/cards.html) for details.
|
||||||
|
|
||||||
|
### To include an MDL **card** component:
|
||||||
|
|
||||||
|
1. Code a `<div>` element; this is the "outer" container, intended to hold all of the card's content.
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
2. Inside the div, code one or more "inner" divs, one for each desired content block. A card containing a title, an image, some text, and an action bar would contain four "inner" divs, all siblings.
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
3. Add one or more MDL classes, separated by spaces, to the "outer" div and the "inner" divs (depending on their intended use) using the `class` attribute.
|
||||||
|
```html
|
||||||
|
<div class="mdl-card">
|
||||||
|
<div class="mdl-card__title">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__media">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__supporting-text">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__actions">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
4. Add content to each "inner" div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.
|
||||||
|
```html
|
||||||
|
<div class="mdl-card">
|
||||||
|
<div class="mdl-card__title">
|
||||||
|
<h2 class="mdl-card__title-text">title Text Goes Here</h2>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__media">
|
||||||
|
<img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__supporting-text">
|
||||||
|
This text might describe the photo and provide further information, such as where and
|
||||||
|
when it was taken.
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__actions">
|
||||||
|
<a href="(URL or function)">Related Action</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
The card component is ready for use.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
A card (no shadow) with a title, image, text, and action.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="mdl-card">
|
||||||
|
<div class="mdl-card__title">
|
||||||
|
<h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__media">
|
||||||
|
<img src="skytower.jpg" width="173" height="157" border="0" alt=""
|
||||||
|
style="padding:10px;">
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__supporting-text">
|
||||||
|
The Sky Tower is an observation and telecommunications tower located in Auckland,
|
||||||
|
New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
|
||||||
|
in the Southern Hemisphere.
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__actions">
|
||||||
|
<a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Card (level-3 shadow) with an image, caption, and text:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="mdl-card mdl-shadow--4dp">
|
||||||
|
<div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0"
|
||||||
|
alt="" style="padding:10px;">
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__supporting-text">
|
||||||
|
Auckland Sky Tower, taken March 24th, 2014
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__supporting-text">
|
||||||
|
The Sky Tower is an observation and telecommunications tower located in Auckland,
|
||||||
|
New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
|
||||||
|
in the Southern Hemisphere.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration options
|
||||||
|
|
||||||
|
The MDL CSS classes apply various predefined visual and behavioral enhancements to the card. The table below lists the available classes and their effects.
|
||||||
|
|
||||||
|
| MDL class | Effect | Remarks |
|
||||||
|
|-----------|--------|---------|
|
||||||
|
| `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
|
||||||
|
| `mdl-card--border` | Adds a border to the card section that it's applied to | Used on the "inner" divs |
|
||||||
|
| `mdl-shadow--2dp through mdl-shadow--16dp` | Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
|
||||||
|
| `mdl-card__title` | Defines div as a card title container | Required on "inner" title div |
|
||||||
|
| `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |
|
||||||
|
| `mdl-card__subtitle-text` | Assigns text characteristics to a card subtitle | Optional. Should be a child of the title element. |
|
||||||
|
| `mdl-card__media` | Defines div as a card media container | Required on "inner" media div |
|
||||||
|
| `mdl-card__supporting-text` | Defines div as a card body text container and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
|
||||||
|
| `mdl-card__actions` | Defines div as a card actions container and assigns appropriate text characteristics to actions text | Required on "inner" actions div; content goes directly inside the div with no intervening containers |
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Material Design Lite (MDL) **checkbox** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.
|
||||||
|
|
||||||
|
Checkboxes are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the checkbox component's [Material Design specifications page](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) for details.
|
||||||
|
|
||||||
|
The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
|
||||||
|
|
||||||
|
### To include an MDL **checkbox** component:
|
||||||
|
|
||||||
|
1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the checkbox it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity.
|
||||||
|
```html
|
||||||
|
<label for="chkbox1">
|
||||||
|
...
|
||||||
|
</label>
|
||||||
|
```
|
||||||
|
2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
|
||||||
|
```html
|
||||||
|
<label for="chkbox1">
|
||||||
|
<input type="checkbox" id="chkbox1">
|
||||||
|
</label>
|
||||||
|
```
|
||||||
|
3. Also inside the label, after the checkbox, code a `<span>` element containing the checkbox's text caption.
|
||||||
|
```html
|
||||||
|
<label for="chkbox1">
|
||||||
|
<input type="checkbox" id="chkbox1">
|
||||||
|
<span>Enable AutoSave</span>
|
||||||
|
</label>
|
||||||
|
```
|
||||||
|
4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
|
||||||
|
```html
|
||||||
|
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
|
||||||
|
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
|
||||||
|
<span class="mdl-checkbox__label">Enable AutoSave</span>
|
||||||
|
</label>
|
||||||
|
```
|
||||||
|
|
||||||
|
The checkbox component is ready for use.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
A checkbox with a ripple click effect.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||||
|
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
|
||||||
|
<span class="mdl-checkbox__label">Enable AutoSave</span>
|
||||||
|
</label>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration options
|
||||||
|
|
||||||
|
The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects.
|
||||||
|
|
||||||
|
| MDL class | Effect | Remarks |
|
||||||
|
|-----------|--------|---------|
|
||||||
|
| `mdl-checkbox` | Defines label as an MDL component | Required on label element|
|
||||||
|
| `mdl-js-checkbox` | Assigns basic MDL behavior to label | Required on label element |
|
||||||
|
| `mdl-checkbox__input` | Applies basic MDL behavior to checkbox | Required on input element (checkbox) |
|
||||||
|
| `mdl-checkbox__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||||
|
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (checkbox) |
|
||||||
|
|
||||||
|
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled>`
|
||||||
|
>This attribute may be added or removed programmatically via scripting.
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
/**
|
||||||
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "../variables";
|
||||||
|
@import "../mixins";
|
||||||
|
|
||||||
|
.mdl-checkbox {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: $checkbox-label-height;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&.is-upgraded {
|
||||||
|
padding-left: $checkbox-button-size + $checkbox-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox__input {
|
||||||
|
line-height: $checkbox-label-height;
|
||||||
|
|
||||||
|
.mdl-checkbox.is-upgraded & {
|
||||||
|
// Hide input element, while still making it respond to focus.
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
opacity: 0;
|
||||||
|
-ms-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox__box-outline {
|
||||||
|
position: absolute;
|
||||||
|
top: $checkbox-top-offset;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: $checkbox-button-size;
|
||||||
|
height: $checkbox-button-size;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
border: 2px solid $checkbox-off-color;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.mdl-checkbox.is-checked & {
|
||||||
|
border: 2px solid $checkbox-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset[disabled] .mdl-checkbox &,
|
||||||
|
.mdl-checkbox.is-disabled & {
|
||||||
|
border: 2px solid $checkbox-disabled-color;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox__focus-helper {
|
||||||
|
position: absolute;
|
||||||
|
top: $checkbox-top-offset;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: $checkbox-button-size;
|
||||||
|
height: $checkbox-button-size;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
.mdl-checkbox.is-focused & {
|
||||||
|
box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox.is-focused.is-checked & {
|
||||||
|
box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
|
||||||
|
background-color: $checkbox-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox__tick-outline {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
mask: url("#{$checkbox-image-path}/tick-mask.svg?embed");
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
@include material-animation-default(0.28s);
|
||||||
|
transition-property: background;
|
||||||
|
|
||||||
|
.mdl-checkbox.is-checked & {
|
||||||
|
background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed");
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset[disabled] .mdl-checkbox.is-checked &,
|
||||||
|
.mdl-checkbox.is-checked.is-disabled & {
|
||||||
|
background: $checkbox-disabled-color url("#{$checkbox-image-path}/tick.svg?embed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox__label {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: $checkbox-label-font-size;
|
||||||
|
line-height: $checkbox-label-height;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
fieldset[disabled] .mdl-checkbox &,
|
||||||
|
.mdl-checkbox.is-disabled & {
|
||||||
|
color: $checkbox-disabled-color;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-checkbox__ripple-container {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
|
||||||
|
left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: $checkbox-ripple-size;
|
||||||
|
height: $checkbox-ripple-size;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||||
|
|
||||||
|
& .mdl-ripple {
|
||||||
|
background: $checkbox-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset[disabled] .mdl-checkbox &,
|
||||||
|
.mdl-checkbox.is-disabled & {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset[disabled] .mdl-checkbox & .mdl-ripple,
|
||||||
|
.mdl-checkbox.is-disabled & .mdl-ripple {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
269
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/src/checkbox/checkbox.js
vendored
Normal file
269
SRC/iMES_PAD/JSplugins/angular-material-lite/material-design-lite/src/checkbox/checkbox.js
vendored
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class constructor for Checkbox MDL component.
|
||||||
|
* Implements MDL component design pattern defined at:
|
||||||
|
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {HTMLElement} element The element that will be upgraded.
|
||||||
|
*/
|
||||||
|
var MaterialCheckbox = function MaterialCheckbox(element) {
|
||||||
|
this.element_ = element;
|
||||||
|
|
||||||
|
// Initialize instance.
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
window['MaterialCheckbox'] = MaterialCheckbox;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store constants in one place so they can be updated easily.
|
||||||
|
*
|
||||||
|
* @enum {string | number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.Constant_ = {
|
||||||
|
TINY_TIMEOUT: 0.001
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store strings for class names defined by this component that are used in
|
||||||
|
* JavaScript. This allows us to simply change it in one place should we
|
||||||
|
* decide to modify at a later date.
|
||||||
|
*
|
||||||
|
* @enum {string}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.CssClasses_ = {
|
||||||
|
INPUT: 'mdl-checkbox__input',
|
||||||
|
BOX_OUTLINE: 'mdl-checkbox__box-outline',
|
||||||
|
FOCUS_HELPER: 'mdl-checkbox__focus-helper',
|
||||||
|
TICK_OUTLINE: 'mdl-checkbox__tick-outline',
|
||||||
|
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||||
|
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||||
|
RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
|
||||||
|
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||||
|
RIPPLE: 'mdl-ripple',
|
||||||
|
IS_FOCUSED: 'is-focused',
|
||||||
|
IS_DISABLED: 'is-disabled',
|
||||||
|
IS_CHECKED: 'is-checked',
|
||||||
|
IS_UPGRADED: 'is-upgraded'
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle change of state.
|
||||||
|
*
|
||||||
|
* @param {Event} event The event that fired.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.onChange_ = function(event) {
|
||||||
|
this.updateClasses_();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle focus of element.
|
||||||
|
*
|
||||||
|
* @param {Event} event The event that fired.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.onFocus_ = function(event) {
|
||||||
|
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle lost focus of element.
|
||||||
|
*
|
||||||
|
* @param {Event} event The event that fired.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.onBlur_ = function(event) {
|
||||||
|
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle mouseup.
|
||||||
|
*
|
||||||
|
* @param {Event} event The event that fired.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.onMouseUp_ = function(event) {
|
||||||
|
this.blur_();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle class updates.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.updateClasses_ = function() {
|
||||||
|
this.checkDisabled();
|
||||||
|
this.checkToggleState();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add blur.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.blur_ = function() {
|
||||||
|
// TODO: figure out why there's a focus event being fired after our blur,
|
||||||
|
// so that we can avoid this hack.
|
||||||
|
window.setTimeout(function() {
|
||||||
|
this.inputElement_.blur();
|
||||||
|
}.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Public methods.
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check the inputs toggle state and update display.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.checkToggleState = function() {
|
||||||
|
if (this.inputElement_.checked) {
|
||||||
|
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||||
|
} else {
|
||||||
|
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
MaterialCheckbox.prototype['checkToggleState'] =
|
||||||
|
MaterialCheckbox.prototype.checkToggleState;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check the inputs disabled state and update display.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.checkDisabled = function() {
|
||||||
|
if (this.inputElement_.disabled) {
|
||||||
|
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||||
|
} else {
|
||||||
|
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
MaterialCheckbox.prototype['checkDisabled'] =
|
||||||
|
MaterialCheckbox.prototype.checkDisabled;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable checkbox.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.disable = function() {
|
||||||
|
this.inputElement_.disabled = true;
|
||||||
|
this.updateClasses_();
|
||||||
|
};
|
||||||
|
MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enable checkbox.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.enable = function() {
|
||||||
|
this.inputElement_.disabled = false;
|
||||||
|
this.updateClasses_();
|
||||||
|
};
|
||||||
|
MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check checkbox.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.check = function() {
|
||||||
|
this.inputElement_.checked = true;
|
||||||
|
this.updateClasses_();
|
||||||
|
};
|
||||||
|
MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Uncheck checkbox.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.uncheck = function() {
|
||||||
|
this.inputElement_.checked = false;
|
||||||
|
this.updateClasses_();
|
||||||
|
};
|
||||||
|
MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize element.
|
||||||
|
*/
|
||||||
|
MaterialCheckbox.prototype.init = function() {
|
||||||
|
if (this.element_) {
|
||||||
|
this.inputElement_ = this.element_.querySelector('.' +
|
||||||
|
this.CssClasses_.INPUT);
|
||||||
|
|
||||||
|
var boxOutline = document.createElement('span');
|
||||||
|
boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
|
||||||
|
|
||||||
|
var tickContainer = document.createElement('span');
|
||||||
|
tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
|
||||||
|
|
||||||
|
var tickOutline = document.createElement('span');
|
||||||
|
tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
|
||||||
|
|
||||||
|
boxOutline.appendChild(tickOutline);
|
||||||
|
|
||||||
|
this.element_.appendChild(tickContainer);
|
||||||
|
this.element_.appendChild(boxOutline);
|
||||||
|
|
||||||
|
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
|
||||||
|
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
||||||
|
this.rippleContainerElement_ = document.createElement('span');
|
||||||
|
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
|
||||||
|
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
|
||||||
|
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
||||||
|
this.boundRippleMouseUp = this.onMouseUp_.bind(this);
|
||||||
|
this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
|
||||||
|
|
||||||
|
var ripple = document.createElement('span');
|
||||||
|
ripple.classList.add(this.CssClasses_.RIPPLE);
|
||||||
|
|
||||||
|
this.rippleContainerElement_.appendChild(ripple);
|
||||||
|
this.element_.appendChild(this.rippleContainerElement_);
|
||||||
|
}
|
||||||
|
this.boundInputOnChange = this.onChange_.bind(this);
|
||||||
|
this.boundInputOnFocus = this.onFocus_.bind(this);
|
||||||
|
this.boundInputOnBlur = this.onBlur_.bind(this);
|
||||||
|
this.boundElementMouseUp = this.onMouseUp_.bind(this);
|
||||||
|
this.inputElement_.addEventListener('change', this.boundInputOnChange);
|
||||||
|
this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
|
||||||
|
this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
|
||||||
|
this.element_.addEventListener('mouseup', this.boundElementMouseUp);
|
||||||
|
|
||||||
|
this.updateClasses_();
|
||||||
|
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// The component registers itself. It can assume componentHandler is available
|
||||||
|
// in the global scope.
|
||||||
|
componentHandler.register({
|
||||||
|
constructor: MaterialCheckbox,
|
||||||
|
classAsString: 'MaterialCheckbox',
|
||||||
|
cssClass: 'mdl-js-checkbox',
|
||||||
|
widget: true
|
||||||
|
});
|
||||||
|
})();
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Material Design Lite (MDL) **chip** component is a small, interactive element.
|
||||||
|
Chips are commonly used for contacts, text, rules, icons, and photos.
|
||||||
|
|
||||||
|
## TO INCLUDE AN MDL CHIP COMPONENT:
|
||||||
|
|
||||||
|
1. Create a container element for the chip; typically `<span>` and `<div>` are used, but any container element should work equally well. If you need interactivity, use a `<button>`, or add the `tabindex` attribute to your container.
|
||||||
|
```html
|
||||||
|
<span>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Add in the text wrapper and the MDL classes.
|
||||||
|
```html
|
||||||
|
<span class="mdl-chip">
|
||||||
|
<span class="mdl-chip__text">Chip Text</span>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
3. For deletable chips, add in the delete icon. This can be an `<a>`, `<button>` or non-interactive tags like `<span>`.
|
||||||
|
```html
|
||||||
|
<span class="mdl-chip">
|
||||||
|
<span class="mdl-chip__text">Chip Text</span>
|
||||||
|
<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Contact chips need to have the `mdl-chip--contact` class added to the container, along with another container for the contact icon. The icon container for photos is typically an `<img>` tag, but other types of content can be used with a little extra supporting css.
|
||||||
|
```html
|
||||||
|
<span class="mdl-chip">
|
||||||
|
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
|
||||||
|
<span class="mdl-chip__text">Chip Text</span>
|
||||||
|
<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
A button based contact chip whose contact image is a `<span>` with a `background-image`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.demo-chip .mdl-chip__contact {
|
||||||
|
background-image: url("./path/to/image");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<button class="mdl-chip demo-chip">
|
||||||
|
<span class="mdl-chip__contact"> </span>
|
||||||
|
<span class="mdl-chip__text">Chip Text</span>
|
||||||
|
<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
|
||||||
|
</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
## CSS Classes
|
||||||
|
|
||||||
|
| MDL Class | Effect | Remarks |
|
||||||
|
|-----------|--------|---------|
|
||||||
|
| `mdl-chip` | Defines element as an MDL chip container | Required on "outer" container |
|
||||||
|
| `mdl-chip--contact` | Defines an MDL chip as a contact style chip | Optional, goes on "outer" container |
|
||||||
|
| `mdl-chip__text` | Defines element as the chip's text | Required on "inner" text container |
|
||||||
|
| `mdl-chip__action` | Defines element as the chip's action | Required on "inner" action container, if present |
|
||||||
|
| `mdl-chip__contact` | Defines element as the chip's contact container | Required on "inner" contact container, if the `mdl-chip--contact` class is present on "outer" container |
|
||||||
@ -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";
|
||||||
|
@import "../mixins";
|
||||||
|
|
||||||
|
.mdl-chip {
|
||||||
|
height: $chip-height;
|
||||||
|
font-family: $preferred_font;
|
||||||
|
line-height: $chip-height;
|
||||||
|
padding: 0 12px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $chip-height / 2;
|
||||||
|
background-color: $chip-bg-color;
|
||||||
|
display: inline-block;
|
||||||
|
color: $text-color-primary;
|
||||||
|
margin: 2px 0;
|
||||||
|
font-size: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: $chip-font-size;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
background: transparent;
|
||||||
|
opacity: 0.54;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 0 4px;
|
||||||
|
font-size: $chip-font-size;
|
||||||
|
text-decoration: none;
|
||||||
|
color: $text-color-primary;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__contact {
|
||||||
|
height: $chip-height;
|
||||||
|
width: $chip-height;
|
||||||
|
border-radius: $chip-height / 2;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
@include shadow-2dp();
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $chip-bg-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--deletable {
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--contact {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Basic Chip -->
|
||||||
|
<span class="mdl-chip">
|
||||||
|
<span class="mdl-chip__text">Basic Chip</span>
|
||||||
|
</span>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<!-- Button Chip -->
|
||||||
|
<button type="button" class="mdl-chip">
|
||||||
|
<span class="mdl-chip__text">Button Chip</span>
|
||||||
|
</button>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Contact Chip -->
|
||||||
|
<span class="mdl-chip mdl-chip--contact">
|
||||||
|
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
|
||||||
|
<span class="mdl-chip__text">Contact Chip</span>
|
||||||
|
</span>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<!-- Deletable Contact Chip -->
|
||||||
|
<span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
|
||||||
|
<img class="mdl-chip__contact" src="/templates/dashboard/images/user.jpg"></img>
|
||||||
|
<span class="mdl-chip__text">Deletable Contact Chip</span>
|
||||||
|
<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
|
||||||
|
</span>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Deletable Chip -->
|
||||||
|
<span class="mdl-chip mdl-chip--deletable">
|
||||||
|
<span class="mdl-chip__text">Deletable Chip</span>
|
||||||
|
<button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
|
||||||
|
</span>
|
||||||
@ -0,0 +1,162 @@
|
|||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Material Design Lite (MDL) **data-table** component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.
|
||||||
|
|
||||||
|
Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the data-table component's [Material Design specifications page](http://www.google.com/design/spec/components/data-tables.html) for details.
|
||||||
|
|
||||||
|
The available row/column/cell types in a data-table are mostly self-formatting; that is, once the data-table is defined, the individual cells require very little specific attention. For example, the rows exhibit shading behavior on mouseover and selection, numeric values are automatically formatted by default, and the addition of a single class makes the table rows individually or collectively selectable. This makes the data-table component convenient and easy to code for the developer, as well as attractive and intuitive for the user.
|
||||||
|
|
||||||
|
### To include an MDL **data-table** component:
|
||||||
|
|
||||||
|
1. Code a `<table>` element. Include `<thead>` and `<tbody>` elements to hold the title and data rows, respectively.
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Add one or more MDL classes, separated by spaces, to the table using the `class` attribute.
|
||||||
|
```html
|
||||||
|
<table class="mdl-data-table mdl-js-data-table">
|
||||||
|
<thead>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Inside the `<thead>`, code exactly one table row `<tr>` containing one table header cell `<th>` for each column, and include the desired text in the header cells. To ensure proper header alignment, add the "non-numeric" MDL class to the header cell of text-only columns. (Data cells are formatted as numeric by default.)
|
||||||
|
```html
|
||||||
|
<table class="mdl-data-table mdl-js-data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="mdl-data-table__cell--non-numeric">Name</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>ID Number</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Inside the `<tbody>`, code one table row `<tr>` for each data row and one table data cell `<td>` for each column in the row. As with the header cells, add the "non-numeric" MDL class to text-only data cells to ensure proper alignment.
|
||||||
|
```html
|
||||||
|
<table class="mdl-data-table mdl-js-data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="mdl-data-table__cell--non-numeric">Name</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>ID Number</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Don Aubrey</td>
|
||||||
|
<td>25</td>
|
||||||
|
<td>49021</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Sophia Carson</td>
|
||||||
|
<td>32</td>
|
||||||
|
<td>10258</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Steve Moreno</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>12359</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
The data-table component is ready for use.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
A data-table with a "master" select checkbox and individual row select checkboxes.
|
||||||
|
```html
|
||||||
|
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
|
||||||
|
<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>250</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>$12.35</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
A data-table without select checkboxes containing mostly text data.
|
||||||
|
```html
|
||||||
|
<table class="mdl-data-table mdl-js-data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="mdl-data-table__cell--non-numeric">Name</th>
|
||||||
|
<th class="mdl-data-table__cell--non-numeric">Nickname</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th class="mdl-data-table__cell--non-numeric">Living?</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">John Lennon</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">The smart one</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">No</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">The cute one</td>
|
||||||
|
<td>73</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Yes</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">George Harrison</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">The shy one</td>
|
||||||
|
<td>58</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">No</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">The funny one</td>
|
||||||
|
<td>74</td>
|
||||||
|
<td class="mdl-data-table__cell--non-numeric">Yes</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration options
|
||||||
|
|
||||||
|
The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects.
|
||||||
|
|
||||||
|
| MDL class | Effect | Remarks |
|
||||||
|
|-----------|--------|---------|
|
||||||
|
| `mdl-data-table` | Defines table as an MDL component | Required on table element|
|
||||||
|
| `mdl-js-data-table` | Assigns basic MDL behavior to table | Required on table element|
|
||||||
|
| `mdl-data-table--selectable` | Applies all/individual selectable behavior (checkboxes) | Optional; goes on table element |
|
||||||
|
| `mdl-data-table__header--sorted-ascending` | Applies visual styling to indicate the column is sorted in ascending order | Optional; goes on table header (`th`) |
|
||||||
|
| `mdl-data-table__header--sorted-descending` | Applies visual styling to indicate the column is sorted in descending order | Optional; goes on table header (`th`) |
|
||||||
|
| `mdl-data-table__cell--non-numeric` | Applies text formatting to data cell | Optional; goes on both table header and table data cells |
|
||||||
|
| (none) | Applies numeric formatting to header or data cell (default) | |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user