From f13e80639823372f531ea451f36127ee9f0357f7 Mon Sep 17 00:00:00 2001 From: Apoorv Taneja Date: Thu, 13 Jun 2019 01:28:02 +0530 Subject: [PATCH] Added hover effect on sidebar elements (#887) * fixes * changes * fixes #886, adjusts sidebar styling to match navigation dropdown, move nav dropdown and sidebar dropdowns into common placeholder --- client/styles/abstracts/_placeholders.scss | 63 ++++++++++++ client/styles/components/_nav.scss | 110 +-------------------- client/styles/components/_sidebar.scss | 67 +++---------- 3 files changed, 80 insertions(+), 160 deletions(-) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index b7af3212..80fbbb45 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -176,3 +176,66 @@ } } } + +%dropdown-open { + @include themify() { + background-color: map-get($theme-map, 'modal-background-color'); + border: 1px solid map-get($theme-map, 'modal-border-color'); + box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); + color: getThemifyVariable('dropdown-color'); + } + text-align: left; + width: #{180 / $base-font-size}rem; + display: flex; + position: absolute; + flex-direction: column; + top: 100%; + height: auto; + z-index: 9999; + border-radius: #{6 / $base-font-size}rem; + & li:last-child { + border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem; + } + & li { + & button, + & a { + @include themify() { + color: getThemifyVariable('dropdown-color'); + } + } + padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem; + height: #{35 / $base-font-size}rem; + cursor: pointer; + display: flex; + align-items: center; + } + & li:hover { + @include themify() { + background-color: getThemifyVariable('button-background-hover-color'); + color: getThemifyVariable('button-hover-color') + } + & button, & a { + @include themify() { + color: getThemifyVariable('button-hover-color'); + } + } + } +} + +%dropdown-open-left { + @extend %dropdown-open; + left: 0; + border-top-left-radius: 0px; + & li:first-child { + border-radius: 0 #{5 / $base-font-size}rem 0 0; + } +} + +%dropdown-open-right { + @extend %dropdown-open; + right: 0; + border-top-right-radius: 0px; + & li:first-child { + border-radius: #{5 / $base-font-size}rem 0 0 0; + } +} diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index 30496400..f7335f35 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -76,29 +76,11 @@ } .nav__dropdown { - @include themify() { - background-color: map-get($theme-map, 'modal-background-color'); - border: 1px solid map-get($theme-map, 'modal-border-color'); - box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); - color: getThemifyVariable('dropdown-color'); - } - + @extend %dropdown-open-left; display: none; - text-align: left; - width: #{180 / $base-font-size}rem; - .nav__item--open & { display: flex; - position: absolute; - flex-direction: column; - top: #{40 / $base-font-size}rem; - left: 0; - height: auto; } - - z-index: 9999; - border-radius: #{6 / $base-font-size}rem; - border-top-left-radius: 0px; } .nav__items-right { @@ -116,94 +98,11 @@ } } -.nav__dropdown a, -button { - @include themify() { - color: getThemifyVariable('secondary-text-color'); - } -} - .nav__dropdown button { padding: 0; } -.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'); - } - - height: #{(42 - 5) / $base-font-size}rem; - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 #{16 / $base-font-size}rem; - cursor: pointer; - - &:hover { - span { - @include themify() { - color: getThemifyVariable('nav-hover-color'); - } - } - - polygon { - @include themify() { - fill: getThemifyVariable('nav-hover-color'); - } - } - } -} - -.nav__dropdown-heading a, -.nav__dropdown-heading a:hover { - @include themify() { - color: getThemifyVariable('inactive-text-color'); - } - - cursor: default; - width: 100%; -} - -.nav__dropdown-heading svg { - transform-origin: 50% 50%; - transform: rotate(180deg); -} - .nav__dropdown-item { - height: #{32 / $base-font-size}rem; - width: 100%; - display: flex; - align-items: center; - padding: 0 #{16 / $base-font-size}rem; - cursor: pointer; - - & button, - & a { - @include themify() { - color: getThemifyVariable('dropdown-color'); - } - } - - &:hover { - @include themify() { - background-color: getThemifyVariable('button-background-hover-color'); - color: getThemifyVariable('button-hover-color') - } - - & button, - & a { - @include themify() { - color: getThemifyVariable('button-hover-color'); - } - } - } - & button, & a { width: 100%; @@ -214,13 +113,6 @@ button { } } -.nav__dropdown-item:last-child { - border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem; -} -.nav__dropdown-item:first-child { - border-radius: 0 #{5 / $base-font-size}rem 0 0; -} - .nav__announce { position: absolute; top: #{40 / $base-font-size}rem; diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss index 2c25d4fa..45fe2739 100644 --- a/client/styles/components/_sidebar.scss +++ b/client/styles/components/_sidebar.scss @@ -1,7 +1,6 @@ .sidebar { display: flex; flex-flow: column; - } .sidebar__header { @@ -12,6 +11,7 @@ align-items: center; height: #{29 / $base-font-size}rem; min-height: #{29 / $base-font-size}rem; + position: relative; } .sidebar__title { @@ -51,7 +51,6 @@ } .sidebar__file-item { - // height: #{20 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem; cursor: pointer; position: relative; @@ -151,30 +150,12 @@ } .sidebar__file-item-options { - @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: #{0 / $base-font-size}rem; + @extend %dropdown-open-right; display: none; - z-index: 100; - padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem; + width: 100%; + max-width: #{180 / $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'); + display: flex; } } @@ -220,7 +201,7 @@ .sidebar__icons { display: flex; align-items: center; - position: relative; + height: 100%; .sidebar--cant-edit & { display: none; } @@ -270,32 +251,16 @@ } } -.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: #{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-option { - @include themify() { - @extend %link; - } - background-color: transparent; - border: none; -} - - .sidebar__file-item--closed .file-item__children { display: none; } + +.sidebar__project-options { + @extend %dropdown-open-right; + display: none; + width: 100%; + max-width: #{180 / $base-font-size}rem; + .sidebar--project-options & { + display: flex; + } +}