/*
 * @file
 * A11Y Tabs Module Default Styling
 */

.a11y-paragraphs-tabs__wrapper {
  position: relative;
  display: block;
}

.a11y-paragraphs-tabs__wrapper .tabs-tab-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a11y-paragraphs-tabs__wrapper .tabs-tab-list li {
  margin: 0;
}

/* Individual Tab Styling */
.a11y-paragraphs-tabs__wrapper .tabs-trigger {
  border-bottom: none;
  color: #666;
  display: none;
  font-weight: normal;
  margin: 0 5px 0 1px;
  padding: 15px 20px;
  text-decoration: none;
}

/* Tab hover styling */
.a11y-paragraphs-tabs__wrapper .tabs-trigger:hover {
  border-bottom: none;
  color: #000;
}

/* Tab Active State */
.a11y-paragraphs-tabs__wrapper .tabs-trigger.is-selected,
.a11y-paragraphs-tabs__wrapper .tabs-trigger.is-selected:hover,
.a11y-paragraphs-tabs__wrapper .tabs-trigger.is-selected:focus {
  border-bottom: 2px solid #bbb;
  color: #000;
  background-color: #ededed;
}

.a11y-paragraphs-tabs__wrapper .tabs-trigger:active {
  outline: none;
}

/* Tab Content Area */
.a11y-paragraphs-tabs__wrapper .tabs-panel {
  display: block;
  margin: 0;
  padding: 0;
}

.a11y-paragraphs-tabs__wrapper .tabs-panel:not(:first-of-type) {
  border-top: 2px solid #eee;
}

.a11y-paragraphs-tabs__wrapper .tabs-panel:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.a11y-paragraphs-tabs__wrapper .tabs-panel:not(:last-child) {
  border-bottom: none;
}

.a11y-paragraphs-tabs__wrapper .tabs-panel.is-hidden .content {
  display: none;
}

.a11y-paragraphs-tabs__wrapper .tabs-panel:active,
.a11y-paragraphs-tabs__wrapper .tabs-panel:focus {
  outline: none;
}

.a11y-paragraphs-tabs__wrapper .is-initialized.tabs-allowed .tabs-panel {
  display: inherit;
}

/* Accordion item */
.a11y-paragraphs-tabs__wrapper .accordeon-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 15px 20px;
}

/* Accordion item Active State */
.a11y-paragraphs-tabs__wrapper .accordeon-trigger[aria-expanded="true"] {
  background-color: #ededed;
}

.a11y-paragraphs-tabs__wrapper .accordeon-trigger-icon {
  pointer-events: none;
}

/* Makes the accordions tabs on ipad and above */
@media (min-width: 768px) {
  .a11y-paragraphs-tabs__wrapper .tabs-allowed .accordeon-trigger {
    display: none;
  }
  .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-trigger {
    display: block;
  }
  .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-panel {
    display: none;
  }
  .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-panel.is-hidden {
    display: none;
  }
  .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-panel {
    border-top: 2px solid #eee;
  }
  .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-tab-list {
    margin-bottom: -2px;
  }
}

.a11y-paragraphs-tabs__wrapper .accordeon-trigger-icon {
  display: inline-block;
  float: right;
  width: 22px;
  height: 22px;
}

.a11y-paragraphs-tabs__wrapper .accordeon-trigger-icon svg {
  margin: 0;
}

.a11y-paragraphs-tabs__wrapper [aria-expanded="true"] .vert {
  display: none;
}

