inputs.scss 22 KB

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