scss/bootstrap/_accordion.scss

0001 //
0002 // Base styles
0003 //
0004
0005 .accordion-button {
0006   position: relative;
0007   display: flex;
0008   align-items: center;
0009   width: 100%;
0010   padding: $accordion-button-padding-y $accordion-button-padding-x;
0011   @include font-size($font-size-base);
0012   color: $accordion-button-color;
0013   background-color: $accordion-button-bg;
0014   border: $accordion-border-width solid $accordion-border-color;
0015   @include border-radius(0);
0016   overflow-anchor: none;
0017   @include transition($accordion-transition);
0018
0019   &.collapsed {
0020     border-bottom-width: 0;
0021   }
0022
0023   &:not(.collapsed) {
0024     color: $accordion-button-active-color;
0025     background-color: $accordion-button-active-bg;
0026
0027     &::after {
0028       background-image: escape-svg($accordion-button-active-icon);
0029       transform: $accordion-icon-transform;
0030     }
0031   }
0032
0033   // Accordion icon
0034   &::after {
0035     flex-shrink: 0;
0036     width: $accordion-icon-width;
0037     height: $accordion-icon-width;
0038     margin-left: auto;
0039     content: "";
0040     background-image: escape-svg($accordion-button-icon);
0041     background-repeat: no-repeat;
0042     background-size: $accordion-icon-width;
0043     @include transition($accordion-icon-transition);
0044   }
0045
0046   &:hover {
0047     z-index: 2;
0048   }
0049
0050   &:focus {
0051     z-index: 3;
0052     border-color: $accordion-button-focus-border-color;
0053     outline: 0;
0054     box-shadow: $accordion-button-focus-box-shadow;
0055   }
0056 }
0057
0058 .accordion-header {
0059   margin-bottom: 0;
0060 }
0061
0062 .accordion-item {
0063   &:first-of-type {
0064     .accordion-button {
0065       @include border-top-radius($accordion-border-radius);
0066     }
0067   }
0068
0069   &:last-of-type {
0070     .accordion-button {
0071       // Only set a border-radius on the last item if the accordion is collapsed
0072       &.collapsed {
0073         border-bottom-width: $accordion-border-width;
0074         @include border-bottom-radius($accordion-border-radius);
0075       }
0076     }
0077
0078     .accordion-collapse {
0079       border-bottom-width: $accordion-border-width;
0080       @include border-bottom-radius($accordion-border-radius);
0081     }
0082   }
0083 }
0084
0085 .accordion-collapse {
0086   border: solid $accordion-border-color;
0087   border-width: 0 $accordion-border-width;
0088 }
0089
0090 .accordion-body {
0091   padding: $accordion-body-padding-y $accordion-body-padding-x;
0092 }
0093
0094
0095 // Flush accordion items
0096 //
0097 // Remove borders and border-radius to keep accordion items edge-to-edge.
0098
0099 .accordion-flush {
0100   .accordion-button {
0101     border-right: 0;
0102     border-left: 0;
0103     @include border-radius(0);
0104   }
0105
0106   .accordion-collapse {
0107     border-width: 0;
0108   }
0109
0110   .accordion-item {
0111     &:first-of-type {
0112       .accordion-button {
0113         border-top-width: 0;
0114         @include border-top-radius(0);
0115       }
0116     }
0117
0118     &:last-of-type {
0119       .accordion-button.collapsed {
0120         border-bottom-width: 0;
0121         @include border-bottom-radius(0);
0122       }
0123     }
0124   }
0125 }