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

Merge pull request #55 from avatao-content/message-buttons

Browse Source 
Change message active button colors
This commit is contained in:
raciborski 2020-07-01 13:23:31 +02:00 committed by GitHub
commit f768b74893
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 15 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; text-align: center;
.no { .no {
@include set-button-style($tao-red-color); @include set-button-style($tao-red-color, $tao-shadow-red-color);
width: $xlarge; width: $xlarge;
} }
.yes { .yes {
@include set-button-style($tao-green-color); @include set-button-style($tao-green-color, $tao-shadow-green-color);
width: $xlarge; width: $xlarge;
} }
.solution { .solution {
@include set-button-style($tao-blue-color); @include set-button-style(white, $tao-shadow-color);
width: $xlarge + $medium + $tiny; width: $xlarge + $medium + $tiny;
} }
.hint { .hint {
@include set-button-style($tao-yellow-color); @include set-button-style($tao-blue-color, $tao-shadow-blue-color);
width: $xlarge + $medium + $tiny; width: $xlarge;
} }
.fix { .fix {
@include set-button-style($tao-yellow-color); @include set-button-style($tao-yellow-color, $tao-shadow-yellow-color);
width: $xlarge + $medium + $tiny; width: $xlarge + $medium + $tiny;
} }
.next { .next {
@include set-button-style($tao-blue-color); @include set-button-style($tao-blue-color, $tao-shadow-blue-color);
width: $xlarge; width: $xlarge;
} }
} }
} }
.highlighted-message { .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 { @keyframes inflate {

4
src/app/services/terminado.service.ts
View File

@ -26,8 +26,8 @@ export class TerminadoService {
black: '#000000', black: '#000000',
red: '#FF5252', // $tao-red-500 red: '#FF5252', // $tao-red-500
brightRed: '#FF7171', // $tao-red-400 brightRed: '#FF7171', // $tao-red-400
green: '#2fd19f', // $tao-bright-green-500 green: '#60FDEB', // $tao-bright-green-500
brightGreen: '#2fd19f', // $tao-bright-green-500 brightGreen: '#60FDEB', // $tao-bright-green-500
brightYellow: '#FFD283', // $tao-warm-yellow-300 brightYellow: '#FFD283', // $tao-warm-yellow-300
yellow: '#FFB83B', // $tao-warm-yellow-500 yellow: '#FFB83B', // $tao-warm-yellow-500
magenta: '#FF8FC6', // $tao-pink-200 magenta: '#FF8FC6', // $tao-pink-200

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

@ -99,10 +99,16 @@ $tao-message-originator-color: #6697FF;
$tao-copy-color: #FFFFFF; $tao-copy-color: #FFFFFF;
$tao-timestamp-color: #94A6B9; $tao-timestamp-color: #94A6B9;
$tao-gray-color: #94A6B9; // @25% opacity $tao-gray-color: #94A6B9; // @25% opacity
$tao-shadow-color: rgba(255, 255, 255, 0.5);
$tao-yellow-color: #FFD68F; $tao-yellow-color: #FFD68F;
$tao-shadow-yellow-color: rgba(255, 214, 143, 0.5);
$tao-blue-color: #6697FF; $tao-blue-color: #6697FF;
$tao-shadow-blue-color: rgba(102, 151, 255, 0.5);
$tao-green-color: #48BEB0; $tao-green-color: #48BEB0;
$tao-shadow-green-color: rgba(72, 190, 176, 0.5);
$tao-cyan-color: #60FDEB;
$tao-red-color: #FF4583; $tao-red-color: #FF4583;
$tao-shadow-red-color: rgba(255, 69, 131, 0.5);
// Panel border radius // Panel border radius

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

@ -1,6 +1,6 @@
@import "../variables.scss"; @import "../variables.scss";
@mixin set-button-style($color) { @mixin set-button-style($color, $shadow-color) {
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
background: $color; background: $color;
@ -16,10 +16,12 @@
outline: none; outline: none;
&:active { &:active {
background: $tao-btn-font-color; opacity: 0.5;
border: $tao-btn-font-color; box-shadow: none;
color: $color; }
border-radius: 10px;
&:hover {
box-shadow: 0 0 8px $shadow-color;
} }
} }