From 28323ffc090514d82a95e53fa48ea01117bb09be Mon Sep 17 00:00:00 2001 From: Lauren McCarthy Date: Mon, 19 Dec 2016 21:21:04 -0800 Subject: [PATCH] formatting of dropdown login and editor menus (#239) * removing avenir font, using montserrat instead due to licensing issues * removing old import statement for typeography scss file * dropdown formatting closes #210 --- client/components/Nav.jsx | 9 ++-- client/modules/IDE/components/Editor.jsx | 2 +- client/modules/IDE/components/Sidebar.jsx | 4 +- client/styles/abstracts/_variables.scss | 2 +- client/styles/components/_editor.scss | 21 +++++++-- client/styles/components/_nav.scss | 53 +++++++++++++++++++---- client/styles/components/_sidebar.scss | 29 ++++++++++--- 7 files changed, 93 insertions(+), 27 deletions(-) diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index 70628e5b..53071f0f 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -111,7 +111,7 @@ function Nav(props) { return (

  • - Login or Sign up + Log in or Sign up

    • ); @@ -120,14 +120,17 @@ function Nav(props) {
  • Hello, {props.user.username}! diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index ff7bacb7..6ce6bdef 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -230,7 +230,7 @@ class Editor extends React.Component { Tidy
  • - Keyboard Shortcuts + Keyboard shortcuts
    • diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx index dbf9350e..67edc61d 100644 --- a/client/modules/IDE/components/Sidebar.jsx +++ b/client/modules/IDE/components/Sidebar.jsx @@ -49,12 +49,12 @@ class Sidebar extends React.Component { diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 9d339d6e..6a662ace 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -25,7 +25,7 @@ $themes: ( button-background-active-color: #f10046, button-hover-color: $white, button-active-color: $white, - modal-background-color: #fdfdfd, + modal-background-color: #f4f4f4, modal-button-background-color: #e6e6e6, modal-border-color: #B9D0E1, icon-color: #8b8b8b, diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 8e0cc1bf..51f99c05 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -96,15 +96,28 @@ display: none; @extend %modal; position: absolute; - top: #{20 / $base-font-size}rem; - right: #{5 / $base-font-size}rem; - padding: #{10 / $base-font-size}rem; - + right: #{0 / $base-font-size}rem; + padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem; + font-size: #{12 / $base-font-size}rem; + @include themify() { + background-color: getThemifyVariable('modal-background-color'); + box-shadow: 0 0 18px getThemifyVariable('shadow-color'); + } .editor--options & { display: block; } } +.editor__options li { + padding: #{4 / $base-font-size}rem 0; +} + +.editor__options a { + @include themify() { + color: getThemifyVariable('secondary-text-color'); + } +} + .editor__file-name { @include themify() { color: getThemifyVariable('secondary-text-color'); diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index 075d41f6..9bd2362f 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -34,22 +34,22 @@ .nav__dropdown { @include themify() { - background-color: map-get($theme-map, 'background-color'); - border: 1px solid map-get($theme-map, 'ide-border-color'); - } - @extend %hidden-element; - & li + li { - margin-top: #{10 / $base-font-size}rem; + background-color: map-get($theme-map, 'modal-background-color'); + border: 1px solid map-get($theme-map, 'modal-border-color'); + box-shadow: 0 0 18px getThemifyVariable('shadow-color'); } + @extend %hidden-element; + text-align: left; width: #{140 / $base-font-size}rem; .nav__item:hover & { display: flex; position: absolute; flex-direction: column; - padding: #{10 / $base-font-size}rem; - left: #{-10 / $base-font-size}rem; + top: #{-8 / $base-font-size}rem;; + left: #{-11 / $base-font-size}rem; height: auto; } + padding-bottom: #{8 / $base-font-size}rem; } .nav__item-spacer { @@ -57,4 +57,39 @@ color: map-get($theme-map, 'inactive-text-color'); } padding: 0 #{15 / $base-font-size}rem; -} \ No newline at end of file +} + +.nav__dropdown li { + padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem; + width: 100%; +} + +.nav__dropdown a { + @include themify() { + color: getThemifyVariable('secondary-text-color'); + } +} + +.nav__dropdown a:hover { + @include themify() { + color: getThemifyVariable('primary-text-color'); + } +} + +.nav__dropdown-heading { + @include themify() { + border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); + } + margin-top: #{3 / $base-font-size}rem; + text-align: center; + margin-bottom: #{4 / $base-font-size}rem; +} + +.nav__dropdown-heading a, .nav__dropdown-heading a:hover { + @include themify() { + color: getThemifyVariable('inactive-text-color'); + } + cursor: default; + width: 100%; +} + diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss index b7375c6a..a24e1e7d 100644 --- a/client/styles/components/_sidebar.scss +++ b/client/styles/components/_sidebar.scss @@ -128,20 +128,30 @@ @extend %modal; @include themify() { background-color: getThemifyVariable('modal-background-color'); + box-shadow: 0 0 18px getThemifyVariable('shadow-color'); } position: absolute; top: 95%; left: #{15 / $base-font-size}rem; - right: #{15 / $base-font-size}rem; + right: #{0 / $base-font-size}rem; display: none; z-index: 100; - padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem; - z-index: 100; + padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem; .sidebar__file-item--open > .file-item__content & { display: block; } } +.sidebar__project-options li, .sidebar__file-item-options li { + padding: #{4 / $base-font-size}rem 0; +} + +.sidebar__project-options a, .sidebar__file-item-options a { + @include themify() { + color: getThemifyVariable('secondary-text-color'); + } +} + .sidebar__file-item-input { display: none; padding: 0; @@ -235,17 +245,22 @@ .sidebar__project-options { @extend %modal; + @include themify() { + background-color: getThemifyVariable('modal-background-color'); + box-shadow: 0 0 18px getThemifyVariable('shadow-color'); + } display: none; position: absolute; .sidebar--project-options & { display: block; } - top: 100%; - right: #{-70 / $base-font-size}rem; - padding: #{4 / $base-font-size}rem; - width: #{110 / $base-font-size}rem; + top: #{22 / $base-font-size}rem; + right: #{-6 / $base-font-size}rem; + padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem; + width: #{145 / $base-font-size}rem; } + .sidebar__file-item--closed .file-item__children { display: none; }