@criipto/verify-react
Version:
Verify SDK for React Single Page Applications
294 lines (257 loc) • 5.53 kB
CSS
.criipto-eid-btn {
padding: 6px 24px 6px 16px;
height: 60px;
box-sizing: border-box;
text-decoration: none;
border: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
font-family: 'IBM Plex Sans', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #FFF;
background: #604FED;
}
@media (max-width: 320px) {
.criipto-eid-btn {
padding-right: 6px;
padding-left: 6px;
}
}
.criipto-eid-btn:hover, .criipto-eid-btn:active {
color: #FFF;
}
.criipto-eid-btn .criipto-eid-logo {
width: 88px;
height: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
.criipto-eid-btn .criipto-eid-logo img {
max-width: 100%;
max-height: 100%;
}
.criipto-eid-btn.criipto-eid-btn--dk-mitid {
background: #0060E6;
}
.criipto-eid-btn.criipto-eid-btn--dk-mitid:hover {
background: #0051C3;
}
.criipto-eid-btn.criipto-eid-btn--dk-nemid {
background: #0B6062;
}
.criipto-eid-btn.criipto-eid-btn--dk-nemid:hover {
background: #094E50;
}
.criipto-eid-btn.criipto-eid-btn--se-bankid {
background: #235971;
}
.criipto-eid-btn.criipto-eid-btn--se-bankid:hover {
background: #1C485B;
}
.criipto-eid-btn.criipto-eid-btn--no-bankid {
background: #39134C;
}
.criipto-eid-btn.criipto-eid-btn--no-bankid:hover {
background: #2A0E38;
}
.criipto-eid-btn.criipto-eid-btn--no-vipps {
background: #FF5B24;
}
.criipto-eid-btn.criipto-eid-btn--no-vipps:hover {
background: #E85321;
}
.criipto-eid-btn.criipto-eid-btn--de-sofort {
background: #EF809F;
}
.criipto-eid-btn.criipto-eid-btn--de-sofort:hover {
background: #DE7794;
}
.criipto-eid-btn.criipto-eid-btn--de-yes {
background: #4B47FA;
}
.criipto-eid-btn.criipto-eid-btn--de-yes:hover {
background: #4340E0;
}
.criipto-eid-btn.criipto-eid-btn--nl-digid {
background: #333333;
}
.criipto-eid-btn.criipto-eid-btn--nl-digid:hover {
background: #111111;
}
.criipto-eid-btn.criipto-eid-btn--be-eid {
background: #87CEA3;
}
.criipto-eid-btn.criipto-eid-btn--be-eid:hover {
background: #78B891;
}
.criipto-eid-btn.criipto-eid-btn--itsme {
background: #FD4825;
}
.criipto-eid-btn.criipto-eid-btn--itsme:hover {
background: #E44020;
}
.criipto-eid-btn.criipto-eid-btn--fi {
background: #333333;
}
.criipto-eid-btn.criipto-eid-btn--fi:hover {
background: #111111;
}
.criipto-eid-btn.criipto-eid-btn--disabled, .criipto-eid-btn.criipto-eid-btn--disabled:hover {
background: #D0D3EB;
}
.criipto-eid-btn .criipto-eid-loader::before {
left: -18px;
width: 14px;
height: 14px;
border-radius: 7px;
background-color: rgba(255, 255, 255, 0.2);
animation: dotFlashingFirst 1.5s infinite;
}
.criipto-eid-btn .criipto-eid-loader {
position: relative;
width: 14px;
height: 14px;
margin-right: 18px;
border-radius: 7px;
background-color: rgba(255, 255, 255, 0.2);
animation: dotFlashingSecond 1.5s infinite linear;
}
.criipto-eid-btn .criipto-eid-loader::before, .criipto-eid-btn .criipto-eid-loader::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
}
.criipto-eid-btn .criipto-eid-loader::after {
left: 18px;
width: 14px;
height: 14px;
border-radius: 7px;
background-color: rgba(255, 255, 255, 0.2);
animation: dotFlashingLast 1.5s infinite;
}
@keyframes dotFlashingFirst {
0% {
background-color: rgba(255, 255, 255, 0.2);
}
33% {
background-color: rgba(255, 255, 255, 1);
}
66%, 100% {
background-color: rgba(255, 255, 255, 0.2);
}
}
@keyframes dotFlashingSecond {
0%, 33% {
background-color: rgba(255, 255, 255, 0.2);
}
66% {
background-color: rgba(255, 255, 255, 1);
}
100% {
background-color: rgba(255, 255, 255, 0.2);
}
}
@keyframes dotFlashingLast {
0%, 66% {
background-color: rgba(255, 255, 255, 0.2);
}
100% {
background-color: rgba(255, 255, 255, 1);
}
}
.criipto-se-bankid-qr {
background: #235971;
padding: 16px;
}
.criipto-se-bankid-qr--help-text {
color: #FFF;
padding-bottom: 16px;
display: flex;
flex-flow: row;
gap: 16px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
align-items: center;
}
.criipto-se-bankid-qr--help-text img {
height: 30px;
}
.criipto-se-bankid-qr-canvas {
display: block;
border: 0;
outline: none;
margin: 0;
padding: 0;
line-height: 0;
box-sizing: border-box;
width: 100%;
background: transparent;
cursor: pointer;
}
.criipto-se-bankid-qr-canvas img {
max-width: 100%;
max-height: 100%;
}
.criipto-se-bankid-qr-fullscreen {
width: 100svw;
height: 100svh;
max-width: 100svw;
max-height: 100svh;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
}
.criipto-se-bankid-qr-fullscreen .criipto-se-bankid-qr-canvas {
margin: 0 auto;
width: auto;
height: 100%;
}
.criipto-eid-selector {
display: flex;
gap: 8px;
flex-flow: column;
padding: 20px;
max-width: 500px;
}
.criipto-auth-popup-backdrop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.criipto-auth-popup-backdrop-background {
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
.criipto-auth-popup-backdrop-content {
width: 350px;
z-index: 11;
color: #FFF;
display: flex;
align-items: center;
flex-direction: column;
}