mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 09:22:55 +02:00
Code Issues Releases Wiki Activity

Fix missing border & add transitions

Browse Source
This commit is contained in:
Martijn Cuppens
2020-11-05 21:18:38 +01:00
committed by XhmikosR
parent d6a72c4e1b
commit 4c1f807142
3 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
scss/_accordion.scss
View File

@@ -11,10 +11,14 @@
@include font-size($font-size-base);
color: $accordion-button-color;
background-color: $accordion-button-bg;
border: solid $accordion-border-color;
border-width: $accordion-border-width $accordion-border-width 0;
border: $accordion-border-width solid $accordion-border-color;
@include border-radius(0);
overflow-anchor: none;
@include transition($accordion-transition);
&.collapsed {
border-bottom-width: 0;
}
&:not(.collapsed) {
color: $accordion-button-active-color;
@@ -45,8 +49,9 @@
&:focus {
z-index: 3;
border-color: $accordion-button-focus-border-color;
outline: 0;
box-shadow: $btn-focus-box-shadow;
box-shadow: $accordion-button-focus-box-shadow;
}
}
@@ -55,35 +60,35 @@
}
.accordion-item {
@include border-radius($accordion-border-radius);
&:last-of-type {
.accordion-button {
border-bottom-width: $accordion-border-width;
// Only set a border-radius on the last item if the accordion is collapsed
&.collapsed {
@include border-bottom-radius($accordion-border-radius);
}
}
.accordion-body {
border-width: 0 $accordion-border-width $accordion-border-width;
@include border-bottom-radius($accordion-border-radius);
}
}
&:first-of-type {
.accordion-button {
@include border-top-radius($accordion-border-radius);
}
}
&:last-of-type {
.accordion-button {
// Only set a border-radius on the last item if the accordion is collapsed
&.collapsed {
border-bottom-width: $accordion-border-width;
@include border-bottom-radius($accordion-border-radius);
}
}
.accordion-collapse {
border-bottom-width: $accordion-border-width;
@include border-bottom-radius($accordion-border-radius);
}
}
}
.accordion-collapse {
border: solid $accordion-border-color;
border-width: 0 $accordion-border-width;
}
.accordion-body {
padding: $accordion-body-padding-y $accordion-body-padding-x;
border: solid $accordion-border-color;
border-width: $accordion-border-width $accordion-border-width 0;
}
@@ -98,15 +103,11 @@
@include border-radius(0);
}
.accordion-body {
.accordion-collapse {
border-width: 0;
}
.accordion-item {
border-right-width: 0;
border-left-width: 0;
@include border-radius(0);
&:first-of-type {
.accordion-button {
border-top-width: 0;
@@ -115,14 +116,10 @@
}
&:last-of-type {
.accordion-button {
.accordion-button.collapsed {
border-bottom-width: 0;
@include border-bottom-radius(0);
}
.accordion-body {
border-width: 0;
}
}
}
}

4
scss/_variables.scss
View File

@@ -1030,9 +1030,13 @@ $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: $primary !default;
$accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $accordion-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;