deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-01 21:42:22 +02:00
Code Issues Projects Releases Wiki Activity

unified transitions across components

Browse source
This commit is contained in:
koester 2017-12-31 12:19:27 +01:00
parent e344a697a4
commit fe1f7d7f9e
4 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/_buttons.scss
View file

@ -3,7 +3,7 @@ button,
[type="button"] {
align-self: center;
background: transparent;
transition: all .5s ease, background-color .1s ease;
@include transition();
color: $primary;
display: inline;
outline: none;

5
src/components/_modals.scss
View file

@ -28,14 +28,15 @@
position: fixed;
z-index: 11;
max-width: 960px;
@include translate(0, -500%);
@include transition(transform);
@include resp(medium) {
max-width: 85%;
}
@include resp(xsmall) {
max-width: 90%;
}
@include translate(0, -500%);
@include transition-transform(0.3s ease-out);
}
.btn-close{

2
src/components/_popovers.scss
View file

@ -26,7 +26,7 @@
text-align: center;
color: $white;
background: $light-dark;
transition: opacity .25s ease-out;
@include transition(opacity);
transform: translateX(-50%) translateY(-100%);
@include border-style();
border: 2px solid $primary;

15
src/core/_config.scss
View file

@ -170,13 +170,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
}
}
@mixin transition-transform($transition) {
-webkit-transition: -webkit-transform $transition;
-moz-transition: -moz-transform $transition;
-o-transition: -o-transform $transition;
transition: transform $transition;
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y);
@ -205,15 +198,15 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
box-shadow: $shadow-hover;
@include translate(0, 2px);
} @else if $type == small {
transition: all .5s ease;
@include transition($animation: ease);
box-shadow: $shadow-small;
} @else if $type == regular {
transition: all .5s ease;
@include transition($animation: ease);
box-shadow: $shadow-regular;
} @else if $type == large {
transition: all .5s ease;
@include transition($animation: ease);
box-shadow: $shadow-large;
} @else {
@error "@mixin shadow(input) does not exist"
@error "wrong $type. available types: small | regular | large | hover"
}
}