inputs.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
  4. * @copyright Copyright (c) 2016, Jan-Christoph Borchardt <hey@jancborchardt.net>
  5. * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
  6. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  7. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  8. * @copyright Copyright (c) 2015, Joas Schilling <nickvergessen@owncloud.com>
  9. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  10. *
  11. * @license GNU AGPL version 3 or any later version
  12. *
  13. */
  14. /* Specifically override browser styles */
  15. input, textarea, select, button {
  16. font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
  17. }
  18. .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
  19. font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
  20. }
  21. /* Simple selector to allow easy overriding */
  22. select,
  23. button,
  24. input,
  25. textarea {
  26. width: 130px;
  27. min-height: 32px;
  28. box-sizing: border-box;
  29. }
  30. /* Default global values */
  31. select,
  32. button, .button,
  33. input:not([type='range']),
  34. textarea,
  35. #quota, .pager li a {
  36. margin: 3px 3px 3px 0;
  37. padding: 7px 6px;
  38. font-size: 13px;
  39. background-color: #fff;
  40. color: #333;
  41. border: 1px solid #ddd;
  42. outline: none;
  43. border-radius: 3px;
  44. &:not(:disabled):not(.primary) {
  45. /* no border on quota */
  46. &:not(#quota):hover,
  47. &:focus,
  48. &.active {
  49. /* active class used for multiselect */
  50. border-color: #0082c9;
  51. outline: none;
  52. }
  53. &:active {
  54. outline: none;
  55. background-color: #fff;
  56. }
  57. }
  58. &:disabled {
  59. background-color: #eee;
  60. color: #999;
  61. cursor: default;
  62. opacity: 0.5;
  63. }
  64. /* Primary action button, use sparingly */
  65. &.primary {
  66. border: 1px solid #0082c9;
  67. background-color: #00a2e9;
  68. color: #fff;
  69. cursor: pointer;
  70. &:not(:disabled) {
  71. &:hover,
  72. &:focus {
  73. background-color: #0092d9;
  74. }
  75. &:active {
  76. background-color: #00a2e9;
  77. }
  78. }
  79. &:disabled {
  80. background-color: #00a2e9;
  81. color: #bbb;
  82. }
  83. }
  84. }
  85. /* Specific override */
  86. input {
  87. &:not([type='radio']):not([type='checkbox']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not([type='color']):not([type='file']):not([type='image']) {
  88. -webkit-appearance: textfield;
  89. -moz-appearance: textfield;
  90. }
  91. &[type='radio'],
  92. &[type='checkbox'],
  93. &[type='file'],
  94. &[type='image'] {
  95. height: auto;
  96. width: auto;
  97. }
  98. /* Color input doesn't respect the initial height
  99. so we need to set a custom one */
  100. &[type='color'] {
  101. margin: 3px;
  102. padding: 0 2px;
  103. min-height: 30px;
  104. width: 40px;
  105. cursor: pointer;
  106. }
  107. &[type='hidden'] {
  108. height: 0;
  109. width: 0;
  110. }
  111. &[type='time'] {
  112. width: initial;
  113. }
  114. }
  115. /* 'Click' inputs */
  116. select,
  117. button, .button,
  118. input[type='button'],
  119. input[type='submit'],
  120. input[type='reset'] {
  121. padding: 6px 12px;
  122. width: auto;
  123. min-height: 34px;
  124. cursor: pointer;
  125. box-sizing: border-box;
  126. background-color: #fafafa;
  127. }
  128. /* Buttons */
  129. button, .button,
  130. input[type='button'],
  131. input[type='submit'],
  132. input[type='reset'] {
  133. font-weight: bold;
  134. /* Get rid of the ugly firefox dotted line */
  135. &::-moz-focus-inner {
  136. border: 0;
  137. }
  138. }
  139. button, .button {
  140. > span {
  141. /* icon position inside buttons */
  142. &[class^='icon-'],
  143. &[class*=' icon-'] {
  144. display: inline-block;
  145. vertical-align: text-bottom;
  146. opacity: 0.5;
  147. }
  148. }
  149. }
  150. textarea {
  151. color: #555;
  152. cursor: text;
  153. font-family: inherit;
  154. height: auto;
  155. &:not(:disabled) {
  156. &:active,
  157. &:hover,
  158. &:focus {
  159. border-color: #ddd !important;
  160. background-color: #fff !important;
  161. }
  162. }
  163. }
  164. /* Override the ugly select arrow */
  165. select {
  166. -webkit-appearance: none;
  167. -moz-appearance: none;
  168. appearance: none;
  169. background: url('../img/actions/triangle-s.svg') no-repeat right 4px center;
  170. background-color: inherit;
  171. outline: 0;
  172. padding-right: 24px !important;
  173. }
  174. /* Various Fixes */
  175. button img,
  176. .button img {
  177. cursor: pointer;
  178. }
  179. #quota {
  180. color: #555;
  181. }
  182. select,
  183. .button.multiselect {
  184. font-weight: 400;
  185. }
  186. /* Radio & Checkboxes */
  187. input {
  188. &[type='checkbox'],
  189. &[type='radio'] {
  190. &.radio,
  191. &.checkbox {
  192. position: absolute;
  193. left: -10000px;
  194. top: auto;
  195. width: 1px;
  196. height: 1px;
  197. overflow: hidden;
  198. + label {
  199. user-select: none;
  200. }
  201. &:disabled + label,
  202. &:disabled + label:before {
  203. cursor: default;
  204. }
  205. + label:before {
  206. content: '';
  207. display: inline-block;
  208. height: 12px;
  209. width: 12px;
  210. vertical-align: middle;
  211. border-radius: 50%;
  212. margin: 3px;
  213. margin-top: 1px;
  214. border: 1px solid #888;
  215. }
  216. &:not(:disabled):not(:checked) + label:hover:before,
  217. &:focus + label:before {
  218. border-color: #0082c9;
  219. }
  220. &:checked + label:before,
  221. &.checkbox:indeterminate + label:before {
  222. /* ^ :indeterminate have a strange behavior on radio,
  223. so we respecified the checkbox class again to be safe */
  224. box-shadow: inset 0px 0px 0px 2px #fff;
  225. background-color: #0082c9;
  226. border-color: #0082c9
  227. }
  228. &:disabled + label:before {
  229. background-color: #ccc !important; /* override other status */
  230. }
  231. &:checked:disabled + label:before {
  232. box-shadow: inset 0px 0px 0px 2px #fff;
  233. border-color: #aaa;
  234. background-color: #bbb;
  235. }
  236. }
  237. &.checkbox {
  238. + label:before {
  239. border-radius: 1px;
  240. height: 10px;
  241. width: 10px;
  242. box-shadow: none !important;
  243. background-position: center;
  244. }
  245. &:checked + label:before {
  246. background-image: url('../img/actions/checkbox-mark.svg');
  247. }
  248. &:indeterminate + label:before {
  249. background-image: url('../img/actions/checkbox-mixed.svg');
  250. }
  251. &:indeterminate:disabled + label:before {
  252. border-color: #888;
  253. }
  254. }
  255. &.radio--white,
  256. &.checkbox--white {
  257. + label:before {
  258. border-color: #ddd;
  259. }
  260. &:not(:disabled):not(:checked) + label:hover:before,
  261. &:focus + label:before {
  262. border-color: #fff;
  263. }
  264. &:checked + label:before {
  265. box-shadow: inset 0px 0px 0px 2px #000;
  266. background-color: #eee;
  267. border-color: #eee
  268. }
  269. &:disabled + label:before {
  270. background-color: #666 !important; /* override other status */
  271. border-color: #999 !important; /* override other status */
  272. }
  273. &:checked:disabled + label:before {
  274. box-shadow: inset 0px 0px 0px 2px #000;
  275. border-color: #666;
  276. background-color: #222;
  277. }
  278. }
  279. &.checkbox--white {
  280. &:checked + label:before,
  281. &:indeterminate + label:before {
  282. background-color: transparent !important; /* Override default checked */
  283. border-color: #fff !important; /* Override default checked */
  284. background-image: url('../img/actions/checkbox-mark-white.svg');
  285. }
  286. &:indeterminate + label:before {
  287. background-image: url('../img/actions/checkbox-mixed-white.svg');
  288. }
  289. &:checked:disabled + label:after {
  290. border-color: #aaa;
  291. }
  292. &:indeterminate:disabled + label:after {
  293. background-color: #aaa;
  294. }
  295. }
  296. }
  297. }
  298. /* Select2 overriding. Merged to core with vendor stylesheet */
  299. .select2-drop {
  300. margin-top: -2px;
  301. &.select2-drop-active {
  302. border-color: #ddd;
  303. }
  304. .avatar {
  305. display: inline-block;
  306. margin-right: 8px;
  307. vertical-align: middle;
  308. img {
  309. cursor: pointer;
  310. }
  311. }
  312. .select2-search input {
  313. min-height: auto;
  314. background: url('../img/actions/search.svg') no-repeat right center !important;
  315. background-origin: content-box !important;
  316. }
  317. .select2-results {
  318. max-height: 250px;
  319. margin: 0;
  320. padding: 0;
  321. .select2-result-label {
  322. white-space: nowrap;
  323. overflow: hidden;
  324. text-overflow: ellipsis;
  325. span {
  326. cursor: pointer;
  327. }
  328. }
  329. .select2-result,
  330. .select2-no-results,
  331. .select2-searching {
  332. position: relative;
  333. display: list-item;
  334. padding: 12px;
  335. background-color: #fff;
  336. cursor: pointer;
  337. color: #222;
  338. }
  339. .select2-result {
  340. &.select2-selected {
  341. background-color: #f8f8f8;
  342. }
  343. &.select2-highlighted {
  344. background-color: #f8f8f8;
  345. color: #000;
  346. }
  347. }
  348. }
  349. }
  350. .select2-chosen,
  351. #select2-drop {
  352. .avatar,
  353. .avatar img {
  354. cursor: pointer;
  355. }
  356. }
  357. .select2-container-multi {
  358. .select2-choices,
  359. &.select2-container-active .select2-choices {
  360. box-shadow: none;
  361. white-space: nowrap;
  362. text-overflow: ellipsis;
  363. background: #fff;
  364. color: #555;
  365. box-sizing: content-box;
  366. border-radius: 3px;
  367. border: 1px solid #ddd;
  368. margin: 0;
  369. padding: 2px 0;
  370. min-height: auto;
  371. .select2-search-choice {
  372. line-height: 20px;
  373. padding-left: 5px;
  374. &.select2-search-choice-focus,
  375. &:hover,
  376. &:active,
  377. & {
  378. background-image: none;
  379. background-color: #fff;
  380. color: #333;
  381. border: 1px solid #ddd;
  382. }
  383. .select2-search-choice-close {
  384. display: none;
  385. }
  386. }
  387. .select2-search-field input {
  388. line-height: 20px;
  389. }
  390. }
  391. }
  392. .select2-container {
  393. margin: 3px 3px 3px 0;
  394. &.select2-container-multi .select2-choices {
  395. display: flex;
  396. flex-wrap: wrap;
  397. li {
  398. float: none;
  399. }
  400. }
  401. .select2-choice {
  402. box-shadow: none;
  403. white-space: nowrap;
  404. text-overflow: ellipsis;
  405. background: #fff;
  406. color: #555;
  407. box-sizing: content-box;
  408. border-radius: 3px;
  409. border: 1px solid #ddd;
  410. margin: 0;
  411. padding: 2px 0;
  412. padding-left: 6px;
  413. min-height: auto;
  414. .select2-search-choice {
  415. line-height: 20px;
  416. padding-left: 5px;
  417. background-image: none;
  418. background-color: #f8f8f8;
  419. border-color: #f8f8f8;
  420. .select2-search-choice-close {
  421. display: none;
  422. }
  423. &.select2-search-choice-focus,
  424. &:hover {
  425. background-color: #f0f0f0;
  426. border-color: #f0f0f0;
  427. }
  428. }
  429. .select2-arrow {
  430. background: none;
  431. border-radius: 0;
  432. border: none;
  433. b {
  434. background: url('../img/actions/triangle-s.svg') no-repeat center !important;
  435. opacity: .5;
  436. }
  437. }
  438. &:hover .select2-arrow b,
  439. &:focus .select2-arrow b,
  440. &:active .select2-arrow b {
  441. opacity: .7;
  442. }
  443. .select2-search-field input {
  444. line-height: 20px;
  445. }
  446. }
  447. }
  448. /* Select menus - TODO: move to jquery-ui-fixes.css
  449. ----------------------------------*/
  450. .ui-menu {
  451. padding: 0;
  452. .ui-menu-item a {
  453. &.ui-state-focus, &.ui-state-active {
  454. font-weight: inherit;
  455. margin: 0;
  456. }
  457. }
  458. }
  459. .ui-widget-content {
  460. background: #fff;
  461. border-top: none;
  462. }
  463. .ui-corner-all {
  464. border-radius: 0;
  465. border-bottom-left-radius: 3px;
  466. border-bottom-right-radius: 3px;
  467. }
  468. .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  469. border: none;
  470. background: #f8f8f8;
  471. }
  472. /* Animation */
  473. @keyframes shake {
  474. 10%,
  475. 90% {
  476. transform: translate(-1px);
  477. }
  478. 20%,
  479. 80% {
  480. transform: translate(2px);
  481. }
  482. 30%,
  483. 50%,
  484. 70% {
  485. transform: translate(-4px);
  486. }
  487. 40%,
  488. 60% {
  489. transform: translate(4px);
  490. }
  491. }
  492. .shake {
  493. animation-name: shake;
  494. animation-duration: .7s;
  495. animation-timing-function: ease-out;
  496. }