Flatter design on User Page

- Cleanup of the design ( remove border-radius ... )
- Fixed some alignment and width in mobile and lower screen size
This commit is contained in:
Gilles Manzato 2013-11-01 15:27:01 +01:00
parent 57d78aaba6
commit 3826e67007
4 changed files with 60 additions and 29 deletions

View File

@ -56,7 +56,6 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: $nav-stacked-background-color; background-color: $nav-stacked-background-color;
@include border-radius-all(4px);
@include box-shadow(0 1px 0 $white); @include box-shadow(0 1px 0 $white);
> li { > li {
border-bottom: 1px solid $nav-stacked-divider-color; border-bottom: 1px solid $nav-stacked-divider-color;
@ -66,16 +65,15 @@
> a { > a {
margin: 0; margin: 0;
padding: 13px 13px 13px 30px; padding: 13px 13px 13px 30px;
font-weight: bold;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
color: $nav-stacked-color;
} }
} }
.active > a, .active > a,
.active .icon-chevron-right { .active .icon-chevron-right {
color: $nav-stacked-border-color-active; color: $white;
text-shadow: 0 1px 0 rgba($white, 0.5);
background-color: $nav-stacked-background-color-active; background-color: $nav-stacked-background-color-active;
} }
.count { .count {

View File

@ -71,12 +71,13 @@ $nav-pills-background-color-active: #e45735 !default;
// Stacked nav // Stacked nav
$nav-stacked-color: #534d4b !default;
$nav-stacked-border-color: #ccc !default; $nav-stacked-border-color: #ccc !default;
$nav-stacked-background-color: #fafafa !default; $nav-stacked-background-color: #fafafa !default;
$nav-stacked-divider-color: #e6e6e6 !default; $nav-stacked-divider-color: #e6e6e6 !default;
$nav-stacked-chevron-color: #ccc !default; $nav-stacked-chevron-color: #ccc !default;
$nav-stacked-border-color-active: #f15b22 !default; $nav-stacked-border-color-active: #f15b22 !default;
$nav-stacked-background-color-active: #f9e7e0 !default; $nav-stacked-background-color-active: #e45735 !default;
// Button nav // Button nav

View File

@ -40,7 +40,6 @@
color: $darkish_gray; color: $darkish_gray;
} }
.warning { .warning {
@include border-radius-all(6px);
background-color: lighten($red, 10%); background-color: lighten($red, 10%);
padding: 5px 8px; padding: 5px 8px;
color: $white; color: $white;
@ -110,16 +109,16 @@
} }
.user-main { .user-main {
width: 840px; width: 850px;
float: left; float: left;
margin-bottom: 50px; margin-bottom: 50px;
@include medium-width { @include medium-width {
width: 730px; width: 735px;
} }
@include small-width { @include small-width {
width: 650px; width: 680px;
} }
.user-content { .user-content {
@ -127,21 +126,18 @@
background-color: white; background-color: white;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-bottom: 10px; margin-bottom: 10px;
@include border-radius-all(4px);
} }
.about { .about {
background-color: #444; background-color: #444;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
border: 1px solid #bbb;
color: #fff; color: #fff;
@include border-radius-all(4px);
.details { .details {
text-align: center; text-align: center;
padding: 10px; padding: 12px;
h1 { h1 {
@ -188,11 +184,12 @@
text-align: right; text-align: right;
padding: 0 10px; padding: 0 10px;
width: 20%; width: 20%;
@include border-radius-all(4px);
dd { dd {
color: white; color: white;
margin: 0 0 7px 0; margin: 0 0 7px 0;
overflow: hidden;
text-overflow: ellipsis;
} }
dt { dt {
color: #aaa; color: #aaa;
@ -203,9 +200,8 @@
.controls { .controls {
background-color: #ddd; background-color: #ddd;
margin-top: 10px; padding: 12px;
padding: 5px; height: 30px;
height: 32px;
.right { .right {
float: right; float: right;
@ -273,7 +269,6 @@
background-color: white; background-color: white;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-bottom: 10px; margin-bottom: 10px;
@include border-radius-all(4px);
} }
.type { .type {
color: lighten($black, 40%); color: lighten($black, 40%);

View File

@ -47,7 +47,6 @@
width: 220px; width: 220px;
min-height: 200px; min-height: 200px;
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 5px;
color: #444; color: #444;
word-wrap: break-word; word-wrap: break-word;
} }
@ -56,8 +55,12 @@
h3 { h3 {
color: #666; color: #666;
padding-left: 5px;
}
.nav-stacked {
border-left: 0;
border-right: 0;
} }
.summary { .summary {
height: 50px; height: 50px;
} }
@ -112,11 +115,8 @@
background-color: #444; background-color: #444;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
border: 1px solid #bbb;
color: #fff; color: #fff;
@include border-radius-all(4px);
.details { .details {
text-align: center; text-align: center;
padding: 10px; padding: 10px;
@ -145,7 +145,6 @@
background-color: #222; background-color: #222;
text-align: left; text-align: left;
padding: 0 10px; padding: 0 10px;
@include border-radius-all(4px);
dd { dd {
color: white; color: white;
@ -161,9 +160,49 @@
.controls { .controls {
background-color: #ddd; background-color: #ddd;
margin-top: 0px; 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 { .item {
padding: 10px 8px; padding: 10px 8px;
background-color: white; background-color: white;
border: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9;
margin-bottom: 10px;
@include border-radius-all(4px);
} }
.type { .type {
color: lighten($black, 40%); color: lighten($black, 40%);