Tweaks to the header changes

This commit is contained in:
Tim Nguyen 2015-10-03 18:58:44 +02:00
parent 5c5305d243
commit be8ae4f0b9
7 changed files with 17 additions and 16 deletions

3
build/img/Close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
<path fill="#fff" d="m 17.402,14.33 4.023,-4.022 C 21.117,9.142 20.695,8.076 20.185,7.132 L 14.515,12.8 8.83,7.115 C 8.32,8.057 7.895,9.121 7.586,10.285 l 4.044,4.046 c 0.006,0.01 0.015,0.02 0.02,0.02 0.33,0.33 0.34,0.86 0.033,1.2 l 0.003,0.01 -4.1,4.1 c 0.31,1.166 0.734,2.228 1.244,3.168 l 5.686,-5.685 5.668,5.668 c 0.51,-0.94 0.933,-2.004 1.24,-3.17 l -4.08,-4.076 0.005,-0.004 c -0.31,-0.343 -0.3,-0.87 0.03,-1.2 l 0.02,-0.017 z"/>
</svg>

After

Width:  |  Height:  |  Size: 510 B

View File

@ -30812,7 +30812,7 @@ var Header = (function (_Component) {
), ),
_react2['default'].createElement( _react2['default'].createElement(
'h1', 'h1',
{ className: 'regular-medium' }, null,
'Hawk' 'Hawk'
), ),
i i

View File

@ -57,13 +57,9 @@
} }
.icon-cross { .icon-cross {
display: block; display: block;
background: url(/img/Plus.svg) no-repeat; background: url(/img/Close.svg) no-repeat;
width: 24px; width: 30px;
height: 24px; height: 30px;
transform: rotate(45deg);
}
.icon-cross svg * {
fill: white;
} }
.icon-back { .icon-back {
display: block; display: block;
@ -369,6 +365,7 @@ header {
header h1 { header h1 {
font-size: 2.3rem; font-size: 2.3rem;
font-style: italic; font-style: italic;
font-weight: 300;
text-align: center; text-align: center;
flex: 1; flex: 1;
} }
@ -381,7 +378,6 @@ header button {
margin-top: -1rem; margin-top: -1rem;
} }
header button i { header button i {
padding: 2rem;
background-position: center; background-position: center;
} }
.menu { .menu {

3
src/img/Close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
<path fill="#fff" d="m 17.402,14.33 4.023,-4.022 C 21.117,9.142 20.695,8.076 20.185,7.132 L 14.515,12.8 8.83,7.115 C 8.32,8.057 7.895,9.121 7.586,10.285 l 4.044,4.046 c 0.006,0.01 0.015,0.02 0.02,0.02 0.33,0.33 0.34,0.86 0.033,1.2 l 0.003,0.01 -4.1,4.1 c 0.31,1.166 0.734,2.228 1.244,3.168 l 5.686,-5.685 5.668,5.668 c 0.51,-0.94 0.933,-2.004 1.24,-3.17 l -4.08,-4.076 0.005,-0.004 c -0.31,-0.343 -0.3,-0.87 0.03,-1.2 l 0.02,-0.017 z"/>
</svg>

After

Width:  |  Height:  |  Size: 510 B

View File

@ -21,7 +21,7 @@ export default class Header extends Component {
<button className='drawer tour-item' onTouchStart={bind(toggle())}> <button className='drawer tour-item' onTouchStart={bind(toggle())}>
<i className='icon-menu'></i> <i className='icon-menu'></i>
</button> </button>
<h1 className='regular-medium'>Hawk</h1> <h1>Hawk</h1>
{i} {i}
</header> </header>

View File

@ -16,6 +16,7 @@ header {
h1 { h1 {
font-size: 2.3rem; font-size: 2.3rem;
font-style: italic; font-style: italic;
font-weight: 300;
text-align: center; text-align: center;
flex: 1; flex: 1;
@ -31,7 +32,6 @@ header {
margin-top: -1rem; margin-top: -1rem;
i { i {
padding: 2rem;
background-position: center; background-position: center;
} }
} }

View File

@ -65,11 +65,10 @@
} }
.icon-cross { .icon-cross {
.icon-plus; .icon;
transform: rotate(45deg); background: url(/img/Close.svg) no-repeat;
svg * { width: 30px;
fill: white; height: 30px;
}
} }
.icon-back { .icon-back {