diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 6c01006..95acc43 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -33,39 +33,41 @@ text-align: center; .no { - @include set-button-style($tao-red-color); + @include set-button-style($tao-red-color, rgba(255, 69, 131, 0.5)); width: $xlarge; } .yes { - @include set-button-style($tao-green-color); + @include set-button-style($tao-green-color, rgba(72, 190, 176, 0.5)); width: $xlarge; } .solution { - @include set-button-style($tao-blue-color); + @include set-button-style($tao-blue-color, rgba(255, 255, 255, 0.5)); width: $xlarge + $medium + $tiny; } .hint { - @include set-button-style($tao-yellow-color); - width: $xlarge + $medium + $tiny; + @include set-button-style(white, rgba(102, 151, 255, 0.5)); + width: $xlarge; } .fix { - @include set-button-style($tao-yellow-color); + @include set-button-style($tao-yellow-color, rgba(255, 214, 143, 0.5)); width: $xlarge + $medium + $tiny; } .next { - @include set-button-style($tao-blue-color); + @include set-button-style($tao-blue-color, rgba(102, 151, 255, 0.5)); width: $xlarge; } } } .highlighted-message { - box-shadow: 0px 0px 3px 0px rgba($tao-gray-300,0.65); + // box-shadow: 0px 0px 8px 0px $tao-blue-color; + border: 3px single $tao-blue-color; + } @keyframes inflate { diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 685854a..56b3296 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -102,6 +102,7 @@ $tao-gray-color: #94A6B9; // @25% opacity $tao-yellow-color: #FFD68F; $tao-blue-color: #6697FF; $tao-green-color: #48BEB0; +$tao-cyan-color: #60FDEB; $tao-red-color: #FF4583; diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss index ab95fae..213ab5b 100644 --- a/src/assets/scss/mixins/_button.scss +++ b/src/assets/scss/mixins/_button.scss @@ -1,6 +1,6 @@ @import "../variables.scss"; -@mixin set-button-style($color) { +@mixin set-button-style($color, $shadow-color) { box-sizing: border-box; border-radius: 10px; background: $color; @@ -16,10 +16,12 @@ outline: none; &:active { - background: $tao-btn-font-color; - border: $tao-btn-font-color; - color: $color; - border-radius: 10px; + opacity: 0.5; + box-shadow: none; + } + + &:hover { + box-shadow: 0 0 8px $shadow-color; } }