Fix LESS compilation errors

Fix for newer LESS versions, add gruntfile. Fixes #5.
cnanney · Feb 16, 2015 · 9dd9a9b · 9dd9a9b
1 parent 845c5d5
commit 9dd9a9b
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 101 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-/.idea
+/.idea
+/node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,29 @@
+module.exports = function(grunt){
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    watch: {
+      options: {
+        debounceDelay: 250
+      },
+      less_main: {
+        files: './css/**/*.less',
+        tasks: ['less']
+      }
+    },
+
+    less: {
+      main: {
+        files: {
+          './css/style.css': './css/style.less'
+        }
+      }
+    }
+
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-less');
+
+};
diff --git a/css/css-flip-counter.less b/css/css-flip-counter.less
@@ -16,22 +16,22 @@
 
 @delimiterFontSize: 52px;
 
-// Base stylings
+// Base styles
 
 .counter-wrapper {
-  float: right;
-  position: relative;
-  left: -50%;
-  margin-top: 20px;
+  float      : right;
+  position   : relative;
+  left       : -50%;
+  margin-top : 20px;
 }
 
 .flip-counter {
-  position: relative;
-  left: 50%;
-  list-style-type: none;
+  position        : relative;
+  left            : 50%;
+  list-style-type : none;
 
   li {
-    float: right;
+    float : right;
   }
 }
 
@@ -47,70 +47,60 @@
 ) {
   @shadowColor: fadeout(@digitBackground, 50%);
 
-  (~".flip-counter.@{className} .digit") {
-    position: relative;
-    z-index: 0;
-
-    width: @digitWidth;
-    height: @digitHeight;
-    margin-left: @digitMargin;
-    background-color: @digitBackground;
-
-    text-align: center;
-    line-height: 0;
+  .flip-counter.@{className} .digit {
+    position            : relative;
+    z-index             : 0;
+    width               : @digitWidth;
+    height              : @digitHeight;
+    margin-left         : @digitMargin;
+    background-color    : @digitBackground;
+    text-align          : center;
+    line-height         : 0;
     // Fix for slight Chrome-Win font jumping
     // https://code.google.com/p/chromium/issues/detail?id=137692
     // 1px not enough, unfortunately
-    -webkit-text-stroke: 2px;
-
+    -webkit-text-stroke : 2px;
     .box-shadow(1px 1px 5px 0px @shadowColor);
     .border-radius(5px);
 
     &:last-child {
-      margin-left: 0;
+      margin-left : 0;
     }
 
     span {
-      position: absolute;
-      left: 0;
-
-      height: @digitHeight / 2;
-      width: @digitWidth;
-      overflow: hidden;
+      position         : absolute;
+      left             : 0;
+      height           : @digitHeight / 2;
+      width            : @digitWidth;
+      overflow         : hidden;
       .border-radius(5px);
-
-      font-size: @digitFontSize;
-      font-family: @digitFontFamily;
-      font-weight: @digitFontWeight;
-      text-indent: 2px;
-
-      background-color: @digitBackground;
-      color: @digitColor;
+      font-size        : @digitFontSize;
+      font-family      : @digitFontFamily;
+      font-weight      : @digitFontWeight;
+      text-indent      : 2px;
+      background-color : @digitBackground;
+      color            : @digitColor;
 
       // Prevents some jumping around in FF
       .translate3d(0, 0, 0);
 
       &.front {
-        top: 0;
-        padding-top: @digitHeight / 2;
-
+        top         : 0;
+        padding-top : @digitHeight / 2;
       }
 
       &.back {
-        bottom: 0;
+        bottom : 0;
       }
     }
 
     .line {
-      position: absolute;
-      z-index: 10;
-
-      height: @digitHeight / 2;
-      width: @digitWidth;
-
+      position      : absolute;
+      z-index       : 10;
+      height        : @digitHeight / 2;
+      width         : @digitWidth;
       @lineHeight: ceil(@digitFontSize/100);
-
-      border-bottom: @lineHeight solid fadeout(@digitBackground, 30%);
+      border-bottom : @lineHeight solid fadeout(@digitBackground, 30%);
       .box-shadow(0px @lineHeight+4 7px -4px fadeout(@digitBackground, 30%));
 
       // Another method of creating the dividing line as a box shadow. I thought this might
@@ -124,34 +114,31 @@
     }
 
     .hinge-wrap {
-      z-index: 5;
-      position: relative;
-      overflow: visible;
+      z-index  : 5;
+      position : relative;
+      overflow : visible;
       .perspective(@digitFlipPerspective);
     }
 
     .hinge {
-      position: absolute;
-
-      height: @digitHeight / 2;
-      width: @digitWidth;
-
+      position : absolute;
+      height   : @digitHeight / 2;
+      width    : @digitWidth;
       .transform-style(preserve-3d);
       .transition("transform @{digitFlipDuration}");
       .transform-origin(50% 100%);
 
       span {
-        height: 0px;
-        z-index: 5;
-
+        height  : 0;
+        z-index : 5;
         .backface-visibility(hidden);
 
         &.front {
-          padding-top: @digitHeight / 2;
+          padding-top : @digitHeight / 2;
         }
 
         &.back {
-          height: @digitHeight / 2;
+          height : @digitHeight / 2;
           .rotateX(180deg);
         }
 
@@ -163,20 +150,18 @@
     }
   }
 
-  (~".flip-counter.@{className} .digit-delimiter") {
-    padding-top: @digitHeight - @delimiterFontSize;
-    margin-right: -(@digitMargin / 2);
-
-    font-family: @digitFontFamily;
-    font-weight: @digitFontWeight;
-    font-size: @delimiterFontSize;
-    color: @digitBackground;
-
-    text-indent: (@digitMargin) / 3;
-    text-shadow: 1px 1px 5px @shadowColor;
+  .flip-counter.@{className} .digit-delimiter {
+    padding-top  : @digitHeight - @delimiterFontSize;
+    margin-right : -(@digitMargin / 2);
+    font-family  : @digitFontFamily;
+    font-weight  : @digitFontWeight;
+    font-size    : @delimiterFontSize;
+    color        : @digitBackground;
+    text-indent  : (@digitMargin) / 3;
+    text-shadow  : 1px 1px 5px @shadowColor;
   }
 }
 
 .no-csstransforms3d span.back {
-  display: none;
+  display : none;
 }