Using mixins for aspects css style

5 files changed, 30 insertions, 39 deletions

diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index 17523f226..1f3dfb1b6 100644
--- a/app/assets/stylesheets/_mixins.scss
+++ b/app/assets/stylesheets/_mixins.scss
@@ -1,7 +1,7 @@
 /* Mixin file for sass.  Here is where we define our variables and
    browser compatability functions used in all scss/sass files */
 
-/* Transision defaults */
+// Transition defaults
 $speed: 0.1s;
 $easing: linear;
 
@@ -138,3 +138,21 @@ $default-border-radius: 3px;
     .glyphicon-ok { display: none;}
   }
 }
+
+@mixin aspect-dropdown-link($anchor-size) {
+  $link-text-color: #333;
+
+  a {
+    cursor: pointer;
+    padding-left: 10px;
+
+    .text {
+      color: $link-text-color;
+      font-size: $anchor-size;
+    }
+
+    &:hover {
+      background: $background-grey;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/aspects.scss b/app/assets/stylesheets/aspects.scss
index dce9a065d..5d79f11a8 100644
--- a/app/assets/stylesheets/aspects.scss
+++ b/app/assets/stylesheets/aspects.scss
@@ -1,26 +1,19 @@
+@import 'mixins';
+
 .aspect-dropdown {
 
   li {
     @include selectable-list;
+    @include aspect-dropdown-link(1em);
 
     .status_indicator {
       width: 19px;
       height: 14px;
       display: inline-block;
     }
-
-    a {
-      .text {
-        color: #333333;
-      }
-      &:hover {
-        background: $background-grey;
-      }
-      cursor: pointer;
-      padding-left: 10px;
-    }
   }
 }
+
 .aspect-membership {
   max-height: 300px;
   overflow: auto;
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index f3998a7c7..2a88055e6 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -676,28 +676,10 @@ input#q.search {
   margin-bottom: 20px;
 }
 
-@mixin aspect-dropdown-link() {
-  $link-text-color: #333;
-
-  a {
-    cursor: pointer;
-    padding-left: 10px;
-
-    .text {
-      color: $link-text-color;
-      font-size: 128%;
-    }
-
-    &:hover {
-      background: $background-grey;
-    }
-  }
-}
-
 .aspect-dropdown {
   li {
     @include selectable-list;
-    @include aspect-dropdown-link;
+    @include aspect-dropdown-link(128%);
 
     .status-indicator {
       display: inline-block;
diff --git a/app/assets/stylesheets/mobile/settings.scss b/app/assets/stylesheets/mobile/settings.scss
index f49b0ee88..0880462d3 100644
--- a/app/assets/stylesheets/mobile/settings.scss
+++ b/app/assets/stylesheets/mobile/settings.scss
@@ -56,10 +56,8 @@
       width: 50px;
     }
   }
-}
 
-.user-language,
-.user-color-theme,
-.aspect-id {
-  padding: 3px;
+  select {
+    padding: 3px;
+  }
 }
diff --git a/app/views/users/_edit.haml b/app/views/users/_edit.haml
index 86c0011fd..e20bcff44 100644
--- a/app/views/users/_edit.haml
+++ b/app/views/users/_edit.haml
@@ -62,7 +62,7 @@
         %h3= t(".change_language")
         = form_for "user", url: edit_user_path, html: {method: :put} do |f|
           .form-inline.clearfix
-            = f.select :language, available_language_options, {}, class: "form-control form-group user-language"
+            = f.select :language, available_language_options, {}, class: "form-control form-group"
             = f.submit t(".change_language"), class: "btn btn-primary pull-right"
     %hr
 
@@ -71,7 +71,7 @@
         %h3= t(".change_color_theme")
         = form_for "user", url: edit_user_path, html: {method: :put} do |f|
           .form-inline.clearfix
-            = f.select :color_theme, available_color_themes, {}, class: "form-control form-group color-theme"
+            = f.select :color_theme, available_color_themes, {}, class: "form-control form-group"
             = f.submit t(".change_color_theme"), class: "btn btn-primary pull-right"
     %hr
 
@@ -110,7 +110,7 @@
               = f.select :auto_follow_back_aspect_id,
                 aspect_options_for_select(current_user.aspects),
                 {},
-                class: "form-control aspect-id"
+                class: "form-control"
 
           .small-horizontal-spacer
           .clearfix= f.submit t(".change"), class: "btn btn-primary pull-right"