standardize on @transition mixin

This commit is contained in:
Jeff Atwood 2014-12-23 02:52:20 -08:00
parent e41ae020fa
commit 0b0e9be22f
3 changed files with 13 additions and 34 deletions

View file

@ -136,7 +136,6 @@ div.ac-wrap {
#reply-control {
.composer-loading {
position: absolute;
@include fades-in(0.25s);
left: 45%;
top: 20%;
}

View file

@ -52,15 +52,6 @@
background-image: linear-gradient(to bottom, $start-color, $end-color);
}
// Transition
@mixin transition($transition) {
.discourse-no-touch & {
-webkit-transition: #{$transition};
transition: #{$transition};
}
}
// Visibility
// --------------------------------------------------
@ -72,34 +63,24 @@
}
}
@mixin fades-in($time: 0.5s) {
opacity: 0;
visibility: hidden;
.discourse-no-touch & {
-webkit-transition: visibility 0s linear $time, opacity $time linear;
-ms-transition: visibility 0s linear $time, opacity $time linear;
transition: visibility 0s linear $time, opacity $time linear;
}
}
@mixin fade-soft($time: 1s) {
-webkit-transition: opacity $time ease-in-out;
-ms-transition: opacity $time ease-in-out;
transition: opacity $time ease-in-out;
}
@mixin visible {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
transition-delay: 0s;
transition-delay: 0s;
}
// Transitions
// --------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
transition: $transition-property $transition-time $method;
}
//
// --------------------------------------------------
// Unselectable
// Unselectable (avoids unwanted selections with iPad, touch laptops, etc)
@mixin unselectable {
-webkit-user-select: none;

View file

@ -40,9 +40,8 @@ h1 .topic-statuses .topic-status i {
.gutter {
.reply-new {
.discourse-no-touch & {
opacity:0;
@include transition(opacity linear 0.4s);
opacity:0;
@include transition(opacity 0.7s ease-in-out);
}
.discourse-touch & {opacity: 1;}
}
@ -51,7 +50,7 @@ h1 .topic-statuses .topic-status i {
div.actions, .post-actions {
.discourse-no-touch & {
opacity: 0.2;
@include fade-soft(1s);
@include transition(opacity 0.7s ease-in-out);
}
.discourse-touch & {opacity: 1;}
}