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
123 lines
2.0 KiB
SCSS
123 lines
2.0 KiB
SCSS
.main-quote-summary {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
max-height: 196px;
|
|
min-height: 196px;
|
|
width: 100%;
|
|
color: $Black-100;
|
|
|
|
&__source-row,
|
|
&__destination-row {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
@include H6;
|
|
|
|
color: $Grey-500;
|
|
}
|
|
|
|
&__source-row {
|
|
align-items: center;
|
|
}
|
|
|
|
&__source-row-value,
|
|
&__source-row-symbol {
|
|
// Each of these spans can be half their container width minus the space
|
|
// needed for the token icon and the span margins
|
|
max-width: calc(50% - 13px);
|
|
}
|
|
|
|
|
|
&__source-row-value {
|
|
margin-right: 5px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__source-row-symbol {
|
|
margin-left: 5px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__destination-row {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
&__destination-row-symbol {
|
|
margin-left: 5px;
|
|
color: $Black-100;
|
|
}
|
|
|
|
&__icon,
|
|
&__icon-fallback {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
&__icon-fallback {
|
|
padding-top: 0;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
&__down-arrow {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
&__details {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
width: 310px;
|
|
position: relative;
|
|
}
|
|
|
|
&__quote-details-top {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
&__quote-large {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-top: 8px;
|
|
height: 50px;
|
|
}
|
|
|
|
&__quote-large-number {
|
|
font-size: 60px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
&__quote-large-white {
|
|
font-size: 40px;
|
|
text-overflow: ellipsis;
|
|
width: 295px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__exchange-rate-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 287px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
&__exchange-rate-display {
|
|
color: $Grey-500;
|
|
}
|
|
}
|