cheatsheet/src/styles/components/accordion.less

Cheatsheet boilerplate. Created for the new lesscss.org website, based on Shopify Cheat Sheet by Mark Dunkley.

//
// Accordion
// --------------------------------------------------



// Accordion Panels
@accordion-panel-border-radius:       @border-radius-small;
@accordion-panel-background:          #f9f9f9;


// Accordion Headings
@accordion-title-font:                "Source Sans Pro";
@accordion-heading-font:              @font-family-sans-serif;


// Accordion Groups
@accordion-group-border:              darken(@accordion-toggle-background, 5%);
@accordion-toggle-background:         #eee;
@accordion-toggle-background-active:  @link-color;



// Wrap accordions with panels.
.accordion-panel {
  min-height: 20px;
  padding: 9px;
  margin-bottom: 20px;
  background-color: @accordion-panel-background;
  border: 1px solid darken(@accordion-panel-background, 7%);
  border-radius: @accordion-panel-border-radius;
}


// Base
// ---------------

.accordion {
  margin-bottom: (@line-height-base / 2);
  font-size: 12px;
}
// Group == heading + body
.accordion-group {
  margin: 0;
  border: 1px solid @accordion-group-border;
  border-radius: 0;
  + .accordion-group {
    border-top: none;
  }
}


// Title sits above headings
.accordion-title {
  font-family: @accordion-title-font;
  font-weight: 600;
  margin-top: 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
  margin-bottom: 4px;
}


// Headings
// ---------------

.accordion-heading {
  margin: 0;
  font-weight: normal; // reset dt font weight
  border-bottom: none;

  // Toggles
  .accordion-toggle {
    color: black;
    font-family: @accordion-heading-font;
    padding: 4px 15px;
    background: @accordion-toggle-background;
    &:hover,
    &.active,
    &.active:hover {
      font-weight: bold;
      color: @white;
      text-decoration: none;
      background: @accordion-toggle-background-active;
    }
    // "down" chevrons for toggles
    .toggle-chevron:before {
      float: right;
      display: inline-block;
      content: "\e114";
      font-size: 10px;
      font-family: 'Glyphicons Halflings';
      font-weight: bold;
      font-style: normal;
      color: rgba(0,0,0,.3);
      padding-left: 10px;
    }
    &:hover .toggle-chevron:before {
      text-decoration: none;
    }
    // "up" chevron, when toggle is active
    &.active .toggle-chevron:before,
    &.active:hover .toggle-chevron:before {
      content: "\e113";
      color: @white;
    }
  }
}


// Sections
// ---------------

// Add section headings in a panel
.accordion-section {
  display: block;
  font-size: @font-size-base;
  font-family: @accordion-title-font;
  color: #444;
  padding: 3px 0 5px;
  margin-top: 6px;
  border-top: 1px solid #ddd;
  // Collapse section completely when content is absent
  &:empty {
    display: none;
  }
}
.accordion-title + .accordion-section {
  border-top: none;
}



// Inner needs the styles because you can't
// animate properly with any styles on the element
.accordion-inner {
  font-weight: normal;
  background: @state-info-background;
  border-top: 1px solid @accordion-group-border;

  // Content summary
  .topic-summary {
    display: block;
    color: #075d8d;
    margin: -10px -15px 10px;
    padding: 6px 15px;
    background: #bee1e4;
  }
}
// Reset margins for dd
.accordion-body {
  margin: 0;
}



// Reduce transition on collapse/expand, but you don't remove it
// completely because of how the js was written
.collapse {
  .transition(height .08s ease);
}