a11y-paragraphs-tabs.css in A11Y Paragraphs Tabs 8

/*
 * @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;
}