apex4x/React/src/4X/AccordionGroup.css

The Comprehensive ARIA Development Suite

/**********************************************
Common Accordion Colours - update in colors.css
*************************************************/
/*
--acordDarkGreen: #24575b;
--acordLightGrey: #eeeeee;
--acordDarkGrey: #333333;
*/
/**********************************************
Common Accordion styles
*************************************************/

.accordion-heading {
  font-size: inherit;
  margin-bottom: 1px;
  position: relative;
}

.aria-accordion-trigger {
  background: url(./img/accordion/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%;
}

.accordion-panel {
  background: var(--globalWhite);
  padding: 50px;
  margin-left: 100px;
  text-align: left;
  font-size: 2em;
}

.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-trigger[aria-disabled="true"] {
  background-color: var(--acordDarkGrey);
  color: var(--globalWhite);
}

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