From d1a915facaecad0833dfb3b80404608172cd167d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 1 Oct 2014 12:06:37 +0200
Subject: [PATCH] Fixed lightboxes

---
 app/styles/components/basic-table.scss         | 18 +++---------------
 app/styles/dependencies/mixins.scss            | 16 ++++++++--------
 app/styles/layout/base.scss                    |  6 ++----
 .../modules/admin/admin-membership-table.scss  | 15 +++++++--------
 app/styles/modules/common/lightbox.scss        | 15 +++++----------
 app/styles/modules/home-projects-list.scss     |  2 +-
 app/styles/modules/issues/issues-table.scss    | 15 +++++++--------
 app/styles/modules/kanban/kanban-table.scss    |  6 +++---
 8 files changed, 36 insertions(+), 57 deletions(-)

diff --git a/app/styles/components/basic-table.scss b/app/styles/components/basic-table.scss
index 88fc0c17..c89b2c03 100644
--- a/app/styles/components/basic-table.scss
+++ b/app/styles/components/basic-table.scss
@@ -1,27 +1,15 @@
 .basic-table {
-    align-content: stretch;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: flex-start;
+    @include table-flex(stretch, center, flex, column, wrap, flex-start);
     width: 100%;
     .row {
-        align-content: stretch;
-        align-items: center;
+        @include table-flex(stretch, center, flex, row, nowrap, flex-start);
         border-bottom: 1px solid $gray-light;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
         padding: .5rem 0;
         text-align: left;
         width: 100%;
         @for $i from 1 through 8 {
             .width-#{$i} {
-                flex-basis: 50px;
-                flex-grow: $i;
-                flex-shrink: 0;
+                @include table-flex-child($i, 50px, 0);
             }
         }
         &:last-child {
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index 9ceeadae..0789a083 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -11,17 +11,17 @@
 
 // Table Flex - http://devbryce.com/site/flexbox/
 @mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
-    align-content: $align-content; // flex-start, flex-end, center, space-between, space-around, stretch
-    align-items: $align-items; //flex-start, flex-end, center, baseline, stretch
-    display: $display;
-    flex-direction: $flex-direction; //row | row-reverse | column | column-reverse
-    flex-wrap: $flex-wrap; // nowrap | wrap | wrap-reverse
-    justify-content: $justify-content; //flex-start | flex-end | center | space-between | space-around
+    @include display($display);
+    @include align-content($align-content);
+    @include align-items($align-items);
+    @include flex-direction($flex-direction);
+    @include flex-wrap($flex-wrap);
+    @include justify-content($justify-content);
 }
 
 @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
-    flex-basis: $flex-basis;
-    flex-grow: $flex-grow;
+    @include flex($flex-grow);
+    @include flex-basis($flex-basis);
     flex-shrink: $flex-shrink;
     width: $flex-basis;
     @if #{$width} != null {
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index 3ce71939..0291d525 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -125,12 +125,10 @@ body {
 }
 
 .header-with-actions {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    @include table-flex(stretch, center, flex, row, wrap, space-between);
     margin-bottom: 1rem;
     .action-buttons {
-        flex-shrink: 0;
+        @include flex-shrink(0);
         padding-left: 1rem;
     }
     h1 {
diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss
index 699f5abb..43a1a646 100644
--- a/app/styles/modules/admin/admin-membership-table.scss
+++ b/app/styles/modules/admin/admin-membership-table.scss
@@ -3,13 +3,13 @@
         @extend %bold;
     }
     .avatar {
-        align-items: center;
-        display: flex;
+        @include table-flex(stretch, center, flex, row, wrap, flex-start);
         figcaption {
             margin-left: 1rem;
         }
         img {
-            flex-basis: 35px;
+            @include table-flex-child(1, 35px, 0);
+            max-width: 35px;
         }
         .name,
         .email {
@@ -54,12 +54,11 @@
         padding-right: 1rem;
     }
     .row-status {
-        display: flex;
+        @include table-flex();
         .delete {
             @extend %large;
-            align-items: center;
+            @include table-flex(stretch, center, flex, row, wrap, flex-start);
             color: $gray-light;
-            display: flex;
             margin-left: 15px;
             padding: 0 15px;
             &:hover {
@@ -79,13 +78,13 @@
     .row-role,
     .header-member,
     .header-role {
-        flex: 3 0 50px;
+        @include table-flex-child(3, 35px, 0);
     }
     .row-status,
     .row-admin,
     .header-admin,
     .header-status {
-        flex: 1 0 50px;
+        @include table-flex-child(1, 50px, 0);
     }
     .check {
         background-color: darken($whitish, 10%);
diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss
index 96f7370f..3bd0ab8b 100644
--- a/app/styles/modules/common/lightbox.scss
+++ b/app/styles/modules/common/lightbox.scss
@@ -1,7 +1,6 @@
 .lightbox,
 %lightbox {
     @include background-opacity($white, .95);
-    @include table-flex(center, center, flex, row, wrap, center);
     @include transition (opacity .3s ease);
     bottom: 0;
     display: none;
@@ -17,6 +16,9 @@
         right: 2rem;
         top: 2rem;
     }
+    &.open {
+        @include table-flex(center, center, flex, row, wrap, center);
+    }
     .title {
         text-align: center;
     }
@@ -96,18 +98,11 @@
     }
 
     .settings {
-        align-content: flex-start;
-        align-items: stretch;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
+        @include table-flex(flex-start, stretch, flex, row, wrap, flex-start);
         margin-bottom: 1rem;
 
         fieldset {
-            flex-basis: 30%;
-            flex-grow: 1;
-            flex-shrink: 0;
+            @include table-flex-child(1, 30%, 0);
             margin-right: .5rem;
             text-align: center;
             &:last-child {
diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss
index f47eaff9..ca02b1c7 100644
--- a/app/styles/modules/home-projects-list.scss
+++ b/app/styles/modules/home-projects-list.scss
@@ -12,7 +12,7 @@
     top: 0;
     width: 100%;
     .welcome-user {
-        display: flex;
+        @include table-flex();
         position: absolute;
         right: 1rem;
         top: 1rem;
diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss
index 44e12d9e..7f8b5b23 100644
--- a/app/styles/modules/issues/issues-table.scss
+++ b/app/styles/modules/issues/issues-table.scss
@@ -33,22 +33,21 @@
         border-bottom: 1px solid $gray-light;
     }
     .avatar {
-        align-items: center;
-        display: flex;
+        @include table-flex(stretch, stretch, flex, row, wrap, flex-start);
         img {
-            flex-basis: 35px;
-            flex-shrink: 0;
+            width: 35px;
         }
         figcaption {
+            @include table-flex-child(1, 60%, 0);
             margin-left: .5rem;
         }
     }
     .level-field {
-        @include table-flex-child(1, 70px, 0, 70px);
+        @include table-flex-child(1, 70px, 0);
         text-align: center;
     }
     .subject {
-        @include table-flex-child(7, 300px, 0, 300px);
+        @include table-flex-child(7, 300px, 0);
         padding-right: 1rem;
         span {
             &:first-child {
@@ -59,13 +58,13 @@
     .issue-field,
     .assigned-field,
     .created-field {
-        @include table-flex-child(1, 100px, 0, 150px);
+        @include table-flex-child(1, 100px, 0);
         padding: 0 1rem;
         position: relative;
         text-align: left;
     }
     .assigned-field {
-        @include table-flex-child(2, 100px, 0, 150px);
+        @include table-flex-child(2, 100px, 0);
     }
     .issue-assignedto {
         cursor: pointer;
diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss
index e82a7d3f..e7d30885 100644
--- a/app/styles/modules/kanban/kanban-table.scss
+++ b/app/styles/modules/kanban/kanban-table.scss
@@ -20,7 +20,7 @@ $column-margin: 0 10px 0 0;
         position: absolute;
     }
     .task-colum_name {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        @include table-flex-child();
         @extend %large;
         background: $whitish;
         border-top: 3px solid $gray-light;
@@ -60,7 +60,7 @@ $column-margin: 0 10px 0 0;
     overflow-x: auto;
     width: 100%;
     .task-column {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        @include table-flex-child();
         margin: $column-margin;
         overflow-y: auto;
         &:last-child {
@@ -80,5 +80,5 @@ $column-margin: 0 10px 0 0;
 }
 
 .kanban-table-inner {
-    @include table-flex(stretch, stretch, flex, row, nowrap, flex-start);
+    @include table-flex($flex-wrap: nowrap);
 }