Converted LESS to SCSS stylesheets

app/stylesheets/_buttons.less → app/assets/stylesheets/store/_buttons.scss

@@ -1,11 +1,11 @@
-@import "_mixins";
+@import "mixins";
 
 button, a.button, input.button {
-  .rounded_corners(0.3em);
-  background: #efefef url(../images/buttons/bg-button.png) center left repeat-x !important;
+  @include rounded_corners(0.3em);
+  background: #EFEFEF image-url('buttons/bg-button.png') center left repeat-x !important;
   border-style: solid;
   border-width: 1px !important;
-  border-color: #ddd #999 #999 #ddd !important;
+  border-color: #DDD #999 #999 #DDD !important;
   -moz-outline-radius: .3em;
   color: #111;
   display: inline-block;
@@ -38,17 +38,17 @@ button.disabled, a.button.disabled, input.button.disabled{
 }
 
 button:hover, a.button:hover, input.button:hover {
-  background-image: url(../images/buttons/bg-button-hover.png) !important;
+  background-image: image-url('buttons/bg-button-hover.png') !important;
 }
 
 button.large, a.button.large, input.button.large {
-  .rounded_corners(0.3em);
+  @include rounded_corners(0.3em);
   font-size: 1.4em !important;
   line-height: 1.4em;
 }
 
 button.small, a.button.small, input.button.small {
-  .rounded_corners(4px);
+  @include rounded_corners(4px);
   font-size: .9em;
   line-height: 1.4em;
   padding: 5px 10px;

app/stylesheets/_cart.less → app/assets/stylesheets/store/_cart.scss

@@ -1,8 +1,8 @@
-@import "_colors";
-@import "_mixins";
+@import "colors";
+@import "mixins";
 
 div#subtotal {
-  .rightie;
+  @include rightie;
   width: auto;
   text-align: left;
 }

app/stylesheets/_checkout.less → app/assets/stylesheets/store/_checkout.scss

@@ -1,6 +1,6 @@
-@import "_colors";
-@import "_mixins";
-@import "_checkout_progress";
+@import "colors";
+@import "mixins";
+@import "checkout_progress";
 
 div#checkout {
   position: relative;
@@ -16,15 +16,13 @@ div#checkout {
   }
 
   #checkout_form_address {
-    background-image: url("../images/steps/2.png");
+    background-image: image-url('steps/2.png');
   }
   #checkout_form_delivery {
-    background-image: url("../images/steps/3.png");
+    background-image: image-url('steps/3.png');
   }
   #checkout_form_address #billing label, #checkout_form_address #shipping label {
-    width:190px;
     float: left;
-    padding-right: 10px;
     text-align: right;
   }
   #checkout_form_address #billing input, #checkout_form_address #shipping input,
@@ -34,7 +32,7 @@ div#checkout {
   #checkout_form_address #billing p.checkbox,
   #checkout_form_address #shipping p.checkbox,
   #checkout_form_address .form-buttons {
-    padding-left:200px;
+    padding-left: 0px;
   }
 
   #checkout_form_address #billing p.checkbox label, #checkout_form_address #shipping p.checkbox label {
@@ -46,10 +44,10 @@ div#checkout {
   }
 
   #checkout_form_payment {
-    background-image: url("../images/steps/5.png");
+    background-image: image-url('steps/5.png');
     select { width: 75px; }
-    #payment { .column(8); }
-    #order_details { .column(12); }
+    #payment { @include column(8); }
+    #order_details { @include column(12); }
   }
 
   #payment-methods {
@@ -59,10 +57,10 @@ div#checkout {
     width: 720px;
     li {
         display:block;
-        .column(5);
+        @include column(5);
     }
     li.last {
-      .column-last(5);
+      @include column-last(5);
     }
   }
 

app/stylesheets/_checkout_progress.less → app/assets/stylesheets/store/_checkout_progress.scss

