styles.css

@import "node_modules/igniteui-js-blocks/fonts/material-icons.css";
@import "node_modules/igniteui-js-blocks/zero-blocks.material.css";

/* App Loading Container */
html,
body {
    height: 100%;
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/*Main App Layout*/
.navbar-wrapper {
    position: fixed;
    width: 100%;
    height: 126px;
    top: 0;
    background: #fff;
    z-index: 4;
}

.searchbar {
    position: relative;
    padding: 0 16px;
    margin-top: 76px;
}

 .board-fab {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 24;
}

.content,
.content--main,
.content--np,
.content--centered {
    display: flex;
    flex-flow: column;
    flex-basis: 100%;
    height: calc(100% - 56px);
    margin-top: 56px;
    padding: 16px;
}

.content--main {
    margin-top: 136px;
}

.content--np {
    padding: 0;
}

.content--center {
    justify-content: center;
}

.item-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.item-icon {
    margin-right: 16px;
}

.item-info {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
}

.item-arrow {
    height: 24px;
    color: #E3E3E3;
}

.item-info__prefix {
    color: gray;
    font-size: 12px;
}

.item-info__fl {
    font-size: 16px;
    flex-grow: 1;
}

.item-info__sl {
    flex-grow: 1;
    font-size: 14px;
    color: gray;
}

.order-detail__date,
.order-datail__number,
.order-detail__prefix,
.item-info__prefix,
.item-info__fl,
.item-info__sl {
    margin: 0;
}

.order-detail__prefix,
.order-detail__date {
    color: gray;
}

.order-datail__number {
    font-size: 24px;
    line-height: 24px;
}

.order-detail__cbxgroup {
    margin: 40px 0;
}

/*Button Group - TODO: Implemented as component*/
.button-group {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
    align-self: flex-end;
}

.button-group [igButton]~[igButton] {
    margin-left: 8px;
}

/*Barcode Placeholder and image*/
.barcode-image {
    width: 70%;
    max-width: 500px;
    align-self: center;
    margin: 60px 0;
}

.capture-barcode {
    margin: 24px 0;
    align-self: center;
}

/*Modify ig-tab-inner to account for bottom navigation*/
.ig-tab-inner {
    margin-bottom: 56px;
}

.splashscreen {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

/*Spinner animation*/
.spinner {
    animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

.path {
    stroke: #0375BE;
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash 1.4s ease-in-out infinite;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}