475 lines
9.5 KiB
SCSS
475 lines
9.5 KiB
SCSS
|
|
// Base variables
|
|
// --------------------------------------------------
|
|
$screen-tablet: 768px;
|
|
|
|
$gray-darker: #212121; // #212121 - text
|
|
$gray-secondary: #757575; // #757575 - secondary text, icons
|
|
$gray: #bdbdbd; // #bdbdbd - hint text
|
|
$gray-light: #e0e0e0; // #e0e0e0 - divider
|
|
$gray-lighter: #f5f5f5; // #f5f5f5 - background
|
|
|
|
/* -- Sidebar style ------------------------------- */
|
|
|
|
// Sidebar variables
|
|
// --------------------------------------------------
|
|
$zindex-sidebar-fixed: 1035;
|
|
|
|
$sidebar-desktop-width: 280px;
|
|
$sidebar-width: 240px;
|
|
|
|
|
|
$sidebar-padding: 16px;
|
|
$sidebar-divider: $sidebar-padding/2;
|
|
|
|
$sidebar-nav-height: 48px;
|
|
|
|
$sidebar-icon-width: 40px;
|
|
$sidebar-icon-height: 20px;
|
|
|
|
$sidebar-badge-size: $sidebar-nav-height/2;
|
|
$sidebar-badge-font-size: 10px;
|
|
|
|
$sidebar-brand-color: $gray-secondary;
|
|
$sidebar-icon-color: $gray-secondary;
|
|
$sidebar-menu-color: $gray-darker;
|
|
|
|
|
|
$sidebar-font-weight: 300;
|
|
|
|
// Sidebar mixins
|
|
// --------------------------------------------------
|
|
|
|
// Sidebar horizontal block
|
|
//
|
|
// This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav>li>a
|
|
@mixin sidebar-block()
|
|
{
|
|
display: block;
|
|
line-height: $sidebar-nav-height;
|
|
padding: 0;
|
|
//padding-left: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
|
|
//padding-right: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
|
|
text-decoration: none;
|
|
clear: both;
|
|
@include v-nav-style-core();
|
|
//@include text-overflow();
|
|
@include transition(all .2s ease-in-out);
|
|
color: $blue-dark;
|
|
|
|
&:hover, &:focus {
|
|
@include box-shadow(none);
|
|
outline: none;
|
|
}
|
|
|
|
// positioning caret in sidebar block
|
|
.caret {
|
|
position: absolute;
|
|
right: $sidebar-padding + $sidebar-badge-size/2 - 4px; // caret centered by badge position; 4px - caret width
|
|
top: $sidebar-nav-height/2;
|
|
}
|
|
// positioning badge in sidebar block
|
|
.sidebar-badge {
|
|
position: absolute;
|
|
right: $sidebar-padding;
|
|
top: ($sidebar-nav-height - $sidebar-badge-size)/2 ;
|
|
}
|
|
}
|
|
|
|
// Sidebar design template
|
|
//
|
|
// You can make own sidebar style with this template
|
|
@mixin sidebar-template(
|
|
$color,
|
|
$bg,
|
|
$header-bg,
|
|
$brand-color,
|
|
$brand-bg,
|
|
$brand-hover-color,
|
|
$brand-hover-bg,
|
|
$divider,
|
|
$badge-color,
|
|
$badge-bg,
|
|
$icon-color,
|
|
$icon-hover-color,
|
|
$link-color,
|
|
$link-bg,
|
|
$link-hover-color,
|
|
$link-hover-bg,
|
|
$link-active-color,
|
|
$link-active-bg,
|
|
$link-disabled-color,
|
|
$link-disabled-bg
|
|
) {
|
|
|
|
background-color: $bg;
|
|
|
|
ul{
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.sidebar-header {
|
|
background-color: $header-bg;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sidebar-divider, .sidebar-nav .divider {
|
|
background-color: $divider;
|
|
}
|
|
|
|
.sidebar-text {
|
|
color: $color;
|
|
}
|
|
|
|
.buttons-nav{
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
@include v-nav-style-core();
|
|
|
|
li{
|
|
margin-bottom: 20px;
|
|
a{
|
|
min-width: 148px;
|
|
color: $blue-dark;
|
|
&:hover{
|
|
color: $green-dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-nav {
|
|
text-align: center;
|
|
//border-bottom: 1px solid $faint-gray;
|
|
padding-bottom: 8px;
|
|
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
|
|
li > a {
|
|
color: $link-color;
|
|
background-color: $link-bg;
|
|
|
|
i {
|
|
color: $icon-color;
|
|
}
|
|
}
|
|
li:hover > a, li > a:hover {
|
|
color: $link-hover-color;
|
|
background-color: $link-hover-bg;
|
|
|
|
i {
|
|
color: $icon-hover-color;
|
|
}
|
|
}
|
|
li:focus > a, li > a:focus {
|
|
color: $link-color;
|
|
background-color: $link-bg;
|
|
|
|
i {
|
|
color: $icon-hover-color;
|
|
}
|
|
}
|
|
|
|
> .open > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $link-hover-color;
|
|
background-color: $link-hover-bg;
|
|
}
|
|
}
|
|
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $link-active-color;
|
|
background-color: $link-active-bg;
|
|
}
|
|
}
|
|
> .disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $link-disabled-color;
|
|
background-color: $link-disabled-bg;
|
|
}
|
|
}
|
|
> li > .ink {
|
|
//background: #80d8ff;
|
|
//opacity: 0.5;
|
|
}
|
|
|
|
// Dropdown menu items
|
|
> .dropdown {
|
|
// Remove background color from open dropdown
|
|
> .dropdown-menu {
|
|
|
|
background-color: $link-hover-bg;
|
|
|
|
> li > a {
|
|
&:focus {
|
|
background-color: $link-hover-bg;
|
|
color: $link-hover-color;
|
|
}
|
|
&:hover {
|
|
background-color: darken($link-hover-bg, 7%);
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $link-active-color;
|
|
background-color: $link-active-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Sidebars
|
|
// --------------------------------------------------
|
|
|
|
// Wrapper and base class
|
|
//
|
|
// Provide a static sidebar from which we expand to create other sidebar variations.
|
|
.sidebar {
|
|
position: relative;
|
|
display: block;
|
|
min-height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
border: none;
|
|
@include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
|
|
@include clearfix();
|
|
}
|
|
|
|
// Sidebar Elements
|
|
//
|
|
// Basic style of sidebar elements
|
|
.sidebar {
|
|
|
|
// Sidebar heading
|
|
//----------------
|
|
.sidebar-header {
|
|
position: relative;
|
|
margin-bottom: $sidebar-divider;
|
|
@include transition(all .2s ease-in-out);
|
|
//border-bottom: 1px solid $faint-gray;
|
|
|
|
.buttons{
|
|
text-align: center;
|
|
padding: $xsmall-pad 0 $small-pad;
|
|
a{
|
|
&.outline-btn{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-image {
|
|
padding-top: 24px;
|
|
img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
// Brand/project name
|
|
//
|
|
// In google guideline used for email dropdown
|
|
.sidebar-brand {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
@include sidebar-block();
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Sidebar text
|
|
//----------------
|
|
.sidebar-text {
|
|
@include sidebar-block();
|
|
}
|
|
|
|
// Sidebar icons
|
|
//----------------
|
|
.sidebar-icon {
|
|
display: inline-block;
|
|
height: $sidebar-icon-height;
|
|
margin-right: $sidebar-divider;
|
|
text-align: left;
|
|
font-size: $sidebar-icon-height;
|
|
vertical-align: middle;
|
|
|
|
&:before, &:after {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Sidebar navigation class
|
|
// ------------------------
|
|
.sidebar .sidebar-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
// Links
|
|
//----------------
|
|
li {
|
|
position: relative;
|
|
list-style-type: none;
|
|
|
|
a {
|
|
position: relative;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
@include sidebar-block();
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sidebar color theme variations
|
|
//
|
|
// ------------------------
|
|
.sidebar-default {
|
|
@include sidebar-template(
|
|
$color: $gray-darker,
|
|
$bg: #fff,
|
|
$header-bg: $white,
|
|
$brand-color: $gray-dark,
|
|
$brand-bg: transparent,
|
|
$brand-hover-color: $gray-darker,
|
|
$brand-hover-bg: rgba(0, 0, 0, 0.10),
|
|
$divider: $gray,
|
|
$badge-color: #fff,
|
|
$badge-bg: $gray,
|
|
$icon-color: $gray-dark,
|
|
$icon-hover-color: $gray-dark,
|
|
$link-color: $gray-darker,
|
|
$link-bg: transparent,
|
|
$link-hover-color: $gray-darker,
|
|
$link-hover-bg: lighten($faint-gray, 6%),
|
|
$link-active-color: $gray-darker,
|
|
$link-active-bg: $gray-light,
|
|
$link-disabled-color: $gray-light,
|
|
$link-disabled-bg: transparent
|
|
);
|
|
}
|
|
|
|
|
|
// Sidebar toggling
|
|
//
|
|
// Hide sidebar
|
|
.sidebar {
|
|
width: 0;
|
|
@include translate3d(-$sidebar-desktop-width, 0, 0);
|
|
|
|
&.open {
|
|
min-width: $sidebar-desktop-width;
|
|
width: $sidebar-desktop-width;
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
// Sidebar positions: fix the left/right sidebars
|
|
.sidebar-fixed-left,
|
|
.sidebar-fixed-right,
|
|
.sidebar-stacked {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: $zindex-sidebar-fixed;
|
|
}
|
|
.sidebar-stacked {
|
|
left: 0;
|
|
}
|
|
.sidebar-fixed-left {
|
|
left: 0;
|
|
box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
|
|
-webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
|
|
}
|
|
.sidebar-fixed-right {
|
|
right: 0;
|
|
box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
|
|
-webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
|
|
|
|
@include translate3d($sidebar-desktop-width, 0, 0);
|
|
&.open {
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
.icon-material-sidebar-arrow:before {
|
|
content: "\e614"; // icon-material-arrow-forward
|
|
}
|
|
}
|
|
|
|
// Sidebar size
|
|
//
|
|
// Change size of sidebar and sidebar elements on small screens
|
|
@media (max-width: $screen-tablet) {
|
|
.sidebar.open {
|
|
min-width: $sidebar-width;
|
|
width: $sidebar-width;
|
|
}
|
|
|
|
.sidebar .sidebar-header {
|
|
//height: $sidebar-width * 9/16; // 16:9 header dimension
|
|
}
|
|
|
|
.sidebar .sidebar-image {
|
|
/* img {
|
|
width: $sidebar-width/4 - $sidebar-padding;
|
|
height: $sidebar-width/4 - $sidebar-padding;
|
|
} */
|
|
}
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
visibility: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
background: $white;
|
|
z-index: $zindex-sidebar-fixed - 1;
|
|
|
|
-webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
|
-moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
|
transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
|
-webkit-transform: translateZ(0);
|
|
-moz-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
-o-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.sidebar-overlay.active {
|
|
opacity: 0.3;
|
|
visibility: visible;
|
|
-webkit-transition-delay: 0;
|
|
-moz-transition-delay: 0;
|
|
transition-delay: 0;
|
|
}
|