I am utilizing node-sass for my current project.
If you want to experiment, create a simple style.scss file with both versions (alpha6 and beta):
@import "./node_modules/bootstrap/scss/bootstrap";
then enter the following command:
node-sass style.scss style.css
You will notice a variation in the css for the .btn class:
- the original one on getbootstrap.com ()
.btn {
display: inline-block;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.25;
border-radius: 0.25rem;
transition: all 0.15s ease-in-out;
}
- the generated one
.btn {
display: inline-block;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.25;
border-radius: 0.25rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
Take note of this:
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
What is the reason for these differences?
Due to this issue, the "disabled" property on a button no longer has a transition as demonstrated here: https://plnkr.co/edit/LSeKKSaB2Lk2JMtoFi9K?p=preview