Wallet/src/sass/views/includes/txp-details.scss
2017-01-18 15:50:52 -03:00

265 lines
5.2 KiB
SCSS

#txp-details,
#view-confirm {
$item-lateral-padding: 20px;
$item-vertical-padding: 10px;
$item-border-color: #EFEFEF;
$item-label-color: #6C6C6E;
.list {
background: #f5f5f5;
}
.add-bottom-for-cta {
bottom: 92px;
}
.head {
padding: 30px $item-lateral-padding 3rem;
border-top: 0;
.sending-label {
display: flex;
font-size: 18px;
align-items: center;
margin-bottom: 1.5rem;
img {
margin-right: 1rem;
height: 35px;
width: 35px;
}
span {
text-transform: capitalize;
}
}
.amount-label{
line-height: 30px;
.amount{
font-size: 38px;
margin-bottom: .5rem;
> .unit {
font-family: "Roboto-Light";
}
}
.alternative {
font-size: 16px;
font-family: "Roboto-Light";
color: #9B9B9B;
}
}
}
.item {
border-color: $item-border-color;
}
.info {
span {
display: block;
}
.badge {
border-radius: 0;
padding: .5rem;
}
.item {
color: #4A4A4A;
padding-top: $item-vertical-padding;
padding-bottom: $item-vertical-padding;
padding-left: $item-lateral-padding;
&:not(.item-icon-right) {
padding-right: $item-lateral-padding;
}
.label {
font-size: 14px;
color: $item-label-color;
margin-bottom: 8px;
}
&.single-line {
display: flex;
align-items: center;
padding-top: 17px;
padding-bottom: 17px;
.label {
margin: 0;
flex-grow: 1;
}
}
}
.item-divider {
padding-top: 1.2rem;
color: $item-label-color;
font-size: 15px;
}
.payment-proposal-to {
width: 100%;
display: inline-block;
padding: 8px 13px;
background-color: rgba(203, 203, 203, .13);
margin-top: 10px;
margin-bottom: 5px;
display: flex;
align-items: center;
border-radius: 4px;
img {
padding: .2rem;
padding-left: 0;
border-right: 1px solid #e4e4e4;
padding-right: 12px;
}
i {
color: grey;
position: inherit;
padding: 0 10px;
float: right;
}
contact {
margin-left: 15px;
font-size: 14px;
display: inline-block;
}
}
.wallet {
display: flex;
align-items: center;
padding: .2rem 0;
margin-bottom: 5px;
~ .bp-arrow-right {
top: 14px;
}
> i {
padding: 0;
position: static;
> img {
height: 24px;
width: 24px;
padding: 2px;
margin-right: .7rem;
box-shadow: none;
}
}
}
.timeline-item {
border: 0;
&:nth-child(2) {
border-top: 1px solid $item-border-color;
}
&:last-child {
border-bottom: 1px solid $item-border-color;
}
padding: 17px $item-lateral-padding;
> * {
padding-right: 0;
}
}
.timeline-content {
display: flex;
align-items: center;
&__icon {
display: flex;
align-items: center;
min-width: 40px;
padding-right: 1rem;
padding-left: 1rem;
margin-right: .5rem;
position: relative;
&::before {
content: '';
background: #e8e8e8;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
top: 0;
}
&::after {
content: '';
background: #e8e8e8;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(100%);
transform: translateX(-50%) translateY(100%);
bottom: 0;
}
> div {
border: 3px solid #13e5b6;
border-radius: 50%;
display: flex;
height: 26px;
width: 26px;
font-size: 13px;
align-items: center;
justify-content: center;
font-weight: 600;
vertical-align: middle;
color: #13e5b6;
&.rejected {
background: #E15061;
border-color: #E15061;
color: #FFFFFF;
font-family: "Roboto-Bold";
font-size: 19px;
}
}
}
&__label {
flex-grow: 1;
> .action {
font-size: 16px;
}
> .name {
color: #aaa;
font-size: 14px;
}
}
}
}
.proposal-deletion-help {
color: $item-label-color;
padding: 1rem 2rem;
}
.view-on-blockchain-btn {
background: #e8e7e7;
color: rgba(58, 58, 58, .6);
margin-bottom: 1.5rem;
}
.glidera-success {
padding: 20px;
margin-top: 15px;
span {
font-size: 15px;
display: block;
}
}
.glidera-explanation {
padding: 0 1rem;
white-space: normal;
}
.glidera-description {
text-align: center;
font-size: 12px;
color: $mid-gray;
}
}