CSS design optimization

This commit is contained in:
Andy Strobel 2014-03-06 20:11:21 +01:00
parent 1601a0e35e
commit 64d4b2aa2f
4 changed files with 84 additions and 10 deletions

View File

@ -64,7 +64,7 @@ hr {
line-height: 20px;
}
.topbar .dropdown-footer {
margin: 10px 10px 5px 10px;
margin: 10px;
}
.topbar .dropdown-header {
font-size: 16px;
@ -154,6 +154,9 @@ hr {
top: 14px;
left: 14px;
}
#topbar-first .dropdown-footer {
margin: 10px 10px 5px 10px;
}
#topbar-second {
top: 50px;
background-color: #f8f8f8;
@ -189,6 +192,11 @@ hr {
.nav-tabs {
margin-bottom: 10px;
}
.list-group a [class^="icon-"],
.list-group a [class*=" icon-"] {
display: inline-block;
width: 18px;
}
.media-list li {
padding: 10px;
border-bottom: 1px solid #eee;

View File

@ -80,7 +80,7 @@ hr {
}
.dropdown-footer {
margin: 10px 10px 5px 10px;
margin: 10px;
}
.dropdown-header {
@ -192,6 +192,10 @@ hr {
}
}
.dropdown-footer {
margin: 10px 10px 5px 10px;
}
}
#topbar-second {
@ -238,6 +242,13 @@ hr {
margin-bottom: 10px;
}
.list-group {
a [class^="icon-"], a [class*=" icon-"] {
display: inline-block;
width: 18px;
}
}
//
// 4) Media-Object
// --------------------------------------------------

View File

@ -241,21 +241,25 @@ h4 {
border-radius: 3px;
}
.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.account .dropdown-menu {
background-color: #526e82;
border: none;
}
.nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider {
background-color: #486172;
border-bottom: none;
margin: 9px 1px !important;
}
.nav-pills .dropdown-menu li,
.nav-tabs .dropdown-menu li,
.account .dropdown-menu li {
border-left: 3px solid #526e82;
}
.nav-pills .dropdown-menu li a,
.nav-tabs .dropdown-menu li a,
.account .dropdown-menu li a {
color: white;
font-weight: 400;
@ -263,21 +267,31 @@ h4 {
padding: 4px 15px;
}
.nav-pills .dropdown-menu li a i,
.nav-tabs .dropdown-menu li a i,
.account .dropdown-menu li a i {
margin-right: 5px;
font-size: 14px;
display: inline-block;
width: 14px;
}
.nav-pills .dropdown-menu li a:hover,
.nav-tabs .dropdown-menu li a:hover,
.account .dropdown-menu li a:hover {
background: none;
}
.nav-pills .dropdown-menu li:hover,
.nav-tabs .dropdown-menu li:hover,
.account .dropdown-menu li:hover,
.nav-pills .dropdown-menu li.selected,
.nav-tabs .dropdown-menu li.selected,
.account .dropdown-menu li.selected {
border-left: 3px solid #4cd9c0;
color: #ffffff !important;
background-color: #486172 !important;
}
.nav-tabs .dropdown-menu li a {
font-size: 12px;
}
.nav-pills.preferences {
right: 10px;
top: 10px;
@ -302,8 +316,19 @@ h4 {
.nav .caret,
.nav .caret:hover,
.nav .caret:active {
border-top-color: #526e82;
border-bottom-color: #526e82;
border-top-color: #555555;
border-bottom-color: #555555;
}
.nav li.dropdown > a:hover .caret,
.nav li.dropdown > a:active .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.nav .open > a .caret,
.nav .open > a:hover .caret,
.nav .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.nav-tabs > li {
font-size: 11px;
@ -313,7 +338,12 @@ h4 {
.nav .open > a:hover,
.nav .open > a:focus {
border-color: #ededed;
color: #526e82;
color: #555555;
}
.nav .open > a .caret,
.nav .open > a:hover .caret,
.nav .open > a:focus .caret {
color: #555555;
}
.btn {
border: none;

View File

@ -333,7 +333,6 @@ h4 {
}
}
}
//
@ -373,7 +372,7 @@ h4 {
// x) Navs
// --------------------------------------------------
.nav-pills, .account {
.nav-pills, .nav-tabs, .account {
.dropdown-menu {
background-color: @colorPrimary3;
@ -396,6 +395,9 @@ h4 {
i {
margin-right: 5px;
font-size: 14px;
display: inline-block;
width: 14px;
}
}
@ -410,7 +412,16 @@ h4 {
background-color: darken(@colorPrimary3, 5%) !important;
}
}
}
.nav-tabs {
.dropdown-menu {
li {
a {
font-size: 12px;
}
}
}
}
.nav-pills.preferences {
@ -442,8 +453,18 @@ h4 {
}
.nav .caret, .nav .caret:hover, .nav .caret:active {
border-top-color: @colorPrimary3;
border-bottom-color: @colorPrimary3;
border-top-color: @colorFont3;
border-bottom-color: @colorFont3;
}
.nav li.dropdown > a:hover .caret, .nav li.dropdown > a:active .caret {
border-top-color: @colorFont3;
border-bottom-color: @colorFont3;
}
.nav .open > a .caret, .nav .open > a:hover .caret, .nav .open > a:focus .caret {
border-top-color: @colorFont3;
border-bottom-color: @colorFont3;
}
.nav-tabs > li {
@ -453,7 +474,11 @@ h4 {
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
border-color: #ededed;
color: @colorPrimary3;
color: @colorFont3;
.caret {
color: @colorFont3;
}
}
//