MyCrypto/common/components/ui/SwapDropdown.scss
James Prado c631f45ab7 Improve Gas Price UX (Part 2) (#850)
* Remove gas dropdown & Add gas sliders

* Update styles

* Revert changes made to requestpayment.tsx

* Update style & add custom labels to GasLimitField

* Update styles

* Update confirm transaction modal

* Revert "Update confirm transaction modal"

This reverts commit 743c9a505fe070feb55f7af550ad918a3d8899d1.

* Add transaction fee to tx confirmation modal

* Update styles

* Remove old gasPriceDropdown files & use network units in tx fee

* Add option to lock gaslimit data

* fix tslint errors

* Rename lockData to readOnly

* Add option to check if validAmount before generating transaction

* Add nonce field if gas slider is readonly

* Automatically set nonce in  <Send/>

* Update snapshot

* Move getNonceRequested to GasSlider component

* Add optional to check value for isValidAmount selector

* Add selector for transaction fee

* Update GasSlider component & Rename to Gas

* update snapshots

* Fix subtabs className

* Update styles

* Remove dataField on contract interact

* rename <Gas/> to <TXMetaDataPanel/>
2018-01-24 21:43:27 -06:00

115 lines
1.9 KiB
SCSS

@import 'common/sass/variables';
.SwapDropdown {
position: relative;
button {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border: 1px solid #ccc;
padding: 0.4rem 1rem;
border-radius: 2px;
height: 2.5rem;
&:focus {
outline: none;
}
&:active,
&:hover {
opacity: 0.8;
}
> li {
margin: 0;
&:first-child {
padding-top: 4px;
}
&:last-child {
padding-bottom: 4px;
}
> a {
font-weight: 300;
&.active {
color: $link-color;
}
}
}
}
}
.SwapDropdown-grid {
position: absolute;
display: none;
padding: 0;
margin-bottom: 0;
min-width: 500px;
left: 50%;
top: 50px;
transform: translateX(-50%);
list-style: none;
font-size: 0.8rem;
text-align: left;
z-index: 500;
background: white;
box-shadow: 2px 1px 60px rgba(0, 0, 0, 0.175);
&::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #fff;
}
&.open {
display: block;
}
li {
display: inline-block;
width: 33.3%;
margin-bottom: 0;
}
li > a {
display: block;
clear: both;
padding: 5px 20px;
color: #163151;
&:hover {
opacity: 0.8;
background-color: #163151;
color: #fff;
}
}
.inactive {
a {
color: grey;
&:hover {
background-color: #fff;
color: #163151;
cursor: not-allowed;
}
}
img {
filter: grayscale(100%);
}
}
strong {
margin-left: 5px;
}
@media screen and (max-width: 800px) {
min-width: 300px;
}
}
.SwapDropdown-desc {
display: inline-block;
}
.SwapDropdown-item {
position: relative;
img {
padding-right: 1px;
}
}