From 2d7183bbe8de88d0ef5156a6224ab71eeb6e2f8c Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 21 Mar 2016 11:09:55 +0000 Subject: Fixed failing tests Moved the scss out of a mixin as it was really confusing the hell out of the CSS --- app/assets/stylesheets/framework/sidebar.scss | 134 ++++++++++++-------------- 1 file changed, 60 insertions(+), 74 deletions(-) (limited to 'app/assets/stylesheets/framework/sidebar.scss') 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; + } } -- cgit v1.2.1