chore(SideNav): tidy CSS

Tripwire · Jul 26, 2018 · 2ca16e5 · 2ca16e5
1 parent 4da8508
commit 2ca16e5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/src/components/SideNav/SideNav.jsx b/src/components/SideNav/SideNav.jsx
@@ -8,7 +8,7 @@ const SideNav = props => {
   const { className, children, ...rest } = props
   return (
     <nav
-      className={classnames(className, 'octagon nav')}
+      className={classnames(className, 'octagon side-nav')}
       {...rest}
     >
       {children}

diff --git a/src/components/SideNav/SideNavMenuItem.jsx b/src/components/SideNav/SideNavMenuItem.jsx
@@ -10,8 +10,8 @@ function SideNavMenuItem (props) {
   const { active, image, className, children, ...rest } = props
   const iconClasses = cx('icon_container', `icon_container--${active ? 'active' : 'inactive'}`)
   return (
-    <li className={cx('nav__item', className)} {...rest}>
-      {active ? <div className='nav_border--active' /> : null}
+    <li className={cx('side-nav__item', className)} {...rest}>
+      {active ? <div className='side-nav_border--active' /> : null}
       <div className={iconClasses}>
         {image ? <img src={image} /> : null}
         {children}

diff --git a/src/components/SideNav/side-nav.css b/src/components/SideNav/side-nav.css
@@ -1,13 +1,13 @@
 @import '../../styles/variables.css';
-.octagon.nav {
+.octagon.side-nav {
   background: color(var(--cloudburst));
   color: var(--white);
   display: inline-block;
   list-style: none;
   min-width: 65px;
   position: relative;
 
-  & .nav__item {
+  & .side-nav__item {
     align-items: center;
     color: var(--white);
     display: flex;
@@ -16,13 +16,6 @@
     width: 100%;
   }
 
-  & .nav_border--active {
-    border-left: 4px solid var(--white);
-    height: 75%;
-    left: 0;
-    position: absolute;
-  }
-
   & .icon_container {
     align-items: center;
     cursor: pointer;
@@ -33,22 +26,27 @@
     transition: opacity 400ms;
   }
 
-  & .nav__item img {
-    height: 50px;
-    width: 50px;
+  & .side-nav__item img {
+    min-height: 50px;
+    min-width: 50px;
   }
 
   & .icon_container--active {
     opacity: 1;
-    & :hover{
-      opacity: 1;
-    }
   }
 
   & .icon_container--inactive {
     opacity: .4;
   }
+
   & .icon_container--inactive:hover{
     opacity: .7;
   }
+
+  & .side-nav_border--active {
+    border-left: 4px solid var(--white);
+    height: 75%;
+    left: 0;
+    position: absolute;
+  }
 }