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

Replace duplicated status-{{status}} classes for a nice Sass mixin

Browse Source 
Set the color for a specified property
1: $property: e.g. background-color
2: $where: ':before', ' .class-name', etc.
3: $variation: 'light', 'dark', or empty
e.g. @include status-color-property(background-color, ':before', 'light')
This commit is contained in:
Pablo Vazquez
2016-09-29 17:28:04 +02:00
parent e3e6657cf9
commit 37c0c23e83
4 changed files with 80 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/styles/_tasks.sass
View File

@@ -3,7 +3,8 @@
padding: 0 10px 10px
+container-box
border-top: thick solid $color-warning
border-top: thick solid $color-background-dark
@include status-color-property(border-top-color, '', 'dark')
.item-name
font-size: 1.6em
@@ -96,47 +97,7 @@
margin: 10px
+text-overflow-ellipsis
&.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%)
@include status-color-property(background-color, ' .status-indicator', 'light')
option.invalid_task
color: $color-danger