@microblink/blinkid-in-browser-sdk
Version:
A simple ID scanning library for WebAssembly-enabled browsers.
103 lines (100 loc) • 2.86 kB
CSS
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*
* SASS variables, not customizable via CSS variables
*/
/**
* Camera experiences
*/
:host {
box-sizing: border-box;
display: block;
}
:host button {
display: block;
border: none;
margin: 0;
padding: 7px 16px;
color: var(--mb-component-button-classic-text-color);
background: var(--mb-component-button-classic-background);
border: 1px solid var(--mb-component-button-classic-background);
border-radius: var(--mb-component-button-classic-border-radius);
font-family: var(--mb-font-family);
font-size: var(--mb-component-button-classic-font-size);
font-weight: var(--mb-component-button-classic-font-weight);
}
:host button:not([disabled]) {
cursor: pointer;
}
:host button[disabled] {
opacity: 0.5;
pointer-events: none;
}
:host(.mobile) {
width: 50%;
display: flex;
flex-direction: column;
}
:host(.mobile) button {
display: block;
border: none;
margin: 0;
padding: 7px 16px;
color: var(--mb-component-button-classic-text-color);
background: var(--mb-component-button-classic-background);
border: 1px solid var(--mb-component-button-classic-background);
border-radius: var(--mb-component-button-classic-border-radius);
font-family: var(--mb-font-family);
font-size: var(--mb-component-button-classic-font-size);
font-weight: var(--mb-component-button-classic-font-weight);
}
:host(.mobile) button:not([disabled]) {
cursor: pointer;
}
:host(.mobile) button[disabled] {
opacity: 0.5;
pointer-events: none;
}
:host(.quit-mobile) {
width: 170%;
display: flex;
flex-direction: column;
}
:host(.quit-mobile) button {
display: block;
border: none;
margin: 0;
padding: 7px 16px;
color: var(--mb-component-button-classic-text-color);
background: var(--mb-component-button-classic-background);
border: 1px solid var(--mb-component-button-classic-background);
border-radius: var(--mb-component-button-classic-border-radius);
font-family: var(--mb-font-family);
font-size: var(--mb-component-button-classic-font-size);
font-weight: var(--mb-component-button-classic-font-weight);
}
:host(.quit-mobile) button:not([disabled]) {
cursor: pointer;
}
:host(.quit-mobile) button[disabled] {
opacity: 0.5;
pointer-events: none;
}
:host(.inverted) a,
:host(.inverted) button {
background-color: white;
color: var(--mb-component-button-classic-inverted-text-color);
border: 1px solid var(--mb-component-button-classic-inverted-border-color);
}
:host(.inverted) button:hover,
:host(.inverted) button:active,
:host(.inverted) button:focus {
cursor: pointer;
background-color: var(--mb-component-button-classic-inverted-hover-background);
}
:host(.inverted) button:focus {
border-color: var(--mb-component-button-classic-focused-border-color);
}