@randstad-design/orbit-multitheme/dist/assets/theme-spherion/components/indicators/step.css

multitheme Front-end code based on Randstad Human Forward components

.indicator-step__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.indicator-step__item {
  color: #97999b;
  fill: #97999b;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  position: relative;
  text-align: center; }
  .indicator-step__item::before {
    background: #e2e2e2;
    content: '';
    height: 2px;
    position: absolute;
    right: 0;
    top: 14px;
    width: 100%;
    z-index: -1; }
  .indicator-step__item:first-child {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .indicator-step__item:first-child::before {
    content: none; }

.indicator-step__dot {
  background-color: #fff;
  border-radius: 50%;
  margin-left: auto;
  padding: 5px;
  text-align: center;
  width: 30px; }
  .indicator-step__dot-inner {
    background-color: #fff;
    border: 2px solid #e2e2e2;
    border-radius: 50%;
    height: 20px;
    margin: 0 auto;
    text-align: center;
    width: 20px; }
    .past .indicator-step__dot-inner {
      background-color: #ff661a; }
    .indicator-step__dot-inner .icon {
      color: #fff; }
  .indicator-step__dot .blue-dot {
    background: #ff661a;
    border-radius: 10px;
    height: 8px;
    position: absolute;
    width: 8px; }
  .indicator-step__dot .icon {
    height: 16px;
    right: 7px;
    top: 7px;
    width: 16px; }
  .indicator-step__dot.past .indicator-step__dot-inner,
  .indicator-step__dot.current .indicator-step__dot-inner {
    border: 2px solid #ff661a; }
  .indicator-step__dot.declined .indicator-step__dot-inner {
    background: #f13c23;
    border: 2px solid #f13c23; }
    .indicator-step__dot.declined .indicator-step__dot-inner .icon svg {
      color: #fff;
      fill: #fff; }
  .indicator-step__dot.past .icon, .indicator-step__dot.current .icon, .indicator-step__dot.declined .icon {
    right: auto;
    top: auto;
    left: auto; }
    .indicator-step__dot.past .icon.icon-size, .indicator-step__dot.current .icon.icon-size, .indicator-step__dot.declined .icon.icon-size {
      height: 8px;
      width: 8px; }
      @media (min-width: 941px) {
        .indicator-step__dot.past .icon.icon-size, .indicator-step__dot.current .icon.icon-size, .indicator-step__dot.declined .icon.icon-size {
          height: 16px;
          width: 16px; } }
  .indicator-step__dot + .border--done {
    background: #ff661a;
    height: 100%;
    width: 2px; }
  .indicator-step__dot + .border--todo {
    background: #e2e2e2;
    height: 100%;
    width: 2px; }

.indicator-step__item--complete .indicator-step__dot-inner {
  background: #ff661a;
  border: none; }

.indicator-step__item--complete .indicator-step__text {
  -webkit-transition: color 0.2s;
  transition: color 0.2s; }

.indicator-step__item--complete:hover .indicator-step__dot,
.indicator-step__item--complete:hover .indicator-step__text {
  cursor: pointer; }

@media (min-width: 941px) {
  .indicator-step__item--complete:hover .indicator-step__text {
    color: #2e2e2e; } }

.indicator-step__item--complete + .indicator-step__item--complete::before,
.indicator-step__item--complete + .indicator-step__item--active::before, .indicator-step__item--complete::before {
  background: #ff661a; }

.indicator-step__item--active {
  color: #ff661a; }
  .indicator-step__item--active .indicator-step__dot {
    background: #fff; }
    .indicator-step__item--active .indicator-step__dot::after {
      border: 2px solid #ff661a; }
    .indicator-step__item--active .indicator-step__dot-inner {
      border: 2px solid #ff661a; }
      .indicator-step__item--active .indicator-step__dot-inner .icon {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center; }
        @media (min-width: 941px) {
          .indicator-step__item--active .indicator-step__dot-inner .icon .blue-dot {
            height: 10px;
            width: 10px; } }

@media (min-width: 941px) {
  .indicator-step__item {
    -webkit-box-flex: inherit;
    -webkit-flex: inherit;
    -ms-flex: inherit;
    flex: inherit;
    width: 130px; }
    .indicator-step__item::before {
      height: 3px;
      left: -100%;
      right: inherit;
      top: 24px; }
    .indicator-step__item:first-child {
      -webkit-box-flex: inherit;
      -webkit-flex: inherit;
      -ms-flex: inherit;
      flex: inherit; }
  .indicator-step__dot {
    background: #fff;
    border-radius: 50%;
    margin-left: inherit;
    padding: 10px;
    text-align: center;
    width: 50px; }
    .indicator-step__dot-inner {
      border-radius: 50%;
      border: 2px solid #e2e2e2;
      height: 30px;
      text-align: center;
      width: 30px; }
    .indicator-step__dot .icon {
      height: 20px;
      left: 15px;
      right: inherit;
      top: 15px;
      width: 20px; }
  .indicator-step__text {
    font-family: Montserrat, arial, sans-serif;
    font-size: 16px;
    text-transform: none;
    line-height: 25px;
    left: -65px;
    line-height: 25px;
    margin-top: -5px;
    padding: 0 5px;
    -webkit-transform: translateX(-42px);
    transform: translateX(-42px); } }

/*# sourceMappingURL=step.css.map */