mirror of https://github.com/BTCPrivate/copay.git
apply mocks styling for both distributions
This commit is contained in:
JDonadio
parent
5f08ad236b
commit
a51151b1d4
|
|
@ -1,40 +1,70 @@
|
|||
#pin-code {
|
||||
background-color: #C3C3C3;
|
||||
.close {
|
||||
cursor: pointer;
|
||||
padding: .5rem;
|
||||
}
|
||||
.button-stretch {
|
||||
width: 100%;
|
||||
}
|
||||
.col-offset-15 {
|
||||
margin-left: 15%;
|
||||
}
|
||||
@mixin centerer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #FAFAFA;
|
||||
.bar.bar-clear {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.block-code {
|
||||
@include centerer;
|
||||
top: 20% !important;
|
||||
width: 50%;
|
||||
> .row > .col {
|
||||
border-bottom: 1px solid #3E3E3E;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
height: 35px;
|
||||
.row .col {
|
||||
margin: 10px;
|
||||
height: 25px;
|
||||
}
|
||||
.app-icon {
|
||||
margin-top: -55px;
|
||||
.big-icon-svg {
|
||||
> .bg {
|
||||
background-image: url("../img/app/icon.png");
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.block-text {
|
||||
align-items: center;
|
||||
background-color: #F1F1F1;
|
||||
text-align: center;
|
||||
height: 30%;
|
||||
border-bottom: 1px solid #c5c5c5;
|
||||
span {
|
||||
width: 60%;
|
||||
margin: 10% auto;
|
||||
}
|
||||
}
|
||||
.block-code {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
padding: 0 50px 0 50px;
|
||||
}
|
||||
.block-buttons {
|
||||
@include centerer;
|
||||
padding: 20px;
|
||||
.row {
|
||||
padding: 3%;
|
||||
}
|
||||
@media (max-height: 480px) {
|
||||
.row {
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
border: 1px solid #666666;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
.filled {
|
||||
background-color: #666666;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,11 +29,13 @@
|
|||
<span class="toggle-label" translate>Hide Next Steps Card</span>
|
||||
</ion-toggle>
|
||||
|
||||
<div class="item item-divider"></div>
|
||||
<div ng-if="isCordova">
|
||||
<div class="item item-divider"></div>
|
||||
|
||||
<ion-toggle ng-if="isCordova" ng-model="usePincode.enabled" toggle-class="toggle-balanced" ng-change="usePincodeChange()">
|
||||
<span class="toggle-label" translate>Use pin to lock/unlock the app</span>
|
||||
</ion-toggle>
|
||||
<ion-toggle ng-model="usePincode.enabled" toggle-class="toggle-balanced" ng-change="usePincodeChange()">
|
||||
<span class="toggle-label" translate>Use pin to lock/unlock the app</span>
|
||||
</ion-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,67 @@
|
|||
<ion-view id="pin-code" ng-controller="pincodeController" hide-tabs hide-back-button="!fromSettings">
|
||||
<ion-nav-bar class="bar-royal">
|
||||
<ion-nav-title>{{'Pin Code' | translate}}</ion-nav-title>
|
||||
<ion-nav-bar class="bar-clear">
|
||||
<ion-nav-back-button>
|
||||
</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
<div ng-if="fromSettings" ng-click="close()" class="close" translate>Close</div>
|
||||
<div class="content">
|
||||
<div class="block-text row" translate ng-if="!newPincode">Please enter your mobile unlock code</div>
|
||||
<div class="block-text row" translate ng-if="newPincode">Confirm your mobile unlock code</div>
|
||||
<div class="app-icon">
|
||||
<i class="icon big-icon-svg">
|
||||
<div class="bg app-icon"></div>
|
||||
</i>
|
||||
</div>
|
||||
<div class="block-code">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{currentPincode.substring(0, 1)}}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{currentPincode.substring(1, 2)}}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{currentPincode.substring(2, 3)}}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{currentPincode.substring(3, 4)}}
|
||||
</div>
|
||||
<div class="col circle" ng-class="{'filled': currentPincode.length >= 1}"></div>
|
||||
<div class="col circle" ng-class="{'filled': currentPincode.length >= 2}"></div>
|
||||
<div class="col circle" ng-class="{'filled': currentPincode.length >= 3}"></div>
|
||||
<div class="col circle" ng-class="{'filled': currentPincode.length >= 4}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-buttons">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('1')">1</button>
|
||||
<div class="col" ng-click="updatePinCode('1')">
|
||||
<div class="keyboard">1</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('2')">2</button>
|
||||
<div class="col" ng-click="updatePinCode('2')">
|
||||
<div class="keyboard">2</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('3')">3</button>
|
||||
<div class="col" ng-click="updatePinCode('3')">
|
||||
<div class="keyboard">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('4')">4</button>
|
||||
<div class="col" ng-click="updatePinCode('4')">
|
||||
<div class="keyboard">4</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('5')">5</button>
|
||||
<div class="col" ng-click="updatePinCode('5')">
|
||||
<div class="keyboard">5</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('6')">6</button>
|
||||
<div class="col" ng-click="updatePinCode('6')">
|
||||
<div class="keyboard">6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('7')">7</button>
|
||||
<div class="col" ng-click="updatePinCode('7')">
|
||||
<div class="keyboard">7</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('8')">8</button>
|
||||
<div class="col" ng-click="updatePinCode('8')">
|
||||
<div class="keyboard">8</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('9')">9</button>
|
||||
<div class="col" ng-click="updatePinCode('9')">
|
||||
<div class="keyboard">9</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch icon ion-checkmark" ng-click="save()" ng-disabled=""></button>
|
||||
<div class="col" ng-click="save()">
|
||||
<div class="keyboard icon ion-checkmark" ng-disabled=""></div>
|
||||
</div>
|
||||
<div class="col" ng-click="updatePinCode('0')">
|
||||
<div class="">0</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch" ng-click="updatePinCode('0')">0</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="button button-light button-stretch icon ion-arrow-left-a" ng-click="delete()"></button>
|
||||
<div class="keyboard icon ion-arrow-left-a" ng-click="delete()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue