Skip to content

Commit

Permalink
feat(accordion): Orange branded 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Nov 10, 2020
1 parent c8a2698 commit 69a97d9
Show file tree
Hide file tree
Showing 7 changed files with 295 additions and 225 deletions.
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
{
"path": "./dist/css/boosted.css",
"maxSize": "22.5 kB"
"maxSize": "22.75 kB"
},
{
"path": "./dist/css/boosted.min.css",
Expand Down
63 changes: 50 additions & 13 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

88 changes: 36 additions & 52 deletions scss/_accordion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,52 @@
position: relative;
display: flex;
align-items: center;
width: 100%;
width: add(100%, $accordion-button-padding-x * 2);
padding: $accordion-button-padding-y $accordion-button-padding-x;
@include font-size($font-size-base);
margin: 0 -#{$accordion-button-padding-x}; // Boosted mod
@include font-size($accordion-button-font-size); // Boosted mod
font-weight: $accordion-button-font-weight; // Boosted mod
line-height: $accordion-button-line-height; // Boosted mod
color: $accordion-button-color;
text-decoration: if($link-decoration == none, null, none); // Boosted mod
letter-spacing: $accordion-button-letter-spacing; // Boosted mod
background-color: $accordion-button-bg;
border: $accordion-border-width solid $accordion-border-color;
border: 0; // Boosted mod: borders are set on .accordion-header
@include border-radius(0);
overflow-anchor: none;
@include transition($accordion-transition);

&.collapsed {
border-bottom-width: 0;
}
// Boosted mod: borders are set on .accordion-header

&:not(.collapsed) {
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;

&::after {
background-image: escape-svg($accordion-button-active-icon);
// Boosted mod: use caret
transform: $accordion-icon-transform;
}
}

// Accordion icon
&::after {
flex-shrink: 0;
width: $accordion-icon-width;
height: $accordion-icon-width;
margin-left: auto;
content: "";
background-image: escape-svg($accordion-button-icon);
background-repeat: no-repeat;
background-size: $accordion-icon-width;
@include transition($accordion-icon-transition);
}
@include caret($accordion: true); // Boosted mod: use caret

&:hover {
z-index: 2;
color: $accordion-button-active-color; // Boosted mod
}

&:focus {
z-index: 3;
border-color: $accordion-button-focus-border-color;
outline: 0;
box-shadow: $accordion-button-focus-box-shadow;
color: $accordion-button-active-color; // Boosted mod
outline-offset: -$accordion-border-width; // Boosted mod
}
}

.accordion-header {
margin-bottom: 0;
border: $accordion-border-width solid $accordion-border-color; // Boosted mod
border-width: $accordion-border-width 0 0; // Boosted mod
}

.accordion-item {
Expand All @@ -67,59 +62,48 @@
}

&:last-of-type {
border-bottom: $accordion-border-width solid $accordion-border-color; // Boosted mod: borders are set on .accordion-header

.accordion-button {
// Only set a border-radius on the last item if the accordion is collapsed
&.collapsed {
border-bottom-width: $accordion-border-width;
// Boosted mod: borders are set on .accordion-header
@include border-bottom-radius($accordion-border-radius);
}
}

.accordion-collapse {
border-bottom-width: $accordion-border-width;
// Boosted mod: borders are set on .accordion-header
@include border-bottom-radius($accordion-border-radius);
}
}
}

.accordion-collapse {
border: solid $accordion-border-color;
border-width: 0 $accordion-border-width;
}
// Boosted mod: no borders for .accordion-collapse

.accordion-body {
padding: $accordion-body-padding-y $accordion-body-padding-x;
padding: 0 $accordion-body-padding-x $accordion-body-padding-y 0; // Boosted mod
}


// Flush accordion items
// Boosted mod: no .accordion-flush

//
// Boosted mod: accordion sizes
//
// Remove borders and border-radius to keep accordion items edge-to-edge.

