From afc2ef91d5ea1964fddd16d37b6b764b7b94d3c4 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 20 Jun 2016 12:45:15 -0400 Subject: [PATCH] add preferences title --- index.html | 3 ++- shared/components/Preferences/Preferences.jsx | 1 + styles/abstracts/_placeholders.scss | 3 ++- styles/abstracts/_variables.scss | 1 + styles/components/_preferences.scss | 9 +++++++++ 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index dbc888ab..ba9b15ed 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,11 @@ p5.js Web Editor +
- \ No newline at end of file + diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx index 06610dc5..62c39fc4 100644 --- a/shared/components/Preferences/Preferences.jsx +++ b/shared/components/Preferences/Preferences.jsx @@ -12,6 +12,7 @@ class Preferences extends React.Component { }); return (
+
Preferences
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss index 710e178a..348d1ac5 100644 --- a/styles/abstracts/_placeholders.scss +++ b/styles/abstracts/_placeholders.scss @@ -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; } diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index 9d76f428..25a0d322 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -1,4 +1,5 @@ $base-font-size: 16; +$menu-font-size: 21; //colors $p5js-pink: #ed225d; diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss index 420300f3..77512cf1 100644 --- a/styles/components/_preferences.scss +++ b/styles/components/_preferences.scss @@ -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; +}