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 */ /* Label Status */
$color-status-invalid: lightgray $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-invalid-dark: hsl(hue($color-status-invalid), 100%, 75%)
$color-status-todo: #ff8080 $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-todo-dark: hsl(hue($color-status-todo), 100%, 75%)
$color-status-in_progress: #ffbe00 $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-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%)
$color-status-on_hold: #cb9e15 $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-on_hold-dark: hsl(hue($color-status-on_hold), 50%, 50%)
$color-status-approved: #a3e04d $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-approved-dark: hsl(hue($color-status-approved), 100%, 50%)
$color-status-cbb: #9cd5e2 $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-cbb-dark: hsl(hue($color-status-cbb), 40%, 60%)
$color-status-final: #e7f5d3 $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-final-dark: hsl(hue($color-status-final), 100%, 40%)
$color-status-review: #e4f5f9 $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-review-dark: hsl(hue($color-status-review), 100%, 50%)
$color-status-active: #E6F3FD $color-status-active: #E6F3FD

30
src/styles/_shots.sass
View File

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

45
src/styles/_tasks.sass
View File

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

137
src/styles/_utils.sass
View File

@@ -507,78 +507,71 @@
max-width: 100% max-width: 100%
height: auto height: auto
=status-background-color /* Set the color for a specified property
&.status * 1: $property: e.g. background-color
&-invalid * 2: $where: ':before', ' .class-name', etc.
background-color: hsl(hue($color-status-invalid), 100%, 75%) * 3: $variation: 'light', 'dark', or empty
&-todo * e.g. @include status-color-property(background-color, ':before', 'light')
background-color: $color-status-todo-dark */
&-in_progress @mixin status-color-property($property, $where: false, $variation: false)
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%)
=status-background-color-before @if not ($where)
&.status $where: ''
&-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%)
=status-color
&.status &.status
&-invalid &-invalid#{$where}
color: $color-status-invalid-dark @if ($variation == 'light')
&-todo #{$property}: $color-status-invalid-light
color: $color-status-todo-dark @else if ($variation == 'dark')
&-in_progress #{$property}: $color-status-invalid-dark
color: $color-status-in_progress @else
&-on_hold #{$property}: $color-status-invalid
color: $color-status-on_hold &-todo#{$where}
&-approved @if ($variation == 'light')
color: $color-status-approved #{$property}: $color-status-todo-dark
&-cbb @else if ($variation == 'dark')
color: $color-status-cbb-dark #{$property}: $color-status-todo-dark
&-final @else
color: $color-status-final-dark #{$property}: $color-status-todo
&-review &-in_progress#{$where}
color: $color-status-review-dark @if ($variation == 'light')
#{$property}: $color-status-in_progress-light
=status-border-color @else if ($variation == 'dark')
&.status #{$property}: $color-status-in_progress-dark
&-invalid @else
border-color: $color-status-invalid-dark #{$property}: $color-status-in_progress
&-todo &-on_hold#{$where}
border-color: $color-status-todo-dark @if ($variation == 'light')
&-in_progress #{$property}: $color-status-on_hold-light
border-color: $color-status-in_progress-dark @else if ($variation == 'dark')
&-on_hold #{$property}: $color-status-on_hold-dark
border-color: $color-status-on_hold-dark @else
&-approved #{$property}: $color-status-on_hold
border-color: $color-status-approved-dark &-approved#{$where}
&-cbb @if ($variation == 'light')
border-color: $color-status-cbb-dark #{$property}: $color-status-approved-light
&-final @else if ($variation == 'dark')
border-color: $color-status-final-dark #{$property}: $color-status-approved-dark
&-review @else
border-color: $color-status-review-dark #{$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