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> <head>
<title>p5.js Web Editor</title> <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=Inconsolata' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div id="root" class="root-app"> <div id="root" class="root-app">
</div> </div>
<script src="/dist/bundle.js"></script> <script src="/dist/bundle.js"></script>
</body> </body>
</html> </html>

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

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

3
styles/abstracts/_placeholders.scss
View file

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

1
styles/abstracts/_variables.scss
View file

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

9
styles/components/_preferences.scss
View file

@ -1,6 +1,7 @@
.preferences { .preferences {
background-color: $light-preferences-background-color; background-color: $light-preferences-background-color;
display: none; display: none;
font-family: 'Montserrat', sans-serif;
&--selected { &--selected {
display: flex; display: flex;
} }
@ -15,3 +16,11 @@
background-color: $light-preferences-background-color; 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;
}