onfido-sdk-ui/src/components/crossDevice/Intro/style.css

JavaScript SDK view layer for Onfido identity verification

@import (less) "../../Theme/constants.css";

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}

.list {
  list-style: none;
  padding: 0;
}

.stage {
  display: flex;
  padding-bottom: 32*@unit;
  position: relative;

  /* blue line connecting all three icons */
  &::before {
    content: '';
    display: block;
    background-color: @color-text-dark;
    width: 2*@unit;
    height: 100%;
    position: absolute;
    top: 0;
    left: 23*@unit;
  }

  &:last-child::before {
    display: none;
  }
}

.stageIcon {
  background-size: contain;
  flex-shrink: 0;
  float: left;
  height: 48*@unit;
  width: 48*@unit;
  position: relative;
  z-index: 1;

  &-sms {
    background-image: url('assets/connection-large.svg')
  }

  &-take-photos {
    background-image: url('assets/take-photos.svg');
  }

  &-take-selfie {
    background-image: url('assets/take-selfie.svg');
  }

  &-return-computer {
    background-image: url('assets/return-to-computer-large.svg')
  }
}

.stageMessage {
  text-align: left;
  margin-left: 15*@unit;
  flex-grow: 1;
  flex-basis: 100%;
}