73 lines
1.1 KiB
Text
73 lines
1.1 KiB
Text
|
@import "compass/reset";
|
||
|
|
||
|
// variables
|
||
|
$colorGreen: #008000;
|
||
|
$colorGreenDark: darken($colorGreen, 10);
|
||
|
|
||
|
@mixin container {
|
||
|
max-width: 980px;
|
||
|
}
|
||
|
|
||
|
// mixins with parameters
|
||
|
@mixin button($color:green) {
|
||
|
@if ($color == green) {
|
||
|
background-color: #008000;
|
||
|
}
|
||
|
@else if ($color == red) {
|
||
|
background-color: #B22222;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
button {
|
||
|
@include button(red);
|
||
|
}
|
||
|
|
||
|
div,
|
||
|
.navbar,
|
||
|
#header,
|
||
|
input[type="input"] {
|
||
|
font-family: "Helvetica Neue", Arial, sans-serif;
|
||
|
width: auto;
|
||
|
margin: 0 auto;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.row-12 > [class*="spans"] {
|
||
|
border-left: 1px solid #B5C583;
|
||
|
}
|
||
|
|
||
|
// nested definitions
|
||
|
ul {
|
||
|
width: 100%;
|
||
|
padding: {
|
||
|
left: 5px; right: 5px;
|
||
|
}
|
||
|
li {
|
||
|
float: left; margin-right: 10px;
|
||
|
.home {
|
||
|
background: url('http://placehold.it/20') scroll no-repeat 0 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.banner {
|
||
|
@extend .container;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: $colorGreen;
|
||
|
&:hover { color: $colorGreenDark; }
|
||
|
&:visited { color: #c458cb; }
|
||
|
}
|
||
|
|
||
|
@for $i from 1 through 5 {
|
||
|
.span#{$i} {
|
||
|
width: 20px*$i;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@mixin mobile {
|
||
|
@media screen and (max-width : 600px) {
|
||
|
@content;
|
||
|
}
|
||
|
}
|