sogo/UI/WebServerResources/scss/components/sidenav/sidenav.scss
2016-01-18 16:40:55 -05:00

57 lines
1.6 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 {
&.md-locked-open {
@include from(md) {
@include flex-col(md, 4, 1, 0);
// Custom representation of a closed sidenav where the sidenav is pushed to the left;
// Used in in "locked open" mode.
&.sg-closed.md-sidenav-left {
transform: translateX(-100%);
margin-right: -20vw; // See views/_views.scss
}
}
}
}
md-sidenav {
overflow: inherit;
}
// MAIN SIDENAV, actually to the left
// ----------------------------------------------------------------------------
// Mailboxes tree
$i: 1;
@while $i < 12 {
.sg-child-level-#{$i} { padding-left: $mg * $i; }
$i: $i + 1;
}
[class^=sg-child-level] {
md-icon,
md-checkbox {
margin-right: $bl * 2;
max-width: 24px;
}
}
// 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;
}