app/assets/stylesheets/_layout.css.scss
@import '_base';
@import '_dynamic';
/**********************************************************
*
* Default styles
*
* - elements sorted alphabetically
* - classes sorted alphabetically
* - properties sorted in logical order
* - no magic numbers / colors allowed. this is what SASS is for.
**********************************************************/
/*
*
* Elements
*
*/
* {
margin: 0;
padding: 0;
color: nth($master-dark, 1);
}
html, body {
height:100%;
}
a {
outline: none;
text-decoration: underline;
color: nth($master-dark, 1);
&:visited {
color: nth($master-dark-2, 1);
}
&:hover {
color: nth($master-highlight, 1);
}
&:active {
color: nth($master-complementary, 1);
}
}
h2 {
margin: 0.83em 0;
}
h3 {
margin: 0.70em 0;
}
baw-debug-info {
margin-top: 2em;
}
body {
background-color: nth($master-background, 1);
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
height: 100%;
}
img {
border: none;
}
html {
height: 100%;
}
li {
& ul, & ol {
margin:0 1.5em;
}
}
p {
margin: 0 0 18px;
}
pre {
font-family: sans-serif;
background-color: nth($master-background, 3);
color: nth($master-dark, 3);
}
ol {
margin:0 1.5em;
list-style-type:decimal;
}
table {
& td {
padding: auto $adjacent-padding;
border-right: $border-width single nth($master-highlight, 1);
}
& tr:nth-child(even) {
background-color: nth($master-background, 2);
}
}
ul {
@extend ol;
list-style-type:disc;
& ol{
margin:0 1.5em 1.5em 1.5em;
}
}
/* Header
-----------------------------------------------------------------------------*/
header {
height: 60px;
@include gradient("linear", nth($master-highlight-2,1) , nth($master-highlight-2,2));
border-bottom:2px solid nth($master-highlight, 1);
margin: 0;
& h1 {
font-size: 2em;
margin: 0 0 0 15px;
float:left;
line-height:60px;
& a {
text-decoration: none;
}
}
& ul {
list-style-type: none;
float: right;
line-height:40px;
margin: 0 15px 0 0;
& li {
display: inline-block;
padding: 0;
margin: 3px;
float:left;
}
}
}
/* Middle
-----------------------------------------------------------------------------*/
#page-wrapper {
width: 100%;
min-width: 768px;
//height: auto !important;
//height: 100%;
position: relative;
//top: -5px;
/* for sticky footer */
min-height: 100%;
/* end for sticky footer */
}
#content-wrapper{
margin-top: 0px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: $footer-height;
padding-top: 15px;
/* for sticky footer */
overflow:auto;
padding-bottom: $footer-height;
/* end for sticky footer */
}
#content {
margin:5px 15px;
}
/* Footer
-----------------------------------------------------------------------------*/
footer {
margin: 0;
min-width: 768px;
background: nth($master-highlight-2, 2);
border-top:2px solid nth($master-highlight,1);
/* for sticky footer */
/* from: http://www.cssstickyfooter.com/using-sticky-footer-code.html */
position:relative;
margin-top:-($footer-height + 42);
height: $footer-height;
clear:both;
/* end for sticky footer */
ul{
list-style-type:none;
li {
float:left;
margin: 0 15px 0 0;
}
}
}
/* stick footer Opera Fix */
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
/* General Classes
-----------------------------------------------------------------------------*/
.short-guid {
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.select2-container {
min-width: 150px;
width: 100%;
}
.rounded-corners {
border-style: $border-style;
border-width: $border-width;
@include rounded-corners($standard-border-radius);
}
.clear-pseudo {
&:after {
display: block;
clear: both;
content: " ";
height: 0;
overflow: hidden;
}
}
.clear {
overflow: hidden;
}
.standard-transition{
@include transition();
}
.ui-show {
//@extend .standard-transition;
}
.ui-hide {
opacity: 0;
//@extend .standard-transition;
display: none;
}
/* Form Styles
-----------------------------------------------------------------------------*/
input {
vertical-align: middle;
}
label {
&>span {
display: block;
font-weight: bold;
}
&>span + * {
margin-left: 2em;
font-weight: normal;
}
& > input, & > textarea {
//@include vendor-prefix(box-shadow, 0px 0px 8px rgba(0, 0, 0, 0.3));
border: 1px solid nth($primary-color, 2);
}
}
$start-gradient: #F5FFD9;
button {
padding: 2px 6px;
margin: 3px;
@include gradient("linear",$start-gradient, nth($master-highlight-2,1));
border: 1px solid nth($master-highlight-2,2);
@extend .rounded-corners;
font-size: 11pt;
}
button[disabled] {
border-color: nth($master-dark, 3);
@include gradient("linear", #aeb897, nth($master-dark-2,3));
}
button a {
text-decoration: none;
}
button:hover:not([disabled]) {
@include vendor-prefix(box-shadow, 0px 0px 8px nth($master-highlight-2, 2));
border:1px solid nth($master-highlight-2, 2);
}
textarea {
width: 450px;
height: 150px;
}
textarea:focus, input:focus{
outline:none;
@include vendor-prefix(box-shadow, 0px 0px 8px nth($master-highlight-2, 2));
}
pre {
width: 500px;
}
/* Form Validation Styles
------------------------------------------------------------------------------*/
input, textarea{
background-color: white;
}
input.ng-invalid.ng-dirty, textarea.ng-invalid.ng-dirty, {
border-color: nth($error-dirty, 2);
@include vendor-prefix(box-shadow, 0px 0px 8px nth($error-dirty, 2));
background-color: nth($error-dirty, 3);
}
input.ng-valid.ng-dirty, textarea.ng-valid.ng-dirty {
border: 1px solid nth($primary-color, 2);
}
input.ng-pristine.ng-valid, textarea.ng-pristine.ng-valid {
border: 1px solid nth($primary-color, 2);
}
input.ng-pristine.ng-invalid, textarea.ng-pristine.ng-invalid {
border: 1px solid nth($primary-color, 3);
@include vendor-prefix(box-shadow, 0px 0px 8px nth($primary-color, 3));
background-color: #FFFFFF; /*nth($primary-color, 3);*/
}
/* List Styles
------------------------------------------------------------------------------*/
ul.item-list {
list-style-type: none;
& li{
float:left;
margin: 5px;
@extend .rounded-corners;
border-color: nth($primary-color, 2);
background-color: nth($master-background, 2);
display:block;
width:400px;
height:180px;
& div.item-text{
vertical-align: top;
display: inline-block;
padding: $standard-padding;
width: 180px;
float:left;
}
& div.item-image {
width:150px;
height:150px;
float:left;
}
& img{
padding: $standard-padding;
display: inline-block;
}
.tile-image {
max-height: 150px;
max-width: 150px;
margin-left: auto;
margin-right: auto;
display:block;
}
}
}
.large-image {
max-height: 300px;
max-height: 300px;
}
.right-column {
float: right;
width: 50%;
}