mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-28 05:12:18 +01:00
d9924ca771
* Update fee card designs to show savings and MM fee
css touch up
More semantic html and remove unnecessary container wrapper
Update message for case when there are no savings, in new swaps fee card designs
Improve display of tilde in savings designs
* Ensure terms of service is shown when insufficient eth warning is shown on view-quote screen
* Logic simplification in fee-card.js
* Better center info tooltip icons in fee-card
* Add comment about use of \!important in fee card css
* Use container class property on info tooltip in fee card
* Remove function call that was made redundant with 980b14089 but not removed during rebase
150 lines
2.5 KiB
SCSS
150 lines
2.5 KiB
SCSS
.view-quote {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
width: 100%;
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
justify-content: space-between;
|
|
|
|
@media screen and (max-width: 576px) {
|
|
overflow-y: auto;
|
|
max-height: 388px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 576px) {
|
|
width: 348px;
|
|
}
|
|
|
|
&__new-quote-countdown {
|
|
@include H7;
|
|
|
|
font-weight: bold;
|
|
|
|
&--danger {
|
|
span {
|
|
color: $Red-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__view-other-button-container {
|
|
border-radius: 28px;
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 46px;
|
|
}
|
|
|
|
&__view-other-button,
|
|
&__view-other-button-fade {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
|
|
@include H7;
|
|
|
|
color: white;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
border-radius: 28px;
|
|
padding: 5px 18px;
|
|
background: linear-gradient(90deg, $Blue-500 0%, $Blue-400 101.32%);
|
|
|
|
|
|
@media screen and (min-width: 576px) {
|
|
@include H6;
|
|
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.fa-arrow-right {
|
|
margin-left: 4px;
|
|
font-size: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
&__view-other-button-fade {
|
|
background: #0372c3;
|
|
opacity: 0;
|
|
transition: opacity ease-in-out 1s;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
};
|
|
}
|
|
|
|
&__insufficient-eth-warning-wrapper {
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: intrinsic; /* Safari/WebKit uses a non-standard name */
|
|
width: max-content;
|
|
max-width: 340px;
|
|
|
|
@media screen and (min-width: 576px) {
|
|
min-height: 36px;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
&__bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__countdown-timer-container {
|
|
width: 152px;
|
|
min-height: 32px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 42px;
|
|
background: #f2f3f4;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
&__fee-card-container {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 172px;
|
|
width: 100%;
|
|
max-width: 311px;
|
|
margin-bottom: 8px;
|
|
|
|
@media screen and (min-width: 576px) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__metamask-rate {
|
|
display: flex;
|
|
}
|
|
|
|
&__metamask-rate-text {
|
|
@include H7;
|
|
|
|
color: $Grey-500;
|
|
}
|
|
|
|
&__metamask-rate-info-icon {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
&__thin-swaps-footer {
|
|
@media screen and (min-width: 576px) {
|
|
height: 72px;
|
|
}
|
|
}
|
|
}
|