Refactoring styles, simplifying the hierarchy

This commit is contained in:
lepipele 2018-03-29 22:27:05 -05:00 committed by nicolas.dorier
parent 53c53b98e6
commit b976adeefe
2 changed files with 59 additions and 14 deletions

View file

@ -160,26 +160,21 @@
</a>
</div>
</div>
<div class="bp-view payment manual-flow" id="copy">
<div class="manual__step-two__instructions">
<span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
</div>
<nav v-if="srvModel.isLightning">
<div class="manual-box flipped" style="margin-bottom: 30px;">
<div class="manual-box__amount">
<div class="flipper flipped-initially">
<div class="manual-box__address__label label">{{$t("BOLT 11 Invoice")}}</div>
<div class="manual-box__address__value copy-cursor" ngxclipboard="" id="btcAddress">
<div class="manual-box__address__wrapper">
<div class="manual-box__address__wrapper__logo">
<img v-bind:src="srvModel.cryptoImage" height="16" />
</div>
<div class="manual-box__address__wrapper__value" id="btcAddressValue" style="overflow:hidden;max-width:240px;">{{srvModel.btcAddress}}</div>
</div>
<div class="copied-label" style="top: 5px;">
<span>{{$t("Copied")}}</span>
</div>
</div>
<div class="manual-box__amount copySectionBox">
<label>{{$t("BOLT 11 Invoice")}}</label>
<div class="inputWithIcon">
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
<img v-bind:src="srvModel.cryptoImage" />
</div>
<div class="copied-label" style="top: 5px;">
<span>{{$t("Copied")}}</span>
</div>
</div>
<div class="manual-box__address">

View file

@ -11290,3 +11290,53 @@ low-fee-timeline {
.no-bounce * .status-icon__wrapper__outline {
animation: none !important;
}
/* checkout additions */
.copySectionBox label {
text-transform: uppercase;
font-size: 10px;
color: #515664;
opacity: .5;
letter-spacing: .6px;
margin-bottom: 14px;
}
.checkoutTextbox {
width: 100%;
border: 1px solid #e9e9e9;
border-radius: 4px;
outline: none;
padding: 8px 10px;
background: #f6f6f6;
box-sizing: border-box;
transition: .3s;
font-size: 10px;
color: #4a4a4a;
cursor: copy;
}
.inputWithIcon .checkoutTextbox {
padding-left: 40px;
}
.inputWithIcon {
position: relative;
}
.inputWithIcon img {
position: absolute;
left: 2px;
top: 8px;
color: #aaa;
height: 16px;
padding: 0px 6px;
border-right: 1px solid #e9e9e9;
}
.inputWithIcon.inputIconBg img {
background-color: #aaa;
color: #fff;
padding: 9px 4px;
border-radius: 4px 0 0 4px;
}