default.txt 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @import "compass/reset";
  2. // variables
  3. $colorGreen: #008000;
  4. $colorGreenDark: darken($colorGreen, 10);
  5. @mixin container {
  6. max-width: 980px;
  7. }
  8. // mixins with parameters
  9. @mixin button($color:green) {
  10. @if ($color == green) {
  11. background-color: #008000;
  12. }
  13. @else if ($color == red) {
  14. background-color: #B22222;
  15. }
  16. }
  17. button {
  18. @include button(red);
  19. }
  20. div,
  21. .navbar,
  22. #header,
  23. input[type="input"] {
  24. font-family: "Helvetica Neue", Arial, sans-serif;
  25. width: auto;
  26. margin: 0 auto;
  27. display: block;
  28. }
  29. .row-12 > [class*="spans"] {
  30. border-left: 1px solid #B5C583;
  31. }
  32. // nested definitions
  33. ul {
  34. width: 100%;
  35. padding: {
  36. left: 5px; right: 5px;
  37. }
  38. li {
  39. float: left; margin-right: 10px;
  40. .home {
  41. background: url('http://placehold.it/20') scroll no-repeat 0 0;
  42. }
  43. }
  44. }
  45. .banner {
  46. @extend .container;
  47. }
  48. a {
  49. color: $colorGreen;
  50. &:hover { color: $colorGreenDark; }
  51. &:visited { color: #c458cb; }
  52. }
  53. @for $i from 1 through 5 {
  54. .span#{$i} {
  55. width: 20px*$i;
  56. }
  57. }
  58. @mixin mobile {
  59. @media screen and (max-width : 600px) {
  60. @content;
  61. }
  62. }