feat(Menu): Update styling for *primary underlined* to match Teams style

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Update styles for Menu underlined primary @miroslavstastny ([#20](https://github.com/stardust-ui/react/pull/20))
+
 <!--------------------------------[ v0.2.5 ]------------------------------- -->
 ## [v0.2.5](https://github.com/stardust-ui/react/tree/v0.2.5) (2018-08-03)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.4...v0.2.5)

src/components/Menu/menuItemRules.ts

@@ -1,7 +1,7 @@
 import { pxToRem } from '../../lib'
 
 const underlinedItem = (color: string) => ({
-  borderBottom: `solid 5px ${color}`,
+  borderBottom: `solid 4px ${color}`,
   transition: 'color .1s ease',
 })
 
@@ -45,7 +45,11 @@ export default {
         borderRadius: pxToRem(5),
       }),
       ...(shape === 'underlined' && {
-        margin: '0',
+        padding: '0',
+        margin: `0 ${pxToRem(10)} 0 0`,
+        ':nth-child(n+2)': {
+          marginLeft: `${pxToRem(10)}`,
+        },
         background: 'transparent',
         boxShadow: 'none',
         color: variables.defaultColor,
@@ -112,12 +116,15 @@ export default {
         }),
         ...(shape === 'underlined' && {
           color: variables.defaultColor,
-          fontWeight: '700',
           ...underlinedItem(variables.defaultActiveColor),
-          ...(type === 'primary' && {
-            color: variables.typePrimaryActiveColor,
-            ...underlinedItem(variables.typePrimaryActiveColor),
-          }),
+          ...(type === 'primary'
+            ? {
+                color: variables.typePrimaryActiveColor,
+                ...underlinedItem(variables.typePrimaryActiveColor),
+              }
+            : {
+                fontWeight: '700',
+              }),
         }),
       }),
     }

src/components/Menu/menuRules.ts

@@ -22,9 +22,9 @@ export default {
           borderRadius: pxToRem(4),
         }),
       ...(shape === 'underlined' && {
-        borderBottom: `1px solid ${variables.defaultBorderColor}`,
+        borderBottom: `2px solid ${variables.typePrimaryUnderlinedBorderColor}`,
       }),
-      minHeight: pxToRem(28),
+      minHeight: pxToRem(24),
       margin: 0,
       padding: 0,
       listStyleType: 'none',

src/components/Menu/menuVariables.ts

@@ -10,6 +10,7 @@ export interface IMenuVariables {
   typePrimaryBackgroundColorHover: string
   typePrimaryBorderColor: string
   typePrimaryActiveBorderColor: string
+  typePrimaryUnderlinedBorderColor: string
 }
 
 export default (siteVars: any): IMenuVariables => {
@@ -25,5 +26,6 @@ export default (siteVars: any): IMenuVariables => {
     typePrimaryBackgroundColorHover: siteVars.brand16,
     typePrimaryBorderColor: siteVars.brand08,
     typePrimaryActiveBorderColor: siteVars.brand12,
+    typePrimaryUnderlinedBorderColor: siteVars.gray12,
   }
 }