127 lines
2.7 KiB
SCSS
127 lines
2.7 KiB
SCSS
.clearfix:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.wrapper {
|
|
margin: 0 auto;
|
|
max-width: $fg-max-width;
|
|
min-width: $fg-min-width;
|
|
width: flex-grid(12);
|
|
text-align: left;
|
|
|
|
div.table-wrapper {
|
|
display: table;
|
|
width: flex-grid(12);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
|
|
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
|
|
@include border-radius(3px);
|
|
border: 1px solid darken(#888, 10%);
|
|
padding: 4px 8px;
|
|
color: #fff;
|
|
font: bold $body-font-size $body-font-family;
|
|
cursor: pointer;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
&:hover, &:focus {
|
|
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
|
|
@include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
|
|
border: 1px solid darken(#888, 20%);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
@include box-sizing(border-box);
|
|
display: table-cell;
|
|
padding: lh();
|
|
vertical-align: top;
|
|
width: flex-grid(9) + flex-gutter();
|
|
}
|
|
|
|
.sidebar {
|
|
@include box-shadow( inset -1px 0 0 #f6f6f6);
|
|
@include box-sizing(border-box);
|
|
background: #e3e3e3;
|
|
border-right: 1px solid #d3d3d3;
|
|
display: table-cell;
|
|
font-family: $body-font-family;
|
|
text-shadow: 0 1px 0 #f1f1f1;
|
|
vertical-align: top;
|
|
width: flex-grid(3);
|
|
position: relative;
|
|
|
|
h3 {
|
|
@include box-shadow(0 1px 0 #eee);
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
color: #000;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
|
|
a {
|
|
@include transition();
|
|
color: lighten($text-color, 10%);
|
|
display: block;
|
|
font-size: $body-font-size;
|
|
padding: 7px 7px 7px 30px;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
@include box-shadow(0 1px 0 #fff);
|
|
background: #efefef;
|
|
}
|
|
}
|
|
|
|
span.ui-icon {
|
|
background-image: url(images/ui-icons_454545_256x240.png);
|
|
}
|
|
|
|
&.active {
|
|
@include box-shadow(none);
|
|
background: none;
|
|
border: 0;
|
|
border-bottom: 1px solid #bbb;
|
|
color: #000;
|
|
font-weight: bold;
|
|
|
|
a {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topbar {
|
|
background: #F6EFD4;
|
|
border-bottom: 1px solid darken(#F6EFD4, 10%);
|
|
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
|
|
font-size: 12px;
|
|
text-shadow: 0 1px 0 #fff;
|
|
@extend .clearfix;
|
|
|
|
a {
|
|
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
|
|
background: darken(#F6EFD4, 5%);
|
|
border-left: 1px solid darken(#f6efd4, 20%);
|
|
color: darken(#F6EFD4, 80%);
|
|
padding: lh(.75);
|
|
text-transform: uppercase;
|
|
display: block;
|
|
|
|
&:hover {
|
|
color: darken(#F6EFD4, 60%);
|
|
text-decoration: none;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|