You are here

slick.theme--vtabs.css in Slick extras 7.3

Same filename and directory in other branches
  1. 8 css/theme/slick.theme--vtabs.css

. Adds a vertical tabs like thumbnail navigation.

File

css/theme/slick.theme--vtabs.css
View source
  1. /**
  2. * @file.
  3. * Adds a vertical tabs like thumbnail navigation.
  4. */
  5. .slick-wrapper--vtabs {
  6. max-width: 100%;
  7. overflow: hidden;
  8. }
  9. .slick--skin--vtabs {
  10. height: 100%;
  11. margin: 0;
  12. padding: 42px 0;
  13. position: absolute;
  14. right: 0;
  15. text-align: left;
  16. top: 0;
  17. width: 210px;
  18. z-index: 9;
  19. }
  20. .slick--skin--vtabs .slick__arrow {
  21. bottom: 0;
  22. height: 100%;
  23. left: 50%;
  24. margin-left: -1px;
  25. top: 0;
  26. width: 2px;
  27. }
  28. .slick--skin--vtabs .slick-arrow {
  29. left: 50%;
  30. margin-left: -21px;
  31. -ms-transform: rotate(90deg);
  32. -webkit-transform: rotate(90deg);
  33. transform: rotate(90deg);
  34. }
  35. .slick--skin--vtabs .slick-prev {
  36. top: 0;
  37. }
  38. .slick--skin--vtabs .slick-next {
  39. top: auto;
  40. bottom: 0;
  41. }
  42. .slick--skin--vtabs .slick__slide {
  43. background: #222;
  44. width: 100%;
  45. }
  46. .slick--skin--vtabs .slick-current {
  47. background: #000;
  48. }
  49. .slick--skin--vtabs.slick--has-caption {
  50. width: 280px;
  51. }
  52. .slick--skin--vtabs.slick--has-caption .slick__slide {
  53. padding: 0 5px;
  54. }
  55. .slick--skin--vtabs.slick--has-caption img {
  56. float: left;
  57. max-width: 68px;
  58. }
  59. .slick--skin--vtabs.slick--has-caption .slide__caption {
  60. color: #fff;
  61. font-size: 14px;
  62. font-size: 0.875rem;
  63. margin-left: 80px;
  64. padding: 2px 0;
  65. width: auto;
  66. }