1
0
Fork 0
mirror of https://gitlab.com/Shinobi-Systems/ShinobiCE.git synced 2025-03-09 15:40:15 +00:00

Tickly Tiger

This commit is contained in:
Moe 2018-08-04 12:48:05 -07:00
parent 301337c140
commit a80c1e4e97
78 changed files with 28107 additions and 1402 deletions

8468
web/libs/css/bootstrap4.min.css vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -65,11 +65,13 @@ nav h4{cursor:default;font-size:95%;padding:16px 40px;font-weight:100;text-trans
.m-b{margin-bottom:10px}
.m-t{margin-top:10px}
.m-l{margin-left:10px}
.overflow-hidden{overflow: hidden!important}
.list-inline{list-style:none}
.list-inline li{display:inline-block;vertical-align: top;margin:0;}
.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
img{max-width:100%}
.display-table{display:table;width:100%}
.display-inline{display:inline-block}
.display-table-cell{display:table-cell}
.small{font-size:80%}
.super-center{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width: 4em;height: 1em;}
@ -80,6 +82,13 @@ img{max-width:100%}
.nodata .divider{margin:5px 0}
.loading .divider{margin:5px 0}
#accbtn{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0;
}
.monitor_item .stream-hud{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.monitor_item .stream-hud .controls{position:absolute;top:10px;left:10px;}
.monitor_item .stream-hud:hover{opacity:1}
@ -90,12 +99,13 @@ img{max-width:100%}
.monitor_item[mode="Watch Only"] .stream-hud .lamp{color:#5da8e8}
.monitor_item[mode="Idle"] .stream-hud .lamp{color:#fff}
.monitor_item[mode="Record"] .stream-hud .lamp{color:#d9534f}
/*.monitor_item .data-menu{max-height:700px}*/
.monitor_item .data-menu:not(:last-child){border-right:1px solid #fff;}
.monitor_item .data-menu.logs{list-style:none;}
/*.data-menu{max-height:700px}*/
.data-menu:not(:last-child){border-right:1px solid #fff;}
.data-menu.logs{list-style:none;}
.monitor_item .motionVision{display:none}
.monitor_item .grid-stack-item-content{width:100%!important;left:0;right:0}
.monitor_item .grid-stack-item-content{width:100%!important;left:0!important;right:0!important}
.monitor_item .ui-resizable-se {bottom: 10px!important;}
.monitor_item .stream-block{position: relative;text-align: center}
.monitor_item .mdl-data_window{overflow-x: auto;background:rgba(0,0,0,0.7);color:#fff;height:100%}
.monitor_item .mdl-data_window:not(.col-md-6){width:0;min-width:0;height:0px;min-height:0}
@ -107,7 +117,7 @@ img{max-width:100%}
.monitor_item{position:relative;padding:0;}
.monitor_item{transition:none;}
.monitor_item .mdl-card{min-height:auto;border:1px solid #272727;border-radius:0px;overflow:hidden}
.monitor_item .mdl-card__media{position:relative;padding:0!important;display:block!important;background:#000;min-height:250px;}
.monitor_item .mdl-card__media{position:relative;padding:0!important;display:block!important;background:#000;}
.monitor_item.selected .stream-element{height:600px}
.monitor_item.selected .fa-expand:before{content:"\f066"}
.monitor_item .mdl-card__supporting-text{background:#222;color:#fff!important;display:block;min-height:auto!important}
@ -713,4 +723,10 @@ ul.msg_list li .message {
.marc-toggle label:active:after {
width: 10px;
}
/*hexagon pattern*/
.bg-hexagon {
background-color: #054e9f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23fdfdfd' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

7545
web/libs/css/now-ui-kit.css Normal file

File diff suppressed because it is too large Load diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

1586
web/libs/js/bootstrap4.min.js vendored Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -12,15 +12,40 @@ $.ccio={
fr:$('#files_recent'),
mon:{}
};
<% if(config.useUTC){ %>
$.ccio.timeObject = function(date){
return moment.utc(date).local()
$.ccio.permissionCheck = function(toCheck,monitorId){
var details = $user.details
if(details.sub && details.allmonitors === '0'){
var chosenValue = details[toCheck]
if(details[toCheck] instanceof Array && chosenValue.indexOf(monitorId) > -1){
return true
}else if(chosenValue === '1'){
return true
}
}else{
return true
}
return false
}
<% }else{ %>
$.ccio.timeObject = function(date){
return moment(date)
$.ccio.downloadJSON = function(jsonToDownload,filename,errorResponse){
var arr = jsonToDownload;
if(arr.length===0 && errorResponse){
errorResponse.type = 'error'
$.ccio.init('note',errorResponse);
return
}
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(arr,null,3));
$('#temp').html('<a></a>')
.find('a')
.attr('href',dataStr)
.attr('download',filename)
[0].click()
}
$.ccio.timeObject = function(time,isUTC){
if(isUTC === true){
return moment(time).utc()
}
return moment(time)
}
<% } %>
if(!$user.details.lang||$user.details.lang==''){
$user.details.lang="<%-config.language%>"
}
@ -158,10 +183,40 @@ switch($user.details.lang){
url=url+'/'
}
}else{
url=''
url = '<%-originalURL%>'
}
return url
break;
case'videoUrlBuild':
var url
if(d.href){
url = d.href
}else if(!d.href && d.hrefNoAuth){
url = $.ccio.init('location',user)+user.auth_token+d.hrefNoAuth
}
if(user!==$user&&url.charAt(0)==='/'){
url = $.ccio.init('location',user)+d.href.substring(1)
}
return url
break;
case'videoHrefToDelete':
var urlSplit = d.split('?')
var url = urlSplit[0]+'/delete'
if(urlSplit[1])url += '?' + urlSplit[1]
return url
break;
case'videoHrefToUnread':
var urlSplit = d.split('?')
var url = urlSplit[0]+'/status/1'
if(urlSplit[1])url += '?' + urlSplit[1]
return url
break;
case'videoHrefToRead':
var urlSplit = d.split('?')
var url = urlSplit[0]+'/status/2'
if(urlSplit[1])url += '?' + urlSplit[1]
return url
break;
// case'streamWindow':
// return $('.monitor_item[mid="'+d.id+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"]')
// break;
@ -369,6 +424,7 @@ switch($user.details.lang){
d.e.find('.monitor_ext').text(d.mon.ext);
d.mode=$.ccio.init('humanReadMode',d.mon.mode,user)
d.e.find('.monitor_mode').text(d.mode)
d.e.find('.monitor_status').text(d.status)
d.e.attr('mode',d.mode)
d.e.find('.lamp').attr('title',d.mode)
break;
@ -463,6 +519,19 @@ switch($user.details.lang){
})
return $.ccio.mon_groups;
break;
case'closeVideo':
var el = $('#monitor_live_'+d.mid+user.auth_token)
var video = el.find('video')
if(video.length === 1){
if(!video[0].paused){
video[0].onerror = function(){}
video[0].pause()
}
video.prop('src','');
video.find('source').remove();
video.remove();
}
break;
case'jpegModeStop':
clearTimeout($.ccio.mon[d.ke+d.mid+user.auth_token].jpegInterval);
delete($.ccio.mon[d.ke+d.mid+user.auth_token].jpegInterval);
@ -492,15 +561,6 @@ switch($user.details.lang){
$.ccio.init('jpegMode',v,user)
});
break;
case'dragWindows':
console.log('Deprecated : dragWindows')
// k.e=$("#monitors_live");
// if(k.e.disableSelection){k.e.disableSelection()};
// k.e.sortable({
// handle: ".mdl-card__supporting-text",
// placeholder: "ui-state-highlight col-md-6"
// });
break;
case'getLocation':
var l = document.createElement("a");
l.href = d;
@ -834,25 +894,18 @@ switch($user.details.lang){
if(d.id&&!d.mid){d.mid=d.id;}
switch(x){
case 0://video
var href
if(d.href){
href = d.href
}else if(!d.href && d.hrefNoAuth){
href = $.ccio.init('location',user)+user.auth_token+d.hrefNoAuth
}
if(user!==$user&&href.charAt(0)==='/'){
href = $.ccio.init('location',user)+d.href.substring(1)
}
href = 'href="'+href+'"'
if(!d.filename){d.filename=$.ccio.init('tf',d.time)+'.'+d.ext;}
var url = $.ccio.init('videoUrlBuild',d)
href = 'href="'+url+'"'
// if(!d.filename){d.filename=$.ccio.init('tf',d.time)+'.'+d.ext;}
d.dlname=d.mid+'-'+d.filename;
d.mom=$.ccio.timeObject(d.time),
d.hr=parseInt(d.mom.format('HH')),
d.startMoment=$.ccio.timeObject(d.time),
d.endMoment=$.ccio.timeObject(d.end),
d.hr=parseInt(d.startMoment.format('HH')),
d.per=parseInt(d.hr/24*100);
d.circle='<div title="at '+d.hr+' hours of '+d.mom.format('MMMM DD')+'" '+href+' video="launch" class="progress-circle progress-'+d.per+'"><span>'+d.hr+'</span></div>'
tmp+='<li class="video-item glM'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" status="'+d.status+'" status="'+d.status+'" file="'+d.filename+'">'+d.circle+'<div><span title="'+d.end+'" class="livestamp"></span></div><div><div class="small"><b><%-cleanLang(lang.Start)%></b> : '+$.ccio.timeObject(d.time).format('h:mm:ss , MMMM Do YYYY')+'</div><div class="small"><b><%-cleanLang(lang.End)%></b> : '+$.ccio.timeObject(d.end).format('h:mm:ss , MMMM Do YYYY')+'</div></div><div><span class="pull-right">'+(parseInt(d.size)/1000000).toFixed(2)+'mb</span><div class="controls btn-group"><a class="btn btn-sm btn-primary" video="launch" '+href+'><i class="fa fa-play-circle"></i></a> <a download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-download"></i></a>'
d.circle='<div title="at '+d.hr+' hours of '+d.startMoment.format('MMMM DD')+'" '+href+' video="launch" class="progress-circle progress-'+d.per+'"><span>'+d.hr+'</span></div>'
tmp+='<li class="video-item glM'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" status="'+d.status+'" status="'+d.status+'" file="'+d.filename+'">'+d.circle+'<div><span title="'+d.endMoment.format()+'" class="livestamp"></span></div><div><div class="small"><b><%-cleanLang(lang.Start)%></b> : '+d.startMoment.format('h:mm:ss , MMMM Do YYYY')+'</div><div class="small"><b><%-cleanLang(lang.End)%></b> : '+d.endMoment.format('h:mm:ss , MMMM Do YYYY')+'</div></div><div><span class="pull-right">'+(parseInt(d.size)/1000000).toFixed(2)+'mb</span><div class="controls btn-group"><a class="btn btn-sm btn-primary" video="launch" '+href+'><i class="fa fa-play-circle"></i></a> <a download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-download"></i></a>'
<% if(config.DropboxAppKey){ %> tmp+='<a video="download" host="dropbox" download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-dropbox"></i></a>' <% } %>
tmp+='<a title="<%-cleanLang(lang['Delete Video'])%>" video="delete" class="btn btn-sm btn-danger permission_video_delete"><i class="fa fa-trash"></i></a></div></div></li>';
tmp+='<a title="<%-cleanLang(lang['Delete Video'])%>" video="delete" href="'+$.ccio.init('videoHrefToDelete',url)+'" class="btn btn-sm btn-danger permission_video_delete"><i class="fa fa-trash"></i></a></div></div></li>';
$(z).each(function(n,v){
v=$(v);
if(v.find('.video-item').length>10){v.find('.video-item:last').remove()}
@ -860,7 +913,46 @@ switch($user.details.lang){
break;
case 1://monitor icon
d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#b57d00',text:'...'}));
tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b><%-cleanLang(lang['Save as'])%> :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Mode :</b> <span class="monitor_mode">'+d.mode+'</span></div></div><div class="icons text-center"><div class="btn-group"><a class="btn btn-xs btn-default permission_monitor_edit" monitor="edit"><i class="fa fa-wrench"></i></a> <a monitor="videos_table" class="btn btn-xs btn-default"><i class="fa fa-film"></i></a> <a monitor="pop" class="btn btn-xs btn-success"><i class="fa fa-external-link"></i></a></div></div></div></div>';
tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b><%-cleanLang(lang['Save as'])%> :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Status :</b> <span class="monitor_status">'+d.status+'</span></div></div><div class="icons text-center">'
tmp+='<div class="btn-group btn-group-xs">'
var buttons = {
"Pop": {
"label": "Pop",
"attr": "monitor=\"pop\"",
"class": "default",
"icon": "external-link"
},
"Power Viewer": {
"label": "Power Viewer",
"attr": "monitor=\"powerview\"",
"class": "default",
"icon": "map-marker"
},
"Videos List": {
"label": "Videos List",
"attr": "monitor=\"videos_table\"",
"class": "default",
"icon": "film"
},
"Monitor Settings": {
"label": "Monitor Settings",
"attr": "monitor=\"edit\"",
"class": "default",
"icon": "wrench"
}
}
if(!$.ccio.permissionCheck('video_view',d.mid)){
delete(buttons["Videos List"])
delete(buttons["Power Viewer"])
}
if(!$.ccio.permissionCheck('monitor_edit',d.mid)){
delete(buttons["Monitor Settings"])
}
$.each(buttons,function(n,v){
tmp+='<a class="btn btn-'+v.class+'" '+v.attr+' title="'+v.label+'"><i class="fa fa-'+v.icon+'"></i></a>'
})
tmp+='</div>\
</div></div></div>';
delete(d.src);
break;
case 2://monitor stream
@ -876,30 +968,97 @@ switch($user.details.lang){
],function(n,v){
tmp+='<div>'+v.label+' : <span class="'+v.tag+'"></span></div>'
})
tmp+='</div></div></div></div>';
tmp+='</div></div></div></div>'
tmp+='<div class="mdl-card__supporting-text text-center">';
tmp+='<div class="indifference detector-fade"><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar"><span></span></div></div></div>';
tmp+='<div class="monitor_details">';
tmp+='<div><span class="monitor_name">'+d.name+'</span><span class="monitor_not_record_copy">, <%-cleanLang(lang['Recording FPS'])%> : <span class="monitor_fps">'+d.fps+'</span></span></div>';
tmp+='</div>';
tmp+='<div class="btn-group btn-group-sm">'//start of btn list
$.each([
{label:"<%-cleanLang(lang.Snapshot)%>",attr:'monitor="snapshot"',class:'primary',icon:'camera'},
{label:"<%-cleanLang(lang['Show Logs'])%>",attr:'monitor="show_data"',class:'warning',icon:'exclamation-triangle'},
// {label:"<%-cleanLang(lang['Show Logs'])%>",attr:'class_toggle="show_data" data-target="'+dataTarget+'"',class:'warning',icon:'exclamation-triangle'},
{label:"<%-cleanLang(lang.Control)%>",attr:'monitor="control_toggle"',class:'default arrows',icon:'arrows'},
{label:"<%-cleanLang(lang['Status Indicator'])%>",attr:'monitor="watch_on"',class:'success signal',icon:'plug'},
{label:"<%-cleanLang(lang['Detector'])%>",attr:'monitor="motion"',class:'warning',icon:'grav'},
{label:"<%-cleanLang(lang.Pop)%>",attr:'monitor="pop"',class:'default',icon:'external-link'},
// {label:"<%-cleanLang(lang.Magnify)%>",attr:'monitor="magnify"',class:'default',icon:'search-plus'},
{label:"<%-cleanLang(lang.Calendar)%>",attr:'monitor="calendar"',class:'default',icon:'calendar'},
{label:"<%-cleanLang(lang['Power Viewer'])%>",attr:'monitor="powerview"',class:'default',icon:'map-marker'},
{label:"<%-cleanLang(lang['Time-lapse'])%>",attr:'monitor="timelapse"',class:'default',icon:'angle-double-right'},
{label:"<%-cleanLang(lang['Videos List'])%>",attr:'monitor="videos_table"',class:'default',icon:'film'},
{label:"<%-cleanLang(lang['Monitor Settings'])%>",attr:'monitor="edit"',class:'default permission_monitor_edit',icon:'wrench'},
{label:"<%-cleanLang(lang.Fullscreen)%>",attr:'monitor="fullscreen"',class:'default',icon:'arrows-alt'},
{label:"<%-cleanLang(lang.Close)%>",attr:'monitor="watch_off"',class:'danger',icon:'times'},
],function(n,v){
var buttons = {
"Snapshot": {
"label": "Snapshot",
"attr": "monitor=\"snapshot\"",
"class": "primary",
"icon": "camera"
},
"Show Logs": {
"label": "Show Logs",
"attr": "monitor=\"show_data\"",
"class": "warning",
"icon": "exclamation-triangle"
},
"Control": {
"label": "Control",
"attr": "monitor=\"control_toggle\"",
"class": "default arrows",
"icon": "arrows"
},
"Status Indicator": {
"label": "Status Indicator",
"attr": "monitor=\"watch_on\"",
"class": "success signal",
"icon": "plug"
},
"Pop": {
"label": "Pop",
"attr": "monitor=\"pop\"",
"class": "default",
"icon": "external-link"
},
"Calendar": {
"label": "Calendar",
"attr": "monitor=\"calendar\"",
"class": "default ",
"icon": "calendar"
},
"Power Viewer": {
"label": "Power Viewer",
"attr": "monitor=\"powerview\"",
"class": "default",
"icon": "map-marker"
},
"Time-lapse": {
"label": "Time-lapse",
"attr": "monitor=\"timelapse\"",
"class": "default",
"icon": "angle-double-right"
},
"Videos List": {
"label": "Videos List",
"attr": "monitor=\"videos_table\"",
"class": "default",
"icon": "film"
},
"Monitor Settings": {
"label": "Monitor Settings",
"attr": "monitor=\"edit\"",
"class": "default",
"icon": "wrench"
},
"Fullscreen": {
"label": "Fullscreen",
"attr": "monitor=\"fullscreen\"",
"class": "default",
"icon": "arrows-alt"
},
"Close": {
"label": "Close",
"attr": "monitor=\"watch_off\"",
"class": "danger",
"icon": "times"
}
}
if(!$.ccio.permissionCheck('video_view',d.mid)){
delete(buttons["Videos List"])
delete(buttons["Time-lapse"])
delete(buttons["Power Viewer"])
delete(buttons["Calendar"])
}
if(!$.ccio.permissionCheck('monitor_edit',d.mid)){
delete(buttons["Monitor Settings"])
}
$.each(buttons,function(n,v){
tmp+='<a class="btn btn-'+v.class+'" '+v.attr+' title="'+v.label+'"><i class="fa fa-'+v.icon+'"></i></a>'
})
tmp+='</div>';//end of btn list
@ -976,6 +1135,11 @@ switch($user.details.lang){
}
}
k.e.append(tmp).find('.stream-element').resize();
if($.ccio.op().switches.monitorMuteAudio === 1){
k.e.find('video').each(function(n,el){
el.muted = "muted"
})
}
break;
case'user-row':
d.e=$('.user-row[uid="'+d.uid+'"][ke="'+d.ke+'"]')
@ -1287,7 +1451,7 @@ switch($user.details.lang){
tmp+='</div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span><%-lang["Stream Type"]%></span></div>'
tmp+=' <div><select class="form-control" channel-detail="stream_type" selector="h_st_channel_'+tempID+'" triggerChange="#monSectionChannel'+tempID+' [channel-detail=stream_vcodec]">'
tmp+=' <div><select class="form-control" channel-detail="stream_type" selector="h_st_channel_'+tempID+'" triggerChange="#monSectionChannel'+tempID+' [channel-detail=stream_vcodec]" triggerChangeIgnore="b64,mjpeg">'
tmp+=' <option value="mp4"><%-lang["Poseidon"]%></option>'
tmp+=' <option value="rtmp"><%-lang["RTMP Stream"]%></option>'
tmp+=' <option value="flv"><%-lang["FLV"]%></option>'
@ -1597,7 +1761,11 @@ $.ccio.globalWebsocket=function(d,user){
}
switch(d.f){
case'note':
$.ccio.init('note',d.note);
$.ccio.init('note',d.note,user);
break;
case'monitor_status':
console.log(d)
$('[ke="'+d.ke+'"][mid="'+d.id+'"][auth="'+user.auth_token+'"] .monitor_status').html(d.status);
break;
case'detector_trigger':
d.e=$('.monitor_item[ke="'+d.ke+'"][mid="'+d.id+'"][auth="'+user.auth_token+'"]')
@ -1632,8 +1800,8 @@ $.ccio.globalWebsocket=function(d,user){
}
if(d.details.confidence){
d.tt=d.details.confidence;
if (d.tt > 100) { d.tt = 100; }
d.e.find('.indifference .progress-bar').css('width',d.tt + "%").find('span').text(d.details.confidence)
if (d.tt > 100) { d.tt = 100 }
d.e.find('.indifference .progress-bar').css('width',d.tt + '%').find('span').html(d.details.confidence+'% change in <b>'+d.details.name+'</b>')
}
d.e.addClass('detector_triggered')
clearTimeout($.ccio.mon[d.ke+d.id+user.auth_token].detector_trigger_timeout);
@ -1705,7 +1873,8 @@ $.ccio.globalWebsocket=function(d,user){
$.ccio.pm(0,d,null,user)
break;
case'log':
$.ccio.tm(4,d,'#logs,.monitor_item[mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"] .logs',user)
var attr = '[mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"]'
$.ccio.tm(4,d,'#logs,'+attr+'.monitor_item .logs:visible,'+attr+'#add_monitor:visible .logs',user)
break;
case'os'://indicator
//cpu
@ -1741,8 +1910,10 @@ $.ccio.globalWebsocket=function(d,user){
break;
case'video_edit':case'video_archive':
$.ccio.init('data-video',d)
d.e=$('[file="'+d.filename+'"][mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"]');
d.e=$('[file="'+d.filename+'"][mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"],[data-file="'+d.filename+'"][data-mid="'+d.mid+'"][data-ke="'+d.ke+'"][data-auth="'+user.auth_token+'"]');
d.e.attr('status',d.status),d.e.attr('data-status',d.status);
console.log(d)
break;
case'video_delete':
// if($('.modal[mid="'+d.mid+'"][auth="'+user.auth_token+'"]').length>0){$('#video_viewer[mid="'+d.mid+'"]').attr('file',null).attr('ke',null).attr('mid',null).attr('auth',null).modal('hide')}
@ -1756,6 +1927,7 @@ $.ccio.globalWebsocket=function(d,user){
delete($.timelapse.currentVideosArray.videos[$.timelapse.currentVideos[d.filename].position])
$.timelapse.drawTimeline(false)
}
if($.vidview.loadedVideos && $.vidview.loadedVideos[d.filename])delete($.vidview.loadedVideos[d.filename])
break;
case'video_build_success':
if(!d.mid){d.mid=d.id;};d.status=1;
@ -1794,8 +1966,9 @@ $.ccio.globalWebsocket=function(d,user){
d.o=$.ccio.op()[d.chosen_set];
if(!d.o[d.ke]){d.o[d.ke]={}};d.o[d.ke][d.id]=0;$.ccio.op(d.chosen_set,d.o);
if($.ccio.mon[d.ke+d.id+user.auth_token]){
$.ccio.init('jpegModeStop',{mid:d.id,ke:d.ke});
$.ccio.init('clearTimers',d)
$.ccio.init('closeVideo',{mid:d.id,ke:d.ke},user);
$.ccio.init('jpegModeStop',{mid:d.id,ke:d.ke},user);
$.ccio.init('clearTimers',d,user)
clearInterval($.ccio.mon[d.ke+d.id+user.auth_token].signal);delete($.ccio.mon[d.ke+d.id+user.auth_token].signal);
$.ccio.mon[d.ke+d.id+user.auth_token].watch=0;
if($.ccio.mon[d.ke+d.id+user.auth_token].hls){$.ccio.mon[d.ke+d.id+user.auth_token].hls.destroy()}
@ -1817,9 +1990,11 @@ $.ccio.globalWebsocket=function(d,user){
d.e=$('#monitor_live_'+d.id+user.auth_token);
d.e.find('.stream-detected-object').remove()
$.ccio.init('clearTimers',d)
if(d.e.length==0){
if(d.e.length === 1){
$.ccio.init('closeVideo',{mid:d.id,ke:d.ke},user);
}
if(d.e.length === 0){
$.ccio.tm(2,$.ccio.mon[d.ke+d.id+user.auth_token],'#monitors_live',user);
$.ccio.init('dragWindows')
}
d.d=JSON.parse($.ccio.mon[d.ke+d.id+user.auth_token].details);
$.ccio.tm('stream-element',$.ccio.mon[d.ke+d.id+user.auth_token],null,user);
@ -1903,30 +2078,35 @@ $.ccio.globalWebsocket=function(d,user){
})
break;
case'mp4':
var stream = d.e.find('.stream-element');
if(d.d.stream_flv_type==='ws'){
if($.ccio.mon[d.ke+d.id+user.auth_token].Poseidon){
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.destroy()
setTimeout(function(){
var stream = d.e.find('.stream-element');
if(d.d.stream_flv_type==='ws'){
if($.ccio.mon[d.ke+d.id+user.auth_token].Poseidon){
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.destroy()
}
try{
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon = new Poseidon({
video: stream[0],
auth_token:user.auth_token,
ke:d.ke,
uid:user.uid,
id:d.id,
url: url
});
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.start();
}catch(err){
setTimeout(function(){
$.ccio.cx({f:'monitor',ff:'watch_on',id:d.id},user)
},5000)
console.log(err)
}
}else{
stream.attr('src',$.ccio.init('location',user)+user.auth_token+'/mp4/'+d.ke+'/'+d.id+'/s.mp4')
stream[0].onerror = function(err){
console.error(err)
}
}
try{
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon = new Poseidon({
video: stream[0],
auth_token:user.auth_token,
ke:d.ke,
uid:user.uid,
id:d.id,
url: url
});
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.start();
}catch(err){
setTimeout(function(){
$.ccio.cx({f:'monitor',ff:'watch_on',id:d.id},user)
},3000)
console.log(err)
}
}else{
stream.attr('src',$.ccio.init('location',user)+user.auth_token+'/mp4/'+d.ke+'/'+d.id+'/s.mp4')
}
},2000)
break;
case'flv':
if (flvjs.isSupported()) {
@ -2153,7 +2333,7 @@ $.ccio.globalWebsocket=function(d,user){
$.each(videos.videos,function(n,v){
if(!v||!v.mid){return}
v.mon=$.ccio.mon[v.ke+v.mid+$user.auth_token];
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
if(v.status>0){
// data.push({src:v,x:v.time,y:$.ccio.timeObject(v.time).diff($.ccio.timeObject(v.end),'minutes')/-1})
data[v.filename]={
@ -2465,6 +2645,14 @@ $.ccio.cx=function(x,user){
$(document).ready(function(e){
console.log("%cWarning!", "font: 2em monospace; color: red;");
console.log('%cLeaving the developer console open is fine if you turn off "Network Recording". This is because it will keep a log of all files, including frames and videos segments.', "font: 1.2em monospace; ");
if(!$.ccio.permissionCheck('monitor_create')){
$('#add_monitor_button_main').remove()
}
$.each(['user_change','monitor_create','view_logs'],function(n,permission){
if(!$.ccio.permissionCheck(permission)){
$('.permission_'+permission).remove()
}
})
//global form functions
$.ccio.form={};
$.ccio.form.details=function(e){
@ -2801,27 +2989,67 @@ $.pB.e.find('.stop').click(function(e){
// $.ccio.cx({f:'ffprobe',ff:'stop'})
});
//log viewer
$.log={e:$('#logs_modal'),lm:$('#log_monitors')};$.log.o=$.log.e.find('table tbody');
$.log = {
e : $('#logs_modal'),
lm : $('#log_monitors'),
dateRange : $('#logs_daterange'),
loaded : {}
}
$.log.dateRange.daterangepicker({
startDate:$.ccio.timeObject().subtract(moment.duration("5:00:00")),
endDate:$.ccio.timeObject().add(moment.duration("24:00:00")),
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
}
},function(start, end, label){
//change daterange
$.log.lm.change()
});
$.log.table = $.log.e.find('table')
$.log.e.on('shown.bs.modal', function () {
$.log.lm.find('option:not(.hard)').remove()
$.each($.ccio.mon,function(n,v){
v.id=v.mid;
v.id = v.mid
$.ccio.tm('option',v,'#log_monitors')
})
$.log.lm.change()
});
$.log.lm.change(function(e){
e.v=$(this).val();
if(e.v==='all'){e.v=''}
$.get($.ccio.init('location',$user)+$user.auth_token+'/logs/'+$user.ke+'/'+e.v,function(d){
})
$.log.lm.change(function(){
e = {}
e.v = $(this).val();
e.urlSelector = e.v+'';
if(e.v === 'all'){
e.urlSelector = ''
}
e.dateRange = $.log.dateRange.data('daterangepicker');
$.log.loaded.startDate = e.dateRange.startDate
$.log.loaded.endDate = e.dateRange.endDate
var url = $.ccio.init('location',$user)+$user.auth_token+'/logs/'+$user.ke+'/'+e.urlSelector+'?start='+$.ccio.init('th',$.log.loaded.startDate)+'&end='+$.ccio.init('th',$.log.loaded.endDate)
$.get(url,function(d){
$.log.loaded.url = url
$.log.loaded.query = e.v
$.log.loaded.rows = d
e.tmp='';
$.each(d,function(n,v){
e.tmp+='<tr class="search-row"><td title="'+v.time+'" class="livestamp"></td><td>'+v.time+'</td><td>'+v.name+'</td><td>'+v.mid+'</td><td>'+$.ccio.init('jsontoblock',v.info)+'</td></tr>'
})
$.log.o.html(e.tmp)
if(d.length === 0){
e.tmp = '<tr class="text-center"><td><%-cleanLang(lang.NoLogsFoundForDateRange)%></td></tr>'
}else{
$.each(d,function(n,v){
e.tmp+='<tr class="search-row"><td title="'+v.time+'" class="livestamp"></td><td>'+v.time+'</td><td>'+v.mid+'</td><td>'+$.ccio.init('jsontoblock',v.info)+'</td></tr>'
})
}
$.log.table.find('tbody').html(e.tmp)
// $.log.table.bootstrapTable()
$.ccio.init('ls')
})
});
})
$.log.e.find('[download]').click(function(){
$.ccio.downloadJSON($.log.loaded,'Shinobi_Logs_'+(new Date())+'.json',{
title : 'No Logs Found',
text : 'No file will be downloaded.',
})
})
//multi monitor manager
$.multimon={e:$('#multi_mon')};
$.multimon.table=$.multimon.e.find('.tableData tbody');
@ -2946,13 +3174,30 @@ $.multimon.e.find('.delete').click(function(){
$.confirm.title.text('<%-cleanLang(lang['Delete'])%> <%-cleanLang(lang['Monitors'])%>')
e.html='<p><%-cleanLang(lang.DeleteMonitorsText)%></p>';
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
$.each(arr,function(n,v){
$.get($.ccio.init('location',$user)+v.user.auth_token+'/configureMonitor/'+v.ke+'/'+v.mid+'/delete',function(data){
console.log(data)
})
})
});
$.confirm.click([
{
title:'Delete Monitors',
class:'btn-danger',
callback:function(){
$.each(arr,function(n,v){
$.get($.ccio.init('location',$user)+v.user.auth_token+'/configureMonitor/'+v.ke+'/'+v.mid+'/delete',function(data){
console.log(data)
})
})
}
},
{
title:'Delete Monitors and Files',
class:'btn-danger',
callback:function(){
$.each(arr,function(n,v){
$.get($.ccio.init('location',$user)+v.user.auth_token+'/configureMonitor/'+v.ke+'/'+v.mid+'/delete?deleteFiles=true',function(data){
console.log(data)
})
})
}
}
]);
})
//$.multimon.e.find('.edit_all').click(function(){
// var arr=$.multimon.getSelectedMonitors();
@ -2988,9 +3233,9 @@ $.multimon.e.on('shown.bs.modal',function() {
var img = $('#left_menu [mid="'+v.mid+'"][auth="'+v.user.auth_token+'"] [monitor="watch"]').attr('src')
tmp+='<tr mid="'+v.mid+'" ke="'+v.ke+'" auth="'+v.user.auth_token+'">'
tmp+='<td><div class="checkbox"><input id="multimonCheck_'+v.ke+v.mid+v.user.auth_token+'" type="checkbox" name="'+v.ke+v.mid+v.user.auth_token+'" value="1"><label for="multimonCheck_'+v.ke+v.mid+v.user.auth_token+'"></label></div></td>'
tmp+='<td><a monitor="watch"><img class="small-square-img" src="'+img+'"></a></td><td>'+v.name+'<br><small>'+v.mid+'</small></td><td class="monitor_mode">'+$.ccio.init('humanReadMode',v.mode)+'</td><td>'+streamURL+'</td>'
tmp+='<td><a monitor="watch"><img class="small-square-img" src="'+img+'"></a></td><td>'+v.name+'<br><small>'+v.mid+'</small></td><td class="monitor_status">'+v.status+'</td><td>'+streamURL+'</td>'
//buttons
tmp+='<td class="text-right"><a title="<%-cleanLang(lang.Pop)%>" monitor="pop" class="btn btn-primary"><i class="fa fa-external-link"></i></a> <a title="<%-cleanLang(lang.Calendar)%>" monitor="calendar" class="btn btn-default"><i class="fa fa-calendar"></i></a> <a title="<%-cleanLang(lang['Power Viewer'])%>" class="btn btn-default" monitor="powerview"><i class="fa fa-map-marker"></i></a> <a title="<%-cleanLang(lang['Time-lapse'])%>" class="btn btn-default" monitor="timelapse"><i class="fa fa-angle-double-right"></i></a> <a title="<%-cleanLang(lang['Videos List'])%>" monitor="videos_table" class="btn btn-default"><i class="fa fa-film"></i></a> <a title="<%-cleanLang(lang['Monitor Settings'])%>" class="btn btn-default permission_monitor_edit" monitor="edit"><i class="fa fa-wrench"></i></a></td>'
tmp+='<td class="text-right"><a title="<%-cleanLang(lang.Pop)%>" monitor="pop" class="btn btn-primary"><i class="fa fa-external-link"></i></a> <a title="<%-cleanLang(lang.Calendar)%>" monitor="calendar" class="btn btn-default"><i class="fa fa-calendar"></i></a> <a title="<%-cleanLang(lang['Power Viewer'])%>" class="btn btn-default" monitor="powerview"><i class="fa fa-map-marker"></i></a> <a title="<%-cleanLang(lang['Time-lapse'])%>" class="btn btn-default" monitor="timelapse"><i class="fa fa-angle-double-right"></i></a> <a title="<%-cleanLang(lang['Videos List'])%>" monitor="videos_table" class="btn btn-default"><i class="fa fa-film"></i></a> <a title="<%-cleanLang(lang['Monitor Settings'])%>" class="btn btn-default" monitor="edit"><i class="fa fa-wrench"></i></a></td>'
tmp+='</tr>'
})
$.multimon.table.html(tmp)
@ -3974,27 +4219,78 @@ $.vidview.f.submit(function(e){
$('#videos_viewer_limit,#videos_viewer_daterange').change(function(){
$.vidview.f.submit()
})
$.vidview.e.find('.delete_selected').click(function(e){
e.s={}
$.vidview.getSelected = function(getArray){
var arr = {}
if(getArray){
arr = []
}
$.vidview.f.find('[data-ke] input:checked').each(function(n,v){
v=$(v).parents('tr')
e.s[v.attr('data-file')]={mid:v.attr('data-mid'),auth:v.attr('data-auth')}
if(getArray){
arr.push({filename:v.attr('data-file'),mid:v.attr('data-mid'),auth:v.attr('data-auth')})
}else{
arr[v.attr('data-file')]={mid:v.attr('data-mid'),auth:v.attr('data-auth')}
}
})
return arr
}
$.vidview.e.find('.delete_selected').click(function(){
e = {}
e.s = $.vidview.getSelected()
if(Object.keys(e.s).length === 0){
$.ccio.init('note',{
title:'No Videos Selected',
text:'You must choose at least one video.',
type:'error'
},$user);
return
}
$.confirm.e.modal('show');
$.confirm.title.text('<%-cleanLang(lang['Delete Selected Videos'])%>')
e.html='<%-cleanLang(lang.DeleteSelectedVideosMsg)%><div style="margin-bottom:15px"></div>'
var deleteLinks = []
$.each(e.s,function(n,v){
e.html+=n+'<br>';
if($.vidview.loadedVideos[n])deleteLinks.push($.vidview.loadedVideos[n].links.deleteVideo)
})
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete Video',class:'btn-danger'},function(){
$.each(e.s,function(n,v){
$.getJSON($.ccio.init('location',$.users[v.auth])+v.auth+'/videos/'+$user.ke+'/'+v.mid+'/'+n+'/delete',function(d){
$.each(deleteLinks,function(n,link){
$.getJSON(link,function(d){
$.ccio.log(d)
})
})
});
})
$.vidview.e.find('.export_selected').click(function(){
e = {}
var videos = $.vidview.getSelected(true)
if(videos.length === 0){
$.ccio.init('note',{
title:'No Videos Selected',
text:'You must choose at least one video.',
type:'error'
},$user);
return
}
$.confirm.e.modal('show');
$.confirm.title.text('<%-cleanLang(lang['Export Selected Videos'])%>')
var html = '<%-cleanLang(lang.ExportSelectedVideosMsg)%><div style="margin-bottom:15px"></div>'
$.each(videos,function(n,v){
html+=v.filename+'<br>';
})
$.confirm.body.html(html)
$.confirm.click({title:'Export Video',class:'btn-danger'},function(){
var queryVariables = []
queryVariables.push('videos='+JSON.stringify(videos))
if(<%-config.useUTC%> === true){
queryVariables.push('isUTC=true')
}
console.log(queryVariables)
var downloadZip = $.ccio.init('location',$user)+$user.auth_token+'/zipVideos/'+$user.ke+'?'+queryVariables.join('&')
$('#temp').html('<iframe>a</iframe>').find('iframe').attr('src',downloadZip);
});
})
$.vidview.pages.on('click','[page]',function(e){
e.limit=$.vidview.limit.val();
e.page=$(this).attr('page');
@ -4062,7 +4358,7 @@ $.timelapse.drawTimeline=function(getData){
e.tmp=''
$.each(videos.videos,function(n,v){
if(!v||!v.time){return}
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
v.videoBefore=videos.videos[n-1];
v.videoAfter=videos.videos[n+1];
// if(v.href.charAt(0)==='/'){
@ -4075,7 +4371,7 @@ $.timelapse.drawTimeline=function(getData){
e.tmp+='<div class="flex-block">'
e.tmp+='<div class="flex-unit-3"><div class="frame" style="background-image:url('+$.timelapse.placeholder+')"></div></div>'
e.tmp+='<div class="flex-unit-3"><div><span title="'+v.time+'" class="livestamp"></span></div><div>'+v.filename+'</div></div>'
e.tmp+='<div class="flex-unit-3 text-right"><a class="btn btn-default" download="'+v.mid+'-'+v.filename+'" href="'+v.href+'">&nbsp;<i class="fa fa-download"></i>&nbsp;</a> <a class="btn btn-danger" video="delete">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a></div>'
e.tmp+='<div class="flex-unit-3 text-right"><a class="btn btn-default" download="'+v.mid+'-'+v.filename+'" href="'+v.href+'">&nbsp;<i class="fa fa-download"></i>&nbsp;</a> <a class="btn btn-danger" video="delete" href="'+$.ccio.init('videoHrefToDelete',v.href)+'">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a></div>'
e.tmp+='</div>'
e.tmp+='<div class="flex-block">'
e.tmp+='<div class="flex-unit-3"><div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" style="width:0%"></div></div></div>'
@ -4449,7 +4745,8 @@ $.pwrvid.e.on('click','[preview]',function(e){
$.pwrvid.vp.find('.stream-objects .stream-detected-object').remove()
})
if(e.status==1){
$.get(e.href.split('?')[0]+'/status/2',function(d){
$.get($.ccio.init('videoHrefToRead',e.href),function(d){
})
}
var labels=[]
@ -4778,22 +5075,28 @@ $('body')
.attr('auth',e.auth)
.attr('file',e.file);
if(e.status==1){
$.get(e.href.split('?')[0]+'/status/2',function(d){
$.get($.ccio.init('videoHrefToRead',e.href),function(d){
if(d.ok !== true)console.log(d,new Error())
})
}
break;
case'delete':
e.href=e.p.find('[download]').attr('href')
if(!e.href||e.href===''){
e.href=e.p.attr('href')
e.preventDefault();
var videoLink = e.p.find('[download]').attr('href')
var href = $(this).attr('href')
console.log('videoLink',videoLink)
console.log(href)
if(!href){
href = $.ccio.init('location',$.users[e.auth])+e.auth+'/videos/'+e.ke+'/'+e.mid+'/'+e.file+'/delete<% if(config.useUTC === true){%>?isUTC=true<%}%>'
}
console.log(href)
$.confirm.e.modal('show');
$.confirm.title.text('<%-cleanLang(lang['Delete Video'])%> : '+e.file)
e.html='<%-cleanLang(lang.DeleteVideoMsg)%>'
e.html+='<video class="video_video" autoplay loop controls><source src="'+e.href+'" type="video/'+e.mon.ext+'"></video>';
e.html+='<video class="video_video" autoplay loop controls><source src="'+videoLink+'" type="video/'+e.mon.ext+'"></video>';
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete Video',class:'btn-danger'},function(){
$.getJSON($.ccio.init('location',$.users[e.auth])+e.auth+'/videos/'+e.ke+'/'+e.mid+'/'+e.file+'/delete',function(d){
$.getJSON(href,function(d){
$.ccio.log(d)
})
});
@ -4847,6 +5150,15 @@ $('body')
$('.monitor_item').attr('data-gs-auto-position','no')
}
break;
case'monitorMuteAudio':
$('.monitor_item video').each(function(n,el){
if(e.o[e.switch] === 1){
el.muted = true
}else{
el.muted = false
}
})
break;
}
switch(e.e.attr('type')){
case'text':
@ -5060,6 +5372,7 @@ $('body')
d.fn()
$.vidview.pages.find('[page="'+$.vidview.current_page+'"]').addClass('active')
e.v=$.vidview.e;
$.vidview.loadedVideos = {}
e.b=e.v.modal('show').find('.modal-body .contents');
e.t=e.v.find('.modal-title i');
switch(e.a){
@ -5068,11 +5381,12 @@ $('body')
e.ar=[];
if(d.videos[0]){
$.each(d.videos,function(n,v){
if(v.status!==0){
if(v.status !== 0){
$.vidview.loadedVideos[v.filename] = Object.assign(v,{})
var n=$.ccio.mon[v.ke+v.mid+user.auth_token];
if(n){v.title=n.name+' - '+(parseInt(v.size)/1000000).toFixed(2)+'mb';}
v.start=v.time;
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
e.ar.push(v);
}
})
@ -5089,7 +5403,7 @@ $('body')
eventLimit: true,
events:e.ar,
eventClick:function(f){
$('#temp').html('<div mid="'+f.mid+'" ke="'+f.ke+'" auth="'+user.auth_token+'" file="'+f.filename+'"><div video="launch" href="'+f.href+'"></div></div>').find('[video="launch"]').click();
$('#temp').html('<div mid="'+f.mid+'" ke="'+f.ke+'" auth="'+user.auth_token+'" file="'+f.filename+'"><div video="launch" href="'+$.ccio.init('videoUrlBuild',f)+'"></div></div>').find('[video="launch"]').click();
$(this).css('border-color', 'red');
}
});
@ -5120,13 +5434,14 @@ $('body')
e.tmp+='<tbody>';
$.each(d.videos,function(n,v){
if(v.status!==0){
var href = $.ccio.init('location',user)+v.href
$.vidview.loadedVideos[v.filename] = Object.assign(v,{})
var href = $.ccio.init('videoUrlBuild',v)
v.mon=$.ccio.mon[v.ke+v.mid+user.auth_token];
v.start=v.time;
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
e.tmp+='<tr data-ke="'+v.ke+'" data-status="'+v.status+'" data-mid="'+v.mid+'" data-file="'+v.filename+'" data-auth="'+v.mon.user.auth_token+'">';
e.tmp+='<td><div class="checkbox"><input id="'+v.ke+'_'+v.filename+'" name="'+v.filename+'" value="'+v.mid+'" type="checkbox"><label for="'+v.ke+'_'+v.filename+'"></label></div></td>';
e.tmp+='<td><span class="livestamp" title="'+v.end+'"></span></td>';
e.tmp+='<td><span class="livestamp" title="'+$.ccio.timeObject(v.end).format('YYYY-MM-DD HH:mm:ss')+'"></span></td>';
e.tmp+='<td title="'+v.end+'">'+$.ccio.timeObject(v.end).format('h:mm:ss A, MMMM Do YYYY')+'</td>';
e.tmp+='<td title="'+v.time+'">'+$.ccio.timeObject(v.time).format('h:mm:ss A, MMMM Do YYYY')+'</td>';
e.tmp+='<td>'+v.mon.name+'</td>';
@ -5135,7 +5450,7 @@ $('body')
e.tmp+='<td><a class="btn btn-sm btn-default preview" href="'+href+'">&nbsp;<i class="fa fa-play-circle"></i>&nbsp;</a></td>';
e.tmp+='<td><a class="btn btn-sm btn-primary" video="launch" href="'+href+'">&nbsp;<i class="fa fa-play-circle"></i>&nbsp;</a></td>';
e.tmp+='<td><a class="btn btn-sm btn-success" download="'+v.mid+'-'+v.filename+'" href="'+href+'">&nbsp;<i class="fa fa-download"></i>&nbsp;</a></td>';
e.tmp+='<td class="permission_video_delete"><a class="btn btn-sm btn-danger" video="delete">&nbsp;<i class="fa fa-trash"></i>&nbsp;</a></td>';
e.tmp+='<td class="permission_video_delete"><a class="btn btn-sm btn-danger" video="delete" href="'+$.ccio.init('videoHrefToDelete',href)+'">&nbsp;<i class="fa fa-trash"></i>&nbsp;</a></td>';
// e.tmp+='<td class="permission_video_delete"><a class="btn btn-sm btn-warning" video="fix">&nbsp;<i class="fa fa-wrench"></i>&nbsp;</a></td>';
e.tmp+='</tr>';
}
@ -5189,11 +5504,26 @@ $('body')
})
e.html+='</tr></table>';
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete Monitor',class:'btn-danger'},function(){
$.get($.ccio.init('location',user)+user.auth_token+'/configureMonitor/'+user.ke+'/'+e.mon.mid+'/delete',function(d){
$.ccio.log(d)
})
});
$.confirm.click([
{
title:'Delete Monitor',
class:'btn-danger',
callback:function(){
$.get($.ccio.init('location',user)+user.auth_token+'/configureMonitor/'+user.ke+'/'+e.mon.mid+'/delete',function(d){
$.ccio.log(d)
})
}
},
{
title:'Delete Monitor and Files',
class:'btn-danger',
callback:function(){
$.get($.ccio.init('location',user)+user.auth_token+'/configureMonitor/'+user.ke+'/'+e.mon.mid+'/delete?deleteFiles=true',function(d){
$.ccio.log(d)
})
}
}
])
break;
case'edit':
e.p=$('#add_monitor'),e.mt=e.p.find('.modal-title')

220
web/libs/js/now-ui-kit.js Normal file
View file

@ -0,0 +1,220 @@
/*!
=========================================================
* Now-ui-kit - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/now-ui-kit
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
var transparent = true;
var transparentDemo = true;
var fixedTop = false;
var navbar_initialized,
backgroundOrange = false,
toggle_initialized = false;
$(document).ready(function() {
try{
// Activate the Tooltips
$('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();
// Activate Popovers and set color for popovers
$('[data-toggle="popover"]').each(function() {
color_class = $(this).data('color');
$(this).popover({
template: '<div class="popover popover-' + color_class + '" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});
});
}catch(err){
}
// Activate the image for the navbar-collapse
nowuiKit.initNavbarImage();
$navbar = $('.navbar[color-on-scroll]');
scroll_distance = $navbar.attr('color-on-scroll') || 500;
// Check if we have the class "navbar-color-on-scroll" then add the function to remove the class "navbar-transparent" so it will transform to a plain color.
// if ($('.navbar[color-on-scroll]').length != 0) {
// nowuiKit.checkScrollForTransparentNavbar();
// $(window).on('scroll', nowuiKit.checkScrollForTransparentNavbar)
// }
$('.form-control').on("focus", function() {
$(this).parent('.input-group').addClass("input-group-focus");
}).on("blur", function() {
$(this).parent(".input-group").removeClass("input-group-focus");
});
// Activate bootstrapSwitch
$('.bootstrap-switch').each(function() {
$this = $(this);
data_on_label = $this.data('on-label') || '';
data_off_label = $this.data('off-label') || '';
$this.bootstrapSwitch({
onText: data_on_label,
offText: data_off_label
});
});
if ($(window).width() >= 992) {
big_image = $('.page-header-image[data-parallax="true"]');
$(window).on('scroll', nowuiKitDemo.checkScrollForParallax);
}
// Activate Carousel
$('.carousel').carousel({
interval: 4000
});
$('.date-picker').each(function() {
$(this).datepicker({
templates: {
leftArrow: '<i class="now-ui-icons arrows-1_minimal-left"></i>',
rightArrow: '<i class="now-ui-icons arrows-1_minimal-right"></i>'
}
}).on('show', function() {
$('.datepicker').addClass('open');
datepicker_color = $(this).data('datepicker-color');
if (datepicker_color.length != 0) {
$('.datepicker').addClass('datepicker-' + datepicker_color + '');
}
}).on('hide', function() {
$('.datepicker').removeClass('open');
});
});
});
$(window).on('resize', function() {
nowuiKit.initNavbarImage();
});
$(document).on('click', '.navbar-toggler', function() {
$toggle = $(this);
if (nowuiKit.misc.navbar_menu_visible == 1) {
$('html').removeClass('nav-open');
nowuiKit.misc.navbar_menu_visible = 0;
$('#bodyClick').remove();
setTimeout(function() {
$toggle.removeClass('toggled');
}, 550);
} else {
setTimeout(function() {
$toggle.addClass('toggled');
}, 580);
div = '<div id="bodyClick"></div>';
$(div).appendTo('body').click(function() {
$('html').removeClass('nav-open');
nowuiKit.misc.navbar_menu_visible = 0;
setTimeout(function() {
$toggle.removeClass('toggled');
$('#bodyClick').remove();
}, 550);
});
$('html').addClass('nav-open');
nowuiKit.misc.navbar_menu_visible = 1;
}
});
nowuiKit = {
misc: {
navbar_menu_visible: 0
},
checkScrollForTransparentNavbar: debounce(function() {
if ($(document).scrollTop() > scroll_distance) {
if (transparent) {
transparent = false;
$('.navbar[color-on-scroll]').removeClass('navbar-transparent');
}
} else {
if (!transparent) {
transparent = true;
$('.navbar[color-on-scroll]').addClass('navbar-transparent');
}
}
}, 17),
initNavbarImage: function() {
var $navbar = $('.navbar').find('.navbar-translate').siblings('.navbar-collapse');
var background_image = $navbar.data('nav-image');
if ($(window).width() < 991 || $('body').hasClass('burger-menu')) {
if (background_image != undefined) {
$navbar.css('background', "url('" + background_image + "')")
.removeAttr('data-nav-image')
.css('background-size', "cover")
.addClass('has-image');
}
} else if (background_image != undefined) {
$navbar.css('background', "")
.attr('data-nav-image', '' + background_image + '')
.css('background-size', "")
.removeClass('has-image');
}
},
initSliders: function() {
}
}
var big_image;
// Javascript just for Demo purpose, remove it from your project
nowuiKitDemo = {
checkScrollForParallax: debounce(function() {
var current_scroll = $(this).scrollTop();
oVal = ($(window).scrollTop() / 3);
big_image.css({
'transform': 'translate3d(0,' + oVal + 'px,0)',
'-webkit-transform': 'translate3d(0,' + oVal + 'px,0)',
'-ms-transform': 'translate3d(0,' + oVal + 'px,0)',
'-o-transform': 'translate3d(0,' + oVal + 'px,0)'
});
}, 6)
}
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};

834
web/libs/js/popper.min.js vendored Normal file
View file

@ -0,0 +1,834 @@
/*
Copyright (C) Federico Zivolo 2017
Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
*/
(function(e, t) {
'object' == typeof exports && 'undefined' != typeof module ? module.exports = t() : 'function' == typeof define && define.amd ? define(t) : e.Popper = t()
})(this, function() {
'use strict';
function e(e) {
return e && '[object Function]' === {}.toString.call(e)
}
function t(e, t) {
if (1 !== e.nodeType) return [];
var o = window.getComputedStyle(e, null);
return t ? o[t] : o
}
function o(e) {
return 'HTML' === e.nodeName ? e : e.parentNode || e.host
}
function n(e) {
if (!e || -1 !== ['HTML', 'BODY', '#document'].indexOf(e.nodeName)) return window.document.body;
var i = t(e),
r = i.overflow,
p = i.overflowX,
s = i.overflowY;
return /(auto|scroll)/.test(r + s + p) ? e : n(o(e))
}
function r(e) {
var o = e && e.offsetParent,
i = o && o.nodeName;
return i && 'BODY' !== i && 'HTML' !== i ? -1 !== ['TD', 'TABLE'].indexOf(o.nodeName) && 'static' === t(o, 'position') ? r(o) : o : window.document.documentElement
}
function p(e) {
var t = e.nodeName;
return 'BODY' !== t && ('HTML' === t || r(e.firstElementChild) === e)
}
function s(e) {
return null === e.parentNode ? e : s(e.parentNode)
}
function d(e, t) {
if (!e || !e.nodeType || !t || !t.nodeType) return window.document.documentElement;
var o = e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING,
i = o ? e : t,
n = o ? t : e,
a = document.createRange();
a.setStart(i, 0), a.setEnd(n, 0);
var f = a.commonAncestorContainer;
if (e !== f && t !== f || i.contains(n)) return p(f) ? f : r(f);
var l = s(e);
return l.host ? d(l.host, t) : d(e, s(t).host)
}
function a(e) {
var t = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : 'top',
o = 'top' === t ? 'scrollTop' : 'scrollLeft',
i = e.nodeName;
if ('BODY' === i || 'HTML' === i) {
var n = window.document.documentElement,
r = window.document.scrollingElement || n;
return r[o]
}
return e[o]
}
function f(e, t) {
var o = 2 < arguments.length && void 0 !== arguments[2] && arguments[2],
i = a(t, 'top'),
n = a(t, 'left'),
r = o ? -1 : 1;
return e.top += i * r, e.bottom += i * r, e.left += n * r, e.right += n * r, e
}
function l(e, t) {
var o = 'x' === t ? 'Left' : 'Top',
i = 'Left' == o ? 'Right' : 'Bottom';
return +e['border' + o + 'Width'].split('px')[0] + +e['border' + i + 'Width'].split('px')[0]
}
function m(e, t, o, i) {
return _(t['offset' + e], o['client' + e], o['offset' + e], ie() ? o['offset' + e] + i['margin' + ('Height' === e ? 'Top' : 'Left')] + i['margin' + ('Height' === e ? 'Bottom' : 'Right')] : 0)
}
function h() {
var e = window.document.body,
t = window.document.documentElement,
o = ie() && window.getComputedStyle(t);
return {
height: m('Height', e, t, o),
width: m('Width', e, t, o)
}
}
function c(e) {
return se({}, e, {
right: e.left + e.width,
bottom: e.top + e.height
})
}
function g(e) {
var o = {};
if (ie()) try {
o = e.getBoundingClientRect();
var i = a(e, 'top'),
n = a(e, 'left');
o.top += i, o.left += n, o.bottom += i, o.right += n
} catch (e) {} else o = e.getBoundingClientRect();
var r = {
left: o.left,
top: o.top,
width: o.right - o.left,
height: o.bottom - o.top
},
p = 'HTML' === e.nodeName ? h() : {},
s = p.width || e.clientWidth || r.right - r.left,
d = p.height || e.clientHeight || r.bottom - r.top,
f = e.offsetWidth - s,
m = e.offsetHeight - d;
if (f || m) {
var g = t(e);
f -= l(g, 'x'), m -= l(g, 'y'), r.width -= f, r.height -= m
}
return c(r)
}
function u(e, o) {
var i = ie(),
r = 'HTML' === o.nodeName,
p = g(e),
s = g(o),
d = n(e),
a = t(o),
l = +a.borderTopWidth.split('px')[0],
m = +a.borderLeftWidth.split('px')[0],
h = c({
top: p.top - s.top - l,
left: p.left - s.left - m,
width: p.width,
height: p.height
});
if (h.marginTop = 0, h.marginLeft = 0, !i && r) {
var u = +a.marginTop.split('px')[0],
b = +a.marginLeft.split('px')[0];
h.top -= l - u, h.bottom -= l - u, h.left -= m - b, h.right -= m - b, h.marginTop = u, h.marginLeft = b
}
return (i ? o.contains(d) : o === d && 'BODY' !== d.nodeName) && (h = f(h, o)), h
}
function b(e) {
var t = window.document.documentElement,
o = u(e, t),
i = _(t.clientWidth, window.innerWidth || 0),
n = _(t.clientHeight, window.innerHeight || 0),
r = a(t),
p = a(t, 'left'),
s = {
top: r - o.top + o.marginTop,
left: p - o.left + o.marginLeft,
width: i,
height: n
};
return c(s)
}
function y(e) {
var i = e.nodeName;
return 'BODY' === i || 'HTML' === i ? !1 : 'fixed' === t(e, 'position') || y(o(e))
}
function w(e, t, i, r) {
var p = {
top: 0,
left: 0
},
s = d(e, t);
if ('viewport' === r) p = b(s);
else {
var a;
'scrollParent' === r ? (a = n(o(e)), 'BODY' === a.nodeName && (a = window.document.documentElement)) : 'window' === r ? a = window.document.documentElement : a = r;
var f = u(a, s);
if ('HTML' === a.nodeName && !y(s)) {
var l = h(),
m = l.height,
c = l.width;
p.top += f.top - f.marginTop, p.bottom = m + f.top, p.left += f.left - f.marginLeft, p.right = c + f.left
} else p = f
}
return p.left += i, p.top += i, p.right -= i, p.bottom -= i, p
}
function v(e) {
var t = e.width,
o = e.height;
return t * o
}
function E(e, t, o, i, n) {
var r = 5 < arguments.length && void 0 !== arguments[5] ? arguments[5] : 0;
if (-1 === e.indexOf('auto')) return e;
var p = w(o, i, r, n),
s = {
top: {
width: p.width,
height: t.top - p.top
},
right: {
width: p.right - t.right,
height: p.height
},
bottom: {
width: p.width,
height: p.bottom - t.bottom
},
left: {
width: t.left - p.left,
height: p.height
}
},
d = Object.keys(s).map(function(e) {
return se({
key: e
}, s[e], {
area: v(s[e])
})
}).sort(function(e, t) {
return t.area - e.area
}),
a = d.filter(function(e) {
var t = e.width,
i = e.height;
return t >= o.clientWidth && i >= o.clientHeight
}),
f = 0 < a.length ? a[0].key : d[0].key,
l = e.split('-')[1];
return f + (l ? '-' + l : '')
}
function x(e, t, o) {
var i = d(t, o);
return u(o, i)
}
function O(e) {
var t = window.getComputedStyle(e),
o = parseFloat(t.marginTop) + parseFloat(t.marginBottom),
i = parseFloat(t.marginLeft) + parseFloat(t.marginRight),
n = {
width: e.offsetWidth + i,
height: e.offsetHeight + o
};
return n
}
function L(e) {
var t = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
return e.replace(/left|right|bottom|top/g, function(e) {
return t[e]
})
}
function S(e, t, o) {
o = o.split('-')[0];
var i = O(e),
n = {
width: i.width,
height: i.height
},
r = -1 !== ['right', 'left'].indexOf(o),
p = r ? 'top' : 'left',
s = r ? 'left' : 'top',
d = r ? 'height' : 'width',
a = r ? 'width' : 'height';
return n[p] = t[p] + t[d] / 2 - i[d] / 2, n[s] = o === s ? t[s] - i[a] : t[L(s)], n
}
function T(e, t) {
return Array.prototype.find ? e.find(t) : e.filter(t)[0]
}
function C(e, t, o) {
if (Array.prototype.findIndex) return e.findIndex(function(e) {
return e[t] === o
});
var i = T(e, function(e) {
return e[t] === o
});
return e.indexOf(i)
}
function N(t, o, i) {
var n = void 0 === i ? t : t.slice(0, C(t, 'name', i));
return n.forEach(function(t) {
t.function && console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
var i = t.function || t.fn;
t.enabled && e(i) && (o.offsets.popper = c(o.offsets.popper), o.offsets.reference = c(o.offsets.reference), o = i(o, t))
}), o
}
function k() {
if (!this.state.isDestroyed) {
var e = {
instance: this,
styles: {},
attributes: {},
flipped: !1,
offsets: {}
};
e.offsets.reference = x(this.state, this.popper, this.reference), e.placement = E(this.options.placement, e.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding), e.originalPlacement = e.placement, e.offsets.popper = S(this.popper, e.offsets.reference, e.placement), e.offsets.popper.position = 'absolute', e = N(this.modifiers, e), this.state.isCreated ? this.options.onUpdate(e) : (this.state.isCreated = !0, this.options.onCreate(e))
}
}
function W(e, t) {
return e.some(function(e) {
var o = e.name,
i = e.enabled;
return i && o === t
})
}
function B(e) {
for (var t = [!1, 'ms', 'Webkit', 'Moz', 'O'], o = e.charAt(0).toUpperCase() + e.slice(1), n = 0; n < t.length - 1; n++) {
var i = t[n],
r = i ? '' + i + o : e;
if ('undefined' != typeof window.document.body.style[r]) return r
}
return null
}
function D() {
return this.state.isDestroyed = !0, W(this.modifiers, 'applyStyle') && (this.popper.removeAttribute('x-placement'), this.popper.style.left = '', this.popper.style.position = '', this.popper.style.top = '', this.popper.style[B('transform')] = ''), this.disableEventListeners(), this.options.removeOnDestroy && this.popper.parentNode.removeChild(this.popper), this
}
function H(e, t, o, i) {
var r = 'BODY' === e.nodeName,
p = r ? window : e;
p.addEventListener(t, o, {
passive: !0
}), r || H(n(p.parentNode), t, o, i), i.push(p)
}
function P(e, t, o, i) {
o.updateBound = i, window.addEventListener('resize', o.updateBound, {
passive: !0
});
var r = n(e);
return H(r, 'scroll', o.updateBound, o.scrollParents), o.scrollElement = r, o.eventsEnabled = !0, o
}
function A() {
this.state.eventsEnabled || (this.state = P(this.reference, this.options, this.state, this.scheduleUpdate))
}
function M(e, t) {
return window.removeEventListener('resize', t.updateBound), t.scrollParents.forEach(function(e) {
e.removeEventListener('scroll', t.updateBound)
}), t.updateBound = null, t.scrollParents = [], t.scrollElement = null, t.eventsEnabled = !1, t
}
function I() {
this.state.eventsEnabled && (window.cancelAnimationFrame(this.scheduleUpdate), this.state = M(this.reference, this.state))
}
function R(e) {
return '' !== e && !isNaN(parseFloat(e)) && isFinite(e)
}
function U(e, t) {
Object.keys(t).forEach(function(o) {
var i = ''; - 1 !== ['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(o) && R(t[o]) && (i = 'px'), e.style[o] = t[o] + i
})
}
function Y(e, t) {
Object.keys(t).forEach(function(o) {
var i = t[o];
!1 === i ? e.removeAttribute(o) : e.setAttribute(o, t[o])
})
}
function F(e, t, o) {
var i = T(e, function(e) {
var o = e.name;
return o === t
}),
n = !!i && e.some(function(e) {
return e.name === o && e.enabled && e.order < i.order
});
if (!n) {
var r = '`' + t + '`';
console.warn('`' + o + '`' + ' modifier is required by ' + r + ' modifier in order to work, be sure to include it before ' + r + '!')
}
return n
}
function j(e) {
return 'end' === e ? 'start' : 'start' === e ? 'end' : e
}
function K(e) {
var t = 1 < arguments.length && void 0 !== arguments[1] && arguments[1],
o = ae.indexOf(e),
i = ae.slice(o + 1).concat(ae.slice(0, o));
return t ? i.reverse() : i
}
function q(e, t, o, i) {
var n = e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),
r = +n[1],
p = n[2];
if (!r) return e;
if (0 === p.indexOf('%')) {
var s;
switch (p) {
case '%p':
s = o;
break;
case '%':
case '%r':
default:
s = i;
}
var d = c(s);
return d[t] / 100 * r
}
if ('vh' === p || 'vw' === p) {
var a;
return a = 'vh' === p ? _(document.documentElement.clientHeight, window.innerHeight || 0) : _(document.documentElement.clientWidth, window.innerWidth || 0), a / 100 * r
}
return r
}
function G(e, t, o, i) {
var n = [0, 0],
r = -1 !== ['right', 'left'].indexOf(i),
p = e.split(/(\+|\-)/).map(function(e) {
return e.trim()
}),
s = p.indexOf(T(p, function(e) {
return -1 !== e.search(/,|\s/)
}));
p[s] && -1 === p[s].indexOf(',') && console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
var d = /\s*,\s*|\s+/,
a = -1 === s ? [p] : [p.slice(0, s).concat([p[s].split(d)[0]]), [p[s].split(d)[1]].concat(p.slice(s + 1))];
return a = a.map(function(e, i) {
var n = (1 === i ? !r : r) ? 'height' : 'width',
p = !1;
return e.reduce(function(e, t) {
return '' === e[e.length - 1] && -1 !== ['+', '-'].indexOf(t) ? (e[e.length - 1] = t, p = !0, e) : p ? (e[e.length - 1] += t, p = !1, e) : e.concat(t)
}, []).map(function(e) {
return q(e, n, t, o)
})
}), a.forEach(function(e, t) {
e.forEach(function(o, i) {
R(o) && (n[t] += o * ('-' === e[i - 1] ? -1 : 1))
})
}), n
}
for (var z = Math.min, V = Math.floor, _ = Math.max, X = ['native code', '[object MutationObserverConstructor]'], Q = function(e) {
return X.some(function(t) {
return -1 < (e || '').toString().indexOf(t)
})
}, J = 'undefined' != typeof window, Z = ['Edge', 'Trident', 'Firefox'], $ = 0, ee = 0; ee < Z.length; ee += 1)
if (J && 0 <= navigator.userAgent.indexOf(Z[ee])) {
$ = 1;
break
}
var i, te = J && Q(window.MutationObserver),
oe = te ? function(e) {
var t = !1,
o = 0,
i = document.createElement('span'),
n = new MutationObserver(function() {
e(), t = !1
});
return n.observe(i, {
attributes: !0
}),
function() {
t || (t = !0, i.setAttribute('x-index', o), ++o)
}
} : function(e) {
var t = !1;
return function() {
t || (t = !0, setTimeout(function() {
t = !1, e()
}, $))
}
},
ie = function() {
return void 0 == i && (i = -1 !== navigator.appVersion.indexOf('MSIE 10')), i
},
ne = function(e, t) {
if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function')
},
re = function() {
function e(e, t) {
for (var o, n = 0; n < t.length; n++) o = t[n], o.enumerable = o.enumerable || !1, o.configurable = !0, 'value' in o && (o.writable = !0), Object.defineProperty(e, o.key, o)
}
return function(t, o, i) {
return o && e(t.prototype, o), i && e(t, i), t
}
}(),
pe = function(e, t, o) {
return t in e ? Object.defineProperty(e, t, {
value: o,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[t] = o, e
},
se = Object.assign || function(e) {
for (var t, o = 1; o < arguments.length; o++)
for (var i in t = arguments[o], t) Object.prototype.hasOwnProperty.call(t, i) && (e[i] = t[i]);
return e
},
de = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'],
ae = de.slice(3),
fe = {
FLIP: 'flip',
CLOCKWISE: 'clockwise',
COUNTERCLOCKWISE: 'counterclockwise'
},
le = function() {
function t(o, i) {
var n = this,
r = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {};
ne(this, t), this.scheduleUpdate = function() {
return requestAnimationFrame(n.update)
}, this.update = oe(this.update.bind(this)), this.options = se({}, t.Defaults, r), this.state = {
isDestroyed: !1,
isCreated: !1,
scrollParents: []
}, this.reference = o.jquery ? o[0] : o, this.popper = i.jquery ? i[0] : i, this.options.modifiers = {}, Object.keys(se({}, t.Defaults.modifiers, r.modifiers)).forEach(function(e) {
n.options.modifiers[e] = se({}, t.Defaults.modifiers[e] || {}, r.modifiers ? r.modifiers[e] : {})
}), this.modifiers = Object.keys(this.options.modifiers).map(function(e) {
return se({
name: e
}, n.options.modifiers[e])
}).sort(function(e, t) {
return e.order - t.order
}), this.modifiers.forEach(function(t) {
t.enabled && e(t.onLoad) && t.onLoad(n.reference, n.popper, n.options, t, n.state)
}), this.update();
var p = this.options.eventsEnabled;
p && this.enableEventListeners(), this.state.eventsEnabled = p
}
return re(t, [{
key: 'update',
value: function() {
return k.call(this)
}
}, {
key: 'destroy',
value: function() {
return D.call(this)
}
}, {
key: 'enableEventListeners',
value: function() {
return A.call(this)
}
}, {
key: 'disableEventListeners',
value: function() {
return I.call(this)
}
}]), t
}();
return le.Utils = ('undefined' == typeof window ? global : window).PopperUtils, le.placements = de, le.Defaults = {
placement: 'bottom',
eventsEnabled: !0,
removeOnDestroy: !1,
onCreate: function() {},
onUpdate: function() {},
modifiers: {
shift: {
order: 100,
enabled: !0,
fn: function(e) {
var t = e.placement,
o = t.split('-')[0],
i = t.split('-')[1];
if (i) {
var n = e.offsets,
r = n.reference,
p = n.popper,
s = -1 !== ['bottom', 'top'].indexOf(o),
d = s ? 'left' : 'top',
a = s ? 'width' : 'height',
f = {
start: pe({}, d, r[d]),
end: pe({}, d, r[d] + r[a] - p[a])
};
e.offsets.popper = se({}, p, f[i])
}
return e
}
},
offset: {
order: 200,
enabled: !0,
fn: function(e, t) {
var o, i = t.offset,
n = e.placement,
r = e.offsets,
p = r.popper,
s = r.reference,
d = n.split('-')[0];
return o = R(+i) ? [+i, 0] : G(i, p, s, d), 'left' === d ? (p.top += o[0], p.left -= o[1]) : 'right' === d ? (p.top += o[0], p.left += o[1]) : 'top' === d ? (p.left += o[0], p.top -= o[1]) : 'bottom' === d && (p.left += o[0], p.top += o[1]), e.popper = p, e
},
offset: 0
},
preventOverflow: {
order: 300,
enabled: !0,
fn: function(e, t) {
var o = t.boundariesElement || r(e.instance.popper);
e.instance.reference === o && (o = r(o));
var i = w(e.instance.popper, e.instance.reference, t.padding, o);
t.boundaries = i;
var n = t.priority,
p = e.offsets.popper,
s = {
primary: function(e) {
var o = p[e];
return p[e] < i[e] && !t.escapeWithReference && (o = _(p[e], i[e])), pe({}, e, o)
},
secondary: function(e) {
var o = 'right' === e ? 'left' : 'top',
n = p[o];
return p[e] > i[e] && !t.escapeWithReference && (n = z(p[o], i[e] - ('right' === e ? p.width : p.height))), pe({}, o, n)
}
};
return n.forEach(function(e) {
var t = -1 === ['left', 'top'].indexOf(e) ? 'secondary' : 'primary';
p = se({}, p, s[t](e))
}), e.offsets.popper = p, e
},
priority: ['left', 'right', 'top', 'bottom'],
padding: 5,
boundariesElement: 'scrollParent'
},
keepTogether: {
order: 400,
enabled: !0,
fn: function(e) {
var t = e.offsets,
o = t.popper,
i = t.reference,
n = e.placement.split('-')[0],
r = V,
p = -1 !== ['top', 'bottom'].indexOf(n),
s = p ? 'right' : 'bottom',
d = p ? 'left' : 'top',
a = p ? 'width' : 'height';
return o[s] < r(i[d]) && (e.offsets.popper[d] = r(i[d]) - o[a]), o[d] > r(i[s]) && (e.offsets.popper[d] = r(i[s])), e
}
},
arrow: {
order: 500,
enabled: !0,
fn: function(e, t) {
if (!F(e.instance.modifiers, 'arrow', 'keepTogether')) return e;
var o = t.element;
if ('string' == typeof o) {
if (o = e.instance.popper.querySelector(o), !o) return e;
} else if (!e.instance.popper.contains(o)) return console.warn('WARNING: `arrow.element` must be child of its popper element!'), e;
var i = e.placement.split('-')[0],
n = e.offsets,
r = n.popper,
p = n.reference,
s = -1 !== ['left', 'right'].indexOf(i),
d = s ? 'height' : 'width',
a = s ? 'top' : 'left',
f = s ? 'left' : 'top',
l = s ? 'bottom' : 'right',
m = O(o)[d];
p[l] - m < r[a] && (e.offsets.popper[a] -= r[a] - (p[l] - m)), p[a] + m > r[l] && (e.offsets.popper[a] += p[a] + m - r[l]);
var h = p[a] + p[d] / 2 - m / 2,
g = h - c(e.offsets.popper)[a];
return g = _(z(r[d] - m, g), 0), e.arrowElement = o, e.offsets.arrow = {}, e.offsets.arrow[a] = Math.round(g), e.offsets.arrow[f] = '', e
},
element: '[x-arrow]'
},
flip: {
order: 600,
enabled: !0,
fn: function(e, t) {
if (W(e.instance.modifiers, 'inner')) return e;
if (e.flipped && e.placement === e.originalPlacement) return e;
var o = w(e.instance.popper, e.instance.reference, t.padding, t.boundariesElement),
i = e.placement.split('-')[0],
n = L(i),
r = e.placement.split('-')[1] || '',
p = [];
switch (t.behavior) {
case fe.FLIP:
p = [i, n];
break;
case fe.CLOCKWISE:
p = K(i);
break;
case fe.COUNTERCLOCKWISE:
p = K(i, !0);
break;
default:
p = t.behavior;
}
return p.forEach(function(s, d) {
if (i !== s || p.length === d + 1) return e;
i = e.placement.split('-')[0], n = L(i);
var a = e.offsets.popper,
f = e.offsets.reference,
l = V,
m = 'left' === i && l(a.right) > l(f.left) || 'right' === i && l(a.left) < l(f.right) || 'top' === i && l(a.bottom) > l(f.top) || 'bottom' === i && l(a.top) < l(f.bottom),
h = l(a.left) < l(o.left),
c = l(a.right) > l(o.right),
g = l(a.top) < l(o.top),
u = l(a.bottom) > l(o.bottom),
b = 'left' === i && h || 'right' === i && c || 'top' === i && g || 'bottom' === i && u,
y = -1 !== ['top', 'bottom'].indexOf(i),
w = !!t.flipVariations && (y && 'start' === r && h || y && 'end' === r && c || !y && 'start' === r && g || !y && 'end' === r && u);
(m || b || w) && (e.flipped = !0, (m || b) && (i = p[d + 1]), w && (r = j(r)), e.placement = i + (r ? '-' + r : ''), e.offsets.popper = se({}, e.offsets.popper, S(e.instance.popper, e.offsets.reference, e.placement)), e = N(e.instance.modifiers, e, 'flip'))
}), e
},
behavior: 'flip',
padding: 5,
boundariesElement: 'viewport'
},
inner: {
order: 700,
enabled: !1,
fn: function(e) {
var t = e.placement,
o = t.split('-')[0],
i = e.offsets,
n = i.popper,
r = i.reference,
p = -1 !== ['left', 'right'].indexOf(o),
s = -1 === ['top', 'left'].indexOf(o);
return n[p ? 'left' : 'top'] = r[t] - (s ? n[p ? 'width' : 'height'] : 0), e.placement = L(t), e.offsets.popper = c(n), e
}
},
hide: {
order: 800,
enabled: !0,
fn: function(e) {
if (!F(e.instance.modifiers, 'hide', 'preventOverflow')) return e;
var t = e.offsets.reference,
o = T(e.instance.modifiers, function(e) {
return 'preventOverflow' === e.name
}).boundaries;
if (t.bottom < o.top || t.left > o.right || t.top > o.bottom || t.right < o.left) {
if (!0 === e.hide) return e;
e.hide = !0, e.attributes['x-out-of-boundaries'] = ''
} else {
if (!1 === e.hide) return e;
e.hide = !1, e.attributes['x-out-of-boundaries'] = !1
}
return e
}
},
computeStyle: {
order: 850,
enabled: !0,
fn: function(e, t) {
var o = t.x,
i = t.y,
n = e.offsets.popper,
p = T(e.instance.modifiers, function(e) {
return 'applyStyle' === e.name
}).gpuAcceleration;
void 0 !== p && console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
var s, d, a = void 0 === p ? t.gpuAcceleration : p,
f = r(e.instance.popper),
l = g(f),
m = {
position: n.position
},
h = {
left: V(n.left),
top: V(n.top),
bottom: V(n.bottom),
right: V(n.right)
},
c = 'bottom' === o ? 'top' : 'bottom',
u = 'right' === i ? 'left' : 'right',
b = B('transform');
if (d = 'bottom' == c ? -l.height + h.bottom : h.top, s = 'right' == u ? -l.width + h.right : h.left, a && b) m[b] = 'translate3d(' + s + 'px, ' + d + 'px, 0)', m[c] = 0, m[u] = 0, m.willChange = 'transform';
else {
var y = 'bottom' == c ? -1 : 1,
w = 'right' == u ? -1 : 1;
m[c] = d * y, m[u] = s * w, m.willChange = c + ', ' + u
}
var v = {
"x-placement": e.placement
};
return e.attributes = se({}, v, e.attributes), e.styles = se({}, m, e.styles), e
},
gpuAcceleration: !0,
x: 'bottom',
y: 'right'
},
applyStyle: {
order: 900,
enabled: !0,
fn: function(e) {
return U(e.instance.popper, e.styles), Y(e.instance.popper, e.attributes), e.offsets.arrow && U(e.arrowElement, e.offsets.arrow), e
},
onLoad: function(e, t, o, i, n) {
var r = x(n, t, e),
p = E(o.placement, r, t, e, o.modifiers.flip.boundariesElement, o.modifiers.flip.padding);
return t.setAttribute('x-placement', p), U(t, {
position: 'absolute'
}), o
},
gpuAcceleration: void 0
}
}
}, le
});

View file

@ -0,0 +1,57 @@
/*!
=========================================================
* Now-ui-kit - v1.1.0
=========================================================
* Product Page: http://www.creative-tim.com/product/now-ui-kit
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
@import 'now-ui-kit/variables';
@import 'now-ui-kit/mixins';
// Plugins CSS
@import "now-ui-kit/plugins/plugin-bootstrap-switch";
@import "now-ui-kit/plugins/plugin-nouislider";
@import "now-ui-kit/plugins/plugin-datepicker";
// Core CSS
@import "now-ui-kit/buttons";
@import "now-ui-kit/inputs";
@import "now-ui-kit/checkboxes-radio";
@import "now-ui-kit/progress";
@import "now-ui-kit/badges";
@import "now-ui-kit/pagination";
@import "now-ui-kit/typography";
@import "now-ui-kit/misc";
@import "now-ui-kit/pills";
// components
@import "now-ui-kit/social-buttons";
@import "now-ui-kit/tabs";
@import "now-ui-kit/navbar";
@import "now-ui-kit/dropdown";
@import "now-ui-kit/alerts";
@import "now-ui-kit/images";
@import "now-ui-kit/popups";
@import "now-ui-kit/nucleo-outline";
@import "now-ui-kit/modals";
@import "now-ui-kit/carousel";
@import "now-ui-kit/cards";
@import "now-ui-kit/footers";
// example pages and sections
@import "now-ui-kit/example-pages";
@import "now-ui-kit/sections";
@import "now-ui-kit/responsive";

View file

@ -0,0 +1,54 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.alert{
border: 0;
border-radius: 0;
color: $white-color;
padding-top: .9rem;
padding-bottom: .9rem;
position: relative;
&.alert-success{
background-color: $success-color-alert;
}
&.alert-danger{
background-color: $danger-color-alert;
}
&.alert-warning{
background-color: $warning-color-alert;
}
&.alert-info{
background-color: $info-color-alert;
}
&.alert-primary{
background-color: $primary-color-alert;
}
.alert-icon{
display: block;
float: left;
margin-right: 15px;
margin-top: -1px;
}
strong{
text-transform: uppercase;
font-size: 12px;
}
i.fa,
i.now-ui-icons{
font-size: 20px;
}
.close{
color: $white-color;
opacity: .9;
text-shadow: none;
line-height: 0;
outline: 0;
}
}

View file

@ -0,0 +1,39 @@
/* badges */
.badge{
border-radius: 8px;
padding: 4px 8px;
text-transform: uppercase;
font-size: $font-size-mini;
line-height: 12px;
background-color: $transparent-bg;
border: $border;
margin-bottom: 5px;
border-radius: $border-radius-extreme;
}
.badge-icon{
padding: 0.4em 0.55em;
i{
font-size: 0.8em;
}
}
.badge-default{
@include badge-color($default-color);
}
.badge-primary{
@include badge-color($primary-color);
}
.badge-info{
@include badge-color($info-color);
}
.badge-success{
@include badge-color($success-color);
}
.badge-warning{
@include badge-color($warning-color);
}
.badge-danger{
@include badge-color($danger-color);
}
.badge-neutral{
@include badge-color($white-color);
}

View file

@ -0,0 +1,158 @@
.btn,
.navbar .navbar-nav > a.btn{
border-width: $border-thick;
font-weight: $font-weight-normal;
font-size: $font-size-small;
line-height: $line-height;
margin: 5px 1px;
border: none;
border-radius: $border-radius-small;
padding: $padding-btn-vertical $padding-btn-horizontal;
cursor: pointer;
@include btn-styles($default-color, $default-states-color);
&:hover,
&:focus{
@include opacity(1);
outline: 0 !important;
}
&:active,
&.active,
.open > &.dropdown-toggle {
@include box-shadow(none);
outline: 0 !important;
}
&.btn-icon {
// see above for color variations
height: $btn-icon-size-regular;
min-width: $btn-icon-size-regular;
width: $btn-icon-size-regular;
padding: 0;
font-size: $btn-icon-font-size-regular;
overflow: hidden;
position: relative;
line-height: normal;
&.btn-simple{
padding: 0;
}
&.btn-sm{
height: $btn-icon-size-small;
min-width: $btn-icon-size-small;
width: $btn-icon-size-small;
i.fa,
i.now-ui-icons{
font-size: $btn-icon-font-size-small;
}
}
&.btn-lg{
height: $btn-icon-size-lg;
min-width: $btn-icon-size-lg;
width: $btn-icon-size-lg;
i.now-ui-icons,
i.fa{
font-size: $btn-icon-font-size-lg;
}
}
&:not(.btn-footer) i.now-ui-icons,
&:not(.btn-footer) i.fa{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-12px, -12px);
line-height: 1.5626rem;
width: 25px;
}
}
&:not(.btn-icon) .now-ui-icons{
position: relative;
top: 1px;
}
}
// Apply the mixin to the buttons
// .btn-default { @include btn-styles($default-color, $default-states-color); }
.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
.btn-success { @include btn-styles($success-color, $success-states-color); }
.btn-info { @include btn-styles($info-color, $info-states-color); }
.btn-warning { @include btn-styles($warning-color, $warning-states-color); }
.btn-danger { @include btn-styles($danger-color, $danger-states-color); }
.btn-neutral { @include btn-styles($white-color, $white-color); }
.btn{
&:disabled,
&[disabled],
&.disabled{
@include opacity(.5);
}
}
.btn-round{
border-width: $border-thin;
border-radius: $btn-round-radius !important;
padding: $padding-btn-vertical $padding-round-horizontal;
&.btn-simple{
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
}
}
.btn-simple{
border: $border;
border-color: $default-color;
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
background-color: $transparent-bg;
}
.btn-simple,
.btn-link{
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $transparent-bg;
}
}
}
.btn-lg{
@include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
}
.btn-sm{
@include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small);
}
.btn-link{
border: $none;
padding: $padding-base-vertical $padding-base-horizontal;
background-color: $transparent-bg;
}
.btn-wd {
min-width: 140px;
}
.btn-group.select{
width: 100%;
}
.btn-group.select .btn{
text-align: left;
}
.btn-group.select .caret{
position: absolute;
top: 50%;
margin-top: -1px;
right: 8px;
}

View file

@ -0,0 +1,98 @@
.card{
border: 0;
border-radius: $border-radius-small;
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 20px;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
.card-body{
min-height: 190px;
}
&[data-background-color="orange"]{
background-color: $primary-color;
}
&[data-background-color="red"]{
background-color: $danger-color;
}
&[data-background-color="yellow"]{
background-color: $warning-color;
}
&[data-background-color="blue"]{
background-color: $info-color;
}
&[data-background-color="green"]{
background-color: $success-color;
}
}
.card-signup{
max-width: 350px;
margin: 0 auto;
.header{
margin-left: 20px;
margin-right: 20px;
padding: 30px 0;
}
.text-divider{
margin-top: 30px;
margin-bottom: 0px;
text-align: center;
}
.card-body{
padding-top: 0px;
padding-bottom: 0px;
min-height: auto;
}
.checkbox{
margin-top: 20px;
label{
margin-left: 17px;
}
.checkbox-material{
padding-right: 12px;
}
}
.social-line{
margin-top: 20px;
text-align: center;
.btn.btn-icon ,
.btn.btn-icon .btn-icon -mini{
margin-left: 5px;
margin-right: 5px;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2);
}
}
.footer{
margin-bottom: 10px;
margin-top: 24px;
}
}
.card-plain{
background: transparent;
box-shadow: none;
.header{
margin-left: 0;
margin-right: 0;
}
.content{
padding-left: 0;
padding-right: 0;
}
}

View file

@ -0,0 +1,15 @@
// display flex was causing errors
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active{
display: block;
}
.carousel{
.carousel-inner{
box-shadow: $box-shadow-raised;
}
.now-ui-icons{
font-size: 2em;
}
}

View file

@ -0,0 +1,178 @@
.checkbox,
.radio {
margin-bottom: 12px;
}
.checkbox label,
.radio label {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 35px;
line-height: 26px;
margin-bottom: 0;
}
.radio label{
padding-left: 28px;
}
.checkbox label::before,
.checkbox label::after{
content: " ";
display: inline-block;
position: absolute;
width: 26px;
height: 26px;
left: 0;
cursor: pointer;
border-radius: 3px;
top: 0;
background-color: transparent;
border: 1px solid $light-gray;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.checkbox label::after{
font-family: 'Nucleo Outline';
content: "\ea22";
top: 0px;
text-align: center;
font-size: 14px;
opacity: 0;
color: $dark-background;
border: 0;
background-color: inherit;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"]{
opacity: 0;
position: absolute;
visibility: hidden;
}
.checkbox input[type="checkbox"]:checked + label::after{
opacity: 1;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label {
color: $dark-gray;
opacity: .5;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="checkbox"]:disabled + label::after{
cursor: not-allowed;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label{
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after {
color: #fff;
}
.radio label::before,
.radio label::after{
content: " ";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid $light-gray;
display: inline-block;
position: absolute;
left: 3px;
top: 3px;
padding: 1px;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.radio input[type="radio"] + label:after,
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:checked + label::after {
width: 4px;
height: 4px;
background-color: $dark-background;
border-color: $dark-background;
top: 11px;
left: 11px;
opacity: 1;
}
.radio input[type="radio"]:checked + label::after{
opacity: 1;
}
.radio input[type="radio"]:disabled + label {
color: $dark-gray;
}
.radio input[type="radio"]:disabled + label::before,
.radio input[type="radio"]:disabled + label::after {
color: $dark-gray;
}
.radio.radio-inline {
margin-top: 0;
}

View file

@ -0,0 +1,106 @@
.dropdown-menu{
border: 0;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border-radius: $border-radius-extra-small;
@include transition($fast-transition-time, $transition-linear);
font-size: $font-size-base;
&.dropdown-menu-right{
&:before{
left:auto;
right: 10px;
}
}
&:before{
display: inline-block;
position: absolute;
width: 0;
height: 0;
vertical-align: middle;
content: "";
top: -5px;
left: 10px;
right: auto;
color: $white-color;
border-bottom: .4em solid;
border-right: .4em solid transparent;
border-left: .4em solid transparent;
}
.dropdown-item{
font-size: $font-size-small;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
@include transition($fast-transition-time, $transition-linear);
&:hover,
&:focus{
background-color: $opacity-gray-3;
}
}
.dropdown-divider{
background-color: $opacity-gray-5;
}
.dropdown-header:not([href]):not([tabindex]){
color: $default-color-opacity;
font-size: $font-size-mini;
text-transform: uppercase;
font-weight: $font-weight-bold;
}
&.dropdown-primary{
@include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-info{
@include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-danger{
@include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-success{
@include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-warning{
@include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2);
}
.dropdown &{
@include transform-translate-y(-25px);
visibility: hidden;
display: block;
@include opacity(0);
}
.dropdown.show &,
&.open{
@include opacity(1);
visibility: visible;
@include transform-translate-y(0px);
}
.navbar .dropdown.show &{
@include transform-translate-y(7px);
}
}
.button-dropdown{
padding-right: $padding-base-horizontal;
cursor: pointer;
& .dropdown-toggle{
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
display: block;
&:after{
display: none;
}
}
}

View file

@ -0,0 +1,256 @@
// style for the landing page
.index-page{
.page-header{
height: 125vh;
.container{
> .content-center{
top: 37%;
}
}
.category-absolute{
position: absolute;
top: 100vh;
margin-top: -60px;
padding: 0 15px;
width: 100%;
color: rgba(255,255,255,.5);
}
}
}
.landing-page{
.header{
height: 100vh;
position: relative;
.container{
padding-top: 26vh;
color: #FFFFFF;
z-index: 2;
position: relative;
}
.share{
margin-top: 150px;
}
h1{
font-weight: 600;
}
.title{
color: $white-color;
}
}
.section-team{
.team .team-player img{
max-width: 100px;
}
.team-player{
margin-bottom: 15px;
}
}
.section-contact-us{
.title{
margin-bottom: 15px;
}
.description{
margin-bottom: 30px;
}
.input-group,
.send-button,
.textarea-container{
padding: 0 40px;
}
.textarea-container{
margin: 40px 0;
}
a.btn{
margin-top: 35px;
}
}
}
// style for the profile page
.profile-page{
.page-header{
min-height: 550px;
}
.profile-container{
color: #FFFFFF;
}
.photo-container{
width: 123px;
height: 123px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
}
.title{
text-align: center;
margin-top: 30px;
}
.description,
.category{
text-align: center;
}
h5.description{
max-width: 700px;
margin: 20px auto 75px;
}
.nav-align-center{
margin-top: 30px;
}
.content{
max-width: 450px;
margin: 0 auto;
.social-description{
display: inline-block;
max-width: 150px;
width: 145px;
text-align: center;
margin: 15px 0 0px;
h2{
margin-bottom: 15px;
}
}
}
.button-container{
text-align: center;
margin-top: -106px;
}
.collections{
img{
margin-bottom: 30px;
}
}
.gallery{
margin-top: 45px;
padding-bottom: 50px;
}
}
.section-full-page{
&:after,
&:before{
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
&:before{
background-color: rgba(0,0,0,.5);
}
&[filter-color="purple"],
&[filter-color="primary"]{
&:after{
@include linear-gradient(rgba($light-gray,.26), rgba($primary-color,.95));
}
}
&[data-image]:after{
opacity: .5;
}
> .content,
> .footer{
position: relative;
z-index: 4;
}
> .content{
min-height: calc(100vh - 80px);
}
.full-page-background{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
display: block;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
}
.footer nav > ul a:not(.btn),
.footer,
.footer .copyright a{
color: $white-color;
}
}
.login-page{
.card-login{
border-radius: $border-radius-large;
padding-bottom: $padding-base-horizontal;
max-width: 320px;
.btn-wd{
min-width: 180px;
}
.logo-container{
width: 65px;
margin: 0 auto;
margin-bottom: 55px;
img{
width: 100%;
}
}
.input-group:last-child{
margin-bottom: 40px;
}
&.card-plain{
@include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
.input-group-addon,
.form-group.form-group-no-border .input-group-addon,
.input-group.form-group-no-border .input-group-addon{
color: $opacity-8;
}
}
}
.link{
font-size: 10px;
color: $white-color;
text-decoration: none;
}
}

View file

@ -0,0 +1,44 @@
.footer{
padding: 24px 0;
&.footer-default{
background-color: #f2f2f2;
}
nav{
display: inline-block;
float: left;
}
ul{
margin-bottom: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
color: inherit;
padding: $padding-base-vertical;
font-size: $font-size-small;
text-transform: uppercase;
text-decoration: none;
&:hover{
text-decoration: none;
}
}
}
}
.copyright{
font-size: $font-size-small;
}
&:after{
display: table;
clear: both;
content: " ";
}
}

View file

@ -0,0 +1,7 @@
img{
max-width: 100%;
border-radius: 1px;
}
.img-raised{
box-shadow: $box-shadow-raised;
}

View file

@ -0,0 +1,264 @@
@include form-control-placeholder($medium-gray, 1);
.form-control {
background-color: $transparent-bg;
border: 1px solid $light-gray;
border-radius: $btn-round-radius;
color: $black-color;
line-height: normal;
font-size: $font-size-small;
@include transition-input-focus-color();
@include box-shadow(none);
.has-success &{
border-color: $light-gray;
}
&:focus{
border: 1px solid $primary-color;
@include box-shadow(none);
outline: 0 !important;
color: $black-color;
& + .input-group-addon,
& ~ .input-group-addon{
border: 1px solid $primary-color;
border-left: none;
background-color: $transparent-bg;
}
}
.has-success &,
.has-error &,
.has-success &:focus,
.has-error &:focus{
@include box-shadow(none);
}
.has-success &:focus{
border-color: lighten($success-color, 5%);
}
.has-danger &,
.has-success &{
&.form-control-success,
&.form-control-danger{
background-image: none;
}
}
.has-danger &{
border-color: lighten($danger-color, 30%);
color: $danger-color;
background-color: rgba(222,222,222, .1);
&:focus{
background-color: $white-color;
}
}
& + .form-control-feedback{
border-radius: $border-radius-large;
font-size: $font-size-base;
margin-top: 0;
position: absolute;
left: 18px;
bottom: -20px;
vertical-align: middle;
}
.open &{
border-radius: $border-radius-large $border-radius-large 0 0;
border-bottom-color: transparent;
}
& + .input-group-addon{
background-color: $white-bg;
}
}
.has-success,
.has-danger{
&:after{
font-family: 'Nucleo Outline';
content: "\ea22";
display: inline-block;
position: absolute;
right: 15px;
bottom: 10px;
color: $success-color;
font-size: 11px;
}
&.input-lg{
&:after{
font-size: 13px;
top: 13px;
}
}
}
.has-danger{
&:after{
content: "\ea53";
color: $danger-color;
}
}
@include input-lg-padding($padding-large-vertical, $padding-input-horizontal);
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control,
.form-control + .input-group-addon{
background-color: $opacity-gray-3;
border: medium none;
&:focus,
&:active,
&:active{
border: medium none;
background-color: $opacity-gray-5;
}
}
.form-control{
&:focus{
& + .input-group-addon{
background-color: $opacity-gray-5;
}
}
}
.input-group-addon{
background-color: $opacity-gray-3;
border: none;
}
}
.has-error{
.form-control-feedback, .control-label{
color: $danger-color;
}
}
.has-success{
.form-control-feedback, .control-label{
color: $success-color;
}
}
.input-group-addon {
background-color: $white-bg;
border: 1px solid $light-gray;
border-radius: $btn-round-radius;
color: $dark-background;
padding: $padding-base-vertical - 1 0 $padding-base-vertical - 1 $padding-base-horizontal - 1;
@include transition-input-focus-color();
.has-success &,
.has-danger &{
background-color: $white-color;
}
.has-danger .form-control:focus + &{
color: $danger-color;
}
.has-success .form-control:focus + &{
color: $success-color;
}
& + .form-control,
& ~ .form-control{
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
padding-left: 18px;
}
i{
width: 17px;
}
}
.input-group-focus{
.input-group-addon{
background-color: $white-bg;
border-color: $primary-color;
}
&.form-group-no-border{
.input-group-addon{
background-color: $opacity-gray-5;
}
}
}
.input-group,
.form-group{
margin-bottom: 10px;
}
.input-group[disabled]{
.input-group-addon{
background-color: $light-gray;
}
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-right: 0 none;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-left: 0 none;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: $light-gray;
color: $default-color;
cursor: not-allowed;
}
.input-group-btn .btn{
border-width: $border-thin;
padding: $padding-btn-vertical $padding-base-horizontal;
}
.input-group-btn .btn-default:not(.btn-fill){
border-color: $medium-gray;
}
.input-group-btn:last-child > .btn{
margin-left: 0;
}
textarea.form-control{
max-width: 100%;
padding: 10px 10px 0 0;
resize: none;
border: none;
border-bottom: 1px solid $light-gray;
border-radius: 0;
line-height: 2;
&:focus,
&:active{
border-left: none;
border-top: none;
border-right: none;
}
}
.has-success,
.has-danger{
&.form-group .form-control,
&.form-group.form-group-no-border .form-control{
padding-right: $padding-input-horizontal + 21;
}
}
.form-group{
position:relative;
}
.form-group.has-error, .form-group.has-danger{
margin-bottom: 20px;
}

View file

@ -0,0 +1,63 @@
body{
color: $black-color;
font-size: $font-size-base;
font-family: $sans-serif-family;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.main{
position: relative;
background: $white-color;
}
/* Animations */
.nav-pills .nav-link,
.nav-item .nav-link,
.navbar,
.nav-tabs .nav-link{
@include transition($general-transition-time, $transition-ease);
}
//transition for dropdown caret
.dropdown-toggle:after,
.bootstrap-switch-label:before{
@include transition($fast-transition-time, $transition-ease);
}
.dropdown-toggle[aria-expanded="true"]:after{
@include rotate-180();
}
.button-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $white-bg;
& + .button-bar{
margin-top: 7px;
}
&:nth-child(2){
width: 17px;
}
}
.open{
@include transform-translate-y(0);
@include opacity(1);
visibility: visible;
}
.separator{
height: 2px;
width: 44px;
background-color: $default-color;
margin: 20px auto;
&.separator-primary{
background-color: $primary-color;
}
}

View file

@ -0,0 +1,14 @@
//Utilities
@import "mixins/transparency";
//Components
@import "mixins/buttons";
@import "mixins/vendor-prefixes";
@import "mixins/inputs";
@import "mixins/dropdown";
@import "mixins/badges";
@import "mixins/navbar";
@import "mixins/popovers";
@import "mixins/modals";
@import "mixins/pages";
@import "mixins/datepicker";

View file

@ -0,0 +1,173 @@
//
// Modals
// Now Ui Kit Design element Dialogs
// --------------------------------------------------
.modal-content {
border-radius: $border-radius-small;
border: none;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
border-bottom: none;
padding-top: 24px;
padding-right: 24px;
padding-bottom: 0;
padding-left: 24px;
& button{
position: absolute;
right: 27px;
top: 30px;
outline: 0;
}
.title{
margin-top: 5px;
margin-bottom: 0;
}
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
padding-top: 24px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
line-height: 1.9;
}
// Footer (for actions)
.modal-footer {
border-top: none;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
&.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
}
}
.modal-body + .modal-footer {
padding-top: 0;
}
}
.modal-backdrop {
background: rgba(0,0,0,0.3);
}
.modal{
&.modal-mini{
p{
text-align: center;
}
.modal-dialog{
max-width: 255px;
margin: 0 auto;
}
.modal-profile{
width: 70px;
height: 70px;
background-color: $white-color;
border-radius: 50%;
text-align: center;
line-height: 5.9;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
i{
color: $primary-color;
font-size: 21px;
}
&[class*="modal-profile-"]{
i{
color: $white-color;
}
}
&.modal-profile-primary{
background-color: $primary-color;
}
&.modal-profile-danger{
background-color: $danger-color;
}
&.modal-profile-warning{
background-color: $warning-color;
}
&.modal-profile-success{
background-color: $success-color;
}
&.modal-profile-info{
background-color: $info-color;
}
}
.modal-footer{
button{
text-transform: uppercase;
&:first-child{
opacity: .5;
}
}
}
}
&.modal-default{
@include modal-colors($white-color, $black-color);
}
&.modal-primary{
@include modal-colors($primary-color, $white-color);
}
&.modal-danger{
@include modal-colors($danger-color, $white-color);
}
&.modal-warning{
@include modal-colors($warning-color, $white-color);
}
&.modal-success{
@include modal-colors($success-color, $white-color);
}
&.modal-info{
@include modal-colors($info-color, $white-color);
}
&.show.modal-mini .modal-dialog{
-webkit-transform: translate(0,30%);
-o-transform: translate(0,30%);
transform: translate(0,30%);
}
.modal-header .close{
color: $danger-color;
text-shadow: none;
&:hover,
&:focus{
opacity: 1;
}
}
}

View file

@ -0,0 +1,193 @@
.navbar{
padding-top: $navbar-padding-base;
padding-bottom: $navbar-padding-base;
min-height: 53px;
margin-bottom: 20px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
a{
vertical-align: middle;
&:not(.btn):not(.dropdown-item){
color: $white-color;
}
}
p{
display: inline-block;
margin: 0;
line-height: 21px;
}
.navbar-nav{
&.navbar-logo{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 49px;
top: -4px;
}
.nav-link.btn{
padding: $padding-btn-vertical $padding-btn-horizontal;
&.btn-lg{
padding: $padding-large-vertical $padding-large-horizontal;
}
&.btn-sm{
padding: $padding-small-vertical $padding-small-horizontal;
}
}
.nav-link:not(.btn){
text-transform: uppercase;
font-size: $font-size-mini;
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-nav-link;
i.fa + p,
i.now-ui-icons + p{
margin-left: 5px;
}
i.fa,
i.now-ui-icons{
font-size: 18px;
position: relative;
top: 2px;
text-align: center;
width: 21px;
}
i.now-ui-icons{
top: 4px;
font-size: 16px;
}
&.profile-photo{
.profile-photo-small{
width: 27px;
height: 27px;
}
}
&.disabled{
opacity: .5;
color: $white-color;
}
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
background-color: $opacity-2;
border-radius: $border-radius-small;
}
}
.logo-container{
width: 27px;
height: 27px;
overflow: hidden;
margin: 0 auto;
border-radius: 50%;
border: 1px solid transparent;
}
.navbar-brand{
text-transform: uppercase;
font-size: $font-size-small;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
line-height: $line-height-nav-link;
}
.navbar-toggler{
width: 37px;
height: 27px;
outline: 0;
cursor: pointer;
&.navbar-toggler-left{
position: relative;
left: 0;
padding-left: 0;
}
&:hover{
& .navbar-toggler-bar.bar2{
width: 22px;
}
}
}
.button-dropdown{
.navbar-toggler-bar:nth-child(2){
width: 17px;
}
}
&.navbar-transparent{
background-color: $transparent-bg !important;
box-shadow: none;
color: $white-color;
padding-top: 20px;
}
&.bg-white:not(.navbar-transparent){
a:not(.dropdown-item){
color: $default-color;
&.disabled{
opacity: .5;
color: $default-color;
}
}
.button-bar{
background: $default-color;
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
background-color: $opacity-gray-3;
}
.logo-container{
border: 1px solid $default-color;
}
}
}
.bg-default{
background-color: $default-color !important;
}
.bg-primary{
background-color: $primary-color !important;
}
.bg-info{
background-color: $info-color !important;
}
.bg-success{
background-color: $success-color !important;
}
.bg-danger{
background-color: $danger-color !important;
}
.bg-warning{
background-color: $warning-color !important;
}
.bg-white{
background-color: $white-color !important;
}

View file

@ -0,0 +1,533 @@
/* --------------------------------
Nucleo Outline Web Font - nucleoapp.com/
License - nucleoapp.com/license/
Created using IcoMoon - icomoon.io
-------------------------------- */
@font-face {
font-family: 'Nucleo Outline';
src: url('../fonts/nucleo-outline.eot');
src: url('../fonts/nucleo-outline.eot') format('embedded-opentype'),
url('../fonts/nucleo-outline.woff2') format('woff2'),
url('../fonts/nucleo-outline.woff') format('woff'),
url('../fonts/nucleo-outline.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
/*----------------------------------
add a square/circle background
-----------------------------------*/
.now-ui-icons.circle {
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
}
.now-ui-icons.circle {
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
.nc-icon-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.nc-icon-ul > li {
position: relative;
}
.nc-icon-ul > li > .now-ui-icons {
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
}
.nc-icon-ul > li > .now-ui-icons.circle {
top: -0.19047619em;
left: -1.9047619em;
}
/*------------------------
spinning icons
-------------------------*/
.now-ui-icons.spin {
-webkit-animation: nc-icon-spin 2s infinite linear;
-moz-animation: nc-icon-spin 2s infinite linear;
animation: nc-icon-spin 2s infinite linear;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
/*------------------------
font icons
-------------------------*/
.now-ui-icons.ui-1_check:before{
content: "\ea22";
}
.now-ui-icons.ui-1_email-85:before {
content: "\ea2a";
}
.now-ui-icons.arrows-1_cloud-download-93:before {
content: "\ea21";
}
.now-ui-icons.arrows-1_cloud-upload-94:before {
content: "\ea24";
}
.now-ui-icons.arrows-1_minimal-down:before {
content: "\ea39";
}
.now-ui-icons.arrows-1_minimal-left:before {
content: "\ea3a";
}
.now-ui-icons.arrows-1_minimal-right:before {
content: "\ea3b";
}
.now-ui-icons.arrows-1_minimal-up:before {
content: "\ea3c";
}
.now-ui-icons.arrows-1_refresh-69:before {
content: "\ea44";
}
.now-ui-icons.arrows-1_share-66:before {
content: "\ea4c";
}
.now-ui-icons.business_badge:before {
content: "\ea09";
}
.now-ui-icons.business_bank:before {
content: "\ea0a";
}
.now-ui-icons.business_briefcase-24:before {
content: "\ea13";
}
.now-ui-icons.business_bulb-63:before {
content: "\ea15";
}
.now-ui-icons.business_chart-bar-32:before {
content: "\ea1e";
}
.now-ui-icons.business_chart-pie-36:before {
content: "\ea1f";
}
.now-ui-icons.business_globe:before {
content: "\ea2f";
}
.now-ui-icons.business_money-coins:before {
content: "\ea40";
}
.now-ui-icons.clothes_tie-bow:before {
content: "\ea5b";
}
.now-ui-icons.design_vector:before {
content: "\ea61";
}
.now-ui-icons.design_app:before {
content: "\ea08";
}
.now-ui-icons.design_bullet-list-67:before {
content: "\ea14";
}
.now-ui-icons.design_image:before {
content: "\ea33";
}
.now-ui-icons.design_palette:before {
content: "\ea41";
}
.now-ui-icons.design_scissors:before {
content: "\ea4a";
}
.now-ui-icons.design-2_html5:before {
content: "\ea32";
}
.now-ui-icons.design-2_ruler-pencil:before {
content: "\ea48";
}
.now-ui-icons.emoticons_satisfied:before {
content: "\ea49";
}
.now-ui-icons.files_box:before {
content: "\ea12";
}
.now-ui-icons.files_paper:before {
content: "\ea43";
}
.now-ui-icons.files_single-copy-04:before {
content: "\ea52";
}
.now-ui-icons.health_ambulance:before {
content: "\ea07";
}
.now-ui-icons.loader_gear:before {
content: "\ea4e";
}
.now-ui-icons.loader_refresh:before {
content: "\ea44";
}
.now-ui-icons.location_bookmark:before {
content: "\ea10";
}
.now-ui-icons.location_compass-05:before {
content: "\ea25";
}
.now-ui-icons.location_map-big:before {
content: "\ea3d";
}
.now-ui-icons.location_pin:before {
content: "\ea47";
}
.now-ui-icons.location_world:before {
content: "\ea63";
}
.now-ui-icons.media-1_album:before {
content: "\ea02";
}
.now-ui-icons.media-1_button-pause:before {
content: "\ea16";
}
.now-ui-icons.media-1_button-play:before {
content: "\ea18";
}
.now-ui-icons.media-1_button-power:before {
content: "\ea19";
}
.now-ui-icons.media-1_camera-compact:before {
content: "\ea1c";
}
.now-ui-icons.media-2_note-03:before {
content: "\ea3f";
}
.now-ui-icons.media-2_sound-wave:before {
content: "\ea57";
}
.now-ui-icons.objects_diamond:before {
content: "\ea29";
}
.now-ui-icons.objects_globe:before {
content: "\ea2f";
}
.now-ui-icons.objects_key-25:before {
content: "\ea38";
}
.now-ui-icons.objects_planet:before {
content: "\ea46";
}
.now-ui-icons.objects_spaceship:before {
content: "\ea55";
}
.now-ui-icons.objects_support-17:before {
content: "\ea56";
}
.now-ui-icons.objects_umbrella-13:before {
content: "\ea5f";
}
.now-ui-icons.education_agenda-bookmark:before {
content: "\ea01";
}
.now-ui-icons.education_atom:before {
content: "\ea0c";
}
.now-ui-icons.education_glasses:before {
content: "\ea2d";
}
.now-ui-icons.education_hat:before {
content: "\ea30";
}
.now-ui-icons.education_paper:before {
content: "\ea42";
}
.now-ui-icons.shopping_bag-16:before {
content: "\ea0d";
}
.now-ui-icons.shopping_basket:before {
content: "\ea0b";
}
.now-ui-icons.shopping_box:before {
content: "\ea11";
}
.now-ui-icons.shopping_cart-simple:before {
content: "\ea1d";
}
.now-ui-icons.shopping_credit-card:before {
content: "\ea28";
}
.now-ui-icons.shopping_delivery-fast:before {
content: "\ea27";
}
.now-ui-icons.shopping_shop:before {
content: "\ea50";
}
.now-ui-icons.shopping_tag-content:before {
content: "\ea59";
}
.now-ui-icons.sport_trophy:before {
content: "\ea5d";
}
.now-ui-icons.sport_user-run:before {
content: "\ea60";
}
.now-ui-icons.tech_controller-modern:before {
content: "\ea26";
}
.now-ui-icons.tech_headphones:before {
content: "\ea31";
}
.now-ui-icons.tech_laptop:before {
content: "\ea36";
}
.now-ui-icons.tech_mobile:before {
content: "\ea3e";
}
.now-ui-icons.tech_tablet:before {
content: "\ea58";
}
.now-ui-icons.tech_tv:before {
content: "\ea5e";
}
.now-ui-icons.tech_watch-time:before {
content: "\ea62";
}
.now-ui-icons.text_align-center:before {
content: "\ea05";
}
.now-ui-icons.text_align-left:before {
content: "\ea06";
}
.now-ui-icons.text_bold:before {
content: "\ea0e";
}
.now-ui-icons.text_caps-small:before {
content: "\ea1b";
}
.now-ui-icons.gestures_tap-01:before {
content: "\ea5a";
}
.now-ui-icons.transportation_air-baloon:before {
content: "\ea03";
}
.now-ui-icons.transportation_bus-front-12:before {
content: "\ea17";
}
.now-ui-icons.travel_info:before {
content: "\ea04";
}
.now-ui-icons.travel_istanbul:before {
content: "\ea34";
}
.now-ui-icons.ui-1_bell-53:before {
content: "\ea0f";
}
.now-ui-icons.ui-1_calendar-60:before {
content: "\ea1a";
}
.now-ui-icons.ui-1_lock-circle-open:before {
content: "\ea35";
}
.now-ui-icons.ui-1_send:before {
content: "\ea4d";
}
.now-ui-icons.ui-1_settings-gear-63:before {
content: "\ea4e";
}
.now-ui-icons.ui-1_simple-add:before {
content: "\ea4f";
}
.now-ui-icons.ui-1_simple-delete:before {
content: "\ea54";
}
.now-ui-icons.ui-1_simple-remove:before {
content: "\ea53";
}
.now-ui-icons.ui-1_zoom-bold:before {
content: "\ea64";
}
.now-ui-icons.ui-2_chat-round:before {
content: "\ea20";
}
.now-ui-icons.ui-2_favourite-28:before {
content: "\ea2b";
}
.now-ui-icons.ui-2_like:before {
content: "\ea37";
}
.now-ui-icons.ui-2_settings-90:before {
content: "\ea4b";
}
.now-ui-icons.ui-2_time-alarm:before {
content: "\ea5c";
}
.now-ui-icons.users_circle-08:before {
content: "\ea23";
}
.now-ui-icons.users_single-02:before {
content: "\ea51";
}

View file

@ -0,0 +1,136 @@
.pagination{
.page-item .page-link{
border: 0;
border-radius: 30px !important;
transition: all .3s;
padding: 0px 11px;
margin: 0 3px;
min-width: 30px;
text-align: center;
height: 30px;
line-height: 30px;
color: $black-color;
cursor: pointer;
font-size: $font-size-base;
text-transform: uppercase;
background: transparent;
&:hover,
&:focus{
color: $black-color;
background-color: $opacity-gray-3;
border: none;
}
}
.arrow-margin-left,
.arrow-margin-right{
position: absolute;
}
.arrow-margin-right{
right: 0;
}
.arrow-margin-left{
left: 0;
}
.page-item.active > .page-link{
color: $light-gray;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
&,
&:focus,
&:hover{
background-color: $default-color;
border-color: $default-color;
color: $white-color;
}
}
.page-item.disabled > .page-link{
opacity: .5;
background-color: rgba(255,255,255, .2);
color: $white-color;
}
// Colors
&.pagination-info{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-info;
border-color: $brand-info;
}
}
}
&.pagination-success{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-success;
border-color: $brand-success;
}
}
}
&.pagination-primary{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-primary;
border-color: $brand-primary;
}
}
}
&.pagination-warning{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-warning;
border-color: $brand-warning;
}
}
}
&.pagination-danger{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-danger;
border-color: $brand-danger;
}
}
}
&.pagination-neutral{
.page-item > .page-link{
color: $white-color;
&:focus,
&:hover{
background-color: $opacity-2;
color: $white-color;
}
}
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $white-bg;
border-color: $white-bg;
color: $brand-primary;
}
}
}
}

View file

@ -0,0 +1,131 @@
.nav-pills{
.nav-item {
.nav-link{
padding: 0 15.5px;
text-align: center;
height: 60px;
width: 60px;
font-weight: $font-weight-normal;
color: $dark-gray;
margin-right: 19px;
background-color: $opacity-gray-3;
border-radius: $btn-round-radius;
&:hover{
background-color: $opacity-gray-3;
}
&.active{
&,
&:focus,
&:hover{
background-color: $dark-gray;
color: $white-color;
box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
}
}
&.disabled,
&:disabled,
&[disabled]{
opacity: .5;
}
}
i{
display: block;
font-size: 20px;
line-height: 60px;
}
}
&.nav-pills-neutral{
.nav-item {
.nav-link{
background-color: $opacity-2;
color: $white-color;
&.active{
&,
&:focus,
&:hover{
background-color: $white-color;
color: $primary-color;
}
}
}
}
}
&.nav-pills-primary{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-primary;
}
}
}
}
&.nav-pills-info{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-info;
}
}
}
}
&.nav-pills-success{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-success;
}
}
}
}
&.nav-pills-warning{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-warning;
}
}
}
}
&.nav-pills-danger{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-danger;
}
}
}
}
}
.tab-space{
padding: 20px 0 50px 0px;
}
.nav-align-center{
text-align: center;
.nav-pills{
display: inline-flex;
}
}

View file

@ -0,0 +1,85 @@
.popover{
font-size: $font-size-base;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
&.bs-popover-top .arrow:before,
&.bs-popover-left .arrow:before,
&.bs-popover-right .arrow:before,
&.bs-popover-bottom .arrow:before,{
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.popover-header{
color: $default-color-opacity;
font-size: $font-size-base;
text-transform: capitalize;
font-weight: $font-weight-semi;
margin: 0;
margin-top: 5px;
border: none;
background-color: transparent;
}
&:before{
display: none;
}
&.bs-tether-element-attached-top:after{
border-bottom-color:$white-color;
top: -9px;
}
&.popover-primary{
@include popover-color($primary-color, $white-color);
}
&.popover-info{
@include popover-color($info-color, $white-color);
}
&.popover-warning{
@include popover-color($warning-color, $white-color);
}
&.popover-danger{
@include popover-color($danger-color, $white-color);
}
&.popover-success{
@include popover-color($success-color, $white-color);
}
}
.tooltip{
&.bs-tooltip-right .arrow:before{
border-right-color:$white-color;
}
&.bs-tooltip-top .arrow:before{
border-top-color:$white-color;
}
&.bs-tooltip-bottom .arrow:before{
border-bottom-color:$white-color;
}
&.bs-tooltip-left .arrow:before{
border-left-color:$white-color;
}
}
.tooltip-inner{
padding: $padding-base-vertical $padding-base-horizontal;
min-width: 130px;
background-color: $white-color;
font-size: $font-size-base;
color: inherit;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

View file

@ -0,0 +1,126 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.progress-container{
position: relative;
& + .progress-container,
& ~ .progress-container{
margin-top: $margin-base-vertical;
}
.progress-badge{
color: $default-color;
font-size: $font-size-small;
text-transform: uppercase;
}
.progress {
height: 1px;
border-radius: 0;
box-shadow: none;
background: $opacity-gray-8;
margin-top: 14px;
.progress-bar {
box-shadow: none;
background-color: $default-color;
}
.progress-value{
position: absolute;
top: 2px;
right: 0;
color: $default-color;
font-size: $font-size-small;
}
}
&.progress-neutral{
.progress{
background: rgba(255, 255, 255, .3);
}
.progress-bar{
background: $white-bg;
}
.progress-value,
.progress-badge{
color: $white-color;
}
}
&.progress-primary{
.progress{
background: $primary-color-opacity;
}
.progress-bar{
background: $brand-primary;
}
.progress-value,
.progress-badge{
color: $brand-primary;
}
}
&.progress-info{
.progress{
background: $info-color-opacity;
}
.progress-bar{
background: $brand-info;
}
.progress-value,
.progress-badge{
color: $brand-info;
}
}
&.progress-success{
.progress{
background: $success-color-opacity;
}
.progress-bar{
background: $brand-success;
}
.progress-value,
.progress-badge{
color: $brand-success;
}
}
&.progress-warning{
.progress{
background: $warning-color-opacity;
}
.progress-bar{
background: $brand-warning;
}
.progress-value,
.progress-badge{
color: $brand-warning;
}
}
&.progress-danger{
.progress{
background: $danger-color-opacity;
}
.progress-bar{
background: $brand-danger;
}
.progress-value,
.progress-badge{
color: $brand-danger;
}
}
}

View file

@ -0,0 +1,392 @@
@media screen and (max-width: 991px){
.sidebar-collapse{
@include navbar-collapse();
&.menu-on-left{
.navbar-collapse{
right: auto;
left: 0;
@include transform-translate-x(-300px);
}
}
.nav-open &{
.navbar-collapse{
@include transform-translate-x(0px);
}
.wrapper{
@include transform-translate-x(-150px);
}
.navbar-translate{
@include transform-translate-x(-300px);
}
&.menu-on-left{
.navbar-collapse{
@include transform-translate-x(0px);
}
.navbar-translate{
@include transform-translate-x(300px);
}
.wrapper{
@include transform-translate-x(150px);
}
#bodyClick{
right: auto;
left: 300px;
}
}
}
}
.bootstrap-collapse{
.navbar .navbar-collapse{
background: none !important;
}
@include navbar-responsive();
}
.profile-photo .profile-photo-small{
margin-left: -2px;
}
.button-dropdown{
display: none;
}
.section-nucleo-icons .container .row > [class*="col-"]:first-child{
text-align: center;
}
.footer{
.copyright{
text-align: right;
}
}
.section-nucleo-icons .icons-container{
margin-top: 65px;
}
.navbar-nav{
.nav-link{
i.fa,
i.now-ui-icons{
opacity: .5;
}
}
}
.section-images{
height: 500px;
max-height: 500px;
.hero-images-container{
max-width: 500px;
}
.hero-images-container-1{
right: 10%;
top: 68%;
max-width: 269px;
}
.hero-images-container-2{
right: 5%;
max-width: 135px;
top: 93%;
}
}
}
@media screen and (min-width: 992px){
.burger-menu{
@include navbar-collapse();
.nav-open & .navbar-collapse{
@include transform-translate-x(0px);
}
.navbar-collapse {
display: block !important;
.navbar-nav {
margin-top: 53px;
height: 100%;
z-index: 2;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.nav-item{
margin: 0;
}
}
}
&.menu-on-left .navbar-collapse{
right: auto;
left: 0;
@include transform-translate-x(-300px);
}
[class*="navbar-expand-"]{
.navbar-nav .dropdown-menu{
position: static;
float: none;
}
.navbar-toggler{
display: inline-block;
}
}
.section-navbars .navbar-collapse{
display: none !important;
}
.nav-open &{
&.menu-on-left .navbar .navbar-translate{
@include transform-translate-x(300px);
}
.navbar .navbar-translate{
@include transform-translate-x(-300px);
}
&.menu-on-left .navbar-collapse{
@include transform-translate-x(0px);
}
&.menu-on-left #bodyClick{
right: auto;
left: 300px;
}
}
&.menu-on-left .navbar-brand{
float: right;
margin-right: 0;
margin-left: 1rem;
}
}
.navbar-nav{
.nav-link{
&.profile-photo{
padding: 0;
margin: 7px $padding-base-horizontal;
}
&.btn:not(.btn-sm){
margin: 0;
}
}
.nav-item:not(:last-child){
margin-right: 5px;
}
}
.section-nucleo-icons .icons-container{
margin: 0 0 0 auto;
}
.dropdown-menu .dropdown-item{
color: inherit;
}
.footer{
.copyright{
float: right;
}
}
}
@media screen and (min-width: 768px){
.image-container{
&.image-right{
top: 80px;
margin-left: - 100px;
margin-bottom: 130px;
}
&.image-left{
margin-right: -100px;
}
}
}
@media screen and (max-width: 768px){
.image-container{
&.image-left{
margin-bottom: 220px;
p.blockquote{
margin: 0 auto;
position: relative;
right: 0;
}
}
}
.nav-tabs{
display: inline-block;
width: 100%;
padding-left: 100px;
padding-right: 100px;
text-align: center;
.nav-item > .nav-link{
margin-bottom: 5px;
}
}
.landing-page .section-story-overview .image-container:nth-child(2){
margin-left: 0;
margin-bottom: 30px;
}
}
@media screen and (max-width: 576px){
.navbar[class*='navbar-expand-'] .container{
margin-left: 0;
margin-right: 0;
}
.footer{
.copyright{
text-align: center;
}
}
.section-nucleo-icons{
.icons-container{
i{
font-size: 30px;
&:nth-child(6){
font-size: 48px;
}
}
}
}
.page-header{
.container h6.category-absolute{
width: 90%;
}
}
}
@media screen and (min-width: 991px) and (max-width: 1200px){
.section-images{
.hero-images-container-1{
right: 9%;
max-width: 370px;
}
.hero-images-container-2{
right: 2%;
max-width: 216px;
}
}
}
@media screen and (max-width: 768px){
.section-images{
height: 300px;
max-height: 300px;
.hero-images-container{
max-width: 380px;
}
.hero-images-container-1{
right: 7%;
top: 87%;
max-width: 210px;
}
.hero-images-container-2{
right: 1%;
max-width: 133px;
top: 99%;
}
}
}
@media screen and (max-width: 517px) {
.alert .alert-icon{
margin-top: 10px;
}
}
@media screen and (min-width: 1200px) {
.section-images{
.hero-images-container-1{
top: 51%;
right: 21%;
}
.hero-images-container-2{
top: 66%;
right: 14%;
}
}
}
// Ipad responsive portrait mode
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and ( orientation : portrait){
.section-images .hero-images-container,
.section-images .hero-images-container-1,
.section-images .hero-images-container-2{
margin-top: -15vh;
margin-left: 80px;
}
.section-images .hero-images-container{
max-width: 300px;
}
.section-images .hero-images-container-1{
right: 28%;
top: 40%;
}
.section-images .hero-images-container-2{
right: 21%;
top: 55%;
}
.index-page .category-absolute{
top: 90vh;
}
}
@media screen and (max-width: 580px) {
.alert{
button.close{
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
}
}
}

View file

@ -0,0 +1,396 @@
.section{
padding: 70px 0;
position: relative;
background: $white-color;
.row + .category{
margin-top: $margin-base-vertical;
}
}
.section-navbars{
padding-bottom: 0;
}
.section-full-screen{
height: 100vh;
}
.section-signup{
padding-top: 20vh;
}
.page-header{
height: 100vh;
max-height: 1050px;
padding: 0;
color: $white-color;
position: relative;
background-position: center center;
background-size: cover;
.page-header-image{
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
z-index: -1;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
}
.container{
height: 100%;
z-index: 1;
text-align: center;
position: relative;
> .content-center{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
padding: 0 15px;
color: #FFFFFF;
width: 100%;
max-width: 880px;
}
}
.category,
.description{
color: $opacity-5;
}
&.page-header-small{
height: 60vh;
max-height: 440px;
}
&:after,
&:before{
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
&:before{
background-color: rgba(0,0,0,.5);
}
&[filter-color="orange"]{
@include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
}
.container{
z-index: 2;
}
}
.clear-filter{
&:after,
&:before{
display: none;
}
}
.section-story-overview{
padding: 50px 0;
.image-container{
height: 335px;
position: relative;
background-position: center center;
background-size: cover;
box-shadow: $box-shadow-raised;
border-radius: .25rem;
& + .category{
padding-top: 15px;
}
&.image-right{
z-index: 2;
+ h3.title{
margin-top: 120px;
}
}
&.image-left{
z-index: 1;
}
&:nth-child(2){
margin-top: 420px;
margin-left: -105px;
}
}
p.blockquote{
width: 220px;
min-height: 180px;
text-align: left;
position: absolute;
top: 376px;
right: 155px;
z-index: 0;
}
}
.section-nucleo-icons{
.nucleo-container img{
width: auto;
left: 0;
top: 0;
height: 100%;
position: absolute;
}
.nucleo-container{
height: 335px;
position: relative;
}
h5{
margin-bottom: 35px;
}
.icons-container{
position: relative;
max-width: 450px;
height: 300px;
max-height: 300px;
margin: 0 auto;
}
.icons-container i{
font-size: 34px;
position: absolute;
left: 0;
top: 0;
}
.icons-container i:nth-child(1){
top: 5%;
left: 7%;
}
.icons-container i:nth-child(2){
top: 28%;
left: 24%;
}
.icons-container i:nth-child(3){
top: 40%;
}
.icons-container i:nth-child(4){
top: 18%;
left: 62%;
}
.icons-container i:nth-child(5){
top: 74%;
left: 3%;
}
.icons-container i:nth-child(6){
top: 36%;
left: 44%;
font-size: 65px;
color: #f96332;
padding: 1px;
}
.icons-container i:nth-child(7){
top: 59%;
left: 26%;
}
.icons-container i:nth-child(8){
top: 60%;
left: 69%;
}
.icons-container i:nth-child(9){
top: 72%;
left: 47%;
}
.icons-container i:nth-child(10){
top: 88%;
left: 27%;
}
.icons-container i:nth-child(11){
top: 31%;
left: 80%;
}
.icons-container i:nth-child(12){
top: 88%;
left: 68%;
}
.icons-container i:nth-child(13){
top: 5%;
left: 81%;
}
.icons-container i:nth-child(14){
top: 58%;
left: 90%;
}
.icons-container i:nth-child(15){
top: 6%;
left: 40%;
}
}
.section-images{
max-height: 670px;
height: 670px;
.hero-images-container,
.hero-images-container-1,
.hero-images-container-2{
margin-top: -38vh;
}
.hero-images-container{
max-width: 670px;
}
.hero-images-container-1{
max-width: 390px;
position: absolute;
top: 55%;
right: 18%;
}
.hero-images-container-2{
max-width: 225px;
position: absolute;
top: 68%;
right: 12%;
}
}
[data-background-color="orange"]{
background-color: $orange-bg;
}
[data-background-color="black"]{
background-color: $black-color;
}
[data-background-color]{
color: $white-color;
.title,
.social-description h2,
p,
p.blockquote,
p.blockquote small,
h1,h2,h3,h4,h5,h6,a:not(.btn):not(.dropdown-item),
.icons-container i{
color: $white-color;
}
.separator{
background-color: $white-color;
}
.navbar.bg-white p{
color: $default-color;
}
.description,
.social-description p{
color: $opacity-8;
}
p.blockquote{
border-color: $opacity-2;
}
//radio and checkboxes
.checkbox label::before,
.checkbox label::after,
.radio label::before,
.radio label::after{
border-color: $opacity-2;
}
.checkbox label::after,
.checkbox label,
.radio label{
color: $white-color;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label {
color: $white-color;
}
.radio input[type="radio"]:not(:disabled):hover + label::after,
.radio input[type="radio"]:checked + label::after {
background-color: $white-color;
border-color: $white-color;
}
//inputs
@include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
.input-group-addon,
.form-group.form-group-no-border .input-group-addon,
.input-group.form-group-no-border .input-group-addon{
color: $opacity-8;
}
//buttons
.btn.btn-simple{
background-color: $transparent-bg;
border-color: $opacity-5;
color: $white-color;
&:hover,
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
border-color: $white-color;
}
}
//tabs
.nav-tabs{
> .nav-item{
>.nav-link{
i.now-ui-icons{
color: $white-color;
}
}
}
}
&.section-nucleo-icons .icons-container i:nth-child(6){
color: $white-color;
}
}

View file

@ -0,0 +1,39 @@
.btn-twitter{
color: $social-twitter;
&:hover,
&:focus,
&:active{
color: $social-twitter-state-color;
}
}
.btn-facebook{
color: $social-facebook;
&:hover,
&:focus,
&:active{
color: $social-facebook-state-color;
}
}
.btn-google{
color: $social-google;
&:hover,
&:focus,
&:active{
color: $social-google-state-color;
}
}
.btn-linkedin{
color: $social-linkedin;
&:hover,
&:focus,
&:active{
color: $social-linkedin-state-color;
}
}

View file

@ -0,0 +1,110 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.nav-tabs {
border: 0;
padding: $padding-large-vertical $padding-base-horizontal;
> .nav-item{
> .nav-link{
color: $default-color;
margin: 0;
margin-right: 5px;
background-color: $transparent-bg;
border: 1px solid $transparent-bg;
border-radius: 30px;
font-size: $font-size-base;
padding: $padding-btn-vertical $padding-round-horizontal;
line-height: $line-height-general;
&:hover {
background-color: $transparent-bg;
}
&.active{
border: 1px solid $default-color;
border-radius: 30px;
}
i.now-ui-icons{
font-size: 14px;
position: relative;
top: 1px;
margin-right: 3px;
}
}
&.disabled > .nav-link,
&.disabled > .nav-link:hover {
color: rgba(255,255,255,0.5);
}
}
&.nav-tabs-neutral{
> .nav-item{
> .nav-link{
color: $white-color;
&.active{
border-color: $opacity-5;
color: $white-color;
}
}
}
}
&.nav-tabs-primary{
> .nav-item{
> .nav-link{
&.active{
border-color: $primary-color;
color: $primary-color;
}
}
}
}
&.nav-tabs-info{
> .nav-item{
> .nav-link{
&.active{
border-color: $info-color;
color: $info-color;
}
}
}
}
&.nav-tabs-danger{
> .nav-item{
> .nav-link{
&.active{
border-color: $danger-color;
color: $danger-color;
}
}
}
}
&.nav-tabs-warning{
> .nav-item{
> .nav-link{
&.active{
border-color: $warning-color;
color: $warning-color;
}
}
}
}
&.nav-tabs-success{
> .nav-item{
> .nav-link{
&.active{
border-color: $success-color;
color: $success-color;
}
}
}
}
}

View file

@ -0,0 +1,158 @@
button,
input,
optgroup,
select,
textarea{
font-family: $sans-serif-family;
}
h1,h2,h3,h4,h5,h6{
font-weight: $font-weight-normal;
}
small{
font-size: 60%;
}
a{
color: $primary-color;
&:hover,
&:focus{
color: $primary-color;
}
}
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15;
margin-bottom: $margin-base-vertical * 2;
small{
font-weight: $font-weight-bold;
text-transform: uppercase;
opacity: .8;
}
}
h2, .h2{
font-size: $font-size-h2;
margin-bottom: $margin-base-vertical * 2;
}
h3, .h3{
font-size: $font-size-h3;
margin-bottom: $margin-base-vertical * 2;
line-height: 1.4em;
}
h4, .h4{
font-size: $font-size-h4;
line-height: 1.45em;
margin-top: $margin-base-vertical * 2;
margin-bottom: $margin-base-vertical;
& + .category,
&.title + .category{
margin-top: -10px;
}
}
h5, .h5 {
font-size: $font-size-h5;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
font-weight: $font-weight-bold;
text-transform: uppercase;
}
p{
line-height: 1.61em;
.description &,
&.description{
font-size: 1.14em;
}
}
.title{
font-weight: $font-weight-bold;
&.title-up{
text-transform: uppercase;
a{
color: $black-color;
text-decoration: none;
}
}
& + .category{
margin-top: -25px;
}
}
.description,
.card-description,
.footer-big p{
color: $dark-gray;
font-weight: $font-weight-light;
}
.category{
text-transform: uppercase;
font-weight: $font-weight-bold;
color: $dark-gray;
}
.text-primary {
color: $brand-primary !important;
}
.text-info {
color: $brand-info !important;
}
.text-success {
color: $brand-success !important;
}
.text-warning {
color: $brand-warning !important;
}
.text-danger {
color: $brand-danger !important;
}
.text-black{
color: $light-black;
}
.blockquote{
border-left: none;
border: 1px solid $default-color;
padding: 20px;
font-size: $font-size-blockquote;
line-height: 1.8;
small{
color: $default-color;
font-size: $font-size-small;
text-transform: uppercase;
}
&.blockquote-primary{
border-color: $primary-color;
color: $primary-color;
small{
color: $primary-color;
}
}
&.blockquote-danger{
border-color: $danger-color;
color: $danger-color;
small{
color: $danger-color;
}
}
&.blockquote-white{
border-color: $opacity-8;
color: $white-color;
small{
color: $opacity-8;
}
}
}

View file

@ -0,0 +1,254 @@
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
$none: 0 !default;
$border-thin: 1px !default;
$border-thick: 2px !default;
$white-color: #FFFFFF !default;
$white-bg: #FFFFFF !default;
$orange-bg: #e95e38 !default;
$smoke-bg: #F5F5F5 !default;
$light-black: #444 !default;
$black-bg: rgba(30,30,30,.97) !default;
$black-color: #2c2c2c !default;
$black-hr: #444444 !default;
$light-gray: #E3E3E3 !default;
$medium-gray: #DDDDDD !default;
$dark-gray: #9A9A9A !default;
$opacity-gray-3: rgba(222,222,222, .3) !default;
$opacity-gray-5: rgba(222,222,222, .5) !default;
$opacity-gray-8: rgba(222,222,222, .8) !default;
$opacity-5: rgba(255,255,255, .5) !default;
$opacity-8: rgba(255,255,255, .8) !default;
$datepicker-color-days: rgba(255,255,255, .8) !default;
$datepicker-color-old-new-days: rgba(255,255,255, .4) !default;
$opacity-1: rgba(255,255,255, .1) !default;
$opacity-2: rgba(255,255,255, .2) !default;
$transparent-bg: transparent !default;
$dark-background: #555555 !default;
$default-color: #888 !default;
$default-states-color: lighten($default-color, 6%) !default;
$default-color-opacity: rgba(182, 182, 182, .6) !default;
$primary-color: #f96332 !default;
$primary-states-color: lighten($primary-color, 6%) !default;
$primary-color-opacity: rgba(249, 99, 50, .3) !default;
$primary-color-alert: rgba(249, 99, 50, .8) !default;
$success-color: #18ce0f !default;
$success-states-color: lighten($success-color, 6%) !default;
$success-color-opacity: rgba(24, 206, 15, .3) !default;
$success-color-alert: rgba(24, 206, 15, .8) !default;
$info-color: #2CA8FF !default;
$info-states-color: lighten($info-color, 6%) !default;
$info-color-opacity: rgba(44, 168, 255, .3) !default;
$info-color-alert: rgba(44, 168, 255, .8) !default;
$warning-color: #FFB236 !default;
$warning-states-color: lighten($warning-color, 6%) !default;
$warning-color-opacity: rgba(255, 178, 54, .3) !default;
$warning-color-alert: rgba(255, 178, 54, .8) !default;
$danger-color: #FF3636 !default;
$danger-states-color: lighten($danger-color, 6%) !default;
$danger-color-opacity: rgba(255, 54, 54, .3) !default;
$danger-color-alert: rgba(255, 54, 54, .8) !default;
/* brand Colors */
$brand-primary: $primary-color !default;
$brand-info: $info-color !default;
$brand-success: $success-color !default;
$brand-warning: $warning-color !default;
$brand-danger: $danger-color !default;
$brand-inverse: $black-color !default;
$link-disabled-color: #666666 !default;
/* light colors */
$light-blue: rgba($primary-color, .2);
$light-azure: rgba($info-color, .2);
$light-green: rgba($success-color, .2);
$light-orange: rgba($warning-color, .2);
$light-red: rgba($danger-color, .2);
//== Components
//
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 19px !default;
$padding-btn-vertical: 11px !default;
$padding-btn-horizontal: 22px !default;
$padding-base-vertical: .5rem !default;
$padding-base-horizontal: .7rem !default;
$padding-round-horizontal: 23px !default;
$padding-simple-vertical: 10px !default;
$padding-simple-horizontal: 17px !default;
$padding-large-vertical: 15px !default;
$padding-large-horizontal: 48px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 15px !default;
// $padding-xs-vertical: 1px !default;
// $padding-xs-horizontal: 5px !default;
$padding-label-vertical: 2px !default;
$padding-label-horizontal: 12px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
$margin-base-horizontal: 15px !default;
$margin-bottom: 10px !default;
$border: 1px solid !default;
$border-radius-extra-small: 0.125rem !default;
$border-radius-small: 0.1875rem !default;
$border-radius-large: 0.25rem !default;
$border-radius-extreme: 0.875rem !default;
$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
$btn-round-radius: 30px !default;
$height-base: 55px !default;
$btn-icon-size: 3.5rem !default;
$btn-icon-size-regular: 2.375rem !default;
$btn-icon-font-size-regular: 0.9375rem !default;
$btn-icon-font-size-small: 0.6875rem !default;
$btn-icon-size-small: 1.875rem !default;
$btn-icon-font-size-lg: 1.325rem !default;
$btn-icon-size-lg: 3.6rem !default;
$font-size-h1: 3.5em !default; // ~ 49px
$font-size-h2: 2.5em !default; // ~ 35px
$font-size-h3: 2em !default; // ~ 28px
$font-size-h4: 1.714em !default; // ~ 24px
$font-size-h5: 1.57em !default; // ~ 22px
$font-size-h6: 1em !default; // ~ 14px
$font-paragraph: 1em !default;
$font-size-navbar: 1em !default;
$font-size-mini: 0.7142em !default;
$font-size-small: 0.8571em !default;
$font-size-base: 14px !default;
$font-size-large: 1em !default;
$font-size-large-navbar: 20px !default;
$font-size-blockquote: 1.1em !default; // ~ 15px
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semi: 600 !default;
$font-weight-bold: 700 !default;
$line-height-general: 1.5 !default;
$line-height-nav-link: 1.625rem !default;
$btn-icon-line-height: 2.4em !default;
$line-height: 1.35em !default;
$line-height-lg: 54px !default;
$border-radius-top: 10px 10px 0 0 !default;
$border-radius-bottom: 0 0 10px 10px !default;
$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
$general-transition-time: 300ms !default;
$slow-transition-time: 370ms !default;
$dropdown-coordinates: 29px -50px !default;
$fast-transition-time: 150ms !default;
$select-coordinates: 50% -40px !default;
$transition-linear: linear !default;
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
$transition-ease: ease 0s;
//$navbar-padding-a: 9px 13px;
$navbar-margin-a: 15px 0px;
$padding-social-a: 10px 5px;
$navbar-margin-a-btn: 15px 0px;
$navbar-margin-a-btn-round: 16px 0px;
$navbar-padding-a-icons: 6px 15px;
$navbar-margin-a-icons: 6px 3px;
$navbar-padding-base: 0.625rem;
//$navbar-margin-brand: 5px 0px;
$navbar-margin-brand-icons: 12px auto;
$navbar-margin-btn: 15px 3px;
$height-icon-sm: 32px;
$width-icon-sm: 32px;
$padding-icon-sm: 4px;
$border-radius-icon-sm: 7px;
$height-icon-message: 40px;
$width-icon-message: 40px;
$height-icon-message-sm: 20px;
$width-icon-message-sm: 20px;
$white-navbar: rgba(#FFFFFF, .96);
$primary-navbar: rgba(#34ACDC, .98);
$info-navbar: rgba(#5BCAFF, .98);
$success-navbar: rgba(#4CD964, .98);
$warning-navbar: rgba(#FF9500, .98);
$danger-navbar: rgba(#FF4C40, .98);
$topbar-x: topbar-x !default;
$topbar-back: topbar-back !default;
$bottombar-x: bottombar-x !default;
$bottombar-back: bottombar-back !default;
//Nucleo Icons
$nc-font-path: '../fonts' !default;
$nc-font-size-base: 14px !default;
$nc-css-prefix: now-ui !default;
$nc-background-color: #eee !default;
$nc-li-width: (30em / 14) !default;
$nc-padding-width: (1em/3) !default;
// Social icons color
$social-twitter: #55acee !default;
$social-twitter-state-color: darken(#55acee, 5%) !default;
$social-facebook: #3b5998 !default;
$social-facebook-state-color: darken(#3b5998, 5%) !default;
$social-google: #dd4b39 !default;
$social-google-state-color: darken(#dd4b39, 5%) !default;
$social-linkedin: #0077B5 !default;
$social-linkedin-state-color: darken(#0077B5, 5%) !default;

View file

@ -0,0 +1,4 @@
@mixin badge-color($color) {
border-color: $color;
color: $color;
}

View file

@ -0,0 +1,160 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
background-color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $btn-states-color;
color: $white-color;
box-shadow: none;
}
&:hover{
box-shadow: 0 3px 8px 0 rgba(0,0,0, 0.17);
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $btn-color;
border-color: $btn-color;
}
}
// btn-neutral style
@if $btn-color == $white-color{
color: $primary-color;
&.btn-danger{
color: $danger-color;
&:hover,
&:focus,
&:active{
color: $danger-states-color;
}
}
&.btn-info{
color: $info-color;
&:hover,
&:focus,
&:active{
color: $info-states-color;
}
}
&.btn-warning{
color: $warning-color;
&:hover,
&:focus,
&:active{
color: $warning-states-color;
}
}
&.btn-success{
color: $success-color;
&:hover,
&:focus,
&:active{
color: $success-states-color;
}
}
&.btn-default{
color: $default-color;
&:hover,
&:focus,
&:active{
color: $default-states-color;
}
}
&.active,
&:active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $white-color;
color: $primary-states-color;
box-shadow: none;
}
&:hover,
&:focus{
color: $primary-states-color;
&:not(.nav-link){
box-shadow: none;
}
}
} @else {
color: $white-color;
}
&.btn-simple{
color: $btn-color;
border-color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
box-shadow: none;
}
}
&.btn-link{
color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
box-shadow: none;
}
}
}
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
font-size: $font-size;
border-radius: $border;
padding: $padding-vertical $padding-horizontal;
&.btn-simple{
padding: $padding-vertical - 1 $padding-horizontal - 1;
}
}

View file

@ -0,0 +1,121 @@
@mixin datepicker-colors($color) {
background-color: $color;
th,
.day div,
table tr td span{
color: $white-color;
}
&:after{
border-bottom-color: $color;
}
&.datepicker-orient-top:after{
border-top-color: $color;
}
.dow{
color: $datepicker-color-days;
}
table tr td.old div,
table tr td.new div,
table tr td span.old,
table tr td span.new{
color: $datepicker-color-old-new-days;
}
table tr td span:hover,
table tr td span.focused{
background:$opacity-1;
}
.datepicker-switch:hover,
.prev:hover,
.next:hover,
tfoot tr th:hover {
background: $opacity-2;
}
table tr td.active div,
table tr td.active:hover div,
table tr td.active.disabled div,
table tr td.active.disabled:hover div {
background-color: $white-color;
color: $color;
}
table tr td.day:hover div,
table tr td.day.focused div {
background: $opacity-2;
}
table tr td.active:hover div,
table tr td.active:hover:hover div,
table tr td.active.disabled:hover div,
table tr td.active.disabled:hover:hover div,
table tr td.active:active div,
table tr td.active:hover:active div,
table tr td.active.disabled:active div,
table tr td.active.disabled:hover:active div,
table tr td.active.active div,
table tr td.active:hover.active div,
table tr td.active.disabled.active div,
table tr td.active.disabled:hover.active div,
table tr td.active.disabled div,
table tr td.active:hover.disabled div,
table tr td.active.disabled.disabled div,
table tr td.active.disabled:hover.disabled div,
table tr td.active[disabled] div,
table tr td.active:hover[disabled] div,
table tr td.active.disabled[disabled] div,
table tr td.active.disabled:hover[disabled] div,
table tr td span.active:hover,
table tr td span.active:hover:hover,
table tr td span.active.disabled:hover,
table tr td span.active.disabled:hover:hover,
table tr td span.active:active,
table tr td span.active:hover:active,
table tr td span.active.disabled:active,
table tr td span.active.disabled:hover:active,
table tr td span.active.active,
table tr td span.active:hover.active,
table tr td span.active.disabled.active,
table tr td span.active.disabled:hover.active,
table tr td span.active.disabled,
table tr td span.active:hover.disabled,
table tr td span.active.disabled.disabled,
table tr td span.active.disabled:hover.disabled,
table tr td span.active[disabled],
table tr td span.active:hover[disabled],
table tr td span.active.disabled[disabled],
table tr td span.active.disabled:hover[disabled]{
background-color: $white-color;
}
table tr td span.active:hover,
table tr td span.active:hover:hover,
table tr td span.active.disabled:hover,
table tr td span.active.disabled:hover:hover,
table tr td span.active:active,
table tr td span.active:hover:active,
table tr td span.active.disabled:active,
table tr td span.active.disabled:hover:active,
table tr td span.active.active,
table tr td span.active:hover.active,
table tr td span.active.disabled.active,
table tr td span.active.disabled:hover.active,
table tr td span.active.disabled,
table tr td span.active:hover.disabled,
table tr td span.active.disabled.disabled,
table tr td span.active.disabled:hover.disabled,
table tr td span.active[disabled],
table tr td span.active:hover[disabled],
table tr td span.active.disabled[disabled],
table tr td span.active.disabled:hover[disabled]{
color: $color;
}
}

View file

@ -0,0 +1,24 @@
@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
background-color: $brand-color;
&:before{
color: $brand-color;
}
.dropdown-header:not([href]):not([tabindex]){
color: $dropdown-header-color;
}
.dropdown-item{
color: $dropdown-color;
&:hover,
&:focus{
background-color: $background-color;
}
}
.dropdown-divider{
background-color: $background-color;
}
}

View file

@ -0,0 +1,205 @@
@mixin input-size($padding-vertical, $padding-horizontal){
padding: $padding-vertical $padding-horizontal;
}
@mixin form-control-placeholder($color, $opacity){
.form-control::-moz-placeholder{
color: $color;
@include opacity(1);
}
.form-control:-moz-placeholder{
color: $color;
@include opacity(1);
}
.form-control::-webkit-input-placeholder{
color: $color;
@include opacity(1);
}
.form-control:-ms-input-placeholder{
color: $color;
@include opacity(1);
}
}
@mixin light-form(){
border-radius: 0;
border:0;
padding: 0;
background-color: transparent;
}
@mixin input-lg-padding($padding-vertical, $padding-horizontal) {
.form-group.form-group-no-border.input-lg,
.input-group.form-group-no-border.input-lg{
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-addon{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
}
.form-group.input-lg,
.input-group.input-lg{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-addon{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-addon{
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
& + .form-control{
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
}
}
}
}
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-addon{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
}
.form-group,
.input-group{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-addon{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-addon{
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
& + .form-control,
& ~ .form-control{
padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
}
}
}
}
//color1 = $opacity-5
//color2 = $opacity-8
//color3 = $white-color
//color4 = $transparent-bg
//color5 = $opacity-1
//color6 = $opacity-2
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
@include form-control-placeholder(darken($color2, 8%), 1);
.form-control{
border-color: $color1;
color: $color2;
&:focus{
border-color: $color3;
background-color: $color4;
color: $color3;
}
}
.has-success,
.has-danger{
&:after{
color: $color3;
}
}
.has-danger{
.form-control{
background-color: $color4;
}
}
.input-group-addon{
background-color: $color4;
border-color: $color1;
color: $color2;
}
.input-group-focus{
.input-group-addon{
background-color: $color4;
border-color: $color3;
color: $color3;
}
}
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control{
background-color: $color5;
color: $color2;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control + .input-group-addon{
background-color: $color5;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control{
&:focus{
& + .input-group-addon{
background-color: $color6;
color: $color3;
}
}
}
.input-group-addon{
background-color: $color5;
border: none;
color: $color2;
}
&.input-group-focus{
.input-group-addon{
background-color: $color6;
color: $color3;
}
}
}
}

View file

@ -0,0 +1,12 @@
@mixin modal-colors($bg-color, $color) {
.modal-content{
background-color: $bg-color;
color: $color;
}
.modal-header .close{
color: $color;
}
}

View file

@ -0,0 +1,226 @@
@mixin navbar-responsive() {
.navbar{
.navbar-nav{
margin-top: 53px;
.nav-link{
padding-top: 0.75rem;
padding-bottom: .75rem;
}
&.navbar-logo{
top: 0;
height: 53px;
}
}
.dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{
background-color: transparent;
border: 0;
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
width: auto;
margin: 0 1rem;
margin-bottom: 15px;
padding-top: 0;
height: 150px;
overflow-y: scroll;
&:before{
display: none;
}
}
.dropdown{
.dropdown-item{
padding-left: 2.5rem;
}
.dropdown-menu{
display: none;
}
&.show .dropdown-menu{
display: block;
}
}
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover{
color: $white-color;
}
.navbar-translate{
width: 100%;
position: relative;
display: flex;
-ms-flex-pack: justify!important;
justify-content: space-between!important;
-ms-flex-align: center;
align-items: center;
@include transform-translate-x(0px);
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.navbar-toggler-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $white-bg;
& + .navbar-toggler-bar{
margin-top: 7px;
}
&.bar2{
width: 17px;
transition: width .2s linear;
}
}
&.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
background: $default-color;
}
& .toggled .navbar-toggler-bar{
width: 24px;
& + .navbar-toggler-bar{
margin-top: 5px;
}
}
}
.bar1,
.bar2,
.bar3 {
outline: 1px solid transparent;
}
.bar1 {
top: 0px;
@include bar-animation($topbar-back);
}
.bar2 {
opacity: 1;
}
.bar3 {
bottom: 0px;
@include bar-animation($bottombar-back);
}
.toggled .bar1 {
top: 6px;
@include bar-animation($topbar-x);
}
.toggled .bar2 {
opacity: 0;
}
.toggled .bar3 {
bottom: 6px;
@include bar-animation($bottombar-x);
}
@include topbar-x-rotation();
@include topbar-back-rotation();
@include bottombar-x-rotation();
@include bottombar-back-rotation();
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
}
@mixin navbar-collapse() {
.navbar-collapse{
position: fixed;
display: block;
top: 0;
height: 100% !important;
width: 300px;
right: 0;
z-index: 1032;
visibility: visible;
background-color: #999;
overflow-y: visible;
border-top: none;
text-align: left;
max-height: none !important;
@include transform-translate-x(300px);
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
&:before{
background: $brand-primary; /* For browsers that do not support gradients */
background: -webkit-linear-gradient($brand-primary 0%, #000 80%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient($brand-primary 0%, #000 80%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient($brand-primary 0%, #000 80%); /* For Firefox 3.6 to 15 */
background: linear-gradient($brand-primary 0%, #000 80%); /* Standard syntax (must be last) */
@include opacity(.76);
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.navbar-nav:not(.navbar-logo){
.nav-link {
margin: 0 1rem;
margin-top: 0.3125rem;
&:not(.btn){
color: $white-color;
}
}
}
.dropdown-menu .dropdown-item{
color: $white-color;
}
}
@include navbar-responsive();
[class*="navbar-expand-"] .navbar-collapse{
width: 300px;
}
.wrapper{
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
#bodyClick{
height: 100%;
width: 100%;
position: fixed;
opacity: 1;
top: 0;
left: auto;
right: 300px;
content: "";
z-index: 9999;
overflow-x: hidden;
background-color: transparent;
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
}

View file

@ -0,0 +1,7 @@
@mixin linear-gradient($color1, $color2){
background: $color1; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
}

View file

@ -0,0 +1,29 @@
@mixin popover-color($color, $text-color) {
background-color: $color;
.popover-body{
color: $text-color;
}
&.bs-popover-right .arrow:after{
border-right-color:$color;
}
&.bs-popover-top .arrow:after{
border-top-color:$color;
}
&.bs-popover-bottom .arrow:after{
border-bottom-color:$color;
}
&.bs-popover-left .arrow:after{
border-left-color:$color;
}
.popover-header{
color: $text-color;
opacity: .6;
}
}

View file

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

View file

@ -0,0 +1,160 @@
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@mixin transition-input-focus-color() {
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@mixin transition($time, $type){
-webkit-transition: all $time $type;
-moz-transition: all $time $type;
-o-transition: all $time $type;
-ms-transition: all $time $type;
transition: all $time $type;
}
@mixin rotate-180(){
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@mixin transform-translate-x($value){
-webkit-transform: translate3d($value, 0, 0);
-moz-transform: translate3d($value, 0, 0);
-o-transform: translate3d($value, 0, 0);
-ms-transform: translate3d($value, 0, 0);
transform: translate3d($value, 0, 0);
}
@mixin transform-translate-y($value){
-webkit-transform: translate3d(0,$value,0);
-moz-transform: translate3d(0,$value,0);
-o-transform: translate3d(0,$value,0);
-ms-transform: translate3d(0,$value,0);
transform: translate3d(0,$value,0);
}
@mixin bar-animation($type){
-webkit-animation: $type 500ms linear 0s;
-moz-animation: $type 500ms linear 0s;
animation: $type 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@mixin topbar-x-rotation(){
@keyframes topbar-x {
0% {top: 0px; transform: rotate(0deg); }
45% {top: 6px; transform: rotate(145deg); }
75% {transform: rotate(130deg); }
100% {transform: rotate(135deg); }
}
@-webkit-keyframes topbar-x {
0% {top: 0px; -webkit-transform: rotate(0deg); }
45% {top: 6px; -webkit-transform: rotate(145deg); }
75% {-webkit-transform: rotate(130deg); }
100% { -webkit-transform: rotate(135deg); }
}
@-moz-keyframes topbar-x {
0% {top: 0px; -moz-transform: rotate(0deg); }
45% {top: 6px; -moz-transform: rotate(145deg); }
75% {-moz-transform: rotate(130deg); }
100% { -moz-transform: rotate(135deg); }
}
}
@mixin topbar-back-rotation(){
@keyframes topbar-back {
0% { top: 6px; transform: rotate(135deg); }
45% { transform: rotate(-10deg); }
75% { transform: rotate(5deg); }
100% { top: 0px; transform: rotate(0); }
}
@-webkit-keyframes topbar-back {
0% { top: 6px; -webkit-transform: rotate(135deg); }
45% { -webkit-transform: rotate(-10deg); }
75% { -webkit-transform: rotate(5deg); }
100% { top: 0px; -webkit-transform: rotate(0); }
}
@-moz-keyframes topbar-back {
0% { top: 6px; -moz-transform: rotate(135deg); }
45% { -moz-transform: rotate(-10deg); }
75% { -moz-transform: rotate(5deg); }
100% { top: 0px; -moz-transform: rotate(0); }
}
}
@mixin bottombar-x-rotation(){
@keyframes bottombar-x {
0% {bottom: 0px; transform: rotate(0deg);}
45% {bottom: 6px; transform: rotate(-145deg);}
75% {transform: rotate(-130deg);}
100% {transform: rotate(-135deg);}
}
@-webkit-keyframes bottombar-x {
0% {bottom: 0px; -webkit-transform: rotate(0deg);}
45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
75% {-webkit-transform: rotate(-130deg);}
100% {-webkit-transform: rotate(-135deg);}
}
@-moz-keyframes bottombar-x {
0% {bottom: 0px; -moz-transform: rotate(0deg);}
45% {bottom: 6px; -moz-transform: rotate(-145deg);}
75% {-moz-transform: rotate(-130deg);}
100% {-moz-transform: rotate(-135deg);}
}
}
@mixin bottombar-back-rotation{
@keyframes bottombar-back {
0% { bottom: 6px;transform: rotate(-135deg);}
45% { transform: rotate(10deg);}
75% { transform: rotate(-5deg);}
100% { bottom: 0px;transform: rotate(0);}
}
@-webkit-keyframes bottombar-back {
0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
45% {-webkit-transform: rotate(10deg);}
75% {-webkit-transform: rotate(-5deg);}
100% {bottom: 0px;-webkit-transform: rotate(0);}
}
@-moz-keyframes bottombar-back {
0% {bottom: 6px;-moz-transform: rotate(-135deg);}
45% {-moz-transform: rotate(10deg);}
75% {-moz-transform: rotate(-5deg);}
100% {bottom: 0px;-moz-transform: rotate(0);}
}
}
@mixin nc-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin nc-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: scale($horiz, $vert);
-moz-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
-o-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}

View file

@ -0,0 +1,304 @@
/* ========================================================================
* bootstrap-switch - v3.3.2
* http://www.bootstrap-switch.org
* ========================================================================
* Copyright 2012-2013 Mattia Larentis
* http://www.apache.org/licenses/LICENSE-2.0
*/
//* IMPORTANT! Creative Tim Notice: this file has major changes to fit the NOW UI Kit's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 30px;
border: 0;
position: relative;
text-align: left;
margin-bottom: 10px;
line-height: 8px;
width: 59px !important;
height: 22px;
outline: none;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
margin-right: 20px;
background: rgba($black-color, .2);
}
.bootstrap-switch .bootstrap-switch-container {
display: inline-flex;
top: 0;
height: 22px;
border-radius: 4px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100px !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block !important;
height: 100%;
color: #fff;
padding: 6px 12px;
font-size: 11px;
text-indent: -5px;
line-height: 15px;
-webkit-transition: 0.25s ease-out;
transition: 0.25s ease-out;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
float: left;
line-height: 11px;
width: 50% !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-brown,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-brown {
color: #fff;
background: $brand-primary;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-blue,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-blue {
color: #fff;
background: $brand-info;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-green,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-green {
color: #fff;
background: $brand-success;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-orange,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-orange {
background: $brand-warning;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-red,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-red {
color: #fff;
background: $brand-danger;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
color: #fff;
}
.bootstrap-switch .bootstrap-switch-label {
text-align: center;
z-index: 100;
color: #333333;
background: #ffffff;
width: 22px !important;
height: 22px !important;
margin: 0px -11px;
border-radius: 20px;
position: absolute;
float: left;
top: 0;
left: 50%;
padding: 0;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
background-color: rgba(23, 23, 23, .4);
}
.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{
width: 27px !important;
margin-left: -16px;
}
.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{
width: 27px !important;
margin-left: -11px;
}
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
text-indent: 6px;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
}
.bootstrap-switch input[type='radio'].form-control,
.bootstrap-switch input[type='checkbox'].form-control {
height: auto;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
padding: 6px 16px;
font-size: 18px;
line-height: 1.33;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-readonly,
.bootstrap-switch.bootstrap-switch-indeterminate {
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-webkit-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-focused {
// border-color: #66afe9;
// outline: 0;
// -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
// box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
// .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
// border-bottom-right-radius: 3px;
// border-top-right-radius: 3px;
// }
// .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
// border-bottom-left-radius: 3px;
// border-top-left-radius: 3px;
// }
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{
margin-left: -2px !important;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{
margin-left: -39px !important;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{
&:before{
background-color: #FFFFFF;
}
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{
background-color: $brand-danger;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{
background-color: $brand-warning;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{
background-color: $brand-success;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{
background-color: $brand-primary;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{
background-color: $brand-info;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{
background-color: $light-gray;
}
.bootstrap-switch-off .bootstrap-switch-handle-on{
opacity: 0;
}
.bootstrap-switch-on .bootstrap-switch-handle-off{
opacity: 0;
}

View file

@ -0,0 +1,520 @@
/*!
* Datepicker for Bootstrap v1.7.0-dev (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
padding: 8px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
@include transform-translate-y(-40px);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
@include opacity(0);
visibility: hidden;
display: block;
width: 254px;
max-width: 254px;
&.dropdown-menu:before{
display: none;
}
&.datepicker-primary{
@include datepicker-colors($primary-color);
}
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl.dropdown-menu {
left: auto;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid transparent;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 241px;
max-width: 241px;
}
.datepicker .day div,
.datepicker th {
@include transition($general-transition-time, $transition-ease);
text-align: center;
width: 30px;
height: 30px;
line-height: 2.2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 50%;
font-weight: $font-weight-light;
font-size: $font-size-base;
border: none;
position: relative;
cursor: pointer;
}
.datepicker th{
color: $primary-color;
}
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th{
padding: 2px;
text-align: center;
cursor: pointer;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover div,
.datepicker table tr td.day.focused div {
background: #eee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: $default-color;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: $default-color ;
cursor: default;
}
.datepicker table tr td.highlighted {
background: #d9edf7;
border-radius: 0;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: linear-gradient(to bottom, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active div,
.datepicker table tr td.active:hover div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active.disabled:hover div {
background-color: $primary-color;
color: $white-color;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td.active:hover div,
.datepicker table tr td.active:hover:hover div,
.datepicker table tr td.active.disabled:hover div,
.datepicker table tr td.active.disabled:hover:hover div,
.datepicker table tr td.active:active div,
.datepicker table tr td.active:hover:active div,
.datepicker table tr td.active.disabled:active div,
.datepicker table tr td.active.disabled:hover:active div,
.datepicker table tr td.active.active div,
.datepicker table tr td.active:hover.active div,
.datepicker table tr td.active.disabled.active div,
.datepicker table tr td.active.disabled:hover.active div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active:hover.disabled div,
.datepicker table tr td.active.disabled.disabled div,
.datepicker table tr td.active.disabled:hover.disabled div,
.datepicker table tr td.active[disabled] div,
.datepicker table tr td.active:hover[disabled] div,
.datepicker table tr td.active.disabled[disabled] div,
.datepicker table tr td.active.disabled:hover[disabled] div{
background-color: $primary-color;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 41px;
height: 41px;
line-height: 41px;
float: left;
margin: 1%;
font-size: $font-size-base;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: $default-color;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
color: #fff;
background-color: $primary-color;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: $primary-color;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: $default-color;
}
.datepicker .datepicker-switch {
width: auto;
border-radius: $border-radius-small;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker{
.prev,
.next{
width: 35px;
height: 35px;
}
i{
position: relative;
top: 2px;
}
.prev i{
left: -1px;
}
.next i{
right: -1px;
}
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eee;
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
visibility: hidden;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.input-append.date .add-on,
.input-prepend.date .add-on {
cursor: pointer;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
margin-top: 3px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
background-color: #eee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}

View file

@ -0,0 +1,351 @@
/*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* Fix 401 */
}
.noUi-connect {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-origin {
position: absolute;
height: 0;
width: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base,
.noUi-handle {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 1px;
}
.noUi-horizontal .noUi-handle {
border-radius: 50%;
background-color: $white-color;
box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2);
height:15px;
width:15px;
cursor:pointer;
margin-left: -10px;
margin-top: -7px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
/* Styling;
*/
.noUi-target {
background-color: rgba(182, 182, 182, .3);
border-radius: 3px;
}
.noUi-connect {
background: $default-color;
border-radius: 3px;
-webkit-transition: background 450ms;
transition: background 450ms;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
// border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF,
inset 0 1px 7px #EBEBEB,
0 3px 6px -3px #BBB;
-webkit-transition: $general-transition-time $transition-ease;
-moz-transition: $general-transition-time $transition-ease;
-ms-transition: $general-transition-time $transition-ease;
-o-transform: $general-transition-time $transition-ease;
transition: $general-transition-time $transition-ease;
}
.noUi-active {
-webkit-transform: scale3d(1.5,1.5,1);
-moz-transform: scale3d(1.5,1.5,1);
-ms-transform: scale3d(1.5,1.5,1);
-o-transform: scale3d(1.5,1.5,1);
transform: scale3d(1.5,1.5,1);
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate3d(-50%,50%,0);
transform: translate3d(-50%,50%,0);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
padding-left: 25px;
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.slider {
&.slider-neutral{
& .noUi-connect,
&.noUi-connect{
background-color: $white-color;
}
&.noUi-target{
background-color: rgba(255,255,255, .3);
}
& .noUi-handle{
background-color: $white-color;
}
}
&.slider-primary{
& .noUi-connect,
&.noUi-connect{
background-color: $primary-color;
}
&.noUi-target{
background-color: $primary-color-opacity;
}
& .noUi-handle{
background-color: $brand-primary;
}
}
&.slider-info{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-info;
}
&.noUi-target{
background-color: $info-color-opacity;
}
& .noUi-handle{
background-color: $brand-info;
}
}
&.slider-success{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-success;
}
&.noUi-target{
background-color: $success-color-opacity;
}
& .noUi-handle{
background-color: $brand-success;
}
}
&.slider-warning{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-warning;
}
&.noUi-target{
background-color: $warning-color-opacity;
}
& .noUi-handle{
background-color: $brand-warning;
}
}
&.slider-danger{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-danger;
}
&.noUi-target{
background-color: $danger-color-opacity;
}
& .noUi-handle{
background-color: $brand-danger;
}
}
}

View file

@ -0,0 +1,81 @@
#main_header {
background: #122444;
color: #fff;
}
.demo-drawer {
background: #1b2d4c;
color: #fff;
}
#main_canvas {
color: #333;
}
.monitor_item .mdl-card__media {
background: #fbfbfb;
}
.monitor_item .stream-block {
background: #000;
}
.monitor_item .mdl-card {
border: 1px solid #b7b7b7;
}
.monitor_item .mdl-card__supporting-text {
background: #122444;
color: #fff!important;
}
.progress-bar-warning {
background-color: #1a2c4b;
}
.monitor_item .side-menu {
background: #1b2431;
color: #fff;
}
.monitor_item .mdl-card {
border: 1px solid #122444;
}
.dark.modal .modal-header,.dark.modal .modal-footer{background:#091222;border-color:#222;}
.dark.modal .modal-body{background:#151d28;}
.form-group-group.forestgreen {border-color: #091222;}
.form-group-group.forestgreen h4 {background: #091222;}
.dark .form-group-group {background: #18253e;}
.dark .list-group-item {background: #091222;border-color: #18253e;}
/*Cool BG*/
.dark.modal .modal-body{background: transparent}
#main_canvas, .dark.modal .modal-content {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23fdfdfd' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-color: #054e9f!important;
}
#main_canvas:before,.dark.modal .modal-content:before,#main_header:before {
content:'';
position: absolute;width:100%;height:100%;top:0;left:0;
background: rgba(227, 227, 227, 0.26);
background: -webkit-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -o-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -moz-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: linear-gradient(0deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
}
.grid-stack{z-index: 1}
.dark.modal .modal-footer, .dark.modal .modal-header, .dark.modal .modal-body {
z-index: 1;
position: relative;
}
.dark .form-group-group,.monitor_item .mdl-card__supporting-text,.demo-drawer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%231a2a4a' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#main_header {
background-color: #630e0e;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%231a2a4a' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#main_header:before {
max-height: 64px;
}
#main_header .nav>li>a:hover {
background: rgba(227, 227, 227, 0.26);
background: -webkit-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -o-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -moz-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: linear-gradient(0deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
}