.accordion-flush {
.accordion-sm {
.accordion-button {
border-right: 0;
border-left: 0;
@include border-radius(0);
}

.accordion-collapse {
border-width: 0;
@include font-size($accordion-button-font-size-sm);
line-height: $accordion-button-line-height-sm;
letter-spacing: $accordion-button-letter-spacing-sm;
}
}

.accordion-item {
&:first-of-type {
.accordion-button {
border-top-width: 0;
@include border-top-radius(0);
}
}

&:last-of-type {
.accordion-button.collapsed {
border-bottom-width: 0;
@include border-bottom-radius(0);
}
}
.accordion-lg {
.accordion-button {
@include font-size($accordion-button-font-size-lg);
line-height: $accordion-button-line-height-lg;
letter-spacing: $accordion-button-letter-spacing-lg;
}
}
52 changes: 26 additions & 26 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ $enable-caret: true !default;
$enable-rounded: false !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
Expand Down Expand Up @@ -576,7 +576,6 @@ $mark-bg: $primary !default;
//
// Customizes the `.table` component with basic values, each used across all table variations.

// stylelint-disable function-disallowed-list
// scss-docs-start table-variables
$table-cell-padding-y: .875rem !default;
$table-cell-padding-x: $spacer / 2 !default;
Expand Down Expand Up @@ -612,7 +611,6 @@ $table-variants: (
"dark": $dark
) !default;
// scss-docs-end table-variables
// stylelint-enable function-disallowed-list

// Buttons + Forms
//
Expand Down Expand Up @@ -677,7 +675,7 @@ $btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-border-radius-lg: $border-radius-lg !default;

$btn-transition: color $transition-duration $transition-timing, background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing, $transition-focus !default;
$btn-transition: $transition-focus !default;


// Forms
Expand Down Expand Up @@ -1098,42 +1096,44 @@ $card-img-overlay-padding: $spacer !default;

$card-group-margin: $grid-gutter-width / 2 !default;

// Boosted mod
$card-footer-color: $gray-700 !default;
// End mod
$card-footer-color: $gray-700 !default; // Boosted mod


// Accordion
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-padding-y: $spacer / 2 !default;
$accordion-padding-x: $spacer / 2 !default;
$accordion-color: $body-color !default;
$accordion-bg: transparent !default;
$accordion-border-width: $border-width !default;
$accordion-border-color: rgba($black, .125) !default;
$accordion-border-width: $border-width / 2 !default;
$accordion-border-color: $gray-500 !default;
$accordion-border-radius: $border-radius !default;

$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;
$accordion-body-padding-y: $spacer !default;
$accordion-body-padding-x: $spacer !default;

$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: $accordion-color !default;
$accordion-button-bg: $accordion-bg !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
$accordion-button-active-color: shade-color($primary, 10%) !default;

$accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-button-active-bg: null !default;
$accordion-button-active-color: $accessible-orange !default;

$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $accordion-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
// Boosted mod: use caret
$accordion-icon-transform: rotate(180deg) !default;

$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// Boosted mod: accordion sizes
$accordion-button-font-size: $h3-font-size !default;
$accordion-button-line-height: null !default;
$accordion-button-font-weight: $font-weight-bold !default;
$accordion-button-letter-spacing: $h3-spacing !default;
$accordion-button-font-size-sm: $h5-font-size !default;
$accordion-button-line-height-sm: $h5-line-height !default;
$accordion-button-letter-spacing-sm: $h5-spacing !default;
$accordion-button-font-size-lg: $h2-font-size !default;
$accordion-button-line-height-lg: calc(40 / 30) !default; // stylelint-disable-line function-disallowed-list
$accordion-button-letter-spacing-lg: $h2-spacing !default;
// End mod


// Tooltips
Expand Down Expand Up @@ -1445,5 +1445,5 @@ $pre-line-height: 1.25 !default; // Boosted mod
//

//// Accordions
$accordion-spacer: .875rem !default;
$accordion-spacer-sm: $spacer / 2 !default;
//$accordion-spacer: .875rem !default;
//$accordion-spacer-sm: $spacer / 2 !default;
Loading

0 comments on commit 69a97d9

Please sign in to comment.