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

View File

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

View File

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

View File

@ -69,14 +69,6 @@
transition-delay: 0s; 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; color: $danger;
} }
} }
@include transition(height 0.4s ease); transition: height 0.4s ease;
width: 100%; width: 100%;
z-index: 1039; z-index: 1039;
height: 0; height: 0;
@ -205,7 +205,7 @@
} }
.wmd-controls { .wmd-controls {
@include transition(top 0.3s ease); transition: top 0.3s ease;
top: 100px; top: 100px;
} }
} }
@ -332,7 +332,7 @@
#reply-control.edit-title.private-message { #reply-control.edit-title.private-message {
.wmd-controls { .wmd-controls {
@include transition(top 0.3s ease); transition: top 0.3s ease;
top: 140px; top: 140px;
} }
} }

View File

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

View File

@ -74,7 +74,7 @@ a.reply-new {
background: $secondary; background: $secondary;
padding: 1.5px 3px; padding: 1.5px 3px;
border-radius: 20px; border-radius: 20px;
@include transition(all linear .15s); transition: all linear .15s;
margin-left: -20px; margin-left: -20px;
} }
} }
@ -205,7 +205,7 @@ a:hover.reply-new {
width: 0; width: 0;
border-right: 1px solid scale-color-diff(); border-right: 1px solid scale-color-diff();
background-color: dark-light-diff($success, $secondary, 60%, -35%); 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; color: $danger;
} }
} }
@include transition(height 0.4s ease); transition: height 0.4s ease;
width: 100%; width: 100%;
z-index: 1039; z-index: 1039;
height: 0; height: 0;
@ -137,7 +137,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
box-sizing: border-box; box-sizing: border-box;
} }
.wmd-controls { .wmd-controls {
@include transition(top 0.3s ease); transition: top 0.3s ease;
top: 110px; 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 { #reply-control.edit-title.private-message {
.wmd-controls { .wmd-controls {
@include transition(top 0.3s ease); transition: top 0.3s ease;
top: 120px; top: 120px;
} }
} }