1
0

inputs.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. /* INPUTS */
  2. /* specifically override browser styles */
  3. input, textarea, select, button {
  4. font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
  5. }
  6. input[type="text"],
  7. input[type="password"],
  8. input[type="search"],
  9. input[type="number"],
  10. input[type="email"],
  11. input[type="tel"],
  12. input[type="url"],
  13. input[type="time"],
  14. input[type="date"],
  15. textarea,
  16. select,
  17. button, .button,
  18. input[type="submit"],
  19. input[type="button"],
  20. #quota,
  21. .pager li a {
  22. width: 130px;
  23. margin: 3px 3px 3px 0;
  24. padding: 7px 6px 5px;
  25. font-size: 13px;
  26. background-color: #fff;
  27. color: #333;
  28. border: 1px solid #ddd;
  29. outline: none;
  30. border-radius: 3px;
  31. }
  32. input[type="hidden"] {
  33. height: 0;
  34. width: 0;
  35. }
  36. input[type="text"],
  37. input[type="password"],
  38. input[type="search"],
  39. input[type="number"],
  40. input[type="email"],
  41. input[type="tel"],
  42. input[type="url"],
  43. input[type="time"],
  44. textarea {
  45. background: #fff;
  46. color: #555;
  47. cursor: text;
  48. font-family: inherit; /* use default ownCloud font instead of default textarea monospace */
  49. }
  50. input[type="text"],
  51. input[type="password"],
  52. input[type="search"],
  53. input[type="number"],
  54. input[type="email"],
  55. input[type="tel"],
  56. input[type="url"],
  57. input[type="time"] {
  58. -webkit-appearance:textfield;
  59. -moz-appearance:textfield;
  60. box-sizing:content-box;
  61. }
  62. input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active,
  63. input[type="password"]:hover, input[type="password"]:focus, input[type="password"]:active,
  64. input[type="number"]:hover, input[type="number"]:focus, input[type="number"]:active,
  65. input[type="search"]:hover, input[type="search"]:focus, input[type="search"]:active,
  66. input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active,
  67. input[type="tel"]:hover, input[type="tel"]:focus, input[type="tel"]:active,
  68. input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active,
  69. input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active,
  70. textarea:hover, textarea:focus, textarea:active {
  71. color: #333;
  72. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  73. opacity: 1;
  74. }
  75. input[type="checkbox"].checkbox {
  76. position: absolute;
  77. left:-10000px;
  78. top: auto;
  79. width: 1px;
  80. height: 1px;
  81. overflow: hidden;
  82. }
  83. input[type="checkbox"].checkbox + label:before {
  84. content: "";
  85. display: inline-block;
  86. height: 20px;
  87. width: 20px;
  88. vertical-align: middle;
  89. background: url('../img/actions/checkbox.svg') left top no-repeat;
  90. opacity: 0.7;
  91. }
  92. input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; }
  93. input[type="checkbox"].checkbox.u-left +label:before { float: left; }
  94. input[type="checkbox"].checkbox.u-hidden + label:before { display: none; }
  95. input[type="checkbox"].checkbox:checked + label:before {
  96. background-image: url('../img/actions/checkbox-checked.svg');
  97. }
  98. input[type="checkbox"].checkbox:indeterminate + label:before {
  99. background-image: url('../img/actions/checkbox-mixed.svg');
  100. }
  101. input[type="checkbox"].checkbox:disabled + label:before {
  102. background-image: url('../img/actions/checkbox-disabled.svg');
  103. }
  104. input[type="checkbox"].checkbox:checked:disabled + label:before {
  105. background-image: url('../img/actions/checkbox-checked-disabled.svg');
  106. }
  107. input[type="checkbox"].checkbox:indeterminate:disabled + label:before {
  108. background-image: url('../img/actions/checkbox-mixed-disabled.svg');
  109. }
  110. input[type="checkbox"].checkbox--white + label:before {
  111. background-image: url('../img/actions/checkbox-white.svg');
  112. }
  113. input[type="checkbox"].checkbox--white:checked + label:before {
  114. background-image: url('../img/actions/checkbox-checked-white.svg');
  115. }
  116. input[type="checkbox"].checkbox--white:indeterminate + label:before {
  117. background-image: url('../img/actions/checkbox-mixed-white.svg');
  118. }
  119. input[type="checkbox"].checkbox--white:disabled + label:before {
  120. background-image: url('../img/actions/checkbox-disabled-white.svg');
  121. }
  122. input[type="checkbox"].checkbox--white:checked:disabled + label:before {
  123. background-image: url('../img/actions/checkbox-checked-disabled.svg');
  124. }
  125. input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before {
  126. background-image: url('../img/actions/checkbox-mixed-disabled.svg');
  127. }
  128. input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before {
  129. color:#111 !important;
  130. }
  131. input[type="radio"].radio {
  132. position: absolute;
  133. left:-10000px;
  134. top: auto;
  135. width: 1px;
  136. height: 1px;
  137. overflow: hidden;
  138. }
  139. input[type="radio"].radio + label:before {
  140. content: "";
  141. display: inline-block;
  142. height: 20px;
  143. width: 20px;
  144. vertical-align: middle;
  145. background: url('../img/actions/radio.svg') left top no-repeat;
  146. opacity: 0.7;
  147. }
  148. input[type="radio"].radio:checked + label:before {
  149. background-image: url('../img/actions/radio-checked.svg');
  150. }
  151. input[type="radio"].radio:disabled + label:before {
  152. background-image: url('../img/actions/radio-disabled.svg');
  153. }
  154. input[type="radio"].radio:checked:disabled + label:before {
  155. background-image: url('../img/actions/radio-checked-disabled.svg');
  156. }
  157. input[type="radio"].radio--white + label:before {
  158. background-image: url('../img/actions/radio-white.svg');
  159. }
  160. input[type="radio"].radio--white:checked + label:before {
  161. background-image: url('../img/actions/radio-checked.svg');
  162. }
  163. input[type="radio"].radio--white:disabled + label:before {
  164. background-image: url('../img/actions/radio-disabled.svg');
  165. }
  166. input[type="radio"].radio--white:checked:disabled + label:before {
  167. background-image: url('../img/actions/radio-checked-disabled.svg');
  168. }
  169. input[type="time"] {
  170. width: initial;
  171. height: 31px;
  172. box-sizing: border-box;
  173. }
  174. select {
  175. -webkit-appearance: none;
  176. -moz-appearance: none;
  177. appearance: none;
  178. background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.90);
  179. outline: 0;
  180. padding-right: 24px !important;
  181. }
  182. select:hover {
  183. background-color: #fefefe;
  184. }
  185. .select2-choices {
  186. border: 1px solid #ddd;
  187. border-radius: 3px;
  188. color: #333;
  189. background-image: none;
  190. }
  191. .select2-dropdown-open .select2-choices {
  192. border-bottom-left-radius: 0;
  193. border-bottom-right-radius: 0;
  194. border: 1px solid #3875d7;
  195. }
  196. /* correctly align images inside of buttons */
  197. input img, button img, .button img {
  198. vertical-align: text-bottom;
  199. }
  200. input[type="submit"].enabled {
  201. background-color: #66f866;
  202. border: 1px solid #5e5;
  203. }
  204. .input-button-inline {
  205. position: absolute !important;
  206. right: 0;
  207. background-color: transparent !important;
  208. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  209. opacity: .3;
  210. }
  211. /* BUTTONS */
  212. input[type="submit"], input[type="button"],
  213. button, .button,
  214. #quota, select, .pager li a {
  215. width: auto;
  216. min-width: 25px;
  217. padding: 5px;
  218. background-color: rgba(240,240,240,.9);
  219. font-weight: 600;
  220. color: #555;
  221. border: 1px solid rgba(240,240,240,.9);
  222. cursor: pointer;
  223. }
  224. select, .button.multiselect {
  225. font-weight: 400;
  226. }
  227. input[type="submit"]:hover, input[type="submit"]:focus,
  228. input[type="button"]:hover, input[type="button"]:focus,
  229. button:hover, button:focus,
  230. .button:hover, .button:focus,
  231. .button a:focus,
  232. select:hover, select:focus, select:active {
  233. background-color: rgba(255, 255, 255, .95);
  234. color: #111;
  235. }
  236. input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; }
  237. #header .button {
  238. border: none;
  239. box-shadow: none;
  240. }
  241. /* disabled input fields and buttons */
  242. input:disabled, input:disabled:hover, input:disabled:focus,
  243. button:disabled, button:disabled:hover, button:disabled:focus,
  244. .button:disabled, .button:disabled:hover, .button:disabled:focus,
  245. a.disabled, a.disabled:hover, a.disabled:focus,
  246. textarea:disabled {
  247. background-color: rgba(230,230,230,.9);
  248. color: #999;
  249. cursor: default;
  250. }
  251. input:disabled+label, input:disabled:hover+label, input:disabled:focus+label {
  252. color: #999 !important;
  253. cursor: default;
  254. }
  255. /* Primary action button, use sparingly */
  256. .primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary {
  257. border: 1px solid #1d2d44;
  258. background-color: #35537a;
  259. color: #ddd;
  260. }
  261. .primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
  262. .primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {
  263. background-color: #304d76;
  264. color: #fff;
  265. }
  266. .primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,
  267. .primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,
  268. .primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,
  269. .primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {
  270. background-color: #1d2d44;
  271. color: #bbb;
  272. }