Style and refactor. [#74]

marnen · Mar 13, 2012 · 5bd4088 · 5bd4088
1 parent 4d62f7d
commit 5bd4088
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 30 deletions.
diff --git a/public/stylesheets/sass/_icon.scss b/public/stylesheets/sass/_icon.scss
@@ -0,0 +1,16 @@
+@mixin icon($icon_url, $icon_size: $silk_icon_size, $icon_margin: $default_icon_margin) {
+  background: {
+    image: $icon_url;
+    repeat: no-repeat; };
+  min-height: $icon_size + $icon_margin;
+  padding-left: $icon_size + $icon_margin; }
+
+@mixin attendance_icon($status) { // $status is 'yes', 'no', or 'maybe'
+  $attendance_icon_size: 12px;
+  $extension: png;
+  @if $status == maybe {
+    $extension: gif;
+  }
+  $icon_url: url("../images/attend_#{$status}.#{$extension}");
+  @include icon($icon_url, $attendance_icon_size);
+}
diff --git a/public/stylesheets/sass/quorum.scss b/public/stylesheets/sass/quorum.scss
@@ -1,3 +1,5 @@
+@import "_icon";
+
 $title_blue: #3333ff;
 
 // size of icons from Silk set
@@ -61,38 +63,34 @@ th {
     size: 90%;
     weight: lighter; }; }
 
-span.yes {
-  color: lime;
-  font-weight: bolder; }
-
-span.no {
-  font-weight: bolder;
-  color: red; }
-
-span.maybe {
-  color: yellow;
-  font-weight: bolder; }
-
-$circle_size: 12px;
-$attend_yes_url: url("../images/attend_yes.png");
-$attend_no_url: url("../images/attend_no.png");
-$attend_maybe_url: url("../images/attend_maybe.gif");
-
 td.yes p {
-  background-image: $attend_yes_url; }
+  @include attendance_icon(yes);
+}
 
 td.no p {
-  background-image: $attend_no_url; }
+  @include attendance_icon(no);
+}
 
 td.maybe p {
-  background-image: $attend_maybe_url; }
+  @include attendance_icon(maybe);
+}
 
 td.yes, td.no, td.maybe {
   background-color: black;
   color: white;
-  p {
-    padding-left: $circle_size + $default_icon_margin;
-    background-repeat: no-repeat; } }
+
+  span.yes {
+    color: lime;
+    font-weight: bolder; }
+
+  span.no {
+    font-weight: bolder;
+    color: red; }
+
+  span.maybe {
+    color: yellow;
+    font-weight: bolder; }
+}
 
 td.actions {
   background-color: transparent;
@@ -103,17 +101,22 @@ td.actions {
 
 .comments .user {
   font-weight: bolder;
+
+  &.yes {
+    @include attendance_icon(yes);
+  }
+
+  &.no {
+    @include attendance_icon(no);
+  }
+
+  &.maybe {
+    @include attendance_icon(maybe);
+  }
 }
 
 // Toolbar links with icons
 
-@mixin icon($icon_url, $icon_size: $silk_icon_size, $icon_margin: $default_icon_margin) {
-  background: {
-    image: $icon_url;
-    repeat: no-repeat; };
-  min-height: $icon_size + $icon_margin;
-  padding-left: $icon_size + $icon_margin; }
-
 $edit_icon_url: url("../images/pencil.png");
 
 a.edit {