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

add preferences title

Browse source
This commit is contained in:
mathuramg 2016-06-20 12:45:15 -04:00
parent 0850705e34
commit afc2ef91d5
5 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -3,10 +3,11 @@
<head>
<title>p5.js Web Editor</title>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="root" class="root-app">
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
</html>

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

@ -12,6 +12,7 @@ class Preferences extends React.Component {
});
return (
<div className={preferencesContainerClass} tabindex="0">
<div className="preferences__title-text">Preferences</div>
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
<Isvg src={exitUrl} alt="Exit Preferences" />
</button>

3
styles/abstracts/_placeholders.scss
View file

@ -36,12 +36,13 @@
%preferences-button {
@extend %button;
background-color: $light-preferences-button-background-color;
color: $light-preferences-button-color;
& g {
fill: $light-preferences-button-color;
}
&:hover {
background-color: $light-preferences-button-background-color;
color: $light-preferences-button-hover-color;
& g {
fill: $light-preferences-button-hover-color;
}

1
styles/abstracts/_variables.scss
View file

@ -1,4 +1,5 @@
$base-font-size: 16;
$menu-font-size: 21;
//colors
$p5js-pink: #ed225d;

9
styles/components/_preferences.scss
View file

@ -1,6 +1,7 @@
.preferences {
background-color: $light-preferences-background-color;
display: none;
font-family: 'Montserrat', sans-serif;
&--selected {
display: flex;
}
@ -15,3 +16,11 @@
background-color: $light-preferences-background-color;
}
}
.preferences__title-text {
margin-left: #{20 / $base-font-size}rem;
font-size: $menu-font-size;
font-color: white;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
}