User notifications by mail template

app/partials/mail-notifications.jade

@@ -0,0 +1,18 @@
+extends layout
+
+block head
+    title Taiga  Project management web application with scrum in mind!
+
+block content
+    div.wrapper(tg-project-us-status, ng-controller="ProjectValuesController as ctrl",
+                ng-init="section='admin'")
+        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+            include views/modules/admin-menu
+
+        section.main.admin-roles
+            header
+                include views/components/mainTitle
+
+            p.total Notifications By Mail
+
+            include views/modules/user-settings/mail-notifications-table

app/partials/views/modules/user-settings/mail-notifications-table.jade

@@ -0,0 +1,27 @@
+section.mail-notifications-table
+    div.mail-notifications-table-header
+        div.mail-notifications-table-row
+            div.mail-notifications-table-project
+                span Project
+            div.mail-notifications-table-all
+                span Receive All
+            div.mail-notifications-table-involved
+                span Only Involved
+            div.mail-notifications-table-none
+                span No notifications
+    div.mail-notifications-table-body
+        div.mail-notifications-table-row
+            div.mail-notifications-table-project
+                span Decathlon
+            div.mail-notifications-table-all
+                fieldset
+                    input(type="radio", name="mail-notifications", id="notifications-all")
+                    label(for="notifications-all") All
+            div.mail-notifications-table-involved
+                fieldset
+                    input(type="radio", name="mail-notifications", id="notifications-involved")
+                    label(for="notifications-involved") Involved
+            div.mail-notifications-table-none
+                fieldset
+                    input(type="radio", name="mail-notifications", id="notifications-none")
+                    label(for="notifications-none") None

app/styles/main.scss

@@ -74,6 +74,9 @@ $prefix-for-spec:      true;
 @import 'modules/admin/default-values';
 @import 'modules/admin/project-values';
 
+//Modules user Settings
+@import 'modules/user-settings/mail-notifications-table';
+
 //Layout
 @import 'layout/base';
 @import 'layout/login';

app/styles/modules/user-settings/mail-notifications-table.scss

@@ -0,0 +1,49 @@
+.mail-notifications-table {
+    .mail-notifications-table-row {
+        @include table-flex(stretch, center, flex, row, wrap, center);
+        border-bottom: 1px solid $whitish;
+    }
+
+    .mail-notifications-table-header {
+        @extend %bold;
+        border-bottom: 2px solid $gray-light;
+    }
+
+    .mail-notifications-table-project ,
+    .mail-notifications-table-all,
+    .mail-notifications-table-involved,
+    .mail-notifications-table-none {
+        padding: 1rem;
+    }
+
+    .mail-notifications-table-project {
+        @include table-flex-child(3, 0, 0);
+    }
+
+    .mail-notifications-table-all,
+    .mail-notifications-table-involved,
+    .mail-notifications-table-none {
+        @include table-flex-child(1, 0, 0);
+    }
+    input {
+        display: none;
+        &:checked {
+            +label {
+                @include transition(background .3s linear);
+                background: $green-taiga;
+            }
+        }
+    }
+    label {
+        background: $gray-light;
+        border-radius: 5px;
+        color: $white;
+        display: block;
+        padding: .5rem;
+        &:hover {
+            @include transition(background .3s linear);
+            background: $fresh-taiga;
+            cursor: pointer;
+        }
+    }
+}