resources/tools/dash/app/pal/static/sass/bootstrap/_accordion.scss

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