mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:41:32 +00:00
Code Issues Releases Wiki Activity

Change message active button colors

Browse Source
This commit is contained in:
Gabor PEK 2020-06-29 17:17:05 +02:00
parent 2f9aa9c298
commit bca9861a4d
3 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/messages/messages.component.scss
View File

@ -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 {

1
src/assets/scss/_variables.scss
View File

@ -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;

12
src/assets/scss/mixins/_button.scss
View File

@ -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;
}
}