.a11y-paragraphs-tabs__wrapper .label--open,
.a11y-paragraphs-tabs__wrapper .label--close {
  display: block;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.a11y-paragraphs-tabs__wrapper .label--close {
  display: none;
}

.a11y-paragraphs-tabs__wrapper .is-open .label--open {
  display: none;
}

.a11y-paragraphs-tabs__wrapper .is-open .label--close {
  display: block;
}

File

css/a11y-paragraphs-tabs.css

View source 
  1. /*

  2.  * @file

  3.  * A11Y Tabs Module Default Styling

  4.  */

  5. 

  6. .a11y-paragraphs-tabs__wrapper {

  7.   position: relative;

  8.   display: block;

  9. }

  10. 

  11. .a11y-paragraphs-tabs__wrapper .tabs-tab-list {

  12.   display: flex;

  13.   list-style: none;

  14.   margin: 0;

  15.   padding: 0;

  16. }

  17. 

  18. .a11y-paragraphs-tabs__wrapper .tabs-tab-list li {

  19.   margin: 0;

  20. }

  21. 

  22. /* Individual Tab Styling */

  23. .a11y-paragraphs-tabs__wrapper .tabs-trigger {

  24.   border-bottom: none;

  25.   color: #666;

  26.   display: none;

  27.   font-weight: normal;

  28.   margin: 0 5px 0 1px;

  29.   padding: 15px 20px;

  30.   text-decoration: none;

  31. }

  32. 

  33. /* Tab hover styling */

  34. .a11y-paragraphs-tabs__wrapper .tabs-trigger:hover {

  35.   border-bottom: none;

  36.   color: #000;

  37. }

  38. 

  39. /* Tab Active State */

  40. .a11y-paragraphs-tabs__wrapper .tabs-trigger.is-selected,

  41. .a11y-paragraphs-tabs__wrapper .tabs-trigger.is-selected:hover,

  42. .a11y-paragraphs-tabs__wrapper .tabs-trigger.is-selected:focus {

  43.   border-bottom: 2px solid #bbb;

  44.   color: #000;

  45.   background-color: #ededed;

  46. }

  47. 

  48. .a11y-paragraphs-tabs__wrapper .tabs-trigger:active {

  49.   outline: none;

  50. }

  51. 

  52. /* Tab Content Area */

  53. .a11y-paragraphs-tabs__wrapper .tabs-panel {

  54.   display: block;

  55.   margin: 0;

  56.   padding: 0;

  57. }

  58. 

  59. .a11y-paragraphs-tabs__wrapper .tabs-panel:not(:first-of-type) {

  60.   border-top: 2px solid #eee;

  61. }

  62. 

  63. .a11y-paragraphs-tabs__wrapper .tabs-panel:not(:last-child) {

  64.   border-bottom: 1px solid #eee;

  65. }

  66. 

  67. .a11y-paragraphs-tabs__wrapper .tabs-panel:not(:last-child) {

  68.   border-bottom: none;

  69. }

  70. 

  71. .a11y-paragraphs-tabs__wrapper .tabs-panel.is-hidden .content {

  72.   display: none;

  73. }

  74. 

  75. .a11y-paragraphs-tabs__wrapper .tabs-panel:active,

  76. .a11y-paragraphs-tabs__wrapper .tabs-panel:focus {

  77.   outline: none;

  78. }

  79. 

  80. .a11y-paragraphs-tabs__wrapper .is-initialized.tabs-allowed .tabs-panel {

  81.   display: inherit;

  82. }

  83. 

  84. /* Accordion item */

  85. .a11y-paragraphs-tabs__wrapper .accordeon-trigger {

  86.   display: flex;

  87.   align-items: center;

  88.   justify-content: space-between;

  89.   cursor: pointer;

  90.   padding: 15px 20px;

  91. }

  92. 

  93. /* Accordion item Active State */

  94. .a11y-paragraphs-tabs__wrapper .accordeon-trigger[aria-expanded="true"] {

  95.   background-color: #ededed;

  96. }

  97. 

  98. .a11y-paragraphs-tabs__wrapper .accordeon-trigger-icon {

  99.   pointer-events: none;

  100. }

  101. 

  102. /* Makes the accordions tabs on ipad and above */

  103. @media (min-width: 768px) {

  104.   .a11y-paragraphs-tabs__wrapper .tabs-allowed .accordeon-trigger {

  105.     display: none;

  106.   }

  107.   .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-trigger {

  108.     display: block;

  109.   }

  110.   .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-panel {

  111.     display: none;

  112.   }

  113.   .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-panel.is-hidden {

  114.     display: none;

  115.   }

  116.   .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-panel {

  117.     border-top: 2px solid #eee;

  118.   }

  119.   .a11y-paragraphs-tabs__wrapper .tabs-allowed .tabs-tab-list {

  120.     margin-bottom: -2px;

  121.   }

  122. }

  123. 

  124. .a11y-paragraphs-tabs__wrapper .accordeon-trigger-icon {

  125.   display: inline-block;

  126.   float: right;

  127.   width: 22px;

  128.   height: 22px;

  129. }

  130. 

  131. .a11y-paragraphs-tabs__wrapper .accordeon-trigger-icon svg {

  132.   margin: 0;

  133. }

  134. 

  135. .a11y-paragraphs-tabs__wrapper [aria-expanded="true"] .vert {

  136.   display: none;

  137. }

  138. 

  139. .a11y-paragraphs-tabs__wrapper .label--open,

  140. .a11y-paragraphs-tabs__wrapper .label--close {

  141.   display: block;

  142.   border: 0;

  143.   clip: rect(0 0 0 0);

  144.   height: 1px;

  145.   margin: -1px;

  146.   overflow: hidden;

  147.   padding: 0;

  148.   position: absolute;

  149.   width: 1px;

  150. }

  151. 

  152. .a11y-paragraphs-tabs__wrapper .label--close {

  153.   display: none;

  154. }

  155. 

  156. .a11y-paragraphs-tabs__wrapper .is-open .label--open {

  157.   display: none;

  158. }

  159. 

  160. .a11y-paragraphs-tabs__wrapper .is-open .label--close {

  161.   display: block;

  162. }