uccser/cs-field-guide

View on GitHub
csfieldguide/static/interactives/fitts-law/css/fitts-law.scss

Summary

Maintainability
Test Coverage
#game-view {
    position: relative;
    & [class*="col"].bg-danger {
        cursor: pointer;
    }
}
#end-of-game-controls-div {
    margin-top: 1rem;
}

#clicks-remaining-container {
    text-align: center;
    color: #5e5e5e;
}

%fill-game-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#portrait-warning {
    @extend %fill-game-view;
    background-color: #c90a1d;

    #portrait-warning-text {
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        padding: 1rem;
    }
}

#finish-screen {
    @extend %fill-game-view;
    background-color: #fff;

    #finish-screen-text {
        color: #000;
        font-size: 1rem;
        font-weight: bold;
        padding: 1rem;
    }
}

@media screen and (orientation: landscape) {
    #portrait-warning {
        display: none;
    }
}