diff --git a/app/styles/app/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass index 74987765..fcaa32d5 100644 --- a/app/styles/app/_mixins/colors.sass +++ b/app/styles/app/_mixins/colors.sass @@ -1,7 +1,9 @@ - $teal: #40a3ad $green: #44a662 $yellow: #e5da3f +$yellow-bg: $yellow +$yellow-font: #beab04 +$yellow-tile: #dbc040 $red: #d94341 $grey: #666 diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index f4fe8390..3a7f0e82 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -1,4 +1,3 @@ - @mixin fadeOut($position, $angle, $color, $width: 0%) content: "" display: block @@ -84,7 +83,7 @@ .row-name .status-icon g > *, .row-request .icon-request g > * fill: $color - + .build a, .repo-title a color: $color @@ -103,22 +102,21 @@ @if $building .#{$status}, .#{$status} a, - color: #beab04 + color: $yellow-font @else .#{$status}, .#{$status} a, color: $color -=colorRows($color, $status, $width, $is-building: false) +=colorRows($color, $status, $width, $is-building: false, $color-icon: $color) @include colorBg($color, $status, $width) @include colorLinks($color, $status, $is-building) - @include colorStatusIcons($color, $status) + @include colorStatusIcons($color-icon, $status) -=colorJobs($color, $status, $width, $hover, $is-building: false) +=colorJobs($color, $status, $width, $hover, $is-building: false, $bg-start: $color) &.#{$status} @include colorLinks($color, $status, $is-building) @include colorStatusIcons($color, $status) &:hover, &:active - @include colorBg($color, $status, $width, $hover) - + @include colorBg($bg-start, $status, $width, $hover) diff --git a/app/styles/app/components/build-tile.sass b/app/styles/app/components/build-tile.sass index e7d8e424..9b449ab9 100644 --- a/app/styles/app/components/build-tile.sass +++ b/app/styles/app/components/build-tile.sass @@ -10,7 +10,7 @@ fill: $white .status-icon .circle border-color: $white - + border-width: 2px .build-tiles height: 4.7em @@ -76,8 +76,8 @@ @include buildTileColors(#D94341, #FFF7F5, 'failed') @include buildTileColors(#D94341, #FFF7F5, 'errored') @include buildTileColors(#A1A0A0, #F5F5F5, 'canceled') - @include buildTileColors(#bfb502, #fdfcee, 'started', #e2c913) - @include buildTileColors(#bfb502, #fdfcee, 'queued', #e2c913) - @include buildTileColors(#bfb502, #fdfcee, 'booting', #e2c913) - @include buildTileColors(#bfb502, #fdfcee, 'received', #e2c913) - @include buildTileColors(#bfb502, #fdfcee, 'created', #e2c913) + @include buildTileColors($yellow-tile, #fdfcee, 'started') + @include buildTileColors($yellow-tile, #fdfcee, 'queued') + @include buildTileColors($yellow-tile, #fdfcee, 'booting') + @include buildTileColors($yellow-tile, #fdfcee, 'received') + @include buildTileColors($yellow-tile, #fdfcee, 'created') diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass index 7ee297b7..ece92120 100644 --- a/app/styles/app/layouts/jobs.sass +++ b/app/styles/app/layouts/jobs.sass @@ -27,11 +27,11 @@ @include colorJobs($red, 'failed', 6px, rgba($red, .1)) @include colorJobs($red, 'errored', 6px, rgba($red, .1)) @include colorJobs($grey, 'canceled', 6px, #f1f1f1) - @include colorJobs($yellow, 'started', 6px, rgba($yellow, .1), true) - @include colorJobs($yellow, 'queued', 6px, rgba($yellow, .1), true) - @include colorJobs($yellow, 'booting', 6px, rgba($yellow, .1), true) - @include colorJobs($yellow, 'received', 6px, rgba($yellow, .1), true) - @include colorJobs($yellow, 'created', 6px, rgba($yellow, .1), true) + @include colorJobs($yellow-font, 'started', 6px, rgba($yellow, .1), true, $yellow-bg) + @include colorJobs($yellow-font, 'queued', 6px, rgba($yellow, .1), true, $yellow-bg) + @include colorJobs($yellow-font, 'booting', 6px, rgba($yellow, .1), true, $yellow-bg) + @include colorJobs($yellow-font, 'received', 6px, rgba($yellow, .1), true, $yellow-bg) + @include colorJobs($yellow-font, 'created', 6px, rgba($yellow, .1), true, $yellow-bg) @include colorFadeOut('passed',#ECF6EF) @include colorFadeOut('failed', #FBECEB) @@ -96,7 +96,7 @@ height: 20px vertical-align: middle padding-left: 1.5em - background: + background: size: auto 18px repeat: no-repeat @media #{$medium-up} diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass index 16606615..e9a31e37 100644 --- a/app/styles/app/modules/build-header.sass +++ b/app/styles/app/modules/build-header.sass @@ -7,11 +7,11 @@ @include colorRows($red, 'failed', 12px) @include colorRows($red, 'errored', 12px) @include colorRows($grey, 'canceled', 12px) - @include colorRows($yellow, 'started', 12px, true) - @include colorRows($yellow, 'queued', 12px, true) - @include colorRows($yellow, 'booting', 12px, true) - @include colorRows($yellow, 'received', 12px, true) - @include colorRows($yellow, 'created', 12px, true) + @include colorRows($yellow-bg, 'started', 12px, true, $yellow-font) + @include colorRows($yellow-bg, 'queued', 12px, true, $yellow-font) + @include colorRows($yellow-bg, 'booting', 12px, true, $yellow-font) + @include colorRows($yellow-bg, 'received', 12px, true, $yellow-font) + @include colorRows($yellow-bg, 'created', 12px, true, $yellow-font) @media #{$medium-up} display: flex diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass index 3509a90b..8d978fda 100644 --- a/app/styles/app/modules/row.sass +++ b/app/styles/app/modules/row.sass @@ -92,8 +92,8 @@ @include statusColors($red, 'failed', 10px) @include statusColors($red, 'errored', 10px) @include statusColors($grey, 'canceled', 10px) - @include statusColors($yellow, 'started', 10px, #e5da3f, true) - @include statusColors($yellow, 'queued', 10px, #e5da3f, true) - @include statusColors($yellow, 'booting', 10px, #e5da3f, true) - @include statusColors($yellow, 'received', 10px, #e5da3f, true) - @include statusColors($yellow, 'created', 10px, #e5da3f, true) + @include statusColors($yellow-font, 'started', 10px, $yellow-bg, true) + @include statusColors($yellow-font, 'queued', 10px, $yellow-bg, true) + @include statusColors($yellow-font, 'booting', 10px, $yellow-bg, true) + @include statusColors($yellow-font, 'received', 10px, $yellow-bg, true) + @include statusColors($yellow-font, 'created', 10px, $yellow-bg, true)