1
0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-05 22:00:59 +00:00
trezor-wallet/src/styles/summary.less

228 lines
4.9 KiB
Plaintext
Raw Normal View History

2018-02-20 09:30:36 +00:00
.summary {
2018-03-08 16:10:53 +00:00
.summary-header {
display: flex;
align-items: center;
&:before {
content: '';
display: inline-block;
width: 32px;
height: 22px;
background-repeat: no-repeat;
2018-05-09 09:14:58 +00:00
background-size: auto 20px;
}
2018-05-10 14:39:52 +00:00
&.ethereum:before {
2018-03-08 16:10:53 +00:00
background-image: url('../images/eth-logo.png');
2018-05-10 14:39:52 +00:00
}
&.ethereum-classic:before {
background-image: url('../images/etc-logo.png');
}
&.ropsten:before {
background-image: url('../images/ropsten-logo.png');
2018-03-08 16:10:53 +00:00
}
2018-05-09 09:14:58 +00:00
&.rinkeby:before {
background-image: url('../images/rinkeby-logo.png');
}
2018-05-10 14:39:52 +00:00
a {
font-size: 12px;
margin-left: auto;
white-space: nowrap;
2018-03-08 16:10:53 +00:00
}
2018-05-10 14:39:52 +00:00
2018-02-20 09:30:36 +00:00
}
.token-select {
width: 100%;
height: 34px;
font-family: @font-family-monospace;
.Select-control {
height: 34px;
border: 1px solid @color_divider;
}
.Select-input {
}
.Select-arrow-zone {
display: none;
}
}
.identicon {
display: inline-block;
vertical-align: middle;
position: relative;
top: -4px;
margin-right: 10px;
border-radius: 50%;
}
.summary-details {
position: relative;
2018-03-08 16:10:53 +00:00
padding: 0px 48px;
2018-02-20 09:30:36 +00:00
border-bottom: 1px solid @color_divider;
.content {
2018-03-08 16:10:53 +00:00
display: flex;
padding-bottom: 32px;
2018-02-20 09:30:36 +00:00
.column {
2018-03-08 16:10:53 +00:00
margin-right: 48px;
2018-02-20 09:30:36 +00:00
2018-03-08 16:10:53 +00:00
.label, .value {
color: @color_text_secondary;
font-size: 12px;
2018-02-20 09:30:36 +00:00
}
.fiat-value {
2018-03-08 16:10:53 +00:00
font-weight: 500;
font-size: 18px;
2018-05-05 11:52:03 +00:00
margin: 7px 0px 7px 0px;
2018-03-08 16:10:53 +00:00
color: @color_text_primary;
2018-02-20 09:30:36 +00:00
}
}
}
.toggle {
display: block;
position: absolute;
left: 50%;
margin-left: -20px;
bottom: -20px;
width: 40px;
height: 40px;
//line-height: 30px;
background: @color_white;
2018-03-08 16:10:53 +00:00
color: @color_text_secondary;
2018-02-20 09:30:36 +00:00
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
border-radius: 50%;
cursor: pointer;
2018-03-08 16:10:53 +00:00
transition: all 0.3s;
2018-02-20 09:30:36 +00:00
&:hover {
2018-03-08 16:10:53 +00:00
background: @color_divider;
color: @color_text_primary;
2018-02-20 09:30:36 +00:00
}
&:before {
2018-03-08 16:10:53 +00:00
.icomoon-arrow-down;
transition: transform 0.3s;
transform-origin: 50% 50%;
2018-02-20 09:30:36 +00:00
position: absolute;
2018-03-08 16:10:53 +00:00
left: 8px;
top: 10px;
2018-02-20 09:30:36 +00:00
}
}
2018-03-08 16:10:53 +00:00
&.opened {
.toggle:before {
transform: rotate(180deg);
top: 8px;
2018-02-20 09:30:36 +00:00
}
}
}
2018-05-11 11:46:18 +00:00
.what-is-it {
&:before {
.icomoon-help;
.hover();
transform-origin: 50% 50%;
font-size: 24px;
position: relative;
top: 5px;
cursor: pointer;
color: @color_text_secondary;
}
&:hover {
&:before {
color: @color_text_primary;
}
}
}
2018-02-20 09:30:36 +00:00
.filter {
2018-03-08 16:10:53 +00:00
//background: @color_main;
padding: 0px 48px 32px 48px;
2018-02-20 09:30:36 +00:00
// text-align: right;
2018-05-22 13:08:11 +00:00
input {
box-shadow: none;
}
2018-02-20 09:30:36 +00:00
}
2018-03-08 16:10:53 +00:00
.token-select {
.Select-control {
cursor: text;
2018-02-20 09:30:36 +00:00
}
2018-03-08 16:10:53 +00:00
.Select-option {
.hover();
&.is-focused {
background: @color_gray_light;
2018-02-20 09:30:36 +00:00
}
2018-03-08 16:10:53 +00:00
&.is-selected {
background: @color_divider;
2018-02-20 09:30:36 +00:00
}
}
}
.token {
border-top: 1px solid @color_divider;
2018-03-08 16:10:53 +00:00
padding: 14px 48px;
2018-02-20 09:30:36 +00:00
display: flex;
flex-direction: row;
2018-03-08 16:10:53 +00:00
align-items: center;
position: relative;
2018-02-20 09:30:36 +00:00
.icon {
width: 36px;
height: 36px;
//border: 8px solid white;
border-radius: 50%;
margin-right: 10px;
line-height: 30px;
text-transform: uppercase;
user-select: none;
text-align: center;
padding: 6px;
p {
line-height: 24px;
padding: 0px;
color: inherit;
}
}
.name {
flex: 1;
2018-03-08 16:10:53 +00:00
color: @color_text_secondary;
2018-02-20 09:30:36 +00:00
}
2018-03-08 16:10:53 +00:00
button {
position: absolute;
right: 12px;
padding: 0px;
padding-top: 3px;
&:after {
.icomoon-close;
}
2018-02-20 09:30:36 +00:00
}
2018-03-08 16:10:53 +00:00
2018-02-20 09:30:36 +00:00
&:last-child {
// border-bottom: 1px solid @color_divider;
}
}
2018-03-08 16:10:53 +00:00
2018-02-20 09:30:36 +00:00
}