Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

html.js {
    .js-hide {
        display:none;
    }
}

textarea {
    display:block;
    width:100%;
    resize:none;
}

.clickable {
    cursor:pointer;
}

%settings-table {
    background:rgb(242,242,242);
    td,th {
        padding:0.2em 0.4em;
    }
    thead {
      font-weight:bold;
        background:rgb(224,224,224);
        > tr {
            > th {
                border:1px solid rgb(200,200,200);
            }
        }
    }
    tbody {
        > tr {
            > td {
                border:1px solid rgb(200,200,200);
            }
            &:nth-of-type(4n-1) {
                background:rgba(40,40,40,0.1);
            }
            &.open + .setting-form {
                display:table-row !important; /* display the setting form for open rows */
            }
            &:focus {
                html.no-js {
                    background:#F2F2C5; /* highlight focused setting for no-js users */
                }
            }
        }
    }
    .setting-form {
        html.js & {
            background:#F2F2C5;
        }
        text-align:center;

        input {
        }
        > td {
            > div {
                padding:1em;
                h1,h2,h3,h4,h5,h6 {
                    margin-top:0;
                }
            }
        }
    }
}

.settings-table {
    @extend %settings-table;
}

.button-bar {
    margin-top:1em;
}

SassMeister-output.css

html.js .js-hide {
  display: none;
}

textarea {
  display: block;
  width: 100%;
  resize: none;
}

.clickable {
  cursor: pointer;
}

.settings-table {
  background: #f2f2f2;
}
.settings-table td, .settings-table th {
  padding: 0.2em 0.4em;
}
.settings-table thead {
  font-weight: bold;
  background: #e0e0e0;
}
.settings-table thead > tr > th {
  border: 1px solid #c8c8c8;
}
.settings-table tbody > tr > td {
  border: 1px solid #c8c8c8;
}
.settings-table tbody > tr:nth-of-type(4n-1) {
  background: rgba(40, 40, 40, 0.1);
}
.settings-table tbody > tr.open + .setting-form {
  display: table-row !important;
  /* display the setting form for open rows */
}
.settings-table tbody > tr:focus html.no-js {
  background: #F2F2C5;
  /* highlight focused setting for no-js users */
}
.settings-table .setting-form {
  text-align: center;
}
html.js .settings-table .setting-form {
  background: #F2F2C5;
}
.settings-table .setting-form > td > div {
  padding: 1em;
}
.settings-table .setting-form > td > div h1, .settings-table .setting-form > td > div h2, .settings-table .setting-form > td > div h3, .settings-table .setting-form > td > div h4, .settings-table .setting-form > td > div h5, .settings-table .setting-form > td > div h6 {
  margin-top: 0;
}

.button-bar {
  margin-top: 1em;
}