archive/attract
0
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

Minor style tweaks to Tasks

Browse Source
This commit is contained in:
Pablo Vazquez
2016-09-21 18:26:34 +02:00
parent 051cd88687
commit 578f698240
2 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles/_base.sass
View File

@@ -53,17 +53,17 @@ nav.sidebar
height: 100% height: 100%
#col_main #col_main
box-shadow: 1px 0 0 $color-background-dark
background-color: white background-color: white
#col_right #col_right
background-color: $color-background background-color: $color-background-light
.col_header .col_header
position: relative position: relative
display: flex display: flex
align-items: center align-items: center
width: 100% width: 100%
min-height: 50px
background-color: white background-color: white
padding: 10px 15px padding: 10px 15px
@@ -92,7 +92,6 @@ nav.sidebar
color: $color-text-dark-primary color: $color-text-dark-primary
&.select_multiple &.select_multiple
margin-top: 5px
margin-bottom: 10px margin-bottom: 10px
select.input-transparent select.input-transparent

97
src/styles/tasks.sass
View File

@@ -1,6 +1,14 @@
@import _config @import _config
@import _utils @import _utils
#task-view
margin: 10px
padding: 0 10px 10px
+container-box
.task-name
font-size: 1.6em
#task-add #task-add
margin-left: auto margin-left: auto
font-size: .85em font-size: .85em
@@ -10,32 +18,13 @@
background-color: white background-color: white
width: 16px width: 16px
height: 16px height: 16px
margin-left: 10px
border-radius: 50% border-radius: 50%
margin: 10px transition: all 100ms ease-in-out
transform-origin: center
transition: all 150ms ease-in-out
&.invalid
background-color: hsl(hue($color-status-invalid), 100%, 75%)
&.todo
background-color: hsl(hue($color-status-todo), 100%, 75%)
&.in_progress
background-color: hsl(hue($color-status-in_progress), 100%, 60%)
&.on_hold
background-color: hsl(hue($color-status-on_hold), 100%, 75%)
&.approved
background-color: hsl(hue($color-status-approved), 100%, 75%)
&.cbb
background-color: hsl(hue($color-status-cbb), 100%, 75%)
&.final
background-color: hsl(hue($color-status-final), 100%, 40%)
&.review
background-color: hsl(hue($color-status-review), 100%, 75%)
.task-list-item .task-list-item
border-right: 5px solid transparent border-right: 5px solid transparent
color: $color-primary-dark color: $color-primary-dark
background-image: white
transition: all 150ms ease-in-out transition: all 150ms ease-in-out
&:hover &:hover
@@ -52,33 +41,69 @@
background-color: rgba($color-background, .5) background-color: rgba($color-background, .5)
.status-indicator .status-indicator
transform: rotate(45deg) transform: scale(1.1)
border-radius: 15%
&.processing &.processing
+stripes($color-background, rgba($color-background, .5), -45deg, 25px) +stripes($color-background, rgba($color-background, .5), -45deg, 25px)
+stripes-animate +stripes-animate
animation-duration: 2s animation-duration: 2s
.status .status, .type
display: inline-block display: inline-block
margin-left: auto
margin-right: 10px margin-right: 10px
color: $color-text-dark-secondary
text-transform: uppercase text-transform: uppercase
font-size: .8em font-size: .8em
text-decoration: none text-decoration: none
#task-details .type
margin: 10px color: $color-text-dark-primary
padding: 0 10px 10px .status
+container-box margin-left: auto
#task-view .name
width: 100% margin: 10px
.task-name &.status
font-size: 1.6em &-invalid
.status-indicator
background-color: hsl(hue($color-status-invalid), 100%, 75%)
.status
color: hsl(hue($color-status-invalid), 100%, 50%)
&-todo
.status-indicator
background-color: hsl(hue($color-status-todo), 100%, 75%)
.status
color: hsl(hue($color-status-todo), 100%, 50%)
&-in_progress
.status-indicator
background-color: hsl(hue($color-status-in_progress), 100%, 60%)
.status
color: hsl(hue($color-status-in_progress), 100%, 45%)
&-on_hold
.status-indicator
background-color: hsl(hue($color-status-on_hold), 100%, 75%)
.status
color: hsl(hue($color-status-on_hold), 100%, 50%)
&-approved
.status-indicator
background-color: hsl(hue($color-status-approved), 100%, 75%)
.status
color: hsl(hue($color-status-approved), 100%, 50%)
&-cbb
.status-indicator
background-color: hsl(hue($color-status-cbb), 100%, 75%)
.status
color: hsl(hue($color-status-cbb), 100%, 40%)
&-final
.status-indicator
background-color: hsl(hue($color-status-final), 100%, 40%)
.status
color: hsl(hue($color-status-final), 100%, 30%)
&-review
.status-indicator
background-color: hsl(hue($color-status-review), 100%, 75%)
.status
color: hsl(hue($color-status-review), 100%, 50%)
option.invalid_task option.invalid_task
color: $color-danger color: $color-danger
@@ -91,3 +116,7 @@ option.invalid_task
a.task-project a.task-project
color: $color-text-dark-secondary color: $color-text-dark-secondary
margin-left: 10px margin-left: 10px
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background