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;
background-color: $light-modal-button-background-color;
padding: 0;
line-height: #{48 / $base-font-size}rem;
& g {
fill: $light-primary-text-color;
}
@ -92,7 +93,7 @@
%preference-option {
background-color: $light-button-background-color;
color: $light-secondary-text-color;
color: $light-inactive-text-color;
font-size: #{14 / $base-font-size}rem;
cursor: pointer;
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-color: $black;
$light-button-border-color: #979797;
$light-value-border-color: #e6e6e6;
$light-toolbar-button-color: $p5js-pink;
$light-button-background-hover-color: $p5js-pink;
$light-button-background-active-color: #f10046;
$light-button-hover-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-hover-color: $light-primary-text-color;

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

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