@@ -1,13 +1,13 @@
 /* 
   Checkout Progress Indicator
   current-last etc. required instead of "current last" because IE6 won't handle multiple classes
- */
+*/
 ol.progress-steps {
   list-style: none;
   margin:0; padding:0;
   line-height: 1em;
   font-size: 12px;
-  
+
 }
 ol.progress-steps li {
   margin:0; padding: 0;
@@ -17,7 +17,7 @@ ol.progress-steps li {
   color: #999;
   background-position: top left;
   background-repeat: no-repeat;
-  background-image: url(../images/step-progress/incomplete-incomplete.gif);
+  background-image: image-url('step-progress/incomplete-incomplete.gif');
 }
 ol.progress-steps li span {
   padding: 5px 14px 7px 24px;
@@ -35,28 +35,28 @@ ol.progress-steps li.current-first span, ol.progress-steps li.completed-first sp
   padding-left: 14px;
 }
 ol.progress-steps li.current-first {
-  background-image: url(../images/step-progress/current-first.gif);
+  background-image: image-url('step-progress/current-first.gif');
 }
 ol.progress-steps li.completed-first {
-  background-image: url(../images/step-progress/completed-first.gif)!important;
+  background-image: image-url('step-progress/completed-first.gif')!important;
 }
 /* middles */
 ol.progress-steps li.current, ol.progress-steps li.current-first, ol.progress-steps li.current-last  {
-  color: #fff;
+  color: #FFF;
 }
 ol.progress-steps li.completed {
-  background-image: url(../images/step-progress/completed-completed.gif);
+  background-image: image-url('step-progress/completed-completed.gif');
 }
 ol.progress-steps li.current, ol.progress-steps li.current-last {
-  background-image: url(../images/step-progress/completed-current.gif);
+  background-image: image-url('step-progress/completed-current.gif');
 }
 ol.progress-steps li.next, ol.progress-steps li.next-last {
-  background-image: url(../images/step-progress/current-incomplete.gif);
+  background-image: image-url('step-progress/current-incomplete.gif');
 }
 /* rights */
 ol.progress-steps li.last span, ol.progress-steps li.next-last span {
-  background-image: url(../images/step-progress/incomplete-right.gif);
+  background-image: image-url('step-progress/incomplete-right.gif');
 }
 ol.progress-steps li.current-last span {
-  background-image: url(../images/step-progress/current-right.gif);
+  background-image: image-url('step-progress/current-right.gif');
 }

app/assets/stylesheets/store/_colors.scss

@@ -0,0 +1,15 @@
+$white: #FFF;
+$black: #000;
+$input_border: #BBB;
+$default_border_color: #DDD;
+$link_hover_color: #3C7DFB;
+$lighter_text_color: #666;
+$medium_blue: #2E6AB1;
+$lightest_blue: #BBDAFD;
+$light_blue: #E5F2F8;
+$dark_blue: #162F54;
+
+$link_color: #2E6AB1;
+$link_hover_color: $black;
+
+$selling_price_color: $medium_blue;

app/stylesheets/_forms.less → app/assets/stylesheets/store/_forms.scss

@@ -1,33 +1,33 @@
 form {
-  
+
   p.field {
     margin-bottom: 0.5em;
     clear: both;
-    
+
     span.req {
       color: red;
       float: left; 
       margin-left: 2px;
       position: relative;
       top: -3px;
     }
-    
-    input[type=text], select { 
+
+    input[type=text], select {
       float: left;
-      margin: 0 5px 7px 0; 
+      margin: 0 5px 7px 0;
     }
   }
   p.field.radios {
     line-height: 150%;
   }
-  
+
 }
 
 label {
   font-weight: bold;
 }
 
-div#checkout #checkout_form_address #billing label.error, 
+div#checkout #checkout_form_address #billing label.error,
 div#checkout #checkout_form_address #shipping label.error
 {
   color: red;

app/stylesheets/_layout.less → app/assets/stylesheets/store/_layout.scss

@@ -1,27 +1,23 @@
-@import "_colors";
-@import "_mixins";
+@import "colors";
+@import "mixins";
 
 body {
-  margin-top: 0px;
-  background: #ffffff url(../images/tile-slider.png) top left repeat-x;
+  margin-top: 10px;
+  background: #FFF image-url('body-back.png') top left repeat-x;
 }
 
-.container_bg{
-  width:100%;
-  background:url(../images/tile-header.png) top left repeat-x;
-}
-
-div.left { .leftie; }
-div.right { .rightie;  }
+div.left { @include leftie; }
+div.right { @include rightie;  }
 a { outline: none; }
 
 #wrapper {
-  background: transparent url(../images/wrapper-back.png) top center no-repeat;
+  background: transparent image-url('wrapper-back.png') top center no-repeat;
   padding: 25px 20px 20px;
   position: relative;
+  min-height: 420px;
   }
   body.two-col #wrapper {
-    background-image: url(../images/wrapper-back-2.png);
+    background-image: image-url('wrapper-back-2.png');
   }
 
 .container {
@@ -31,24 +27,24 @@ a { outline: none; }
   display: block; }
 
 #sidebar {
-  .column(4);
-  .colborder;
+  @include column(4);
+  @include colborder;
   h3 { margin-bottom: .5em; }
 }
 
 body.one-col #content {
-  .column-last(24);
+  @include column-last(24);
 }
 body.two-col #content {
-  .column-last(19);
+  @include column-last(19);
 }
 
 #header {
   position: relative;
-  color: @medium_blue;
+  color: $medium_blue;
   clear: both;
-  a { color: @link_color; }
-  a:hover { color: @link_hover_color; }
+  a { color: $link_color; }
+  a:hover { color: $link_hover_color; }
 
 }
 

app/stylesheets/_messages.less → app/assets/stylesheets/store/_messages.scss

@@ -1,25 +1,20 @@
-@import "_mixins";
+@import "mixins";
 
 .flash {
-  .rounded_corners;
+  @include rounded_corners;
   font-size: 1.3em;
   margin-bottom: 1em;
   padding: 0.8em;
 }
 .flash.notice {
-  .message_box(#CDF, #569, #9AC);
+  @include message_box(#CDF, #569, #9AC);
 }
 .flash.errors {
-  .message_box(#F4B4B4, #000, #000);
+  @include message_box(#F4B4B4, #000, #000);
 }
-
-
 .formError, .errorExplanation {
-  font-size: 1.3em;
-  margin-bottom: 1em;
-  padding: 0.8em;
-  .rounded_corners;
-  .message_box(#F4B4B4, #000, #000);
+  @extend .flash;
+  @extend .flash.errors;
   p { margin: 0px; }
   ul { margin-bottom: 0px; }
   h2 {
@@ -28,5 +23,4 @@
     margin: 0px;
   }
 }
-
 .fieldWithErrors { clear: none; }