project colors

app/partials/project-colors.jade

@@ -0,0 +1,22 @@
+extends layout
+
+block head
+    title Taiga  Project management web application with scrum in mind!
+
+block content
+    div.wrapper
+        sidebar.menu-secondary.sidebar
+            include views/modules/admin-menu
+
+        sidebar.menu-tertiary.sidebar
+            include views/modules/admin-submenu
+
+        section.main.project-colors
+            header
+                include views/components/mainTitle
+
+            a.button-green.new-color(href="")
+                span.text
+                    | + Add new US
+
+            include views/modules/colors-table

app/partials/views/modules/colors-table.jade

@@ -0,0 +1,23 @@
+section.colors-table
+    div.row.title
+        div.width-1 Color
+        div.width-6 Name
+        div.is-closed.width-2 Is closed?
+        div.options.width-1
+    - for (var x = 0; x < 50; x++)
+        div.row.table-main
+            div.width-1.color-column
+                div.color
+                div.popover.select-color
+                    ul
+                        - for (var z = 0; z < 21; z++)
+                            li.color
+                    input(type="text", placeholder="personalized colors")
+                    div.selected-color(style="background-color: red")
+
+            div.width-6 Ready for test
+            div.is-closed.width-2
+                div.icon.icon-plus
+            div.options.width-1
+                a.icon.icon-edit(href="#")
+                a.icon.icon-delete(href="#")

app/styles/components/popover.scss

@@ -1,4 +1,4 @@
-@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '') {
+@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '') {
     background: $blackish;
     bottom: #{$bottom};
     color: $white;
@@ -27,4 +27,15 @@
             @include transition (color .3s linear);
         }
     }
+    &:after {
+        background: $blackish;
+        bottom: #{$arrow-bottom};
+        content: '';
+        height: 15px;
+        left: #{$arrow-left};
+        position: absolute;
+        top: #{$arrow-top};
+        transform: rotate(45deg);
+        width: #{$arrow-width};
+    }
 }

app/styles/layout/project-colors.scss

@@ -0,0 +1,8 @@
+.project-colors {
+    .new-color {
+        float: right;
+    }
+    .colors-table {
+        margin-top: 2rem;
+    }
+}

app/styles/main.scss

@@ -45,6 +45,7 @@ $prefix-for-spec:      true;
 @import 'modules/admin-roles';
 @import 'modules/admin-functionalities';
 @import 'modules/admin-membership-table';
+@import 'modules/colors-table';
 @import 'modules/category-config';
 @import 'modules/project-details';
 @import 'modules/attachments';
@@ -63,4 +64,5 @@ $prefix-for-spec:      true;
 @import 'layout/taskboard';
 @import 'layout/us-detail';
 @import 'layout/admin-membership';
+@import 'layout/project-colors';
 @import 'layout/kanban';

app/styles/modules/colors-table.scss

@@ -0,0 +1,100 @@
+.colors-table {
+    align-content: stretch;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 100%;
+    .row {
+        align-content: stretch;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        padding: 1rem 0 1rem 1rem;
+        position: relative;
+        text-align: left;
+        width: 100%;
+        @for $i from 1 through 8 {
+            .width-#{$i} {
+                flex-basis: 50px;
+                flex-grow: $i;
+                flex-shrink: 0;
+            }
+        }
+        &:hover {
+            background: lighten($green-taiga, 60%);
+            @include transition (background .2s ease-in);
+        }
+    }
+    .row-selected {
+        background: lighten($green-taiga, 60%);
+        @include transition (background .2s ease-in);
+    }
+    .title {
+        @extend %medium;
+        border-bottom: 1px solid $gray-light;
+        font-family: 'DroidSans-Bold';
+        &:hover {
+            background: transparent;
+        }
+    }
+    .table-main {
+        @extend %small;
+        border-bottom: 1px solid $gray-light;
+    }
+    .color {
+        background-color: $gray-light;
+        border-radius: 2px;
+        cursor: pointer;
+        height: 35px;
+        width: 35px;
+    }
+    .is-closed {
+        text-align: center;
+    }
+    .icon-delete,
+    .icon-edit {
+        @extend %large;
+        margin-right: .5rem;
+    }
+    .icon-delete {
+        &:hover {
+            color: $red;
+        }
+    }
+    .select-color {
+        @include popover(323px, 10px, 70px, '', '', 15px, 13px, -7px);
+        border-radius: 0 10px 10px 0;
+        padding: 15px;
+        li {
+            float: left;
+            margin: 0 .5rem .5rem 0;
+            &:nth-child(7n) {
+                margin-right: 0;
+            }
+            &:nth-last-child(-n+7) {
+                margin-bottom: 0;
+            }
+        }
+        ul {
+            float: left;
+            margin-bottom: 1rem;
+        }
+        input {
+            background-color: $very-light-gray;
+            font-family: DroidSans;
+            width: 243px;
+            @include placeholder {
+                color: $gray;
+            }
+        }
+        .selected-color {
+            float: right;
+            height: 40px;
+            width: 40px;
+        }
+    }
+}