164 lines
2.7 KiB
Text
164 lines
2.7 KiB
Text
|
|
//PRESETS
|
|
|
|
body, div, nav, ul, li, a, label, span, table {
|
|
margin: 0;
|
|
padding: 0;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
background-clip: border-box;
|
|
}
|
|
body {
|
|
min-height: 100%;
|
|
height: 100%;
|
|
background: @background;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
div {
|
|
float: left;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
padding: 5px 10px;
|
|
.border-radius(7px);
|
|
.fasttrans;
|
|
color: @key;
|
|
}
|
|
a:hover { .fasttrans; color: @keylight;}
|
|
|
|
.hide { display: none; }
|
|
|
|
//GRID COLUMNS
|
|
|
|
.twelve { .column(12); }
|
|
.ten { .column(10); }
|
|
.nine { .column(9); }
|
|
.eight { .column(8); }
|
|
.six { .column(6); }
|
|
.five { .column(5); }
|
|
.four { .column(4); }
|
|
.three { .column(3); }
|
|
.two { .column(2); }
|
|
|
|
//STRUCTURES
|
|
|
|
#page {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 500px;
|
|
background: white;
|
|
}
|
|
|
|
.unit { //used for tables
|
|
overflow: hidden;
|
|
.background-linear-gradient(#fff 25%, @lightgrey);
|
|
border: 1px solid @lightgrey;
|
|
.border-radius(5px);
|
|
.box-shadow(1px 1px 1px 0 rgba(0, 0, 0, 0.6));
|
|
}
|
|
.contentunit {
|
|
.background-linear-gradient(white, fadeout(@keylight, 98%));
|
|
.border-radius(10px);
|
|
border: 2px solid fadeout(@keylight, 60%);
|
|
}
|
|
.transcontentunit {
|
|
.contentunit;
|
|
background: transparent none;
|
|
border: 2px solid transparent;
|
|
}
|
|
.colorcontentunit {
|
|
.contentunit;
|
|
background: @key;
|
|
border: 2px solid @key;
|
|
font-size: 1.3em;
|
|
color: white;
|
|
padding: 20px;
|
|
}
|
|
|
|
label {
|
|
width: 40%;
|
|
text-align: right;
|
|
margin-left: 7px;
|
|
}
|
|
|
|
|
|
i {
|
|
color: white;
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
background-color: @key;
|
|
.border-radius(150px);
|
|
.box-shadow(0px 1px 2px 0 @darkestgrey);
|
|
.fasttrans;
|
|
}
|
|
i:hover { background-color: @keylight; .fasttrans; }
|
|
|
|
.social i {
|
|
font-size: 26px;
|
|
height: 32px;
|
|
width: 42px;
|
|
padding-top: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.hide { display: none; }
|
|
|
|
.tag {
|
|
display: block;
|
|
background: fadeout(@keylight, 80%);
|
|
.border-radius(2px);
|
|
padding: 2px 5px;
|
|
margin: 2px 10px 2px 0;
|
|
border: 1px solid @lightestgrey;
|
|
color: @darkgrey;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.footer {
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 50px 30px 0 30px;
|
|
|
|
.copy, .credit {
|
|
.sans;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
margin: 0;
|
|
width: auto;
|
|
padding: 0 10px;
|
|
}
|
|
.credit a {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 30px;
|
|
color: @key;
|
|
}
|
|
.credit a:hover {
|
|
color: @keydark;
|
|
}
|
|
.copy {
|
|
color: @darkgrey;
|
|
float: right;
|
|
}
|
|
.login {
|
|
float: right;
|
|
|
|
a { .sans; }
|
|
}
|
|
|
|
.social {
|
|
float: right;
|
|
height: 100%;
|
|
padding-right: 50px;
|
|
}
|
|
|
|
}
|
|
|