sticking transitions into a sass mixin

This commit is contained in:
Kris Aubuchon 2014-10-20 09:54:36 -04:00
parent 6e0b5f7231
commit b97a4f5bd0
8 changed files with 22 additions and 22 deletions

View File

@ -53,6 +53,7 @@
text-align: center; text-align: center;
margin: 0 0 0 5px; margin: 0 0 0 5px;
list-style: none; list-style: none;
> li { > li {
float: left; float: left;
} }
@ -65,6 +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);
&:hover { &:hover {
@ -168,7 +170,7 @@
a { a {
display: block; display: block;
padding: 5px; padding: 5px;
transition: all linear .15s; @include transition(all linear .15s);
} }
&:hover a:not(.badge-notification) { &:hover a:not(.badge-notification) {

View File

@ -57,7 +57,6 @@
@mixin transition($transition) { @mixin transition($transition) {
.discourse-no-touch & { .discourse-no-touch & {
-webkit-transition: #{$transition}; -webkit-transition: #{$transition};
-ms-transition: #{$transition};
transition: #{$transition}; transition: #{$transition};
} }
} }

View File

@ -206,8 +206,8 @@ body {
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3); box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
} }
input { input {
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] { &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
@ -215,8 +215,8 @@ body {
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3); box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
} }
} }
textarea:focus { textarea:focus {

View File

@ -47,8 +47,8 @@ h1 .topic-statuses .topic-status i {
.reply-new { .reply-new {
.discourse-no-touch & { .discourse-no-touch & {
opacity:0; opacity:0;
transition: opacity linear 0.4s; @include transition(opacity linear 0.4s);
-webkit-transition: opacity linear 0.4s;
} }
.discourse-touch & {opacity: 1;} .discourse-touch & {opacity: 1;}
} }
@ -57,8 +57,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;
transition: opacity linear 0.4s; @include transition(opacity linear 0.4s);
-webkit-transition: opacity linear 0.4s;
} }
.discourse-touch & {opacity: 1;} .discourse-touch & {opacity: 1;}
} }
@ -89,7 +88,8 @@ nav.post-controls {
span.badge-posts { span.badge-posts {
margin-right: 5px; margin-right: 5px;
transition: all linear 0.15s; @include transition(all linear 0.15s);
} }
.actions { .actions {
@ -147,7 +147,7 @@ nav.post-controls {
background: transparent; background: transparent;
border: none; border: none;
margin-left: 3px; margin-left: 3px;
transition: all linear 0.15s; @include transition(all linear 0.15s);
&:hover { &:hover {
background: scale-color-diff(); background: scale-color-diff();
color: $primary; color: $primary;
@ -830,7 +830,7 @@ $topic-avatar-width: 45px;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
color: $primary; color: $primary;
transition: all linear .15s; @include transition(all linear .15s);
& > div { & > div {
margin-left: 26px; margin-left: 26px;
@ -1032,8 +1032,8 @@ span.highlighted {
.read-state.read { .read-state.read {
opacity: 0; opacity: 0;
-webkit-transition: opacity 1s ease-out; @include transition(opacity ease-out 1s);
transition: opacity 1s ease-out;
} }

View File

@ -74,8 +74,7 @@ a.reply-new {
background: $secondary; background: $secondary;
padding: 1.5px 3px; padding: 1.5px 3px;
border-radius: 20px; border-radius: 20px;
transition: linear 0.15s; @include transition(all linear .15s);
-webkit-transition: linear 0.15s;
margin-left: -20px; margin-left: -20px;
} }
} }
@ -206,7 +205,8 @@ 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%);
transition: width .75s; @include transition(width .75s);
} }
} }

View File

@ -26,7 +26,6 @@
} }
.modal.fade { .modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out;
top: -25%; top: -25%;
} }

View File

@ -252,8 +252,9 @@ tr.category-topic-link:nth-of-type(odd) {
} }
.fade { .fade {
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.15s linear; transition: opacity linear .15s;
transition: opacity 0.15s linear; -webkit-transition: opacity linear .15s;
} }
.fade.in { .fade.in {
opacity: 1; opacity: 1;

View File

@ -512,4 +512,3 @@ $fa-var-yen: "\f157";
$fa-var-youtube: "\f167"; $fa-var-youtube: "\f167";
$fa-var-youtube-play: "\f16a"; $fa-var-youtube-play: "\f16a";
$fa-var-youtube-square: "\f166"; $fa-var-youtube-square: "\f166";