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

update modal styling, move to placeholder

Browse source
This commit is contained in:
catarak 2016-07-21 15:07:53 -04:00
parent 5362098844
commit 6f3db24d9f
5 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -116,3 +116,10 @@
height:1px; height:1px;
overflow:hidden; overflow:hidden;
} }
%modal {
background-color: $light-modal-background-color;
border: 1px solid $light-modal-border-color;
border-radius: 2px;
box-shadow: 0 12px 12px $light-shadow-color;
}

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

@ -18,10 +18,12 @@ $light-button-background-hover-color: $p5js-pink;
$light-button-background-active-color: #f10046; $light-button-background-active-color: #f10046;
$light-button-hover-color: $white; $light-button-hover-color: $white;
$light-button-active-color: $white; $light-button-active-color: $white;
$light-modal-background-color: #f4f4f4;
$light-modal-button-background-color: #e6e6e6; $light-modal-button-background-color: #e6e6e6;
$light-modal-border-color: #B9D0E1; $light-modal-border-color: #B9D0E1;
$light-icon-color: #8b8b8b; $light-icon-color: #8b8b8b;
$light-icon-hover-color: $light-primary-text-color; $light-icon-hover-color: $light-primary-text-color;
$light-shadow-color: rgba(0, 0, 0, 0.16);
$dark-primary-text-color: $white; $dark-primary-text-color: $white;
$dark-secondary-text-color: #c2c2c2; $dark-secondary-text-color: #c2c2c2;
@ -45,3 +47,4 @@ $console-header-background-color: #d6d6d6;
$console-header-color: #b1b1b1; $console-header-color: #b1b1b1;
$console-warn-color: #ffbe05; $console-warn-color: #ffbe05;
$console-error-color: #ff5f52; $console-error-color: #ff5f52;

8
client/styles/components/_editor.scss
View file

@ -54,9 +54,9 @@
} }
.CodeMirror-lint-tooltip { .CodeMirror-lint-tooltip {
font-family: Montserrat, sans-serif; background-color: $light-modal-background-color;
border-radius: 2px;
border: 1px solid $light-modal-border-color; border: 1px solid $light-modal-border-color;
background-color: $light-button-background-color; border-radius: 2px;
box-shadow: 0 12px 12px $light-shadow-color;
font-family: Montserrat, sans-serif;
} }

3
client/styles/components/_modal.scss
View file

@ -6,8 +6,7 @@
} }
.modal-content { .modal-content {
border: 1px solid $light-modal-border-color; @extend %modal;
background-color: $light-button-background-color;
height: #{400 / $base-font-size}rem; height: #{400 / $base-font-size}rem;
width: #{400 / $base-font-size}rem; width: #{400 / $base-font-size}rem;
padding: #{20 / $base-font-size}rem; padding: #{20 / $base-font-size}rem;

2
client/styles/components/_preferences.scss
View file

@ -1,9 +1,9 @@
.preferences { .preferences {
@extend %modal;
position: absolute; position: absolute;
top: #{66 / $base-font-size}rem; top: #{66 / $base-font-size}rem;
right: #{40 / $base-font-size}rem; right: #{40 / $base-font-size}rem;
width: #{336 / $base-font-size}rem; width: #{336 / $base-font-size}rem;
background-color: $light-button-background-color;
display: none; display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem; padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
&--selected { &--selected {