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

@@ -197,3 +197,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;
+	}
+}

client/styles/components/_nav.scss

@@ -76,29 +76,11 @@
 }
 
 .nav__dropdown {
-  @include themify() {
+  @extend %dropdown-open-left;
-    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');
-  }
-
   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;

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;
+  @extend %dropdown-open-right;
-  @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;
   display: none;
-  z-index: 100;
+  width: 100%;
-  padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+  max-width: #{180 / $base-font-size}rem;
   .sidebar__file-item--open > .file-item__content & {
-    display: block;
+    display: flex;
-  }
-}
-
-.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');
   }
 }
 
@@ -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;
+  }
+}