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

8
src/styles/_config.sass
View File

@@ -43,20 +43,28 @@ $color_downvote: #74a4ff
/* Label Status */
$color-status-invalid: lightgray
$color-status-invalid-light: hsl(hue($color-status-invalid), 100%, 75%)
$color-status-invalid-dark: hsl(hue($color-status-invalid), 100%, 75%)
$color-status-todo: #ff8080
$color-status-todo-light: hsl(hue($color-status-todo), 100%, 75%)
$color-status-todo-dark: hsl(hue($color-status-todo), 100%, 75%)
$color-status-in_progress: #ffbe00
$color-status-in_progress-light: hsl(hue($color-status-in_progress), 100%, 60%)
$color-status-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%)
$color-status-on_hold: #cb9e15
$color-status-on_hold-light: hsl(hue($color-status-on_hold), 100%, 75%)
$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 50%, 50%)
$color-status-approved: #a3e04d
$color-status-approved-light: hsl(hue($color-status-approved), 100%, 75%)
$color-status-approved-dark: hsl(hue($color-status-approved), 100%, 50%)
$color-status-cbb: #9cd5e2
$color-status-cbb-light: hsl(hue($color-status-cbb), 100%, 75%)
$color-status-cbb-dark: hsl(hue($color-status-cbb), 40%, 60%)
$color-status-final: #e7f5d3
$color-status-final-light: hsl(hue($color-status-final), 100%, 40%)
$color-status-final-dark: hsl(hue($color-status-final), 100%, 40%)
$color-status-review: #e4f5f9
$color-status-review-light: hsl(hue($color-status-review), 100%, 75%)
$color-status-review-dark: hsl(hue($color-status-review), 100%, 50%)
$color-status-active: #E6F3FD

30
src/styles/_shots.sass
View File

@@ -39,31 +39,7 @@
.table-cell:last-child
box-shadow: inset -5px 0 0 $color-primary
&.status
&-invalid
.shot-status
background-color: $color-status-invalid-dark
&-todo
.shot-status
background-color: $color-status-todo-dark
&-in_progress
.shot-status
background-color: $color-status-in_progress-dark
&-on_hold
.shot-status
background-color: $color-status-on_hold-dark
&-approved
.shot-status
background-color: $color-status-approved-dark
&-cbb
.shot-status
background-color: $color-status-cbb-dark
&-final
.shot-status
background-color: $color-status-final-dark
&-review
.shot-status
background-color: $color-status-review-dark
@include status-color-property(background-color, ' .shot-status')
.table-cell
text-align: center
@@ -98,9 +74,11 @@
height: 100%
padding: 0 15px
transition: all 150ms ease-in-out
+status-background-color-before
@include status-color-property(background-color, ':before')
&:before
background-color: $color-background /* overriden by status-{{status}} */
display: block
content: ''
position: absolute

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

137
src/styles/_utils.sass
View File

@@ -507,78 +507,71 @@
max-width: 100%
height: auto
=status-background-color
&.status
&-invalid
background-color: hsl(hue($color-status-invalid), 100%, 75%)
&-todo
background-color: $color-status-todo-dark
&-in_progress
background-color: hsl(hue($color-status-in_progress), 100%, 50%)
&-on_hold
background-color: hsl(hue($color-status-on_hold), 60%, 50%)
&-approved
background-color: hsl(hue($color-status-approved), 40%, 60%)
&-cbb
background-color: $color-status-cbb
&-final
background-color: hsl(hue($color-status-final), 100%, 40%)
&-review
background-color: hsl(hue($color-status-review), 100%, 75%)
/* 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')
*/
@mixin status-color-property($property, $where: false, $variation: false)
=status-background-color-before
&.status
&-invalid:before
background-color: hsl(hue($color-status-invalid), 100%, 75%)
&-todo:before
background-color: $color-status-todo-dark
&-in_progress:before
background-color: hsl(hue($color-status-in_progress), 100%, 50%)
&-on_hold:before
background-color: hsl(hue($color-status-on_hold), 60%, 50%)
&-approved:before
background-color: hsl(hue($color-status-approved), 40%, 60%)
&-cbb:before
background-color: $color-status-cbb
&-final:before
background-color: hsl(hue($color-status-final), 100%, 40%)
&-review:before
background-color: hsl(hue($color-status-review), 100%, 75%)
@if not ($where)
$where: ''
=status-color
&.status
&-invalid
color: $color-status-invalid-dark
&-todo
color: $color-status-todo-dark
&-in_progress
color: $color-status-in_progress
&-on_hold
color: $color-status-on_hold
&-approved
color: $color-status-approved
&-cbb
color: $color-status-cbb-dark
&-final
color: $color-status-final-dark
&-review
color: $color-status-review-dark
=status-border-color
&.status
&-invalid
border-color: $color-status-invalid-dark
&-todo
border-color: $color-status-todo-dark
&-in_progress
border-color: $color-status-in_progress-dark
&-on_hold
border-color: $color-status-on_hold-dark
&-approved
border-color: $color-status-approved-dark
&-cbb
border-color: $color-status-cbb-dark
&-final
border-color: $color-status-final-dark
&-review
border-color: $color-status-review-dark
&-invalid#{$where}
@if ($variation == 'light')
#{$property}: $color-status-invalid-light
@else if ($variation == 'dark')
#{$property}: $color-status-invalid-dark
@else
#{$property}: $color-status-invalid
&-todo#{$where}
@if ($variation == 'light')
#{$property}: $color-status-todo-dark
@else if ($variation == 'dark')
#{$property}: $color-status-todo-dark
@else
#{$property}: $color-status-todo
&-in_progress#{$where}
@if ($variation == 'light')
#{$property}: $color-status-in_progress-light
@else if ($variation == 'dark')
#{$property}: $color-status-in_progress-dark
@else
#{$property}: $color-status-in_progress
&-on_hold#{$where}
@if ($variation == 'light')
#{$property}: $color-status-on_hold-light
@else if ($variation == 'dark')
#{$property}: $color-status-on_hold-dark
@else
#{$property}: $color-status-on_hold
&-approved#{$where}
@if ($variation == 'light')
#{$property}: $color-status-approved-light
@else if ($variation == 'dark')
#{$property}: $color-status-approved-dark
@else
#{$property}: $color-status-approved
&-cbb#{$where}
@if ($variation == 'light')
#{$property}: $color-status-cbb
@else if ($variation == 'dark')
#{$property}: $color-status-cbb-dark
@else
#{$property}: $color-status-cbb
&-final#{$where}
@if ($variation == 'light')
#{$property}: $color-status-final-light
@else if ($variation == 'dark')
#{$property}: $color-status-final-dark
@else
#{$property}: $color-status-final
&-review#{$where}
@if ($variation == 'light')
#{$property}: $color-status-review-light
@else if ($variation == 'dark')
#{$property}: $color-status-review-dark
@else
#{$property}: $color-status-review