1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/swaps/select-quote-popover/index.scss

257 lines
4.4 KiB
SCSS
Raw Normal View History

2020-10-06 20:28:38 +02:00
@import 'quote-details/index';
.select-quote-popover {
&__button {
height: 39px;
width: 140px;
}
&__popover-wrap {
height: 100%;
2022-08-04 16:03:02 +02:00
@include screen-sm-min {
2020-10-06 20:28:38 +02:00
height: 620px;
width: 348px;
}
.popover-content {
height: 100%;
padding-left: 8px;
padding-right: 8px;
}
.swaps__footer {
padding: 16px 24px;
}
}
&__popover-bg {
height: 100%;
width: 100%;
2022-03-17 19:04:01 +01:00
background: var(--color-background-alternative);
2020-10-06 20:28:38 +02:00
opacity: 1;
2022-08-04 16:03:02 +02:00
@include screen-sm-min {
2020-10-06 20:28:38 +02:00
opacity: 0.5;
}
}
&__sort-list {
display: flex;
flex-direction: column;
align-items: center;
}
&__column-headers,
&__row {
display: flex;
2020-10-06 20:28:38 +02:00
align-items: center;
padding-left: 20px;
width: 100%;
> * + * {
margin-left: 8px;
}
2020-10-06 20:28:38 +02:00
}
&__column-headers {
@include H8;
font-weight: bold;
2022-03-17 19:04:01 +01:00
color: var(--color-text-default);
2020-10-06 20:28:38 +02:00
height: 43px;
margin-bottom: 4px;
}
&__column-header {
cursor: pointer;
font-size: 12px;
}
&__row {
@include H6;
cursor: pointer;
color: var(--color-text-default);
2020-10-06 20:28:38 +02:00
height: 49px;
border: 1px solid transparent;
2020-10-06 20:28:38 +02:00
margin-bottom: 8px;
border-radius: 8px;
background: var(--color-background-alternative);
2020-10-06 20:28:38 +02:00
padding-right: 12px;
&:hover {
2022-03-17 19:04:01 +01:00
border: 1px solid var(--color-primary-default);
2020-10-06 20:28:38 +02:00
padding-right: 11px;
padding-left: 19.5px;
}
&--no-hover {
&:hover {
2022-03-17 19:04:01 +01:00
border: 1px solid var(--color-background-alternative);
2020-10-06 20:28:38 +02:00
width: 100%;
padding-right: 12px;
padding-left: 20px;
}
}
&--selected {
color: var(--color-primary-inverse);
background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
2020-10-06 20:28:38 +02:00
border-radius: 8px;
height: 64px;
&:hover {
2022-03-17 19:04:01 +01:00
background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
2020-10-06 20:28:38 +02:00
width: 100%;
padding-left: 20px;
padding-right: 12px;
}
.select-quote-popover__caret-right {
color: var(--color-primary-inverse);
2020-10-06 20:28:38 +02:00
&:hover {
color: var(--color-text-default);
2020-10-06 20:28:38 +02:00
}
}
.select-quote-popover__zero-slippage {
color: var(--color-primary-inverse);
2020-10-06 20:28:38 +02:00
}
}
}
&__receiving {
display: flex;
flex-direction: column;
width: 88px;
}
&__network-fees {
width: 99px;
}
&__quote-source {
width: 28px;
display: flex;
align-items: flex-end;
margin-right: 3px;
}
&__caret-right {
2022-03-17 19:04:01 +01:00
color: var(--color-text-alternative);
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
i {
transform: rotate(90deg);
}
&:hover {
border-radius: 8px;
background: var(--color-primary-inverse);
2022-03-17 19:04:01 +01:00
border: 1px solid var(--color-primary-default);
}
2020-10-06 20:28:38 +02:00
}
&__receiving-value {
display: flex;
align-items: center;
svg {
margin-right: 2px;
}
}
&__receiving-value-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__zero-slippage {
font-size: 12px;
line-height: 100%;
color: var(--color-text-muted);
2020-10-06 20:28:38 +02:00
font-weight: normal;
}
&__quote-source-toggle {
margin-left: 2px;
height: 12px;
}
&__network-fees-header {
display: flex;
flex-direction: row;
2020-10-06 20:28:38 +02:00
align-items: flex-end;
> span {
width: 77px;
}
> div {
height: 12px;
}
> svg {
margin-bottom: 2px;
}
}
&__receiving-symbol {
2022-03-17 19:04:01 +01:00
color: var(--color-text-alternative);
2020-10-06 20:28:38 +02:00
> div {
width: 12px;
height: 12px;
}
}
&__receiving-label {
display: flex;
align-items: center;
img {
height: 10px;
width: 10px;
margin-top: 2px;
}
> div {
margin-left: 3px;
}
}
&__quote-source-label {
height: 18px;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary-inverse);
2020-10-06 20:28:38 +02:00
border-radius: 5px;
padding: 4px;
font-size: 10px;
font-weight: bold;
padding-bottom: 2px;
&--blue {
background: var(--color-primary-default);
2020-10-06 20:28:38 +02:00
}
&--orange {
background: var(--color-warning-default);
2020-10-06 20:28:38 +02:00
}
&--green {
background: var(--color-success-default);
2020-10-06 20:28:38 +02:00
}
}
}