piano/css/forms.css

115 lines
2.3 KiB
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;
}