Chatterbox-IRC/Chatterbox

View on GitHub
client/stylesheets/toolbar.css

Summary

Maintainability
Test Coverage
.toolbar {
    flex: 0 0 auto;
    background-color: #3f51b5;
    display: flex;
    font-size: 0;
}

.toolbar a {
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
}

.toolbar a:first-child {
    padding-left: 12px;
}

.toolbar a:last-child {
    padding-right: 12px;
}

.toolbar a svg {
    width: 24px;
    height: 24px;
    padding: 12px;
    fill: #fff;
    vertical-align: top;
    display: inline-block;
}

.toolbar a span {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    margin: 14px 0;
    margin-left: -4px;
    margin-right: 12px;
    color: #fff;
}

.toolbar input {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.87);
    width: 100%;
    padding: 0 24px;
    border: none;
    outline: none;
    background: none;
    line-height: 1.5;
}

.toolbar input::-webkit-input-placeholder {
    color: #fff;
    opacity: 0.38;
}

.toolbar input::-webkit-input-placeholder::before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: top;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QzE1LjQxIDEyLjU5IDE2IDExLjExIDE2IDkuNSAxNiA1LjkxIDEzLjA5IDMgOS41IDNTMyA1LjkxIDMgOS41IDUuOTEgMTYgOS41IDE2YzEuNjEgMCAzLjA5LS41OSA0LjIzLTEuNTdsLjI3LjI4di43OWw1IDQuOTlMMjAuNDkgMTlsLTQuOTktNXptLTYgMEM3LjAxIDE0IDUgMTEuOTkgNSA5LjVTNy4wMSA1IDkuNSA1IDE0IDcuMDEgMTQgOS41IDExLjk5IDE0IDkuNSAxNHoiLz48L3N2Zz4=');
    background-size: cover;
}