_e-commerce.scss 769 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. //
  2. // Pages: E-commerce
  3. //
  4. // product image
  5. .product-image {
  6. @include img-fluid ();
  7. width: 100%;
  8. }
  9. // product image thumbnails list
  10. .product-image-thumbs {
  11. align-items: stretch;
  12. display: flex;
  13. margin-top: 2rem;
  14. }
  15. // product image thumbnail
  16. .product-image-thumb {
  17. @include box-shadow($thumbnail-box-shadow);
  18. @include border-radius($thumbnail-border-radius);
  19. background-color: $thumbnail-bg;
  20. border: $thumbnail-border-width solid $thumbnail-border-color;
  21. display: flex;
  22. margin-right: 1rem;
  23. max-width: 6.5rem + ($thumbnail-padding * 2);
  24. padding: $thumbnail-padding * 2;
  25. img {
  26. @include img-fluid ();
  27. align-self: center;
  28. }
  29. &:hover {
  30. opacity: .5;
  31. }
  32. }
  33. // product share
  34. .product-share {
  35. a {
  36. margin-right: .5rem;
  37. }
  38. }