/* Global */ /* Content Container */ /* Content box */ /* Navigation */ /* Colors */ /* Accordion */ /* Log */ /* Blockquote */ /* Breadcrumbs */ /* Input */ /* Button */ /* Canvas */ /* Article */ /* Form */ /* Icon */ /* Img */ /* list */ /* pagination */ /* pre */ /* tag */ input, select, textarea, .textarea { border: 1px solid #d6d6d6; } progress { height: 20px; width: 100%; min-width: 150px; } .textarea, .tag-input, textarea, select, input[type="password"], input[type="text"], input[type="datetime"], input[type="email"], input[type="date"], input[type="number"], input[type="datetime-local"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #676a6c; background: #fff; width: 100%; height: 2rem; min-width: 70px; max-width: 100%; padding: 7px; font-size: 1rem; border: 1px solid #d6d6d6; transition: background 0.3s, border 0.3s; box-shadow: inset 1px 1px 4px -2px #c5c5c5; } .textarea:focus, .textarea .active, .tag-input:focus, .tag-input .active, textarea:focus, textarea .active, select:focus, select .active, input[type="password"]:focus, input[type="password"] .active, input[type="text"]:focus, input[type="text"] .active, input[type="datetime"]:focus, input[type="datetime"] .active, input[type="email"]:focus, input[type="email"] .active, input[type="date"]:focus, input[type="date"] .active, input[type="number"]:focus, input[type="number"] .active, input[type="datetime-local"]:focus, input[type="datetime-local"] .active { border-color: #FBA026; } .textarea:disabled, .tag-input:disabled, textarea:disabled, select:disabled, input[type="password"]:disabled, input[type="text"]:disabled, input[type="datetime"]:disabled, input[type="email"]:disabled, input[type="date"]:disabled, input[type="number"]:disabled, input[type="datetime-local"]:disabled { background: #efefef; } input ~ .dropdown { position: absolute; display: none; z-index: 3; } input:focus ~ .dropdown, input ~ .dropdown.active { display: inline-block; } select { cursor: pointer; padding: 0 7px 0 7px; /* overwrites input padding: 7px. don't know why i have to do this! */ } option { line-height: 1rem; } input[type="file"] { border: solid 1rem #fff; width: 100%; max-width: 100%; color: #676a6c; padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input::placeholder { color: #cfcfcf; opacity: 0.5; } input::placeholder, textarea { font-family: 'FontAwesome', serif; } input:invalid { transition: all 0.5s; border-color: #b85450; } textarea, .textarea { overflow: auto; resize: both; min-height: 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } span.checkbox, span.radio { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } span.checkbox label, span.radio label { cursor: pointer; } span.checkbox input[type="checkbox"], span.radio input[type="radio"] { position: relative; vertical-align: middle; bottom: 1px; margin-right: 5px; cursor: pointer; } input[type="range"] { border: none; width: 100%; min-width: 150px; cursor: pointer; } .input { width: 100%; min-width: 120px; display: flex; flex-direction: row; flex-wrap: nowrap; } .input button { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; background: #fff; height: 2rem; font-size: 1rem; min-width: 40px; border-left: solid 1px #d6d6d6; border-top: solid 1px #d6d6d6; border-bottom: solid 1px #d6d6d6; border-right: none; padding: 0; position: relative; vertical-align: middle; flex-grow: 0; flex-shrink: 0; } .input button:hover { background: #fff; } .input i { position: relative; vertical-align: middle; } .input input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1rem; position: relative; vertical-align: middle; flex-grow: 1; flex-shrink: 1; } select.plain { width: auto; margin: 0; padding: 0; border: none; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; box-shadow: none; } .tag-input input { border: none; padding: 0; margin: 0; } .tag-input .tag { padding: 3px; font-size: 0.8rem; } /*# sourceMappingURL=input.css.map */