mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Add variables for transitions (#21345)
* Add variables for transitions * Add variables for transitions
This commit is contained in:
parent
372d156f21
commit
e1653edb95
@ -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);
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
@ -10,7 +10,11 @@
|
||||
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
transition: $transition;
|
||||
@if length($transition) == 0 {
|
||||
transition: $transition-base;
|
||||
} @else {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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); }
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user