99 lines
2.1 KiB
CSS
99 lines
2.1 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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;
|
||
|
|
}
|