multiselect.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  4. * @copyright Copyright (c) 2016, Sergio Bertolín <sbertolin@solidgear.es>
  5. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  6. * @copyright Copyright (c) 2014, Vincent Petry <pvince81@owncloud.com>
  7. * @copyright Copyright (c) 2013, Vincent Petry <pvince81@owncloud.com>
  8. * @copyright Copyright (c) 2013, raghunayyar <me@iraghu.com>
  9. * @copyright Copyright (c) 2013, Victor Dubiniuk <victor.dubiniuk@gmail.com>
  10. * @copyright Copyright (c) 2013, kondou <kondou@ts.unde.re>
  11. * @copyright Copyright (c) 2012, Thomas Tanghus <thomas@tanghus.net>
  12. * @copyright Copyright (c) 2012, Lukas Reschke <lukas@statuscode.ch>
  13. * @copyright Copyright (c) 2012, Jan-Christoph Borchardt <hey@jancborchardt.net>
  14. *
  15. * @license GNU AGPL version 3 or any later version
  16. *
  17. */
  18. ul.multiselectoptions {
  19. background-color: var(--color-main-background);
  20. border: 1px solid var(--color-primary);
  21. border-top: none;
  22. box-shadow: 0 1px 10px var(--color-box-shadow);
  23. padding-top: 8px;
  24. position: absolute;
  25. max-height: 20em;
  26. overflow-y: auto;
  27. z-index: 149;
  28. &.down {
  29. border-bottom-left-radius: 3px;
  30. border-bottom-right-radius: 3px;
  31. width: 100%;
  32. /* do not cut off group names */
  33. box-shadow: 0 1px 10px var(--color-box-shadow);
  34. }
  35. &.up {
  36. border-top-left-radius: 3px;
  37. border-top-right-radius: 3px;
  38. }
  39. > li {
  40. overflow: hidden;
  41. white-space: nowrap;
  42. margin-left: 7px;
  43. input[type='checkbox'] {
  44. + label {
  45. font-weight: normal;
  46. display: inline-block;
  47. width: 100%;
  48. padding: 5px 27px;
  49. margin-left: -27px;
  50. /* to have area around checkbox clickable as well */
  51. text-overflow: ellipsis;
  52. overflow: hidden;
  53. }
  54. &:checked + label {
  55. font-weight: bold;
  56. }
  57. }
  58. }
  59. input.new {
  60. padding-bottom: 3px;
  61. padding-top: 3px;
  62. margin: 0;
  63. }
  64. > li.creator {
  65. padding: 10px;
  66. margin: 0;
  67. font-weight: bold;
  68. > input {
  69. width: 95% !important;
  70. /* do not constrain size of text input */
  71. padding: 5px;
  72. margin: -5px;
  73. }
  74. }
  75. }
  76. /* TODO drop old legacy multiselect! */
  77. div.multiselect:not(.multiselect-vue),
  78. select.multiselect:not(.multiselect-vue) {
  79. display: inline-block;
  80. max-width: 200px;
  81. min-width: 150px !important;
  82. padding-right: 10px;
  83. min-height: 20px;
  84. position: relative;
  85. vertical-align: bottom;
  86. }
  87. select.multiselect {
  88. height: 30px;
  89. min-width: 113px;
  90. }
  91. /* To make a select look like a multiselect until it's initialized */
  92. div.multiselect {
  93. &.active {
  94. background-color: var(--color-main-background);
  95. position: relative;
  96. z-index: 150;
  97. }
  98. &.up {
  99. border-top: 0 none;
  100. border-top-left-radius: 0;
  101. border-top-right-radius: 0;
  102. }
  103. &.down {
  104. border-bottom: none;
  105. border-bottom-left-radius: 0;
  106. border-bottom-right-radius: 0;
  107. }
  108. > span {
  109. &:first-child {
  110. float: left;
  111. margin-right: 32px;
  112. overflow: hidden;
  113. text-overflow: ellipsis;
  114. width: 90%;
  115. white-space: nowrap;
  116. line-height: 20px;
  117. }
  118. &:last-child {
  119. position: absolute;
  120. right: 8px;
  121. top: 8px;
  122. padding: 0 !important;
  123. min-width: 16px;
  124. min-height: 16px;
  125. background-position: center;
  126. }
  127. }
  128. }