From 5ae64efd52ff9ffe3dd310a5aa1cbbec3f4f86da Mon Sep 17 00:00:00 2001 From: Andrew Leyva Date: Thu, 25 Jan 2018 09:57:59 -0800 Subject: [PATCH] feat(menu): styling for vertical menu (#152) * feat(menu): styles for vertical nav menu --- snaps/ref/Menu-vertical-nav-menu-chrome.png | Bin 0 -> 6925 bytes .../ref/Menu-vertical-nav-menu-ou-chrome.png | Bin 0 -> 14734 bytes src/components/suir/menu/Menu.examples.md | 28 +++++++++ .../tripwire/collections/menu.overrides | 57 ++++++++++++++++++ 4 files changed, 85 insertions(+) create mode 100644 snaps/ref/Menu-vertical-nav-menu-chrome.png create mode 100644 snaps/ref/Menu-vertical-nav-menu-ou-chrome.png diff --git a/snaps/ref/Menu-vertical-nav-menu-chrome.png b/snaps/ref/Menu-vertical-nav-menu-chrome.png new file mode 100644 index 0000000000000000000000000000000000000000..485921a836c0793928bd1ed267a98d7c60f46ff8 GIT binary patch literal 6925 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 Yw3PkaGXm8z2X2g@RCQE}ZrMEi4~h*P8~^|S literal 0 HcmV?d00001 diff --git a/snaps/ref/Menu-vertical-nav-menu-ou-chrome.png b/snaps/ref/Menu-vertical-nav-menu-ou-chrome.png new file mode 100644 index 0000000000000000000000000000000000000000..646dc9d1957fc788841b9288033adfc512177509 GIT binary patch literal 14734 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 @@ -11,3 +12,30 @@ +``` + +#### Vertical Nav Menu +```js + const Menu = require('semantic-ui-react').Menu; + const Segment = require('semantic-ui-react').Segment; +
+ + + + + +
+``` + +#### Vertical Nav Menu (outlier text) +```js + const Menu = require('semantic-ui-react').Menu; + const Segment = require('semantic-ui-react').Segment; +
+ + + + + +
+``` diff --git a/src/semantic-ui-theme/themes/tripwire/collections/menu.overrides b/src/semantic-ui-theme/themes/tripwire/collections/menu.overrides index 14fb0da..67561bd 100644 --- 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; + } +}