Header style changes
This commit is contained in:
parent
419b4010d1
commit
88f8909fcc
3
build/img/Menu.svg
Normal file
3
build/img/Menu.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
|
||||||
|
<path fill="#fff" d="M 10.993,9 H 19 C 19.415,9 19.758,8.275 19.758,7.446 19.758,6.617 19.415,6 19,6 H 10.993 C 10.578,6 10.249,6.617 10.249,7.446 10.249,8.275 10.57,9 10.99,9 z M 19,14 h -8.007 c -0.415,0 -0.744,0.625 -0.744,1.454 0,0.829 0.33,1.5 0.75,1.5 h 8 c 0.41,0 0.75,-0.67 0.75,-1.5 C 19.749,14.624 19.41,14 19,14 z m 0,8 h -8.007 c -0.415,0 -0.744,0.633 -0.744,1.462 0,0.829 0.321,1.538 0.741,1.538 H 19 c 0.415,0 0.758,-0.71 0.758,-1.538 C 19.758,22.634 19.415,22 19,22 z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 579 B |
@ -1,14 +1,3 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
|
||||||
<svg width="19px" height="27px" viewBox="0 0 19 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
<path fill="#fff" d="m 24.98,21.794 -3.973,-4.248 c 0.788,-1.312 1.25,-2.847 1.25,-4.495 0,-4.79 -3.836,-8.67 -8.568,-8.67 -4.732,0 -8.57,3.88 -8.57,8.67 0,4.8 3.83,8.68 8.57,8.68 1.61,0 3.12,-0.46 4.41,-1.25 l 4.212,4.014 c 0.372,0.378 1.27,0.08 2.004,-0.66 0.734,-0.74 1.03,-1.654 0.654,-2.032 z M 13.69,19.31 c -3.414,0 -6.182,-2.803 -6.182,-6.26 0,-3.457 2.768,-6.258 6.182,-6.258 3.414,0 6.18,2.802 6.18,6.26 0,3.455 -2.766,6.258 -6.18,6.258 z"/>
|
||||||
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>Search</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<defs></defs>
|
|
||||||
<g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
|
||||||
<g id="Header" sketch:type="MSArtboardGroup" transform="translate(-327.000000, -12.000000)" fill="#FAFAFA">
|
|
||||||
<g id="Search" sketch:type="MSLayerGroup" transform="translate(327.000000, 12.000000)">
|
|
||||||
<path d="M9.4369836,17.9549819 C13.9937934,17.9549819 17.6878176,14.2609577 17.6878176,9.70414786 C17.6878176,5.14733806 13.9937934,1.45331385 9.4369836,1.45331385 C4.8801738,1.45331385 1.18614959,5.14733806 1.18614959,9.70414786 C1.18614959,14.2609577 4.8801738,17.9549819 9.4369836,17.9549819 L9.4369836,17.9549819 L9.4369836,17.9549819 Z M9.4369836,14.9549819 C6.53702805,14.9549819 4.18614959,12.6041034 4.18614959,9.70414786 C4.18614959,6.80419231 6.53702805,4.45331385 9.4369836,4.45331385 C12.3369391,4.45331385 14.6878176,6.80419231 14.6878176,9.70414786 C14.6878176,12.6041034 12.3369391,14.9549819 9.4369836,14.9549819 Z M8.55898442,17.9088177 L6.03959979,24.4720391 C5.64616063,25.4969831 4.50444038,26.0120308 3.47355444,25.6163108 C2.44980588,25.2233305 1.93924273,24.0728244 2.33227833,23.0489317 L4.82760148,16.5483926 C5.91506785,17.2822068 7.18685775,17.7636774 8.55898442,17.9088177 L8.55898442,17.9088177 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 545 B |
@ -3,9 +3,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Hawk</title>
|
<title>Hawk</title>
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
|
||||||
|
<meta name="theme-color" content="#39393A"/>
|
||||||
<link rel='stylesheet' href='style.css' />
|
<link rel='stylesheet' href='style.css'/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
@ -30781,15 +30781,27 @@ var Header = (function (_Component) {
|
|||||||
var i = undefined;
|
var i = undefined;
|
||||||
|
|
||||||
if (this.props.search) {
|
if (this.props.search) {
|
||||||
i = _react2['default'].createElement('i', { className: 'icon-cross', onClick: (0, _store.bind)((0, _actionsFilesView.search)()) });
|
i = _react2['default'].createElement(
|
||||||
|
'button',
|
||||||
|
{ onClick: (0, _store.bind)((0, _actionsFilesView.search)()) },
|
||||||
|
_react2['default'].createElement('i', { className: 'icon-cross' })
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
i = _react2['default'].createElement('i', { className: 'icon-search tour-item', onClick: (0, _store.bind)((0, _actionsDialog.show)('searchDialog')) });
|
i = _react2['default'].createElement(
|
||||||
|
'button',
|
||||||
|
{ onClick: (0, _store.bind)((0, _actionsDialog.show)('searchDialog')) },
|
||||||
|
_react2['default'].createElement('i', { className: 'icon-search tour-item' })
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return _react2['default'].createElement(
|
return _react2['default'].createElement(
|
||||||
'header',
|
'header',
|
||||||
null,
|
null,
|
||||||
_react2['default'].createElement('button', { className: 'drawer tour-item', onTouchStart: (0, _store.bind)((0, _actionsNavigation.toggle)()) }),
|
_react2['default'].createElement(
|
||||||
|
'button',
|
||||||
|
{ className: 'drawer tour-item', onTouchStart: (0, _store.bind)((0, _actionsNavigation.toggle)()) },
|
||||||
|
_react2['default'].createElement('i', { className: 'icon-menu' })
|
||||||
|
),
|
||||||
_react2['default'].createElement(
|
_react2['default'].createElement(
|
||||||
'h1',
|
'h1',
|
||||||
{ className: 'regular-medium' },
|
{ className: 'regular-medium' },
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
.icon {
|
.icon {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.icon-menu {
|
||||||
|
display: block;
|
||||||
|
background: url(/img/Menu.svg) no-repeat;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
.icon-directory {
|
.icon-directory {
|
||||||
display: block;
|
display: block;
|
||||||
background: url(/img/Directory.svg) no-repeat;
|
background: url(/img/Directory.svg) no-repeat;
|
||||||
@ -46,8 +52,8 @@
|
|||||||
.icon-search {
|
.icon-search {
|
||||||
display: block;
|
display: block;
|
||||||
background: url(/img/Search.svg) no-repeat;
|
background: url(/img/Search.svg) no-repeat;
|
||||||
width: 19px;
|
width: 30px;
|
||||||
height: 27px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
.icon-cross {
|
.icon-cross {
|
||||||
display: block;
|
display: block;
|
||||||
@ -368,29 +374,22 @@ header {
|
|||||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
header h1 {
|
header h1 {
|
||||||
margin-left: -3rem;
|
font-size: 2.3rem;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
header i {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
header button {
|
header button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 8rem;
|
width: 5rem;
|
||||||
height: 3rem;
|
height: 5rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
margin-top: -1rem;
|
margin-top: -1rem;
|
||||||
}
|
}
|
||||||
header button::before {
|
header button i {
|
||||||
content: '';
|
padding: 2rem;
|
||||||
display: block;
|
background-position: center;
|
||||||
width: 2rem;
|
|
||||||
height: 4px;
|
|
||||||
margin-top: -9px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #9b9b93;
|
|
||||||
box-shadow: 0 7px 0 #9b9b93, 0 14px 0 #9b9b93;
|
|
||||||
}
|
}
|
||||||
.menu {
|
.menu {
|
||||||
width: 24.5rem;
|
width: 24.5rem;
|
||||||
|
BIN
design/.DS_Store
vendored
Normal file
BIN
design/.DS_Store
vendored
Normal file
Binary file not shown.
3
src/img/Menu.svg
Normal file
3
src/img/Menu.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
|
||||||
|
<path fill="#fff" d="M 10.993,9 H 19 C 19.415,9 19.758,8.275 19.758,7.446 19.758,6.617 19.415,6 19,6 H 10.993 C 10.578,6 10.249,6.617 10.249,7.446 10.249,8.275 10.57,9 10.99,9 z M 19,14 h -8.007 c -0.415,0 -0.744,0.625 -0.744,1.454 0,0.829 0.33,1.5 0.75,1.5 h 8 c 0.41,0 0.75,-0.67 0.75,-1.5 C 19.749,14.624 19.41,14 19,14 z m 0,8 h -8.007 c -0.415,0 -0.744,0.633 -0.744,1.462 0,0.829 0.321,1.538 0.741,1.538 H 19 c 0.415,0 0.758,-0.71 0.758,-1.538 C 19.758,22.634 19.415,22 19,22 z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 579 B |
@ -1,14 +1,3 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
|
||||||
<svg width="19px" height="27px" viewBox="0 0 19 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
<path fill="#fff" d="m 24.98,21.794 -3.973,-4.248 c 0.788,-1.312 1.25,-2.847 1.25,-4.495 0,-4.79 -3.836,-8.67 -8.568,-8.67 -4.732,0 -8.57,3.88 -8.57,8.67 0,4.8 3.83,8.68 8.57,8.68 1.61,0 3.12,-0.46 4.41,-1.25 l 4.212,4.014 c 0.372,0.378 1.27,0.08 2.004,-0.66 0.734,-0.74 1.03,-1.654 0.654,-2.032 z M 13.69,19.31 c -3.414,0 -6.182,-2.803 -6.182,-6.26 0,-3.457 2.768,-6.258 6.182,-6.258 3.414,0 6.18,2.802 6.18,6.26 0,3.455 -2.766,6.258 -6.18,6.258 z"/>
|
||||||
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>Search</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<defs></defs>
|
|
||||||
<g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
|
||||||
<g id="Header" sketch:type="MSArtboardGroup" transform="translate(-327.000000, -12.000000)" fill="#FAFAFA">
|
|
||||||
<g id="Search" sketch:type="MSLayerGroup" transform="translate(327.000000, 12.000000)">
|
|
||||||
<path d="M9.4369836,17.9549819 C13.9937934,17.9549819 17.6878176,14.2609577 17.6878176,9.70414786 C17.6878176,5.14733806 13.9937934,1.45331385 9.4369836,1.45331385 C4.8801738,1.45331385 1.18614959,5.14733806 1.18614959,9.70414786 C1.18614959,14.2609577 4.8801738,17.9549819 9.4369836,17.9549819 L9.4369836,17.9549819 L9.4369836,17.9549819 Z M9.4369836,14.9549819 C6.53702805,14.9549819 4.18614959,12.6041034 4.18614959,9.70414786 C4.18614959,6.80419231 6.53702805,4.45331385 9.4369836,4.45331385 C12.3369391,4.45331385 14.6878176,6.80419231 14.6878176,9.70414786 C14.6878176,12.6041034 12.3369391,14.9549819 9.4369836,14.9549819 Z M8.55898442,17.9088177 L6.03959979,24.4720391 C5.64616063,25.4969831 4.50444038,26.0120308 3.47355444,25.6163108 C2.44980588,25.2233305 1.93924273,24.0728244 2.33227833,23.0489317 L4.82760148,16.5483926 C5.91506785,17.2822068 7.18685775,17.7636774 8.55898442,17.9088177 L8.55898442,17.9088177 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 545 B |
@ -3,9 +3,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Hawk</title>
|
<title>Hawk</title>
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
|
||||||
|
<meta name="theme-color" content="#39393A"/>
|
||||||
<link rel='stylesheet' href='style.css' />
|
<link rel='stylesheet' href='style.css'/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
@ -11,14 +11,16 @@ export default class Header extends Component {
|
|||||||
let i;
|
let i;
|
||||||
|
|
||||||
if (this.props.search) {
|
if (this.props.search) {
|
||||||
i = <i className='icon-cross' onClick={bind(search())} />
|
i = <button onClick={bind(search())}><i className='icon-cross' /></button>
|
||||||
} else {
|
} else {
|
||||||
i = <i className='icon-search tour-item' onClick={bind(show('searchDialog'))} />
|
i = <button onClick={bind(show('searchDialog'))}><i className='icon-search tour-item' /></button>
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header>
|
<header>
|
||||||
<button className='drawer tour-item' onTouchStart={bind(toggle())} />
|
<button className='drawer tour-item' onTouchStart={bind(toggle())}>
|
||||||
|
<i className='icon-menu'></i>
|
||||||
|
</button>
|
||||||
<h1 className='regular-medium'>Hawk</h1>
|
<h1 className='regular-medium'>Hawk</h1>
|
||||||
|
|
||||||
{i}
|
{i}
|
||||||
|
@ -14,39 +14,25 @@ header {
|
|||||||
.shadow;
|
.shadow;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-left: -3rem;
|
font-size: 2.3rem;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
width: 8rem;
|
width: 5rem;
|
||||||
height: 3rem;
|
height: 5rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
margin-top: -1rem;
|
margin-top: -1rem;
|
||||||
|
|
||||||
&::before {
|
i {
|
||||||
content: '';
|
padding: 2rem;
|
||||||
display: block;
|
background-position: center;
|
||||||
|
|
||||||
width: 2rem;
|
|
||||||
height: 4px;
|
|
||||||
|
|
||||||
margin-top: -9px;
|
|
||||||
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
background: @overlay;
|
|
||||||
|
|
||||||
box-shadow: 0 7px 0 @overlay,
|
|
||||||
0 14px 0 @overlay;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,12 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-menu {
|
||||||
|
.icon;
|
||||||
|
background: url(/img/Menu.svg) no-repeat;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
.icon-directory {
|
.icon-directory {
|
||||||
.icon;
|
.icon;
|
||||||
background: url(/img/Directory.svg) no-repeat;
|
background: url(/img/Directory.svg) no-repeat;
|
||||||
@ -54,8 +60,8 @@
|
|||||||
.icon-search {
|
.icon-search {
|
||||||
.icon;
|
.icon;
|
||||||
background: url(/img/Search.svg) no-repeat;
|
background: url(/img/Search.svg) no-repeat;
|
||||||
width: 19px;
|
width: 30px;
|
||||||
height: 27px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-cross {
|
.icon-cross {
|
||||||
|
Loading…
Reference in New Issue
Block a user