onfido-sdk-ui/src/components/Error/style.css

JavaScript SDK view layer for Onfido identity verification

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

.container {
  border-radius: 6px;
  text-align: left;
  color: #FFFFFF;
  margin: 0 40px 16px;
  padding: 8px 16px 12px 16px;
  position: relative;
  @media (--small-viewport) {
    margin: 0 16px;
  }
}

.container-error {
  &:extend(.container);
  background-color: #DC2A2A;
}

.container-warning {
  &:extend(.container);
  background-color: #2A7AB0;
}

.instruction {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 24px;
  font-size: 14px;
  line-height: 20px;
}

@title-height: 24px;

.title {
  position: relative;
}

.title-text {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: @title-height;
  padding-left: 24px;
}


.title-icon {
  position: absolute;
  height: 100%;
  width: 16px;
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.title-icon-error {
  &:extend(.title-icon);
  background-image: url('assets/error.svg');
}

.title-icon-warning {
  &:extend(.title-icon);
  background-image: url('assets/warning.svg');
}

.roundedTriangle {
  position: absolute;
  bottom: -6px;
  left: ~"calc(50% - 8px)";
  width: 8px;
  height: 8px;
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom-left-radius: 3px;
  transform: rotate(-45deg);
}


.warningTriangle {
  border-bottom: 8px solid #2A7AB0;
  border-left: 8px solid #2A7AB0;
}

.errorTriangle {
  border-bottom: 8px solid #DC2A2A;
  border-left: 8px solid #DC2A2A;
}

.dismiss {
  background: url('assets/cross.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}