diff --git a/app/assets/stylesheets/common/components/navs.css.scss b/app/assets/stylesheets/common/components/navs.css.scss index 9206fece1ad..8399c97e791 100644 --- a/app/assets/stylesheets/common/components/navs.css.scss +++ b/app/assets/stylesheets/common/components/navs.css.scss @@ -56,7 +56,6 @@ padding: 0; overflow: hidden; background-color: $nav-stacked-background-color; - @include border-radius-all(4px); @include box-shadow(0 1px 0 $white); > li { border-bottom: 1px solid $nav-stacked-divider-color; @@ -66,16 +65,15 @@ > a { margin: 0; padding: 13px 13px 13px 30px; - font-weight: bold; font-size: 16px; line-height: 20px; cursor: pointer; + color: $nav-stacked-color; } } .active > a, .active .icon-chevron-right { - color: $nav-stacked-border-color-active; - text-shadow: 0 1px 0 rgba($white, 0.5); + color: $white; background-color: $nav-stacked-background-color-active; } .count { diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index bdb3972c4b2..045588dc4d2 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -71,12 +71,13 @@ $nav-pills-background-color-active: #e45735 !default; // Stacked nav +$nav-stacked-color: #534d4b !default; $nav-stacked-border-color: #ccc !default; $nav-stacked-background-color: #fafafa !default; $nav-stacked-divider-color: #e6e6e6 !default; $nav-stacked-chevron-color: #ccc !default; $nav-stacked-border-color-active: #f15b22 !default; -$nav-stacked-background-color-active: #f9e7e0 !default; +$nav-stacked-background-color-active: #e45735 !default; // Button nav diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 505f543edc6..e7cdcd18380 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -40,7 +40,6 @@ color: $darkish_gray; } .warning { - @include border-radius-all(6px); background-color: lighten($red, 10%); padding: 5px 8px; color: $white; @@ -110,16 +109,16 @@ } .user-main { - width: 840px; + width: 850px; float: left; margin-bottom: 50px; @include medium-width { - width: 730px; + width: 735px; } @include small-width { - width: 650px; + width: 680px; } .user-content { @@ -127,21 +126,18 @@ background-color: white; border: 1px solid #ddd; margin-bottom: 10px; - @include border-radius-all(4px); } .about { background-color: #444; margin-bottom: 10px; overflow: hidden; - border: 1px solid #bbb; color: #fff; - @include border-radius-all(4px); .details { text-align: center; - padding: 10px; + padding: 12px; h1 { @@ -188,11 +184,12 @@ text-align: right; padding: 0 10px; width: 20%; - @include border-radius-all(4px); dd { color: white; margin: 0 0 7px 0; + overflow: hidden; + text-overflow: ellipsis; } dt { color: #aaa; @@ -203,9 +200,8 @@ .controls { background-color: #ddd; - margin-top: 10px; - padding: 5px; - height: 32px; + padding: 12px; + height: 30px; .right { float: right; @@ -273,7 +269,6 @@ background-color: white; border: 1px solid #ddd; margin-bottom: 10px; - @include border-radius-all(4px); } .type { color: lighten($black, 40%); diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 4ac9aeb6429..b74db3de661 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -47,7 +47,6 @@ width: 220px; min-height: 200px; background-color: #f8f8f8; - border-radius: 5px; color: #444; word-wrap: break-word; } @@ -56,8 +55,12 @@ h3 { color: #666; + padding-left: 5px; + } + .nav-stacked { + border-left: 0; + border-right: 0; } - .summary { height: 50px; } @@ -112,11 +115,8 @@ background-color: #444; margin-bottom: 10px; overflow: hidden; - border: 1px solid #bbb; color: #fff; - @include border-radius-all(4px); - .details { text-align: center; padding: 10px; @@ -145,7 +145,6 @@ background-color: #222; text-align: left; padding: 0 10px; - @include border-radius-all(4px); dd { color: white; @@ -161,9 +160,49 @@ .controls { background-color: #ddd; margin-top: 0px; - padding: 5px; + padding: 10px 10px 0 10px; - button { margin-bottom: 3px; } + .btn { + margin-bottom: 10px; + float: none; + } + } + } + + .about.collapsed-info { + .controls { + margin-top: 0; + } + + .details { + .secondary { display: none; } + .bio { display: none; } + + .primary { + width: 100%; + text-align: left; + margin-top: 4px; + + .avatar { + float: left; + margin-right: 10px; + border: 2px solid white; + width: 45px; + height: 45px; + } + + h1 { + margin:0; + font-size: 20px; + line-height: 22px; + } + + h2 { + font-size: 17px; + line-height: 16px; + margin-top: 4px; + } + } } } @@ -188,9 +227,7 @@ .item { padding: 10px 8px; background-color: white; - border: 1px solid #b9b9b9; - margin-bottom: 10px; - @include border-radius-all(4px); + border-bottom: 1px solid #b9b9b9; } .type { color: lighten($black, 40%);