diff options
author | Jesus Macias Portela <jesus.macias.portela@gmail.com> | 2015-12-03 12:35:49 +0100 |
---|---|---|
committer | Jesus Macias Portela <jesus.macias.portela@gmail.com> | 2015-12-03 12:35:49 +0100 |
commit | dcfbbe4737e9939b6c038f8e48b49957c66a52e8 (patch) | |
tree | 8163f2d7537708d7d5486a093bb3dab9cc63f9d2 /core/css/inputs.css | |
parent | a79ae4ae086c08c75a6d974966458251e2167347 (diff) | |
parent | e62b6c1617886b2cdd7553ea9b119c431e4eb363 (diff) | |
download | nextcloud-server-dcfbbe4737e9939b6c038f8e48b49957c66a52e8.tar.gz nextcloud-server-dcfbbe4737e9939b6c038f8e48b49957c66a52e8.zip |
Merge branch 'master' into issue_20427
Diffstat (limited to 'core/css/inputs.css')
-rw-r--r-- | core/css/inputs.css | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/core/css/inputs.css b/core/css/inputs.css new file mode 100644 index 00000000000..9f440a6c359 --- /dev/null +++ b/core/css/inputs.css @@ -0,0 +1,232 @@ +/* INPUTS */ + +/* specifically override browser styles */ +input, textarea, select, button { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; +} + +input[type="text"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="time"], +input[type="date"], +textarea, +select, +button, .button, +input[type="submit"], +input[type="button"], +#quota, +.pager li a { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; +} +input[type="hidden"] { + height: 0; + width: 0; +} +input[type="text"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="time"], +textarea { + background: #fff; + color: #555; + cursor: text; + font-family: inherit; /* use default ownCloud font instead of default textarea monospace */ +} +input[type="text"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="time"] { + -webkit-appearance:textfield; -moz-appearance:textfield; + -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; +} +input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active, +input[type="password"]:hover, input[type="password"]:focus, input[type="password"]:active, +input[type="number"]:hover, input[type="number"]:focus, input[type="number"]:active, +input[type="search"]:hover, input[type="search"]:focus, input[type="search"]:active, +input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active, +input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active, +input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active, +textarea:hover, textarea:focus, textarea:active { + color: #333; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} + +.ie8 input[type="checkbox"] { margin:0; padding:0; height:auto; width:auto; } +.ie8 input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#111 !important; } + +/* ie8 doesn't support :checked */ +html:not(.ie8) input[type="checkbox"].checkbox { + position: absolute; + left:-10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +html:not(.ie8) input[type="checkbox"].checkbox + label:before { + content: ""; + display: inline-block; + + height: 20px; + width: 20px; + vertical-align: middle; + + background: url('../img/actions/checkbox.svg') left top no-repeat; + opacity: 0.7; +} + +html:not(.ie8) input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } + +html:not(.ie8) input[type="checkbox"].checkbox.u-left +label:before { float: left; } +html:not(.ie8) input[type="checkbox"].checkbox.u-hidden + label:before { display: none; } + +html:not(.ie8) input[type="checkbox"].checkbox--white + label:before { + background-image: url('../img/actions/checkbox-white.svg'); +} + +html:not(.ie8) input[type="checkbox"].checkbox:checked + label:before { + background-image: url('../img/actions/checkbox-checked.svg'); +} + +html:not(.ie8) input[type="checkbox"].checkbox--white:checked + label:before { + background-image: url('../img/actions/checkbox-checked-white.svg'); +} + +html:not(.ie8) input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before { + color:#111 !important; +} + +input[type="time"] { + width: initial; + height: 31px; + -moz-box-sizing: border-box; box-sizing: border-box; +} + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.90); + outline: 0; + padding-right: 24px !important; +} + +select:hover { + background-color: #fefefe; +} + +.select2-choices { + border: 1px solid #ddd; + border-radius: 3px; + color: #333; + background-image: none; +} +.select2-dropdown-open .select2-choices { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border: 1px solid #3875d7; +} + +/* correctly align images inside of buttons */ +input img, button img, .button img { + vertical-align: text-bottom; +} + +input[type="submit"].enabled { + background-color: #66f866; + border: 1px solid #5e5; +} + +.input-button-inline { + position: absolute !important; + right: 0; + background-color: transparent !important; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + opacity: .3; +} + + +/* BUTTONS */ +input[type="submit"], input[type="button"], +button, .button, +#quota, select, .pager li a { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240,240,240,.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240,240,240,.9); + cursor: pointer; +} +select, .button.multiselect { + font-weight: 400; +} +input[type="submit"]:hover, input[type="submit"]:focus, +input[type="button"]:hover, input[type="button"]:focus, +button:hover, button:focus, +.button:hover, .button:focus, +.button a:focus, +select:hover, select:focus, select:active { + background-color: rgba(255, 255, 255, .95); + color: #111; +} +input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; } +#header .button { + border: none; + box-shadow: none; +} + +/* disabled input fields and buttons */ +input:disabled, input:disabled:hover, input:disabled:focus, +button:disabled, button:disabled:hover, button:disabled:focus, +.button:disabled, .button:disabled:hover, .button:disabled:focus, +a.disabled, a.disabled:hover, a.disabled:focus, +textarea:disabled { + background-color: rgba(230,230,230,.9); + color: #999; + cursor: default; +} +input:disabled+label, input:disabled:hover+label, input:disabled:focus+label { + color: #999 !important; + cursor: default; +} + +/* Primary action button, use sparingly */ +.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary { + border: 1px solid #1d2d44; + background-color: #35537a; + color: #ddd; +} +.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover, +.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus { + background-color: #304d76; + color: #fff; +} +.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active, +.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled, +.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover, +.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus { + background-color: #1d2d44; + color: #bbb; +} |