//FONT
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext');
// VARIABLES - MAIN
$sidebarReducedWidth: 70px;
$sidebarExpandedWidth: 220px;
// VARIABLES - COLORS
$main-color: #102c58;
$text-color: #ababab;;
$light-blue: #5f9cfd;
$red: #f91605;
$navy: #051835;
$bg-color-light: #f3f3f3;
$bg-color-dark: $navy;
$orange: #f5642d;
$light-grey: #d0d0d0;
$header-color: #ffffff;
//MIXIMS
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box;
}
@mixin box-shadow($args...) {
-webkit-box-shadow: $args;
-moz-box-shadow: $args;
box-shadow: $args;
}
@mixin linear-gradient($top, $bottom) {
background: $top;
background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom));
background: -webkit-linear-gradient(top, $top 0%,$bottom 100%);
background: -o-linear-gradient(top, $top 0%,$bottom 100%);
background: -ms-linear-gradient(top, $top 0%,$bottom 100%);
background: linear-gradient(to bottom, $top 0%,$bottom 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0);
}
%clearfix {
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
//STYLES
html, body {
height: 100%;
width:100%;
}
body {
margin: 0;
padding: 0;
font-family: "Open Sans";
font-size: 14px;
font-weight:400;
overflow: hidden;
background-color: $bg-color-light;
color: $main-color;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-input-placeholder{
color: #c3c3c3;
}
p {
color: $text-color;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
.u-list {
margin:0;
padding:0;
list-style:none;
}
.u-input {
outline:0;
border:1px solid $light-grey;
padding:5px 10px;
height:35px;
font-size:12px;
@include border-radius(10px);
}
.c-badge {
font-size: 10px;
font-weight: 700;
min-width: 20px;
padding: 5px;
border-radius: 4px;
display: block;
line-height: 0.7;
color: #fff;
text-align:center;
white-space: nowrap;
background-color: $main-color;
border: 1px solid darken($main-color, 5);
&--red {
background-color: $red;
border: 1px solid darken($red, 5);
}
&--blue {
background-color: $light-blue;
border: 1px solid darken($light-blue, 5);
}
&--header-icon {
position:absolute;
bottom: -9px;
}
}
.tooltip {
width: 120px;
&-inner {
padding: 8px 10px;
color: #fff;
text-align: center;
background-color: #051835;
font-size: 12px;
border-radius: 3px;
}
&-arrow {
border-right-color: #051835 !important;
}
}
.hamburger-toggle {
position: relative;
padding: 0;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
order:1;
[class*='bar-'] {
display: block;
background: $main-color;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .2s ease all;
transition: .2s ease all;
border-radius: 2px;
height: 2px;
width: 24px;
margin-bottom: 4px;
&:nth-child(2) {
width: 18px;
}
&:last-child {
margin-bottom: 0;
width: 12px;
}
}
&.is-opened {
left:3px;
[class*='bar-'] {
background: $main-color;
}
.bar-top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 15% 15%;
transform-origin: 15% 15%;
}
.bar-mid {
opacity: 0;
}
.bar-bot {
-webkit-transform: rotate(45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 15% 95%;
transform-origin: 15% 95%;
width: 24px;
}
}
&:focus {
outline-width: 0;
}
}
.header-icons-group {
display: flex;
order:3;
margin-left:auto;
height: 100%;
border-left:1px solid darken($header-color, 20%);
.c-header-icon:last-child {
border-right:0;
}
}
.c-header-icon {
position:relative;
display: flex;
flex-shrink: 0;
float:left;
width: 70px;
height: 100%;
align-items:center;
justify-content:center;
line-height: 1;
cursor: pointer;
border-right:1px solid darken($header-color, 20%);
svg {
font-size: 18px;
line-height: 40px;
}
&--in-circle {
border:1px solid $light-grey;
border-radius: 100%;
}
&:hover {
svg {
color: $orange;
}
[class*='bar-'] {
background: $orange;
}
}
// &.has-dropdown {
// &:hover {
// .c-dropdown {
// opacity:1;
// top:50px;
// }
// }
// }
}
.l-header {
padding-left: $sidebarReducedWidth;
position: fixed;
top: 0;
right: 0;
z-index: 10;
width: 100%;
background: $header-color;
&__inner {
height: 100%;
width: 100%;
display:flex;
height:70px;
align-items: center;
justify-content:stretch;
border-bottom: 1px solid;
border-color: darken($header-color, 20%);
}
.sidebar-is-expanded & {
padding-left: $sidebarExpandedWidth;
}
@include transition(padding 0.5s ease-in-out);
}
.c-search {
display:flex;
flex-grow: 1;
height:100%;
&__input {
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-right:0;
width: 100%;
height:100%;
border:0;
font-size:14px;
padding:0 20px;
@include transition(all 0.3s ease-in-out);
}
}
.c-dropdown {
opacity:0;
text-align:left;
position: absolute;
flex-direction:column;
display:none;
width: 300px;
top: 30px;
right: -40px;
background-color: #fff;
overflow:hidden;
min-height:300px;
border:1px solid $light-grey;
@include border-radius(10px);
@include box-shadow(0px 5px 14px -1px #cecece);
@include transition(all 0.3s ease-in-out);
}
.l-sidebar {
width: $sidebarReducedWidth;
position: absolute;
z-index: 10;
left: 0;
top: 0;
bottom: 0;
background: $main-color;
.logo {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background-color: $navy;
.logo__txt {
font-size:26px;
line-height:1;
color:#fff;
text-align:center;
font-weight:700;
}
}
&__content {
height:100%;
position:relative;
}
.sidebar-is-expanded & {
width: $sidebarExpandedWidth;
}
@include transition(width 0.5s ease-in-out);
}
.c-menu {
> ul {
display:flex;
flex-direction:column;
.c-menu__item {
color: #184a98;
max-width: 100%;
overflow: hidden;
&__inner {
display:flex;
flex-direction:row;
align-items:center;
min-height: 60px;
position: relative;
cursor: pointer;
@include transition(background-color 0.5s ease-in-out);
&:before {
position:absolute;
content: " ";
height: 0;
width:2px;
left:0;
top:50%;
margin-top:-18px;
background-color:$light-blue;
opacity:0;
@include transition(all 0.5s ease-in-out);
}
}
&.is-active {
color: #fff;
.c-menu__item__inner {
border-left-color: #fff;
background-color: #1e3e6f;
svg {
color: #fff;
}
.c-menu-item__title {
span {
color: #fff;
}
}
&:before {
height: 36px;
opacity:1;
}
}
}
&:not(.is-active):hover {
color: #fff;
.c-menu__item__inner {
background-color: $orange;
border-left-color: $orange;
}
}
svg {
flex:0 0 $sidebarReducedWidth;
font-size: 16px;
font-weight: normal;
text-align: center;
@include transition(all 0.5s ease-in-out);
}
.c-menu-item__expand {
position:relative;
left:100px;
padding-right:20px;
color: #fff;
margin-left:auto;
@include transition(left 1.0s ease-in-out);
.sidebar-is-expanded & {
left:0px;
}
}
.c-menu-item__title {
flex-basis:100%;
padding-right: 10px;
position: relative;
color: #fff;
left: $sidebarExpandedWidth;
opacity:0;
span {
font-weight:400;
font-size:14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include transition(left 0.5s ease-in-out);
}
.sidebar-is-expanded & {
left:0px;
opacity:1;
}
@include transition(all 0.7s ease-in-out);
}
.c-menu__submenu {
background-color:$navy;
padding:15px;
font-size:12px;
display:none;
li {
padding-bottom:15px;
margin-bottom:15px;
border-bottom:1px solid;
border-color:lighten($navy, 4%);
color:$light-blue;
&:last-child {
margin:0;
padding:0;
border:0;
}
}
}
}
}
}
main.l-main {
width: 100%;
height: 100%;
padding: 70px 0 0 $sidebarReducedWidth;
.content-wrapper {
padding: 25px;
height: 100%;
overflow: auto;
.page-content {
border-top:1px solid $light-grey;
padding-top:25px;
color: $text-color;
}
&--with-bg {
.page-content {
background: #fff;
border-radius: 3px;
border: 1px solid $light-grey;
padding: 25px;
}
}
}
.page-title {
font-weight: 400;
margin-top: 0;
margin-bottom: 25px;
}
.sidebar-is-expanded & {
padding-left: $sidebarExpandedWidth;
}
@include transition(padding 0.5s ease-in-out);
}
View Compiled
let Dashboard = (() => {
let global = {
tooltipOptions: {
placement: "right"
},
menuClass: ".c-menu"
};
let menuChangeActive = el => {
let hasSubmenu = ($(el).hasClass("has-submenu"));
$(global.menuClass + " .is-active").removeClass("is-active");
$(el).addClass("is-active");
// if (hasSubmenu) {
// $(el).find("ul").slideDown();
// }
};
let sidebarChangeWidth = () => {
let $menuItemsTitle = $("li .menu-item__title");
$("body").toggleClass("sidebar-is-reduced sidebar-is-expanded");
$(".hamburger-toggle").toggleClass("is-opened");
if ($("body").hasClass("sidebar-is-expanded")) {
$('[data-toggle="tooltip"]').tooltip("destroy");
} else {
$('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
}
};
return {
init: () => {
$(".js-hamburger").on("click", sidebarChangeWidth);
$(".js-menu li").on("click", e => {
menuChangeActive(e.currentTarget);
});
$('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
}
};
})();
Dashboard.init();
View Compiled