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

Cleaner css for circle icon.

Browse Source
This commit is contained in:
Dan 2017-09-07 21:17:07 -02:30 committed by Chi Kei Chan
parent 6beb1b33bb
commit 8342c20b58
3 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/app/components/dropdowns/components/network-dropdown-icon.js
View File

@ -14,19 +14,15 @@ NetworkDropdownIcon.prototype.render = function () {
const { const {
backgroundColor, backgroundColor,
isSelected, isSelected,
innerBorder, innerBorder = 'none',
nonSelectBackgroundColor
} = this.props } = this.props
return h('.menu-icon-circle-select', { return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
style: { h('div', {
border: isSelected && '1px solid white', style: {
background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none', background: backgroundColor,
}, border: innerBorder,
}, h('.menu-icon-circle', { },
style: { })
background: isSelected ? backgroundColor : nonSelectBackgroundColor, )
border: innerBorder ? innerBorder : 'none',
},
}))
} }

4
ui/app/components/dropdowns/network-dropdown.js
View File

@ -108,7 +108,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2',
isSelected: providerType === 'mainnet', isSelected: providerType === 'mainnet',
}), }),
h('span.network-name-item', { h('span.network-name-item', {
@ -131,7 +130,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
isSelected: providerType === 'ropsten', isSelected: providerType === 'ropsten',
}), }),
h('span.network-name-item', { h('span.network-name-item', {
@ -154,7 +152,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
isSelected: providerType === 'kovan', isSelected: providerType === 'kovan',
}), }),
h('span.network-name-item', { h('span.network-name-item', {
@ -177,7 +174,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
isSelected: providerType === 'rinkeby', isSelected: providerType === 'rinkeby',
}), }),
h('span.network-name-item', { h('span.network-name-item', {

26
ui/app/css/itcss/components/network.scss
View File

@ -44,13 +44,7 @@
opacity: 0; opacity: 0;
} }
.menu-icon-circle { .menu-icon-circle, .menu-icon-circle--active {
height: 17px;
width: 17px;
border-radius: 17px;
}
.menu-icon-circle-select {
height: 23px; height: 23px;
width: 23px; width: 23px;
margin: 9px; margin: 9px;
@ -59,6 +53,24 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none;
background: none;
}
.menu-icon-circle--active {
border: 1px solid white;
background: rgba(100, 100, 100, 0.4);
}
.menu-icon-circle div, .menu-icon-circle--active div {
height: 17px;
width: 17px;
border-radius: 17px;
opacity: 0.7;
}
.menu-icon-circle--active div {
opacity: 1;
} }
.network-dropdown-header { .network-dropdown-header {