require('autoprefixer'),
require('postcss-custom-properties')({
variables: require('../src/main/js/app/theme')
- })
+ }),
+ require('postcss-calc')
]
}
});
"html-webpack-plugin": "2.30.1",
"jest": "21.2.1",
"lint-staged": "4.3.0",
+ "postcss-calc": "6.0.1",
"postcss-custom-properties": "6.2.0",
"postcss-loader": "2.0.8",
"prettier": "1.7.4",
*/
import * as React from 'react';
import GlobalFooterContainer from './GlobalFooterContainer';
+import * as theme from '../theme';
import NavBar from '../../components/nav/NavBar';
interface Props {
return (
<div className="global-container">
<div className="page-wrapper" id="container">
- <NavBar className="navbar-global" height={30} />
+ <NavBar className="navbar-global" height={theme.globalNavHeightRaw} />
<div id="bd" className="page-wrapper-simple">
<div id="nonav" className="page-simple">
}
.navbar-brand {
- display: block;
- margin-left: -10px;
- padding-left: 10px;
- padding-right: 10px;
- border: none;
-}
-
-.navbar-brand:hover,
-.navbar-brand:focus {
- background-color: #000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: var(--globalNavHeight);
+ margin-left: calc(-1 * (var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+ padding-top: 4px;
+ padding-left: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+ padding-right: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+ border-bottom: 4px solid transparent;
}
.navbar-login {
}
.navbar-avatar {
- margin-right: -3px !important;
- padding: 3px !important;
+ margin-right: calc(-1 * (var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+ padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) !important;
+ border: none !important;
}
.navbar-help {
- line-height: 16px !important;
- padding: 7px !important;
+ height: var(--globalNavHeight);
+ padding: calc(var(--globalNavHeight) - var(--globalNavContentHeight)) 12px !important;
+ border-bottom: none !important;
color: #fff !important;
}
.global-navbar-menu {
display: flex;
align-items: center;
+ height: var(--globalNavHeight);
}
.global-navbar-menu > li > a {
display: block;
- padding: 8px 10px;
- line-height: 14px;
- border: none;
+ height: var(--globalNavHeight);
+ padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) 10px;
+ line-height: var(--globalNavContentHeight);
+ border-bottom: 4px solid transparent;
+ box-sizing: border-box;
color: #ccc;
font-size: var(--smallFontSize);
letter-spacing: 0.05em;
- transition: none;
}
+.navbar-brand:hover,
+.navbar-brand:focus,
.global-navbar-menu > li > a.active,
.global-navbar-menu > li > a:hover,
.global-navbar-menu > li > a:focus {
- background-color: var(--blue);
- color: #fff;
+ background-color: #020202;
+}
+
+.global-navbar-menu > li > a.active {
+ border-bottom-color: #646464;
}
@media print {
import GlobalNavUserContainer from './GlobalNavUserContainer';
import Search from '../../search/Search';
import GlobalHelp from '../../help/GlobalHelp';
+import * as theme from '../../../theme';
import NavBar from '../../../../components/nav/NavBar';
import Tooltip from '../../../../components/controls/Tooltip';
import HelpIcon from '../../../../components/icons-components/HelpIcon';
render() {
return (
- <NavBar className="navbar-global" id="global-navigation" height={30}>
+ <NavBar className="navbar-global" id="global-navigation" height={theme.globalNavHeightRaw}>
<GlobalNavBranding />
<GlobalNavMenu {...this.props} />
<ul className="global-navbar-menu pull-right">
- <Search appState={this.props.appState} currentUser={this.props.currentUser} />
+ <GlobalNavExplore location={this.props.location} onSonarCloud={this.props.onSonarCloud} />
<li>
<a className="navbar-help" onClick={this.handleHelpClick} href="#">
{this.state.onboardingTutorialTooltip ? (
)}
</a>
</li>
+ <Search appState={this.props.appState} currentUser={this.props.currentUser} />
<GlobalNavUserContainer {...this.props} />
</ul>
- <GlobalNavExplore location={this.props.location} onSonarCloud={this.props.onSonarCloud} />
-
{this.state.helpOpen && (
<GlobalHelp
currentUser={this.props.currentUser}
const active = location.pathname.startsWith('explore');
return (
- <ul className="global-navbar-menu spacer-right pull-right">
- <li>
- <Link to="/explore/projects" className={active ? 'active' : undefined}>
- {translate('explore')}
- </Link>
- </li>
- </ul>
+ <li>
+ <Link to="/explore/projects" className={active ? 'active' : undefined}>
+ {translate('explore')}
+ </Link>
+ </li>
);
}
import classNames from 'classnames';
import { sortBy } from 'lodash';
import { Link } from 'react-router';
+import * as theme from '../../../theme';
import Avatar from '../../../../components/ui/Avatar';
import OrganizationIcon from '../../../../components/icons-components/OrganizationIcon';
import OrganizationLink from '../../../../components/ui/OrganizationLink';
className={classNames('dropdown js-user-authenticated', { open: this.state.open })}
ref={node => (this.node = node)}>
<a className="dropdown-toggle navbar-avatar" href="#" onClick={this.toggleDropdown}>
- <Avatar hash={currentUser.avatar} name={currentUser.name} size={24} />
+ <Avatar
+ hash={currentUser.avatar}
+ name={currentUser.name}
+ size={theme.globalNavContentHeightRaw}
+ />
</a>
{this.state.open && (
<ul className="dropdown-menu dropdown-menu-right">
<Connect(Avatar)
hash="abcd1234"
name="foo"
- size={24}
+ size={32}
/>
</a>
<ul
<Connect(Avatar)
hash="abcd1234"
name="foo"
- size={24}
+ size={32}
/>
</a>
<ul
<Connect(Avatar)
hash="abcd1234"
name="foo"
- size={24}
+ size={32}
/>
</a>
<ul
<Connect(Avatar)
hash="abcd1234"
name="foo"
- size={24}
+ size={32}
/>
</a>
<ul
.navbar-search {
position: relative;
- padding-right: 3px;
+ padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) 0;
}
.navbar-search .search-box,
.navbar-search .search-box-input {
- width: 310px;
- max-width: none;
+ width: 26vw;
+ max-width: 310px;
+ min-width: 260px;
+ height: var(--globalNavContentHeight);
+}
+
+.navbar-search .search-box-input {
+ border-color: #fff;
+}
+
+.navbar-search .search-box-magnifier,
+.navbar-search .search-box-clear {
+ top: calc((var(--globalNavContentHeight) - 16px) / 2);
}
.navbar-search-input {
z-index: var(--aboveNormalZIndex);
vertical-align: middle;
width: 16px;
+ margin-left: 4px;
margin-right: -20px;
background-color: #fff;
color: var(--secondFontColor);
}
.global-navbar-search-dropdown {
- top: calc(100% + 3px) !important;
+ top: 100% !important;
max-height: 80vh;
width: 440px;
padding: 0 !important;
smallControlHeight: '20px',
tinyControlHeight: '16px',
+ globalNavHeight: '48px',
+ globalNavHeightRaw: 48,
+ globalNavContentHeight: '32px',
+ globalNavContentHeightRaw: 32,
+
// different
defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',
fastparse "^1.1.1"
regexpu-core "^1.0.0"
+css-unit-converter@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+
css-what@2.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+postcss-calc@6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-6.0.1.tgz#3d24171bbf6e7629d422a436ebfe6dd9511f4330"
+ dependencies:
+ css-unit-converter "^1.1.1"
+ postcss "^6.0.0"
+ postcss-selector-parser "^2.2.2"
+ reduce-css-calc "^2.0.0"
+
postcss-calc@^5.2.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
math-expression-evaluator "^1.2.14"
reduce-function-call "^1.0.1"
+reduce-css-calc@^2.0.0:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.3.tgz#63c4c6325ffbbf4ea6c23f1d4deb47c3953f3b81"
+ dependencies:
+ css-unit-converter "^1.1.1"
+ postcss-value-parser "^3.3.0"
+
reduce-function-call@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"