onfido-sdk-ui
Version:
JavaScript SDK view layer for Onfido identity verification
147 lines (125 loc) • 2.5 kB
CSS
@import (less) "../../Theme/constants.css";
@parent-width: 432;
.smsSection {
height: 76px;
margin-top: 56px;
}
.bolder {
font-weight: 600;
}
.label {
font-weight: 600;
text-align: left;
color: #2C3E4F;
float: left;
}
.numberInputSection {
height: 48px;
width: 100%;
float: left;
margin-top: 4px;
}
.inputContainer, .linkText {
.width-parent-relative(320, @parent-width);
}
.inputContainer {
height: 100%;
border: 1px solid #667080;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
background-color: #FFFFFF;
float: left;
box-shadow: 0px -0.1px 0px 0px rgba(102,112,128,1);
}
.fieldError {
border: 1px solid #DC2A2A;
border-right: none;
box-shadow: 0px -0.1px 0px 0px rgba(220,42,42,1);
}
.numberError {
color: #DC2A2A;
font-size: 14px;
line-height: 20px;
float: left;
margin-top: 4px;
}
.sending:before {
float: left;
margin-left: 12px;
width: 16px;
height: 16px;
content: "";
opacity: 0.5;
background-image: url('./assets/spinner.svg');
background-position: left center;
background-repeat: no-repeat;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.copyLinkSection {
height: 68px;
margin-top: 86px;
text-align: left;
}
.linkContainer {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.copySuccess .actionContainer:before {
width: 13px;
height: 11px;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-image: url('./assets/checkmark-green.svg');
z-index: 1;
}
.linkText {
resize: none;
height: 24px;
border: none;
background-color: #f3f3f4;
overflow: hidden;
font-size: 16px;
line-height: 24px;
color: #2C3E4F;
white-space: nowrap;
font-family: "Open Sans", sans-serif;
}
.copyToClipboard {
float: right;
font-size: 14px;
border-bottom: 1px solid #00C8A0;
margin-left: 4px;
text-decoration: none;
}
.copyToClipboard:visited {
text-decoration: none;
color: #2C3E4F;
font-size: 14px;
}
.copySuccess .copyToClipboard {
border-bottom: none;
}
.divider {
border-style: solid;
border: 1px solid #8A9293;
opacity: 0.35;
margin-top: 11px;
}
.btn {
height: 48px;
.width-parent-relative(112, @parent-width);
float: right;
border-radius: 0 4px 4px 0;
padding: 0;
}