onfido-sdk-ui/src/components/Theme/constants.css

JavaScript SDK view layer for Onfido identity verification

@custom-media --large (min-width: 480px);
@custom-media --small-viewport (max-width: 479px);
@custom-media --smaller-viewport (max-width: 359px);
/* For viewport larger than iPhone 5 in terms of height */
@custom-media --long-viewport (min-height: 568px);
/* For viewport smaller than iPhone 5 in terms of height */
@custom-media --short-viewport (max-height: 567px);

/**
 * We want our units to be based on `em`, so that our SDK can accommodate for
 * the user changing their browser font size.
 * At the same time, `px` is a unit often used in templates etc. from Design.
 * To accommodate for both of these cases, we make our @unit be 1/16 of an `em`.
 * This results in each @unit into being the same as 1px (when the parent
 * font-size is 16px, as it is by default).
 *
 * So each "unit" isn't a pixel, but it is when the parent font size is 16px,
 * and it's proportionate to the difference otherwise.
 */
@unit: 1/16em;
@font-size-base: 16*@unit;

/*
 * We also need different units for when trying to do `px` "equivalents" when
 * our parent has a different font size.
 */
@unit-large: 1/20em;
@font-size-large: 20*@unit;

@unit-small: 1/14em;
@font-size-small: 14*@unit;

@unit-x-small: 1/11em;
@font-size-x-small: 11*@unit;

/*
 * We also have a special unit for the react-phone-number-input library, so
 * we can keep its units in line with whatever units we decide to pick
 */
@unit-rrui: 1em;

@large-text-margin: 40*@unit;
@small-text-margin: 24*@unit;
@padding-lg: 16*@unit;
@padding-sm: 10*@unit;
@padding-xs: 8*@unit;

@footer-height: 32*@unit;
@footer-margin: 16*@unit;
@navigation-height: 32*@unit;
@navigation-height-sm-screen: 38*@unit;
@navigation-padding-top: @padding-lg;
@navigation-padding-sides: @padding-lg;
@navigation-padding-top-sm-screen: @padding-sm;
@navigation-padding-sides-sm-screen: @padding-xs;


/* Solid colors */
@color-white: #ffffff;
@color-primary-500: #353FF4;
@color-icon-temporary: #EDEEEF;
@color-neutral-600: #A2A8B3;
@color-primary-700: #636670;

@color-background: @color-white;
@color-border: @color-neutral-600;
@color-spinner: @color-neutral-600;
@color-secondary-button-text: @color-primary-500;
@color-button-border: @color-primary-500;
@color-body-text: @color-primary-700;

@color-text-dark: #2C3E4F;
@color-camera-error-overlay: #1C1F21;
@color-black: #000000;
@color-small-print: #0F2536;
@color-tips-pill: #5D6B78;
@color-input-border: #667080;
@color-selectors-border: #8B9094;
@color-hint: #565B5E;
@color-error: #DC2A2A;
@color-warning: @color-primary-500;

/* Transparent colors */
@color-transparent: transparent;
@color-help-container: @color-neutral-600;
@color-preview-button-background: rgba(15, 37, 54, 0.85);
@color-modal-overlay: rgba(0, 0, 0, 0.6);
@color-camera-overlay: rgba(0, 0, 0, 0.7);
@color-navbar-gradient-one: rgba(28,31,33,0);
@color-navbar-gradient-two: rgba(28,31,33,0.35);

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.width-parent-relative(@base-width,@parent-width) {
  width: 100%*(@base-width/@parent-width)
}