diff --git a/src/styles/_base.sass b/src/styles/_base.sass index 114b299..5ad09af 100644 --- a/src/styles/_base.sass +++ b/src/styles/_base.sass @@ -53,17 +53,17 @@ nav.sidebar height: 100% #col_main - box-shadow: 1px 0 0 $color-background-dark background-color: white #col_right - background-color: $color-background + background-color: $color-background-light .col_header position: relative display: flex align-items: center width: 100% + min-height: 50px background-color: white padding: 10px 15px @@ -92,7 +92,6 @@ nav.sidebar color: $color-text-dark-primary &.select_multiple - margin-top: 5px margin-bottom: 10px select.input-transparent diff --git a/src/styles/tasks.sass b/src/styles/tasks.sass index c7a9833..536aaf9 100644 --- a/src/styles/tasks.sass +++ b/src/styles/tasks.sass @@ -1,6 +1,14 @@ @import _config @import _utils +#task-view + margin: 10px + padding: 0 10px 10px + +container-box + + .task-name + font-size: 1.6em + #task-add margin-left: auto font-size: .85em @@ -10,32 +18,13 @@ background-color: white width: 16px height: 16px + margin-left: 10px border-radius: 50% - margin: 10px - 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%) + transition: all 100ms ease-in-out .task-list-item border-right: 5px solid transparent color: $color-primary-dark - background-image: white transition: all 150ms ease-in-out &:hover @@ -52,33 +41,69 @@ background-color: rgba($color-background, .5) .status-indicator - transform: rotate(45deg) - border-radius: 15% + transform: scale(1.1) &.processing +stripes($color-background, rgba($color-background, .5), -45deg, 25px) +stripes-animate animation-duration: 2s - .status + .status, .type display: inline-block - margin-left: auto margin-right: 10px - color: $color-text-dark-secondary text-transform: uppercase font-size: .8em text-decoration: none -#task-details - margin: 10px - padding: 0 10px 10px - +container-box + .type + color: $color-text-dark-primary + .status + margin-left: auto -#task-view - width: 100% + .name + margin: 10px - .task-name - font-size: 1.6em + &.status + &-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 color: $color-danger @@ -91,3 +116,7 @@ option.invalid_task a.task-project color: $color-text-dark-secondary margin-left: 10px + +.input-group-separator + margin: 10px 0 + border-top: thin solid $color-background