From 576861505e601902f0df3d9d6df3738c31260425 Mon Sep 17 00:00:00 2001 From: Jeff Atwood Date: Tue, 23 Dec 2014 03:09:17 -0800 Subject: [PATCH] just use plain CSS3 transition --- app/assets/stylesheets/common/base/discourse.scss | 7 +++++-- app/assets/stylesheets/common/base/header.scss | 4 ++-- app/assets/stylesheets/common/base/lightbox.scss | 4 ++-- .../stylesheets/common/foundation/mixins.scss | 8 -------- app/assets/stylesheets/desktop/compose.scss | 6 +++--- app/assets/stylesheets/desktop/topic-post.scss | 13 +++++++------ app/assets/stylesheets/desktop/topic.scss | 4 ++-- app/assets/stylesheets/mobile/compose.scss | 6 +++--- 8 files changed, 24 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index a44139c5e..30c26dcdf 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -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 { diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index f0ca7111e..05b84d04a 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -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) { diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss index 142d4b1b6..dc010a29b 100644 --- a/app/assets/stylesheets/common/base/lightbox.scss +++ b/app/assets/stylesheets/common/base/lightbox.scss @@ -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; diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss index 733253723..cd4fd4ca2 100644 --- a/app/assets/stylesheets/common/foundation/mixins.scss +++ b/app/assets/stylesheets/common/foundation/mixins.scss @@ -69,14 +69,6 @@ transition-delay: 0s; } -// Transitions -// -------------------------------------------------- - -@mixin transition($transition-property, $transition-time, $method) { - transition: $transition-property $transition-time $method; -} - - // // -------------------------------------------------- diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss index 033287e40..122eccc8f 100644 --- a/app/assets/stylesheets/desktop/compose.scss +++ b/app/assets/stylesheets/desktop/compose.scss @@ -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; } } diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 0ce0c338a..a2107338c 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -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; } diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index feabe7f35..ddea17cbe 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -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; } } diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 9255ef577..9b949fc03 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -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; } }