Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

further fixing .transition mixin

  • Loading branch information...
commit ac5dfa8561dba4dcd618895a4a8765476aa1629b 1 parent dc16714
authored November 26, 2012

Showing 1 changed file with 26 additions and 11 deletions. Show diff stats Hide diff stats

  1. 37  css/style.less
37  css/style.less
... ...
@@ -1,6 +1,10 @@
  1
+// Variables ==================================================================
  2
+
1 3
 @itemHeight: 62px;
2 4
 @ease: cubic-bezier(.67, .18, .30, .86);
3 5
 
  6
+// mixins =====================================================================
  7
+
4 8
 .transform (@vars) {
5 9
     -webkit-transform: @vars;
6 10
     -moz-transform: @vars;
@@ -8,12 +12,18 @@
8 12
     transform: @vars;
9 13
 }
10 14
 
11  
-// due to limitations of less, extra vars need an escaped comma in front of it: ~","
12  
-.transition (@vars, @extra:~"") {
13  
-    -webkit-transition: -webkit-transform @vars @extra;
14  
-    -moz-transition: -moz-transform @vars @extra;
15  
-    -ms-transition: -ms-transform @vars @extra;
16  
-    transition: transform @vars @extra;
  15
+.transition (@vars) {
  16
+    -webkit-transition: -webkit-transform @vars;
  17
+    -moz-transition: -moz-transform @vars;
  18
+    -ms-transition: -ms-transform @vars;
  19
+    transition: transform @vars;
  20
+}
  21
+
  22
+.transition (@vars, @extra) {
  23
+    -webkit-transition: -webkit-transform @vars, @extra;
  24
+    -moz-transition: -moz-transform @vars, @extra;
  25
+    -ms-transition: -ms-transform @vars, @extra;
  26
+    transition: transform @vars, @extra;
17 27
 }
18 28
 
19 29
 .trans-origin (@vars) {
@@ -35,14 +45,18 @@
35 45
     perspective-origin: @vars;
36 46
 }
37 47
 
  48
+// transition classes =========================================================
  49
+
38 50
 .drag {
39  
-    .transition(0s linear, ~","opacity 0s linear ~"!important");
  51
+    .transition(0s linear, opacity 0s linear ~"!important");
40 52
 }
41 53
 
42 54
 .ease-out {
43 55
     .transition(.3s cubic-bezier(0,.5,.5,1) ~"!important");
44 56
 }
45 57
 
  58
+// actual stuff ===============================================================
  59
+
46 60
 html, body {
47 61
     margin: 0;
48 62
     padding: 0;
@@ -80,7 +94,7 @@ html, body {
80 94
 
81 95
 .collection {
82 96
     .transform(translate3d(0,0,0));
83  
-    .transition(.3s @ease, ~","opacity .3s @ease);
  97
+    .transition(.3s @ease, opacity .3s @ease);
84 98
     position: absolute;
85 99
     width: 100%;
86 100
     top: 0;
@@ -169,7 +183,7 @@ html, body {
169 183
 
170 184
     text-shadow: 0 1px 1px rgba(0,0,0,.3);
171 185
     .trans-origin(center center);
172  
-    .transition(.3s @ease, ~","opacity .3s @ease);
  186
+    .transition(.3s @ease, opacity .3s @ease);
173 187
     position: absolute;
174 188
     z-index: 0;
175 189
     width: 100%;
@@ -360,7 +374,7 @@ html, body {
360 374
     user-select: none;
361 375
 }
362 376
 
363  
-// Desktop
  377
+// Desktop ====================================================================
364 378
 
365 379
 body.desktop {
366 380
 
@@ -383,7 +397,8 @@ body.desktop {
383 397
         display: inline;
384 398
     }
385 399
 
386  
-    .field { // weird input element positioning difference between mobile and desktop
  400
+    // weird input element positioning difference between mobile and desktop
  401
+    .field {
387 402
         top: 0;
388 403
         padding-left: 10px;
389 404
     }

0 notes on commit ac5dfa8

Please sign in to comment.
Something went wrong with that request. Please try again.