96 lines
2.3 KiB
SCSS
96 lines
2.3 KiB
SCSS
/// sidenav.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
@import "extends";
|
|
$sidenav-default-width: (4 * $pitch);
|
|
$sidenav-min-space: $pitch;
|
|
|
|
$sidenav-right-width: (8 * $pitch);
|
|
|
|
md-sidenav {
|
|
background-color: sg-color($sogoPaper, 400);
|
|
&.md-locked-open {
|
|
@include from(lg) {
|
|
@include flex-col(lg, 4, 1, 0)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.md-sidenav-left {
|
|
&.md-whiteframe-z2 {
|
|
box-shadow: $sidenav-shadow-z2;
|
|
}
|
|
}
|
|
|
|
// MAIN SIDENAV, actually to the left
|
|
// ----------------------------------------------------------------------------
|
|
.md-sidenav-left {
|
|
& md-content,
|
|
& md-toolbar {
|
|
background-color: inherit;
|
|
background-image: url("../img/cardboard-transp.png");
|
|
background-blend-mode: multiply;
|
|
}
|
|
}
|
|
|
|
.md-sidenav-left md-toolbar {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.md-sidenav-right {
|
|
width: $sidenav-right-width;
|
|
max-width: $sidenav-right-width;
|
|
& md-content,
|
|
& md-toolbar {
|
|
background-color: inherit;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
// Mailboxes tree
|
|
$i: 1;
|
|
@while $i < 12 {
|
|
.sg-child-level-#{$i} { padding-left: $mg * $i; }
|
|
$i: $i + 1;
|
|
}
|
|
|
|
// This hack is so BAD I am ashame putting it in the shame file
|
|
// -----------------------------------------------------------
|
|
// Folder tree's controler function are very intricate, the way
|
|
// elements are marked as 'active reminds me of good old time JQuery
|
|
// There must be a more straigthforward, angular-way to swap classes
|
|
// selection, but I don't wan't to mess in that script.
|
|
// Here's the hack : on selection I use the parent > child selector to
|
|
// change the definition of the icon's class. Yes, this means that
|
|
// md-icon-folder:before as the value of md-icon-folder-open:before,
|
|
// and this is wrong !
|
|
|
|
.sg-active i.md-icon-folder:before {
|
|
@extend .md-icon-folder-open:before;
|
|
}
|
|
|
|
.md-sidenav-left {
|
|
&.md-whiteframe-z1 {
|
|
box-shadow: $sidenav-shadow-z1;
|
|
}
|
|
md-list-item {
|
|
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
|
|
color 0.12s linear;
|
|
&:hover {
|
|
background-color: sg-color($sogoBlue, 500);
|
|
}
|
|
&.sg-active {
|
|
background-color: sg-color($sogoBlue, 400);
|
|
}
|
|
&.sg-loading {
|
|
color: sg-color($sogoBlue, 200);
|
|
}
|
|
}
|
|
}
|
|
.md-sidenav-left {
|
|
md-bottom-sheet {
|
|
md-list-item:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|