added prefixer.less

2013-06-25 22:42:44 -07:00 · 2013-06-25 22:42:44 -07:00 · 3b80d59197
parent ab28b50c7e
commit 3b80d59197
8 changed files with 483 additions and 144 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -33,7 +33,8 @@ module.exports = function (grunt) {
            'UI/Content/Messenger/messenger.css'             : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css',
            'UI/Content/Messenger/messenger.future.css'      : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger-theme-future.css',
            
-            'UI/Content/bootstrap.toggle-switch.css'         : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css'          
+            'UI/Content/bootstrap.toggle-switch.css'         : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css',          
+            'UI/Content/prefixer.less'                       : 'http://raw.github.com/JoelSutherland/LESS-Prefixer/master/prefixer.less'          
        },

        clean: {
@ -41,6 +42,14 @@ module.exports = function (grunt) {
        },

        less  : {
+
+            options:{
+                dumpLineNumbers : 'false',
+                compress        : false,
+                yuicompress     : false,
+                ieCompat        : false
+            },
+
            bootstrap: {
                src : "UI/Content/bootstrap/bootstrap.less",
                dest: "_output/UI/Content/bootstrap.css"
--- a/UI/AddSeries/addSeries.less
+++ b/UI/AddSeries/addSeries.less
@ -2,7 +2,6 @@
@import "../shared/Styles/clickable.less";

 .result-list {
-
  font-size      : 14px;
  text-align     : left;
  padding-bottom : 30px;
@ -93,7 +92,7 @@
  margin-left : 20px;
 }

-.new-series-loadmore {
+.loadmore {
  .clickable;
  font-size      : 30px;
  font-weight    : 300;
--- a/UI/Content/Backgrid/paginator.less
+++ b/UI/Content/Backgrid/paginator.less
@ -1,15 +1,11 @@
+@import "/content/prefixer";
+
 .backgrid-paginator {
  text-align            : center;
-  -webkit-box-sizing    : border-box;
-  -moz-box-sizing       : border-box;
  box-sizing            : border-box;
  border-top            : none;
-  -webkit-border-radius : 0 0 4px 4px;
-  -moz-border-radius    : 0 0 4px 4px;
-  border-radius         : 0 0 4px 4px;
-
-
-
+  .box-sizing(border-box);
+  .border-radios(0 0 4px 4px);

  ul {
    display  : inline-block;
--- a/UI/Content/base.less
+++ b/UI/Content/base.less
@ -8,6 +8,7 @@
@import "menu";
@import "backgrid/backgrid";
@import "../shared/styles/clickable";
+@import "/content/prefixer";

 .progress {
  width         : 125px;
@ -38,7 +39,6 @@
  box-shadow       : none;
 }

-
 .line &>[class^="icon-"], .line &>[class*=" icon-"] {
  margin-top  : 1em;
  height      : 1em;
@ -81,10 +81,10 @@

  &:hover {
    text-decoration : none;
-    opacity         : 0.4;
+    .opacity         (0.4);
  }

-  opacity   : 0.2;
+  .opacity   (0.2);
  position  : fixed;
  bottom    : 50px;
  right     : 50px;
--- a/UI/Content/menu.less
+++ b/UI/Content/menu.less
@ -1,4 +1,6 @@
-#main-menu-region {
+@import "/content/prefixer";
+
+#main-menu-region {
  i:before {
    font-size : 35px;
  }
@ -18,5 +20,5 @@

 .backdrop #in-sub-nav {
  background-color : #000000;
-  opacity: 0.85;
+  .opacity(0.85);
 }
--- a/UI/Content/prefixer.less
+++ b/UI/Content/prefixer.less
@ -0,0 +1,336 @@
+//---------------------------------------------------
+//  LESS Prefixer
+//---------------------------------------------------
+//
+//  All of the CSS3 fun, none of the prefixes!
+//
+//  As a rule, you can use the CSS properties you
+//  would expect just by adding a '.':
+//
+//  box-shadow => .box-shadow(@args)
+//
+//  Also, when shorthand is available, arguments are
+//  not parameterized. Learn CSS, not LESS Prefixer.
+//
+//  -------------------------------------------------
+//  TABLE OF CONTENTS
+//  (*) denotes a syntax-sugar helper
+//  -------------------------------------------------
+//
+//      .animation(@args)
+//          .animation-delay(@delay)
+//          .animation-direction(@direction)
+//          .animation-duration(@duration)
+//          .animation-iteration-count(@count)
+//          .animation-name(@name)
+//          .animation-play-state(@state)
+//          .animation-timing-function(@function)
+//      .background-size(@args)
+//      .border-radius(@args)
+//      .box-shadow(@args)
+//          .inner-shadow(@args) *
+//      .box-sizing(@args)
+//          .border-box() *
+//          .content-box() *
+//      .columns(@args)
+//          .column-count(@count)
+//          .column-gap(@gap)
+//          .column-rule(@args)
+//          .column-width(@width)
+//      .gradient(@default,@start,@stop) *
+//          .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+//          .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+//      .opacity(@factor)
+//      .transform(@args)
+//          .rotate(@deg)
+//          .scale(@factor)
+//          .translate(@x,@y)
+//          .translate3d(@x,@y,@z)
+//          .translateHardware(@x,@y) *
+//      .text-shadow(@args)
+//      .transition(@args)
+//          .transition-delay(@delay)
+//          .transition-duration(@duration)
+//          .transition-property(@property)
+//          .transition-timing-function(@function)
+//
+//
+//
+//  Credit to LESS Elements for the motivation and
+//  to CSS3Please.com for implementation.
+//
+//  Copyright (c) 2012 Joel Sutherland
+//  MIT Licensed:
+//  http://www.opensource.org/licenses/mit-license.php
+//
+//---------------------------------------------------
+
+
+// Animation
+
+.animation(@args) {
+    -webkit-animation: @args;
+    -moz-animation: @args;
+    -ms-animation: @args;
+    -o-animation: @args;
+}
+.animation-delay(@delay) {
+    -webkit-animation-delay: @delay;
+    -moz-animation-delay: @delay;
+    -ms-animation-delay: @delay;
+    -o-animation-delay: @delay;
+}
+.animation-direction(@direction) {
+    -webkit-animation-direction: @direction;
+    -moz-animation-direction: @direction;
+    -ms-animation-direction: @direction;
+    -o-animation-direction: @direction;
+}
+.animation-duration(@duration) {
+    -webkit-animation-duration: @duration;
+    -moz-animation-duration: @duration;
+    -ms-animation-duration: @duration;
+    -o-animation-duration: @duration;
+}
+.animation-iteration-count(@count) {
+    -webkit-animation-iteration-count: @count;
+    -moz-animation-iteration-count: @count;
+    -ms-animation-iteration-count: @count;
+    -o-animation-iteration-count: @count;
+}
+.animation-name(@name) {
+    -webkit-animation-name: @name;
+    -moz-animation-name: @name;
+    -ms-animation-name: @name;
+    -o-animation-name: @name;
+}
+.animation-play-state(@state) {
+    -webkit-animation-play-state: @state;
+    -moz-animation-play-state: @state;
+    -ms-animation-play-state: @state;
+    -o-animation-play-state: @state;
+}
+.animation-timing-function(@function) {
+    -webkit-animation-timing-function: @function;
+    -moz-animation-timing-function: @function;
+    -ms-animation-timing-function: @function;
+    -o-animation-timing-function: @function;
+}
+
+
+// Background Size
+
+.background-size(@args) {
+    -webkit-background-size: @args;
+    -moz-background-size: @args;
+    background-size: @args;
+}
+
+
+// Border Radius
+
+.border-radius(@args) {
+    -webkit-border-radius: @args;
+    -moz-border-radius: @args;
+    border-radius: @args;
+
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+
+// Box Shadows
+
+.box-shadow(@args) {
+    -webkit-box-shadow: @args;
+    -moz-box-shadow: @args;
+    box-shadow: @args;
+}
+.inner-shadow(@args) {
+    .box-shadow(inset @args);
+}
+
+
+// Box Sizing
+
+.box-sizing(@args){
+    -webkit-box-sizing: @args;
+    -moz-box-sizing: @args;
+    box-sizing: @args;
+}
+.border-box(){
+    .box-sizing(border-box);
+}
+.content-box(){
+    .box-sizing(content-box);
+}
+
+
+// Columns
+
+.columns(@args){
+    -webkit-columns: @args;
+    -moz-columns: @args;
+    columns: @args;
+}
+.column-count(@count) {
+    -webkit-column-count: @count;
+    -moz-column-count: @count;
+    column-count: @count;
+}
+.column-gap(@gap) {
+    -webkit-column-gap: @gap;
+    -moz-column-gap: @gap;
+    column-gap: @gap;
+}
+.column-width(@width){
+    -webkit-column-width: @width;
+    -moz-column-width: @width;
+    column-width: @width;
+}
+.column-rule(@args){
+    -webkit-column-rule: @rule;
+    -moz-column-rule: @rule;
+    column-rule: @rule;
+}
+
+
+// Gradients
+
+.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    .linear-gradient-top(@default,@start,0%,@stop,100%);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+}
+
+
+// Opacity
+
+.opacity(@factor){
+    opacity: @factor;
+    @iefactor: @factor*100;
+    filter: alpha(opacity=@iefactor);
+}
+
+
+// Text Shadow
+
+.text-shadow(@args){
+    text-shadow: @args;
+}
+
+
+// Transforms
+
+.transform(@args) {
+    -webkit-transform: @args; 
+    -moz-transform: @args; 
+    -ms-transform: @args; 
+    -o-transform: @args; 
+    transform: @args;
+}
+.rotate(@deg:45deg){
+    .transform(rotate(@deg));
+}
+.scale(@factor:.5){
+    .transform(scale(@factor));
+}
+.translate(@x,@y){
+    .transform(translate(@x,@y));
+}
+.translate3d(@x,@y,@z) {
+    .transform(translate3d(@x,@y,@z));
+}
+.translateHardware(@x,@y){
+    .translate(@x,@y);
+    -webkit-transform: translate3d(@x,@y,0);
+    -moz-transform: translate3d(@x,@y,0);
+}
+
+
+// Transitions
+
+.transition(@args:200ms) {
+    -webkit-transition: @args;
+    -moz-transition: @args;
+    -o-transition: @args;
+    transition: @args;
+}
+.transition-delay(@delay:0) {
+    -webkit-transition-delay: @delay;
+    -moz-transition-delay: @delay;
+    -o-transition-delay: @delay;
+    transition-delay: @delay;
+}
+.transition-duration(@duration:200ms) {
+    -webkit-transition-duration: @duration;
+    -moz-transition-duration: @duration;
+    -o-transition-duration: @duration;
+    transition-duration: @duration;
+}
+.transition-property(@property:all) {
+    -webkit-transition-property: @property;
+    -moz-transition-property: @property;
+    -o-transition-property: @property;
+    transition-property: @property;
+}
+.transition-timing-function(@function:ease) {
+    -webkit-transition-timing-function: @function;
+    -moz-transition-timing-function: @function;
+    -o-transition-timing-function: @function;
+    transition-timing-function: @function;
+}
+
--- a/UI/Series/series.less
+++ b/UI/Series/series.less
@ -1,5 +1,6 @@
@import "../Shared/Styles/card.less";
@import "../Shared/Styles/clickable.less";
+@import "/content/prefixer";

 .series-item {
  padding-bottom : 30px;
@ -20,18 +21,16 @@
 .series-page-header {
  background : #000000;
  color      : #ffffff;
-  opacity: 0.9;
+  .opacity(0.9);
  padding    : 30px 30px;
  margin     : 50px 10px;
-  opacity: 0.9;
 }

 .series-season {
  .card;
  margin  : 80px 10px;
  padding : 20px 40px;
-  opacity: 0.9;
-
+  .opacity(0.9);
 }

 .series-posters {
@ -72,7 +71,7 @@

    .labels {
      display : inline-block;
-      opacity: 0.75;
+      .opacity(0.75);
      width   : 170px;

      :hover {
@ -85,7 +84,7 @@
      }

      .tooltip {
-        opacity: 1;
+        .opacity(1);
      }
    }
  }
@ -98,17 +97,17 @@
    .ended-banner {
      color                    : #eeeeee;
      background-color         : #b94a48;
-      -moz-box-shadow: 2px 2px 20px #888888;
-      -moz-transform: rotate(45deg);
+      .box-shadow(2px 2px 20px #888888);
      -moz-transform-origin    : 50% 50%;
-      -webkit-transform: rotate(45deg);
      -webkit-transform-origin : 50% 50%;
      position                 : absolute;
      width                    : 300px;
      top                      : 175px;
      left                     : -122px;
      text-align               : center;
-      opacity: 0.9;
+      .opacity(0.9);
+
+      .transform(rotate(45deg));
    }

    .series-controls {
@ -119,7 +118,7 @@
      width            : 100%;
      text-align       : right;
      padding-right    : 20px;
-      opacity: 0.8;
+      .opacity(0.8);
      display          : none;
    }

@ -134,8 +133,6 @@
  margin-bottom : 50px;
 }

-@import "../shared/Styles/clickable.less";
-
 .series-season {
  .episode-number-cell {
    width : 22px;
--- a/UI/Shared/Styles/card.less
+++ b/UI/Shared/Styles/card.less
@ -1,10 +1,10 @@
+@import "/Content/prefixer";
+
 .card() {
  margin           : 10px;
  background-color : #ffffff;
  padding          : 10px;
-  box-shadow: 0px 0px 10px 1px #e1e1e1;
  color            : #444444;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  .box-shadow( 0px 0px 10px 1px #e1e1e1);
+  .border-radius(3px);
 }