jamestomasino/stutter

View on GitHub
src-options/main.scss

Summary

Maintainability
Test Coverage
body {
    #stutter-form {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;

        h1 {
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 23px;
            font-style: normal;
            font-variant: normal;
            font-weight: 700;
            line-height: 23px;
        }

        label {
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 17px;
            font-style: normal;
            font-variant: normal;
            font-weight: 700;
            line-height: 23px;
        }

        p {
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-variant: normal;
            font-weight: 400;
            line-height: 23px;
        }

        label {
            display: inline-flex;
            border-bottom: 1px #aaa dotted;
            padding: 10px 0;
            justify-content: space-between;
            width: 100%;

            .attribute {
            }

            input {
                width: 100px;
                text-align: center;
            }
        }

        button {
            display: inline-block;
            width: 200px;
            margin: 25px 0;
            text-align: center;
            font-size: 18px;
        }

        .keybind-label {
            padding: 10px 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 19px;
            font-style: normal;
            font-variant: normal;
            font-weight: 700;
            line-height: 23px;
            border-bottom: 1px #aaa dotted;
        }

        .keybind {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            background-color: #ffffff;
            cursor: pointer;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;

            &.update {
                div {
                    input {
                        background-color: #ffeeab;
                        border-style: solid;
                        outline: 1px solid gray;
                    }
                }
            }

            span {
                font-weight: bold;
                pointer-events: none;
            }

            div {
                display: flex;
                pointer-events: none;

                input {
                    width: 100px;
                    text-align: center;
                    pointer-events: none;
                }
            }
        }
    }
}