inputs.scss 22 KB

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