app/assets/stylesheets/para/admin/theme/_navigation.sass in para-0.4.0 vs app/assets/stylesheets/para/admin/theme/_navigation.sass in para-0.5.0

- old
+ new

@@ -1,23 +1,17 @@ @import "variables" -@import "compass/css3/text-shadow" -@import "compass/css3/transition" -@import "compass/css3/box-shadow" -@import "compass/css3/inline-block" -@import "compass/css3/border-radius" - .page-sidebar position: fixed height: 100% bottom: 0 overflow: auto background-color: $navbar-default-bg width: $left-menu-width-open float: left z-index: 3 - +box-shadow(2px 0 5px #fafafa) + box-shadow: 2px 0 5px #fafafa &.navbar-collapse padding: 0 .navbar-toggle border-color: $navbar-default-toggle-border-color @@ -60,11 +54,12 @@ float: left list-style: none display: block z-index: 3 background-color: $navbar-default-bg - li + box-shadow: 0 2px 5px #fafafa + .ul-navbar li float: left display: block width: 100% padding: 0 margin: 0 @@ -99,11 +94,11 @@ line-height: 19px color: $navbar-default-link-color font-weight: 400 padding: 10px 15px text-decoration: none - +transition(all 200ms ease) + transition: all 200ms ease &:hover, &:focus color: $navbar-default-link-hover-color background-color: $navbar-default-link-hover-bg padding-left: 25px @@ -120,112 +115,113 @@ // Horizontal Navbar .navigation-horizontal height: $navbar-height background: $navbar-default-bg - +box-shadow(0 2px 5px #fafafa) - .brand-logo a - border-bottom: 0 - width: $left-menu-width-open - > li - > a, button - padding: 15px + .ul-navbar + &.list-inline + margin-left: 0 + + .brand-logo a border-bottom: 0 - line-height: 20px - color: $navbar-default-link-color - text-shadow: none - display: block - &:hover - background: $navbar-default-link-hover-bg - text-decoration: none + width: $left-menu-width-open + li + background-color: #fff + > a, button + padding: 10px 15px + border-bottom: 0 + line-height: 19px + color: $navbar-default-link-color + text-shadow: none + display: block + + &:hover + background: $navbar-default-link-hover-bg + text-decoration: none + .fa, .glyphicon + color: $navbar-icon-color .fa, .glyphicon + color: $navbar-default-link-color + &.navbar-toggle + padding: 9px 10px + border-bottom: 1px solid $navbar-default-toggle-border-color + display: none + .brand-logo a + background-color: $navbar-default-brand-color + &.active > a, + &.active > button + background: $navbar-default-link-active-bg + .fa, .glyphicon color: $navbar-icon-color + ul + width: $left-menu-width-open + position: absolute + overflow: visible + border-radius: 3px + box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1) + z-index: 3 + li + width: 100% + + li + width: auto + position: relative + &.active > ul + display: block + + .xn-icon-button > a, + .xn-icon-button > button + padding: 15px 10px + text-align: center + width: 50px .fa, .glyphicon - color: $navbar-default-link-color - &.navbar-toggle - padding: 9px 10px - border-bottom: 1px solid $navbar-default-toggle-border-color - display: none - - &.active > a, - &.active > button - background: $navbar-default-link-active-bg - .fa, .glyphicon - color: $navbar-icon-color - ul - width: $left-menu-width-open - position: absolute - overflow: visible - display: none - +border-radius(3px) - +box-shadow(0 2px 1px 0 rgba(0, 0, 0, 0.1)) - z-index: 3 - li - width: 100% - - li - width: auto - position: relative - &.active > ul - display: block - - .xn-icon-button > a, - .xn-icon-button > button - padding: 15px 10px - text-align: center - width: 50px - .fa, .glyphicon - margin: 0 - - > li + margin: 0 - &.xn-profile - padding: 0 - border-bottom: 1px solid #273541 - .profile-mini - display: none - width: 50px - padding: 7px - img - width: 36px - border: 2px solid #FFF - +border-radius(50%) - .informer - font-size: 11px - position: absolute - line-height: 20px - text-align: center - padding: 0 5px - background: #BBB - right: 10px - top: 15px - color: #FFF - +border-radius(3px) - &.pulsate - -webkit-animation: pulsate 1s ease-out - -webkit-animation-iteration-count: infinite - -moz-animation: pulsate 1s ease-out - -moz-animation-iteration-count: infinite - animation: pulsate 1s ease-out - animation-iteration-count: infinite - &.informer-primary - background: $brand-primary - &.informer-success - background: $brand-success - &.informer-info - background: $brand-info - &.informer-warning - background: $brand-warning - &.informer-danger - background: $brand-danger - li li .informer - top: 12px - .xn-icon-button .informer - left: auto - bottom: auto - right: 1px - top: 5px + > li + + &.xn-profile + padding: 0 + border-bottom: 1px solid #273541 + .profile-mini + display: none + width: 50px + padding: 7px + img + width: 36px + border: 2px solid #FFF + border-radius: 50% + .informer + font-size: 11px + position: absolute + line-height: 20px + text-align: center + padding: 0 5px + background: #BBB + right: 10px + top: 15px + color: #FFF + border-radius: 3px + &.pulsate + animation: pulsate 1s ease-out + animation-iteration-count: infinite + &.informer-primary + background: $brand-primary + &.informer-success + background: $brand-success + &.informer-info + background: $brand-info + &.informer-warning + background: $brand-warning + &.informer-danger + background: $brand-danger + li li .informer + top: 12px + .xn-icon-button .informer + left: auto + bottom: auto + right: 1px + top: 5px /* * Profile @@ -241,11 +237,11 @@ margin: 0 0 10px text-align: center img width: 100px border: 3px solid #FFF - +border-radius(50%) + border-radius: 50% .profile-data width: 100% float: left text-align: center .profile-data-name @@ -266,12 +262,12 @@ font-size: 14px color: #DDD border: 2px solid #DDD line-height: 25px position: absolute - +border-radius(50%) + border-radius: 50% padding: 0 - +transition(all 200ms ease) + transition: all 200ms ease &.profile-control-left left: 15px top: 53px text-align: center &.profile-control-right