Use mixins for file thumbails

10 files changed, 42 insertions, 34 deletions

diff --git a/assets/sass/_button.sass b/assets/sass/_button.sass
index 95237085..d9a6db3d 100644
--- a/assets/sass/_button.sass
+++ b/assets/sass/_button.sass
@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 a.btn
   text-decoration: none
diff --git a/assets/sass/_files.sass b/assets/sass/_files.sass
index 914dc1f5..9e130576 100644
--- a/assets/sass/_files.sass
+++ b/assets/sass/_files.sass
@@ -1,14 +1,11 @@
 @import variables
+@import mixins
 
 .file-thumbnails
-  display: -webkit-flex
-  display: flex
-  -webkit-flex-direction: row
-  flex-direction: row
-  -webkit-flex-wrap: wrap
-  flex-wrap: wrap
-  -webkit-justify-content: flex-start
-  justify-content: flex-start
+  +display-flex
+  +flex-direction(row)
+  +flex-wrap
+  +justify-content(flex-start)
 
 .file-thumbnail
   width: 250px
@@ -29,11 +26,11 @@
 
 .file-thumbnail-title
   font-weight: 700
-  font-size: 0.9em
+  font-size: size('compact')
   color: color('medium')
 
 .file-thumbnail-description
-  font-size: 0.8em
+  font-size: size('small')
   color: color('light')
   margin-top: 8px
   margin-bottom: 5px
diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass
index 6addea7a..23301a82 100644
--- a/assets/sass/_mixins.sass
+++ b/assets/sass/_mixins.sass
@@ -42,3 +42,27 @@
   @for $i from 1 through $n
     .column-#{$i}
       width: $i * 1%
+
+=appearance
+  -webkit-appearance: none
+  -moz-appearance: none
+
+=display-flex
+  display: -webkit-flex
+  display: flex
+
+=flex-direction($direction)
+  -webkit-flex-direction: $direction
+  flex-direction: $direction
+
+=flex-wrap
+  -webkit-flex-wrap: wrap
+  flex-wrap: wrap
+
+=align-content($position)
+  -webkit-align-items: $position
+  align-items: $position
+
+=justify-content($position)
+  -webkit-justify-content: $position
+  justify-content: $position
diff --git a/assets/sass/_page_header.sass b/assets/sass/_page_header.sass
index 74a3847b..7a3681f2 100644
--- a/assets/sass/_page_header.sass
+++ b/assets/sass/_page_header.sass
@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 .page-header
   margin-bottom: 20px
diff --git a/assets/sass/_project_header.sass b/assets/sass/_project_header.sass
index 9369791a..4e6c496f 100644
--- a/assets/sass/_project_header.sass
+++ b/assets/sass/_project_header.sass
@@ -1,3 +1,6 @@
+@import variables
+@import mixins
+
 .project-header
   @include grid(100)
 
diff --git a/assets/sass/_project_overview.sass b/assets/sass/_project_overview.sass
index 8ab4f1dc..675bde92 100644
--- a/assets/sass/_project_overview.sass
+++ b/assets/sass/_project_overview.sass
@@ -1,10 +1,12 @@
 @import variables
+@import mixins
 
 .project-overview-columns
   +display-flex
   +flex-direction(row)
   +flex-wrap
   +align-content(center)
+  +justify-content(center)
   margin-bottom: 20px
   font-size: size('large')
   @include xs-device
diff --git a/assets/sass/_sidebar.sass b/assets/sass/_sidebar.sass
index 80390e16..52177ba0 100644
--- a/assets/sass/_sidebar.sass
+++ b/assets/sass/_sidebar.sass
@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 .sidebar-container
   @include grid(100)
diff --git a/assets/sass/_task_summary.sass b/assets/sass/_task_summary.sass
index f457376d..06ff64ec 100644
--- a/assets/sass/_task_summary.sass
+++ b/assets/sass/_task_summary.sass
@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 #task-summary
   margin-bottom: 15px
diff --git a/assets/sass/_task_tags.sass b/assets/sass/_task_tags.sass
index 935b3faf..30bafd67 100644
--- a/assets/sass/_task_tags.sass
+++ b/assets/sass/_task_tags.sass
@@ -1,9 +1,9 @@
 @import variables
+@import mixins
 
 .task-tags li
   display: inline
-  margin: 0
-  margin-right: 4px
+  margin: 0 4px 0 0
   padding: 2px
   color: color('medium')
   border: 1px solid #666
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index c557219c..49e1b3f5 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -60,25 +60,3 @@ $board-task-limit-color: #DF5353
 
 @function button-hover-border-color($key)
   @return map-get($button-hover-border-colors, $key)
-
-=appearance
-  -webkit-appearance: none
-  -moz-appearance: none
-
-=display-flex
-  display: -webkit-flex
-  display: flex
-
-=flex-direction($direction)
-  -webkit-flex-direction: $direction
-  flex-direction: $direction
-
-=flex-wrap
-  -webkit-flex-wrap: wrap
-  flex-wrap: wrap
-
-=align-content($position)
-  -webkit-align-items: $position
-  align-items: $position
-  -webkit-justify-content: $position
-  justify-content: $position