[Summary view] [Print] [Text view]

   1  //
   2  // Base styles
   3  //
   4  
   5  .accordion-button {
   6    position: relative;
   7    display: flex;
   8    align-items: center;
   9    width: 100%;
  10    padding: $accordion-button-padding-y $accordion-button-padding-x;
  11    @include font-size($font-size-base);
  12    color: $accordion-button-color;
  13    text-align: left; // Reset button style
  14    background-color: $accordion-button-bg;
  15    border: 0;
  16    @include border-radius(0);
  17    overflow-anchor: none;
  18    @include transition($accordion-transition);
  19  
  20    &:not(.collapsed) {
  21      color: $accordion-button-active-color;
  22      background-color: $accordion-button-active-bg;
  23      box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
  24  
  25      &::after {
  26        background-image: escape-svg($accordion-button-active-icon);
  27        transform: $accordion-icon-transform;
  28      }
  29    }
  30  
  31    // Accordion icon
  32    &::after {
  33      flex-shrink: 0;
  34      width: $accordion-icon-width;
  35      height: $accordion-icon-width;
  36      margin-left: auto;
  37      content: "";
  38      background-image: escape-svg($accordion-button-icon);
  39      background-repeat: no-repeat;
  40      background-size: $accordion-icon-width;
  41      @include transition($accordion-icon-transition);
  42    }
  43  
  44    &:hover {
  45      z-index: 2;
  46    }
  47  
  48    &:focus {
  49      z-index: 3;
  50      border-color: $accordion-button-focus-border-color;
  51      outline: 0;
  52      box-shadow: $accordion-button-focus-box-shadow;
  53    }
  54  }
  55  
  56  .accordion-header {
  57    margin-bottom: 0;
  58  }
  59  
  60  .accordion-item {
  61    background-color: $accordion-bg;
  62    border: $accordion-border-width solid $accordion-border-color;
  63  
  64    &:first-of-type {
  65      @include border-top-radius($accordion-border-radius);
  66  
  67      .accordion-button {
  68        @include border-top-radius($accordion-inner-border-radius);
  69      }
  70    }
  71  
  72    &:not(:first-of-type) {
  73      border-top: 0;
  74    }
  75  
  76    // Only set a border-radius on the last item if the accordion is collapsed
  77    &:last-of-type {
  78      @include border-bottom-radius($accordion-border-radius);
  79  
  80      .accordion-button {
  81        &.collapsed {
  82          @include border-bottom-radius($accordion-inner-border-radius);
  83        }
  84      }
  85  
  86      .accordion-collapse {
  87        @include border-bottom-radius($accordion-border-radius);
  88      }
  89    }
  90  }
  91  
  92  .accordion-body {
  93    padding: $accordion-body-padding-y $accordion-body-padding-x;
  94  }
  95  
  96  
  97  // Flush accordion items
  98  //
  99  // Remove borders and border-radius to keep accordion items edge-to-edge.
 100  
 101  .accordion-flush {
 102    .accordion-collapse {
 103      border-width: 0;
 104    }
 105  
 106    .accordion-item {
 107      border-right: 0;
 108      border-left: 0;
 109      @include border-radius(0);
 110  
 111      &:first-child { border-top: 0; }
 112      &:last-child { border-bottom: 0; }
 113  
 114      .accordion-button {
 115        @include border-radius(0);
 116      }
 117    }
 118  }