inputs.scss 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962
  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, Joas Schilling <coding@schilljs.com>
  5. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  6. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  7. * @copyright Copyright (c) 2015, Joas Schilling <nickvergessen@owncloud.com>
  8. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  9. * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  10. *
  11. * @license GNU AGPL version 3 or any later version
  12. *
  13. */
  14. /* Specifically override browser styles */
  15. input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
  16. font-family: var(--font-face);
  17. }
  18. .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
  19. font-family: var(--font-face) !important;
  20. }
  21. $default-height: 34px;
  22. /* Simple selector to allow easy overriding */
  23. select,
  24. button,
  25. input,
  26. textarea,
  27. div[contenteditable=true],
  28. div[contenteditable=false] {
  29. width: 130px;
  30. min-height: $default-height;
  31. box-sizing: border-box;
  32. }
  33. /**
  34. * color-text-lighter normal state
  35. * color-text-lighter active state
  36. * color-text-maxcontrast disabled state
  37. */
  38. /* Default global values */
  39. div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
  40. select,
  41. button, .button,
  42. input:not([type='range']),
  43. textarea,
  44. div[contenteditable=true],
  45. .pager li a {
  46. margin: 3px 3px 3px 0;
  47. padding: 7px 6px;
  48. font-size: 13px;
  49. background-color: var(--color-main-background);
  50. color: var(--color-main-text);
  51. border: 1px solid var(--color-border-dark);
  52. outline: none;
  53. border-radius: var(--border-radius);
  54. cursor: text;
  55. &:not(:disabled):not(.primary) {
  56. &:hover,
  57. &:focus,
  58. &.active {
  59. /* active class used for multiselect */
  60. border-color: var(--color-primary-element);
  61. outline: none;
  62. }
  63. &:active {
  64. outline: none;
  65. background-color: var(--color-main-background);
  66. color: var(--color-text-light);
  67. }
  68. }
  69. &:disabled {
  70. background-color: var(--color-background-dark);
  71. color: var(--color-text-maxcontrast);
  72. cursor: default;
  73. opacity: 0.5;
  74. }
  75. &:required {
  76. box-shadow: none;
  77. }
  78. &:invalid {
  79. box-shadow: none !important;
  80. border-color: var(--color-error);
  81. }
  82. /* Primary action button, use sparingly */
  83. &.primary {
  84. background-color: var(--color-primary-element);
  85. border-color: var(--color-primary-element);
  86. color: var(--color-primary-text);
  87. cursor: pointer;
  88. /* Apply border to primary button if on log in page (and not in a dark container) or if in header */
  89. #body-login :not(.body-login-container) &,
  90. #header & {
  91. border-color: var(--color-primary-text);
  92. }
  93. &:not(:disabled) {
  94. &:hover,
  95. &:focus,
  96. &:active {
  97. background-color: var(--color-primary-element-light);
  98. border-color: var(--color-primary-element-light);
  99. }
  100. &:active {
  101. color: var(--color-primary-text-dark);
  102. }
  103. }
  104. &:disabled {
  105. // opacity is already defined to .5 if disabled
  106. background-color: var(--color-primary-element);
  107. color: var(--color-primary-text-dark);
  108. cursor: default;
  109. }
  110. }
  111. }
  112. div[contenteditable=false] {
  113. margin: 3px 3px 3px 0;
  114. padding: 7px 6px;
  115. font-size: 13px;
  116. background-color: var(--color-main-background);
  117. color: var(--color-text-lighter);
  118. border: 1px solid var(--color-background-darker);
  119. outline: none;
  120. border-radius: var(--border-radius);
  121. background-color: var(--color-background-dark);
  122. color: var(--color-text-lighter);
  123. cursor: default;
  124. opacity: 0.5;
  125. }
  126. /* Specific override */
  127. input {
  128. &: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']) {
  129. -webkit-appearance: textfield;
  130. -moz-appearance: textfield;
  131. // force height for inline elements like inputs (not textarea, contenteditable...)
  132. height: $default-height;
  133. }
  134. &[type='radio'],
  135. &[type='checkbox'],
  136. &[type='file'],
  137. &[type='image'] {
  138. height: auto;
  139. width: auto;
  140. }
  141. /* Color input doesn't respect the initial height
  142. so we need to set a custom one */
  143. &[type='color'] {
  144. margin: 3px;
  145. padding: 0 2px;
  146. min-height: 30px;
  147. width: 40px;
  148. cursor: pointer;
  149. }
  150. &[type='hidden'] {
  151. height: 0;
  152. width: 0;
  153. }
  154. &[type='time'] {
  155. width: initial;
  156. }
  157. }
  158. /* 'Click' inputs */
  159. select,
  160. button, .button,
  161. input[type='button'],
  162. input[type='submit'],
  163. input[type='reset'] {
  164. padding: 6px 12px;
  165. width: auto;
  166. min-height: $default-height;
  167. cursor: pointer;
  168. box-sizing: border-box;
  169. background-color: var(--color-background-dark);
  170. &:disabled {
  171. cursor: default;
  172. }
  173. }
  174. select,
  175. button, .button {
  176. * {
  177. cursor: pointer;
  178. }
  179. &:disabled {
  180. * {
  181. cursor: default;
  182. }
  183. }
  184. }
  185. /* Buttons */
  186. button, .button,
  187. input[type='button'],
  188. input[type='submit'],
  189. input[type='reset'] {
  190. font-weight: bold;
  191. border-radius: var(--border-radius-pill);
  192. /* Get rid of the inside dotted line in Firefox */
  193. &::-moz-focus-inner {
  194. border: 0;
  195. }
  196. &.error {
  197. background-color: var(--color-error) !important;
  198. border-color: var(--color-error) !important;
  199. color: #fff !important;
  200. }
  201. }
  202. button, .button {
  203. > span {
  204. /* icon position inside buttons */
  205. &[class^='icon-'],
  206. &[class*=' icon-'] {
  207. display: inline-block;
  208. vertical-align: text-bottom;
  209. opacity: 0.5;
  210. }
  211. }
  212. }
  213. textarea, div[contenteditable=true] {
  214. color: var(--color-main-text);
  215. cursor: text;
  216. font-family: inherit;
  217. height: auto;
  218. &:not(:disabled) {
  219. &:active,
  220. &:hover,
  221. &:focus {
  222. border-color: var(--color-background-darker) !important;
  223. background-color: var(--color-main-background) !important;
  224. }
  225. }
  226. }
  227. div[contenteditable=false] {
  228. color: var(--color-text-lighter);
  229. font-family: inherit;
  230. height: auto;
  231. }
  232. /* Override the ugly select arrow */
  233. select {
  234. -webkit-appearance: none;
  235. -moz-appearance: none;
  236. appearance: none;
  237. background: var(--icon-triangle-s-000) no-repeat right 4px center;
  238. background-color: inherit;
  239. outline: 0;
  240. padding-right: 24px !important;
  241. // force height for inline elements like inputs (not textarea, contenteditable...)
  242. height: $default-height;
  243. }
  244. /* Confirm inputs */
  245. input {
  246. &[type='text'],
  247. &[type='password'],
  248. &[type='email'] {
  249. + .icon-confirm {
  250. margin-left: -8px !important;
  251. border-left-color: transparent !important;
  252. border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
  253. background-clip: padding-box;
  254. /* Avoid background under border */
  255. background-color: var(--color-main-background) !important;
  256. opacity: 1;
  257. height: $default-height;
  258. width: $default-height;
  259. padding: 7px 6px;
  260. cursor: pointer;
  261. margin-right: 0;
  262. &:disabled {
  263. cursor: default;
  264. @include icon-color('confirm-fade', 'actions', $color-black, 2, true);
  265. }
  266. }
  267. /* only show confirm borders if input is not focused */
  268. &:not(:active):not(:hover):not(:focus){
  269. &:invalid {
  270. + .icon-confirm {
  271. border-color: var(--color-error);
  272. }
  273. }
  274. + .icon-confirm {
  275. &:active,
  276. &:hover,
  277. &:focus {
  278. border-color: var(--color-primary-element) !important;
  279. border-radius: var(--border-radius) !important;
  280. &:disabled {
  281. border-color: var(--color-background-darker) !important;
  282. }
  283. }
  284. }
  285. }
  286. &:active,
  287. &:hover,
  288. &:focus {
  289. + .icon-confirm {
  290. border-color: var(--color-primary-element) !important;
  291. border-left-color: transparent !important;
  292. /* above previous input */
  293. z-index: 2;
  294. }
  295. }
  296. }
  297. }
  298. /* Various Fixes */
  299. button img,
  300. .button img {
  301. cursor: pointer;
  302. }
  303. select,
  304. .button.multiselect {
  305. font-weight: normal;
  306. }
  307. /* Radio & Checkboxes */
  308. $checkbox-radio-size: 14px;
  309. $color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
  310. $color-checkbox-radio-border: nc-darken($color-main-background, 47%);
  311. $color-checkbox-radio-white: #fff;
  312. input {
  313. &[type='checkbox'],
  314. &[type='radio'] {
  315. &.radio,
  316. &.checkbox {
  317. position: absolute;
  318. left: -10000px;
  319. top: auto;
  320. width: 1px;
  321. height: 1px;
  322. overflow: hidden;
  323. + label {
  324. user-select: none;
  325. }
  326. &:disabled + label,
  327. &:disabled + label:before {
  328. cursor: default;
  329. }
  330. + label:before {
  331. content: '';
  332. display: inline-block;
  333. height: $checkbox-radio-size;
  334. width: $checkbox-radio-size;
  335. vertical-align: middle;
  336. border-radius: 50%;
  337. margin: 0 6px 3px 3px;
  338. border: 1px solid $color-checkbox-radio-border;
  339. }
  340. &:not(:disabled):not(:checked) + label:hover:before,
  341. &:focus + label:before {
  342. border-color: var(--color-primary-element);
  343. }
  344. &:checked + label:before,
  345. &.checkbox:indeterminate + label:before {
  346. /* ^ :indeterminate have a strange behavior on radio,
  347. so we respecified the checkbox class again to be safe */
  348. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  349. background-color: var(--color-primary-element);
  350. border-color: var(--color-primary-element);
  351. }
  352. &:disabled + label:before {
  353. border: 1px solid $color-checkbox-radio-border;
  354. background-color: $color-checkbox-radio-disabled !important; /* override other status */
  355. }
  356. &:checked:disabled + label:before {
  357. background-color: $color-checkbox-radio-disabled;
  358. }
  359. // Detail description below label of checkbox or radio button
  360. & + label ~ em {
  361. display: inline-block;
  362. margin-left: 25px;
  363. }
  364. & + label ~ em:last-of-type {
  365. margin-bottom: $checkbox-radio-size;
  366. }
  367. }
  368. &.checkbox {
  369. + label:before {
  370. border-radius: 1px;
  371. height: $checkbox-radio-size;
  372. width: $checkbox-radio-size;
  373. box-shadow: none !important;
  374. background-position: center;
  375. }
  376. &:checked + label:before {
  377. background-image: url('../img/actions/checkbox-mark.svg');
  378. }
  379. &:indeterminate + label:before {
  380. background-image: url('../img/actions/checkbox-mixed.svg');
  381. }
  382. }
  383. /* We do not use the nc-darken function as this is not supposed to be changed */
  384. &.radio--white,
  385. &.checkbox--white {
  386. + label:before,
  387. &:focus + label:before {
  388. border-color: darken($color-checkbox-radio-white, 27%);
  389. }
  390. &:not(:disabled):not(:checked) + label:hover:before {
  391. border-color: $color-checkbox-radio-white;
  392. }
  393. &:checked + label:before {
  394. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  395. background-color: darken($color-checkbox-radio-white, 14%);
  396. border-color: darken($color-checkbox-radio-white, 14%);
  397. }
  398. &:disabled + label:before {
  399. background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
  400. border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
  401. }
  402. &:checked:disabled + label:before {
  403. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  404. border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
  405. background-color: darken($color-checkbox-radio-white, 27%);
  406. }
  407. }
  408. &.checkbox--white {
  409. &:checked + label:before,
  410. &:indeterminate + label:before {
  411. background-color: transparent !important; /* Override default checked */
  412. border-color: $color-checkbox-radio-white !important; /* Override default checked */
  413. background-image: url('../img/actions/checkbox-mark-white.svg');
  414. }
  415. &:indeterminate + label:before {
  416. background-image: url('../img/actions/checkbox-mixed-white.svg');
  417. }
  418. &:disabled + label:before {
  419. opacity: 0.7; /* No other choice for white background image */
  420. }
  421. }
  422. }
  423. }
  424. /* Select2 overriding. Merged to core with vendor stylesheet */
  425. div.select2-drop {
  426. margin-top: -2px;
  427. background-color: var(--color-main-background);
  428. &.select2-drop-active {
  429. border-color: var(--color-border-dark);
  430. }
  431. .avatar {
  432. display: inline-block;
  433. margin-right: 8px;
  434. vertical-align: middle;
  435. img {
  436. cursor: pointer;
  437. }
  438. }
  439. .select2-search input {
  440. min-height: auto;
  441. background: var(--icon-search-000) no-repeat right center !important;
  442. background-origin: content-box !important;
  443. }
  444. .select2-results {
  445. max-height: 250px;
  446. margin: 0;
  447. padding: 0;
  448. .select2-result-label {
  449. white-space: nowrap;
  450. overflow: hidden;
  451. text-overflow: ellipsis;
  452. span {
  453. cursor: pointer;
  454. }
  455. }
  456. .select2-result,
  457. .select2-no-results,
  458. .select2-searching {
  459. position: relative;
  460. display: list-item;
  461. padding: 12px;
  462. background-color: transparent;
  463. cursor: pointer;
  464. color: var(--color-text-lighter);
  465. }
  466. .select2-result {
  467. &.select2-selected {
  468. background-color: var(--color-background-dark);
  469. }
  470. }
  471. .select2-highlighted {
  472. background-color: var(--color-background-dark);
  473. color: var(--color-main-text);
  474. }
  475. }
  476. }
  477. .select2-chosen,
  478. #select2-drop {
  479. .avatar,
  480. .avatar img {
  481. cursor: pointer;
  482. }
  483. }
  484. div.select2-container-multi {
  485. .select2-choices,
  486. &.select2-container-active .select2-choices {
  487. box-shadow: none;
  488. white-space: nowrap;
  489. text-overflow: ellipsis;
  490. background: var(--color-main-background);
  491. color: var(--color-text-lighter) !important;
  492. box-sizing: content-box;
  493. border-radius: var(--border-radius);
  494. border: 1px solid var(--color-border-dark);
  495. margin: 0;
  496. padding: 2px 0;
  497. min-height: auto;
  498. .select2-search-choice {
  499. line-height: 20px;
  500. padding-left: 5px;
  501. &.select2-search-choice-focus,
  502. &:hover,
  503. &:active,
  504. & {
  505. background-image: none;
  506. background-color: var(--color-main-background);
  507. color: var(--color-text-lighter);
  508. border: 1px solid var(--color-border-dark);
  509. }
  510. .select2-search-choice-close {
  511. display: none;
  512. }
  513. }
  514. .select2-search-field input {
  515. line-height: 20px;
  516. &.select2-active {
  517. background: none !important;
  518. }
  519. }
  520. }
  521. }
  522. div.select2-container {
  523. margin: 3px 3px 3px 0;
  524. &.select2-container-multi .select2-choices {
  525. display: flex;
  526. flex-wrap: wrap;
  527. li {
  528. float: none;
  529. }
  530. }
  531. a.select2-choice {
  532. box-shadow: none;
  533. white-space: nowrap;
  534. text-overflow: ellipsis;
  535. background: var(--color-main-background);
  536. color: var(--color-text-lighter) !important;
  537. box-sizing: content-box;
  538. border-radius: var(--border-radius);
  539. border: 1px solid var(--color-border-dark);
  540. margin: 0;
  541. padding: 2px 0;
  542. padding-left: 6px;
  543. min-height: auto;
  544. .select2-search-choice {
  545. line-height: 20px;
  546. padding-left: 5px;
  547. background-image: none;
  548. background-color: var(--color-background-dark);
  549. border-color: var(--color-background-dark);
  550. .select2-search-choice-close {
  551. display: none;
  552. }
  553. &.select2-search-choice-focus,
  554. &:hover {
  555. background-color: var(--color-border);
  556. border-color: var(--color-border);
  557. }
  558. }
  559. .select2-arrow {
  560. background: none;
  561. border-radius: 0;
  562. border: none;
  563. b {
  564. background: var(--icon-triangle-s-000) no-repeat center !important;
  565. opacity: .5;
  566. }
  567. }
  568. &:hover .select2-arrow b,
  569. &:focus .select2-arrow b,
  570. &:active .select2-arrow b {
  571. opacity: .7;
  572. }
  573. .select2-search-field input {
  574. line-height: 20px;
  575. }
  576. }
  577. }
  578. /* Vue v-select */
  579. .v-select {
  580. margin: 3px 3px 3px 0;
  581. display: inline-block;
  582. .dropdown-toggle {
  583. display: flex !important;
  584. flex-wrap: wrap;
  585. .selected-tag {
  586. line-height: 20px;
  587. padding-left: 5px;
  588. background-image: none;
  589. background-color: var(--color-main-background);
  590. color: var(--color-text-lighter);
  591. border: 1px solid var(--color-border-dark);
  592. display: inline-flex;
  593. align-items: center;
  594. .close {
  595. margin-left: 3px;
  596. }
  597. }
  598. }
  599. .dropdown-menu {
  600. padding: 0;
  601. li {
  602. padding: 5px;
  603. position: relative;
  604. display: list-item;
  605. background-color: transparent;
  606. cursor: pointer;
  607. color: var(--color-text-lighter);
  608. a {
  609. white-space: nowrap;
  610. overflow: hidden;
  611. text-overflow: ellipsis;
  612. height: 25px;
  613. padding: 3px 7px 4px 2px;
  614. margin: 0;
  615. cursor: pointer;
  616. min-height: 1em;
  617. -webkit-touch-callout: none;
  618. -webkit-user-select: none;
  619. -moz-user-select: none;
  620. -ms-user-select: none;
  621. user-select: none;
  622. display: inline-flex;
  623. align-items: center;
  624. background-color: transparent !important;
  625. color: inherit !important;
  626. &::before {
  627. content: ' ';
  628. background-image: var(--icon-checkmark-000);
  629. background-repeat: no-repeat;
  630. background-position: center;
  631. min-width: 16px;
  632. min-height: 16px;
  633. display: block;
  634. opacity: 0.5;
  635. margin-right: 5px;
  636. visibility: hidden;
  637. }
  638. }
  639. &.highlight {
  640. color: var(--color-main-text);
  641. }
  642. &.active > a {
  643. background-color: var(--color-background-dark);
  644. color: var(--color-main-text);
  645. &::before {
  646. visibility: visible;
  647. }
  648. }
  649. }
  650. }
  651. }
  652. /* Vue multiselect */
  653. .multiselect.multiselect-vue {
  654. margin: 1px 2px;
  655. padding: 0 !important;
  656. display: inline-block;
  657. width: 160px;
  658. position: relative;
  659. background-color: var(--color-main-background);
  660. &.multiselect--active {
  661. /* Opened: force display the input */
  662. input.multiselect__input {
  663. opacity: 1 !important;
  664. cursor: text !important;
  665. }
  666. }
  667. &.multiselect--disabled,
  668. &.multiselect--disabled .multiselect__single {
  669. background-color: var(--color-background-dark) !important;
  670. }
  671. .multiselect__tags {
  672. /* space between tags and limit tag */
  673. $space-between: 5px;
  674. display: flex;
  675. flex-wrap: nowrap;
  676. overflow: hidden;
  677. border: 1px solid var(--color-border-dark);
  678. cursor: pointer;
  679. position: relative;
  680. border-radius: var(--border-radius);
  681. height: $default-height;
  682. /* tag wrapper */
  683. .multiselect__tags-wrap {
  684. align-items: center;
  685. display: inline-flex;
  686. overflow: hidden;
  687. max-width: 100%;
  688. position: relative;
  689. padding: 3px $space-between;
  690. flex-grow: 1;
  691. /* no tags or simple select? Show input directly
  692. input is used to display single value */
  693. &:empty ~ input.multiselect__input {
  694. opacity: 1 !important;
  695. /* hide default empty text, show input instead */
  696. + span:not(.multiselect__single) {
  697. display: none;
  698. }
  699. }
  700. /* selected tag */
  701. .multiselect__tag {
  702. flex: 1 0 0;
  703. line-height: 20px;
  704. padding: 1px 5px;
  705. background-image: none;
  706. color: var(--color-text-lighter);
  707. border: 1px solid var(--color-border-dark);
  708. display: inline-flex;
  709. align-items: center;
  710. border-radius: var(--border-radius);
  711. /* require to override the default width
  712. and force the tag to shring properly */
  713. min-width: 0;
  714. max-width: 50%;
  715. max-width: fit-content;
  716. max-width: -moz-fit-content;
  717. /* css hack, detect if more than two tags
  718. if so, flex-basis is set to half */
  719. &:only-child {
  720. flex: 0 1 auto;
  721. }
  722. &:not(:last-child) {
  723. margin-right: $space-between;
  724. }
  725. /* ellipsis the groups to be sure
  726. we display at least two of them */
  727. > span {
  728. white-space: nowrap;
  729. text-overflow: ellipsis;
  730. overflow: hidden;
  731. }
  732. }
  733. }
  734. /* Single select default value */
  735. .multiselect__single {
  736. padding: 8px 10px;
  737. flex: 0 0 100%;
  738. z-index: 1; /* above input */
  739. background-color: var(--color-main-background);
  740. cursor: pointer;
  741. line-height: 17px;
  742. }
  743. /* displayed text if tag limit reached */
  744. .multiselect__strong,
  745. .multiselect__limit {
  746. flex: 0 0 auto;
  747. line-height: 20px;
  748. color: var(--color-text-lighter);
  749. display: inline-flex;
  750. align-items: center;
  751. opacity: .7;
  752. margin-right: $space-between;
  753. /* above the input */
  754. z-index: 5;
  755. }
  756. /* default multiselect input for search and placeholder */
  757. input.multiselect__input {
  758. width: 100% !important;
  759. position: absolute !important;
  760. margin: 0;
  761. opacity: 0;
  762. /* let's leave it on top of tags but hide it */
  763. height: 100%;
  764. border: none;
  765. /* override hide to force show the placeholder */
  766. display: block !important;
  767. /* only when not active */
  768. cursor: pointer;
  769. }
  770. }
  771. /* results wrapper */
  772. .multiselect__content-wrapper {
  773. position: absolute;
  774. width: 100%;
  775. margin-top: -1px;
  776. border: 1px solid var(--color-border-dark);
  777. background: var(--color-main-background);
  778. z-index: 50;
  779. max-height: 175px !important; // 5 items and a half
  780. overflow-y: auto;
  781. .multiselect__content {
  782. width: 100%;
  783. padding: 5px 0;
  784. }
  785. li {
  786. padding: 5px;
  787. position: relative;
  788. display: flex;
  789. align-items: center;
  790. background-color: transparent;
  791. &,
  792. span {
  793. cursor: pointer;
  794. }
  795. > span {
  796. white-space: nowrap;
  797. overflow: hidden;
  798. text-overflow: ellipsis;
  799. height: 20px;
  800. margin: 0;
  801. min-height: 1em;
  802. -webkit-touch-callout: none;
  803. -webkit-user-select: none;
  804. -moz-user-select: none;
  805. -ms-user-select: none;
  806. user-select: none;
  807. display: inline-flex;
  808. align-items: center;
  809. background-color: transparent !important;
  810. color: var(--color-text-lighter);
  811. width: 100%;
  812. /* selected checkmark icon */
  813. &::before {
  814. content: ' ';
  815. background-image: var(--icon-checkmark-000);
  816. background-repeat: no-repeat;
  817. background-position: center;
  818. min-width: 16px;
  819. min-height: 16px;
  820. display: block;
  821. opacity: .5;
  822. margin-right: 5px;
  823. visibility: hidden;
  824. }
  825. &.multiselect__option--disabled {
  826. background-color: var(--color-background-dark);
  827. opacity: .5;
  828. }
  829. /* add the prop tag-placeholder="create" to add the +
  830. * icon on top of an unknown-and-ready-to-be-created entry
  831. */
  832. &[data-select='create'] {
  833. &::before {
  834. background-image: var(--icon-add-000);
  835. visibility: visible;
  836. }
  837. }
  838. &.multiselect__option--highlight {
  839. color: var(--color-main-text);
  840. }
  841. &:not(.multiselect__option--disabled):hover::before {
  842. opacity: .3;
  843. }
  844. &.multiselect__option--selected,
  845. &:not(.multiselect__option--disabled):hover {
  846. &::before {
  847. visibility: visible;
  848. }
  849. }
  850. }
  851. }
  852. }
  853. }
  854. /* Progressbar */
  855. progress {
  856. display: block;
  857. width: 100%;
  858. padding: 0;
  859. border: 0 none;
  860. background-color: var(--color-background-dark);
  861. border-radius: var(--border-radius);
  862. flex-basis: 100%;
  863. height: 5px;
  864. overflow: hidden;
  865. &.warn {
  866. &::-moz-progress-bar {
  867. background: var(--color-error);
  868. }
  869. &::-webkit-progress-value {
  870. background: var(--color-error);
  871. }
  872. }
  873. &::-webkit-progress-bar {
  874. background: transparent;
  875. }
  876. &::-moz-progress-bar {
  877. border-radius: var(--border-radius);
  878. background: var(--color-primary);
  879. transition: 250ms all ease-in-out;
  880. }
  881. &::-webkit-progress-value {
  882. border-radius: var(--border-radius);
  883. background: var(--color-primary);
  884. transition: 250ms all ease-in-out;
  885. }
  886. }
  887. /* Animation */
  888. @keyframes shake {
  889. 10%,
  890. 90% {
  891. transform: translate(-1px);
  892. }
  893. 20%,
  894. 80% {
  895. transform: translate(2px);
  896. }
  897. 30%,
  898. 50%,
  899. 70% {
  900. transform: translate(-4px);
  901. }
  902. 40%,
  903. 60% {
  904. transform: translate(4px);
  905. }
  906. }
  907. .shake {
  908. animation-name: shake;
  909. animation-duration: .7s;
  910. animation-timing-function: ease-out;
  911. }
  912. // Keep the labels for screen readers but hide them since we use placeholders
  913. // Same as .hidden-visually
  914. label.infield {
  915. position: absolute;
  916. left: -10000px;
  917. top: -10000px;
  918. width: 1px;
  919. height: 1px;
  920. overflow: hidden;
  921. }
  922. ::placeholder,
  923. ::-ms-input-placeholder,
  924. ::-webkit-input-placeholder {
  925. color: var(--color-text-maxcontrast);
  926. }