Nahozeni sablony na backend, nasazeni ejs, aktualizace Bootstrapu
This commit is contained in:
Michal Kváček
@@ -0,0 +1,131 @@
|
||||
// appends styles
|
||||
var linkElement = document.createElement ("link");
|
||||
linkElement.rel = "stylesheet";
|
||||
linkElement.href = "/assets/dist/css/fullcalendar.css";
|
||||
document.head.appendChild (linkElement);
|
||||
|
||||
|
||||
|
||||
$ (window).resize (function () {
|
||||
var w = $ (this).width ();
|
||||
|
||||
if (w < 920) {
|
||||
$ ('#calendar').fullCalendar ('changeView', 'agendaWeek');
|
||||
} else {
|
||||
$ ('#calendar').fullCalendar ('changeView', 'month');
|
||||
}
|
||||
});
|
||||
|
||||
function initCalendar() {
|
||||
var $calendar = $ ('#calendar');
|
||||
|
||||
$calendar.fullCalendar ({
|
||||
header: {
|
||||
left: 'prev title next ',
|
||||
center: '',
|
||||
right: 'month,agendaWeek'
|
||||
},
|
||||
columnFormat: 'dddd',
|
||||
aspectRatio: 2,
|
||||
contentHeight: 'auto',
|
||||
editable: true,
|
||||
droppable: true,
|
||||
selectable: true,
|
||||
timezone: 'Europe/Prague',
|
||||
lang: 'cs',
|
||||
|
||||
views: {
|
||||
agenda: {
|
||||
columnFormat: 'dd'
|
||||
}
|
||||
},
|
||||
|
||||
select: function (start, end) {
|
||||
var $modal = $ ('#newCalendarEvent');
|
||||
$modal.modal ('show');
|
||||
|
||||
var startdate = start.format ('DD. MM. YYYY');
|
||||
|
||||
$modal.find ('input[name=startdate]').val (startdate);
|
||||
},
|
||||
eventDrop: function (event) {
|
||||
if (event.type === "event") {
|
||||
$.nette.ajax ({
|
||||
url: {plink editCalendarEvent!},
|
||||
method: "post",
|
||||
data: {
|
||||
'event-id': event.id,
|
||||
name: event.title,
|
||||
startdate: event.start.format ('DD. MM. YYYY')
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var url = {plink changeDeadline! 'ID'};
|
||||
url = url.replace ('ID', event.id);
|
||||
|
||||
$.nette.ajax ({
|
||||
url: url,
|
||||
method: "post",
|
||||
data: {
|
||||
value: event.start.format ('DD. MM. YYYY')
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
eventClick: function (event, jsEvent, view) {
|
||||
// wasn't remove button clicked?
|
||||
if ($ (jsEvent.target).hasClass ('fa-times')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $modal;
|
||||
|
||||
if (event.type === 'event') {
|
||||
$modal = $ ('#editCalendarEvent');
|
||||
|
||||
$modal.find ('#event-id').val (event.id);
|
||||
$modal.find ('#event-name').val (event.title);
|
||||
$ ('#event-date').val (event.start.format ('DD. MM. YYYY'));
|
||||
} else {
|
||||
$modal = $ ('#editTask');
|
||||
|
||||
$modal.find ('#taskId').val (event.id);
|
||||
$modal.find ('#name').val (event.title);
|
||||
$modal.find ('#deadline').val (event.start.format ('DD. MM. YYYY'));
|
||||
|
||||
}
|
||||
$modal.modal ('show');
|
||||
|
||||
},
|
||||
eventRender: function (event, element) {
|
||||
|
||||
var url = {plink delete! 0,1};
|
||||
url = url.replace ("0?", event.id + "?").replace ("type=1", "type=" + event.type);
|
||||
|
||||
var link = '<span class="delete-button"><a href="javascript:void(0);" data-action="' + url + '" class="calendar-remove"><span class="fa fa-times"></span></a></span>';
|
||||
element.find (".fc-title").parent ().append (link);
|
||||
},
|
||||
events: window.events
|
||||
});
|
||||
|
||||
// wedding
|
||||
$calendar.fullCalendar ('renderEvent', {
|
||||
title: window.weddingTitle,
|
||||
allDay: true,
|
||||
start: window.weddingDate,
|
||||
end: window.weddingDate,
|
||||
className: 'wedding-date',
|
||||
editable: false,
|
||||
rendering: "background"
|
||||
}, true);
|
||||
}
|
||||
|
||||
$ (document).on ('snippet-reloaded', function () {
|
||||
initCalendar ();
|
||||
$ (window).resize ();
|
||||
});
|
||||
|
||||
$ (document).ready (function () {
|
||||
initCalendar ();
|
||||
$ (window).resize ();
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
$ (document).on ('click', '#all-checkboxes-toggler', function () {
|
||||
var checked = $ (this).is (':checked');
|
||||
$ ('.checkbox').attr ('checked', checked).change();
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
function displayValidationError($e, message) {
|
||||
var containerOffset = $e.offsetParent ().offset ();
|
||||
var offset = $e.offset ().left - containerOffset.left;
|
||||
var topOffset = $e.offset ().top + $e.height () + 15 - containerOffset.top;
|
||||
|
||||
console.log("Chyba: "+message);
|
||||
|
||||
var $error = $ ('<div class="animated bounceIn alert alert-danger validation-error">' + message + '</div>');
|
||||
$error.css ({
|
||||
"position": "absolute",
|
||||
"top": topOffset + "px",
|
||||
"left": offset + "px",
|
||||
"z-index": 10000
|
||||
});
|
||||
|
||||
$e.parent ().append ($error).show ();
|
||||
$e.addClass ('has-error');
|
||||
}
|
||||
|
||||
$ (document).on ('blur', 'input[type=email], [data-values=email]', function () {
|
||||
var $e = $ (this);
|
||||
var val = $e.val ();
|
||||
|
||||
if (val === "" && !$e.hasClass ('has-error'))
|
||||
return;
|
||||
|
||||
if (val !== "" && !/(.+)@(.+)\.(.{2,7})/.test (val)) {
|
||||
displayValidationError ($e, "E-mail není ve správném tvaru.");
|
||||
} else {
|
||||
$ ('.validation-error').remove ();
|
||||
$e.removeClass ('has-error')
|
||||
}
|
||||
});
|
||||
|
||||
$ (document).on ('blur', '[data-values=int]', function () {
|
||||
var $e = $ (this);
|
||||
var val = $e.val ();
|
||||
console.log(val);
|
||||
|
||||
if (val === "" && !$e.hasClass ('has-error'))
|
||||
return;
|
||||
|
||||
|
||||
if (val !== "" && !/^\d+$/.test (val)) {
|
||||
displayValidationError ($e, "Zadávejte prosím jen čísla.");
|
||||
} else {
|
||||
$ ('.validation-error').remove ();
|
||||
$e.removeClass ('has-error')
|
||||
}
|
||||
});
|
||||
|
||||
$ (document).on ('blur', '[data-values=phone]', function () {
|
||||
var $e = $ (this);
|
||||
var val = $e.val ().replace (/ /g, '');
|
||||
var res = /\+?[0-9]{9,14}/.test (val);
|
||||
|
||||
if (val === "" && !$e.hasClass ('has-error'))
|
||||
return;
|
||||
|
||||
console.log(val, res);
|
||||
|
||||
if (val !== "" && !res) {
|
||||
displayValidationError ($e, "Telefon není ve správném formátu.")
|
||||
} else {
|
||||
$ ('.validation-error').remove ();
|
||||
$e.removeClass ('has-error')
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
$ (document).ready (initDateTimePickers ());
|
||||
$ (document).on ('snippet-reloaded', initDateTimePickers);
|
||||
|
||||
$ (document).on ('blur', '.select-date', function () {
|
||||
$ (this).datetimepicker ('hide');
|
||||
});
|
||||
$ (document).on ('blur', '.select-datetime', function () {
|
||||
$ (this).datetimepicker ('hide');
|
||||
});
|
||||
|
||||
var i = 1;
|
||||
|
||||
function initDateTimePickers() {
|
||||
var $datepicker = $ ('.select-date');
|
||||
var $datetimepicker = $ ('.select-datetime');
|
||||
var $timepicker = $ ('.select-time');
|
||||
|
||||
$datepicker.each (function () {
|
||||
var $e = $ (this);
|
||||
if (!datePickerInitialized ($e)) {
|
||||
setDatepickerId ($e, 'datepicker-auto-id');
|
||||
initDatePicker ($e);
|
||||
}
|
||||
});
|
||||
|
||||
$datetimepicker.each (function () {
|
||||
var init = $ (this).attr ('data-picker-init');
|
||||
|
||||
if (init) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $positionedParent = getPositionedParent ($ (this));
|
||||
var id = setDatepickerId ($ (this), 'datetimepicker-auto-id');
|
||||
|
||||
$ (this).attr ('data-toggle', 'datetimepicker');
|
||||
$ (this).attr ('data-target', '#' + id);
|
||||
|
||||
$ (this).datetimepicker ({
|
||||
sideBySide: true,
|
||||
stepping: 10,
|
||||
format: "DD. MM. YYYY HH:mm",
|
||||
widgetParent: $positionedParent,
|
||||
useCurrent: false,
|
||||
locale: window.locale || 'cs'
|
||||
});
|
||||
$ (this).attr ('data-picker-init', true);
|
||||
});
|
||||
|
||||
$timepicker.each (function () {
|
||||
var init = $ (this).attr ('data-picker-init');
|
||||
|
||||
if (init) {
|
||||
return;
|
||||
}
|
||||
|
||||
var id = setDatepickerId ($ (this), 'timepicker-auto-id');
|
||||
var $positionedParent = getPositionedParent ($ (this));
|
||||
|
||||
$ (this).attr ('data-toggle', 'datetimepicker');
|
||||
$ (this).attr ('data-target', '#' + id);
|
||||
|
||||
$ (this).datetimepicker ({
|
||||
sideBySide: true,
|
||||
stepping: 10,
|
||||
widgetParent: $positionedParent,
|
||||
format: "HH:mm",
|
||||
useCurrent: false,
|
||||
locale: window.locale || 'cs'
|
||||
});
|
||||
$ (this).attr ('data-picker-init', true);
|
||||
});
|
||||
}
|
||||
|
||||
function getPositionedParent($e) {
|
||||
do {
|
||||
$e = $e.parent ();
|
||||
} while ($e.css ('position') !== 'relative');
|
||||
|
||||
return $e;
|
||||
}
|
||||
|
||||
function datePickerInitialized($element) {
|
||||
var init = $element.attr ('data-picker-init');
|
||||
|
||||
return !!init;
|
||||
}
|
||||
|
||||
function setDatepickerId($element, prefix, postfix) {
|
||||
if (typeof postfix === 'undefined') {
|
||||
postfix = 1;
|
||||
}
|
||||
|
||||
var id = $element.attr ('id');
|
||||
if (id === "" || typeof id === 'undefined') {
|
||||
id = prefix + '-' + postfix++;
|
||||
$element.attr ('id', id);
|
||||
}
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
function initDatePicker($element) {
|
||||
var id = $element.attr ('id');
|
||||
$element.attr ('data-toggle', 'datetimepicker');
|
||||
$element.attr ('data-target', '#' + id);
|
||||
|
||||
var $positionedParent = getPositionedParent ($element);
|
||||
$element.datetimepicker ({
|
||||
format: "DD. MM. YYYY",
|
||||
useCurrent: false,
|
||||
widgetParent: $positionedParent,
|
||||
locale: window.locale || 'cs'
|
||||
});
|
||||
|
||||
$element.attr ('data-picker-init', true);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
$ (document).on ('click', '.delete-button a', function () {
|
||||
|
||||
var $modal = $ ('#delete-modal');
|
||||
var $e = $ (this);
|
||||
|
||||
var action = $e.data ('action');
|
||||
var confirmMessage = $e.data ('message') || false;
|
||||
var modalHeader = $e.data ('title') || false;
|
||||
|
||||
if (confirmMessage)
|
||||
$modal.find ('.message').html (confirmMessage);
|
||||
|
||||
if (modalHeader)
|
||||
$modal.find ('.modal-title').text (modalHeader);
|
||||
|
||||
|
||||
$ ('#delete-modal-form').attr ('action', action);
|
||||
$modal.modal ('show');
|
||||
});
|
||||
@@ -0,0 +1,205 @@
|
||||
(function ($) {
|
||||
$.fn.editable = function (callback) {
|
||||
|
||||
if (typeof callback !== 'function') {
|
||||
callback = function () {
|
||||
};
|
||||
}
|
||||
|
||||
var $trigger = $ (this);
|
||||
var edit = {};
|
||||
|
||||
var defaultHtml = '...';
|
||||
|
||||
edit.init = function () {
|
||||
|
||||
// set placeholder
|
||||
$trigger.each (function () {
|
||||
var $e = $ (this);
|
||||
|
||||
if ($e.text ().trim () === "") {
|
||||
$e.text (defaultHtml)
|
||||
}
|
||||
});
|
||||
|
||||
// $trigger.bind ('mouseover', function () {
|
||||
// $ (this).parent ().css ('position', 'relative');
|
||||
// });
|
||||
|
||||
$trigger.bind ('click', function (e) {
|
||||
var $editable = $ (this);
|
||||
var height = $editable.innerHeight ();
|
||||
|
||||
$editable.css ('height', height + "px");
|
||||
var value = edit.getValue ($editable);
|
||||
var width = $editable.parent ().innerWidth () - 10;
|
||||
var $input = $ ('<input type="text" class="editing" data-original="' + value + '" value="' + value + '">').css ({"width": width + "px"});
|
||||
|
||||
// do not reset input after multiple clicks
|
||||
$input.click (function (e) {
|
||||
e.preventDefault ();
|
||||
e.stopImmediatePropagation ();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// save on enter
|
||||
$input.keydown (function (e) {
|
||||
|
||||
// enter
|
||||
if (e.keyCode === 13) {
|
||||
$input.blur ();
|
||||
}
|
||||
|
||||
// esc
|
||||
if (e.keyCode === 27) {
|
||||
var orig = $input.data ('original');
|
||||
$input.val (orig);
|
||||
$input.blur ();
|
||||
}
|
||||
});
|
||||
|
||||
// save data on blur
|
||||
$input.blur (function () {
|
||||
// datepicker opened
|
||||
if ($ ('.datepicker-dropdown').is (':visible')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (edit.validateData ($input)) {
|
||||
var newData = edit.saveData ($input, $editable.data ('action'));
|
||||
$input.remove ();
|
||||
$editable.text (newData);
|
||||
}
|
||||
});
|
||||
|
||||
// replace text in element with input
|
||||
$editable.html ($input);
|
||||
|
||||
switch ($editable.data ('values')) {
|
||||
case "phone":
|
||||
$input.attr ('data-values', 'phone');
|
||||
break;
|
||||
|
||||
case "int":
|
||||
$input.attr ('data-values', 'int');
|
||||
break;
|
||||
|
||||
case "email":
|
||||
$input.attr ('type', 'email');
|
||||
$input.attr ('data-values', 'email');
|
||||
break;
|
||||
|
||||
case "time":
|
||||
$input.addClass ('select-time');
|
||||
initDateTimePickers ();
|
||||
|
||||
$input.datetimepicker ('show');
|
||||
|
||||
break;
|
||||
|
||||
case "date":
|
||||
$input.addClass ('select-date');
|
||||
initDatePicker ($input);
|
||||
|
||||
$input.datetimepicker ('show');
|
||||
break;
|
||||
|
||||
case "datetime":
|
||||
$input.addClass ('select-datetime');
|
||||
|
||||
initDateTimePickers ();
|
||||
|
||||
$input.datetimepicker ('show');
|
||||
break;
|
||||
}
|
||||
|
||||
$input.focus ();
|
||||
|
||||
e.stopImmediatePropagation ();
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
edit.validateData = function ($input) {
|
||||
|
||||
var acceptedValues = $input.data ('values');
|
||||
var value = $input.val ();
|
||||
|
||||
switch (acceptedValues) {
|
||||
case "int":
|
||||
return value === "" || /^\d+$/.test (value);
|
||||
case "email":
|
||||
return value === "" || /(.+)@(.+)\.(.{2,7})/.test (value);
|
||||
case "phone":
|
||||
value = value.replace (/ /g, '');
|
||||
return value === "" || /\+?[0-9]{9,14}/.test (value);
|
||||
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
edit.saveData = function ($input, url) {
|
||||
var newData = $input.val ();
|
||||
|
||||
if (newData === $input.data('original')) {
|
||||
return newData;
|
||||
}
|
||||
|
||||
$.nette.ajax ({
|
||||
url: url,
|
||||
method: "POST",
|
||||
data: {
|
||||
value: newData
|
||||
}
|
||||
}).done (function () {
|
||||
// todo: very ugly, sorry...
|
||||
$ ("." + $trigger.attr ('class')).editable (callback);
|
||||
|
||||
// todo remove timepicker in nicer way
|
||||
$ ('.bootstrap-datetimepicker-widget').remove ();
|
||||
|
||||
// todo: somehow not working...?
|
||||
callback ();
|
||||
|
||||
var event = jQuery.Event ("snippet-reloaded");
|
||||
$ (document).trigger (event);
|
||||
});
|
||||
|
||||
return newData;
|
||||
};
|
||||
|
||||
edit.getValue = function ($element) {
|
||||
var allowedValue = $element.data ('values');
|
||||
var data = $element.text ().trim ();
|
||||
|
||||
if (data === defaultHtml)
|
||||
data = "";
|
||||
|
||||
switch (allowedValue) {
|
||||
case 'int':
|
||||
data = data.replace (/\D/g, '');
|
||||
break;
|
||||
|
||||
case 'double':
|
||||
data = data.replace (/\D/g, '');
|
||||
break;
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
edit.init ();
|
||||
};
|
||||
}) (jQuery);
|
||||
|
||||
function initEditable() {
|
||||
$ ('.edit-inline').editable (function () {
|
||||
if ($ ('#draggable-container').length > 0)
|
||||
initSortable ();
|
||||
});
|
||||
}
|
||||
|
||||
$ (document).ready (initEditable);
|
||||
$ (document).on ('snippet-reloaded', initEditable);
|
||||
@@ -0,0 +1,53 @@
|
||||
$ (document).ready (function () {
|
||||
if ($ ('.draggable-container').length > 0) {
|
||||
initSortable ();
|
||||
}
|
||||
});
|
||||
|
||||
// init sortable on reloaded snippet
|
||||
$ (document).on ('snippet-reloaded', initSortable);
|
||||
|
||||
function initSortable() {
|
||||
if (typeof Sortable === 'undefined') {
|
||||
$.getScript ('/www/assets/dist/js/Sortable.js', initSortable);
|
||||
} else {
|
||||
var $elements = document.getElementsByClassName ("draggable-container");
|
||||
if ($elements.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i in $elements) {
|
||||
var $el = $elements[i];
|
||||
|
||||
if (typeof $el !== 'object') {
|
||||
continue;
|
||||
}
|
||||
|
||||
Sortable.create ($el, {
|
||||
animation: 200,
|
||||
handle: ".sort-handle",
|
||||
draggable: ".draggable",
|
||||
onEnd: function (evt) {
|
||||
var ordered = [];
|
||||
|
||||
console.log(evt);
|
||||
|
||||
// get item ids
|
||||
$ ('.sortable-item').each (function () {
|
||||
var $e = $ (this);
|
||||
ordered.push ($e.data ('id'));
|
||||
});
|
||||
|
||||
// send ordered items
|
||||
$.nette.ajax ({
|
||||
url: evt.target.getAttribute('data-url'),
|
||||
method: "post",
|
||||
data: {
|
||||
items: ordered
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
$topMenuLinkColor: #677788;
|
||||
$textColor: #677788;
|
||||
$footerBackgroundColor: #677787;
|
||||
$primaryPinkColor: #ED7493;
|
||||
$btnSecondaryColor: transparent;
|
||||
$boxShadowColor: #E3E3E3;
|
||||
$footerDarkerTextColor: $textColor;
|
||||
|
||||
$darkColor: #617891;
|
||||
$darkerColor: #314559;
|
||||
$contentBackgroundColor: white;
|
||||
$green: #3db621;
|
||||
$gray: #f2f2f2;
|
||||
$red: red;
|
||||
|
||||
$submenuColor: darken($gray, 10%);
|
||||
|
||||
$contentHeaderBackgroundColor: #F9F9F9;
|
||||
$contentHeaderColor: #627991;
|
||||
$contentColorBlue: #4f6a87;
|
||||
$contentTableColor: #748391;
|
||||
|
||||
$tableBorderColor: #ededf0;
|
||||
$tableHoverColor: #fcfcfc;
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Required
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
|
||||
// Optional
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
|
||||
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@import '~font-awesome/scss/font-awesome.scss';
|
||||
|
||||
@import "sidebar";
|
||||
@import "main";
|
||||
@import "backToDashboard";
|
||||
|
||||
@import "editor/parts";
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
|
||||
.back-to-dashboard {
|
||||
&__icon {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
|
||||
border-radius: 50%;
|
||||
padding: 5px 10px;
|
||||
background: white;
|
||||
border: solid 1px;
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
line-height: 200%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
.web-part {
|
||||
|
||||
position: relative;
|
||||
|
||||
&__edit {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
@import "variables";
|
||||
|
||||
|
||||
.navbar-top__logo{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
h3 {
|
||||
&.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
color: $contentHeaderColor;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content{
|
||||
min-height: calc(100% - 132px);
|
||||
position: relative;
|
||||
|
||||
@media only screen and (max-width:1310px){
|
||||
min-height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
@media only screen and (max-width:800px){
|
||||
min-height: calc(100% - 55px);
|
||||
}
|
||||
|
||||
&__content{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
padding:0px 30px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
padding-left:150px;
|
||||
|
||||
@media only screen and (max-width:500px){
|
||||
padding:0px 15px;
|
||||
padding-left:62px;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 47px;
|
||||
min-height: 100%;
|
||||
|
||||
@media only screen and (min-width:500px){
|
||||
width:120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
@import "variables";
|
||||
|
||||
$sidebarDecorationOverflow: 13px;
|
||||
|
||||
#sidebar {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -1px;
|
||||
font-weight: bold;
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
|
||||
.nav-link {
|
||||
margin: 0 auto;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 10px;
|
||||
font-size: 0px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 47px;
|
||||
|
||||
&__icon {
|
||||
font-size: 200%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 500px) {
|
||||
font-size: 11px;
|
||||
padding: 15px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
@media only screen and (min-width: 500px) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active,
|
||||
.nav-item:hover {
|
||||
@media only screen and (min-width: 500px) {
|
||||
margin-right: -$sidebarDecorationOverflow;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user