m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Refactor app-header css, including box shadow and z-index

Browse Source
This commit is contained in:
sdtsui 2017-08-06 18:50:23 -07:00
parent 403d9c52b5
commit a7017b824d
4 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/app/app.js
View File

@ -172,25 +172,11 @@ App.prototype.renderAppBar = function () {
}, [ }, [
h('.app-header.flex-row.flex-space-between', { h('.app-header.flex-row.flex-space-between', {
style: { style: {},
alignItems: 'center',
visibility: props.isUnlocked ? 'visible' : 'none',
background: '#EFEFEF', // $gallery
paddingTop: '1.5vh',
height: '12vh',
maxHeight: '60px',
position: 'relative',
zIndex: 12,
},
}, [ }, [
h('div.left-menu-section', { h('div.left-menu-wrapper', {
style: { style: {},
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: '1.8em',
},
}, [ }, [
// mini logo // mini logo
h('img', { h('img', {
@ -209,13 +195,8 @@ App.prototype.renderAppBar = function () {
]), ]),
h('div', { h('div.network-component-wrapper', {
style: { style: {},
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: '1.8em',
},
}, [ }, [
// Network Indicator // Network Indicator
h(NetworkIndicator, { h(NetworkIndicator, {

2
ui/app/components/network.js
View File

@ -60,7 +60,7 @@ Network.prototype.render = function () {
} }
return ( return (
h('#network_component.pointer', { h('.network-component.pointer', {
title: hoverText, title: hoverText,
onClick: (event) => this.props.onClick(event), onClick: (event) => this.props.onClick(event),
}, [ }, [

36
ui/app/css/itcss/components/header.scss
View File

@ -1,6 +1,22 @@
.app-header { .app-header {
align-items: center;
visibility: visible;
background: rgb(239, 239, 239);
padding-top: 1.5vh;
height: 12vh;
max-height: 60px;
position: relative;
z-index: 12;
padding: 6px 8px; padding: 6px 8px;
// background: #EFEFEF; // $gallery // background: #EFEFEF; // $gallery
@media screen and (max-width: 575px) {
position: fixed;
height: 34px;
width: 100%;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08);
z-index: 30;
}
} }
.app-header h1 { .app-header h1 {
@ -16,3 +32,23 @@ h2.page-subtitle {
font-size: 1em; font-size: 1em;
margin: 12px; margin: 12px;
} }
.network-component-wrapper {
display: flex;
flex-direction: row;
align-items: center;
@media screen and (min-width: 576px) {
margin-bottom: 1.8em;
}
}
.left-menu-wrapper {
display: flex;
flex-direction: row;
align-items: center;
@media screen and (min-width: 576px) {
margin-bottom: 1.8em;
}
}

6
ui/app/css/itcss/components/newui-sections.scss
View File

@ -2,10 +2,10 @@
NewUI Container Elements NewUI Container Elements
*/ */
// Main container
.main-container { .main-container {
position: absolute; position: absolute;
z-index: 18; z-index: 18;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
font-family: DIN OT; font-family: DIN OT;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -56,6 +56,7 @@
margin-top: 35px; margin-top: 35px;
width: 85%; width: 85%;
height: 90vh; height: 90vh;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
} }
} }
@ -64,6 +65,7 @@
margin-top: 35px; margin-top: 35px;
width: 80%; width: 80%;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
} }
} }
@ -72,6 +74,7 @@
margin-top: 35px; margin-top: 35px;
width: 65%; width: 65%;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
} }
} }
@ -86,7 +89,6 @@
.main-container { .main-container {
margin-top: 35px; margin-top: 35px;
// position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }