project colors
Juanfran
parent
c4ebee7a15
commit
2ae5218c90
|
|
@ -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
|
||||
|
|
@ -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="#")
|
||||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.project-colors {
|
||||
.new-color {
|
||||
float: right;
|
||||
}
|
||||
.colors-table {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue