_mixins.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. // Mixins
  2. // ---------------------------------------/
  3. @mixin border-radius($radius) {
  4. -webkit-border-radius: $radius;
  5. -moz-border-radius: $radius;
  6. border-radius: $radius;
  7. }
  8. @mixin transition($value) {
  9. -webkit-transition: $value;
  10. -moz-transition: $value;
  11. transition: $value;
  12. }
  13. // Clearfix
  14. //
  15. // Clears floats via mixin (avoid using as a class).
  16. @mixin clearfix {
  17. &:before {
  18. display: table;
  19. content: "";
  20. }
  21. &:after {
  22. display: table;
  23. clear: both;
  24. content: "";
  25. }
  26. }
  27. // media querie tools
  28. @mixin media_max($screen_width) {
  29. @media (max-width: $screen_width) { @content; }
  30. }
  31. @mixin media_min($screen_width) {
  32. @media (min-width: $screen_width) { @content; }
  33. }
  34. @mixin media_larger_than_mobile {
  35. @media (min-width: 600px) { @content; }
  36. }
  37. @mixin media_mobile {
  38. @media (max-width: 600px) { @content; }
  39. }
  40. // type utilities
  41. @mixin sans {
  42. font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  43. }
  44. @mixin sans_light {
  45. @include sans;
  46. font-weight: 300;
  47. }
  48. @mixin sans_regular {
  49. @include sans;
  50. font-weight: 400;
  51. }
  52. @mixin sans_bold {
  53. @include sans;
  54. font-weight: 700;
  55. }
  56. @mixin sans_extrabold {
  57. @include sans;
  58. font-weight: 800;
  59. }
  60. @mixin serif {
  61. font-family: "Lora", "Minion Pro", Palatino, Georgia, serif;
  62. }
  63. @mixin serif_regular {
  64. @include serif;
  65. font-weight: 400;
  66. }
  67. @mixin serif_bold {
  68. @include serif;
  69. font-weight: 700;
  70. }
  71. // layout
  72. @mixin section_border {
  73. border-top: 4px solid #c7c7c7;
  74. border-bottom: 2px solid #c7c7c7;
  75. padding: .2rem 0 .4rem;
  76. }
  77. @mixin section_border_thin {
  78. border-top: 1px solid #c7c7c7;
  79. border-bottom: 1px solid #c7c7c7;
  80. padding: .2rem 0 .2rem;
  81. }