Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| db3d54a835 | |||
| 37e155a9b1 | |||
| 69e2ee972c | |||
| c6fb90e562 | |||
| 9f2d29c8fe | |||
| ec8a954b0b | |||
| f2938cf701 |
7
README.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# Pi Control
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
[Pi Control Installation](https://pi-control.de/install/)
|
||||||
|
|
||||||
|
## Bei Fragen oder Problemen
|
||||||
|
Über das [Ticketsystem](https://git.schultes.dev/gregor/pi-control/issues) können Fehler gemeldet werden und im [Forum](https://bugs.die-schultes.eu/projects/pi-control/boards) gibt es Hilfe zu Fragen rund um Pi Control
|
||||||
69
api/v1/overview.php
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<?php
|
||||||
|
define('PICONTROL', true);
|
||||||
|
|
||||||
|
(include_once realpath(dirname(__FILE__)) . '/../../resources/init.php') or die('Error: 0x0000');
|
||||||
|
(include_once LIBRARY_PATH . 'main/main.function.php') or die('Error: 0x0001');
|
||||||
|
(include_once LIBRARY_PATH . 'main/rpi.function.php') or die('Error: 0x0002');
|
||||||
|
(include_once LIBRARY_PATH . 'api/api.class.php') or die('Error: 0x0003');
|
||||||
|
|
||||||
|
$api = new API;
|
||||||
|
|
||||||
|
if (isset($_POST['data'])) {
|
||||||
|
$datas = explode(';', $_POST['data']);
|
||||||
|
setData($datas, $api);
|
||||||
|
} elseif (isset($_GET['data'])) {
|
||||||
|
$datas = explode(';', $_GET['data']);
|
||||||
|
setData($datas, $api);
|
||||||
|
} else
|
||||||
|
$api->setError('error', 'No data set.');
|
||||||
|
|
||||||
|
$api->display();
|
||||||
|
|
||||||
|
function setData($datas, $api)
|
||||||
|
{
|
||||||
|
foreach ($datas as $data) {
|
||||||
|
switch ($data) {
|
||||||
|
case 'startTime':
|
||||||
|
$api->addData('startTime', formatTime(time() - rpi_getRuntime()));
|
||||||
|
break;
|
||||||
|
case 'runtime':
|
||||||
|
$api->addData('runtime', getDateFormat(rpi_getRuntime()));
|
||||||
|
break;
|
||||||
|
case 'cpuClock':
|
||||||
|
$api->addData('cpuClock', rpi_getCpuClock());
|
||||||
|
break;
|
||||||
|
case 'cpuLoad':
|
||||||
|
$api->addData('cpuLoad', rpi_getCpuLoad(false));
|
||||||
|
break;
|
||||||
|
case 'cpuTemp':
|
||||||
|
$api->addData('cpuTemp', numberFormat(rpi_getCoreTemprature()));
|
||||||
|
break;
|
||||||
|
case 'ramPercentage':
|
||||||
|
$ram = rpi_getMemoryUsage();
|
||||||
|
$api->addData('ramPercentage', $ram['percent']);
|
||||||
|
break;
|
||||||
|
case 'memoryUsed':
|
||||||
|
$memory = rpi_getMemoryInfo();
|
||||||
|
$api->addData('memoryUsed', sizeUnit($memory[count($memory) - 1]['used']));
|
||||||
|
break;
|
||||||
|
case 'memoryFree':
|
||||||
|
$memory = rpi_getMemoryInfo();
|
||||||
|
$api->addData('memoryFree', sizeUnit($memory[count($memory) - 1]['free']));
|
||||||
|
break;
|
||||||
|
case 'memoryTotal':
|
||||||
|
$memory = rpi_getMemoryInfo();
|
||||||
|
$api->addData('memoryTotal', sizeUnit($memory[count($memory) - 1]['total']));
|
||||||
|
break;
|
||||||
|
case 'memoryPercent':
|
||||||
|
$memory = rpi_getMemoryInfo();
|
||||||
|
$api->addData('memoryPercent', $memory[count($memory) - 1]['percent']);
|
||||||
|
break;
|
||||||
|
case 'devices':
|
||||||
|
$api->addData('devices', rpi_getUsbDevices());
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
$api->setError('error', 'Data for "' . $data . '" are not available.');
|
||||||
|
break 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -111,4 +111,3 @@ if (isset($_POST['logout']))
|
|||||||
}
|
}
|
||||||
|
|
||||||
$api->display();
|
$api->display();
|
||||||
?>
|
|
||||||
@@ -7,4 +7,3 @@ $apiVersions[0] = array('versioncode' => 1,
|
|||||||
'date' => 1443909600);
|
'date' => 1443909600);
|
||||||
|
|
||||||
echo json_encode(array('versions' => $apiVersions, 'latest' => $apiLatest));
|
echo json_encode(array('versions' => $apiVersions, 'latest' => $apiLatest));
|
||||||
?>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
# Pi Control
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
[Pi Control Installation](https://pi-control.de/install/)
|
|
||||||
|
|
||||||
## Bei Fragen oder Problemen
|
|
||||||
Über das [Ticketsystem](https://bugs.die-schultes.eu/projects/pi-control/issues) können Fehler gemeldet werden und im [Forum](https://bugs.die-schultes.eu/projects/pi-control/boards) gibt es Hilfe zu Fragen rund um Pi Control
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
<?php
|
|
||||||
define('PICONTROL', true);
|
|
||||||
|
|
||||||
(include_once realpath(dirname(__FILE__)).'/../../resources/init.php') or die('Error: 0x0000');
|
|
||||||
(include_once LIBRARY_PATH.'main/main.function.php') or die('Error: 0x0001');
|
|
||||||
(include_once LIBRARY_PATH.'main/rpi.function.php') or die('Error: 0x0002');
|
|
||||||
(include_once LIBRARY_PATH.'api/api.class.php') or die('Error: 0x0003');
|
|
||||||
|
|
||||||
$api = new API;
|
|
||||||
|
|
||||||
if (isset($_POST['data']))
|
|
||||||
{
|
|
||||||
$datas = explode(';', $_POST['data']);
|
|
||||||
|
|
||||||
foreach ($datas as $data)
|
|
||||||
{
|
|
||||||
switch ($data)
|
|
||||||
{
|
|
||||||
case 'startTime':
|
|
||||||
$api->addData('startTime', formatTime(time() - rpi_getRuntime()));
|
|
||||||
break;
|
|
||||||
case 'runtime':
|
|
||||||
$api->addData('runtime', getDateFormat(rpi_getRuntime()));
|
|
||||||
break;
|
|
||||||
case 'cpuClock':
|
|
||||||
$api->addData('cpuClock', rpi_getCpuClock());
|
|
||||||
break;
|
|
||||||
case 'cpuLoad':
|
|
||||||
$api->addData('cpuLoad', rpi_getCpuLoad(true));
|
|
||||||
break;
|
|
||||||
case 'cpuTemp':
|
|
||||||
$api->addData('cpuTemp', numberFormat(rpi_getCoreTemprature()));
|
|
||||||
break;
|
|
||||||
case 'ramPercentage':
|
|
||||||
$ram = rpi_getMemoryUsage();
|
|
||||||
$api->addData('ramPercentage', $ram['percent']);
|
|
||||||
break;
|
|
||||||
case 'memoryUsed':
|
|
||||||
$memory = rpi_getMemoryInfo();
|
|
||||||
$api->addData('memoryUsed', sizeUnit($memory[count($memory)-1]['used']));
|
|
||||||
break;
|
|
||||||
case 'memoryFree':
|
|
||||||
$memory = rpi_getMemoryInfo();
|
|
||||||
$api->addData('memoryFree', sizeUnit($memory[count($memory)-1]['free']));
|
|
||||||
break;
|
|
||||||
case 'memoryTotal':
|
|
||||||
$memory = rpi_getMemoryInfo();
|
|
||||||
$api->addData('memoryTotal', sizeUnit($memory[count($memory)-1]['total']));
|
|
||||||
break;
|
|
||||||
case 'memoryPercent':
|
|
||||||
$memory = rpi_getMemoryInfo();
|
|
||||||
$api->addData('memoryPercent', $memory[count($memory)-1]['percent']);
|
|
||||||
break;
|
|
||||||
case 'devices':
|
|
||||||
$api->addData('devices', rpi_getUsbDevices());
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
$api->setError('error', 'Data for "'.$data.'" are not available.');
|
|
||||||
break 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
$api->setError('error', 'No data set.');
|
|
||||||
|
|
||||||
$api->display();
|
|
||||||
?>
|
|
||||||
@@ -1,138 +0,0 @@
|
|||||||
var is_loding = false;
|
|
||||||
|
|
||||||
function overviewStatusRefreshEffect(element)
|
|
||||||
{
|
|
||||||
element.css({'transition': 'background-color 0.5s', 'background-color': 'rgba(243, 255, 164, 1)'});
|
|
||||||
setTimeout(function(){
|
|
||||||
element.css({'background-color': 'transparent'});
|
|
||||||
}, 800);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError()
|
|
||||||
{
|
|
||||||
jQuery('.error-msg-refresh-bar').remove();
|
|
||||||
jQuery('.flex-box-refresh div:eq(0)').after('<div class="red error-msg-refresh-bar" style="vertical-align: bottom; font-weight: bold;">' + _t('Fehler!') + '</div>');
|
|
||||||
jQuery('.refresh-bar').stop(false, true).css('width', 0);
|
|
||||||
jQuery('a[href=#refresh] img').removeClass('rotate-icon');
|
|
||||||
|
|
||||||
setTimeout('overviewStatusRefresh()', 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function overviewStatusRefresh()
|
|
||||||
{
|
|
||||||
jQuery('.error-msg-refresh-bar').remove();
|
|
||||||
jQuery('.refresh-bar').animate({width: '100%'}, reload_timeout, 'linear', function(e)
|
|
||||||
{
|
|
||||||
var this_ = jQuery(this);
|
|
||||||
var runtime = jQuery('.flex-container > div:eq(2)');
|
|
||||||
var cpuClock = jQuery('.flex-container > div:eq(3)');
|
|
||||||
var cpuLoad = jQuery('.flex-container > div:eq(4)');
|
|
||||||
var cpuTemp = jQuery('.flex-container > div:eq(5)');
|
|
||||||
var ramPercentage = jQuery('.flex-container > div:eq(6)');
|
|
||||||
var memoryUsed = jQuery('.flex-container > div:eq(7)');
|
|
||||||
var memoryFree = jQuery('.flex-container > div:eq(8)');
|
|
||||||
var memoryTotal = jQuery('.flex-container > div:eq(9)');
|
|
||||||
|
|
||||||
jQuery('a[href=#refresh] img').addClass('rotate-icon');
|
|
||||||
|
|
||||||
this_.animate({width: '88.8%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'runtime' }, function(data)
|
|
||||||
{
|
|
||||||
if (runtime.find('span').html() != data.data.runtime)
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(runtime);
|
|
||||||
runtime.find('span').html(data.data.runtime);
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '77.7%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'cpuClock' }, function(data)
|
|
||||||
{
|
|
||||||
if (cpuClock.find('span').html() != data.data.cpuClock+' MHz')
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(cpuClock);
|
|
||||||
cpuClock.find('span').html(data.data.cpuClock+' MHz');
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '66.6%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'cpuLoad' }, function(data)
|
|
||||||
{
|
|
||||||
if (cpuLoad.find('.progressbar div').html() != data.data.cpuLoad+'%')
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(cpuLoad);
|
|
||||||
cpuLoad.find('.progressbar').attr('data-text', data.data.cpuLoad+'%').find('div').css('width', data.data.cpuLoad+'%');
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '55.5%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'cpuTemp' }, function(data)
|
|
||||||
{
|
|
||||||
if (cpuTemp.find('span').html() != data.data.cpuTemp+' °C')
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(cpuTemp);
|
|
||||||
cpuTemp.find('span').html(data.data.cpuTemp+' °C');
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '44.4%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'ramPercentage' }, function(data)
|
|
||||||
{
|
|
||||||
if (ramPercentage.find('.progressbar div').html() != data.data.ramPercentage+'%')
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(ramPercentage);
|
|
||||||
ramPercentage.find('.progressbar').attr('data-text', data.data.ramPercentage+'%').find('div').css('width', data.data.ramPercentage+'%');
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '33.3%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'memoryUsed' }, function(data)
|
|
||||||
{
|
|
||||||
if (memoryUsed.find('span').html() != data.data.memoryUsed)
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(memoryUsed);
|
|
||||||
memoryUsed.find('span').html(data.data.memoryUsed);
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '22.2%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'memoryFree' }, function(data)
|
|
||||||
{
|
|
||||||
if (memoryFree.find('span').html() != data.data.memoryFree)
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(memoryFree);
|
|
||||||
memoryFree.find('span').html(data.data.memoryFree);
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '11.1%'}, 300, 'linear');
|
|
||||||
jQuery.post('api/v1/overview.php', { data: 'memoryTotal' }, function(data)
|
|
||||||
{
|
|
||||||
if (memoryTotal.find('span').html() != data.data.memoryTotal)
|
|
||||||
{
|
|
||||||
overviewStatusRefreshEffect(memoryTotal);
|
|
||||||
memoryTotal.find('span').html(data.data.memoryTotal);
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.animate({width: '0%'}, 300, 'linear', function(e) {
|
|
||||||
is_loding = false;
|
|
||||||
jQuery('a[href=#refresh] img').removeClass('rotate-icon');
|
|
||||||
});
|
|
||||||
|
|
||||||
overviewStatusRefresh();
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
}).fail(function(e) { showError(); });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
jQuery(document).on('click', 'a[href=#refresh]', function(e)
|
|
||||||
{
|
|
||||||
if (is_loding == false)
|
|
||||||
jQuery('.refresh-bar').stop(false, true);
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
jQuery(document).ready(function(e)
|
|
||||||
{
|
|
||||||
overviewStatusRefresh();
|
|
||||||
});
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
<?php if (!defined('PICONTROL')) exit(); ?>
|
|
||||||
<!-- Container -->
|
|
||||||
<div>
|
|
||||||
<div class="box">
|
|
||||||
<div class="inner-header">
|
|
||||||
<span><?php _e('SSH-Login'); ?></span>
|
|
||||||
</div>
|
|
||||||
<?php if ($data['logged_in'] === false) { ?>
|
|
||||||
<form action="?s=ssh_login" method="post">
|
|
||||||
<div class="inner">
|
|
||||||
<strong class="red"><?php _e('Du bist noch nicht angemeldet. Dadurch kannst du einige Funktionen nicht nutzen.'); ?></strong>
|
|
||||||
</div>
|
|
||||||
<input type="radio" id="ssh-login-passwd" name="ssh-login" value="password" checked="checked" />
|
|
||||||
<label for="ssh-login-passwd">
|
|
||||||
<div class="inner-table">
|
|
||||||
<div class="ssh-login-table-clickable-area"></div>
|
|
||||||
<table class="table table-borderless">
|
|
||||||
<tr>
|
|
||||||
<th colspan="2"><strong><?php _e('Anmeldung über ein Passwort'); ?></strong><span> [<?php _e('Klicken zum aktivieren'); ?>]</span></th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="width: 30%;"><strong><?php _e('SSH-Port'); ?></strong></td>
|
|
||||||
<td><input type="text" name="port" style="width: 50px;" value="<?php echo $data['ssh_info']['port']; ?>" maxlength="5" /> <span class="small-info"><?php _e('Standard: %d', 22); ?></span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('SSH-Benutzername'); ?></strong></td>
|
|
||||||
<td><input type="text" name="username" style="width: 40%;" value="<?php echo $data['ssh_info']['username']; ?>" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('SSH-Passwort'); ?></strong></td>
|
|
||||||
<td><input type="password" name="password" style="width: 40%;" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('SSH-Login speichern?'); ?></strong></td>
|
|
||||||
<td><input type="checkbox" name="remember-me" value="checked" id="ssh-login-passwd-checkbox" /><label for="ssh-login-passwd-checkbox" class="checkbox only-checkbox"> </label> <span class="small_info"><?php _e('Speichert das Passwort, damit nicht nach jeder Session neu angemeldet werden muss.'); ?></span></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div class="inner">
|
|
||||||
<div class="divider"><div></div><div><?php _e('ODER'); ?></div></div>
|
|
||||||
</div>
|
|
||||||
<input type="radio" id="ssh-login-pubkey" name="ssh-login" value="publickey" />
|
|
||||||
<label for="ssh-login-pubkey">
|
|
||||||
<div class="inner-table">
|
|
||||||
<div class="ssh-login-table-clickable-area"></div>
|
|
||||||
<table class="table table-borderless">
|
|
||||||
<tr>
|
|
||||||
<th colspan="2"><strong><?php _e('Anmeldung über einen Publickey'); ?></strong><span> [<?php _e('Klicken zum aktivieren'); ?>]</span></th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="width: 30%;"><strong><?php _e('SSH-Port'); ?></strong></td>
|
|
||||||
<td><input type="text" name="port_" style="width: 50px;" value="<?php echo $data['ssh_info']['port']; ?>" maxlength="5" /> <span class="small-info"><?php _e('Standard: 22'); ?></span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('SSH-Benutzername'); ?></strong></td>
|
|
||||||
<td><input type="text" name="username_" style="width: 40%;" value="<?php echo $data['ssh_info']['username']; ?>" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('SSH-Privatekey'); ?></strong></td>
|
|
||||||
<td><textarea name="privatekey_" style="width: 80%; height: 100px;"></textarea></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('Privatekey-Passwort (falls nötig)'); ?></strong></td>
|
|
||||||
<td><input type="password" name="password_" style="width: 40%;" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong><?php _e('SSH-Login speichern?'); ?></strong></td>
|
|
||||||
<td><input type="checkbox" name="remember-me_" value="checked" id="ssh-login-pubkey-checkbox" /><label for="ssh-login-pubkey-checkbox" class="checkbox only-checkbox"> </label> <span class="small_info"><?php _e('Speichert das Passwort, damit nicht nach jeder Session neu angemeldet werden muss.'); ?></span></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div class="inner-end">
|
|
||||||
<input type="submit" name="submit" value="<?php _e('Anmelden'); ?>" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<?php } else { ?>
|
|
||||||
<div class="inner">
|
|
||||||
<strong class="green"><?php _e('Du bist bereits angemeldet mit dem Benutzer %s.', $data['ssh_info']['username']); ?></strong>
|
|
||||||
</div>
|
|
||||||
<div class="inner-end">
|
|
||||||
<a href="?s=ssh_login&logout"><button><?php _e('Abmelden'); ?></button></a>
|
|
||||||
</div>
|
|
||||||
<?php } ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="clear_both"></div>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<?php
|
|
||||||
if (PHP_SAPI != 'cli') exit();
|
|
||||||
const PICONTROL = true;
|
|
||||||
|
|
||||||
$doNotCheckForAuthentification = true;
|
|
||||||
(include_once realpath(dirname(__FILE__)).'/../init.php') or die('Error: 0x0000');
|
|
||||||
(include_once LIBRARY_PATH.'main/main.function.php') or die('Error: 0x0001');
|
|
||||||
|
|
||||||
$folder = CRON_PATH;
|
|
||||||
$fileArray = array();
|
|
||||||
|
|
||||||
foreach (@scandir($folder) as $file)
|
|
||||||
{
|
|
||||||
if ($file[0] != '.')
|
|
||||||
{
|
|
||||||
if (is_file($folder.'/'.$file) && $file != 'init.php')
|
|
||||||
$fileArray[] = $file;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
foreach ($fileArray as $file)
|
|
||||||
{
|
|
||||||
$timeOfFile = str_replace('-', '', substr($file, 0, 2));
|
|
||||||
$rest = date('i', time()) % $timeOfFile;
|
|
||||||
|
|
||||||
if (is_numeric($rest) && $rest == 0)
|
|
||||||
{
|
|
||||||
exec('/usr/bin/php -f "'.CRON_PATH.$file.'"');
|
|
||||||
set_time_limit(30);
|
|
||||||
usleep(500000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trim(exec('dpkg -s php7.4-cli | grep Status: ')) != '' || trim(exec('dpkg -s php7.3-cli | grep Status: ')) != '' || trim(exec('dpkg -s php8.0-cli | grep Status: ')) != '' || trim(exec('dpkg -s php8.1-cli | grep Status: ')) != '' || trim(exec('dpkg -s php8.2-cli | grep Status: ')) != '')
|
|
||||||
setConfig('cron:execution.cron', time());
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
<?php
|
|
||||||
if (!defined('PICONTROL')) exit();
|
|
||||||
|
|
||||||
function checkTemperatureMonitoringEmailStatus()
|
|
||||||
{
|
|
||||||
global $tpl, $config;
|
|
||||||
|
|
||||||
$id = getConfig('main:monitoringCpuTemp.id', '');
|
|
||||||
$code = getConfig('main:monitoringCpuTemp.code', '');
|
|
||||||
$email = getConfig('main:monitoringCpuTemp.email', '');
|
|
||||||
|
|
||||||
$data = NULL;
|
|
||||||
$curl = curl_init();
|
|
||||||
curl_setopt($curl, CURLOPT_URL, $config['url']['temperatureMonitoring'].'?'.http_build_query(array('id' => $id, 'code' => $code, 'email' => $email)));
|
|
||||||
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
|
|
||||||
|
|
||||||
do
|
|
||||||
{
|
|
||||||
if (($data = curl_exec($curl)) === false)
|
|
||||||
{
|
|
||||||
$info = curl_getinfo($curl);
|
|
||||||
$tpl->msg('error', _t('Verbindungsfehler'), _t('Bei der Verbindung zum Server ist ein unerwarteter Fehler aufgetreten. Fehlercode: %d (%s)', $info['http_code'], curl_error($curl)), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
$info = curl_getinfo($curl);
|
|
||||||
|
|
||||||
if ($info['http_code'] == 404)
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Verbindungsfehler'), _t('Leider konnte keine Verbindung zum Server hergestellt werden, da dieser momentan vermutlich nicht erreichbar ist. Fehlercode: %d', $info['http_code']), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
elseif ($info['http_code'] != 200)
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Verbindungsfehler'), _t('Bei der Verbindung zum Server ist ein unerwarteter Fehler aufgetreten. Fehlercode: %d', $info['http_code']), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($data == '')
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Serverfehler'), _t('Bei der Verbindung zum Server ist ein Fehler aufgetreten. Der Server sendet eine leere Antwort.'), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Verarbeite Datenstring
|
|
||||||
$json = json_decode($data, true);
|
|
||||||
|
|
||||||
if (json_last_error() != JSON_ERROR_NONE || !isset($json['existing'], $json['email'], $json['code']))
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Verarbeitungsfehler'), _t('Bei der Verbindung zum Server ist ein Fehler aufgetreten. Der Server sendet eine fehlerhafte Antwort.'), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Antwort in Ordnung
|
|
||||||
if ($json['existing'] == false || $json['email'] == false || $json['code'] == false)
|
|
||||||
setConfig('main:monitoringCpuTemp.code', '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
while (false);
|
|
||||||
|
|
||||||
curl_close($curl);
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkTemperatureMonitoringEmailCode()
|
|
||||||
{
|
|
||||||
global $tpl, $config;
|
|
||||||
|
|
||||||
$id = getConfig('main:monitoringCpuTemp.id', '');
|
|
||||||
$email = getConfig('main:monitoringCpuTemp.email', '');
|
|
||||||
|
|
||||||
$data = NULL;
|
|
||||||
$curl = curl_init();
|
|
||||||
curl_setopt($curl, CURLOPT_URL, $config['url']['temperatureMonitoring'].'?'.http_build_query(array('id' => $id, 'code' => true, 'email' => $email)));
|
|
||||||
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
|
|
||||||
|
|
||||||
do
|
|
||||||
{
|
|
||||||
if (($data = curl_exec($curl)) === false)
|
|
||||||
{
|
|
||||||
$info = curl_getinfo($curl);
|
|
||||||
$tpl->msg('error', _t('Verbindungsfehler'), _t('Bei der Verbindung zum Server ist ein unerwarteter Fehler aufgetreten. Fehlercode: %d (%s)', $info['http_code'], curl_error($curl)), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
$info = curl_getinfo($curl);
|
|
||||||
|
|
||||||
if ($info['http_code'] == 404)
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Verbindungsfehler'), _t('Leider konnte keine Verbindung zum Server hergestellt werden, da dieser momentan vermutlich nicht erreichbar ist. Fehlercode: %d', $info['http_code']), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
elseif ($info['http_code'] != 200)
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Verbindungsfehler'), _t('Bei der Verbindung zum Server ist ein unerwarteter Fehler aufgetreten. Fehlercode: %d', $info['http_code']), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($data == '')
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Serverfehler'), _t('Bei der Verbindung zum Server ist ein Fehler aufgetreten. Der Server sendet eine leere Antwort.'), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Verarbeite Datenstring
|
|
||||||
$json = json_decode($data, true);
|
|
||||||
|
|
||||||
if (json_last_error() != JSON_ERROR_NONE || !isset($json['existing'], $json['email'], $json['code']))
|
|
||||||
{
|
|
||||||
$tpl->msg('error', _t('Verarbeitungsfehler'), _t('Bei der Verbindung zum Server ist ein Fehler aufgetreten. Der Server sendet eine fehlerhafte Antwort.'), true, 12);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Antwort in Ordnung
|
|
||||||
if ($json['code'] != false && strlen($json['code']) == 16)
|
|
||||||
{
|
|
||||||
setConfig('main:monitoringCpuTemp.code', $json['code']);
|
|
||||||
$tpl->msg('success', _t('E-Mail bestätigt'), _t('Deine E-Mail wurde erfolgreich bestätigt.'));
|
|
||||||
}
|
|
||||||
else
|
|
||||||
$tpl->msg('error', _t('Verarbeitungsfehler'), _t('Der Server konnte zugehörige Daten nicht finden. Versichere, dass du die E-Mail bestätigt hast.'), true, 12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
while (false);
|
|
||||||
|
|
||||||
curl_close($curl);
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not ie <= 8
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true,
|
|
||||||
},
|
|
||||||
extends: ["plugin:vue/essential", "@vue/prettier"],
|
|
||||||
rules: {
|
|
||||||
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
|
|
||||||
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
|
|
||||||
},
|
|
||||||
parserOptions: {
|
|
||||||
parser: "babel-eslint",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
12
frontend/.github/workflows/main.yml
vendored
@@ -1,12 +0,0 @@
|
|||||||
name: Autocloser
|
|
||||||
on: [issues]
|
|
||||||
jobs:
|
|
||||||
autoclose:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- name: Issue auto-closer
|
|
||||||
uses: roots/issue-closer-action@v1.1
|
|
||||||
with:
|
|
||||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-material-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉 https://www.creative-tim.com/bundles\n👉 https://www.creative-tim.com\n\n\n</pre>\n\n"
|
|
||||||
issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)
|
|
||||||
5
frontend/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules/
|
|
||||||
dist/
|
|
||||||
package-lock.json
|
|
||||||
/docs
|
|
||||||
/dist
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"esversion": 6
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
legacy-peer-deps=true
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
# Change Log
|
|
||||||
|
|
||||||
## [1.5.1] 2023-01-10
|
|
||||||
|
|
||||||
- Update dependencies and devDependencies.
|
|
||||||
- Fix issue when running `npm install`.
|
|
||||||
|
|
||||||
## [1.5.0] 2022-03-18
|
|
||||||
|
|
||||||
### Dependencies Updates
|
|
||||||
|
|
||||||
- Updated all out of date dependencies from `package.json` file
|
|
||||||
|
|
||||||
## [1.4.0] 2020-03-12
|
|
||||||
|
|
||||||
### Dependencies Updates
|
|
||||||
|
|
||||||
- Updated all out of date dependencies from `package.json` file
|
|
||||||
- Add `API_KEY` file
|
|
||||||
- Add new structure for google maps plugin
|
|
||||||
|
|
||||||
## [1.3.2] 2019-12-13
|
|
||||||
|
|
||||||
### Dependencies Updates
|
|
||||||
|
|
||||||
- Updated all out of date dependencies from `package.json` file
|
|
||||||
- The version is now `v1.3.2` to have the same versioning line with the PRO version of this product
|
|
||||||
|
|
||||||
## [1.2.1] 2019-06-14
|
|
||||||
|
|
||||||
### Dependencies Updates, Vue Material Update
|
|
||||||
|
|
||||||
- Updated all out of date dependencies from `package.json` file
|
|
||||||
- The framework `Vuematerial.io` was updated to the latest beta version `1.0.0-beta-11`
|
|
||||||
|
|
||||||
## [1.2.0] 2019-04-30
|
|
||||||
|
|
||||||
### Dependencies Updates
|
|
||||||
|
|
||||||
- Updated all out of date dependencies from `package.json` file
|
|
||||||
|
|
||||||
## [1.1.0] 2019-02-08
|
|
||||||
|
|
||||||
### Dependencies Updates, Improvements
|
|
||||||
|
|
||||||
- Updated all out of date dependencies from `package.json` file
|
|
||||||
- Removed all `to=""` and replaced with `href=""` props from non router-link components for avoid this error `[Vue warn]: Error in render: "TypeError: Cannot read property 'options' of undefined"`
|
|
||||||
- Changed links from footer
|
|
||||||
|
|
||||||
## [1.0.3] 2018-11-26
|
|
||||||
|
|
||||||
### Bug Fixing
|
|
||||||
|
|
||||||
- Fixed error `[Vue warn]: Error in render: "TypeError: Cannot read property 'options' of undefined"`
|
|
||||||
|
|
||||||
## [1.0.2] 2018-11-19
|
|
||||||
|
|
||||||
### Plugin Updates, BugFixing
|
|
||||||
|
|
||||||
- Updated all `dependencies` and `devDependencies` to the latest versions
|
|
||||||
- Cleaned `package.json` file
|
|
||||||
- Removed all lint warnings and errors
|
|
||||||
- Github issues fixed
|
|
||||||
- Other bug fixes
|
|
||||||
|
|
||||||
## [1.0.1] 2018-07-13
|
|
||||||
|
|
||||||
### BugFixing and Updates
|
|
||||||
|
|
||||||
- updated all the npm packages
|
|
||||||
- scroll issue on mobile devices fixed
|
|
||||||
- added button `Upgrade to PRO` in the sidebar
|
|
||||||
- another small bug fixes
|
|
||||||
|
|
||||||
## [1.0.0] 2018-05-03
|
|
||||||
|
|
||||||
- Initial Release
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!--
|
|
||||||
IMPORTANT: Please use the following link to create a new issue:
|
|
||||||
|
|
||||||
https://www.creative-tim.com/new-issue/vue-material-dashboard
|
|
||||||
|
|
||||||
**If your issue was not created using the app above, it will be closed immediately.**
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
|
|
||||||
👉 https://www.creative-tim.com/bundles
|
|
||||||
👉 https://www.creative-tim.com
|
|
||||||
-->
|
|
||||||
@@ -1,199 +0,0 @@
|
|||||||
# [Vue Material Dashboard](https://demos.creative-tim.com/vue-material-dashboard) [](https://twitter.com/home?status=Vue%20Material%20Dashboard,%20a%20free%20Material%20Admin%20Template%20%E2%9D%A4%EF%B8%8F%20https%3A//bit.ly/2Nh5aVy%20%20%23vue%20%23material%20%23design%20%23developers%20%23freebie%20%20via%20%40CreativeTim)
|
|
||||||
|
|
||||||
|
|
||||||
  [](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aissue+is%3Aclosed) [](https://gitter.im/creative-tim-general/Lobby) [](https://discord.gg/E4aHAQy)
|
|
||||||
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
Vue Material Dashboard is a beautiful resource built over [Vue Material](https://vuematerial.io/) and [Vuejs](https://vuejs.org/v2/guide/). It will help you get started developing dashboards in no time. Vue Material Dashboard is the official Vuejs version of the Original Material Dashboard. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, [Vuejs](https://vuejs.org/v2/guide/) and [Vue Router](https://router.vuejs.org/en/).
|
|
||||||
|
|
||||||
We have created it thinking about things you actually need in a dashboard. Vue Material Dashboard contains handpicked and optimised Vuejs plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product.
|
|
||||||
|
|
||||||
Let us know what you think and what we can improve below. And good luck with development!
|
|
||||||
|
|
||||||
|
|
||||||
## Table of Contents
|
|
||||||
|
|
||||||
* [Versions](#versions)
|
|
||||||
* [Demo](#demo)
|
|
||||||
* [Quick Start](#quick-start)
|
|
||||||
* [Documentation](#documentation)
|
|
||||||
* [File Structure](#file-structure)
|
|
||||||
* [Browser Support](#browser-support)
|
|
||||||
* [Resources](#resources)
|
|
||||||
* [Reporting Issues](#reporting-issues)
|
|
||||||
* [Technical Support or Questions](#technical-support-or-questions)
|
|
||||||
* [Licensing](#licensing)
|
|
||||||
* [Useful Links](#useful-links)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Versions
|
|
||||||
|
|
||||||
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/html.png" width="60" height="60" />](https://www.creative-tim.com/product/material-kit)[<img src="https://s3.amazonaws.com/creativetim_bucket/github/react.svg" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react)
|
|
||||||
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/vuejs.png" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-dashboard)
|
|
||||||
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/angular.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-angular2)
|
|
||||||
|
|
||||||
|
|
||||||
| HTML | React |
|
|
||||||
| --- | --- |
|
|
||||||
| [](https://www.creative-tim.com/product/material-dashboard) | [](https://www.creative-tim.com/product/material-dashboard-react)
|
|
||||||
|
|
||||||
| Vue | Angular |
|
|
||||||
| --- | --- |
|
|
||||||
| [](https://www.creative-tim.com/product/vue-material-dashboard) | [](https://www.creative-tim.com/product/material-dashboard-angular2)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Demo
|
|
||||||
|
|
||||||
| Dashboard | User Profile | Tables | Maps | Notification |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| [](https://demos.creative-tim.com/vue-material-dashboard) | [](https://demos.creative-tim.com/vue-material-dashboard/#/user) | [](https://demos.creative-tim.com/vue-material-dashboard/#/table) | [](https://demos.creative-tim.com/vue-material-dashboard/#/maps) | [](https://demos.creative-tim.com/vue-material-dashboard/#/notifications)
|
|
||||||
|
|
||||||
[View More](https://demos.creative-tim.com/vue-material-dashboard).
|
|
||||||
|
|
||||||
|
|
||||||
## Quick start
|
|
||||||
|
|
||||||
## :cloud: Build Setup
|
|
||||||
|
|
||||||
### install dependencies
|
|
||||||
`npm install`
|
|
||||||
### serve with hot reload at localhost:8080
|
|
||||||
`npm run dev`
|
|
||||||
### build for production with minification
|
|
||||||
`npm run build`
|
|
||||||
|
|
||||||
- [Download from Github](https://github.com/creativetimofficial/vue-material-dashboard/archive/master.zip).
|
|
||||||
- [Download from Creative Tim](https://www.creative-tim.com/product/vue-material-dashboard).
|
|
||||||
- Clone the repo: `git clone https://github.com/creativetimofficial/vue-material-dashboard.git`.
|
|
||||||
|
|
||||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
|
||||||
|
|
||||||
|
|
||||||
## Documentation
|
|
||||||
The documentation for the Vue Material Dashboard is hosted at our [website](https://demos.creative-tim.com/vue-material-dashboard/documentation).
|
|
||||||
|
|
||||||
|
|
||||||
## File Structure
|
|
||||||
Within the download you'll find the following directories and files:
|
|
||||||
|
|
||||||
```
|
|
||||||
vue-material-dashboard
|
|
||||||
├── README.md
|
|
||||||
├── babel.config.js
|
|
||||||
├── package.json
|
|
||||||
├── postcss.config.js
|
|
||||||
├── public
|
|
||||||
│ └── index.html
|
|
||||||
└── src
|
|
||||||
├── App.vue
|
|
||||||
├── assets
|
|
||||||
│ ├── img
|
|
||||||
│ └── scss
|
|
||||||
│ ├── material-dashboard.scss
|
|
||||||
│ └── md
|
|
||||||
├── components
|
|
||||||
│ ├── Cards
|
|
||||||
│ │ ├── ChartCard.vue
|
|
||||||
│ │ ├── NavTabsCard.vue
|
|
||||||
│ │ └── StatsCard.vue
|
|
||||||
│ ├── Dropdown.vue
|
|
||||||
│ ├── NotificationPlugin
|
|
||||||
│ │ ├── Notification.vue
|
|
||||||
│ │ ├── Notifications.vue
|
|
||||||
│ │ └── index.js
|
|
||||||
│ ├── SidebarPlugin
|
|
||||||
│ │ ├── SideBar.vue
|
|
||||||
│ │ ├── SidebarLink.vue
|
|
||||||
│ │ └── index.js
|
|
||||||
│ ├── Tables
|
|
||||||
│ │ ├── NavTabsTable.vue
|
|
||||||
│ │ ├── OrderedTable.vue
|
|
||||||
│ │ └── SimpleTable.vue
|
|
||||||
│ └── index.js
|
|
||||||
├── globalComponents.js
|
|
||||||
├── globalDirectives.js
|
|
||||||
├── main.js
|
|
||||||
├── material-dashboard.js
|
|
||||||
├── pages
|
|
||||||
│ ├── Dashboard.vue
|
|
||||||
│ ├── Icons.vue
|
|
||||||
│ ├── Layout
|
|
||||||
│ │ ├── Content.vue
|
|
||||||
│ │ ├── ContentFooter.vue
|
|
||||||
│ │ ├── DashboardLayout.vue
|
|
||||||
│ │ ├── MobileMenu.vue
|
|
||||||
│ │ └── TopNavbar.vue
|
|
||||||
│ ├── Maps.vue
|
|
||||||
│ ├── Notifications.vue
|
|
||||||
│ ├── TableList.vue
|
|
||||||
│ ├── Typography.vue
|
|
||||||
│ ├── UpgradeToPRO.vue
|
|
||||||
│ ├── UserProfile
|
|
||||||
│ │ ├── EditProfileForm.vue
|
|
||||||
│ │ └── UserCard.vue
|
|
||||||
│ ├── UserProfile.vue
|
|
||||||
│ └── index.js
|
|
||||||
└── routes
|
|
||||||
└── routes.js
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Browser Support
|
|
||||||
|
|
||||||
At present, we officially aim to support the last two versions of the following browsers:
|
|
||||||
|
|
||||||
<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">
|
|
||||||
|
|
||||||
|
|
||||||
## Resources
|
|
||||||
- Demo: <https://demos.creative-tim.com/vue-material-dashboard>
|
|
||||||
- Download Page: <https://www.creative-tim.com/product/vue-material-dashboard>
|
|
||||||
- Documentation: <https://demos.creative-tim.com/vue-material-dashboard/documentation>
|
|
||||||
- License Agreement: <https://www.creative-tim.com/license>
|
|
||||||
- Support: <https://www.creative-tim.com/contact-us>
|
|
||||||
- Issues: [Github Issues Page](https://github.com/creativetimofficial/vue-material-dashboard/issues)
|
|
||||||
## Reporting Issues
|
|
||||||
|
|
||||||
We use GitHub Issues as the official bug tracker for the Vue Material Dashboard. Here are some advices for our users that want to report an issue:
|
|
||||||
|
|
||||||
1. Make sure that you are using the latest version of the Vue Material Dashboard. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/).
|
|
||||||
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
|
|
||||||
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
|
|
||||||
|
|
||||||
|
|
||||||
## Technical Support or Questions
|
|
||||||
|
|
||||||
If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Licensing
|
|
||||||
|
|
||||||
- Copyright 2023 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
- Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Useful Links
|
|
||||||
|
|
||||||
- [More products](https://www.creative-tim.com/bootstrap-themes) from Creative Tim
|
|
||||||
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
|
|
||||||
- [Freebies](https://www.creative-tim.com/bootstrap-themes/free) from Creative Tim
|
|
||||||
- [Affiliate Program](https://www.creative-tim.com/affiliates/new) (earn money)
|
|
||||||
|
|
||||||
##### Social Media
|
|
||||||
|
|
||||||
Twitter: <https://twitter.com/CreativeTim>
|
|
||||||
|
|
||||||
Facebook: <https://www.facebook.com/CreativeTim>
|
|
||||||
|
|
||||||
Dribbble: <https://dribbble.com/creativetim>
|
|
||||||
|
|
||||||
Google+: <https://plus.google.com/+CreativetimPage>
|
|
||||||
|
|
||||||
Instagram: <https://www.instagram.com/CreativeTimOfficial>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: ["@vue/app"],
|
|
||||||
};
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "vue-material-dashboard",
|
|
||||||
"version": "1.5.1",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"serve": "vue-cli-service serve --open",
|
|
||||||
"dev": "npm run serve",
|
|
||||||
"build": "vue-cli-service build",
|
|
||||||
"lint": "vue-cli-service lint"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"chartist": "0.11.4",
|
|
||||||
"core-js": "3.26.1",
|
|
||||||
"google-maps": "4.3.3",
|
|
||||||
"vue": "2.7.14",
|
|
||||||
"vue-clickaway": "2.2.2",
|
|
||||||
"vue-github-buttons": "3.1.0",
|
|
||||||
"vue-material": "1.0.0-beta-15",
|
|
||||||
"vue-router": "3.5.2",
|
|
||||||
"vue-social-sharing": "3.0.9"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vue/cli-plugin-babel": "4.5.19",
|
|
||||||
"@vue/cli-plugin-eslint": "4.5.19",
|
|
||||||
"@vue/cli-plugin-router": "4.5.19",
|
|
||||||
"@vue/cli-service": "4.5.19",
|
|
||||||
"@vue/eslint-config-prettier": "7.0.0",
|
|
||||||
"babel-eslint": "10.1.0",
|
|
||||||
"es6-promise": "4.2.8",
|
|
||||||
"eslint": "7.32.0",
|
|
||||||
"eslint-plugin-prettier": "4.2.1",
|
|
||||||
"eslint-plugin-vue": "7.20.0",
|
|
||||||
"prettier": "2.8.1",
|
|
||||||
"sass": "1.56.2",
|
|
||||||
"sass-loader": "10.2.0",
|
|
||||||
"vue-template-compiler": "2.7.14"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -1,54 +0,0 @@
|
|||||||
<!--
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Vue Material Dashboard - v1.5.1
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/vue-material-dashboard
|
|
||||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
|
||||||
* Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
|
|
||||||
|
|
||||||
* Coded by Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="96x96"
|
|
||||||
href="<%= webpackConfig.output.publicPath %>favicon.png"
|
|
||||||
/>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
||||||
<title>Vue Material Dashboard by Creative Tim</title>
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Fonts and icons -->
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="//fonts.googleapis.com/icon?family=Material+Icons"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<router-view></router-view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {};
|
|
||||||
</script>
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 756 B |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 335 KiB |
|
Before Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 498 KiB |
|
Before Width: | Height: | Size: 414 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
@@ -1,49 +0,0 @@
|
|||||||
// =========================================================
|
|
||||||
// * Vue Material Dashboard - v1.5.1
|
|
||||||
// =========================================================
|
|
||||||
//
|
|
||||||
// * Product Page: https://www.creative-tim.com/product/vue-material-dashboard
|
|
||||||
// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
|
||||||
// * Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
|
|
||||||
//
|
|
||||||
// * Coded by Creative Tim
|
|
||||||
//
|
|
||||||
// =========================================================
|
|
||||||
//
|
|
||||||
// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
//variables and mixins
|
|
||||||
@import "md/variables";
|
|
||||||
@import "md/mixins";
|
|
||||||
@import "md/shadows";
|
|
||||||
|
|
||||||
//plugin css
|
|
||||||
@import "md/plugins/_perfect-scrollbar";
|
|
||||||
|
|
||||||
// Core CSS
|
|
||||||
@import "md/typography";
|
|
||||||
@import "md/sidebar-and-main-panel";
|
|
||||||
@import "md/buttons";
|
|
||||||
@import "md/misc";
|
|
||||||
@import "md/inputs";
|
|
||||||
@import "md/fixed-plugin";
|
|
||||||
@import "md/forms";
|
|
||||||
@import "md/alerts";
|
|
||||||
@import "md/tables";
|
|
||||||
@import "md/layout";
|
|
||||||
@import "md/checkboxes";
|
|
||||||
@import "md/togglebutton";
|
|
||||||
@import "md/ripples";
|
|
||||||
@import "md/pagination";
|
|
||||||
@import "md/pills";
|
|
||||||
@import "md/dialogs";
|
|
||||||
@import "md/navbars";
|
|
||||||
@import "md/popups";
|
|
||||||
@import "md/footers";
|
|
||||||
|
|
||||||
// Fancy Stuff
|
|
||||||
@import "md/dropdown";
|
|
||||||
@import "md/cards";
|
|
||||||
@import "md/tabs";
|
|
||||||
@import "md/chartist";
|
|
||||||
@import "md/responsive";
|
|
||||||
@@ -1,95 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
position: relative;
|
|
||||||
padding: 20px 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.notifications &{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
b{
|
|
||||||
font-weight: $font-weight-bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: $font-size-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include alert-color($gray-color);
|
|
||||||
|
|
||||||
&.alert-info{
|
|
||||||
@include alert-color(lighten($brand-info,5%));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alert-danger{
|
|
||||||
@include alert-color(lighten($brand-danger,5%));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alert-primary{
|
|
||||||
@include alert-color(lighten($brand-primary,5%));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alert-warning{
|
|
||||||
@include alert-color(lighten($brand-warning,5%));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alert-success{
|
|
||||||
@include alert-color(lighten($brand-success,5%));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&-info, &-danger, &-warning, &-success {
|
|
||||||
color: $mdb-text-color-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-default {
|
|
||||||
a, .alert-link {
|
|
||||||
color: $mdb-text-color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close{
|
|
||||||
float: right;
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
color: $white-color;
|
|
||||||
opacity: .9;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
i[data-notify="icon"] {
|
|
||||||
font-size: 30px;
|
|
||||||
display: block;
|
|
||||||
left: 15px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span{
|
|
||||||
display: block;
|
|
||||||
max-width: 89%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-icon{
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin-right: $margin-base;
|
|
||||||
|
|
||||||
i{
|
|
||||||
margin-top: -7px;
|
|
||||||
top: 5px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert.alert-with-icon {
|
|
||||||
padding-left: 65px;
|
|
||||||
}
|
|
||||||
@@ -1,234 +0,0 @@
|
|||||||
.md-button{
|
|
||||||
border: none;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
position: relative;
|
|
||||||
margin: 10px 1px;
|
|
||||||
height: auto;
|
|
||||||
line-height: 1.42857;
|
|
||||||
|
|
||||||
font-size: $mdb-btn-font-size-base;
|
|
||||||
font-weight: 400;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0;
|
|
||||||
|
|
||||||
will-change: box-shadow, transform;
|
|
||||||
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
|
|
||||||
background-color 0.2s $mdb-animation-curve-default;
|
|
||||||
|
|
||||||
&:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple{
|
|
||||||
padding: 12px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.md-just-icon) .md-button-content i{
|
|
||||||
font-size: 1.1rem !important;
|
|
||||||
height: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-wd{
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-block{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-block{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include social-buttons();
|
|
||||||
|
|
||||||
&,
|
|
||||||
&.md-default{
|
|
||||||
@include btn-styles($gray-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-primary{
|
|
||||||
@include btn-styles($brand-primary);
|
|
||||||
}
|
|
||||||
&.md-info{
|
|
||||||
@include btn-styles($brand-info);
|
|
||||||
}
|
|
||||||
&.md-success{
|
|
||||||
@include btn-styles($brand-success);
|
|
||||||
}
|
|
||||||
&.md-warning{
|
|
||||||
@include btn-styles($brand-warning);
|
|
||||||
}
|
|
||||||
&.md-danger{
|
|
||||||
@include btn-styles($brand-danger);
|
|
||||||
}
|
|
||||||
&.md-white{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $white-color;
|
|
||||||
color: $gray-light;
|
|
||||||
}
|
|
||||||
&.btn-simple{
|
|
||||||
color: #FFFFFF;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&:active:focus{
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-round{
|
|
||||||
border-radius: $border-radius-extreme;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.btn-just-icon):not(.btn-fab){
|
|
||||||
.fa{
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: -2px;
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&.btn-fab {
|
|
||||||
// see above for color variations
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: $mdb-btn-fab-font-size;
|
|
||||||
height: $mdb-btn-fab-size;
|
|
||||||
margin: auto;
|
|
||||||
min-width: $mdb-btn-fab-size;
|
|
||||||
width: $mdb-btn-fab-size;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
.ripple-container {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-fab-mini,
|
|
||||||
.btn-group-sm & {
|
|
||||||
height: $mdb-btn-fab-size-mini;
|
|
||||||
min-width: $mdb-btn-fab-size-mini;
|
|
||||||
width: $mdb-btn-fab-size-mini;
|
|
||||||
|
|
||||||
&.material-icons {
|
|
||||||
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) * 0.5;
|
|
||||||
left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) * 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-icons{
|
|
||||||
font-size: $mdb-btn-icon-size-mini;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i.material-icons {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-($mdb-btn-fab-font-size * 0.5), -($mdb-btn-fab-font-size * 0.5));
|
|
||||||
line-height: $mdb-btn-fab-font-size;
|
|
||||||
width: $mdb-btn-fab-font-size;
|
|
||||||
font-size: $mdb-btn-fab-font-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Size variations
|
|
||||||
&.md-lg .md-ripple{
|
|
||||||
font-size: $mdb-btn-font-size-lg;
|
|
||||||
padding: 18px 36px !important;
|
|
||||||
}
|
|
||||||
&.md-sm .md-ripple{
|
|
||||||
padding: 0.40625rem 1.25rem !important;
|
|
||||||
font-size: $mdb-btn-font-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-just-icon{
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 12px 12px;
|
|
||||||
line-height: 1em;
|
|
||||||
|
|
||||||
i{
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
&.btn-lg{
|
|
||||||
font-size: 22px;
|
|
||||||
padding: 13px 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-fab,
|
|
||||||
&.md-just-icon{
|
|
||||||
font-size: 24px;
|
|
||||||
height: 41px;
|
|
||||||
min-width: 41px;
|
|
||||||
width: 41px;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
line-height: 41px;
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.fab{
|
|
||||||
font-size: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-button-content{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
i{
|
|
||||||
font-size: 20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn{
|
|
||||||
// Align icons inside buttons with text
|
|
||||||
.material-icons{
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: $mdb-btn-icon-size-mini;
|
|
||||||
top: -1px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .navbar-nav > li > {
|
|
||||||
a.btn{
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
|
|
||||||
&.btn-fab{
|
|
||||||
margin: 5px 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a:not(.btn){
|
|
||||||
.material-icons{
|
|
||||||
margin-top: -3px;
|
|
||||||
top: 0px;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.profile-photo{
|
|
||||||
margin: 5px 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-default:not(.navbar-transparent) .navbar-nav > li > {
|
|
||||||
a.btn{
|
|
||||||
&.btn-white.btn-simple{
|
|
||||||
color: $gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,362 +0,0 @@
|
|||||||
.md-card{
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
margin: 25px 0;
|
|
||||||
overflow: unset;
|
|
||||||
|
|
||||||
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
color: $mdb-card-body-text;
|
|
||||||
background: $mdb-card-body-background;
|
|
||||||
|
|
||||||
.card-height-indicator {
|
|
||||||
margin-top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.row-space{
|
|
||||||
.header{
|
|
||||||
padding: 15px 20px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title{
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.card-image {
|
|
||||||
height: 60%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
margin-left: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
margin-top: -30px;
|
|
||||||
border-radius: $border-radius-large;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: $border-radius-large;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.card-title {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 15px;
|
|
||||||
left: 15px;
|
|
||||||
color: $mdb-card-image-headline;
|
|
||||||
font-size: $font-size-h4;
|
|
||||||
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category:not([class*="text-"]){
|
|
||||||
color: $gray-color;
|
|
||||||
}
|
|
||||||
.md-card-content{
|
|
||||||
padding: 15px 20px;
|
|
||||||
|
|
||||||
.category{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-header{
|
|
||||||
@include shadow-big();
|
|
||||||
margin: -20px $margin-base 0;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
padding: $padding-base;
|
|
||||||
background-color: $gray-color;
|
|
||||||
|
|
||||||
.title{
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
.category{
|
|
||||||
margin: 0;
|
|
||||||
color: rgba($white-color, .62);
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.card-chart{
|
|
||||||
padding: 0;
|
|
||||||
min-height: 160px;
|
|
||||||
|
|
||||||
+ .content{
|
|
||||||
h4{
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ct-label{
|
|
||||||
color: rgba($white-color, .7);
|
|
||||||
}
|
|
||||||
.ct-grid{
|
|
||||||
stroke: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
.ct-series-a .ct-point,
|
|
||||||
.ct-series-a .ct-line,
|
|
||||||
.ct-series-a .ct-bar,
|
|
||||||
.ct-series-a .ct-slice-donut{
|
|
||||||
stroke: rgba(255,255,255,.8);
|
|
||||||
}
|
|
||||||
.ct-series-a .ct-slice-pie,
|
|
||||||
.ct-series-a .ct-area{
|
|
||||||
fill: rgba(255,255,255,.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-title{
|
|
||||||
position: absolute;;
|
|
||||||
top: 25px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h3{
|
|
||||||
margin: 0;
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6{
|
|
||||||
margin: 0;
|
|
||||||
color: rgba(255,255,255, .4);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-actions{
|
|
||||||
margin: 0 20px 10px;
|
|
||||||
padding: 10px 0 0 0;
|
|
||||||
border-top: 1px solid #eeeeee;
|
|
||||||
|
|
||||||
.content{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
div{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.author{
|
|
||||||
color: $gray-color;
|
|
||||||
}
|
|
||||||
.stats{
|
|
||||||
line-height: 22px;
|
|
||||||
color: $gray-color;
|
|
||||||
font-size: $font-size-small;
|
|
||||||
|
|
||||||
.md-icon.md-theme-default.md-icon-font{
|
|
||||||
position: relative;
|
|
||||||
top: -1px;
|
|
||||||
font-size: $font-paragraph + 2 !important;
|
|
||||||
color: $gray-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h6{
|
|
||||||
color: $gray-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category{
|
|
||||||
.md-icon{
|
|
||||||
position: relative;
|
|
||||||
top: 6px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-social{
|
|
||||||
.fa{
|
|
||||||
font-size: 24px;
|
|
||||||
position: relative;
|
|
||||||
margin-top: -4px;
|
|
||||||
top: 2px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.author{
|
|
||||||
.avatar{
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: $black-color;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
.ripple-container{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table{
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
tr:first-child td{
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-background-color="purple"],
|
|
||||||
.md-tabs.md-primary .md-tabs-navigation{
|
|
||||||
background: linear-gradient(60deg, $purple-400, $purple-600);
|
|
||||||
@include shadow-big-color($brand-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-background-color="blue"],
|
|
||||||
.md-tabs.md-info .md-tabs-navigation{
|
|
||||||
background: linear-gradient(60deg, $cyan-400, $cyan-600);
|
|
||||||
@include shadow-big-color($brand-info);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-background-color="green"],
|
|
||||||
.md-tabs.md-success .md-tabs-navigation{
|
|
||||||
background: linear-gradient(60deg, $green-400, $green-600);
|
|
||||||
@include shadow-big-color($brand-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-background-color="orange"],
|
|
||||||
.md-tabs.md-warning .md-tabs-navigation{
|
|
||||||
background: linear-gradient(60deg, $orange-400, $orange-600);
|
|
||||||
@include shadow-big-color($brand-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-background-color="red"],
|
|
||||||
.md-tabs.md-danger .md-tabs-navigation{
|
|
||||||
background: linear-gradient(60deg, $red-400, $red-600);
|
|
||||||
@include shadow-big-color($brand-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-background-color]{
|
|
||||||
color: $white-color;
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-stats{
|
|
||||||
.title{
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
small{
|
|
||||||
color: $gray-color;
|
|
||||||
font-size: 65%;
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.md-card-header{
|
|
||||||
float: left;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
i{
|
|
||||||
font-size: 36px !important;
|
|
||||||
line-height: 56px;
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.md-card-content{
|
|
||||||
text-align: right;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-nav-tabs{
|
|
||||||
.header-raised{
|
|
||||||
margin-top: -$margin-base * 2;
|
|
||||||
}
|
|
||||||
.nav-tabs{
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.nav-tabs-title{
|
|
||||||
float: left;
|
|
||||||
padding: 10px 10px 10px 0;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-plain{
|
|
||||||
background: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
|
|
||||||
.md-card-header{
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.content{
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-image{
|
|
||||||
margin: 0;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
|
|
||||||
img{
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.iframe-container{
|
|
||||||
margin: 0 -20px 0;
|
|
||||||
|
|
||||||
iframe{
|
|
||||||
width: 100%;
|
|
||||||
height: 500px;
|
|
||||||
border: 0;
|
|
||||||
@include shadow-big();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-profile,
|
|
||||||
.card-testimonial{
|
|
||||||
margin-top: 30px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.btn-just-icon.btn-raised{
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-avatar{
|
|
||||||
max-width: 130px;
|
|
||||||
max-height: 130px;
|
|
||||||
margin: -50px auto 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include shadow-big();
|
|
||||||
|
|
||||||
& + .md-card-content{
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-card-plain{
|
|
||||||
.card-avatar{
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,254 +0,0 @@
|
|||||||
@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: $width;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
content: "";
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
padding-bottom: $ratio * 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
|
|
||||||
-webkit-box-align: $ct-text-align;
|
|
||||||
-webkit-align-items: $ct-text-align;
|
|
||||||
-ms-flex-align: $ct-text-align;
|
|
||||||
align-items: $ct-text-align;
|
|
||||||
-webkit-box-pack: $ct-text-justify;
|
|
||||||
-webkit-justify-content: $ct-text-justify;
|
|
||||||
-ms-flex-pack: $ct-text-justify;
|
|
||||||
justify-content: $ct-text-justify;
|
|
||||||
// Fallback to text-align for non-flex browsers
|
|
||||||
@if($ct-text-justify == 'flex-start') {
|
|
||||||
text-align: left;
|
|
||||||
} @else if ($ct-text-justify == 'flex-end') {
|
|
||||||
text-align: right;
|
|
||||||
} @else {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-flex() {
|
|
||||||
// Fallback to block
|
|
||||||
display: block;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
|
|
||||||
fill: $ct-text-color;
|
|
||||||
color: $ct-text-color;
|
|
||||||
font-size: $ct-text-size;
|
|
||||||
line-height: $ct-text-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
|
|
||||||
stroke: $ct-grid-color;
|
|
||||||
stroke-width: $ct-grid-width;
|
|
||||||
|
|
||||||
@if ($ct-grid-dasharray) {
|
|
||||||
stroke-dasharray: $ct-grid-dasharray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
|
|
||||||
stroke-width: $ct-point-size;
|
|
||||||
stroke-linecap: $ct-point-shape;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: $ct-line-width;
|
|
||||||
|
|
||||||
@if ($ct-line-dasharray) {
|
|
||||||
stroke-dasharray: $ct-line-dasharray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
|
|
||||||
stroke: none;
|
|
||||||
fill-opacity: $ct-area-opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: $ct-bar-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: $ct-donut-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-series-color($color) {
|
|
||||||
.#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
|
|
||||||
stroke: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-slice-pie}, .#{$ct-class-area} {
|
|
||||||
fill: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
|
|
||||||
|
|
||||||
.#{$ct-class-label} {
|
|
||||||
@include ct-chart-label($ct-text-color, $ct-text-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-line} .#{$ct-class-label},
|
|
||||||
.#{$ct-class-chart-bar} .#{$ct-class-label} {
|
|
||||||
@include ct-flex();
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-start, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, flex-end);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-end, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, center);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-start, center);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-start, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
|
||||||
//@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
|
|
||||||
@include ct-align-justify(center, flex-end);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(center, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-grid} {
|
|
||||||
@include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-point} {
|
|
||||||
@include ct-chart-point($ct-point-size, $ct-point-shape);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-line} {
|
|
||||||
@include ct-chart-line($ct-line-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-area} {
|
|
||||||
@include ct-chart-area();
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-bar} {
|
|
||||||
@include ct-chart-bar($ct-bar-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-slice-donut} {
|
|
||||||
@include ct-chart-donut($ct-donut-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $ct-include-colored-series {
|
|
||||||
@for $i from 0 to length($ct-series-names) {
|
|
||||||
.#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
|
|
||||||
$color: nth($ct-series-colors, $i + 1);
|
|
||||||
|
|
||||||
@include ct-chart-series-color($color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $ct-include-classes {
|
|
||||||
@include ct-chart();
|
|
||||||
|
|
||||||
@if $ct-include-alternative-responsive-containers {
|
|
||||||
@for $i from 0 to length($ct-scales-names) {
|
|
||||||
.#{nth($ct-scales-names, $i + 1)} {
|
|
||||||
@include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ct-blue{
|
|
||||||
stroke: $brand-primary !important;
|
|
||||||
}
|
|
||||||
.ct-azure{
|
|
||||||
stroke: $brand-info !important;
|
|
||||||
}
|
|
||||||
.ct-green{
|
|
||||||
stroke: $brand-success !important;
|
|
||||||
}
|
|
||||||
.ct-orange{
|
|
||||||
stroke: $brand-warning !important;
|
|
||||||
}
|
|
||||||
.ct-red{
|
|
||||||
stroke: $brand-danger !important;
|
|
||||||
}
|
|
||||||
.ct-white{
|
|
||||||
stroke: $white-color !important;
|
|
||||||
}
|
|
||||||
.ct-rose{
|
|
||||||
stroke: $brand-rose !important;
|
|
||||||
}
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
.md-checkbox{
|
|
||||||
.md-checkbox-container{
|
|
||||||
border: 1px solid rgba(0, 0, 0, .54);
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
.md-ripple{
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-checked .md-checkbox-container{
|
|
||||||
&:after{
|
|
||||||
border-color: $brand-primary !important;
|
|
||||||
top: 1px;
|
|
||||||
left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-checkbox-label{
|
|
||||||
font-weight: 400;
|
|
||||||
color: #aaa;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-theme-default.md-checked .md-checkbox-container{
|
|
||||||
background-color: transparent !important;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-theme-default.md-checked .md-ripple{
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-disabled .md-checkbox-label,
|
|
||||||
&.md-disabled .md-checkbox-container{
|
|
||||||
opacity: .26;
|
|
||||||
border-color: rgba(0, 0, 0, .54) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-checked.md-disabled .md-checkbox-container{
|
|
||||||
background-color: transparent !important;
|
|
||||||
border-color: rgba(0, 0, 0, .54) !important;
|
|
||||||
opacity: .26;
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
border-color: rgba(0, 0, 0, .54) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,339 +0,0 @@
|
|||||||
@import "~vue-material/dist/theme/engine"; // Import the theme engine
|
|
||||||
|
|
||||||
@include md-register-theme("selection-black", (
|
|
||||||
accent: md-get-palette-color(black, 500)
|
|
||||||
));
|
|
||||||
|
|
||||||
@include md-register-theme("default", (
|
|
||||||
primary: md-get-palette-color(purple, 500), // The primary color of your application
|
|
||||||
));
|
|
||||||
|
|
||||||
|
|
||||||
@import "~vue-material/dist/theme/all"; // Apply the theme
|
|
||||||
|
|
||||||
|
|
||||||
$red-50: #ffebee !default;
|
|
||||||
$red-100: #ffcdd2 !default;
|
|
||||||
$red-200: #ef9a9a !default;
|
|
||||||
$red-300: #e57373 !default;
|
|
||||||
$red-400: #ef5350 !default;
|
|
||||||
$red-500: #f44336 !default;
|
|
||||||
$red-600: #e53935 !default;
|
|
||||||
$red-700: #d32f2f !default;
|
|
||||||
$red-800: #c62828 !default;
|
|
||||||
$red-900: #b71c1c !default;
|
|
||||||
$red-A100: #ff8a80 !default;
|
|
||||||
$red-A200: #ff5252 !default;
|
|
||||||
$red-A400: #ff1744 !default;
|
|
||||||
$red-A700: #d50000 !default;
|
|
||||||
$red: $red-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$pink-50: #fce4ec !default;
|
|
||||||
$pink-100: #f8bbd0 !default;
|
|
||||||
$pink-200: #f48fb1 !default;
|
|
||||||
$pink-300: #f06292 !default;
|
|
||||||
$pink-400: #ec407a !default;
|
|
||||||
$pink-500: #e91e63 !default;
|
|
||||||
$pink-600: #d81b60 !default;
|
|
||||||
$pink-700: #c2185b !default;
|
|
||||||
$pink-800: #ad1457 !default;
|
|
||||||
$pink-900: #880e4f !default;
|
|
||||||
$pink-A100: #ff80ab !default;
|
|
||||||
$pink-A200: #ff4081 !default;
|
|
||||||
$pink-A400: #f50057 !default;
|
|
||||||
$pink-A700: #c51162 !default;
|
|
||||||
$pink: $pink-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$purple-50: #f3e5f5 !default;
|
|
||||||
$purple-100: #e1bee7 !default;
|
|
||||||
$purple-200: #ce93d8 !default;
|
|
||||||
$purple-300: #ba68c8 !default;
|
|
||||||
$purple-400: #ab47bc !default;
|
|
||||||
$purple-500: #9c27b0 !default;
|
|
||||||
$purple-600: #8e24aa !default;
|
|
||||||
$purple-700: #7b1fa2 !default;
|
|
||||||
$purple-800: #6a1b9a !default;
|
|
||||||
$purple-900: #4a148c !default;
|
|
||||||
$purple-A100: #ea80fc !default;
|
|
||||||
$purple-A200: #e040fb !default;
|
|
||||||
$purple-A400: #d500f9 !default;
|
|
||||||
$purple-A700: #aa00ff !default;
|
|
||||||
$purple: $purple-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$deep-purple-50: #ede7f6 !default;
|
|
||||||
$deep-purple-100: #d1c4e9 !default;
|
|
||||||
$deep-purple-200: #b39ddb !default;
|
|
||||||
$deep-purple-300: #9575cd !default;
|
|
||||||
$deep-purple-400: #7e57c2 !default;
|
|
||||||
$deep-purple-500: #673ab7 !default;
|
|
||||||
$deep-purple-600: #5e35b1 !default;
|
|
||||||
$deep-purple-700: #512da8 !default;
|
|
||||||
$deep-purple-800: #4527a0 !default;
|
|
||||||
$deep-purple-900: #311b92 !default;
|
|
||||||
$deep-purple-A100: #b388ff !default;
|
|
||||||
$deep-purple-A200: #7c4dff !default;
|
|
||||||
$deep-purple-A400: #651fff !default;
|
|
||||||
$deep-purple-A700: #6200ea !default;
|
|
||||||
$deep-purple: $deep-purple-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$indigo-50: #e8eaf6 !default;
|
|
||||||
$indigo-100: #c5cae9 !default;
|
|
||||||
$indigo-200: #9fa8da !default;
|
|
||||||
$indigo-300: #7986cb !default;
|
|
||||||
$indigo-400: #5c6bc0 !default;
|
|
||||||
$indigo-500: #3f51b5 !default;
|
|
||||||
$indigo-600: #3949ab !default;
|
|
||||||
$indigo-700: #303f9f !default;
|
|
||||||
$indigo-800: #283593 !default;
|
|
||||||
$indigo-900: #1a237e !default;
|
|
||||||
$indigo-A100: #8c9eff !default;
|
|
||||||
$indigo-A200: #536dfe !default;
|
|
||||||
$indigo-A400: #3d5afe !default;
|
|
||||||
$indigo-A700: #304ffe !default;
|
|
||||||
$indigo: $indigo-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$blue-50: #e3f2fd !default;
|
|
||||||
$blue-100: #bbdefb !default;
|
|
||||||
$blue-200: #90caf9 !default;
|
|
||||||
$blue-300: #64b5f6 !default;
|
|
||||||
$blue-400: #42a5f5 !default;
|
|
||||||
$blue-500: #2196f3 !default;
|
|
||||||
$blue-600: #1e88e5 !default;
|
|
||||||
$blue-700: #1976d2 !default;
|
|
||||||
$blue-800: #1565c0 !default;
|
|
||||||
$blue-900: #0d47a1 !default;
|
|
||||||
$blue-A100: #82b1ff !default;
|
|
||||||
$blue-A200: #448aff !default;
|
|
||||||
$blue-A400: #2979ff !default;
|
|
||||||
$blue-A700: #2962ff !default;
|
|
||||||
$blue: $blue-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$light-blue-50: #e1f5fe !default;
|
|
||||||
$light-blue-100: #b3e5fc !default;
|
|
||||||
$light-blue-200: #81d4fa !default;
|
|
||||||
$light-blue-300: #4fc3f7 !default;
|
|
||||||
$light-blue-400: #29b6f6 !default;
|
|
||||||
$light-blue-500: #03a9f4 !default;
|
|
||||||
$light-blue-600: #039be5 !default;
|
|
||||||
$light-blue-700: #0288d1 !default;
|
|
||||||
$light-blue-800: #0277bd !default;
|
|
||||||
$light-blue-900: #01579b !default;
|
|
||||||
$light-blue-A100: #80d8ff !default;
|
|
||||||
$light-blue-A200: #40c4ff !default;
|
|
||||||
$light-blue-A400: #00b0ff !default;
|
|
||||||
$light-blue-A700: #0091ea !default;
|
|
||||||
$light-blue: $light-blue-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$cyan-50: #e0f7fa !default;
|
|
||||||
$cyan-100: #b2ebf2 !default;
|
|
||||||
$cyan-200: #80deea !default;
|
|
||||||
$cyan-300: #4dd0e1 !default;
|
|
||||||
$cyan-400: #26c6da !default;
|
|
||||||
$cyan-500: #00bcd4 !default;
|
|
||||||
$cyan-600: #00acc1 !default;
|
|
||||||
$cyan-700: #0097a7 !default;
|
|
||||||
$cyan-800: #00838f !default;
|
|
||||||
$cyan-900: #006064 !default;
|
|
||||||
$cyan-A100: #84ffff !default;
|
|
||||||
$cyan-A200: #18ffff !default;
|
|
||||||
$cyan-A400: #00e5ff !default;
|
|
||||||
$cyan-A700: #00b8d4 !default;
|
|
||||||
$cyan: $cyan-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$teal-50: #e0f2f1 !default;
|
|
||||||
$teal-100: #b2dfdb !default;
|
|
||||||
$teal-200: #80cbc4 !default;
|
|
||||||
$teal-300: #4db6ac !default;
|
|
||||||
$teal-400: #26a69a !default;
|
|
||||||
$teal-500: #009688 !default;
|
|
||||||
$teal-600: #00897b !default;
|
|
||||||
$teal-700: #00796b !default;
|
|
||||||
$teal-800: #00695c !default;
|
|
||||||
$teal-900: #004d40 !default;
|
|
||||||
$teal-A100: #a7ffeb !default;
|
|
||||||
$teal-A200: #64ffda !default;
|
|
||||||
$teal-A400: #1de9b6 !default;
|
|
||||||
$teal-A700: #00bfa5 !default;
|
|
||||||
$teal: $teal-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$green-50: #e8f5e9 !default;
|
|
||||||
$green-100: #c8e6c9 !default;
|
|
||||||
$green-200: #a5d6a7 !default;
|
|
||||||
$green-300: #81c784 !default;
|
|
||||||
$green-400: #66bb6a !default;
|
|
||||||
$green-500: #4caf50 !default;
|
|
||||||
$green-600: #43a047 !default;
|
|
||||||
$green-700: #388e3c !default;
|
|
||||||
$green-800: #2e7d32 !default;
|
|
||||||
$green-900: #1b5e20 !default;
|
|
||||||
$green-A100: #b9f6ca !default;
|
|
||||||
$green-A200: #69f0ae !default;
|
|
||||||
$green-A400: #00e676 !default;
|
|
||||||
$green-A700: #00c853 !default;
|
|
||||||
$green: $green-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$light-green-50: #f1f8e9 !default;
|
|
||||||
$light-green-100: #dcedc8 !default;
|
|
||||||
$light-green-200: #c5e1a5 !default;
|
|
||||||
$light-green-300: #aed581 !default;
|
|
||||||
$light-green-400: #9ccc65 !default;
|
|
||||||
$light-green-500: #8bc34a !default;
|
|
||||||
$light-green-600: #7cb342 !default;
|
|
||||||
$light-green-700: #689f38 !default;
|
|
||||||
$light-green-800: #558b2f !default;
|
|
||||||
$light-green-900: #33691e !default;
|
|
||||||
$light-green-A100: #ccff90 !default;
|
|
||||||
$light-green-A200: #b2ff59 !default;
|
|
||||||
$light-green-A400: #76ff03 !default;
|
|
||||||
$light-green-A700: #64dd17 !default;
|
|
||||||
$light-green: $light-green-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$lime-50: #f9fbe7 !default;
|
|
||||||
$lime-100: #f0f4c3 !default;
|
|
||||||
$lime-200: #e6ee9c !default;
|
|
||||||
$lime-300: #dce775 !default;
|
|
||||||
$lime-400: #d4e157 !default;
|
|
||||||
$lime-500: #cddc39 !default;
|
|
||||||
$lime-600: #c0ca33 !default;
|
|
||||||
$lime-700: #afb42b !default;
|
|
||||||
$lime-800: #9e9d24 !default;
|
|
||||||
$lime-900: #827717 !default;
|
|
||||||
$lime-A100: #f4ff81 !default;
|
|
||||||
$lime-A200: #eeff41 !default;
|
|
||||||
$lime-A400: #c6ff00 !default;
|
|
||||||
$lime-A700: #aeea00 !default;
|
|
||||||
$lime: $lime-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$yellow-50: #fffde7 !default;
|
|
||||||
$yellow-100: #fff9c4 !default;
|
|
||||||
$yellow-200: #fff59d !default;
|
|
||||||
$yellow-300: #fff176 !default;
|
|
||||||
$yellow-400: #ffee58 !default;
|
|
||||||
$yellow-500: #fec60a !default;
|
|
||||||
$yellow-600: #fdd835 !default;
|
|
||||||
$yellow-700: #fbc02d !default;
|
|
||||||
$yellow-800: #f9a825 !default;
|
|
||||||
$yellow-900: #f57f17 !default;
|
|
||||||
$yellow-A100: #ffff8d !default;
|
|
||||||
$yellow-A200: #ffff00 !default;
|
|
||||||
$yellow-A400: #ffea00 !default;
|
|
||||||
$yellow-A700: #ffd600 !default;
|
|
||||||
$yellow: $yellow-700 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$amber-50: #fff8e1 !default;
|
|
||||||
$amber-100: #ffecb3 !default;
|
|
||||||
$amber-200: #ffe082 !default;
|
|
||||||
$amber-300: #ffd54f !default;
|
|
||||||
$amber-400: #ffca28 !default;
|
|
||||||
$amber-500: #ffc107 !default;
|
|
||||||
$amber-600: #ffb300 !default;
|
|
||||||
$amber-700: #ffa000 !default;
|
|
||||||
$amber-800: #ff8f00 !default;
|
|
||||||
$amber-900: #ff6f00 !default;
|
|
||||||
$amber-A100: #ffe57f !default;
|
|
||||||
$amber-A200: #ffd740 !default;
|
|
||||||
$amber-A400: #ffc400 !default;
|
|
||||||
$amber-A700: #ffab00 !default;
|
|
||||||
$amber: $amber-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$orange-50: #fff3e0 !default;
|
|
||||||
$orange-100: #ffe0b2 !default;
|
|
||||||
$orange-200: #ffcc80 !default;
|
|
||||||
$orange-300: #ffb74d !default;
|
|
||||||
$orange-400: #ffa726 !default;
|
|
||||||
$orange-500: #ff9800 !default;
|
|
||||||
$orange-600: #fb8c00 !default;
|
|
||||||
$orange-700: #f57c00 !default;
|
|
||||||
$orange-800: #ef6c00 !default;
|
|
||||||
$orange-900: #e65100 !default;
|
|
||||||
$orange-A100: #ffd180 !default;
|
|
||||||
$orange-A200: #ffab40 !default;
|
|
||||||
$orange-A400: #ff9100 !default;
|
|
||||||
$orange-A700: #ff6d00 !default;
|
|
||||||
$orange: $orange-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$deep-orange-50: #fbe9e7 !default;
|
|
||||||
$deep-orange-100: #ffccbc !default;
|
|
||||||
$deep-orange-200: #ffab91 !default;
|
|
||||||
$deep-orange-300: #ff8a65 !default;
|
|
||||||
$deep-orange-400: #ff7043 !default;
|
|
||||||
$deep-orange-500: #ff5722 !default;
|
|
||||||
$deep-orange-600: #f4511e !default;
|
|
||||||
$deep-orange-700: #e64a19 !default;
|
|
||||||
$deep-orange-800: #d84315 !default;
|
|
||||||
$deep-orange-900: #bf360c !default;
|
|
||||||
$deep-orange-A100: #ff9e80 !default;
|
|
||||||
$deep-orange-A200: #ff6e40 !default;
|
|
||||||
$deep-orange-A400: #ff3d00 !default;
|
|
||||||
$deep-orange-A700: #dd2c00 !default;
|
|
||||||
$deep-orange: $deep-orange-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$brown-50: #efebe9 !default;
|
|
||||||
$brown-100: #d7ccc8 !default;
|
|
||||||
$brown-200: #bcaaa4 !default;
|
|
||||||
$brown-300: #a1887f !default;
|
|
||||||
$brown-400: #8d6e63 !default;
|
|
||||||
$brown-500: #795548 !default;
|
|
||||||
$brown-600: #6d4c41 !default;
|
|
||||||
$brown-700: #5d4037 !default;
|
|
||||||
$brown-800: #4e342e !default;
|
|
||||||
$brown-900: #3e2723 !default;
|
|
||||||
$brown-A100: #d7ccc8 !default;
|
|
||||||
$brown-A200: #bcaaa4 !default;
|
|
||||||
$brown-A400: #8d6e63 !default;
|
|
||||||
$brown-A700: #5d4037 !default;
|
|
||||||
$brown: $brown-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$grey-50: #fafafa !default;
|
|
||||||
$grey-100: #f5f5f5 !default;
|
|
||||||
$grey-200: #eeeeee !default;
|
|
||||||
$grey-300: #e0e0e0 !default;
|
|
||||||
$grey-400: #bdbdbd !default;
|
|
||||||
$grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
|
|
||||||
$grey-600: #757575 !default;
|
|
||||||
$grey-700: #616161 !default;
|
|
||||||
$grey-800: #424242 !default;
|
|
||||||
$grey-900: #212121 !default;
|
|
||||||
$grey-A100: #f5f5f5 !default;
|
|
||||||
$grey-A200: #eeeeee !default;
|
|
||||||
$grey-A400: #bdbdbd !default;
|
|
||||||
$grey-A700: #616161 !default;
|
|
||||||
$grey: $grey-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$blue-grey-50: #eceff1 !default;
|
|
||||||
$blue-grey-100: #cfd8dc !default;
|
|
||||||
$blue-grey-200: #b0bec5 !default;
|
|
||||||
$blue-grey-300: #90a4ae !default;
|
|
||||||
$blue-grey-400: #78909c !default;
|
|
||||||
$blue-grey-500: #607d8b !default;
|
|
||||||
$blue-grey-600: #546e7a !default;
|
|
||||||
$blue-grey-700: #455a64 !default;
|
|
||||||
$blue-grey-800: #37474f !default;
|
|
||||||
$blue-grey-900: #263238 !default;
|
|
||||||
$blue-grey-A100: #cfd8dc !default;
|
|
||||||
$blue-grey-A200: #b0bec5 !default;
|
|
||||||
$blue-grey-A400: #78909c !default;
|
|
||||||
$blue-grey-A700: #455a64 !default;
|
|
||||||
$blue-grey: $blue-grey-500 !default;
|
|
||||||
|
|
||||||
|
|
||||||
$black: #000000; $rgb-black: "0,0,0" !default;
|
|
||||||
$white: #ffffff; $rgb-white: "255,255,255" !default;
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
//
|
|
||||||
// Modals
|
|
||||||
// Material Design element Dialogs
|
|
||||||
// --------------------------------------------------
|
|
||||||
.modal-content {
|
|
||||||
@include shadow-z-5();
|
|
||||||
border-radius: $border-radius-large;
|
|
||||||
border: none;
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
// Footer (for actions)
|
|
||||||
.modal-footer {
|
|
||||||
border-top: none;
|
|
||||||
padding: 7px;
|
|
||||||
|
|
||||||
&.text-center{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 16px;
|
|
||||||
padding-right: 16px;
|
|
||||||
width: auto;
|
|
||||||
&.pull-left {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
position: relative;
|
|
||||||
left: -5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button+button {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal-body + .modal-footer {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal-backdrop {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal{
|
|
||||||
.modal-dialog{
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
.modal-header .close{
|
|
||||||
color: $gray-light;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
i{
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-notice {
|
|
||||||
.instruction{
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
.picture{
|
|
||||||
max-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content{
|
|
||||||
.btn-raised{
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-small{
|
|
||||||
width: 300px;
|
|
||||||
.modal-body{
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
.dropdown-menu{
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
display: none;
|
|
||||||
float: left;
|
|
||||||
min-width: 160px;
|
|
||||||
padding: 5px 0;
|
|
||||||
margin: 2px 0 0;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
list-style: none;
|
|
||||||
background-color: #fff;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border: 1px solid rgba(0,0,0,.15);
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
||||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
||||||
}
|
|
||||||
.dropdown-menu {
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
background-color: rgba(0, 0, 0, .12);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
li > a{
|
|
||||||
font-size: $mdb-dropdown-font-size;
|
|
||||||
padding: 10px 20px;
|
|
||||||
margin: 0 5px;
|
|
||||||
text-transform: none;
|
|
||||||
color: $gray-dark !important;
|
|
||||||
border-radius: $border-radius-small;
|
|
||||||
@include transition($fast-transition-time, $transition-linear);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@include shadow-8dp();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dropdown-with-icons{
|
|
||||||
li > a{
|
|
||||||
padding: 12px 20px 12px 12px;
|
|
||||||
|
|
||||||
.material-icons{
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 24px;
|
|
||||||
position: relative;
|
|
||||||
margin-top: -4px;
|
|
||||||
top: 1px;
|
|
||||||
margin-right: 12px;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
a:hover,
|
|
||||||
a:focus,
|
|
||||||
a:active {
|
|
||||||
background-color: $brand-primary !important;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider{
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar &,
|
|
||||||
.navbar.navbar-default &{
|
|
||||||
li{
|
|
||||||
a:hover,
|
|
||||||
a:focus,
|
|
||||||
a:active {
|
|
||||||
background-color: $brand-primary;
|
|
||||||
color: #FFFFFF;
|
|
||||||
@include shadow-big-color($brand-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.navbar-nav > li > .dropdown-menu,
|
|
||||||
.dropdown .dropdown-menu,
|
|
||||||
.dropdown-menu.bootstrap-datetimepicker-widget{
|
|
||||||
@include transition($fast-transition-time, $transition-linear);
|
|
||||||
margin-top: -20px;
|
|
||||||
visibility: hidden;
|
|
||||||
display: block;
|
|
||||||
@include opacity(0);
|
|
||||||
}
|
|
||||||
.navbar-nav > li.open > .dropdown-menu,
|
|
||||||
.dropdown.open .dropdown-menu,
|
|
||||||
.dropdown-menu.bootstrap-datetimepicker-widget.open{
|
|
||||||
@include opacity(1);
|
|
||||||
visibility: visible;
|
|
||||||
margin-top: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-right{
|
|
||||||
right: 0;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item.dropdown{
|
|
||||||
.md-list-item-container{
|
|
||||||
a[data-toggle="dropdown"]{
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-ripple{
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-ripple{
|
|
||||||
-webkit-mask-image: none;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
> span{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,358 +0,0 @@
|
|||||||
.fixed-plugin{
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
width: 64px;
|
|
||||||
background: rgba(0,0,0,.3);
|
|
||||||
z-index: 1031;
|
|
||||||
border-radius: 8px 0 0 8px;
|
|
||||||
text-align: center;
|
|
||||||
top: 120px;
|
|
||||||
|
|
||||||
li > a,
|
|
||||||
.badge{
|
|
||||||
transition: all .34s;
|
|
||||||
-webkit-transition: all .34s;
|
|
||||||
-moz-transition: all .34s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-cog{
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 0 0 6px 6px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu{
|
|
||||||
right: 80px;
|
|
||||||
left: auto !important;
|
|
||||||
top: -40px !important;
|
|
||||||
width: 290px;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .dropdown-menu .now-ui-icons{
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu:after,
|
|
||||||
.dropdown-menu:before{
|
|
||||||
right: 10px;
|
|
||||||
margin-left: auto;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-circle-thin{
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active .fa-circle-thin{
|
|
||||||
color: #00bbff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu > .active > a,
|
|
||||||
.dropdown-menu > .active > a:hover,
|
|
||||||
.dropdown-menu > .active > a:focus{
|
|
||||||
color: #777777;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
img{
|
|
||||||
border-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu li > a:hover,
|
|
||||||
.dropdown-menu li > a:focus{
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge{
|
|
||||||
border: 3px solid #FFFFFF;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
height: 23px;
|
|
||||||
margin-right: 5px;
|
|
||||||
position: relative;
|
|
||||||
width: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.active,
|
|
||||||
.badge:hover{
|
|
||||||
border-color: #00bbff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-blue{
|
|
||||||
background-color: $brand-info;
|
|
||||||
}
|
|
||||||
.badge-green{
|
|
||||||
background-color: $brand-success;
|
|
||||||
}
|
|
||||||
.badge-purple{
|
|
||||||
background-color: $brand-primary;
|
|
||||||
}
|
|
||||||
.badge-orange{
|
|
||||||
background-color: $brand-warning;
|
|
||||||
}
|
|
||||||
.badge-red{
|
|
||||||
background-color: $brand-danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5{
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu li{
|
|
||||||
display: block;
|
|
||||||
padding: 18px 2px;
|
|
||||||
width: 25%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.adjustments-line,
|
|
||||||
li.header-title,
|
|
||||||
li.button-container{
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
min-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.button-container{
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
.md-button.md-just-icon{
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#sharrreTitle{
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.header-title{
|
|
||||||
height: 30px;
|
|
||||||
line-height: 25px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-buttons{
|
|
||||||
width: 100% !important;
|
|
||||||
display: flex !important;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.gh-button,
|
|
||||||
.social-count{
|
|
||||||
color: inherit !important;
|
|
||||||
background-color: inherit !important;
|
|
||||||
background-position: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.adjustments-line{
|
|
||||||
p{
|
|
||||||
float: left;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
color: #3C4858;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: transparent;
|
|
||||||
|
|
||||||
.badge-colors{
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
a:focus{
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.togglebutton{
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.label-switch{
|
|
||||||
position: relative;
|
|
||||||
left: -10px;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
color: $gray-light;
|
|
||||||
|
|
||||||
&.label-right{
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle{
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu > li.adjustments-line > a{
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
border-radius: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.dropdown-menu{
|
|
||||||
> li{
|
|
||||||
& > a.img-holder{
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFF;
|
|
||||||
border: 3px solid #FFF;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
max-height: 100px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
img{
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.switch-trigger:hover,
|
|
||||||
& > a.switch-trigger:focus{
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
> a.img-holder{
|
|
||||||
border-color: rgba(0, 187, 255, 0.53);;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .active > a.img-holder,
|
|
||||||
> .active > a.img-holder{
|
|
||||||
border-color: #00bbff;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-social{
|
|
||||||
width: 50%;
|
|
||||||
display: block;
|
|
||||||
width: 48%;
|
|
||||||
float: left;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-social{
|
|
||||||
i{
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child{
|
|
||||||
margin-right: 2%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown{
|
|
||||||
.dropdown-menu{
|
|
||||||
-webkit-transform: translateY(-2%);
|
|
||||||
-moz-transform: translateY(-2%);
|
|
||||||
-o-transform: translateY(-2%);
|
|
||||||
-ms-transform: translateY(-2%);
|
|
||||||
transform: translateY(-2%);
|
|
||||||
top: 27px;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transform-origin: 0 0;
|
|
||||||
|
|
||||||
&:before{
|
|
||||||
border-left: 16px solid rgba(0,0,0,.2);
|
|
||||||
right: -16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
border-left: 16px solid #fff;
|
|
||||||
right: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after{
|
|
||||||
content: "";
|
|
||||||
border-bottom: 16px solid transparent;
|
|
||||||
border-top: 16px solid transparent;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 65px;
|
|
||||||
width: 16px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-moz-transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show .dropdown-menu{
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
-webkit-transform: translateY(4%);
|
|
||||||
-moz-transform: translateY(4%);
|
|
||||||
-o-transform: translateY(4%);
|
|
||||||
-ms-transform: translateY(4%);
|
|
||||||
transform: translateY(4%);
|
|
||||||
|
|
||||||
transform-origin: 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bootstrap-switch{
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-plugin .dropdown-menu > li > a.img-holder{
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFF;
|
|
||||||
border: 3px solid #FFF;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
max-height: 100px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
min-width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-plugin .dropdown .dropdown-menu li.adjustments-line {
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-plugin .dropdown .dropdown-menu li {
|
|
||||||
padding: 5px 2px!important;
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
footer{
|
|
||||||
padding: $padding-base 0;
|
|
||||||
|
|
||||||
nav,
|
|
||||||
.copyright{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul{
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li{
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: inherit !important;
|
|
||||||
padding: $padding-base;
|
|
||||||
font-weight: $font-weight-bold;
|
|
||||||
font-size: $mdb-btn-font-size-base;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
text-decoration: none;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright{
|
|
||||||
padding: 15px 0;
|
|
||||||
margin: 0;
|
|
||||||
.material-icons{
|
|
||||||
font-size: 18px;
|
|
||||||
position: relative;
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn{
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container{
|
|
||||||
padding-right: 30px;
|
|
||||||
padding-left: 30px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
@mixin mdb-label-color-toggle-focus(){
|
|
||||||
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
|
||||||
.form-group.is-focused & {
|
|
||||||
color: $mdb-label-color;
|
|
||||||
|
|
||||||
// on focus just darken the specific labels, do not turn them to the brand-primary
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $mdb-label-color-toggle-focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
// correct the above focus color for disabled items
|
|
||||||
fieldset[disabled] & {
|
|
||||||
color: $mdb-label-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-horizontal {
|
|
||||||
|
|
||||||
// Consistent vertical alignment of radios and checkboxes
|
|
||||||
.radio,
|
|
||||||
.checkbox,
|
|
||||||
.radio-inline,
|
|
||||||
.checkbox-inline {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
label.control-label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-newsletter{
|
|
||||||
.input-group,
|
|
||||||
.form-group{
|
|
||||||
float: left;
|
|
||||||
width: 78%;
|
|
||||||
margin-right: 2%;
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn{
|
|
||||||
float: left;
|
|
||||||
width: 20%;
|
|
||||||
margin: 9px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,223 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
//
|
|
||||||
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
|
|
||||||
//
|
|
||||||
// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
|
|
||||||
//
|
|
||||||
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
|
|
||||||
// to identify differences in sizing approaches to form inputs.
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
legend {
|
|
||||||
margin-bottom: $mdb-input-line-height-computed;
|
|
||||||
font-size: ($mdb-input-font-size-base * 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adjust output element
|
|
||||||
output {
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1);
|
|
||||||
font-size: $mdb-input-font-size-base;
|
|
||||||
line-height: $mdb-input-line-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
|
||||||
padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-base;
|
|
||||||
line-height: $mdb-input-line-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Special styles for iOS temporal inputs
|
|
||||||
//
|
|
||||||
// In Mobile Safari, setting `display: block` on temporal inputs causes the
|
|
||||||
// text within the input to become vertically misaligned. As a workaround, we
|
|
||||||
// set a pixel line-height that matches the given height of the input, but only
|
|
||||||
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
|
||||||
//
|
|
||||||
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
|
|
||||||
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
||||||
input[type="date"],
|
|
||||||
input[type="time"],
|
|
||||||
input[type="datetime-local"],
|
|
||||||
input[type="month"] {
|
|
||||||
&.form-control {
|
|
||||||
line-height: $mdb-input-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-sm,
|
|
||||||
.input-group-sm & {
|
|
||||||
line-height: $mdb-input-height-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-lg,
|
|
||||||
.input-group-lg & {
|
|
||||||
line-height: $mdb-input-height-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio,
|
|
||||||
.checkbox {
|
|
||||||
|
|
||||||
label {
|
|
||||||
min-height: $mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Static form control text
|
|
||||||
//
|
|
||||||
// Apply class to a `p` element to make any string of text align with labels in
|
|
||||||
// a horizontal form layout.
|
|
||||||
|
|
||||||
.form-control-static {
|
|
||||||
// Size it appropriately next to real form controls
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1);
|
|
||||||
padding-bottom: ($mdb-input-padding-base-vertical + 1);
|
|
||||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
//
|
|
||||||
// Relative text size, padding, and border-radii changes for form controls. For
|
|
||||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
|
||||||
// element gets special love because it's special, and that's a fact!
|
|
||||||
|
|
||||||
// mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
|
|
||||||
// bootstrap-sass has this one, but we would have to then convert it back to less. chicken meet egg.
|
|
||||||
@mixin input-size($parent, $mdb-input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
|
|
||||||
|
|
||||||
#{$parent} {
|
|
||||||
height: $mdb-input-height;
|
|
||||||
padding: $padding-vertical $padding-horizontal;
|
|
||||||
font-size: $font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
select#{$parent} {
|
|
||||||
height: $mdb-input-height;
|
|
||||||
line-height: $mdb-input-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea#{$parent},
|
|
||||||
select[multiple]#{$parent} {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
//
|
|
||||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
|
||||||
// height and font-size of form controls.
|
|
||||||
//
|
|
||||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
|
||||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
|
||||||
.input-sm {
|
|
||||||
@include input-size(unquote(".input-sm"), $mdb-input-height-small, $mdb-input-padding-small-vertical, $mdb-input-padding-small-horizontal, $mdb-input-font-size-small, $mdb-input-line-height-small, $mdb-input-border-radius-small);
|
|
||||||
}
|
|
||||||
.form-group-sm {
|
|
||||||
.form-control {
|
|
||||||
height: $mdb-input-height-small;
|
|
||||||
padding: $mdb-input-padding-small-vertical $mdb-input-padding-small-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-small;
|
|
||||||
line-height: $mdb-input-line-height-small;
|
|
||||||
}
|
|
||||||
select.form-control {
|
|
||||||
height: $mdb-input-height-small;
|
|
||||||
line-height: $mdb-input-height-small;
|
|
||||||
}
|
|
||||||
textarea.form-control,
|
|
||||||
select[multiple].form-control {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.form-control-static {
|
|
||||||
height: $mdb-input-height-small;
|
|
||||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-small);
|
|
||||||
padding: ($mdb-input-padding-small-vertical + 1) $mdb-input-padding-small-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-small;
|
|
||||||
line-height: $mdb-input-line-height-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-lg {
|
|
||||||
@include input-size(unquote(".input-lg"), $mdb-input-height-large, $mdb-input-padding-large-vertical, $mdb-input-padding-large-horizontal, $mdb-input-font-size-large, $mdb-input-line-height-large, $mdb-input-border-radius-large);
|
|
||||||
}
|
|
||||||
.form-group-lg {
|
|
||||||
.form-control {
|
|
||||||
height: $mdb-input-height-large;
|
|
||||||
padding: $mdb-input-padding-large-vertical $mdb-input-padding-large-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-large;
|
|
||||||
line-height: $mdb-input-line-height-large;
|
|
||||||
}
|
|
||||||
select.form-control {
|
|
||||||
height: $mdb-input-height-large;
|
|
||||||
line-height: $mdb-input-height-large;
|
|
||||||
}
|
|
||||||
textarea.form-control,
|
|
||||||
select[multiple].form-control {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.form-control-static {
|
|
||||||
height: $mdb-input-height-large;
|
|
||||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-large);
|
|
||||||
padding: ($mdb-input-padding-large-vertical + 1) $mdb-input-padding-large-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-large;
|
|
||||||
line-height: $mdb-input-line-height-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.form-horizontal {
|
|
||||||
|
|
||||||
// Consistent vertical alignment of radios and checkboxes
|
|
||||||
//
|
|
||||||
// Labels also get some reset styles, but that is scoped to a media query below.
|
|
||||||
.radio,
|
|
||||||
.checkbox,
|
|
||||||
.radio-inline,
|
|
||||||
.checkbox-inline {
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
|
|
||||||
}
|
|
||||||
// Account for padding we're adding to ensure the alignment and of help text
|
|
||||||
// and other content below items
|
|
||||||
.radio,
|
|
||||||
.checkbox {
|
|
||||||
min-height: ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical + 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset spacing and right align labels, but scope to media queries so that
|
|
||||||
// labels on narrow viewports stack the same as a default form example.
|
|
||||||
@media (min-width: $screen-sm-min) {
|
|
||||||
.control-label {
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form group sizes
|
|
||||||
//
|
|
||||||
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
|
|
||||||
// inputs and labels within a `.form-group`.
|
|
||||||
.form-group-lg {
|
|
||||||
@media (min-width: $screen-sm-min) {
|
|
||||||
.control-label {
|
|
||||||
padding-top: (($mdb-input-padding-large-vertical * $mdb-input-line-height-large) + 1);
|
|
||||||
font-size: $mdb-input-font-size-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.form-group-sm {
|
|
||||||
@media (min-width: $screen-sm-min) {
|
|
||||||
.control-label {
|
|
||||||
padding-top: ($mdb-input-padding-small-vertical + 1);
|
|
||||||
font-size: $mdb-input-font-size-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,478 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
@import '_inputs-size';
|
|
||||||
|
|
||||||
// label variations
|
|
||||||
.label {
|
|
||||||
border-radius: $border-radius-small;
|
|
||||||
// @include variations(unquote(".label"), unquote(""), background-color, $grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
// must be broken out for reuse - webkit selector breaks firefox
|
|
||||||
@mixin label-static($label-top, $static-font-size, $static-line-height){
|
|
||||||
label.control-label {
|
|
||||||
top: $label-top;
|
|
||||||
left: 0;
|
|
||||||
// must repeat because the selector above is more specific than the general label sizing
|
|
||||||
font-size: $static-font-size;
|
|
||||||
line-height: $static-line-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
|
|
||||||
.form-control {
|
|
||||||
@include material-placeholder {
|
|
||||||
font-size: $placeholder-font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// generic labels used anywhere in the form (not control-label)
|
|
||||||
.checkbox label,
|
|
||||||
.radio label,
|
|
||||||
label {
|
|
||||||
font-size: $placeholder-font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
// smaller focused or static size
|
|
||||||
label.control-label {
|
|
||||||
font-size: $static-font-size;
|
|
||||||
line-height: $static-line-height;
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 16px 0 0 0; // std and lg
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-block {
|
|
||||||
margin-top: 0; // allow the input margin to set-off the top of the help-block
|
|
||||||
font-size: $help-block-font-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin form-group-validation-state($name, $color){
|
|
||||||
|
|
||||||
&.#{$name} { // e.g. has-error
|
|
||||||
.form-control {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
&.is-focused .form-control {
|
|
||||||
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
label.control-label,
|
|
||||||
.help-block {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
|
|
||||||
$static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
|
|
||||||
$static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
|
|
||||||
|
|
||||||
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
|
|
||||||
$label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
|
|
||||||
|
|
||||||
$help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
|
|
||||||
$help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
|
|
||||||
|
|
||||||
// this is outside a form-group
|
|
||||||
@if not $parent {
|
|
||||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
// this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
|
|
||||||
@else {
|
|
||||||
#{$parent} {
|
|
||||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
|
||||||
|
|
||||||
// form-group padding-bottom
|
|
||||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
|
|
||||||
// so the form-control margin-bottom must also be expressed as form-group padding
|
|
||||||
padding-bottom: $padding-large-vertical;
|
|
||||||
|
|
||||||
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
|
|
||||||
margin: ($label-top-margin + $static-font-size) 0 0 0;
|
|
||||||
|
|
||||||
// larger labels as placeholders
|
|
||||||
&.label-floating,
|
|
||||||
&.label-placeholder {
|
|
||||||
label.control-label {
|
|
||||||
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
|
||||||
font-size: $placeholder-font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// static, focused, or autofill floating labels
|
|
||||||
&.label-static,
|
|
||||||
&.label-floating.is-focused,
|
|
||||||
&.label-floating:not(.is-empty) {
|
|
||||||
@include label-static($label-top, $static-font-size, $static-line-height);
|
|
||||||
}
|
|
||||||
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
|
|
||||||
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
|
|
||||||
@include label-static($label-top, $static-font-size, $static-line-height);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----
|
|
||||||
// Inputs
|
|
||||||
|
|
||||||
.form-control,
|
|
||||||
.form-group .form-control {
|
|
||||||
border: 0;
|
|
||||||
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
background-size: 0 2px, 100% 1px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center bottom, center calc(100% - 1px);
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
transition: background 0s ease-out;
|
|
||||||
float: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
// Placeholders and and labels-as-placeholders should look the same
|
|
||||||
@include material-placeholder {
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//&:textarea { // appears to be an invalid selector
|
|
||||||
// height: 40px;
|
|
||||||
//}
|
|
||||||
|
|
||||||
&[readonly],
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] & {
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] & {
|
|
||||||
background-image: none;
|
|
||||||
border-bottom: 1px dotted $mdb-input-underline-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----
|
|
||||||
// Labels with form-group signalled state
|
|
||||||
//
|
|
||||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
|
||||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
|
||||||
//.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
// -----
|
|
||||||
// Labels with form-group signalled state
|
|
||||||
//
|
|
||||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
|
||||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
|
||||||
&.label-static,
|
|
||||||
&.label-placeholder,
|
|
||||||
&.label-floating {
|
|
||||||
label.control-label {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: 0.3s ease all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// hint to browser for optimization
|
|
||||||
// TODO: evaluate effectiveness - looking for community feedback
|
|
||||||
&.label-floating label.control-label {
|
|
||||||
will-change: left, top, contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
// hide label-placeholders when the field is not empty
|
|
||||||
&.label-placeholder:not(.is-empty){
|
|
||||||
label.control-label{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
|
|
||||||
.help-block {
|
|
||||||
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// form-group is-focused display
|
|
||||||
&.is-focused {
|
|
||||||
.form-control {
|
|
||||||
outline: none;
|
|
||||||
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
background-size: 100% 2px, 100% 1px;
|
|
||||||
box-shadow: none;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
|
|
||||||
.material-input:after {
|
|
||||||
background-color: $brand-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.form-info{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-info, $brand-info), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-success{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-success, $brand-success), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-warning{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-warning, $brand-warning), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-danger{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-danger, $brand-danger), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-white{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($white-color, $white-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
|
|
||||||
&.label-placeholder {
|
|
||||||
label,
|
|
||||||
label.control-label {
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include form-group-validation-state(has-warning, $brand-warning);
|
|
||||||
@include form-group-validation-state(has-error, $brand-danger);
|
|
||||||
@include form-group-validation-state(has-success, $brand-success);
|
|
||||||
@include form-group-validation-state(has-info, $brand-info);
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: none;
|
|
||||||
& ~ .form-control-highlight {
|
|
||||||
margin-top: -11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
appearance: none; // Fix for OS X
|
|
||||||
|
|
||||||
& ~ .material-input:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
|
|
||||||
// @include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
|
|
||||||
//
|
|
||||||
// // default floating size/location with a form-group (need margin etc from a default form-group)
|
|
||||||
// @include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
|
|
||||||
//
|
|
||||||
// // sm floating size/location
|
|
||||||
// @include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
|
|
||||||
//
|
|
||||||
// // lg floating size/location
|
|
||||||
// @include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
|
|
||||||
|
|
||||||
|
|
||||||
select.form-control {
|
|
||||||
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
.form-group.is-focused & {
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: $mdb-input-underline-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[multiple] {
|
|
||||||
&,
|
|
||||||
.form-group.is-focused & {
|
|
||||||
height: 85px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin input-group-button-variation($vertical-padding){
|
|
||||||
.input-group-btn {
|
|
||||||
.btn {
|
|
||||||
margin: 0 0 $vertical-padding 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// input group/addon related styles
|
|
||||||
|
|
||||||
// default margin - no form-group required
|
|
||||||
@include input-group-button-variation($mdb-input-padding-base-vertical);
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
//.form-control {
|
|
||||||
// float: none;
|
|
||||||
//}
|
|
||||||
|
|
||||||
// sm margin
|
|
||||||
&.form-group-sm {
|
|
||||||
@include input-group-button-variation($mdb-input-padding-small-vertical);
|
|
||||||
}
|
|
||||||
|
|
||||||
// lg margin
|
|
||||||
&.form-group-lg {
|
|
||||||
@include input-group-button-variation($mdb-input-padding-large-vertical);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group { // may be in or outside of form-group
|
|
||||||
.input-group-btn {
|
|
||||||
padding: 0 12px; // match addon spacing
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-addon {
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
padding: 6px 15px 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input files - hide actual input - requires specific markup in the sample.
|
|
||||||
.form-group input[type=file] {
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.form-control-feedback{
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
.has-success &{
|
|
||||||
color: $green;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-error &{
|
|
||||||
color: $red;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-field{
|
|
||||||
.md-input,
|
|
||||||
.md-textarea{
|
|
||||||
height: 36px;
|
|
||||||
padding: 7px 0;
|
|
||||||
font-size: 14px !important;
|
|
||||||
-webkit-text-fill-color: $black-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-has-textarea:not(.md-autogrow) label{
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar &.md-theme-default.md-focused .md-input{
|
|
||||||
color: $white-color !important;
|
|
||||||
-webkit-text-fill-color: $white-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
label{
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $mdb-input-placeholder-color !important;
|
|
||||||
line-height: 1.4;
|
|
||||||
top: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-disabled{
|
|
||||||
.md-input{
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
border-bottom: 1px dotted #d2d2d2;
|
|
||||||
background-color: transparent!important;
|
|
||||||
background-image: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.md-disabled):after{
|
|
||||||
background-color: #d2d2d2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before{
|
|
||||||
background-color: $brand-primary !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-focused label,
|
|
||||||
&.md-has-value label,
|
|
||||||
&.md-focused.md-has-value label{
|
|
||||||
font-size: .6875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-has-textarea:not(.md-autogrow):after,
|
|
||||||
&.md-has-textarea:not(.md-autogrow):before{
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
border-color: #d2d2d2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-has-textarea:not(.md-autogrow):before{
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
border-color: $brand-primary !important;
|
|
||||||
transform: scaleX(.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-has-textarea:not(.md-autogrow).md-focused label,
|
|
||||||
&.md-has-textarea:not(.md-autogrow).md-has-value label{
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-focused.md-has-textarea:not(.md-autogrow):before{
|
|
||||||
transform: scaleX(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-field .md-input-action{
|
|
||||||
top: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: $white-color !important;
|
|
||||||
|
|
||||||
.md-button-content i{
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
|
|
||||||
svg{
|
|
||||||
fill: $gray-light !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
.md-layout-item{
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list .md-ripple {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.typo-line {
|
|
||||||
padding-left: 140px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.typo-line .category {
|
|
||||||
transform: translateY(-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.sidebar .nav>li.active-pro {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#map {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.places-buttons .btn {
|
|
||||||
margin-bottom: 30px
|
|
||||||
}
|
|
||||||
|
|
||||||
.space-70 {
|
|
||||||
height: 70px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-typo {
|
|
||||||
padding-left: 25%;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-typo .tim-note {
|
|
||||||
bottom: 10px;
|
|
||||||
color: #c0c1c2;
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 13px;
|
|
||||||
left: 0;
|
|
||||||
margin-left: 20px;
|
|
||||||
position: absolute;
|
|
||||||
width: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-row {
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-row h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: #EEEEEE;
|
|
||||||
letter-spacing: unset;
|
|
||||||
// background: #fdfdfe;
|
|
||||||
color: $black-color;
|
|
||||||
&.inverse {
|
|
||||||
background: #333333;
|
|
||||||
&, .form-control {
|
|
||||||
color: $mdb-text-color-light;
|
|
||||||
}
|
|
||||||
.modal,
|
|
||||||
.panel-default,
|
|
||||||
.card {
|
|
||||||
&,
|
|
||||||
.form-control {
|
|
||||||
background-color: initial;
|
|
||||||
color: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper{
|
|
||||||
|
|
||||||
&.wrapper-full-page{
|
|
||||||
height: auto;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
blockquote{
|
|
||||||
p{
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.life-of-material-dashboard{
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
|
||||||
font-family: $font-family-sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serif-font{
|
|
||||||
font-family: $font-family-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
height: 60vh;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
border-bottom-left-radius: 6px;
|
|
||||||
border-bottom-right-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: $link-color;
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
color: darken($link-color, 5%) !important;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.text-info{
|
|
||||||
&:hover, &:focus{
|
|
||||||
color: darken($brand-info, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .material-icons {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a[data-toggle="collapse"][aria-expanded="true"] .caret{
|
|
||||||
@include rotate-180();
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav a,
|
|
||||||
.caret,
|
|
||||||
.sidebar .dropdown .dropdown-menu li a{
|
|
||||||
@include transition($fast-transition-time, $transition-ease-in);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
.animation-transition-general{
|
|
||||||
@include transition($general-transition-time, $transition-linear);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-transition-slow{
|
|
||||||
@include transition($slow-transition-time, $transition-linear);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-transition-fast{
|
|
||||||
@include transition($fast-transition-time, $transition-ease);
|
|
||||||
}
|
|
||||||
legend {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull-left{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull-right{
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent highlight on mobile
|
|
||||||
* {
|
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a:focus, a:active,
|
|
||||||
button:active, button:focus, button:hover,
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
input[type="reset"]::-moz-focus-inner,
|
|
||||||
input[type="button"]::-moz-focus-inner,
|
|
||||||
input[type="submit"]::-moz-focus-inner,
|
|
||||||
select::-moz-focus-inner,
|
|
||||||
input[type="file"] > input[type="button"]::-moz-focus-inner {
|
|
||||||
outline : 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.text-left{
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.text-right{
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.places-buttons{
|
|
||||||
.md-button{
|
|
||||||
width: 30%;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-theme-default :not(input):not(textarea)::selection{
|
|
||||||
background-color: #c8c8c8 !important;
|
|
||||||
}
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
//Utilities
|
|
||||||
|
|
||||||
@import "mixins/transparency";
|
|
||||||
@import "mixins/vendor-prefixes";
|
|
||||||
@import "mixins/chartist";
|
|
||||||
|
|
||||||
// Placeholder text
|
|
||||||
@mixin material-placeholder() {
|
|
||||||
&::-moz-placeholder {@content; } // Firefox
|
|
||||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
|
||||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin toolbar-colors($variation-color){
|
|
||||||
background-color: $variation-color !important;
|
|
||||||
@include shadow-big-color($variation-color);
|
|
||||||
|
|
||||||
.md-title,
|
|
||||||
.md-list .md-list-item-content,
|
|
||||||
.md-toolbar-toggle .icon-bar,
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@mixin dropdown-colors($variation-color) {
|
|
||||||
.dropdown-menu {
|
|
||||||
border-radius: $border-radius-base !important;
|
|
||||||
li > a {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $white-color !important;
|
|
||||||
background-color: $variation-color !important;
|
|
||||||
@include shadow-big-color($variation-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active > a {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
background-color: $variation-color !important;
|
|
||||||
color: $white-color !important;
|
|
||||||
@include shadow-big-color($variation-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin alert-color($color) {
|
|
||||||
background-color: $color;
|
|
||||||
color: $white-color;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
@include shadow-big-color($color)
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 transform-scale($value){
|
|
||||||
-webkit-transform: scale($value);
|
|
||||||
-moz-transform: scale($value);
|
|
||||||
-o-transform: scale($value);
|
|
||||||
-ms-transform: scale($value);
|
|
||||||
transform: scale($value);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin transform-scale3d($value){
|
|
||||||
-webkit-transform: scale3d($value);
|
|
||||||
-moz-transform: scale3d($value);
|
|
||||||
-o-transform: scale3d($value);
|
|
||||||
-ms-transform: scale3d($value);
|
|
||||||
transform: scale3d($value);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 transform-origin($coordinates){
|
|
||||||
-webkit-transform-origin: $coordinates;
|
|
||||||
-moz-transform-origin: $coordinates;
|
|
||||||
-o-transform-origin: $coordinates;
|
|
||||||
-ms-transform-origin: $coordinates;
|
|
||||||
transform-origin: $coordinates;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin black-filter(){
|
|
||||||
background: rgba(0,0,0,.55);
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
content: "";
|
|
||||||
z-index: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin animation($value){
|
|
||||||
-webkit-animation: $value;
|
|
||||||
-moz-animation: $value;
|
|
||||||
-o-animation: $value;
|
|
||||||
-ms-animation: $value;
|
|
||||||
animation: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin radial-gradient($extern-color, $center-color){
|
|
||||||
background: $extern-color;
|
|
||||||
background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
|
|
||||||
background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
|
|
||||||
background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
|
|
||||||
background-size: 550% 450%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin tag-color ($color){
|
|
||||||
.tag{
|
|
||||||
background-color: $color;
|
|
||||||
color: $white-color;
|
|
||||||
.tagsinput-remove-link{
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tagsinput-add{
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@mixin create-colored-tags(){
|
|
||||||
&.tag-primary{
|
|
||||||
@include tag-color($brand-primary);
|
|
||||||
}
|
|
||||||
&.tag-info {
|
|
||||||
@include tag-color($brand-info);
|
|
||||||
}
|
|
||||||
&.tag-success{
|
|
||||||
@include tag-color($brand-success);
|
|
||||||
}
|
|
||||||
&.tag-warning{
|
|
||||||
@include tag-color($brand-warning);
|
|
||||||
}
|
|
||||||
&.tag-danger{
|
|
||||||
@include tag-color($brand-danger);
|
|
||||||
}
|
|
||||||
&.tag-rose{
|
|
||||||
@include tag-color($brand-rose);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin rotate-180(){
|
|
||||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
|
||||||
-webkit-transform: rotate(180deg);
|
|
||||||
-ms-transform: rotate(180deg);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin rotate() {
|
|
||||||
-webkit-transform: rotate( 45deg );
|
|
||||||
-moz-transform: rotate( 45deg );
|
|
||||||
-o-transform: rotate( 45deg );
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
transform: rotate( 45deg );
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin linear-gradient($color1, $color2){
|
|
||||||
background: $color1; /* For browsers that do not support gradients */
|
|
||||||
background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
|
|
||||||
background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
|
|
||||||
background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */
|
|
||||||
background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Mixins for buttons
|
|
||||||
|
|
||||||
@mixin btn-styles($btn-color) {
|
|
||||||
|
|
||||||
// remove this line if you want black shadows
|
|
||||||
@include shadow-2dp-color($btn-color);
|
|
||||||
|
|
||||||
&.md-raised{
|
|
||||||
@include shadow-2dp-color($btn-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
&:active:focus,
|
|
||||||
&:active:hover,
|
|
||||||
&.active:focus,
|
|
||||||
&.active:hover,
|
|
||||||
.open > &.dropdown-toggle,
|
|
||||||
.open > &.dropdown-toggle:focus,
|
|
||||||
.open > &.dropdown-toggle:hover {
|
|
||||||
background-color: $btn-color !important;
|
|
||||||
color: $white-color !important;
|
|
||||||
|
|
||||||
i{
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&:hover{
|
|
||||||
// remove this line if you want black shadows
|
|
||||||
@include button-shadow-color($btn-color);
|
|
||||||
background-color: darken($btn-color, 3%) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled,
|
|
||||||
&:disabled,
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] & {
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&.focus,
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
opacity: .65;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-simple{
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
&:active:focus,
|
|
||||||
&:active:hover,
|
|
||||||
&.active:focus,
|
|
||||||
&.active:hover{
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: $btn-color !important;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
i{
|
|
||||||
color: $btn-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin set-background-color-button ($color){
|
|
||||||
.nav{
|
|
||||||
.md-list-item-container.active {
|
|
||||||
background-color: $color !important;
|
|
||||||
@include shadow-big-color($color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// for social buttons
|
|
||||||
@mixin social-buttons-color ($color){
|
|
||||||
background-color: $color !important;
|
|
||||||
color: #fff;
|
|
||||||
@include shadow-2dp-color($color);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
&:active:focus,
|
|
||||||
&:active:hover,
|
|
||||||
&.active:focus,
|
|
||||||
&.active:hover{
|
|
||||||
background-color: $color !important;
|
|
||||||
color: #fff;
|
|
||||||
@include button-shadow-color($color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-simple{
|
|
||||||
color: $color;
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin social-buttons(){
|
|
||||||
&.md-facebook {
|
|
||||||
@include social-buttons-color($social-facebook);
|
|
||||||
}
|
|
||||||
&.md-twitter {
|
|
||||||
@include social-buttons-color($social-twitter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,320 +0,0 @@
|
|||||||
.md-toolbar {
|
|
||||||
min-height: 56px;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
&.md-transparent{
|
|
||||||
background-color: transparent !important;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.md-title,
|
|
||||||
.md-list .md-list-item-content,
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
color: $black-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item-content {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item{
|
|
||||||
.md-button{
|
|
||||||
&.md-just-icon{
|
|
||||||
width: auto;
|
|
||||||
min-width: auto;
|
|
||||||
min-height: 48px;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
&:active:focus,
|
|
||||||
&:active:hover,
|
|
||||||
&.active:focus,
|
|
||||||
&.active:hover,
|
|
||||||
.open > &.dropdown-toggle,
|
|
||||||
.open > &.dropdown-toggle:focus,
|
|
||||||
.open > &.dropdown-toggle:hover{
|
|
||||||
color: $black-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i{
|
|
||||||
width: 20px;
|
|
||||||
min-width: 20px;
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
&:active:focus,
|
|
||||||
&:active:hover,
|
|
||||||
&.active:focus,
|
|
||||||
&.active:hover,
|
|
||||||
.open > &.dropdown-toggle,
|
|
||||||
.open > &.dropdown-toggle:focus,
|
|
||||||
.open > &.dropdown-toggle:hover{
|
|
||||||
color: $black-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification{
|
|
||||||
position: absolute;
|
|
||||||
top: -6px;
|
|
||||||
border: 1px solid #FFF;
|
|
||||||
right: -8px;
|
|
||||||
font-size: 9px;
|
|
||||||
background: #f44336;
|
|
||||||
color: #FFFFFF;
|
|
||||||
z-index: 1;
|
|
||||||
min-width: 20px;
|
|
||||||
padding: 0px 5px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 19px;
|
|
||||||
vertical-align: middle;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
> li > .dropdown-menu{
|
|
||||||
margin-top: -20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> li.open > .dropdown-menu{
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .active > a {
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: inherit;
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .disabled > a {
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: inherit;
|
|
||||||
background-color: transparent;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.profile-photo{
|
|
||||||
padding: 0 5px 0;
|
|
||||||
.profile-photo-small{
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// default color for dropdown
|
|
||||||
@include dropdown-colors($brand-primary);
|
|
||||||
@include toolbar-colors($gray-light);
|
|
||||||
.md-toolbar-toggle .icon-bar{
|
|
||||||
color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-primary{
|
|
||||||
@include dropdown-colors($brand-primary);
|
|
||||||
@include toolbar-colors($brand-primary);
|
|
||||||
}
|
|
||||||
&.md-danger{
|
|
||||||
@include dropdown-colors($brand-danger);
|
|
||||||
@include toolbar-colors($brand-danger);
|
|
||||||
}
|
|
||||||
&.md-warning{
|
|
||||||
@include dropdown-colors($brand-warning);
|
|
||||||
@include toolbar-colors($brand-warning);
|
|
||||||
}
|
|
||||||
&.md-info{
|
|
||||||
@include dropdown-colors($brand-info);
|
|
||||||
@include toolbar-colors($brand-info);
|
|
||||||
}
|
|
||||||
&.md-success{
|
|
||||||
@include dropdown-colors($brand-success);
|
|
||||||
@include toolbar-colors($brand-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.navbar-transparent{
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
.logo-container .brand{
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-toolbar-row {
|
|
||||||
min-height: auto;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-button{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-toolbar-toggle .md-button-content{
|
|
||||||
display: block;
|
|
||||||
align-items: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-theme-default.md-transparent,
|
|
||||||
&.md-theme-default,
|
|
||||||
&.md-theme-default .md-title,
|
|
||||||
&.md-theme-default.md-transparent .md-title {
|
|
||||||
color: $gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-title {
|
|
||||||
height: 50px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 15px;
|
|
||||||
padding: 10px 0;
|
|
||||||
font-weight: 300;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-toolbar-toggle {
|
|
||||||
width: 40px;
|
|
||||||
|
|
||||||
.icon-bar {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 22px;
|
|
||||||
height: 2px;
|
|
||||||
background-color: inherit;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 1px;
|
|
||||||
|
|
||||||
& + .icon-bar{
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list{
|
|
||||||
flex-flow: row;
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
color: inherit !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
|
|
||||||
&:hover .md-list-item > a,
|
|
||||||
&:focus .md-list-item > a,
|
|
||||||
& > a:hover {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item > a:not(:last-child){
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-field{
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
&:after,
|
|
||||||
&:before{
|
|
||||||
bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-input{
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label{
|
|
||||||
top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.md-focused label,
|
|
||||||
&.md-has-value label{
|
|
||||||
top: -4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-collapse{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-menu-content{
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
border-radius: $border-radius-base !important;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.md-list .md-list-item a{
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.md-list-item a{
|
|
||||||
color: inherit !important;
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
|
|
||||||
font-weight: $font-weight-default;
|
|
||||||
font-size: $mdb-btn-font-size-base;
|
|
||||||
text-transform: uppercase;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: inherit;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.material-icons,
|
|
||||||
.fa{
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn:not(.btn-just-icon){
|
|
||||||
.fa{
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
margin-top: -4px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item {
|
|
||||||
margin-left: 5px;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
.pagination{
|
|
||||||
> li > a,
|
|
||||||
> li > span{
|
|
||||||
border: 0;
|
|
||||||
border-radius: 30px !important;
|
|
||||||
transition: all .3s;
|
|
||||||
padding: 0px 11px;
|
|
||||||
margin: 0 3px;
|
|
||||||
min-width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
color: $gray-color;
|
|
||||||
font-weight: $font-weight-default;
|
|
||||||
font-size: $mdb-btn-font-size-base;
|
|
||||||
text-transform: uppercase;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
color: $gray-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .active > a,
|
|
||||||
> .active > span{
|
|
||||||
color: $gray-color;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-primary;
|
|
||||||
border-color: $brand-primary;
|
|
||||||
color: $white-color;
|
|
||||||
@include shadow-4dp-color($brand-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
&.pagination-info{
|
|
||||||
> .active > a,
|
|
||||||
> .active > span{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-info;
|
|
||||||
border-color: $brand-info;
|
|
||||||
@include shadow-4dp-color($brand-info);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pagination-success{
|
|
||||||
> .active > a,
|
|
||||||
> .active > span{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-success;
|
|
||||||
border-color: $brand-success;
|
|
||||||
@include shadow-4dp-color($brand-success);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pagination-warning{
|
|
||||||
> .active > a,
|
|
||||||
> .active > span{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-warning;
|
|
||||||
border-color: $brand-warning;
|
|
||||||
@include shadow-4dp-color($brand-warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pagination-danger{
|
|
||||||
> .active > a,
|
|
||||||
> .active > span{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-danger;
|
|
||||||
border-color: $brand-danger;
|
|
||||||
@include shadow-4dp-color($brand-danger);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
.nav-pills{
|
|
||||||
|
|
||||||
.section-dark &,
|
|
||||||
.section-image &{
|
|
||||||
> li > a{
|
|
||||||
color: $gray-color;
|
|
||||||
}
|
|
||||||
> li{
|
|
||||||
> a:hover,
|
|
||||||
> a:focus{
|
|
||||||
background-color: #EEEEEE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> li {
|
|
||||||
> a{
|
|
||||||
line-height: $mdb-btn-font-size-base * 2;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: $mdb-btn-font-size-base;
|
|
||||||
font-weight: $font-weight-bold;
|
|
||||||
min-width: 100px;
|
|
||||||
text-align: center;
|
|
||||||
color: $gray;
|
|
||||||
transition: all .3s;
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
background-color: rgba(200, 200, 200, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i{
|
|
||||||
display: block;
|
|
||||||
font-size: 30px;
|
|
||||||
padding: 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > a{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-primary;
|
|
||||||
color: $white-color;
|
|
||||||
@include shadow-big-color($brand-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.nav-pills-icons){
|
|
||||||
> li > a{
|
|
||||||
border-radius: $border-radius-extreme;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-stacked{
|
|
||||||
> li + li{
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-pills-info{
|
|
||||||
> li {
|
|
||||||
&.active > a{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-info;
|
|
||||||
@include shadow-big-color($brand-info);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-pills-success{
|
|
||||||
> li {
|
|
||||||
&.active > a{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-success;
|
|
||||||
@include shadow-big-color($brand-success);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-pills-warning{
|
|
||||||
> li {
|
|
||||||
&.active > a{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-warning;
|
|
||||||
@include shadow-big-color($brand-warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-pills-danger{
|
|
||||||
> li {
|
|
||||||
&.active > a{
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
background-color: $brand-danger;
|
|
||||||
@include shadow-big-color($brand-warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.tab-space{
|
|
||||||
padding: 20px 0 50px 0px;
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
.md-tooltip{
|
|
||||||
padding: 10px 15px;
|
|
||||||
min-width: 130px;
|
|
||||||
max-width: 200px;
|
|
||||||
height: auto;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
background-color: $white-color !important;
|
|
||||||
color: $gray !important;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 400;
|
|
||||||
@include shadow-8dp();
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
position: absolute;
|
|
||||||
bottom: -5px;
|
|
||||||
height: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 5px;
|
|
||||||
vertical-align: .255em;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
&[x-placement="top"]:after{
|
|
||||||
border-top: 5px solid $white-color;
|
|
||||||
border-right: 5px solid transparent;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-left: 5px solid transparent;
|
|
||||||
}
|
|
||||||
&[x-placement="bottom"]:after{
|
|
||||||
top: -5px;
|
|
||||||
border-top: 0;
|
|
||||||
border-right: 5px solid transparent;
|
|
||||||
border-bottom: 5px solid $white-color;
|
|
||||||
border-left: 5px solid transparent;
|
|
||||||
}
|
|
||||||
&[x-placement="left"]:after{
|
|
||||||
margin-right: 0;
|
|
||||||
right: -5px;
|
|
||||||
top: 16px;
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
border-bottom: 5px solid transparent;
|
|
||||||
border-left: 5px solid $white-color;
|
|
||||||
}
|
|
||||||
&[x-placement="right"]:after{
|
|
||||||
margin-left: 0;
|
|
||||||
left: -5px;
|
|
||||||
top: 16px;
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
border-bottom: 5px solid transparent;
|
|
||||||
border-right: 5px solid $white-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,572 +0,0 @@
|
|||||||
@media (min-width: 992px){
|
|
||||||
.navbar-form {
|
|
||||||
margin-top: 21px;
|
|
||||||
margin-bottom: 21px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-toolbar-toggle{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.navbar-nav.navbar-right > li > .dropdown-menu:before{
|
|
||||||
left: auto;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav.navbar-right > li > .dropdown-menu:after{
|
|
||||||
left: auto;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer:not(.footer-big){
|
|
||||||
nav > ul{
|
|
||||||
li:first-child{
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body > .navbar-collapse.collapse{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card{
|
|
||||||
form{
|
|
||||||
[class*="col-"]{
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
[class*="col-"]:first-child{
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
[class*="col-"]:last-child{
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper .sidebar{
|
|
||||||
.navbar-form{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.nav-mobile-menu{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Changes for small display */
|
|
||||||
|
|
||||||
@media (max-width: 991px){
|
|
||||||
.md-toolbar .md-collapse{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel > .content{
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper .sidebar{
|
|
||||||
display: none;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.sidebar-wrapper{
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-mobile-menu{
|
|
||||||
margin-top: 0;
|
|
||||||
|
|
||||||
.md-field{
|
|
||||||
width: auto;
|
|
||||||
margin: 10px 36px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification{
|
|
||||||
float: left;
|
|
||||||
line-height: 30px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
position: static;
|
|
||||||
float: none;
|
|
||||||
width: auto;
|
|
||||||
margin-top: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
display: none;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown.open .dropdown-menu{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown{
|
|
||||||
li:hover a{
|
|
||||||
background-color: $brand-primary;
|
|
||||||
@include shadow-8dp();
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body{
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-on-left{
|
|
||||||
.nav-open &{
|
|
||||||
.main-panel,
|
|
||||||
.wrapper-full-page,
|
|
||||||
.navbar-fixed > div{
|
|
||||||
@include transform-translate-x(260px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel{
|
|
||||||
position: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper .sidebar,
|
|
||||||
.wrapper .off-canvas-sidebar{
|
|
||||||
left: 0;
|
|
||||||
right: auto;
|
|
||||||
@include transform-translate-x(-260px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#bodyClick{
|
|
||||||
left: 260px;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.navbar-transparent{
|
|
||||||
padding-top: 15px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.45);
|
|
||||||
}
|
|
||||||
body,
|
|
||||||
html{
|
|
||||||
position: relative;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
.navbar .container{
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.navbar .navbar-collapse.collapse,
|
|
||||||
.navbar .navbar-collapse.collapse.in,
|
|
||||||
.navbar .navbar-collapse.collapsing{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > li{
|
|
||||||
float: none;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper .sidebar,
|
|
||||||
.wrapper .off-canvas-sidebar{
|
|
||||||
position: fixed;
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
width: 260px;
|
|
||||||
right: 0;
|
|
||||||
left: auto;
|
|
||||||
z-index: 1032;
|
|
||||||
visibility: visible;
|
|
||||||
background-color: #9A9A9A;
|
|
||||||
overflow-y: visible;
|
|
||||||
border-top: none;
|
|
||||||
text-align: left;
|
|
||||||
padding-right: 0px;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
@include transform-translate-x(260px);
|
|
||||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
|
||||||
> ul {
|
|
||||||
position: relative;
|
|
||||||
z-index: 4;
|
|
||||||
overflow-y:scroll;
|
|
||||||
height: calc(100vh - 61px);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&::before{
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo{
|
|
||||||
position: relative;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-form{
|
|
||||||
margin: 10px 15px;
|
|
||||||
float: none !important;
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-responsive {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
overflow-x: scroll;
|
|
||||||
overflow-y: hidden;
|
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group{
|
|
||||||
.form-control{
|
|
||||||
font-size: 16px;
|
|
||||||
height: 37px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-form{
|
|
||||||
.btn{
|
|
||||||
position: absolute;
|
|
||||||
top: 27px;
|
|
||||||
right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-open .navbar-collapse{
|
|
||||||
@include transform-translate-x(0px);
|
|
||||||
}
|
|
||||||
.nav-open .navbar .container{
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
.nav-open .main-panel{
|
|
||||||
left: 0;
|
|
||||||
@include transform-translate-x(-260px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-open .sidebar{
|
|
||||||
@include shadow-big();
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-open{
|
|
||||||
.off-canvas-sidebar,
|
|
||||||
.sidebar{
|
|
||||||
@include transform-translate-x(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-layer{
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
top: 0;
|
|
||||||
left: auto;
|
|
||||||
|
|
||||||
content: "";
|
|
||||||
z-index: 9999;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
@include transition($slow-transition-time, $transition-ease-in);
|
|
||||||
|
|
||||||
&.visible{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggle .icon-bar {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
width: 24px;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 1px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-header .navbar-toggle {
|
|
||||||
margin: 10px 15px 10px 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.bar1,
|
|
||||||
.bar2,
|
|
||||||
.bar3 {
|
|
||||||
outline: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include topbar-x-rotation();
|
|
||||||
@include topbar-back-rotation();
|
|
||||||
@include bottombar-x-rotation();
|
|
||||||
@include bottombar-back-rotation();
|
|
||||||
|
|
||||||
.md-toolbar-toggle{
|
|
||||||
.icon-bar:nth-child(2){
|
|
||||||
top: 0px;
|
|
||||||
@include bar-animation($topbar-back);
|
|
||||||
}
|
|
||||||
.icon-bar:nth-child(3){
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.icon-bar:nth-child(4){
|
|
||||||
bottom: 0px;
|
|
||||||
@include bar-animation($bottombar-back);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toggled{
|
|
||||||
.icon-bar:nth-child(1){
|
|
||||||
top: 6px;
|
|
||||||
@include bar-animation($topbar-x);
|
|
||||||
}
|
|
||||||
.icon-bar:nth-child(2){
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.icon-bar:nth-child(3){
|
|
||||||
bottom: 6px;
|
|
||||||
@include bar-animation($bottombar-x);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-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;}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu .divider{
|
|
||||||
background-color: rgba(229, 229, 229, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
margin: 1px 0;
|
|
||||||
|
|
||||||
.open .dropdown-menu > li {
|
|
||||||
& > a{
|
|
||||||
padding: 15px 15px 5px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child > a{
|
|
||||||
padding: 5px 15px 5px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child > a {
|
|
||||||
padding: 15px 15px 25px 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*="navbar-"] .navbar-nav {
|
|
||||||
& > li > a,
|
|
||||||
> li > a:hover,
|
|
||||||
> li > a:focus,
|
|
||||||
.active > a,
|
|
||||||
.active > a:hover,
|
|
||||||
.active > a:focus,
|
|
||||||
.open .dropdown-menu > li > a,
|
|
||||||
.open .dropdown-menu > li > a:hover,
|
|
||||||
.open .dropdown-menu > li > a:focus,
|
|
||||||
.navbar-nav .open .dropdown-menu > li > a:active {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > li > a,
|
|
||||||
> li > a:hover,
|
|
||||||
> li > a:focus,
|
|
||||||
.open .dropdown-menu > li > a,
|
|
||||||
.open .dropdown-menu > li > a:hover,
|
|
||||||
.open .dropdown-menu > li > a:focus{
|
|
||||||
opacity: .7;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.navbar-nav .open .dropdown-menu > li > a:active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .dropdown > a{
|
|
||||||
&:hover .caret {
|
|
||||||
border-bottom-color: #777;
|
|
||||||
border-top-color: #777;
|
|
||||||
}
|
|
||||||
&:active .caret {
|
|
||||||
border-bottom-color: white;
|
|
||||||
border-top-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.navbar-fixed-top {
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
#bodyClick {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
opacity: 0;
|
|
||||||
top: 0;
|
|
||||||
left: auto;
|
|
||||||
right: 260px;
|
|
||||||
content: "";
|
|
||||||
z-index: 9999;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-line .btn{
|
|
||||||
margin: $margin-bottom;
|
|
||||||
}
|
|
||||||
.subscribe-line .form-control{
|
|
||||||
margin: $margin-bottom;
|
|
||||||
}
|
|
||||||
.social-line.pull-right{
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
.footer:not(.footer-big) nav > ul li{
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
.social-area.pull-right{
|
|
||||||
float: none !important;
|
|
||||||
}
|
|
||||||
.form-control + .form-control-feedback{
|
|
||||||
margin-top: -8px;
|
|
||||||
}
|
|
||||||
.navbar-toggle:hover,.navbar-toggle:focus {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.btn.dropdown-toggle{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.media-post .author{
|
|
||||||
width: 20%;
|
|
||||||
float: none !important;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
}
|
|
||||||
.media-post .media-body{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.collapse{
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
.navbar-collapse.collapse.in {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.navbar-header .collapse, .navbar-toggle {
|
|
||||||
display:block !important;
|
|
||||||
}
|
|
||||||
.navbar-header {
|
|
||||||
float:none;
|
|
||||||
}
|
|
||||||
.navbar-collapse{
|
|
||||||
.nav p{
|
|
||||||
font-size: $font-size-base;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="pe-7s-"]{
|
|
||||||
float: left;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px){
|
|
||||||
.footer .container{
|
|
||||||
justify-content: unset;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
nav{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright{
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden-sm{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 768px){
|
|
||||||
.hidden-lg,
|
|
||||||
.hidden-md{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px){
|
|
||||||
.block-md{
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 480px), (max-width: 767px){
|
|
||||||
.form-group{
|
|
||||||
.form-control{
|
|
||||||
width: 83%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-form{
|
|
||||||
.form-group{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px){
|
|
||||||
.table-full-width{
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-right: -20px;
|
|
||||||
}
|
|
||||||
.table-responsive{
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px) {
|
|
||||||
.tim-typo{
|
|
||||||
padding-left: 11% !important;
|
|
||||||
|
|
||||||
.tim-note{
|
|
||||||
bottom: -25px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
.withripple {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.ripple-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: inherit;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
.disabled &{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ripple {
|
|
||||||
position: absolute;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-left: -10px;
|
|
||||||
margin-top: -10px;
|
|
||||||
border-radius: 100%;
|
|
||||||
background-color: #000; // fallback color
|
|
||||||
background-color: rgba(0,0,0,0.05);
|
|
||||||
transform: scale(1);
|
|
||||||
transform-origin: 50%;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.ripple.ripple-on {
|
|
||||||
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
.ripple.ripple-out {
|
|
||||||
transition: opacity 0.1s linear 0s !important;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
@@ -1,138 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
@mixin shadow-z-1(){
|
|
||||||
box-shadow:
|
|
||||||
0 1px 6px 0 rgba(0, 0, 0, 0.12),
|
|
||||||
0 1px 6px 0 rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-z-1-hover(){
|
|
||||||
box-shadow:
|
|
||||||
0 5px 11px 0 rgba(0, 0, 0, 0.18),
|
|
||||||
0 4px 15px 0 rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-z-2(){
|
|
||||||
box-shadow:
|
|
||||||
0 8px 17px 0 rgba(0, 0, 0, 0.2),
|
|
||||||
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-z-3(){
|
|
||||||
box-shadow:
|
|
||||||
0 12px 15px 0 rgba(0, 0, 0, 0.24),
|
|
||||||
0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-z-4(){
|
|
||||||
box-shadow:
|
|
||||||
0 16px 28px 0 rgba(0, 0, 0, 0.22),
|
|
||||||
0 25px 55px 0 rgba(0, 0, 0, 0.21);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-z-5(){
|
|
||||||
box-shadow:
|
|
||||||
0 27px 24px 0 rgba(0, 0, 0, 0.2),
|
|
||||||
0 40px 77px 0 rgba(0, 0, 0, 0.22);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Shadows (from mdl http://www.getmdl.io/) */
|
|
||||||
|
|
||||||
// Focus shadow mixin.
|
|
||||||
@mixin big-shadow(){
|
|
||||||
box-shadow: 0 0 8px rgba(0, 0, 0,.18),
|
|
||||||
0 8px 16px rgba(0, 0, 0,.36);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button-shadow-color($color){
|
|
||||||
box-shadow: 0 14px 26px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 3),
|
|
||||||
0 4px 23px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-2dp(){
|
|
||||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 3px 1px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
|
|
||||||
0 1px 5px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
|
|
||||||
}
|
|
||||||
@mixin shadow-2dp-color($color){
|
|
||||||
box-shadow: 0 2px 2px 0 rgba($color, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 3px 1px -2px rgba($color, $mdb-shadow-key-umbra-opacity),
|
|
||||||
0 1px 5px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-3dp(){
|
|
||||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 3px 3px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
|
|
||||||
0 1px 8px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
|
|
||||||
}
|
|
||||||
@mixin shadow-4dp(){
|
|
||||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 1px 10px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 2px 4px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
@mixin shadow-4dp-color($color){
|
|
||||||
box-shadow: 0 4px 5px 0 rgba($color, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 1px 10px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 2px 4px -1px rgba($color, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
@mixin shadow-6dp(){
|
|
||||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 1px 18px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 3px 5px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
@mixin shadow-8dp(){
|
|
||||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
@mixin shadow-8dp-color($color){
|
|
||||||
box-shadow: 0 8px 10px 1px rgba($color, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 5px 5px -3px rgba($color, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-16dp(){
|
|
||||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-16dp-color($color){
|
|
||||||
box-shadow: 0 16px 24px 2px rgba($color, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-24dp(){
|
|
||||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
|
||||||
0 11px 15px -7px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 24px 38px 3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-big(){
|
|
||||||
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
|
|
||||||
0 4px 25px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-big-navbar(){
|
|
||||||
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
|
|
||||||
0 3px 20px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin shadow-big-color($color){
|
|
||||||
box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2),
|
|
||||||
0 4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
0 7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// shadow backup for Sketch/Photoshop
|
|
||||||
// @mixin shadow-big-color($color){
|
|
||||||
// box-shadow: 0 16px 38px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 4),
|
|
||||||
// 0 4px 25px 0px rgba($color, $mdb-shadow-ambient-shadow-opacity),
|
|
||||||
// 0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
|
|
||||||
// }
|
|
||||||
@@ -1,342 +0,0 @@
|
|||||||
.wrapper:after{
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
content: " ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item{
|
|
||||||
.md-list-item-container{
|
|
||||||
.md-ripple{
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
|
|
||||||
> span{
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper .sidebar,
|
|
||||||
.wrapper .off-canvas-sidebar{
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
@include shadow-big();
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
@extend .animation-transition-general;
|
|
||||||
|
|
||||||
.md-icon.md-theme-default.md-icon-font,
|
|
||||||
.material-icons{
|
|
||||||
color: #fff !important;
|
|
||||||
opacity: .8
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list {
|
|
||||||
&.nav {
|
|
||||||
position: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: transparent !important;
|
|
||||||
|
|
||||||
.md-list-item a{
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item-content{
|
|
||||||
justify-content: flex-start;
|
|
||||||
min-height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .md-list-item-container:hover{
|
|
||||||
background-color: rgba(200, 200, 200, 0.2) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-ripple span .md-ripple-wave{
|
|
||||||
background-color: rgba(200, 200, 200, 0.4) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sidebar-wrapper{
|
|
||||||
position: relative;
|
|
||||||
height: calc(100vh - 75px);
|
|
||||||
overflow: auto;
|
|
||||||
width: 260px;
|
|
||||||
z-index: 4;
|
|
||||||
|
|
||||||
.dropdown .dropdown-backdrop{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-form{
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
[data-toggle="collapse"] ~ div > ul > li > a{
|
|
||||||
padding-left: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caret{
|
|
||||||
margin-top: 13px;
|
|
||||||
position: absolute;
|
|
||||||
right: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-tim{
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #333;
|
|
||||||
display: block;
|
|
||||||
height: 61px;
|
|
||||||
width: 61px;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
&.nav-mobile-menu{
|
|
||||||
li a {
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li{
|
|
||||||
|
|
||||||
a{
|
|
||||||
display: flex;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 10px 15px 0;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
color: $white-color !important;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child > a{
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover > a,
|
|
||||||
.dropdown:hover > a{
|
|
||||||
background: rgba(200, 200, 200, 0.2);
|
|
||||||
color: $black-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
|
|
||||||
.md-ripple i{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.router-link-active p {
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
margin: 0;
|
|
||||||
line-height: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
font-weight: $font-weight-light;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
i{
|
|
||||||
font-size: 24px !important;
|
|
||||||
float: left;
|
|
||||||
margin-right: 15px !important;
|
|
||||||
margin-left: 0;
|
|
||||||
line-height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
text-align: center;
|
|
||||||
color: #a9afbb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo{
|
|
||||||
position: relative;
|
|
||||||
padding: $padding-base 0;
|
|
||||||
z-index: 4;
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 15px;
|
|
||||||
height: 1px;
|
|
||||||
width: calc(100% - 30px);
|
|
||||||
background-color: rgba(180,180,180, .3);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
float: left;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 10px 10px;
|
|
||||||
color: $white-color;
|
|
||||||
line-height: 20px;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-mini{
|
|
||||||
float: left;
|
|
||||||
width: 40px;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 25px;
|
|
||||||
margin-right: 11px;
|
|
||||||
position: relative;
|
|
||||||
top: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-text{
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: $padding-small-vertical $padding-zero;
|
|
||||||
display: block;
|
|
||||||
font-size: $font-size-large;
|
|
||||||
font-weight: $font-weight-default;
|
|
||||||
line-height: 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-img{
|
|
||||||
width: 40px;
|
|
||||||
display: inline-block;
|
|
||||||
height: 40px;
|
|
||||||
background: $white-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
@include shadow-big();
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 55%;
|
|
||||||
vertical-align: -webkit-baseline-middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-tim{
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #333;
|
|
||||||
display: block;
|
|
||||||
height: 61px;
|
|
||||||
width: 61px;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(27, 27, 27, 0.87);
|
|
||||||
opacity: .85;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-color="blue"]{
|
|
||||||
@include set-background-color-button($brand-info);
|
|
||||||
}
|
|
||||||
&[data-color="green"]{
|
|
||||||
@include set-background-color-button($brand-success);
|
|
||||||
}
|
|
||||||
&[data-color="orange"]{
|
|
||||||
@include set-background-color-button($brand-warning);
|
|
||||||
}
|
|
||||||
&[data-color="red"]{
|
|
||||||
@include set-background-color-button($brand-danger);
|
|
||||||
}
|
|
||||||
&[data-color="purple"]{
|
|
||||||
@include set-background-color-button($brand-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-sidebar{
|
|
||||||
.nav {
|
|
||||||
> li > a,
|
|
||||||
> li > a:hover{
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
> li > a:focus{
|
|
||||||
background: rgba(200, 200, 200, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.perfect-scrollbar-on{
|
|
||||||
.sidebar,
|
|
||||||
.main-panel{
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel{
|
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
width: $sidebar-width;
|
|
||||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
|
||||||
|
|
||||||
> .content{
|
|
||||||
padding: 30px 15px;
|
|
||||||
min-height: calc(100vh - 123px);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .footer{
|
|
||||||
border-top: 1px solid #e7e7e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .navbar{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .sidebar,
|
|
||||||
// .main-panel{
|
|
||||||
// -webkit-transition-property: top,bottom;
|
|
||||||
// transition-property: top,bottom;
|
|
||||||
// -webkit-transition-duration: .2s,.2s;
|
|
||||||
// transition-duration: .2s,.2s;
|
|
||||||
// -webkit-transition-timing-function: linear,linear;
|
|
||||||
// transition-timing-function: linear,linear;
|
|
||||||
// -webkit-overflow-scrolling: touch;
|
|
||||||
// }
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
.md-table-cell-container{
|
|
||||||
padding: 0;
|
|
||||||
.md-table-cell:last-child &{
|
|
||||||
padding-right: 0;
|
|
||||||
text-align: right;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.md-table-head-container{
|
|
||||||
height: auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.md-tabs-content table thead{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-tabs-container tbody .md-table-row:first-child td{
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-table-cell{
|
|
||||||
padding: 12px 8px;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-table-head-label{
|
|
||||||
font-size: $font-size-h5;
|
|
||||||
padding-left: 8px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-table .md-table-row:hover .md-table-cell{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-table .md-table-row:hover{
|
|
||||||
background: $table-bg-hover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-card-plain .md-card-content > div .md-table .md-table-content,
|
|
||||||
.md-card-plain .md-card-content > div .md-table {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-table{
|
|
||||||
&[table-header-color="orange"] .md-table-head{
|
|
||||||
color: $brand-warning !important;
|
|
||||||
}
|
|
||||||
&[table-header-color="purple"] .md-table-head{
|
|
||||||
color: $brand-primary !important;
|
|
||||||
}
|
|
||||||
&[table-header-color="blue"] .md-table-head{
|
|
||||||
color: $brand-info !important;
|
|
||||||
}
|
|
||||||
&[table-header-color="red"] .md-table-head{
|
|
||||||
color: $brand-danger !important;
|
|
||||||
}
|
|
||||||
&[table-header-color="green"] .md-table-head{
|
|
||||||
color: $brand-success !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-table-row td{
|
|
||||||
border-top-color: rgba(0,0,0,.06) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
.md-tabs-navigation{
|
|
||||||
@include shadow-big();
|
|
||||||
margin: -35px 0 0;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
padding: $padding-base $padding-base $padding-base 75px;
|
|
||||||
background-color: $gray-color;
|
|
||||||
|
|
||||||
.md-icon-label .md-button-content{
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .md-tabs-content{
|
|
||||||
.md-checkbox.md-checked .md-checkbox-container:after{
|
|
||||||
top: 0px;
|
|
||||||
left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-button,
|
|
||||||
.md-button:hover,
|
|
||||||
.md-button:focus,
|
|
||||||
.md-button:active {
|
|
||||||
background-color: transparent !important;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-active,
|
|
||||||
.md-active:hover,
|
|
||||||
.md-active:focus{
|
|
||||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-icon-label{
|
|
||||||
height: auto;
|
|
||||||
border-radius: 3px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
&:not(:last-child){
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-tab-icon + .md-tab-label{
|
|
||||||
margin-top: 1px;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-ripple{
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-tabs-indicator{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-nav-tabs-title{
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999;
|
|
||||||
top: 6px;
|
|
||||||
color: white;
|
|
||||||
font-size: initial;
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-tab{
|
|
||||||
padding: 15px 0 0 0;
|
|
||||||
}
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
.togglebutton {
|
|
||||||
vertical-align: middle;
|
|
||||||
&, label, input, .toggle {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
cursor: pointer;
|
|
||||||
color: $mdb-toggle-label-color;
|
|
||||||
@include mdb-label-color-toggle-focus();
|
|
||||||
|
|
||||||
// Hide original checkbox
|
|
||||||
input[type=checkbox] {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
text-align: left; // Issue #737 horizontal form
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
// Switch bg off and disabled
|
|
||||||
.toggle,
|
|
||||||
input[type=checkbox][disabled] + .toggle {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 30px;
|
|
||||||
height: 15px;
|
|
||||||
background-color: rgba(80, 80, 80, 0.7);
|
|
||||||
border-radius: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
// Handle off
|
|
||||||
.toggle:after {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 20px;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
|
||||||
left: -5px;
|
|
||||||
top: -3px;
|
|
||||||
border: 1px solid $mdb-checkbox-border-color;
|
|
||||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
|
||||||
}
|
|
||||||
input[type=checkbox] {
|
|
||||||
// Handle disabled
|
|
||||||
&[disabled] {
|
|
||||||
& + .toggle:after,
|
|
||||||
&:checked + .toggle:after {
|
|
||||||
background-color: #BDBDBD;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .toggle:active:after,
|
|
||||||
&[disabled] + .toggle:active:after {
|
|
||||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ripple off and disabled
|
|
||||||
&:checked + .toggle:after {
|
|
||||||
left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// set bg when checked
|
|
||||||
input[type=checkbox]:checked {
|
|
||||||
+ .toggle {
|
|
||||||
background-color: rgba($brand-primary, (70*0.01)); // Switch bg on
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .toggle:after {
|
|
||||||
border-color: $brand-primary; // Handle on
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .toggle:active:after {
|
|
||||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10*0.01)); // Ripple on
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
|
||||||
font-family: $font-family-sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,h2,h3,.h1,.h2,.h3{
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4,h5,h6,.h4,.h5,.h6{
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, .h1 {
|
|
||||||
font-size: $font-size-h1;
|
|
||||||
line-height: 1.15em;
|
|
||||||
}
|
|
||||||
h2, .h2{
|
|
||||||
font-size: $font-size-h2;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
h3, .h3{
|
|
||||||
font-size: $font-size-h3;
|
|
||||||
line-height: 1.4em;
|
|
||||||
}
|
|
||||||
h4, .h4{
|
|
||||||
font-size: $font-size-h4;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
h5, .h5 {
|
|
||||||
font-size: $font-size-h5;
|
|
||||||
line-height: 1.55em;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
h6, .h6{
|
|
||||||
font-size: $font-size-h6;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: $font-weight-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
font-size: $font-paragraph;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2.title{
|
|
||||||
margin-bottom: $margin-base * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description,
|
|
||||||
.card-description,
|
|
||||||
.footer-big p{
|
|
||||||
color: $gray-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-warning {
|
|
||||||
color: $brand-warning !important;
|
|
||||||
}
|
|
||||||
.text-primary {
|
|
||||||
color: $brand-primary !important;
|
|
||||||
}
|
|
||||||
.text-danger {
|
|
||||||
color: $brand-danger !important;
|
|
||||||
}
|
|
||||||
.text-success {
|
|
||||||
color: $brand-success !important;
|
|
||||||
}
|
|
||||||
.text-info {
|
|
||||||
color: $brand-info !important;
|
|
||||||
}
|
|
||||||
.text-gray{
|
|
||||||
color: $gray-color !important;
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
// Scales for responsive SVG containers
|
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
$ct-scales: ((1), math.div(15, 16), math.div(8, 9), math.div(5, 6), (4*0.2), (3*0.25), math.div(2, 3), (5*0.125), math.div(1, 1.618), (3*0.2), math.div(9, 16), math.div(8, 15), (1*0.5), (2*0.2), (3*0.125), math.div(1, 3), (1*0.25)) !default;
|
|
||||||
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
|
|
||||||
|
|
||||||
// Class names to be used when generating CSS
|
|
||||||
$ct-class-chart: ct-chart !default;
|
|
||||||
$ct-class-chart-line: ct-chart-line !default;
|
|
||||||
$ct-class-chart-bar: ct-chart-bar !default;
|
|
||||||
$ct-class-horizontal-bars: ct-horizontal-bars !default;
|
|
||||||
$ct-class-chart-pie: ct-chart-pie !default;
|
|
||||||
$ct-class-chart-donut: ct-chart-donut !default;
|
|
||||||
$ct-class-label: ct-label !default;
|
|
||||||
$ct-class-series: ct-series !default;
|
|
||||||
$ct-class-line: ct-line !default;
|
|
||||||
$ct-class-point: ct-point !default;
|
|
||||||
$ct-class-area: ct-area !default;
|
|
||||||
$ct-class-bar: ct-bar !default;
|
|
||||||
$ct-class-slice-pie: ct-slice-pie !default;
|
|
||||||
$ct-class-slice-donut: ct-slice-donut !default;
|
|
||||||
$ct-class-grid: ct-grid !default;
|
|
||||||
$ct-class-vertical: ct-vertical !default;
|
|
||||||
$ct-class-horizontal: ct-horizontal !default;
|
|
||||||
$ct-class-start: ct-start !default;
|
|
||||||
$ct-class-end: ct-end !default;
|
|
||||||
|
|
||||||
// Container ratio
|
|
||||||
$ct-container-ratio: math.div(1, 1.618) !default;
|
|
||||||
|
|
||||||
// Text styles for labels
|
|
||||||
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
|
|
||||||
$ct-text-size: 0.875rem !default;
|
|
||||||
$ct-text-align: flex-start !default;
|
|
||||||
$ct-text-justify: flex-start !default;
|
|
||||||
$ct-text-line-height: 1;
|
|
||||||
|
|
||||||
.ct-big-chart-white{
|
|
||||||
$ct-grid-color: rgba(250, 250, 250, 0.7) !default;
|
|
||||||
}
|
|
||||||
// Grid styles
|
|
||||||
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
|
|
||||||
$ct-grid-dasharray: 2px !default;
|
|
||||||
$ct-grid-width: 1px !default;
|
|
||||||
|
|
||||||
// Line chart properties
|
|
||||||
$ct-line-width: 3px !default;
|
|
||||||
$ct-line-dasharray: false !default;
|
|
||||||
$ct-point-size: 8px !default;
|
|
||||||
// Line chart point, can be either round or square
|
|
||||||
$ct-point-shape: round !default;
|
|
||||||
// Area fill transparency between 0 and 1
|
|
||||||
$ct-area-opacity: 0.8 !default;
|
|
||||||
|
|
||||||
// Bar chart bar width
|
|
||||||
$ct-bar-width: 10px !default;
|
|
||||||
|
|
||||||
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
|
|
||||||
$ct-donut-width: 60px !default;
|
|
||||||
|
|
||||||
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
|
|
||||||
// should set this property to false
|
|
||||||
$ct-include-classes: true !default;
|
|
||||||
|
|
||||||
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
|
|
||||||
// properties below
|
|
||||||
$ct-include-colored-series: $ct-include-classes !default;
|
|
||||||
|
|
||||||
// If set to true this will include all responsive container variations using the scales defined at the top of the script
|
|
||||||
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
|
|
||||||
|
|
||||||
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
|
|
||||||
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
|
|
||||||
$ct-series-colors: (
|
|
||||||
|
|
||||||
$brand-info,
|
|
||||||
$brand-danger,
|
|
||||||
$brand-warning,
|
|
||||||
$brand-primary,
|
|
||||||
$brand-success,
|
|
||||||
$font-background-light-grey,
|
|
||||||
$gray-color,
|
|
||||||
$social-google,
|
|
||||||
$social-tumblr,
|
|
||||||
$social-youtube,
|
|
||||||
$social-twitter,
|
|
||||||
$social-pinterest,
|
|
||||||
$social-behance,
|
|
||||||
#6188e2,
|
|
||||||
#a748ca
|
|
||||||
) !default;
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
// Opacity
|
|
||||||
|
|
||||||
@mixin opacity($opacity) {
|
|
||||||
opacity: $opacity;
|
|
||||||
// IE8 filter
|
|
||||||
$opacity-ie: ($opacity * 100);
|
|
||||||
filter: #{alpha(opacity=$opacity-ie)};
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin black-filter($opacity){
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
background-color: rgba(17,17,17,$opacity);
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
@@ -1,176 +0,0 @@
|
|||||||
// User select
|
|
||||||
// For selecting text on the page
|
|
||||||
|
|
||||||
@mixin user-select($select) {
|
|
||||||
-webkit-user-select: $select;
|
|
||||||
-moz-user-select: $select;
|
|
||||||
-ms-user-select: $select; // IE10+
|
|
||||||
user-select: $select;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin box-shadow($shadow...) {
|
|
||||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
|
||||||
box-shadow: $shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Box sizing
|
|
||||||
@mixin box-sizing($boxmodel) {
|
|
||||||
-webkit-box-sizing: $boxmodel;
|
|
||||||
-moz-box-sizing: $boxmodel;
|
|
||||||
box-sizing: $boxmodel;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@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 transform-scale($value){
|
|
||||||
-webkit-transform: scale($value);
|
|
||||||
-moz-transform: scale($value);
|
|
||||||
-o-transform: scale($value);
|
|
||||||
-ms-transform: scale($value);
|
|
||||||
transform: scale($value);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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-origin($coordinates){
|
|
||||||
-webkit-transform-origin: $coordinates;
|
|
||||||
-moz-transform-origin: $coordinates;
|
|
||||||
-o-transform-origin: $coordinates;
|
|
||||||
-ms-transform-origin: $coordinates;
|
|
||||||
transform-origin: $coordinates;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin radial-gradient($extern-color, $center-color){
|
|
||||||
background: $extern-color;
|
|
||||||
background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
|
|
||||||
background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
|
|
||||||
background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
|
|
||||||
background-size: 550% 450%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin vertical-align {
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-ms-transform: translateY(-50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin rotate-180(){
|
|
||||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
|
||||||
-webkit-transform: rotate(180deg);
|
|
||||||
-ms-transform: rotate(180deg);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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);}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
/* perfect-scrollbar v0.6.13 */
|
|
||||||
.ps-container {
|
|
||||||
-ms-touch-action: auto;
|
|
||||||
touch-action: auto;
|
|
||||||
overflow: hidden !important;
|
|
||||||
-ms-overflow-style: none; }
|
|
||||||
@supports (-ms-overflow-style: none) {
|
|
||||||
.ps-container {
|
|
||||||
overflow: auto !important; } }
|
|
||||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
||||||
.ps-container {
|
|
||||||
overflow: auto !important; } }
|
|
||||||
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
|
|
||||||
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
|
|
||||||
display: block;
|
|
||||||
background-color: transparent; }
|
|
||||||
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
|
|
||||||
background-color: #eee;
|
|
||||||
opacity: 0.9; }
|
|
||||||
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
|
||||||
background-color: #999;
|
|
||||||
height: 11px; }
|
|
||||||
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
|
|
||||||
background-color: #eee;
|
|
||||||
opacity: 0.9; }
|
|
||||||
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
|
||||||
background-color: #999;
|
|
||||||
width: 11px; }
|
|
||||||
.ps-container > .ps-scrollbar-x-rail {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
/* please don't change 'position' */
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
bottom: 0px;
|
|
||||||
/* there must be 'bottom' for ps-scrollbar-x-rail */
|
|
||||||
height: 15px; }
|
|
||||||
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
|
||||||
position: absolute;
|
|
||||||
/* please don't change 'position' */
|
|
||||||
background-color: #aaa;
|
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
-moz-border-radius: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
|
||||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
|
||||||
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
|
||||||
-moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
|
||||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
|
||||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
|
||||||
bottom: 2px;
|
|
||||||
/* there must be 'bottom' for ps-scrollbar-x */
|
|
||||||
height: 6px; }
|
|
||||||
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
|
|
||||||
height: 11px; }
|
|
||||||
.ps-container > .ps-scrollbar-y-rail {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
/* please don't change 'position' */
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
transition: background-color .2s linear, opacity .2s linear;
|
|
||||||
right: 0;
|
|
||||||
/* there must be 'right' for ps-scrollbar-y-rail */
|
|
||||||
width: 15px; }
|
|
||||||
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
|
||||||
position: absolute;
|
|
||||||
/* please don't change 'position' */
|
|
||||||
background-color: #aaa;
|
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
-moz-border-radius: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
|
||||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
|
||||||
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
|
||||||
-moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
|
||||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
|
||||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
|
||||||
right: 2px;
|
|
||||||
/* there must be 'right' for ps-scrollbar-y */
|
|
||||||
width: 6px; }
|
|
||||||
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
|
|
||||||
width: 11px; }
|
|
||||||
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
|
|
||||||
background-color: #eee;
|
|
||||||
opacity: 0.9; }
|
|
||||||
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
|
||||||
background-color: #999;
|
|
||||||
height: 11px; }
|
|
||||||
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
|
|
||||||
background-color: #eee;
|
|
||||||
opacity: 0.9; }
|
|
||||||
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
|
||||||
background-color: #999;
|
|
||||||
width: 11px; }
|
|
||||||
.ps-container:hover > .ps-scrollbar-x-rail,
|
|
||||||
.ps-container:hover > .ps-scrollbar-y-rail {
|
|
||||||
opacity: 0.6; }
|
|
||||||
.ps-container:hover > .ps-scrollbar-x-rail:hover {
|
|
||||||
background-color: #eee;
|
|
||||||
opacity: 0.9; }
|
|
||||||
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
|
|
||||||
background-color: #999; }
|
|
||||||
.ps-container:hover > .ps-scrollbar-y-rail:hover {
|
|
||||||
background-color: #eee;
|
|
||||||
opacity: 0.9; }
|
|
||||||
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
|
|
||||||
background-color: #999; }
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
<template>
|
|
||||||
<md-card>
|
|
||||||
<md-card-header
|
|
||||||
class="card-chart"
|
|
||||||
:data-background-color="dataBackgroundColor"
|
|
||||||
>
|
|
||||||
<div :id="chartId" class="ct-chart"></div>
|
|
||||||
</md-card-header>
|
|
||||||
|
|
||||||
<md-card-content>
|
|
||||||
<slot name="content"></slot>
|
|
||||||
</md-card-content>
|
|
||||||
|
|
||||||
<md-card-actions md-alignment="left">
|
|
||||||
<slot name="footer"></slot>
|
|
||||||
</md-card-actions>
|
|
||||||
</md-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "chart-card",
|
|
||||||
props: {
|
|
||||||
footerText: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
headerTitle: {
|
|
||||||
type: String,
|
|
||||||
default: "Chart title",
|
|
||||||
},
|
|
||||||
chartType: {
|
|
||||||
type: String,
|
|
||||||
default: "Line", // Line | Pie | Bar
|
|
||||||
},
|
|
||||||
chartOptions: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
chartResponsiveOptions: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
chartData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
labels: [],
|
|
||||||
series: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataBackgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartId: "no-id",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/***
|
|
||||||
* Initializes the chart by merging the chart options sent via props and the default chart options
|
|
||||||
*/
|
|
||||||
initChart(Chartist) {
|
|
||||||
var chartIdQuery = `#${this.chartId}`;
|
|
||||||
Chartist[this.chartType](chartIdQuery, this.chartData, this.chartOptions);
|
|
||||||
},
|
|
||||||
/***
|
|
||||||
* Assigns a random id to the chart
|
|
||||||
*/
|
|
||||||
updateChartId() {
|
|
||||||
var currentTime = new Date().getTime().toString();
|
|
||||||
var randomInt = this.getRandomInt(0, currentTime);
|
|
||||||
this.chartId = `div_${randomInt}`;
|
|
||||||
},
|
|
||||||
getRandomInt(min, max) {
|
|
||||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.updateChartId();
|
|
||||||
import("chartist").then((Chartist) => {
|
|
||||||
let ChartistLib = Chartist.default || Chartist;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart(ChartistLib);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<md-card class="md-card-nav-tabs">
|
|
||||||
<md-card-content>
|
|
||||||
<slot name="content"></slot>
|
|
||||||
</md-card-content>
|
|
||||||
</md-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "nav-tabs-card",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<md-card class="md-card-stats">
|
|
||||||
<md-card-header :data-background-color="dataBackgroundColor">
|
|
||||||
<slot name="header"></slot>
|
|
||||||
</md-card-header>
|
|
||||||
|
|
||||||
<md-card-content>
|
|
||||||
<slot name="content"></slot>
|
|
||||||
</md-card-content>
|
|
||||||
|
|
||||||
<md-card-actions md-alignment="left">
|
|
||||||
<slot name="footer"></slot>
|
|
||||||
</md-card-actions>
|
|
||||||
</md-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "stats-card",
|
|
||||||
props: {
|
|
||||||
dataBackgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="dropdown"
|
|
||||||
:class="{ open: isOpen }"
|
|
||||||
@click="toggleDropDown"
|
|
||||||
v-click-outside="closeDropDown"
|
|
||||||
>
|
|
||||||
<slot name="title">
|
|
||||||
<a
|
|
||||||
class="dropdown-toggle"
|
|
||||||
data-toggle="dropdown"
|
|
||||||
href="javascript:void(0)"
|
|
||||||
>
|
|
||||||
<i :class="icon"></i>
|
|
||||||
<p class="notification">
|
|
||||||
{{ title }}
|
|
||||||
<b class="caret"></b>
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</slot>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "drop-down",
|
|
||||||
props: {
|
|
||||||
title: String,
|
|
||||||
icon: String,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isOpen: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleDropDown() {
|
|
||||||
this.isOpen = !this.isOpen;
|
|
||||||
},
|
|
||||||
closeDropDown() {
|
|
||||||
this.isOpen = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
@click="close()"
|
|
||||||
data-notify="container"
|
|
||||||
class="alert open alert-with-icon"
|
|
||||||
role="alert"
|
|
||||||
:class="[verticalAlign, horizontalAlign, alertType]"
|
|
||||||
:style="customPosition"
|
|
||||||
data-notify-position="top-center"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-hidden="true"
|
|
||||||
class="close"
|
|
||||||
data-notify="dismiss"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
<i data-notify="icon" class="material-icons">{{ icon }}</i>
|
|
||||||
<span data-notify="message" v-html="message"></span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "notification",
|
|
||||||
props: {
|
|
||||||
message: String,
|
|
||||||
icon: String,
|
|
||||||
verticalAlign: {
|
|
||||||
type: String,
|
|
||||||
default: "top",
|
|
||||||
},
|
|
||||||
horizontalAlign: {
|
|
||||||
type: String,
|
|
||||||
default: "center",
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: "info",
|
|
||||||
},
|
|
||||||
timeout: {
|
|
||||||
type: Number,
|
|
||||||
default: 2500,
|
|
||||||
},
|
|
||||||
timestamp: {
|
|
||||||
type: Date,
|
|
||||||
default: () => new Date(),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
elmHeight: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
hasIcon() {
|
|
||||||
return this.icon && this.icon.length > 0;
|
|
||||||
},
|
|
||||||
alertType() {
|
|
||||||
return `alert-${this.type}`;
|
|
||||||
},
|
|
||||||
customPosition() {
|
|
||||||
let initialMargin = 20;
|
|
||||||
let alertHeight = this.elmHeight + 10;
|
|
||||||
let sameAlertsCount = this.$notifications.state.filter((alert) => {
|
|
||||||
return (
|
|
||||||
alert.horizontalAlign === this.horizontalAlign &&
|
|
||||||
alert.verticalAlign === this.verticalAlign &&
|
|
||||||
alert.timestamp <= this.timestamp
|
|
||||||
);
|
|
||||||
}).length;
|
|
||||||
let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
|
|
||||||
let styles = {};
|
|
||||||
if (this.verticalAlign === "top") {
|
|
||||||
styles.top = `${pixels}px`;
|
|
||||||
} else {
|
|
||||||
styles.bottom = `${pixels}px`;
|
|
||||||
}
|
|
||||||
return styles;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
close() {
|
|
||||||
this.$emit("on-close", this.timestamp);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.elmHeight = this.$el.clientHeight;
|
|
||||||
if (this.timeout) {
|
|
||||||
setTimeout(this.close, this.timeout);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@media screen and (max-width: 991px) {
|
|
||||||
.alert {
|
|
||||||
width: auto !important;
|
|
||||||
margin: 0 10px;
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
left: 0 !important;
|
|
||||||
}
|
|
||||||
&.right {
|
|
||||||
right: 0 !important;
|
|
||||||
}
|
|
||||||
&.center {
|
|
||||||
margin: 0 10px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
z-index: 100;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
width: 41%;
|
|
||||||
|
|
||||||
&.center {
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
&.left {
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
&.right {
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="notifications">
|
|
||||||
<transition-group name="list">
|
|
||||||
<notification
|
|
||||||
v-for="notification in notifications"
|
|
||||||
:key="notification.timestamp.getTime()"
|
|
||||||
:message="notification.message"
|
|
||||||
:icon="notification.icon"
|
|
||||||
:type="notification.type"
|
|
||||||
:timestamp="notification.timestamp"
|
|
||||||
:vertical-align="notification.verticalAlign"
|
|
||||||
:horizontal-align="notification.horizontalAlign"
|
|
||||||
@on-close="removeNotification"
|
|
||||||
>
|
|
||||||
</notification>
|
|
||||||
</transition-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Notification from "./Notification.vue";
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Notification,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
notifications: this.$notifications.state,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
removeNotification(timestamp) {
|
|
||||||
this.$notifications.removeNotification(timestamp);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.list-move {
|
|
||||||
transition: transform 0.3s, opacity 0.4s;
|
|
||||||
}
|
|
||||||
.list-item {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.list-enter-active,
|
|
||||||
.list-leave-active {
|
|
||||||
transition: opacity 0.4s;
|
|
||||||
}
|
|
||||||
.list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
import Notifications from "./Notifications.vue";
|
|
||||||
|
|
||||||
const NotificationStore = {
|
|
||||||
state: [], // here the notifications will be added
|
|
||||||
|
|
||||||
removeNotification(timestamp) {
|
|
||||||
const indexToDelete = this.state.findIndex(
|
|
||||||
(n) => n.timestamp === timestamp
|
|
||||||
);
|
|
||||||
if (indexToDelete !== -1) {
|
|
||||||
this.state.splice(indexToDelete, 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
addNotification(notification) {
|
|
||||||
notification.timestamp = new Date();
|
|
||||||
notification.timestamp.setMilliseconds(
|
|
||||||
notification.timestamp.getMilliseconds() + this.state.length
|
|
||||||
);
|
|
||||||
this.state.push(notification);
|
|
||||||
},
|
|
||||||
notify(notification) {
|
|
||||||
if (Array.isArray(notification)) {
|
|
||||||
notification.forEach((notificationInstance) => {
|
|
||||||
this.addNotification(notificationInstance);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.addNotification(notification);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
var NotificationsPlugin = {
|
|
||||||
install(Vue) {
|
|
||||||
Vue.mixin({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
notificationStore: NotificationStore,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notify(notification) {
|
|
||||||
this.notificationStore.notify(notification);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Object.defineProperty(Vue.prototype, "$notify", {
|
|
||||||
get() {
|
|
||||||
return this.$root.notify;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Object.defineProperty(Vue.prototype, "$notifications", {
|
|
||||||
get() {
|
|
||||||
return this.$root.notificationStore;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Vue.component("Notifications", Notifications);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NotificationsPlugin;
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="sidebar"
|
|
||||||
:data-color="sidebarItemColor"
|
|
||||||
:data-image="sidebarBackgroundImage"
|
|
||||||
:style="sidebarStyle"
|
|
||||||
>
|
|
||||||
<div class="logo">
|
|
||||||
<a href="#" class="simple-text logo-mini">
|
|
||||||
<div class="logo-img">
|
|
||||||
<img :src="imgLogo" alt="" />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com/product/vue-material-dashboard"
|
|
||||||
target="_blank"
|
|
||||||
class="simple-text logo-normal"
|
|
||||||
>
|
|
||||||
{{ title }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-wrapper">
|
|
||||||
<slot name="content"></slot>
|
|
||||||
<md-list class="nav">
|
|
||||||
<!--By default vue-router adds an active class to each route link. This way the links are colored when clicked-->
|
|
||||||
<slot>
|
|
||||||
<sidebar-link
|
|
||||||
v-for="(link, index) in sidebarLinks"
|
|
||||||
:key="link.name + index"
|
|
||||||
:to="link.path"
|
|
||||||
:link="link"
|
|
||||||
>
|
|
||||||
</sidebar-link>
|
|
||||||
</slot>
|
|
||||||
</md-list>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import SidebarLink from "./SidebarLink.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
SidebarLink,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: "Vue MD",
|
|
||||||
},
|
|
||||||
sidebarBackgroundImage: {
|
|
||||||
type: String,
|
|
||||||
default: require("@/assets/img/sidebar-2.jpg"),
|
|
||||||
},
|
|
||||||
imgLogo: {
|
|
||||||
type: String,
|
|
||||||
default: require("@/assets/img/vue-logo.png"),
|
|
||||||
},
|
|
||||||
sidebarItemColor: {
|
|
||||||
type: String,
|
|
||||||
default: "green",
|
|
||||||
validator: (value) => {
|
|
||||||
let acceptedValues = ["", "purple", "blue", "green", "orange", "red"];
|
|
||||||
return acceptedValues.indexOf(value) !== -1;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
sidebarLinks: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
autoClose: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
autoClose: this.autoClose,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
sidebarStyle() {
|
|
||||||
return {
|
|
||||||
backgroundImage: `url(${this.sidebarBackgroundImage})`,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
@media screen and (min-width: 991px) {
|
|
||||||
.nav-mobile-menu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<li class="md-list-item">
|
|
||||||
<router-link
|
|
||||||
class="md-list-item-router md-list-item-container md-button-clean"
|
|
||||||
@click="hideSidebar"
|
|
||||||
v-bind="$attrs"
|
|
||||||
>
|
|
||||||
<div class="md-list-item-content md-ripple">
|
|
||||||
<slot>
|
|
||||||
<md-icon>{{ link.icon }}</md-icon>
|
|
||||||
<p>{{ link.name }}</p>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
inject: {
|
|
||||||
autoClose: {
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
link: {
|
|
||||||
type: [String, Object],
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
name: "",
|
|
||||||
path: "",
|
|
||||||
icon: "",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tag: {
|
|
||||||
type: String,
|
|
||||||
default: "router-link",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
hideSidebar() {
|
|
||||||
if (
|
|
||||||
this.autoClose &&
|
|
||||||
this.$sidebar &&
|
|
||||||
this.$sidebar.showSidebar === true
|
|
||||||
) {
|
|
||||||
this.$sidebar.displaySidebar(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import Sidebar from "./SideBar.vue";
|
|
||||||
import SidebarLink from "./SidebarLink.vue";
|
|
||||||
|
|
||||||
const SidebarStore = {
|
|
||||||
showSidebar: false,
|
|
||||||
displaySidebar(value) {
|
|
||||||
this.showSidebar = value;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const SidebarPlugin = {
|
|
||||||
install(Vue) {
|
|
||||||
Vue.mixin({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sidebarStore: SidebarStore,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.defineProperty(Vue.prototype, "$sidebar", {
|
|
||||||
get() {
|
|
||||||
return this.$root.sidebarStore;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Vue.component("side-bar", Sidebar);
|
|
||||||
Vue.component("sidebar-link", SidebarLink);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SidebarPlugin;
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<md-table v-model="users" @md-selected="onSelect">
|
|
||||||
<md-table-row
|
|
||||||
slot="md-table-row"
|
|
||||||
slot-scope="{ item }"
|
|
||||||
md-selectable="multiple"
|
|
||||||
md-auto-select
|
|
||||||
>
|
|
||||||
<md-table-cell>{{ item.name }}</md-table-cell>
|
|
||||||
<md-table-cell>
|
|
||||||
<md-button class="md-just-icon md-simple md-primary">
|
|
||||||
<md-icon>edit</md-icon>
|
|
||||||
<md-tooltip md-direction="top">Edit</md-tooltip>
|
|
||||||
</md-button>
|
|
||||||
<md-button class="md-just-icon md-simple md-danger">
|
|
||||||
<md-icon>close</md-icon>
|
|
||||||
<md-tooltip md-direction="top">Close</md-tooltip>
|
|
||||||
</md-button>
|
|
||||||
</md-table-cell>
|
|
||||||
</md-table-row>
|
|
||||||
</md-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "nav-tabs-table",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selected: [],
|
|
||||||
users: [
|
|
||||||
{
|
|
||||||
name: 'Sign contract for "What are conference organizers afraid of?"',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Lines From Great Russian Literature? Or E-mails From My Boss?",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSelect: function (items) {
|
|
||||||
this.selected = items;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<md-table v-model="users" :table-header-color="tableHeaderColor">
|
|
||||||
<md-table-row slot="md-table-row" slot-scope="{ item }">
|
|
||||||
<md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="Name">{{ item.name }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="Salary">{{ item.salary }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="Country">{{ item.country }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="City">{{ item.city }}</md-table-cell>
|
|
||||||
</md-table-row>
|
|
||||||
</md-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "ordered-table",
|
|
||||||
props: {
|
|
||||||
tableHeaderColor: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selected: [],
|
|
||||||
users: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "Dakota Rice",
|
|
||||||
salary: "$36,738",
|
|
||||||
country: "Niger",
|
|
||||||
city: "Oud-Turnhout",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "Minerva Hooper",
|
|
||||||
salary: "$23,738",
|
|
||||||
country: "Curaçao",
|
|
||||||
city: "Sinaai-Waas",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "Sage Rodriguez",
|
|
||||||
salary: "$56,142",
|
|
||||||
country: "Netherlands",
|
|
||||||
city: "Overland Park",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: "Philip Chaney",
|
|
||||||
salary: "$38,735",
|
|
||||||
country: "Korea, South",
|
|
||||||
city: "Gloucester",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<md-table v-model="users" :table-header-color="tableHeaderColor">
|
|
||||||
<md-table-row slot="md-table-row" slot-scope="{ item }">
|
|
||||||
<md-table-cell md-label="Name">{{ item.name }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="Country">{{ item.country }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="City">{{ item.city }}</md-table-cell>
|
|
||||||
<md-table-cell md-label="Salary">{{ item.salary }}</md-table-cell>
|
|
||||||
</md-table-row>
|
|
||||||
</md-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "simple-table",
|
|
||||||
props: {
|
|
||||||
tableHeaderColor: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selected: [],
|
|
||||||
users: [
|
|
||||||
{
|
|
||||||
name: "Dakota Rice",
|
|
||||||
salary: "$36,738",
|
|
||||||
country: "Niger",
|
|
||||||
city: "Oud-Turnhout",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Minerva Hooper",
|
|
||||||
salary: "$23,738",
|
|
||||||
country: "Curaçao",
|
|
||||||
city: "Sinaai-Waas",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sage Rodriguez",
|
|
||||||
salary: "$56,142",
|
|
||||||
country: "Netherlands",
|
|
||||||
city: "Overland Park",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Philip Chaney",
|
|
||||||
salary: "$38,735",
|
|
||||||
country: "Korea, South",
|
|
||||||
city: "Gloucester",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Doris Greene",
|
|
||||||
salary: "$63,542",
|
|
||||||
country: "Malawi",
|
|
||||||
city: "Feldkirchen in Kārnten",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Mason Porter",
|
|
||||||
salary: "$78,615",
|
|
||||||
country: "Chile",
|
|
||||||
city: "Gloucester",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||