apex4x/Templates/Accordions/Internal/css/accordion.css

The Comprehensive ARIA Development Suite

/**********************************************
Common Accordion Colours - update in colors.css
*************************************************/
/*
--acordDarkGreen: #24575b;
--acordLightGrey: #eeeeee;
--acordDarkGrey: #333333;
*/
/**********************************************
Common Accordion styles
*************************************************/
.aria-accordion h2 {
  font-size: inherit;
  margin-bottom: 1px;
  position: relative;
}

.aria-accordion-trigger {
  background: url(../img/sprite.svg) right 0.5em top -18.2em no-repeat;
  background-color: var(--whatsock-blue);
  color: var(--bodyText);
  text-align: left;
  font-size: 1em;
  padding: 0.5em 0.6em;
  text-transform: uppercase;
  width: 100%;
}

.aria-accordion-trigger:hover,
.aria-accordion-trigger:focus {
  background-color: var(--acordDarkGreen);
  color: var(--globalWhite);
}

.aria-accordion-trigger[aria-expanded="true"] {
  background-position-y: -7.2em;
}

.aria-accordion-trigger[aria-disabled="true"] {
  background-color: var(--acordDarkGrey);
  color: var(--globalWhite);
}

.aria-accordion .insertContent {
  background: var(--globalWhite);
}
.aria-accordion .content {
  padding: 1em;
}
#accordion-sect1,
#accordion-sect2,
#accordion-sect3 {
  padding: 0.5em;
}
.aria-accordion-trigger {
  background-color: #63b7c2;
  border: none;
  color: var(--bodyText);
}

.aria-accordion-trigger:hover,
.aria-accordion-trigger:focus {
  background-color: var(--acordDarkGreen);
  color: var(--globalWhite);
}

.aria-accordion .insertContent {
  background: var(--globalWhite);
}