just use plain CSS3 transition

This commit is contained in:
Jeff Atwood 2014-12-23 03:09:17 -08:00
parent 0b0e9be22f
commit 576861505e
8 changed files with 24 additions and 28 deletions

View file

@ -91,10 +91,12 @@ body {
ul.breadcrumb {
margin: 0 10px 0 10px;
}
.message {
@include border-radius-all(8px);
background-color: $secondary;
padding: 14px;
h2 {
margin-bottom: 20px;
}
@ -113,8 +115,9 @@ body {
}
}
}
.clear-transitions {
@include transition(none !important);
.clear-transitions {
transition:none !important;
}
.tip {

View file

@ -66,7 +66,7 @@
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
@include transition(all linear .15s);
transition: all linear .15s;
&:hover {
@ -170,7 +170,7 @@
a {
display: block;
padding: 5px;
@include transition(all linear .15s);
transition: all linear .15s;
}
&:hover a:not(.badge-notification) {

View file

@ -5,7 +5,7 @@
&:hover .meta {
background: $primary;
opacity: 1;
@include transition(opacity .5s);
transition: opacity .5s;
}
}
@ -20,7 +20,7 @@
color: $secondary;
background: $primary;
opacity: 0;
@include transition(opacity .2s);
transition: opacity .2s;
span {
float: left;

View file

@ -69,14 +69,6 @@
transition-delay: 0s;
}
// Transitions
// --------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
transition: $transition-property $transition-time $method;
}
//
// --------------------------------------------------

View file

@ -103,7 +103,7 @@
color: $danger;
}
}
@include transition(height 0.4s ease);
transition: height 0.4s ease;
width: 100%;
z-index: 1039;
height: 0;
@ -205,7 +205,7 @@
}
.wmd-controls {
@include transition(top 0.3s ease);
transition: top 0.3s ease;
top: 100px;
}
}
@ -332,7 +332,7 @@
#reply-control.edit-title.private-message {
.wmd-controls {
@include transition(top 0.3s ease);
transition: top 0.3s ease;
top: 140px;
}
}

View file

@ -41,7 +41,7 @@ h1 .topic-statuses .topic-status i {
.reply-new {
.discourse-no-touch & {
opacity:0;
@include transition(opacity 0.7s ease-in-out);
transition: opacity 0.7s ease-in-out;
}
.discourse-touch & {opacity: 1;}
}
@ -50,7 +50,7 @@ h1 .topic-statuses .topic-status i {
div.actions, .post-actions {
.discourse-no-touch & {
opacity: 0.2;
@include transition(opacity 0.7s ease-in-out);
transition: opacity 0.7s ease-in-out;
}
.discourse-touch & {opacity: 1;}
}
@ -81,7 +81,7 @@ nav.post-controls {
span.badge-posts {
margin-right: 5px;
@include transition(all linear 0.15s);
transition: all linear 0.15s;
}
@ -140,7 +140,8 @@ nav.post-controls {
background: transparent;
border: none;
margin-left: 3px;
@include transition(all linear 0.15s);
transition: all linear 0.15s;
&:hover {
background: scale-color-diff();
color: $primary;
@ -812,7 +813,7 @@ $topic-avatar-width: 45px;
font-weight: normal;
line-height: 18px;
color: $primary;
@include transition(all linear .15s);
transition: all linear .15s;
& > div {
margin-left: 26px;
@ -1012,7 +1013,7 @@ span.highlighted {
.read-state.read {
opacity: 0;
@include transition(opacity ease-out 1s);
transition: opacity ease-out 1s;
}

View file

@ -74,7 +74,7 @@ a.reply-new {
background: $secondary;
padding: 1.5px 3px;
border-radius: 20px;
@include transition(all linear .15s);
transition: all linear .15s;
margin-left: -20px;
}
}
@ -205,7 +205,7 @@ a:hover.reply-new {
width: 0;
border-right: 1px solid scale-color-diff();
background-color: dark-light-diff($success, $secondary, 60%, -35%);
@include transition(width .75s);
transition: width .75s;
}
}

View file

@ -41,7 +41,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
color: $danger;
}
}
@include transition(height 0.4s ease);
transition: height 0.4s ease;
width: 100%;
z-index: 1039;
height: 0;
@ -137,7 +137,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
box-sizing: border-box;
}
.wmd-controls {
@include transition(top 0.3s ease);
transition: top 0.3s ease;
top: 110px;
}
}
@ -218,7 +218,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
#reply-control.edit-title.private-message {
.wmd-controls {
@include transition(top 0.3s ease);
transition: top 0.3s ease;
top: 120px;
}
}