Specify border/spacing values in stylesheet

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 6f3bb0c5016bfc1573c6a2d1b38c656befc6eba0..449c52038e59ffc859f25375d6a9025a68625555 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -111,12 +111,11 @@ $(document).ready(function () {
 
     var firstContainer = controls[0].getContainer();
     $(firstContainer).find(".control-button").first()
-      .css("border-start-start-radius", "4px");
+      .addClass("control-button-first");
 
     var lastContainer = controls[controls.length - 1].getContainer();
     $(lastContainer).find(".control-button").last()
-      .css("margin-bottom", "10px")
-      .css("border-end-start-radius", "4px");
+      .addClass("control-button-last");
   }
 
   addControlGroup([

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f48387a595973c584df0fc397b937c238d9251cd..a5afa85b1d80fb9a9051807b5e68180ca1e7d5b5 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -376,6 +376,15 @@ body.small-nav {
     background-color: $vibrant-green;
   }
 
+  &-first {
+    border-start-start-radius: 4px;
+  }
+
+  &-last {
+    border-end-start-radius: 4px;
+    margin-bottom: 10px;
+  }
+
   .icon {
     margin: 10px;
   }