feat(menu): styling for vertical menu (#152)

* feat(menu): styles for vertical nav menu
Tripwire · Jan 25, 2018 · 5ae64ef · 5ae64ef
1 parent f366117
commit 5ae64ef
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 0 deletions.
diff --git a/snaps/ref/Menu-vertical-nav-menu-chrome.png b/snaps/ref/Menu-vertical-nav-menu-chrome.png
diff --git a/snaps/ref/Menu-vertical-nav-menu-ou-chrome.png b/snaps/ref/Menu-vertical-nav-menu-ou-chrome.png
diff --git a/src/components/suir/menu/Menu.examples.md b/src/components/suir/menu/Menu.examples.md
@@ -1,4 +1,5 @@
 #### Menu
+```js
     const Menu = require('semantic-ui-react').Menu;
     const Segment = require('semantic-ui-react').Segment;
     <div>
@@ -11,3 +12,30 @@
         <img src='http://semantic-ui.com/images/wireframe/paragraph.png' />
       </Segment>
     </div>
+```
+
+#### Vertical Nav Menu
+```js
+    const Menu = require('semantic-ui-react').Menu;
+    const Segment = require('semantic-ui-react').Segment;
+    <div style={{width: '180px'}}>
+      <Menu vertical className='nav'>
+        <Menu.Item name='About' active />
+        <Menu.Item name='Change Password' />
+        <Menu.Item name='Updates' />
+      </Menu>
+    </div>
+```
+
+#### Vertical Nav Menu (outlier text)
+```js
+    const Menu = require('semantic-ui-react').Menu;
+    const Segment = require('semantic-ui-react').Segment;
+    <div style={{width: '180px'}}>
+      <Menu vertical className='nav'>
+        <Menu.Item name='Change System Password' active />
+        <Menu.Item name='Alongwordisbrokentofitproperly' />
+        <Menu.Item name='camelCaseIsProperlyHandled' />
+      </Menu>
+    </div>
+```
diff --git a/src/semantic-ui-theme/themes/tripwire/collections/menu.overrides b/src/semantic-ui-theme/themes/tripwire/collections/menu.overrides
@@ -1,3 +1,60 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+@menuBorderColor: #d8d8d8;
+@menuTextColor: #454545;
+@menuItemBackgroundColor: #f5f5f5;
+@ElegantIconArrowCarrotRight: '5';
+
+.ui.vertical.nav.menu {
+  border: 0;
+  padding: 0;
+  width: 100%;
+  list-style: none;
+  box-shadow: none;
+  font-size: 16px;
+  .item {
+    position: relative;
+		display: block;
+    border: 1px solid @menuBorderColor;
+    box-shadow: none;
+    padding: 1em;
+    color: @menuTextColor;
+    word-wrap: break-word;
+    cursor: pointer;
+    &.active {
+      background-color: @menuItemBackgroundColor;
+      font-weight: bold;
+      padding-right: 2em;
+      &:after {
+        content: @ElegantIconArrowCarrotRight;
+        color: @primaryColor;
+        font-family: 'ElegantIcons';
+        font-size: 24px;
+        font-weight: bolder;
+        position: absolute;
+        right: .25em;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+    &:before {
+      height: 0px;
+    }
+    &:hover {
+      background-color: @menuItemBackgroundColor;
+      color: @menuTextColor;
+    }
+
+  }
+  .item:first-child {
+    border-bottom: 0;
+    border-radius: 0 !important;
+  }
+
+  .item:last-child {
+    border-top: 0;
+    border-radius: 0 !important;
+  }
+}