Rearranged the filter and sort bar and made it consistant

This commit is contained in:
Kyle Fiedler
2012-07-06 15:01:59 -04:00
parent cb2a6f9d02
commit 0cb4781e43
4 changed files with 124 additions and 92 deletions

View File

@@ -18,21 +18,32 @@ section.cal {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px;
padding: 6px 6px 6px 0;
font-size: 12px;
}
ul {
@include inline-block;
float: right;
li {
@include inline-block;
margin-left: 6px;
border-left: 1px solid #ddd;
margin-right: 6px;
border-right: 1px solid #ddd;
padding: 0 6px;
&:last-child {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
a {
@include inline-block();
font-size: 12px;
@include inline-block;
margin: 0 6px;
font-style: italic;
}
ul {
@@ -63,7 +74,6 @@ section.cal {
float: left;
width: flex-grid(3) + ((flex-gutter() * 3) / 4);
background-color: $light-blue;
overflow-y: hidden;
&:hover {
li.create-module {
@@ -116,6 +126,7 @@ section.cal {
li {
border-bottom: 1px solid darken($light-blue, 8%);
position: relative;
overflow-y: hidden;
&:hover {
background-color: lighten($yellow, 14%);
@@ -232,7 +243,7 @@ section.cal {
}
section.new-section {
margin-top: 10px;
margin: 10px 0 40px;
@include inline-block();
position: relative;
@@ -319,11 +330,11 @@ section.cal {
&:hover {
opacity: 1;
width: flex-grid(4) + flex-gutter();
width: flex-grid(5) + flex-gutter();
background-color: transparent;
+ section.main-content {
width: flex-grid(8);
width: flex-grid(7);
opacity: .6;
}
}
@@ -331,25 +342,21 @@ section.cal {
> header {
@include transition;
overflow: hidden;
height: 30px;
> a {
display: none;
}
ul {
float: none;
display: block;
li {
border-left: 0;
margin-left: 0;
margin-bottom: 4px;
ul {
display: inline;
}
}
}
&:hover {
height: 10%;
}
}
ol {

View File

@@ -1,29 +1,45 @@
section#unit-wrapper {
section.filters {
@include clearfix;
background: $light-blue;
border-bottom: 1px solid lighten($dark-blue, 40%);
padding: 5px 20px;
margin: -20px -20px 10px;
opacity: .7;
opacity: .4;
margin-bottom: 10px;
@include transition;
&:hover {
opacity: 1;
padding: 10px 20px;
margin: -20px -20px 10px;
}
h2 {
@include inline-block();
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px 6px 6px 0;
font-size: 12px;
}
ul {
@include clearfix();
list-style: none;
padding: 6px;
li {
@include inline-block();
@include inline-block;
margin-right: 6px;
border-right: 1px solid #ddd;
padding-right: 6px;
&.advanced {
&.search {
float: right;
border: 0;
}
a {
&.more {
font-size: 12px;
@include inline-block;
margin: 0 6px;
font-style: italic;
}
}
}
}
@@ -44,11 +60,12 @@ section#unit-wrapper {
@include clearfix;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
float: left;
color: $bright-blue;
float: left;
font-size: 12px;
letter-spacing: 1px;
line-height: 19px;
text-transform: uppercase;
}
}
@@ -149,6 +166,14 @@ section#unit-wrapper {
border-bottom: 0;
}
&.new-module a {
background-color: darken($light-blue, 2%);
&:hover {
background-color: lighten($yellow, 10%);
}
}
a {
color: $dark-blue;
}
@@ -158,9 +183,10 @@ section#unit-wrapper {
li {
padding: 6px;
border-collapse: collapse;
&:last-child {
border-bottom: 0;
border-bottom: 1px solid darken($light-blue, 8%);
}
&:hover {
@@ -171,6 +197,7 @@ section#unit-wrapper {
}
}
&.empty {
padding: 12px;
@@ -182,7 +209,6 @@ section#unit-wrapper {
}
a.draggable {
float: right;
opacity: .3;
}
}