@wenn/onb/NonBrandLoading.js

onb-core

import React from 'react';
import styled, { keyframes } from 'styled-components';

export const NonBrandLoading = () => (
  <Loading>
    <div />
  </Loading>
);

const indeterminate = keyframes`
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
`;

const indeterminateShort = keyframes`
  0% {
    left: -200%;
    right: 100%; 
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%; 
  }
`;

const Loading = styled.div`
  position: relative;
  height: 4px;
  display: block;
  width: 100vw;
  background-color: #acece6;
  background-clip: padding-box;
  margin: -8px;
  overflow: hidden;

  & > div {
    background-color: #26a69a;
  }

  & > div:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: ${indeterminate} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: ${indeterminate} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  }

  & > div:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: ${indeterminateShort} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: ${indeterminateShort} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
  }
`;

export const ErrorPageContainer = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;

  background-image: linear-gradient(rgb(255, 255, 255) 70%, rgb(255, 237, 212) 100%);

  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
  font-family: 'Montserrat', sans-serif;
`;

export const ErrorPageWrapper = styled.div`
  margin: auto;
  color: black;
  max-width: 480px;
  box-sizing: border-box;
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
`;

export const ErrorPageTitle = styled.h2`
  font-size: 16px;
  text-align: center;
  color: #000000;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.46429em;
`;

export const ErrorPageDescription = styled.p`
  margin: 35px auto;

  color: #000000;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.46429em;
`;

export const ErrorPageLink = styled.a`
  display: block;
  font-family: inherit;
  opacity: 1;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  background-color: rgb(254, 116, 20);
  color: rgb(255, 255, 255);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0.5rem;
  transition: background-color 0.4s ease-in-out 0s;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-image: initial;

  padding: 10px 0px;
  text-decoration: none;

  &:hover,
  &:active {
    background: #a54b0d;
    color: #ffffff;
  }
`;

export const ErrorPageMail = styled.a`
  text-decoration: none;
  &:active {
    text-decoration: none;
  }
`;

export const ErrorPageLogo = styled.img`
  height: 32px;
  max-width: 78px;
  padding-left: 1rem;
  padding-top: 1rem;
`;

export const ErrorPagePhone = styled.span`
  white-space: nowrap;
`;