diff --git a/CHANGELOG.md b/CHANGELOG.md index 054a7124af..c3d8bb7f54 100644 --- a/CHANGELOG.md +++ b/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](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) diff --git a/src/components/Menu/menuItemRules.ts b/src/components/Menu/menuItemRules.ts index 05bf6a4403..b764669cb0 100644 --- a/src/components/Menu/menuItemRules.ts +++ b/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', + }), }), }), } diff --git a/src/components/Menu/menuRules.ts b/src/components/Menu/menuRules.ts index d6c87a23cd..80e71ce510 100644 --- a/src/components/Menu/menuRules.ts +++ b/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', diff --git a/src/components/Menu/menuVariables.ts b/src/components/Menu/menuVariables.ts index 379101c5d8..e1e823ce57 100644 --- a/src/components/Menu/menuVariables.ts +++ b/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, } }