piano/css/forms.css

/**
 * Forms
 */

/** inputs **/
textarea, input[type="date"], input[type="datetime"],
input[type="datetime-local"], input[type="email"], input[type="month"],
input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="text"], input[type="time"],
input[type="url"], input[type="week"] {
    background: white;
    width: 100%;
    margin: 0 0 0.25em;
    padding: 0.25em 0.67em;
    border: 0;

    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    min-height: 2.5em;
}

textarea:focus, input[type="date"]:focus, input[type="datetime"]:focus,
input[type="datetime-local"]:focus, input[type="email"]:focus,
input[type="month"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus,
input[type="url"]:focus, input[type="week"]:focus {
    box-shadow: inset 0 0 0 2px #8dbdf1;
    outline: none;
}

/** buttons **/
.bt {
    margin: 0 0.5em;
    
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    
    font-size: 0.8em;
    line-height: 1em;
    
    padding: 0.75em 2em;
}

/* icon button */
.bt.icon {
    -webkit-appearance: none;

    width: 32px;
    height: 32px;
    
    border: 0;
    padding: 0;
    cursor: pointer;
    color: white;
    
    background: center center no-repeat none;
    text-indent: -10000em;
}

/* primary button */
.bt.primary {
    border: 1px solid #e0e0e0;
    background: transparent;
    color: #e0e0e0;
}

.bt.primary.inverse {
    border-color: #262626;
    color: #262626;
}

.bt.primary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bt.primary.inverse:hover {
    background: rgba(0, 0, 0, 0.1);
}

.bt.primary:active, .bt.secondary:active {
    background: #e0e0e0;
    color: #262626;
} 

.bt.primary.inverse:active, .bt.secondary.inverse:active {
    background: #262626;
    color: #e0e0e0;
}

/* secondary button */
.bt.secondary {
    border: 1px solid transparent;
    background: transparent;
    color: #e0e0e0;
}

.bt.secondary.inverse {
    color: #262626;
}

.bt.secondary:hover, .bt.secondary:active {
    border: 1px solid #e0e0e0;
}

.bt.secondary.inverse:hover, .bt.secondary.inverse:active {
    border-color: #262626;
}

.bt.secondary:active {
    background: #e0e0e0;
    color: #262626;
}