rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Add variables for transitions (#21345)

Browse Source 
* Add variables for transitions

* Add variables for transitions
This commit is contained in:
Tom Lutzenberger 2016-12-20 05:33:17 +01:00 committed by Mark Otto
parent 372d156f21
commit e1653edb95
8 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_animation.scss
View File

@ -1,7 +1,7 @@
.fade {
opacity: 0;
@include transition(opacity .15s linear);
@include transition($transition-fade);
&.active {
opacity: 1;
@ -32,5 +32,5 @@ tbody {
height: 0;
overflow: hidden;
@include transition(height .35s ease);
@include transition($transition-collapse);
}

2
scss/_buttons.scss
View File

@ -15,7 +15,7 @@
user-select: none;
border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include transition(all .2s ease-in-out);
@include transition($btn-transition);
&,
&:active,

2
scss/_carousel.scss
View File

@ -15,7 +15,7 @@
width: 100%;
@include if-supports-3d-transforms() {
@include transition(transform .6s ease-in-out);
@include transition($carousel-transition);
backface-visibility: hidden;
perspective: 1000px;
}

2
scss/_forms.scss
View File

@ -29,7 +29,7 @@
}
@include box-shadow($input-box-shadow);
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
@include transition($input-transition);
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {

2
scss/_images.scss
View File

@ -16,7 +16,7 @@
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
@include transition(all .2s ease-in-out);
@include transition($thumbnail-transition);
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide

6
scss/_mixins.scss
View File

@ -10,7 +10,11 @@
@mixin transition($transition...) {
@if $enable-transitions {
transition: $transition;
@if length($transition) == 0 {
transition: $transition-base;
} @else {
transition: $transition;
}
}
}

2
scss/_modal.scss
View File

@ -28,7 +28,7 @@
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
@include transition(transform .3s ease-out);
@include transition($modal-transition);
transform: translate(0, -25%);
}
&.active .modal-dialog { transform: translate(0, 0); }

13
scss/_variables.scss
View File

@ -311,6 +311,10 @@ $component-active-bg: $brand-primary !default;
$caret-width: .3em !default;
$caret-width-lg: $caret-width !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
// 11. Tables
//
@ -384,6 +388,8 @@ $btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-transition: all .2s ease-in-out !default;
// 13. Forms
@ -420,6 +426,8 @@ $input-height: (($font-size-base * $input-line-height) + ($inp
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
$form-group-margin-bottom: $spacer-y !default;
$input-group-addon-bg: $gray-lighter !default;
@ -776,6 +784,8 @@ $modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-transition: transform .3s ease-out !default;
// 26. Alerts
//
@ -853,6 +863,7 @@ $thumbnail-border-width: $border-width !default;
$thumbnail-border-color: #ddd !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default;
$thumbnail-transition: all .2s ease-in-out !default;
// 30. Figures
@ -898,6 +909,8 @@ $carousel-control-icon-width: 20px !default;
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-transition: transform .6s ease-in-out !default;
// 34. Close