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

fix styling

Browse source
This commit is contained in:
mathuramg 2016-07-11 19:14:45 -04:00
parent 0942378812
commit 5ef51a939e
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -70,6 +70,7 @@
color: $light-primary-text-color; color: $light-primary-text-color;
background-color: $light-modal-button-background-color; background-color: $light-modal-button-background-color;
padding: 0; padding: 0;
line-height: #{48 / $base-font-size}rem;
& g { & g {
fill: $light-primary-text-color; fill: $light-primary-text-color;
} }
@ -92,7 +93,7 @@
%preference-option { %preference-option {
background-color: $light-button-background-color; background-color: $light-button-background-color;
color: $light-secondary-text-color; color: $light-inactive-text-color;
font-size: #{14 / $base-font-size}rem; font-size: #{14 / $base-font-size}rem;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;

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

@ -13,12 +13,13 @@ $light-background-color: #fdfdfd;
$light-button-background-color: #f4f4f4; $light-button-background-color: #f4f4f4;
$light-button-color: $black; $light-button-color: $black;
$light-button-border-color: #979797; $light-button-border-color: #979797;
$light-value-border-color: #e6e6e6;
$light-toolbar-button-color: $p5js-pink; $light-toolbar-button-color: $p5js-pink;
$light-button-background-hover-color: $p5js-pink; $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-button-background-color: #e6e6e6; $light-modal-button-background-color: #e6e6e6;
$light-icon-color: #8b8b8b; $light-icon-color: #8b8b8b;
$light-icon-hover-color: $light-primary-text-color; $light-icon-hover-color: $light-primary-text-color;

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

@ -2,7 +2,7 @@
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: #{300 / $base-font-size}rem; width: #{332 / $base-font-size}rem;
background-color: $light-button-background-color; 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;
@ -45,20 +45,22 @@
} }
.preference__value { .preference__value {
border: 1px solid $light-button-border-color; border: 2px solid $light-value-border-color;
text-align: center; text-align: center;
border-radius: 0%;
width: #{48 / $base-font-size}rem; width: #{48 / $base-font-size}rem;
line-height: #{48 / $base-font-size}rem; height: #{44 / $base-font-size}rem;
margin: 0 #{20 / $base-font-size}rem; margin: 0 #{28 / $base-font-size}rem;
padding: 0;
background-color: $light-button-background-color; background-color: $light-button-background-color;
} }
.preference__label { .preference__label {
margin: 0; margin: 0;
line-height: #{20 / $base-font-size}rem; line-height: #{20 / $base-font-size}rem;
color: $light-button-border-color; color: $light-inactive-text-color;
&:hover { &:hover {
color: $light-button-border-color; color: $light-inactive-text-color;
} }
} }
@ -70,7 +72,7 @@
.preference__option { .preference__option {
@extend %preference-option; @extend %preference-option;
list-style-type: none; list-style-type: none;
padding-left: #{12 / $base-font-size}rem; padding-left: #{28 / $base-font-size}rem;
&--selected { &--selected {
@extend %preference-option--selected; @extend %preference-option--selected;
} }