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

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

@ -14,19 +14,15 @@ NetworkDropdownIcon.prototype.render = function () {
const {
backgroundColor,
isSelected,
innerBorder,
nonSelectBackgroundColor
innerBorder = 'none',
} = this.props
return h('.menu-icon-circle-select', {
return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
h('div', {
style: {
border: isSelected && '1px solid white',
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', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2',
isSelected: providerType === 'mainnet',
}),
h('span.network-name-item', {
@ -131,7 +130,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
isSelected: providerType === 'ropsten',
}),
h('span.network-name-item', {
@ -154,7 +152,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
isSelected: providerType === 'kovan',
}),
h('span.network-name-item', {
@ -177,7 +174,6 @@ NetworkDropdown.prototype.render = function () {
providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
isSelected: providerType === 'rinkeby',
}),
h('span.network-name-item', {

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

@ -44,13 +44,7 @@
opacity: 0;
}
.menu-icon-circle {
height: 17px;
width: 17px;
border-radius: 17px;
}
.menu-icon-circle-select {
.menu-icon-circle, .menu-icon-circle--active {
height: 23px;
width: 23px;
margin: 9px;
@ -59,6 +53,24 @@
display: flex;
justify-content: 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 {