bulma-accordion/bulma-accordion.css

A simple accordion extension for Bulma

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.accordions .accordion {
  background-color: whitesmoke;
  border-radius: 3px;
  font-size: 1rem;
}

.accordions .accordion:not(:last-child) {
  margin-bottom: 1.5rem;
}

.accordions .accordion strong {
  color: currentColor;
}

.accordions .accordion a:not(.button):not(.tag) {
  color: currentColor;
  text-decoration: underline;
}

.accordions .accordion.is-small {
  font-size: 0.75rem;
}

.accordions .accordion.is-medium {
  font-size: 1.25rem;
}

.accordions .accordion.is-large {
  font-size: 1.5rem;
}

.accordions .accordion:not(:first-child) .accordion-header {
  border-radius: 0;
}

.accordions .accordion:not(:last-child) {
  margin-bottom: 0;
}

.accordions .accordion:not(:last-child) .accordion-body {
  border-radius: 0;
}

.accordions .accordion .accordion-header {
  align-items: center;
  background-color: #4a4a4a;
  border-radius: 3px 3px 0 0;
  color: #fff;
  display: flex;
  justify-content: space-between;
  line-height: 1.25;
  padding: 0.5em 0.75em;
  position: relative;
}

.accordions .accordion .accordion-header .toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: rgba(10, 10, 10, 0.2);
  border: none;
  border-radius: 290486px;
  cursor: pointer;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 0.75em;
  height: 20px;
  width: 20px;
  max-height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  outline: none;
  position: relative;
  vertical-align: top;
}

.accordions .accordion .accordion-header .toggle::before {
  color: white;
  display: block;
  left: 0;
  position: absolute;
  top: -.1em;
  right: 0;
  bottom: 0;
  content: '\002B';
}

.accordions .accordion .accordion-header .toggle::after {
  display: none;
}

.accordions .accordion .accordion-header + .accordion-body {
  overflow-y: hidden;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  max-height: 0;
  overflow-y: hidden;
}

.accordions .accordion .accordion-header + .accordion-body code,
.accordions .accordion .accordion-header + .accordion-body pre {
  background-color: white;
}

.accordions .accordion .accordion-header + .accordion-body pre code {
  background-color: transparent;
}

.accordions .accordion .accordion-header + .accordion-body .accordion-content {
  display: block;
  border: 1px solid #dbdbdb;
  padding: 1em 1.25em;
  color: #4a4a4a;
}

.accordions .accordion:not(.is-active) .accordion-body {
  -webkit-transition: max-height 0.1s ease;
  -moz-transition: max-height 0.1s ease;
  -o-transition: max-height 0.1s ease;
  transition: max-height 0.1s ease;
}

.accordions .accordion.is-active .accordion-header .toggle::before {
  content: '\002D';
}

.accordions .accordion.is-active .accordion-body {
  max-height: 1000rem;
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  -o-transition: max-height 2s ease;
  transition: max-height 2s ease;
}

.accordions .accordion.is-white {
  background-color: white;
}

.accordions .accordion.is-white .accordion-header {
  background-color: white;
  color: #0a0a0a;
}

.accordions .accordion.is-white .accordion-body {
  border-color: white;
  color: #4d4d4d;
}

.accordions .accordion.is-black {
  background-color: #fafafa;
}

.accordions .accordion.is-black .accordion-header {
  background-color: #0a0a0a;
  color: white;
}

.accordions .accordion.is-black .accordion-body {
  border-color: #0a0a0a;
  color: #090909;
}

.accordions .accordion.is-light {
  background-color: #fafafa;
}

.accordions .accordion.is-light .accordion-header {
  background-color: whitesmoke;
  color: #363636;
}

.accordions .accordion.is-light .accordion-body {
  border-color: whitesmoke;
  color: #505050;
}

.accordions .accordion.is-dark {
  background-color: #fafafa;
}

.accordions .accordion.is-dark .accordion-header {
  background-color: #363636;
  color: whitesmoke;
}

.accordions .accordion.is-dark .accordion-body {
  border-color: #363636;
  color: #2a2a2a;
}

.accordions .accordion.is-primary {
  background-color: #f5fffd;
}

.accordions .accordion.is-primary .accordion-header {
  background-color: #00d1b2;
  color: #fff;
}

.accordions .accordion.is-primary .accordion-body {
  border-color: #00d1b2;
  color: #021310;
}

.accordions .accordion.is-link {
  background-color: #f6f9fe;
}

.accordions .accordion.is-link .accordion-header {
  background-color: #3273dc;
  color: #fff;
}

.accordions .accordion.is-link .accordion-body {
  border-color: #3273dc;
  color: #22509a;
}

.accordions .accordion.is-info {
  background-color: #f6fbfe;
}

.accordions .accordion.is-info .accordion-header {
  background-color: #209cee;
  color: #fff;
}

.accordions .accordion.is-info .accordion-body {
  border-color: #209cee;
  color: #12537e;
}

.accordions .accordion.is-success {
  background-color: #f6fef9;
}

.accordions .accordion.is-success .accordion-header {
  background-color: #23d160;
  color: #fff;
}

.accordions .accordion.is-success .accordion-body {
  border-color: #23d160;
  color: #0e301a;
}

.accordions .accordion.is-warning {
  background-color: #fffdf5;
}

.accordions .accordion.is-warning .accordion-header {
  background-color: #ffdd57;
  color: rgba(0, 0, 0, 0.7);
}

.accordions .accordion.is-warning .accordion-body {
  border-color: #ffdd57;
  color: #3b3108;
}

.accordions .accordion.is-danger {
  background-color: #fff5f7;
}

.accordions .accordion.is-danger .accordion-header {
  background-color: #ff3860;
  color: #fff;
}

.accordions .accordion.is-danger .accordion-body {
  border-color: #ff3860;
  color: #cd0930;
}