diff options
Diffstat (limited to 'app/assets/stylesheets/sections/nav_sidebar.scss')
-rw-r--r-- | app/assets/stylesheets/sections/nav_sidebar.scss | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/app/assets/stylesheets/sections/nav_sidebar.scss b/app/assets/stylesheets/sections/nav_sidebar.scss new file mode 100644 index 00000000000..edb5f90813f --- /dev/null +++ b/app/assets/stylesheets/sections/nav_sidebar.scss @@ -0,0 +1,161 @@ +.page-with-sidebar { + background: #F5F5F5; +} + +.sidebar-wrapper { + z-index: 99; + overflow-y: auto; + background: #F5F5F5; +} + +.content-wrapper { + width: 100%; + padding: 15px; + background: #FFF; +} + +.nav-sidebar { + margin: 0; + list-style: none; + + &.navbar-collapse { + padding: 0px !important; + } +} + +.nav-sidebar li a .count { + float: right; + background: #eee; + padding: 0px 8px; + @include border-radius(6px); +} + +.nav-sidebar li { + &.active a { + color: #111; + background: #EEE; + font-weight: bold; + + &.no-highlight { + background: none; + } + + i { + color: #444; + } + } +} + +.nav-sidebar li { + &.separate-item { + border-top: 1px solid #ddd; + padding-top: 10px; + margin-top: 10px; + } + + a { + color: #555; + display: block; + text-decoration: none; + padding: 6px 15px; + font-size: 13px; + line-height: 20px; + text-shadow: 0 1px 2px #FFF; + padding-left: 20px; + + &:hover { + text-decoration: none; + color: #333; + background: #DDD; + } + + &:active, &:focus { + text-decoration: none; + } + + i { + width: 20px; + color: #888; + margin-right: 23px; + } + } +} + +.sidebar-subnav { + margin-left: 0px; + padding-left: 0px; + + li { + list-style: none; + } +} + +@mixin expanded-sidebar { + .page-with-sidebar { + padding-left: 250px; + } + + .sidebar-wrapper { + width: 250px; + position: fixed; + left: 250px; + height: 100%; + margin-left: -250px; + border-right: 1px solid #EAEAEA; + + .nav-sidebar { + margin-top: 20px; + position: fixed; + top: 45px; + width: 250px; + } + } + + .content-wrapper { + padding: 20px; + } +} + +@mixin folded-sidebar { + .page-with-sidebar { + padding-left: 50px; + } + + .sidebar-wrapper { + width: 52px; + position: fixed; + top: 0; + left: 0; + height: 100%; + border-right: 1px solid #EAEAEA; + overflow-x: hidden; + + .nav-sidebar { + margin-top: 20px; + position: absolute; + top: 45px; + width: 52px; + + li a { + padding-left: 18px; + font-size: 14px; + padding: 10px 15px; + text-align: center; + + & > span { + display: none; + } + } + } + } +} + +@media (max-width: $screen-sm-max) { + @include folded-sidebar; +} + +@media(min-width: $screen-sm-max) { + @include expanded-sidebar; +} + + |