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

clean up styles

Browse source
This commit is contained in:
catarak 2016-06-20 23:04:41 -04:00
parent b94107c4b1
commit 6b978abcdd
8 changed files with 65 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
shared/components/Preferences/Preferences.jsx
View file

@ -21,7 +21,7 @@ class Preferences extends React.Component {
</button>
</div>
<div className="preference">
<h3 className="preference__title">Font Size</h3>
<h3 className="preference__title">Text Size</h3>
<button className="preference__plus-button" onClick={this.props.decreaseFont}>
<Isvg src={minusUrl} alt="Decrease Font Size" />
</button>

33
styles/abstracts/_placeholders.scss
View file

@ -4,7 +4,7 @@
width: #{44 / $base-font-size}rem;
text-align: center;
border-radius: 100%;
line-height: #{50 / $base-font-size}rem;
line-height: #{46 / $base-font-size}rem;
cursor: pointer;
border: none;
outline: none;
@ -29,6 +29,23 @@
}
}
%icon {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: $light-icon-color;
& g {
fill: $light-icon-color;
}
&:hover {
color: $light-icon-hover-color;
& g {
fill: $light-icon-hover-color;
}
}
}
%button {
background-color: $light-button-background-color;
color: $light-button-color;
@ -49,17 +66,17 @@
}
%preferences-button {
@extend %button;
background-color: $light-preferences-button-background-color;
color: $light-preferences-button-color;
@extend %toolbar-button;
color: $light-primary-text-color;
background-color: $light-modal-button-background-color;
& g {
fill: $light-preferences-button-color;
fill: $light-primary-text-color;
}
&:hover {
background-color: $light-preferences-button-background-color;
color: $light-preferences-button-hover-color;
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
& g {
fill: $light-preferences-button-hover-color;
fill: $light-button-hover-color;
}
}
}

12
styles/abstracts/_variables.scss
View file

@ -1,12 +1,10 @@
$base-font-size: 16;
$menu-font-size: 21;
//colors
$p5js-pink: #ed225d;
$white: #fff;
$black: #000;
$light-primary-text-color: #333;
$light-secondary-text-color: #6b6b6b;
$light-inactive-text-color: #b5b5b5;
@ -20,6 +18,9 @@ $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-icon-color: #8b8b8b;
$light-icon-hover-color: $light-primary-text-color;
$dark-primary-text-color: $white;
$dark-secondary-text-color: #c2c2c2;
@ -37,10 +38,3 @@ $dark-button-active-color: $white;
$editor-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3;
$input-border-color: #979797;
$light-preferences-background-color: #f4f4f4;
$light-preferences-button-color: #8e8e8f;
$light-preferences-button-hover-color: #333333;
$light-preferences-button-background-color: #e6e6e6;

8
styles/base/_base.scss
View file

@ -37,4 +37,12 @@ input {
input[type="submit"] {
@extend %button;
}
h2 {
font-size: #{21 / $base-font-size}em;
}
h3 {
font-weight: normal;
}

4
styles/base/_reset.scss
View file

@ -10,4 +10,8 @@ html, body {
ul, p {
padding: 0;
margin: 0;
}
h2, h3 {
margin: 0;
}

51
styles/components/_preferences.scss
View file

@ -1,8 +1,11 @@
.preferences {
background-color: $light-preferences-background-color;
position: absolute;
top: #{66 / $base-font-size}rem;
right: #{40 / $base-font-size}rem;
width: #{276 / $base-font-size}rem;
background-color: $light-button-background-color;
display: none;
font-family: 'Montserrat', sans-serif;
padding-bottom: #{20 / $base-font-size}rem;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
&--selected {
display: flex;
flex-direction: column;
@ -10,18 +13,12 @@
}
.preferences__exit-button {
@extend %preferences-button;
margin-left: auto;
background-color: $light-preferences-background-color;
&:hover {
background-color: $light-preferences-background-color;
}
@extend %icon;
padding-top: #{5 / $base-font-size}rem;
}
.preference__plus-button {
@extend %preferences-button;
margin-right: auto;
}
.preference__minus-button {
@ -30,33 +27,25 @@
.preferences__heading {
display: flex;
flex-direction: rows;
margin-left: #{20 / $base-font-size}rem;
}
.preferences__title {
margin: 0 0;
font-size: #{$menu-font-size}px;
font-weight: 700;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
flex-direction: row;
justify-content: space-between;
margin-bottom: #{20 / $base-font-size}rem;
}
.preference {
margin: 0 #{20 / $base-font-size}rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.preference__title {
margin: 0 0;
font-size: #{$base-font-size}px;
font-weight: 400;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
width: 100%;
margin-bottom: #{10 / $base-font-size}rem;
}
.preference__value {
@extend %button;
border-radius: 0%;
border: 2px solid $light-preferences-button-color;
line-height: #{44 / $base-font-size}rem;
margin: 0 #{20 / $base-font-size}rem;
border: 1px solid $light-button-border-color;
text-align: center;
line-height: #{48 / $base-font-size}rem;
width: #{48 / $base-font-size}rem;
}

4
styles/components/_toolbar.scss
View file

@ -4,6 +4,9 @@
&--selected {
@extend %toolbar-button--selected;
}
& span {
padding-left: #{2 / $base-font-size}rem;
}
}
.toolbar__stop-button {
@ -15,6 +18,7 @@
.toolbar__preferences-button {
@extend %toolbar-button;
line-height: #{50 / $base-font-size}rem;
margin-left: auto;
&--selected {
@extend %toolbar-button--selected;

7
styles/layout/_ide.scss
View file

@ -17,10 +17,3 @@
.toolbar {
width: 100%;
}
.preferences {
width: 22.5%;
position: absolute;
top: #{20 / $base-font-size}rem;
right:#{60 / $base-font-size}rem;
}