Advertisement
Guest User

Untitled

a guest
Dec 8th, 2013
154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .responsive-tabs__heading { display: none; }
  2. .responsive-tabs__list__item { display: inline; cursor:pointer; }
  3.  
  4. @media (max-width: 1197px) {
  5.     .responsive-tabs__list { display: none; }
  6.     .responsive-tabs__heading { display: block; cursor: pointer; }
  7.     .responsive-tabs__panel--closed-accordion-only { display: none; }
  8. }
  9.  
  10. @media (min-width: 1198px) {
  11.     .responsive-tabs__panel--closed-accordion-only { display: block; }
  12. }
  13.  
  14. /* === Basic design === */
  15.  
  16. .responsive-tabs-wrapper {
  17. clear: both;
  18.     margin-bottom: 20px;
  19.     zoom: 1;
  20. }
  21. .responsive-tabs-wrapper:before,
  22. .responsive-tabs-wrapper:after {
  23.     content: "";
  24.     display: table;
  25. }
  26. .responsive-tabs-wrapper:after {
  27.     clear: both;
  28. }
  29.  
  30. .responsive-tabs__heading:focus,
  31. .responsive-tabs__list__item:focus {
  32.     outline: 1px solid transparent;
  33. }
  34.  
  35. .responsive-tabs__heading--active:focus,
  36. .responsive-tabs__list__item--active:focus {
  37.     outline: none;
  38. }
  39.  
  40. .responsive-tabs .responsive-tabs__list {
  41.     font-size: 20px;
  42.     margin: 20px 0 5px 0;
  43.     padding-bottom:0;
  44.     line-height: 1;
  45.     position: relative;
  46.     top: 15px
  47. }
  48.  
  49. .responsive-tabs__list__item {
  50.     padding: 10px 20px 10px;
  51.     margin: 0 14px 0 0;
  52.     border: 1px solid transparent;
  53. }
  54.  
  55. .responsive-tabs__list__item:hover {
  56.     color: #222;
  57. }
  58.  
  59. .responsive-tabs__list__item--active,
  60. .responsive-tabs__list__item--active:hover {
  61.     color: #606060;
  62.     background: #fff;
  63.     border: 1px solid #ddd;
  64.     border-bottom-color: #fff;
  65.     border-top-left-radius: 4px;
  66.     border-top-right-radius: 4px;
  67. }
  68.  
  69. .responsive-tabs__panel {
  70.     background: #fff;
  71.     border: 1px solid #ddd;
  72.     margin-bottom: 20px;
  73.     padding: 20px 20px 0;
  74. }
  75.  
  76. /* --- ACCORDION  --- */
  77.  
  78. @media (max-width: 1197px) {
  79.  
  80.     .responsive-tabs-wrapper {
  81.         border-top: 1px solid #ddd;
  82.         }
  83.  
  84.     .responsive-tabs__heading {
  85.         background: #fff;
  86.         color: #909090;
  87.         padding: 10px 0 10px 20px;
  88.         border: 1px solid #ddd;
  89.         border-top: none;
  90.         font-size: 18px;
  91.         margin: 0;
  92.         position: relative;
  93.     }
  94.  
  95.     .responsive-tabs__heading:after {
  96.         content:"";
  97.         display: block;
  98.         position: absolute;
  99.         right: 20px;
  100.         top: 20px;
  101.         width: 0;
  102.         height: 0;
  103.         border-left: 6px solid transparent;
  104.         border-right: 6px solid transparent;
  105.         border-top: 6px solid #444;
  106.     }
  107.  
  108.     .responsive-tabs__heading:hover {
  109.         color: #606060;
  110.     }
  111.  
  112.     .responsive-tabs__heading--active,
  113.     .responsive-tabs__heading--active:hover {
  114.         background: #e3e3e3;
  115.         color: #606060;
  116.     }
  117.  
  118.     .responsive-tabs__heading--active:after {
  119.         border-bottom: 6px solid #404040;
  120.         border-top: 0;
  121.         top: 18px;
  122.     }
  123.  
  124.     .responsive-tabs__panel {
  125.         border-top: none;
  126.         margin: 0;
  127.     }
  128. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement