@import '../colors';

@keyframes pulse {
    0% { background-color: $mdc-deep-orange-500; }
    50% { background-color: $mdc-deep-orange-800; }
    100% { background-color: $mdc-deep-orange-500; }
}

@keyframes pulse-loan {
    0% { background-color: $mdc-blue-grey-500; }
    50% { background-color: $mdc-blue-grey-800; }
    100% { background-color: $mdc-blue-grey-500; }
}

@keyframes pulse-return {
    0% { background-color: $mdc-yellow-700; }
    50% { background-color: $mdc-yellow-900; }
    100% { background-color: $mdc-yellow-700; }
}

.dashboard, .dashboard_graphs {
    h1, h2 {
        display: block;
        text-align: center;
    }
    h2 {
        color: #aaa;
        font-size: 1rem;
    }
    .graphs {
        .graph {
            h3, .description {
                text-align: center;
            }
            h3 {
                display: block;
                font-size: 1.4rem;
            }
            .description {
                height: 1rem;
                color: #aaa;
            }
            .wrapper {
                .render {
                    min-height: 350px;
                    max-height: 350px;
                }
            }
            margin: 10px;
            width: calc(50% - 20px);
            float: left;
            .ct-label {
                fill: #333;
                color: #333;
            }
        }
    }
    & > .row {
        margin-top: 10px;
    }
    .row.module {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        h2 {
            color: #555;
            font-size: 1.5rem;
            text-align: left;
        }
        &:last-child {
            border-bottom: none;
        }
    }
    .recent-actions {
        .actionlist {
            .action {
                padding: 5px;
                .mini {
                    color: #555;
                }
                &:before {
                    font: normal normal normal 14px/1 FontAwesome;
                    padding-right: .5em;
                }
                &.add {
                    &:before {
                        content: $fa-var-plus;
                        color: $mdc-green-600;
                    }
                }
                &.change {
                    &:before {
                        content: $fa-var-pencil;
                        color: $mdc-yellow-600;
                    }
                }
                &.delete {
                    text-decoration: line-through;
                    .timesince {
                        text-decoration: line-through;
                    }
                    &:before {
                        content: $fa-var-trash;
                        color: $mdc-red-600;
                    }
                }
                .timesince {
                    color: #777;
                    float: right;
                }
            }
        }
    }
    .categories {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        color: #fff;
        .category {
            @media only screen and (orientation: portrait) {
                & {
                    flex: 50%;
                    max-width: 50%;
                }
            }
            flex: 33%;
            max-width: 33%;
            padding-left: 5px;
            padding-bottom: 5px;
            opacity: 0.9;
            &.active,
            &:hover {
                opacity: 1;
            }
            &:last-child .wrapper {
                margin-right: 0;
            }
            &.datacenterasset .wrapper {
                background: $mdc-green-500;
                .icon:before {content: $fa-var-server;}
            }
            &.backofficeasset .wrapper {
                background: $mdc-purple-500;
                .icon:before {content: $fa-var-laptop;}
            }
            &.licence .wrapper {
                background: $mdc-blue-500;
                .icon:before {content: $fa-var-key;}
            }
            &.support .wrapper {
                background: $mdc-red-500;
                .icon:before {content: $fa-var-heartbeat;}
            }
            &.domain .wrapper {
                background: $mdc-pink-500;
                .icon:before {content: $fa-var-map;}
            }
            &.ralphuser .wrapper {
                background: $mdc-indigo-500;
                .icon:before {content: $fa-var-users;}
            }
            &.my-equipment .wrapper {
                background: $mdc-teal-500;
                .icon:before {content: $fa-var-cubes;}
            }
            &.equipment-to-accept .wrapper {
                background: $mdc-deep-orange-500;
                .icon:before {content: $fa-var-cubes;}
                animation: pulse 2s infinite;
            }
            &.equipment-to-accept-loan .wrapper {
                background: $mdc-blue-grey-500;
                .icon:before {content: $fa-var-cubes;}
                animation: pulse-loan 2s infinite;
            }
            &.equipment-to-accept-return .wrapper {
                background-color: $mdc-yellow-900;
                .icon:before {content: $fa-var-refresh;}
                animation: pulse-return 2s infinite;
            }
            .wrapper {
                display: block;
                position: relative;
                padding: 10px;
                .name, .value {
                    color: #fff;
                }
                .name {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 25px;
                }
                .value {
                    text-align: right;
                    font-size: 30px;
                }
                .icon {
                    position: absolute;
                    font-size: 75px;
                    top: 10px;
                    right: 45px;
                    color: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }
}
