_thumbs.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. @import 'global';
  5. //
  6. // @name _thumbs.scss
  7. // @dependencies _globals.scss
  8. //
  9. //
  10. // @variables
  11. //
  12. $include-html-media-classes: $include-html-classes !default;
  13. // We use these to control border styles
  14. $thumb-border-style: solid !default;
  15. $thumb-border-width: 4px !default;
  16. $thumb-border-color: $white !default;
  17. $thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default;
  18. $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
  19. // Radius and transition speed for thumbs
  20. $thumb-radius: $global-radius !default;
  21. $thumb-transition-speed: 200ms !default;
  22. //
  23. // @mixins
  24. //
  25. // We use this to create image thumbnail styles.
  26. //
  27. // $border-width - Width of border around thumbnail. Default: $thumb-border-width.
  28. // $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow.
  29. // $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover.
  30. @mixin thumb(
  31. $border-width:$thumb-border-width,
  32. $box-shadow:$thumb-box-shadow,
  33. $box-shadow-hover:$thumb-box-shadow-hover) {
  34. border: $thumb-border-style $border-width $thumb-border-color;
  35. box-shadow: $box-shadow;
  36. display: inline-block;
  37. line-height: 0;
  38. max-width: 100%;
  39. &:hover,
  40. &:focus {
  41. box-shadow: $box-shadow-hover;
  42. }
  43. }
  44. @include exports("thumb") {
  45. @if $include-html-media-classes {
  46. /* Image Thumbnails */
  47. .th {
  48. @include thumb;
  49. @include single-transition(all, $thumb-transition-speed, ease-out);
  50. &.radius { @include radius($thumb-radius); }
  51. }
  52. }
  53. }