SHOW:
|
|
- or go back to the newest paste.
| 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; |
| 17 | + | clear: both; |
| 18 | margin-bottom: 20px; | |
| 19 | zoom: 1; | |
| 20 | } | |
| 21 | .responsive-tabs-wrapper:before, | |
| 22 | .responsive-tabs-wrapper:after {
| |
| 23 | - | content: ""; |
| 23 | + | content: ""; |
| 24 | - | display: table; |
| 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; |
| 45 | + | position: relative; |
| 46 | - | top: 15px |
| 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 | } |
