_theme.scss 1.1KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .owl-theme {
  2. // Styling Next and Prev buttons
  3. .owl-nav {
  4. margin-top: 10px;
  5. text-align: center;
  6. -webkit-tap-highlight-color: transparent;
  7. [class*='owl-'] {
  8. color: $nav-color;
  9. font-size: $nav-font-size;
  10. margin: $nav-margin;
  11. padding: $nav-padding;
  12. background: $nav-background;
  13. display: inline-block;
  14. cursor: pointer;
  15. border-radius: 3px;
  16. &:hover {
  17. background: $nav-background-hover;
  18. color:$nav-color-hover;
  19. text-decoration: none;
  20. }
  21. }
  22. .disabled {
  23. opacity: $nav-disabled-opacity;
  24. cursor: default;
  25. }
  26. }
  27. // Styling dots
  28. .owl-nav.disabled + .owl-dots {
  29. margin-top: 10px;
  30. }
  31. .owl-dots {
  32. text-align: center;
  33. -webkit-tap-highlight-color: transparent;
  34. .owl-dot {
  35. display: inline-block;
  36. zoom: 1;
  37. *display: inline;
  38. span {
  39. width: $dot-width;
  40. height: $dot-height;
  41. margin: $dot-margin;
  42. background: $dot-background;
  43. display: block;
  44. -webkit-backface-visibility: visible;
  45. transition: opacity 200ms ease;
  46. border-radius: 30px;
  47. }
  48. &.active,
  49. &:hover {
  50. span {
  51. background: $dot-background-active;
  52. }
  53. }
  54. }
  55. }
  56. }