r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Style change to toasts (#316)

Browse source 
* Changes to toast styles

* Changes to toast styles

removed an unused variable

* removing another unused variable
This commit is contained in:
Kevin Martin Jose 2017-03-07 00:59:42 +05:30 committed by Cassie Tarakajian
parent 134cc76981
commit 8167366ce0
3 changed files with 31 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
client/styles/abstracts/_placeholders.scss
View file

@ -51,6 +51,25 @@
padding: 0; padding: 0;
} }
%icon-toast{
@include themify() {
color: $toast-text-color
& g {
fill: $toast-text-color
}
&:hover {
color: getThemifyVariable('icon-toast-hover-color');
& g {
opacity: 1;
fill: getThemifyVariable('icon-toast-hover-color');
}
}
}
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
}
%none-themify-icon { %none-themify-icon {
background-color: transparent; background-color: transparent;
border: none; border: none;

14
client/styles/abstracts/_variables.scss
View file

@ -6,6 +6,8 @@ $white: #fff;
$black: #000; $black: #000;
$yellow: #F5DC23; $yellow: #F5DC23;
$primary-text-color: #333; $primary-text-color: #333;
$icon-color: #8b8b8b;
$icon-hover-color: #333;
$themes: ( $themes: (
light: ( light: (
@ -29,8 +31,9 @@ $themes: (
modal-background-color: #f4f4f4, modal-background-color: #f4f4f4,
modal-button-background-color: #e6e6e6, modal-button-background-color: #e6e6e6,
modal-border-color: #B9D0E1, modal-border-color: #B9D0E1,
icon-color: #8b8b8b, icon-color: $icon-color,
icon-hover-color: #333, icon-hover-color: $icon-hover-color,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee, console-background-color: #eee,
console-header-background-color: #d6d6d6, console-header-background-color: #d6d6d6,
@ -65,6 +68,7 @@ $themes: (
modal-border-color: #949494, modal-border-color: #949494,
icon-color: #a9a9a9, icon-color: #a9a9a9,
icon-hover-color: $white, icon-hover-color: $white,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f, console-background-color: #4f4f4f,
console-header-background-color: #3f3f3f, console-header-background-color: #3f3f3f,
@ -98,6 +102,7 @@ $themes: (
modal-border-color: #949494, modal-border-color: #949494,
icon-color: #a9a9a9, icon-color: #a9a9a9,
icon-hover-color: $yellow, icon-hover-color: $yellow,
icon-toast-hover-color: $yellow,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f, console-background-color: #4f4f4f,
console-header-background-color: #3f3f3f, console-header-background-color: #3f3f3f,
@ -114,7 +119,7 @@ $themes: (
$console-warn-color: #ffbe05; $console-warn-color: #ffbe05;
$console-error-color: #ff5f52; $console-error-color: #ff5f52;
$toast-background-color: #979797; $toast-background-color: #4A4A4A;
$toast-text-color: $white; $toast-text-color: $white;
$form-title-color: rgba(51, 51, 51, 0.87); $form-title-color: rgba(51, 51, 51, 0.87);
@ -127,8 +132,5 @@ $form-button-hover-color: $white;
$form-button-active-color: $white; $form-button-active-color: $white;
$form-navigation-options-color: #999999; $form-navigation-options-color: #999999;
$icon-color: #8b8b8b;
$icon-hover-color: #333;
$about-play-background-color: rgba(255, 255, 255, 0.7); $about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7); $about-button-border-color: rgba(151, 151, 151, 0.7);

11
client/styles/components/_toast.scss
View file

@ -1,21 +1,18 @@
.toast { .toast {
background-color: $toast-background-color; background-color: $toast-background-color;
color: $toast-text-color; color: $toast-text-color;
padding: #{20 / $base-font-size}rem; padding: #{10 / $base-font-size}rem;
position: absolute; position: absolute;
top: 0; top: 0;
right: 40%; right: 40%;
display: flex; display: flex;
z-index: 9999; z-index: 9999;
box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
} }
.toast__close { .toast__close {
@include themify() { @include themify() {
@extend %icon; @extend %icon-toast;
} }
color: $toast-text-color; margin-left: #{20 / $base-font-size}rem;
& g {
fill: $toast-text-color;
}
margin-left: #{10 / $base-font-size}rem;
} }