Advertisement
Vakhoo

Untitled

Dec 19th, 2014
172
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.36 KB | None | 0 0
  1. /* REQUIRED for core functionality */
  2.  
  3. .responsive-tabs__heading { display: none;}
  4. .responsive-tabs__list__item { display: inline; cursor:pointer;}
  5.  
  6.  
  7. @media (max-width: 767px) {
  8. .responsive-tabs__list { display: none;}
  9. .responsive-tabs__heading { display: block; cursor: pointer; }
  10. .responsive-tabs__panel--closed-accordion-only { display: none;}
  11. }
  12.  
  13. @media (min-width: 768px) {
  14. .responsive-tabs__panel--closed-accordion-only { display: block !important;}
  15. }
  16.  
  17. /* END - Required for core functionality */
  18.  
  19.  
  20. /* OPTIONAL - Basic Skin */
  21.  
  22. .responsive-tabs-wrapper {
  23. clear: both;
  24. zoom: 1;
  25. }
  26. .responsive-tabs-wrapper:before,
  27. .responsive-tabs-wrapper:after {
  28. content: "";
  29. display: table;
  30. }
  31. .responsive-tabs-wrapper:after {
  32. clear: both;
  33. }
  34.  
  35. .responsive-tabs__heading:focus,
  36. .responsive-tabs__list__item:focus { outline: 1px solid #ccc; }
  37.  
  38. .responsive-tabs__heading--active:focus,
  39. .responsive-tabs__list__item--active:focus { outline: none !important;}
  40.  
  41. .responsive-tabs__list { font-size: 1.2em; margin: 0em 0 0 0; padding: 0;border-bottom: 1px solid #ddd; padding-bottom:11px; line-height: 1em;}
  42. .responsive-tabs__list__item { background: rgba(255, 153, 0, 1); padding: 10px 20px; margin-right: 1em; border-top-left-radius: 5px; border-top-right-radius: 5px;border: 1px solid #ddd;color:#000; }
  43. .responsive-tabs__list__item:hover {background: rgba(255, 153, 0, 1); color:#fff;}
  44. .responsive-tabs__list__item--active,
  45. .responsive-tabs__list__item--active:hover { background: #000; border-top-color: #ff0; color:#fff;}
  46.  
  47. .responsive-tabs__panel { margin-bottom: 2px;}
  48.  
  49. @media (max-width: 767px) {
  50. .responsive-tabs__heading {
  51. padding: 0.5em; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
  52. background: #ddd;
  53. position: relative;
  54. }
  55.  
  56. .responsive-tabs__heading:after {
  57. content:"";
  58. display: block;
  59. position: absolute;
  60. right: 20px;
  61. top: 40%;
  62. width: 0;
  63. height: 0;
  64. border-left: 10px solid transparent;
  65. border-right: 10px solid transparent;
  66. border-top: 10px solid #000;
  67. }
  68. .responsive-tabs__heading:hover,
  69. .responsive-tabs__heading--active:hover { background-color: #efefef}
  70. .responsive-tabs__heading--active { background: #fff;}
  71. .responsive-tabs__heading--active:after {
  72. border-bottom: 10px solid #000;
  73. border-top:0;
  74. }
  75. }
  76.  
  77. /* END - Optional - Basic Skin */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement