/sass/recipes/background/_carbon-fiber.scss

https://bitbucket.org/decore/my-svadba.ru · Sass · 33 lines · 20 code · 4 blank · 9 comment · 0 complexity · d4e764f36dbaa67e93b0748e6faa7955 MD5 · raw file

  1. /**
  2. * Carbon Fiber background pattern
  3. *
  4. * @author Lea Verou http://lea.verou.me/ for the original pattern
  5. * @author David Kaneda http://www.davidkaneda.com/ for the Sass mixin
  6. *
  7. * @link http://lea.verou.me/css3patterns/
  8. *
  9. */
  10. @import "compass/css3/images";
  11. $base-color: #222 !default;
  12. @mixin background-carbon-fiber(
  13. $background-color: $base-color,
  14. $dot-color: scale-lightness($background-color, -50),
  15. $highlight-color: rgba(#fff, .1),
  16. $spacing-size: 16px,
  17. $dot-size: 2px
  18. ) {
  19. @include background-image(
  20. radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
  21. radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
  22. radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px),
  23. radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px)
  24. );
  25. background-repeat: repeat;
  26. background-position: 0 0, $spacing-size/2 $spacing-size/2, 0 1px, $spacing-size/2 $spacing-size/2 + 1px;
  27. background-color: $background-color;
  28. background-size: $spacing-size $spacing-size;
  29. }