From b02032634dd44342fd5bf0139fc872e51e1a77aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 15 Jan 2015 14:35:09 +0100
Subject: [PATCH] Removed flexbox mixins to vanilla CSS

---
 app/styles/dependencies/helpers.scss          | 23 +-----
 app/styles/dependencies/mixins.scss           |  6 +-
 app/styles/layout/invitation.scss             | 14 +++-
 app/styles/layout/login.scss                  |  1 -
 app/styles/layout/us-detail.scss              | 73 ++++++++++---------
 .../modules/admin/admin-functionalities.scss  | 24 +++---
 .../modules/admin/admin-membership-table.scss | 24 ++++--
 .../modules/admin/admin-project-profile.scss  | 15 ++--
 app/styles/modules/admin/admin-roles.scss     |  6 +-
 app/styles/modules/admin/project-values.scss  | 13 +++-
 app/styles/modules/backlog/backlog-table.scss | 30 ++++----
 app/styles/modules/backlog/sprints.scss       | 12 +--
 .../modules/backlog/taskboard-table.scss      | 65 ++++++++++-------
 app/styles/modules/common/assigned-to.scss    |  6 +-
 app/styles/modules/common/history.scss        | 15 ++--
 app/styles/modules/create-project.scss        |  7 +-
 .../modules/help/lightbox-generic-notion.scss |  3 +-
 app/styles/modules/home-project.scss          | 11 +--
 app/styles/modules/home-projects-list.scss    | 36 +++++----
 app/styles/modules/issues/issues-table.scss   | 24 +++---
 app/styles/modules/kanban/kanban-table.scss   | 22 ++++--
 .../modules/search/search-result-table.scss   |  7 +-
 app/styles/modules/team/team-table.scss       |  8 +-
 .../mail-notifications-table.scss             | 10 ++-
 .../modules/user-settings/user-profile.scss   |  8 +-
 25 files changed, 256 insertions(+), 207 deletions(-)

diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss
index 1fafbc13..c3acdd91 100644
--- a/app/styles/dependencies/helpers.scss
+++ b/app/styles/dependencies/helpers.scss
@@ -1,21 +1,3 @@
-//Flexbox FTW
-%table-flex {
-    align-content: stretch;
-    align-items: stretch;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-%table-flex-child {
-    flex-basis: 300px;
-    flex-grow: 1;
-    flex-shrink: 0;
-    width: 300px;
-}
-
-
 // __Font Sizes__ //
 %xsmall {font-size: .5rem;}
 %small {font-size: .8rem;}
@@ -48,7 +30,10 @@
         top: 2rem;
     }
     &.open {
-        @include table-flex(center, center, flex, row, wrap, center);
+        align-content: center;
+        align-items: center;
+        display: flex;
+        justify-content: center;
         opacity: 1;
         transition: opacity .3s ease;
     }
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index 88ebfaf3..bcf19eba 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -5,8 +5,10 @@
     text-overflow: ellipsis;
 }
 
+// DEPRECATED MIXIN
+// USE FLEXBOX WITHOUT PREFIXES.
 // 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) {
+/* @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;
@@ -24,7 +26,7 @@
         width: #{$width};
     }
 }
-
+ */
 @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
     box-shadow: $h-shadow $v-shadow $blur $spread $color;
 }
diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss
index 84e81040..a72730bb 100644
--- a/app/styles/layout/invitation.scss
+++ b/app/styles/layout/invitation.scss
@@ -1,14 +1,18 @@
 .invitation-main {
     @extend %background-taiga;
-    @include table-flex(center, center, flex, row, wrap, center);
+    align-content: center;
+    align-items: center;
     bottom: 0;
+    justify-content: center;
     left: 0;
     position: fixed;
     right: 0;
     top: 0;
     z-index: 999;
     .invitation-container {
-        @include table-flex-child(0, 650px, 0, 650px);
+        flex-basis: 650px;
+        flex-grow: 1;
+        width: 650px;
     }
     .logo {
         margin: 1rem auto;
@@ -43,7 +47,7 @@
         }
     }
     .invitation-form {
-        @include table-flex();
+        display: flex;
         fieldset {
             margin-bottom: .5rem;
         }
@@ -90,9 +94,11 @@
     }
     .login-form,
     .register-form {
-        @include table-flex-child(1, 200px, 0, 200px);
+        flex-basis: 200px;
+        flex-grow: 1;
         padding: 1rem;
         text-align: center;
+        width: 200px;
         .form-header {
             color: #999;
         }
diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss
index 84f164ee..95c61fff 100644
--- a/app/styles/layout/login.scss
+++ b/app/styles/layout/login.scss
@@ -1,6 +1,5 @@
 .login-main {
     @extend %triangled-bg;
-    //@include table-flex(center, center, flex, row, wrap, center);
     align-items: center;
     bottom: 0;
     display: flex;
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
index bc0897d6..706e6e53 100644
--- a/app/styles/layout/us-detail.scss
+++ b/app/styles/layout/us-detail.scss
@@ -20,48 +20,53 @@
             .us-name,
             .us-related-task {
                 color: $white;
-                a {
-                    color: $white;
-                    transition: color .3s linear;
-                    &:hover {
-                        color: $red-light;
-                    }
-                }
+            }
+            a {
+                color: $white;
+                transition: color .3s linear;
+            }
+            a:hover {
+                color: $red-light;
             }
             .unblock {
                 @extend %bold;
                 color: $white;
                 float: right;
-                &:hover {
-                    color: $red-light;
-                    transition: color .3s linear;
-                }
             }
-            .issue-nav {
-                a {
-                    color: $white;
-                }
+            .unblock:hover {
+                color: $red-light;
+                transition: color .3s linear;
             }
         }
         p {
             margin-bottom: 0;
         }
         .us-edit-name-inner {
-            @include table-flex();
+            display: flex;
+        }
+        .edit-subject {
+            align-content: center;
+            align-items: center;
+            display: flex;
         }
         input {
-            @include table-flex-child(1, 90%, 0);
             background: $white;
+            flex-grow: 9;
+        }
+        .save-container {
+            flex-grow: 1;
         }
         .us-title-text {
+            align-content: center;
+            align-items: center;
             display: flex;
             margin-bottom: 0;
             max-width: 94%;
-            &:hover {
-                .icon-edit {
-                    opacity: 1;
-                    transition: opacity .3s linear;
-                }
+        }
+        .us-title-text:hover {
+            .icon-edit {
+                opacity: 1;
+                transition: opacity .3s linear;
             }
         }
         .us-number {
@@ -98,12 +103,12 @@
                 border-left: 1px solid $gray-light;
                 padding: 0 .2rem;
                 transition: color .3s linear;
-                &:hover {
-                    color: $green-taiga;
-                }
-                &:first-child {
-                    border: 0;
-                }
+            }
+            a:hover {
+                color: $green-taiga;
+            }
+            a:first-child {
+                border: 0;
             }
         }
         .block-desc-container {
@@ -162,9 +167,9 @@
             .editable {
                 background: $whitish;
                 cursor: pointer;
-                .no-description {
-                    color: $grayer;
-                }
+            }
+            .no-description {
+                color: $grayer;
             }
         }
     }
@@ -252,17 +257,19 @@
 }
 
 .points-per-role {
-    @include table-flex();
+    display: flex;
     position: relative;
     > li {
-        @include table-flex-child(1, 18%, 0);
         border-right: 1px solid rgba($grayer, .3);
         color: rgba($grayer, .3);
         display: inline-block;
+        flex-basis: 18%;
+        flex-grow: 1;
         margin: .5rem .1rem;
         position: relative;
         text-align: center;
         transition: color .3s linear;
+        width: 18%;
         &.active {
             color: rgba($green-taiga, 1);
         }
diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss
index ec73d682..183de817 100644
--- a/app/styles/modules/admin/admin-functionalities.scss
+++ b/app/styles/modules/admin/admin-functionalities.scss
@@ -2,37 +2,36 @@
     form {
         display: flex;
         flex-wrap: wrap;
-        width: 100%;
     }
     .functionality {
-        @include table-flex(center, center, flex, column, wrap, center);
+        align-content: center;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         background-color: $whitish;
-        display: inline-block;
         margin-bottom: .3rem;
         margin-right: .3rem;
-        min-height: 14px;
         opacity: .5;
         padding: 1rem;
         position: relative;
         transition: all .2s linear;
         vertical-align: top;
         width: 32%;
-        &:nth-child(3n+1) {
-            margin-right: 0;
-        }
         &.active {
             background-color: #e9f0da;
             opacity: 1;
         }
         .icon {
             @extend %xxlarge;
-            @include table-flex-child(1, 120px, 0, 100%);
+            flex-grow: 1;
+            flex-basis: 60px;
             margin: 0 auto;
             min-height: 60px;
-            text-align: center;
         }
         .desc {
-            @include table-flex-child(1 , 0, 0, 100%);
+            flex-grow: 1;
+            text-align: center;
         }
         .activate-input {
             display: none;
@@ -45,10 +44,7 @@
         }
         span {
             font-weight: bold;
-        }
-        p {
-            margin-bottom: 1rem;
-            min-height: 4.5rem;
+            display: block;
         }
         select {
             margin-top: 1rem;
diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss
index be6c7557..0b296195 100644
--- a/app/styles/modules/admin/admin-membership-table.scss
+++ b/app/styles/modules/admin/admin-membership-table.scss
@@ -3,7 +3,9 @@
         @extend %bold;
     }
     .avatar {
-        @include table-flex(stretch, center, flex, row, wrap, flex-start);
+        align-items: center;
+        display: flex;
+        justify-content: flex-start;
         figcaption {
             margin-left: 1rem;
             width: 75%;
@@ -15,7 +17,8 @@
             }
         }
         img {
-            @include table-flex-child(1, 35px, 0);
+            flex-basis: 35px;
+            flex-grow: 1;
             max-width: 35px;
         }
         .name,
@@ -38,7 +41,9 @@
         padding-right: 1rem;
     }
     .row-status {
-        @include table-flex($justify-content: space-between, $align-items: center);
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
     }
     .active,
     .pending {
@@ -78,17 +83,20 @@
     .row-role,
     .header-member,
     .header-role {
-        @include table-flex-child(3, 0, 0);
+        flex-basis: 210px;
+        flex-grow: 3;
         min-width: 210px;
     }
     .row-admin,
     .header-admin {
-        @include table-flex-child(1, 0, 0);
+        flex-basis: 0;
+        flex-grow: 1;
         min-width: 70px;
     }
     .row-status,
     .header-status {
-        @include table-flex-child(1, 50px, 0);
+        flex-basis: 50px;
+        flex-grow: 1;
     }
     .check {
         background-color: darken($whitish, 10%);
@@ -98,7 +106,7 @@
         overflow: hidden;
         position: relative;
         width: 65px;
-        input[type=checkbox] {
+        input {
             cursor: pointer;
             height: 500px;
             left: -10px;
@@ -129,7 +137,7 @@
                 opacity: .6;
             }
         }
-        input[type=checkbox]:checked {
+        input:checked {
             + div {
                 background-color: #74a218;
                 margin-left: 50%;
diff --git a/app/styles/modules/admin/admin-project-profile.scss b/app/styles/modules/admin/admin-project-profile.scss
index 92503a12..01049811 100644
--- a/app/styles/modules/admin/admin-project-profile.scss
+++ b/app/styles/modules/admin/admin-project-profile.scss
@@ -3,7 +3,7 @@
         max-width: 700px;
         width: 100%;
     }
-    input[type="text"],
+    input,
     textarea {
         @extend %title;
     }
@@ -19,10 +19,11 @@
         height: 10rem;
     }
     .privacy-settings {
-        @include table-flex();
+        display: flex;
         margin-bottom: 2rem;
         div {
-            @include table-flex-child(1, 0, 0, 40%);
+            flex-basis: 0;
+            flex-grow: 1;
             &:first-child {
                 margin-right: .5rem;
             }
@@ -36,11 +37,9 @@
             text-align: center;
         }
         input {
-            &:checked {
-                +label {
-                    background: $fresh-taiga;
-                    color: $white;
-                }
+            &:checked+label {
+                background: $fresh-taiga;
+                color: $white;
             }
         }
     }
diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss
index 757e4f23..12814b17 100644
--- a/app/styles/modules/admin/admin-roles.scss
+++ b/app/styles/modules/admin/admin-roles.scss
@@ -13,7 +13,7 @@
         transition: opacity .3s linear;
     }
     .edit-role {
-        @include table-flex(stretch, left, center, row, wrap);
+        align-items: left;
         background-color: $whitish;
         display: none;
         margin-bottom: 1rem;
@@ -55,7 +55,7 @@
         overflow: hidden;
         position: relative;
         width: 65px;
-        input[type=checkbox] {
+        input {
             cursor: pointer;
             height: 500px;
             left: -10px;
@@ -86,7 +86,7 @@
                 opacity: .6;
             }
         }
-        input[type=checkbox]:checked {
+        input:checked {
             + div {
                 background-color: #74a218;
                 margin-left: 50%;
diff --git a/app/styles/modules/admin/project-values.scss b/app/styles/modules/admin/project-values.scss
index 5504d08d..9f96b6ee 100644
--- a/app/styles/modules/admin/project-values.scss
+++ b/app/styles/modules/admin/project-values.scss
@@ -1,6 +1,8 @@
 .project-values-row {
-    @include table-flex(stretch, center, flex, row, wrap, center);
+    align-items: center;
     border-bottom: 1px solid $whitish;
+    display: flex;
+    justify-content: center;
     padding: 1rem;
     div {
         margin-left: 1rem;
@@ -36,10 +38,12 @@
 }
 
 .project-values-name {
-    @include table-flex-child(3, 0, 0);
+    flex-basis: 0;
+    flex-grow: 3;
 }
 .project-values-value {
-    @include table-flex-child(1, 0, 0);
+    flex-basis: 0;
+    flex-grow: 1;
     .checksley-error-list {
         left: 0;
         right: auto;
@@ -50,7 +54,8 @@
 
 .project-values-isclosed,
 .project-values-settings {
-    @include table-flex-child(1, 0, 0);
+    flex-basis: 0;
+    flex-grow: 1;
     text-align: right;
 }
 
diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss
index 3fe6fdc0..88a90387 100644
--- a/app/styles/modules/backlog/backlog-table.scss
+++ b/app/styles/modules/backlog/backlog-table.scss
@@ -1,6 +1,7 @@
 .backlog-table-header,
 .backlog-table-body {
-    @include table-flex();
+    display: flex;
+    flex-direction: column;
     width: 100%;
     &.show-tags {
         .tags-block {
@@ -9,8 +10,8 @@
     }
     .row {
         @extend %small;
-        @include table-flex();
         border-bottom: 1px solid $gray-light;
+        display: flex;
         padding: .5rem 0 .5rem .5rem;
         text-align: left;
         width: 100%;
@@ -26,10 +27,12 @@
 
         }
         .status {
-            @include table-flex-child(0, 150px, 0);
+            flex-basis: 150px;
+            flex-grow: 0;
         }
         .points {
-            @include table-flex-child(0, 125px, 0);
+            flex-basis: 125px;
+            flex-grow: 0;
         }
 
     }
@@ -136,11 +139,9 @@
             transition: background .2s ease-in;
         }
         .points {
-            .not-clickable {
-                &:hover {
-                    color: $black;
-                    cursor: text;
-                }
+            .not-clickable:hover {
+                color: $black;
+                cursor: text;
             }
         }
     }
@@ -149,16 +150,15 @@
         transition: background .2s ease-in;
     }
     .user-story-name {
-        @include table-flex($flex-wrap: nowrap);
+        display: flex;
+        flex-wrap: nowrap;
         input {
             flex-shrink: 0;
             margin-right: 1rem;
             vertical-align: super;
-            &:checked {
-                +a {
-                    color: $fresh-taiga;
-                    transition: color .2s ease-in;
-                }
+            &:checked+a {
+                color: $fresh-taiga;
+                transition: color .2s ease-in;
             }
         }
         a {
diff --git a/app/styles/modules/backlog/sprints.scss b/app/styles/modules/backlog/sprints.scss
index 6df29f09..da706f1e 100644
--- a/app/styles/modules/backlog/sprints.scss
+++ b/app/styles/modules/backlog/sprints.scss
@@ -90,16 +90,16 @@
             margin-top: 5px;
         }
         .sprint-summary {
-            @include table-flex();
+            display: flex;
         }
         .sprint-date {
             @extend %large;
             @extend %title;
-            @include table-flex-child(1, 0, 0);
             color: $gray-light;
+            flex-flow: 1;
         }
         .sprint-points {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
         }
         ul {
             float: right;
@@ -132,8 +132,8 @@
     }
     .sprint-table {
         .row {
-            @include table-flex();
             border-bottom: 1px solid $gray-light;
+            display: flex;
             padding: .5em 0;
             text-align: left;
             width: 100%;
@@ -158,7 +158,7 @@
         }
         .column-us {
             @extend %small;
-            @include table-flex-child(3, 0, 0);
+            flex-flow: 3;
             padding: 0 4px;
         }
         .us-name {
@@ -172,7 +172,7 @@
             }
         }
         .column-points {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 0 4px;
             text-align: right;
             &.closed {
diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss
index 5bcca330..a6712c04 100644
--- a/app/styles/modules/backlog/taskboard-table.scss
+++ b/app/styles/modules/backlog/taskboard-table.scss
@@ -31,8 +31,9 @@ $column-margin: 0 10px 0 0;
     }
     &.task-column,
     .task-column {
-        @include table-flex(flex-start);
-        flex-direction: row;
+        align-content: flex-start;
+        display: flex;
+        flex-direction: column;
     }
     .avatar-task-link {
         display: block;
@@ -52,16 +53,25 @@ $column-margin: 0 10px 0 0;
     position: relative;
     width: 100%;
     .taskboard-table-inner {
-        @include table-flex();
+        display: flex;
         overflow: hidden;
         position: absolute;
     }
     .task-colum-name {
         @extend %large;
+<<<<<<< HEAD
         @include table-flex();
         background: $whitish;
         border-top: 3px solid $gray-light;
         flex: auto 0 auto;
+=======
+        background: $whitish;
+        border-top: 3px solid $gray-light;
+        display: flex;
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
+>>>>>>> Removed flexbox mixins to vanilla CSS
         justify-content: space-between;
         margin: $column-margin;
         max-width: $column-width;
@@ -93,11 +103,9 @@ $column-margin: 0 10px 0 0;
             span {
                 display: none;
             }
-            .icon {
-                &.hfold,
-                &.hunfold {
-                    margin: 0;
-                }
+            .hfold,
+            .hunfold {
+                margin: 0;
             }
         }
     }
@@ -109,7 +117,9 @@ $column-margin: 0 10px 0 0;
     overflow-y: scroll;
     width: 100%;
     .task-column {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         margin: $column-margin;
         max-width: $column-width;
         width: $column-width;
@@ -128,7 +138,7 @@ $column-margin: 0 10px 0 0;
         }
     }
     .task-row {
-        @include table-flex();
+        display: flex;
         margin-bottom: .5rem;
         min-height: 10rem;
         width: 100%;
@@ -142,15 +152,16 @@ $column-margin: 0 10px 0 0;
             .taskboard-userstory-box {
                 background: rgba($red, .6);
                 border-radius: 3px;
-                a,
-                .points-value {
-                    color: rgba($white, .9);
-                    transition: color .3s linear;
-                    &:hover {
-                        color: rgba($white, 1);
-                        transition: color .3s linear;
-                    }
-                }
+            }
+            a,
+            .points-value {
+                color: rgba($white, .9);
+                transition: color .3s linear;
+            }
+            a:hover,
+            .points-value:hover {
+                color: rgba($white, 1);
+                transition: color .3s linear;
             }
             .taskboard-tasks-box {
                 background: rgba($red, .1);
@@ -158,15 +169,13 @@ $column-margin: 0 10px 0 0;
         }
         &.row-fold {
             min-height: 0;
-            .taskboard-userstory-box {
-                .us-title {
-                    @include ellipsis(100%);
-                }
-                .points-value,
-                .icon-plus,
-                .icon-bulk {
-                    display: none;
-                }
+            .us-title {
+                @include ellipsis(100%);
+            }
+            .points-value,
+            .icon-plus,
+            .icon-bulk {
+                display: none;
             }
         }
     }
diff --git a/app/styles/modules/common/assigned-to.scss b/app/styles/modules/common/assigned-to.scss
index 2b1f2085..d1185798 100644
--- a/app/styles/modules/common/assigned-to.scss
+++ b/app/styles/modules/common/assigned-to.scss
@@ -1,5 +1,5 @@
 .duty-assigned-to {
-    @include table-flex();
+    display: flex;
     margin-top: 1rem;
     position: relative;
     &:hover {
@@ -22,14 +22,14 @@
         }
     }
     .user-avatar {
-        @include table-flex-child(1, 0);
+        flex-grow: 1;
         img {
             border-radius: 8%;
             width: 100%;
         }
     }
     .assigned-to {
-        @include table-flex-child(3, 0);
+        flex-grow: 3;
         margin-left: 1rem;
         margin-top: 15px;
         .assigned-title {
diff --git a/app/styles/modules/common/history.scss b/app/styles/modules/common/history.scss
index b2c7bb33..1cfc957d 100644
--- a/app/styles/modules/common/history.scss
+++ b/app/styles/modules/common/history.scss
@@ -19,15 +19,16 @@
     }
 }
 .change-entry {
-    @include table-flex;
     border-bottom: 1px solid $gray-light;
+    display: flex;
     padding: .5rem;
     &:last-child {
         border-bottom: 0;
     }
     .activity-changed,
     .activity-fromto {
-        @include table-flex-child(1, 50px, 0);
+        flex-basis: 50px;
+        flex-grow: 1;
     }
     .activity-changed {
         @extend %bold;
@@ -108,7 +109,7 @@
         opacity: 0;
     }
 }
-a.show-more-comments {
+.show-more-comments {
     @extend %small;
     border-bottom: 1px solid $gray-light;
     border-top: 1px solid $gray-light;
@@ -148,8 +149,8 @@ a.show-more-comments {
     }
 }
 .activity-single {
-    @include table-flex;
     border-bottom: 1px solid $gray-light;
+    display: flex;
     padding: 2rem 0;
     position: relative;
     &:hover {
@@ -212,7 +213,8 @@ a.show-more-comments {
         margin-bottom: .5rem;
     }
     .activity-user {
-        @include table-flex-child(1, 50px, 0);
+        flex-basis: 50px;
+        flex-grow: 1;
         img {
             max-width: 70px;
             width: 100%;
@@ -224,7 +226,8 @@ a.show-more-comments {
     }
 
     .activity-content {
-        @include table-flex-child(20, 150px, 0);
+        flex-basis: 150px;
+        flex-grow: 20;
     }
     .changes {
         background: $whitish;
diff --git a/app/styles/modules/create-project.scss b/app/styles/modules/create-project.scss
index 3493b97a..c3a8b5e6 100644
--- a/app/styles/modules/create-project.scss
+++ b/app/styles/modules/create-project.scss
@@ -1,7 +1,9 @@
 .create-project {
     @extend %triangled-bg;
-    @include table-flex(center, center, flex, row, wrap, center);
+    align-content: center;
+    align-items: center;
     bottom: 0;
+    justify-content: center;
     left: 0;
     position: fixed;
     right: 0;
@@ -11,7 +13,8 @@
         margin-bottom: 1rem;
     }
     .create-project-container {
-        @include table-flex-child(0, 400px, 0, 400px);
+        flex-basis: 400px;
+        flex-grow: 0;
     }
     h1 {
         color: $white;
diff --git a/app/styles/modules/help/lightbox-generic-notion.scss b/app/styles/modules/help/lightbox-generic-notion.scss
index 7d102e6d..765fe4bc 100644
--- a/app/styles/modules/help/lightbox-generic-notion.scss
+++ b/app/styles/modules/help/lightbox-generic-notion.scss
@@ -1,5 +1,6 @@
 .lightbox-generic-notion {
     section {
-        @include table-flex-child(0, 600px, 0);
+        display: flex;
+        flex-basis: 600px;
     }
 }
diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss
index 36554dbe..a106546f 100644
--- a/app/styles/modules/home-project.scss
+++ b/app/styles/modules/home-project.scss
@@ -1,7 +1,8 @@
 .home-project-info-list {
-    @include table-flex();
+    display: flex;
     li {
-        @include table-flex-child(1, 0, 0, auto);
+        flex-basis: 0;
+        flex-grow: 1;
         margin-right: 1rem;
     }
     .info-num {
@@ -20,12 +21,12 @@
 }
 
 .project-data-container {
-    @include table-flex();
+    display: flex;
     p {
-        @include table-flex-child(3, 0, 0);
+        flex-grow: 3;
     }
     ul {
-        @include table-flex-child(1, 0, 0);
+        flex-grow: 1;
     }
     li {
         display: inline-block;
diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss
index c8d7ebb5..ff921bb8 100644
--- a/app/styles/modules/home-projects-list.scss
+++ b/app/styles/modules/home-projects-list.scss
@@ -1,28 +1,29 @@
 .home-projects-list,
 .home-project {
     @extend %background-taiga;
-    @include table-flex(center, center, flex, row, wrap, center);
+    align-content: center;
+    align-items: center;
     background-color: $black;
     background-position: center center;
     background-size: cover;
+    display: flex;
     height: 100%;
+    justify-content: center;
     left: 0;
     padding: 0;
     position: fixed;
     top: 0;
     width: 100%;
     .welcome-user {
-        @include table-flex();
+        display: flex;
         position: absolute;
         right: 1rem;
         top: 1rem;
         p {
             color: $whitish;
             margin-bottom: 0;
-            span {
-                &:before {
-                    content: ' ';
-                }
+            span:before {
+                content: ' ';
             }
         }
         .logout {
@@ -41,17 +42,20 @@
     }
 }
 .home-projects-wrapper {
-    @include table-flex-child(0, 1200px, 0, 1200px);
+    flex-grow: 1;
+    max-width: 1200px;
 }
 
 .home-projects-list-inner {
-    @include table-flex();
+    display: flex;
 }
 
 .recent-projects {
-    @include table-flex-child(8, 0, 0, 800px);
+    flex-grow: 8;
+    max-width: 800px;
     ul {
-        @include table-flex();
+        display: flex;
+        flex-wrap: wrap;
         margin: 0;
         padding: 0;
     }
@@ -64,15 +68,18 @@
         width: 100%;
     }
     li {
-        @include table-flex-child(1, 230px, 0, 23.5%);
         background-color: rgba($white, .5);
         color: $whitish;
+        flex-basis: 230px;
+        flex-grow: 1;
+        flex-shrink: 0;
         height: 130px;
         margin-bottom: 1rem;
         margin-right: 1rem;
         overflow: hidden;
         position: relative;
         transition: background-color .3s linear;
+        width: 23.5%;
         &:hover {
             background-color: rgba($fresh-taiga, .5);
             cursor: pointer;
@@ -104,13 +111,14 @@
 }
 
 .all-projects {
-    @include table-flex-child(1, 285px, 0, 285px);
     background-color: rgba(0, 0, 0, .5);
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     margin-left: 1rem;
     max-height: 422px;
     padding: 1rem;
+    width: 285px;
     h1 {
         color: $whitish;
         flex-shrink: 0;
@@ -140,10 +148,6 @@
             &:hover {
                 background-color: $gray;
                 transition: background-color .3s linear;
-                .icon {
-                    opacity: 1;
-                    transition: opacity .3s linear;
-                }
             }
         }
     }
diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss
index 29af15f0..59687f97 100644
--- a/app/styles/modules/issues/issues-table.scss
+++ b/app/styles/modules/issues/issues-table.scss
@@ -1,5 +1,5 @@
 .issues-table {
-    @include table-flex();
+    display: flex;
     margin-bottom: 2rem;
     &.empty {
         display: none;
@@ -7,7 +7,7 @@
     .row {
         &:hover {
             background: lighten($green-taiga, 60%);
-            transition : background .2s ease-in;
+            transition: background .2s ease-in;
         }
         .icon {
             display: inline;
@@ -15,7 +15,7 @@
     }
     .row-selected {
         background: lighten($green-taiga, 60%);
-        transition : background .2s ease-in;
+        transition: background .2s ease-in;
     }
     .title {
         @extend %medium;
@@ -33,21 +33,25 @@
         border-bottom: 1px solid darken($whitish, 4%);
     }
     .avatar {
-        @include table-flex(stretch, center, flex, row, wrap, flex-start);
+        align-items: center;
+        display: flex;
         img {
             width: 35px;
         }
         figcaption {
-            @include table-flex-child(1, 60%, 0);
+            flex-basis: 60%;
+            flex-grow: 1;
             margin-left: .5rem;
         }
     }
     .level-field {
-        @include table-flex-child(1, 70px, 0);
+        flex-basis: 70px;
+        flex-grow: 1;
         text-align: center;
     }
     .subject {
-        @include table-flex-child(7, 300px, 0);
+        flex-basis: 300px;
+        flex-grow: 7;
         padding-right: 1rem;
         span {
             &:first-child {
@@ -58,13 +62,15 @@
     .issue-field,
     .assigned-field,
     .created-field {
-        @include table-flex-child(1, 100px, 0);
+        flex-basis: 100px;
+        flex-grow: 1;
         padding: 0 1rem;
         position: relative;
         text-align: left;
     }
     .assigned-field {
-        @include table-flex-child(2, 100px, 0);
+        flex-basis: 100px;
+        flex-grow: 2;
     }
     .issue-assignedto {
         cursor: pointer;
diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss
index 8adee297..6787e9c2 100644
--- a/app/styles/modules/kanban/kanban-table.scss
+++ b/app/styles/modules/kanban/kanban-table.scss
@@ -11,9 +11,9 @@ $column-margin: 0 10px 0 0;
     width: 100%;
     .vfold {
         &.task-colum-name {
-            @include table-flex();
             align-items: center;
             cursor: pointer;
+            display: flex;
             justify-content: center;
             opacity: .8;
             padding: .5rem 0;
@@ -33,7 +33,7 @@ $column-margin: 0 10px 0 0;
         }
         &.task-colum-name,
         &.task-column {
-            @include table-flex-child(1, 0, 0);
+            flex-flow: 1;
             max-width: $column-folded-width;
             min-height: 2.5rem;
             min-width: $column-folded-width;
@@ -50,16 +50,18 @@ $column-margin: 0 10px 0 0;
     position: relative;
     width: 100%;
     .kanban-table-inner {
-        @include table-flex();
+        display: flex;
         overflow: hidden;
         position: absolute;
     }
     .task-colum-name {
         @extend %large;
-        @include table-flex();
         background: $whitish;
         border-top: 3px solid $gray-light;
-        flex: auto 0 auto;
+        display: flex;
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         justify-content: space-between;
         margin: $column-margin;
         max-width: $column-width;
@@ -89,14 +91,17 @@ $column-margin: 0 10px 0 0;
 
 .kanban-table-body {
     @extend %medium;
-    @include table-flex();
+    display: flex;
     overflow: hidden;
     overflow-x: auto;
     width: 100%;
     .task-column {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         margin: $column-margin;
         overflow-y: auto;
+        widows: $column-width;
         &:last-child {
             margin-right: 0;
         }
@@ -123,5 +128,6 @@ $column-margin: 0 10px 0 0;
 }
 
 .kanban-table-inner {
-    @include table-flex($flex-wrap: nowrap);
+    display: flex;
+    flex-wrap: nowrap;
 }
diff --git a/app/styles/modules/search/search-result-table.scss b/app/styles/modules/search/search-result-table.scss
index 80ed56f5..e2992019 100644
--- a/app/styles/modules/search/search-result-table.scss
+++ b/app/styles/modules/search/search-result-table.scss
@@ -17,7 +17,8 @@
         }
         .user-stories {
             flex-basis: 0;
-            flex-grow: 10;
+            flex-grow: 5;
+            flex-shrink: 1;
         }
         .status,
         .points {
@@ -27,9 +28,9 @@
             text-align: center;
         }
         .assigned-to {
-            flex-basis: 150px;
-            flex-grow: 1;
             padding: 0 1rem;
+            flex-basis: 250px;
+            flex-grow: 1;
         }
     }
     .row-selected {
diff --git a/app/styles/modules/team/team-table.scss b/app/styles/modules/team/team-table.scss
index 01f8f706..50a9c6b1 100644
--- a/app/styles/modules/team/team-table.scss
+++ b/app/styles/modules/team/team-table.scss
@@ -49,7 +49,7 @@
         &:hover {
             .icon {
                 color: $red;
-                transition : color .3s linear;
+                transition: color .3s linear;
             }
         }
     }
@@ -67,9 +67,11 @@
         }
     }
     .avatar {
-        @include table-flex(stretch, center, flex, row, wrap, flex-start);
+        align-items: center;
+        display: flex;
         img {
-            @include table-flex-child(1, 66px, 0);
+            flex-basis: 66px;
+            flex-grow: 1;
             max-width: 66px;
         }
         figcaption {
diff --git a/app/styles/modules/user-settings/mail-notifications-table.scss b/app/styles/modules/user-settings/mail-notifications-table.scss
index 762b7fe5..01fffa42 100644
--- a/app/styles/modules/user-settings/mail-notifications-table.scss
+++ b/app/styles/modules/user-settings/mail-notifications-table.scss
@@ -1,7 +1,9 @@
 .policy-table {
     .policy-table-row {
-        @include table-flex(stretch, center, flex, row, wrap, center);
+        align-items: center;
         border-bottom: 1px solid $whitish;
+        display: flex;
+        justify-content: center;
     }
 
     .policy-table-header {
@@ -17,13 +19,15 @@
     }
 
     .policy-table-project {
-        @include table-flex-child(3, 0, 0);
+        flex-basis: 0;
+        flex-grow: 3;
     }
 
     .policy-table-all,
     .policy-table-involved,
     .policy-table-none {
-        @include table-flex-child(1, 0, 0);
+        flex-basis: 0;
+        flex-grow: 1;
     }
     input {
         display: none;
diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss
index 7184d462..603624d7 100644
--- a/app/styles/modules/user-settings/user-profile.scss
+++ b/app/styles/modules/user-settings/user-profile.scss
@@ -3,10 +3,11 @@
         max-width: 700px;
         width: 100%;
         .container {
-            @include table-flex();
+            display: flex;
         }
         .avatar-container {
-            @include table-flex-child(1, 0, 0);
+            flex-basis: 0;
+            flex-grow: 1;
             margin-right: 1rem;
             .image-container {
                 position: relative;
@@ -51,7 +52,8 @@
             }
         }
         .data {
-            @include table-flex-child(3, 0, 0);
+            flex-basis: 0;
+            flex-grow: 3;
         }
     }
     fieldset {