CSS Grid Icon Selected

by Mabuti

HTML

<div class="grid-icon">
    <div class="grid-icon-face">
        <div class="grid-icon-face-box-container">
            <div class="grid-icon-face-box"></div>
            <div class="grid-icon-face-box"></div>
            <div class="grid-icon-face-box"></div>
            <div class="grid-icon-face-box"></div>
        </div>
    </div>
</div>

CSS

.grid-icon {
    height: 32px;
    width: 34px;
    background-color: #FFF;
    line-height: 14px;
}

.grid-icon-face {
    height: 100%;
    width: 100%;
}

.grid-icon-face-box-container {
    margin-top: 2px;
    margin-left: 5px;
    float: left;
}

.grid-icon-face-box {
    background-color: #29ABE1;
    height: 10px;
    width: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: inline-block;
}