Updated css to use mixins

app/assets/javascripts/views/measure_view.js.coffee

@@ -34,11 +34,10 @@ class Thorax.Views.Measure extends Thorax.View
     e.preventDefault()
     if @$('.measure-settings').hasClass('measure-settings-expanded-delete')
       @$('.delete-icon').click()
-      # @$('.measure-settings').toggleClass('measure-settings-expanded-delete')
     @$('.measure-settings').toggleClass('measure-settings-expanded')
 
   showDelete: (e) ->
     e.preventDefault()
     $btn = $(e.currentTarget)
-    @$('.measure-settings-expanded').toggleClass('measure-settings-expanded-delete')
     $btn.toggleClass('btn-danger btn-danger-inverse').prev().toggleClass('hide')
+    @$('.measure-settings-expanded').toggleClass('measure-settings-expanded-delete')

app/assets/stylesheets/application.css.less

@@ -17,9 +17,3 @@
 @import "measure_calculation";
 @import "rationale";
 @import "builder";
-
-
-
-
-
-

app/assets/stylesheets/measure.less

@@ -24,67 +24,52 @@
     .make-sm-column(12);
     .title-bar;
     .short-title {
-      font-size: 1.8em;
+      .vertical-spacing;
       padding-right: 15px;
-      line-height: 1.75;
     }
     .full-title {
       line-height: 1.6;
       padding-right: 2%;
     }
     .settings-btn {
-      position: absolute;
-      font-size: 1.8em;
-      line-height: 1.75;
+      .fixed-vertical-spacing;
       border: 0;
-      top: -2px;
       right: 0;
       background: transparent;
     }
     .measure-settings {
-      position: absolute;
-      line-height: 1.75;
+      .fixed-vertical-spacing;
       height: 100%;
-      top: -2px;
       right: 30px;
       width: 0px;
       overflow: hidden;
-      white-space:nowrap;
-      -webkit-transition: width 0.3s linear;
-      -moz-transition: width 0.3s linear;
-      -ms-transition: width 0.3s linear;
-      -o-transition: width 0.3s linear;
-      transition: width 0.3s linear;
+      .btn-transition(width 0.3s linear);
+      .btn-danger {
+        .fa {
+          color: @btn-danger-color;
+        }
+      }
+      .btn-danger-inverse {
+        .fa {
+          color: @btn-danger-bg;
+        }
+      }
+      .delete-measure {
+        .measure-settings-padding;
+      }
+      .update-measure {
+        .measure-settings-padding;
+        .fa {
+          color: @brand-primary;
+        }
+      }
     }
     .measure-settings-expanded {
       width: 16%;
     }
     .measure-settings-expanded-delete {
       width: 27%;
     }
-    .btn-danger {
-      .fa {
-        color: @btn-danger-color;
-      }
-    }
-    .btn-danger-inverse {
-      .fa {
-        color: @btn-danger-bg;
-      }
-    }
-    .delete-measure {
-      margin-top: 7px;
-      padding-left: 6px;
-      padding-right: 6px;
-    }
-    .update-measure {
-      margin-top: 7px;
-      padding-left: 6px;
-      padding-right: 6px;
-      .fa {
-        color: @brand-primary;
-      }
-    }
   }
 
   .measure-dsp {

app/assets/stylesheets/mixins.less

@@ -33,3 +33,29 @@
 .btn-danger-inverse {
   .button-variant(@btn-danger-bg; @btn-danger-color; @btn-danger-border);
 }
+
+// Sliding transitions - used in Measure View settings
+.btn-transition(@transition) {
+  -webkit-transition: @transition;
+  -moz-transition: @transition;
+  -ms-transition: @transition;
+  -o-transition: @transition;
+  transition: @transition;
+}
+
+// Vertical spacing - used in Measure View title bar
+.vertical-spacing() {
+  font-size: 1.8em;
+  line-height: 1.75;
+}
+
+// Fixed vertical spacing and button padding - used in Measure View settings buttons
+.fixed-vertical-spacing() {
+  .vertical-spacing;
+  position: absolute;
+  top: -3px;
+}
+.measure-settings-padding {
+  padding-left: 6px;
+  padding-right: 6px;
+}