package.scss._accordion.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of boosted Show documentation
Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.
The newest version!
//
// Base styles
//

.accordion {
  // scss-docs-start accordion-css-vars
  --#{$prefix}accordion-color: #{$accordion-color};
  --#{$prefix}accordion-bg: #{$accordion-bg};
  --#{$prefix}accordion-transition: #{$accordion-transition};
  --#{$prefix}accordion-border-color: #{$accordion-border-color};
  --#{$prefix}accordion-border-width: #{$accordion-border-width};
  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
  --#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size}; // Boosted mod
  --#{$prefix}accordion-btn-font-weight: #{$accordion-button-font-weight}; // Boosted mod
  --#{$prefix}accordion-btn-line-height: #{$accordion-button-line-height}; // Boosted mod
  --#{$prefix}accordion-btn-letter-spacing: #{$accordion-button-letter-spacing}; // Boosted mod
  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
  // Boosted mod: no --#{$prefix}accordion-btn-icon
  // Boosted mod: no --#{$prefix}accordion-btn-icon-width
  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
  // Boosted mod: no --#{$prefix}accordion-btn-icon-transition
  // Boosted mod: no --#{$prefix}accordion-btn-active-icon
  // Boosted mod: no --#{$prefix}accordion-btn-focus-box-shadow
  --#{$prefix}accordion-body-padding-top: #{$accordion-body-padding-top}; // Boosted mod
  --#{$prefix}accordion-body-padding-end: #{$accordion-body-padding-end}; // Boosted mod
  --#{$prefix}accordion-body-padding-bottom: #{$accordion-body-padding-bottom}; // Boosted mod
  --#{$prefix}accordion-body-padding-start: #{$accordion-body-padding-start}; // Boosted mod
  --#{$prefix}accordion-btn-hover-bg: #{$accordion-button-hover-bg}; // Boosted mod
  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
  // scss-docs-end accordion-css-vars

  background-color: transparent; // Boosted mod
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
  @include font-size(var(--#{$prefix}accordion-btn-font-size)); // Boosted mod
  font-weight: var(--#{$prefix}accordion-btn-font-weight); // Boosted mod
  line-height: var(--#{$prefix}accordion-btn-line-height); // Boosted mod
  color: var(--#{$prefix}accordion-btn-color);
  text-align: left; // Reset button style
  text-decoration: if($link-decoration == none, null, none); // Boosted mod

  /* rtl:remove */
  letter-spacing: var(--#{$prefix}accordion-btn-letter-spacing); // Boosted mod
  background-color: var(--#{$prefix}accordion-btn-bg);
  border: 0;
  @include border-radius(0);
  overflow-anchor: none;
  @include transition(var(--#{$prefix}accordion-transition));

  &:not(.collapsed) {
    color: var(--#{$prefix}accordion-active-color);
    background-color: var(--#{$prefix}accordion-active-bg);
    // Boosted mod: no `box-shadow` definition

    &::after {
      // Boosted mod: use caret
      transform: var(--#{$prefix}accordion-btn-icon-transform);
    }
  }

  // Accordion icon
  @include caret($accordion: true); // Boosted mod: use caret

  &:hover {
    z-index: 2;
    color: var(--#{$prefix}accordion-active-color); // Boosted mod
    background-color: var(--#{$prefix}accordion-btn-hover-bg); // Boosted mod
  }

  &:focus {
    // Boosted mod
    &[data-focus-visible-added] {
      outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
      box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
    }
    // End mod
  }
}

.accordion-header {
  margin-bottom: 0;
  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); // Boosted mod
  border-width: var(--#{$prefix}accordion-border-width) 0 0; // Boosted mod
}

.accordion-item {
  color: var(--#{$prefix}accordion-color);
  background-color: var(--#{$prefix}accordion-bg);
  // Boosted mod: no border

  &:first-of-type {
    @include border-top-radius(var(--#{$prefix}accordion-border-radius));

    > .accordion-header .accordion-button {
      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
    }
  }

  // Boosted mod: no `&:not(:first-of-type)` rule

  // Only set a border-radius on the last item if the accordion is collapsed
  &:last-of-type {
    margin-bottom: 0; // Boosted mod
    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
    border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); // Boosted mod: borders are set on .accordion-header

    > .accordion-header .accordion-button {
      &.collapsed {
        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
      }
    }

    > .accordion-collapse {
      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
    }
  }
}

.accordion-body {
  padding: var(--#{$prefix}accordion-body-padding-top) var(--#{$prefix}accordion-body-padding-end) var(--#{$prefix}accordion-body-padding-bottom) var(--#{$prefix}accordion-body-padding-start); // Boosted mod
}

// Boosted mod: no Flush accordion items

// Boosted mod: no `@if enable-dark-mode`

//
// Boosted mod:
// - Sizes
//

.accordion-sm {
  // scss-docs-start accordion-sm-css-vars
  --#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size-sm};
  --#{$prefix}accordion-btn-line-height: #{$accordion-button-line-height-sm};
  --#{$prefix}accordion-btn-letter-spacing: #{$accordion-button-letter-spacing-sm};
  // scss-docs-end accordion-sm-css-vars
}

.accordion-lg {
  // scss-docs-start accordion-lg-css-vars
  --#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size-lg};
  --#{$prefix}accordion-btn-line-height: #{$accordion-button-line-height-lg};
  --#{$prefix}accordion-btn-letter-spacing: #{$accordion-button-letter-spacing-lg};
  // scss-docs-end accordion-lg-css-vars
}