/** * 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; }