uccser/cs-field-guide

View on GitHub
csfieldguide/static/interactives/qr-code-generator/css/qr-code-generator.scss

Summary

Maintainability
Test Coverage
#qr-code-interactive {
    #qr-code-container {
        background-color: white;
        padding: 2rem;
        margin-bottom: 1rem;
        border-radius: 0.5rem;
        text-align: center;

        div {
            padding: 0;
            margin: 0;
            border-width: 0;
            border-style: none;
            border-collapse: collapse;
            line-height: 0;
            white-space: nowrap;
        }

        .qr-code-cell {
            cursor: pointer;
            display: inline-block;
            width: 20px;
            height: 20px;

            &.qr-code-cell-black {
                background-color: black;
                &.inverted {
                    background-color: white;
                }
            }
            &.qr-code-cell-white {
                background-color: white;
                &.inverted {
                    background-color: black;
                }
            }
        }
        &.show-changed .qr-code-cell.inverted {
            background-color: red !important;
        }
    }
    #statistics {
        span {
            font-family: monospace;
        }
    }
    #copyright {
        text-align: center;
        font-size: 0.6rem;
        color: grey;
        margin: 1rem 0;
    }
    &.hide-controls {
        .interactive-controls {
            display: none;
        }
    }
}