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

View file

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

View file

@ -206,17 +206,17 @@ body {
border: 1px solid scale-color-diff();
border-radius: 3px;
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;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
}
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"] {
background-color: $secondary;
border: 1px solid scale-color-diff();
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
}
}
textarea:focus {

View file

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

View file

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

View file

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

View file

@ -252,8 +252,9 @@ tr.category-topic-link:nth-of-type(odd) {
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
transition: opacity linear .15s;
-webkit-transition: opacity linear .15s;
}
.fade.in {
opacity: 1;
@ -316,4 +317,4 @@ td.main-link {
a.title {
padding: 5px 10px 5px 0;
}
}
}

View file

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