anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

feat(scan): scaffold permission priming in scan view

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-10 22:57:20 -04:00
commit ce3812b220
2 changed files with 132 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/sass/views/tab-scan.scss
View file

@ -1,55 +1,110 @@
$scannerBackgroundColor: #060d2d;
#tab-scan {
// view background is transparent to show video preview
background: none transparent;
.scanner-controls {
width: 100%;
text-align: center;
bottom: 0;
position: absolute;
color: #fff;
text-align: center;
background: transparent none;
&-has-problems,
&-loading-camera {
background-color: $scannerBackgroundColor;
}
.guides {
display: flex;
position: absolute;
&-has-problems {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
.qr-scan-guides {
width: 60%;
max-width: 400px;
margin-bottom: 8em;
max-height: 50%;
}
.icon-flash, .icon-camera-toggle {
border-radius: 50%;
width: 4em;
height: 4em;
background-color: rgba(13, 13, 13, 0.79);
background-repeat: no-repeat;
background-clip: padding-box;
background-size: 100%;
display: inline-block;
margin: 2em 1em;
cursor: pointer;
// hover for desktop only
body:not(.platform-cordova) &:hover {
background-color: rgba(31, 40, 78, 0.79);
}
&.active, &:active {
background-color: rgba(100, 124, 232, 0.79);
.zero-state {
&-icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 13px;
box-shadow: $subtle-box-shadow;
background-color: #fff;
}
&-heading {
font-size: 20px;
margin: 1rem;
}
&-description {
margin: 0 2rem 120px;
opacity: .6;
max-width: 300px;
}
&-tldr {
margin: 1rem auto;
}
&-description,
&-tldr {
max-width: 300px;
}
&-cta {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 6vh;
}
}
}
.icon-flash {
background-image: url("../img/icon-flash.svg");
&-loading-camera {
}
.icon-camera-toggle {
background-image: url("../img/icon-camera-toggle.svg");
&-camera-ready {
// view background is transparent to show video preview
background: none transparent;
.scanner-controls {
width: 100%;
text-align: center;
bottom: 0;
position: absolute;
}
.guides {
display: flex;
position: absolute;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
.qr-scan-guides {
width: 60%;
max-width: 400px;
margin-bottom: 8em;
max-height: 50%;
}
.icon-flash, .icon-camera-toggle {
border-radius: 50%;
width: 4em;
height: 4em;
background-color: rgba(13, 13, 13, 0.79);
background-repeat: no-repeat;
background-clip: padding-box;
background-size: 100%;
display: inline-block;
margin: 2em 1em;
cursor: pointer;
// hover for desktop only
body:not(.platform-cordova) &:hover {
background-color: rgba(31, 40, 78, 0.79);
}
&.active, &:active {
background-color: rgba(100, 124, 232, 0.79);
}
}
.icon-flash {
background-image: url("../img/icon-flash.svg");
}
.icon-camera-toggle {
background-image: url("../img/icon-camera-toggle.svg");
}
}
}
#cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
background-color: #060d2d !important;
background-color: $scannerBackgroundColor !important;
}