diff options
author | Phil Hughes <me@iamphill.com> | 2016-03-21 14:09:55 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-03-23 20:15:14 +0300 |
commit | 2d7183bbe8de88d0ef5156a6224ab71eeb6e2f8c (patch) | |
tree | b355588092fb471dbd439fa82cbc8f4e4364bf2e /app | |
parent | e94482d1497cf6e1922261be48e5ebdcc33f44ae (diff) |
Fixed failing tests
Moved the scss out of a mixin as it was really confusing the hell out of the CSS
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/sidebar.js.coffee | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 134 |
2 files changed, 60 insertions, 75 deletions
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index eea3f5ee910..860d4f438d0 100644 --- a/app/assets/javascripts/sidebar.js.coffee +++ b/app/assets/javascripts/sidebar.js.coffee @@ -4,7 +4,6 @@ expanded = 'page-sidebar-expanded' toggleSidebar = -> $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}") $('header').toggleClass("header-collapsed header-expanded") - $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded") $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left") $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' }) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 769477ea4a9..1f5c15abaa6 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -1,3 +1,10 @@ +#logo { + z-index: 2; + position: absolute; + width: 58px; + cursor: pointer; +} + .page-with-sidebar { padding-top: $header-height; transition-duration: .3s; @@ -18,25 +25,6 @@ position: absolute; left: 0; } - - #logo { - z-index: 2; - position: absolute; - width: 58px; - cursor: pointer; - } - - &.right-sidebar-expanded { - padding-right: 0; - - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - padding-right: $sidebar_collapsed_width; - } - - @media (min-width: $screen-md-min) { - padding-right: $gutter_width; - } - } } .sidebar-wrapper { @@ -203,43 +191,28 @@ } } -@mixin expanded-sidebar { - padding-left: $sidebar_collapsed_width; - - @media (min-width: $screen-md-min) { - padding-left: $sidebar_width; - } - - .sidebar-wrapper { - width: $sidebar_width; - - .nav-sidebar { - width: $sidebar_width; - } - - .nav-sidebar li a{ - width: 230px; +.collapse-nav a { + width: $sidebar_width; + position: fixed; + bottom: 0; + left: 0; + font-size: 13px; + background: transparent; + height: 40px; + text-align: center; + line-height: 40px; + transition-duration: .3s; + outline: none; +} - &.back-link { - i { - opacity: 0; - } - } - } - } +.collapse-nav a:hover { + text-decoration: none; + background: #f2f6f7; } -@mixin collapsed-sidebar { +.page-sidebar-collapsed { padding-left: $sidebar_collapsed_width; - &.right-sidebar-collapsed { - padding-right: 0; - - @media (min-width: $screen-sm-min) { - padding-right: $sidebar_collapsed_width; - } - } - .sidebar-wrapper { width: $sidebar_collapsed_width; @@ -284,35 +257,48 @@ } } -.collapse-nav a { - width: $sidebar_width; - position: fixed; - bottom: 0; - left: 0; - font-size: 13px; - background: transparent; - height: 40px; - text-align: center; - line-height: 40px; - transition-duration: .3s; - outline: none; -} +.page-sidebar-expanded { + padding-left: $sidebar_collapsed_width; -.collapse-nav a:hover { - text-decoration: none; - background: #f2f6f7; + @media (min-width: $screen-md-min) { + padding-left: $sidebar_width; + } + + .sidebar-wrapper { + width: $sidebar_width; + + .nav-sidebar { + width: $sidebar_width; + } + + .nav-sidebar li a { + width: 230px; + + &.back-link { + i { + opacity: 0; + } + } + } + } } -.page-sidebar-collapsed { - /* Extra small devices (phones, less than 768px) */ - @include collapsed-sidebar; +.right-sidebar-collapsed { padding-right: 0; - /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { - @include collapsed-sidebar; + padding-right: $sidebar_collapsed_width; } } -.page-sidebar-expanded { - @include expanded-sidebar; +.right-sidebar-expanded { + padding-right: 0; + + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + padding-right: $sidebar_collapsed_width; + } + + @media (min-width: $screen-md-min) { + padding-right: $gutter_width; + } } |