diff --git a/app/sass/component/flash/_flash-message.scss b/app/sass/component/flash/_flash-message.scss index 9c8742d6..4620c763 100644 --- a/app/sass/component/flash/_flash-message.scss +++ b/app/sass/component/flash/_flash-message.scss @@ -1,3 +1,8 @@ +$text-color: $snow-white; +$info-background-color: $perano-blue; +$danger-background-color: $blush-pink; +$warning-background-color: $gold-yellow; + @include component(flash-message) { display: block; @@ -5,19 +10,19 @@ @include modifier(info) { - background-color: cornflowerblue; - color: white; + background-color: $info-background-color; + color: $text-color; } @include modifier(warning) { - background-color: orange; - color: white; + background-color: $warning-background-color; + color: $text-color; } @include modifier(danger) { - background-color: darkred; - color: white; + background-color: $danger-background-color; + color: $text-color; } } diff --git a/app/sass/component/global/_button.scss b/app/sass/component/global/_button.scss index da27709b..732a9718 100644 --- a/app/sass/component/global/_button.scss +++ b/app/sass/component/global/_button.scss @@ -1,9 +1,12 @@ +$default-background-color: $perano-blue; +$default-text-color: $snow-white; + @include component(button) { padding: 0.5em 1.5em; text-decoration: none; - background-color: $blush-pink; - color: white; + background-color: $default-background-color; + color: $default-text-color; cursor: pointer; border-radius: 3px; display: inline-block; diff --git a/app/sass/component/global/_message.scss b/app/sass/component/global/_message.scss index 04c9e5a5..6cf67d7d 100644 --- a/app/sass/component/global/_message.scss +++ b/app/sass/component/global/_message.scss @@ -1,3 +1,6 @@ +$error-text-color: $blush-pink; +$success-text-color: $granny-green; + @include component(message) { display: flex; @@ -9,12 +12,12 @@ @include modifier(error) { - color: $blush-pink; + color: $error-text-color; } @include modifier(success) { - color: $granny-green; + color: $success-text-color; } } } diff --git a/app/sass/component/global/_tooltip.scss b/app/sass/component/global/_tooltip.scss index 8cf9d133..d602e7d9 100644 --- a/app/sass/component/global/_tooltip.scss +++ b/app/sass/component/global/_tooltip.scss @@ -1,8 +1,11 @@ +$background-color: $perano-blue; +$text-color: $snow-white; + @include component(tooltip) { position: fixed; - background-color: $granny-green; - color: $snow-white; + background-color: $background-color; + color: $text-color; padding: 0.5em 1.5em; border-radius: 3px; transform: translateX(-50%); @@ -18,6 +21,6 @@ height: 0; border-style: solid; border-width: 10px 10px 0 10px; - border-color: $granny-green transparent transparent transparent; + border-color: $background-color transparent transparent transparent; } } diff --git a/app/sass/component/team/_team-form.scss b/app/sass/component/team/_team-form.scss index 5ed10824..aff2bb12 100644 --- a/app/sass/component/team/_team-form.scss +++ b/app/sass/component/team/_team-form.scss @@ -1,3 +1,9 @@ +$disabled-background-color: $alto-grey; +$disabled-border-color: darken($disabled-background-color, 15%); +$submit-text-color: $snow-white; +$submit-background-color: $granny-green; +$submit-border-color: darken($submit-background-color, 15%); + @include component(team-form) { margin: 1em 0; @@ -8,11 +14,35 @@ width: 100%; padding: 0.5em; border: 0; - box-shadow: 0 0 0 1px $dusty-grey; + box-shadow: + shadow-border('top', $disabled-background-color), + shadow-border('bottom', $disabled-background-color), + shadow-border('left', $disabled-background-color); + outline: none; } @include child(submit) { border: 0; + color: $submit-text-color; + background-color: $submit-background-color; + box-shadow: + shadow-border('top', $submit-border-color), + shadow-border('right', $submit-border-color), + shadow-border('bottom', $submit-border-color); + outline: none; + + &:disabled { + + background-color: $disabled-background-color; + box-shadow: + shadow-border('top', $disabled-background-color), + shadow-border('right', $disabled-background-color), + shadow-border('bottom', $disabled-background-color); + } + + &:not(:disabled) { + cursor: pointer; + } } } diff --git a/app/sass/component/team/_team.scss b/app/sass/component/team/_team.scss index 159e4897..3ceec35c 100644 --- a/app/sass/component/team/_team.scss +++ b/app/sass/component/team/_team.scss @@ -1,7 +1,12 @@ +$border-color: $alto-grey; + +$remove-background-color: $blush-pink; +$remove-text-color: $snow-white; + @include component(team) { - padding: 0.5em 1.5em; - box-shadow: shadow-border("bottom", $dusty-grey); + padding: 0.5em 0; + box-shadow: shadow-border("bottom", $border-color); display: flex; justify-content: space-between; align-items: center; @@ -14,8 +19,8 @@ @include child(remove) { border: 0; - background-color: $dusty-grey; - color: $snow-white; + background-color: $remove-background-color; + color: $remove-text-color; padding: 0.5em; line-height: 1em; min-width: 2em; diff --git a/app/sass/component/tree/_node.scss b/app/sass/component/tree/_node.scss index e4df99b8..62b22378 100644 --- a/app/sass/component/tree/_node.scss +++ b/app/sass/component/tree/_node.scss @@ -1,3 +1,23 @@ +$title-background-color: $snow-white; +$title-border-color: $alto-grey; +$title-text-color: $text-color; + +$winner-background-color: $gold-yellow; +$won-background-color: $granny-green; +$lost-background-color: $blush-pink; + +@mixin node-title-variant($color) { + @include modifier(winner) { + + background-color: lighten($color, 10%); + + @include modifier(highlighted) { + + background-color: darken($color, 20%); + } + } +} + @include component(node) { display: flex; @@ -39,15 +59,15 @@ @include child(title) { position: relative; - background-color: $snow-white; - border: 1px solid $dusty-grey; + background-color: $title-background-color; + border: 1px solid $title-border-color; font-size: 1em; padding: 0.5em; margin: 0.5em; min-width: 200px; max-height: 2em; border-radius: 3px; - color: $text-color; + color: $title-text-color; outline: none; cursor: pointer; @@ -70,34 +90,8 @@ } } - @include modifier(winner) { - - background-color: lighten($gold-yellow, 10%); - - @include modifier(highlighted) { - - background-color: darken($gold-yellow, 20%); - } - } - - @include modifier(won) { - - background-color: lighten($granny-green, 10%); - - @include modifier(highlighted) { - - background-color: darken($granny-green, 20%); - } - } - - @include modifier(lost) { - - background-color: lighten($blush-pink, 10%); - - @include modifier(highlighted) { - - background-color: darken($blush-pink, 20%); - } - } + @include node-title-variant($winner-background-color); + @include node-title-variant($won-background-color); + @include node-title-variant($lost-background-color); } } diff --git a/app/sass/ext/_variables.scss b/app/sass/ext/_variables.scss index 2cf6a595..7d3c3c71 100644 --- a/app/sass/ext/_variables.scss +++ b/app/sass/ext/_variables.scss @@ -2,7 +2,9 @@ $snow-white: #fff; $mine-grey: #222; $dusty-grey: #999; +$alto-grey: #ddd; +$perano-blue: #a1c0ed; $gold-yellow : #ffe075; $granny-green: #A0E788; $blush-pink: #E78894; diff --git a/app/templates/team-form.html b/app/templates/team-form.html index 4b3f4d09..ec2ea005 100644 --- a/app/templates/team-form.html +++ b/app/templates/team-form.html @@ -1,6 +1,11 @@ -