multiselect.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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: #fff;
  20. border: 1px solid #ddd;
  21. border-top: none;
  22. box-shadow: 0 1px 1px #ddd;
  23. padding-top: 8px;
  24. position: absolute;
  25. max-height: 20em;
  26. overflow-y: auto;
  27. z-index: 49;
  28. &.down {
  29. border-bottom-left-radius: 8px;
  30. border-bottom-right-radius: 8px;
  31. width: 100%;
  32. /* do not cut off group names */
  33. -webkit-box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4);
  34. -moz-box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4);
  35. box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4);
  36. }
  37. &.up {
  38. border-top-left-radius: 8px;
  39. border-top-right-radius: 8px;
  40. }
  41. > li {
  42. overflow: hidden;
  43. white-space: nowrap;
  44. margin-left: 7px;
  45. input[type='checkbox'] {
  46. + label {
  47. font-weight: normal;
  48. display: inline-block;
  49. width: 100%;
  50. padding: 5px 27px;
  51. margin-left: -27px;
  52. /* to have area around checkbox clickable as well */
  53. text-overflow: ellipsis;
  54. overflow: hidden;
  55. }
  56. &:checked + label {
  57. font-weight: bold;
  58. }
  59. }
  60. }
  61. input.new {
  62. padding-bottom: 3px;
  63. padding-top: 3px;
  64. margin: 0;
  65. }
  66. > li.creator {
  67. padding: 10px;
  68. margin: 0;
  69. font-weight: bold;
  70. > input {
  71. width: 95% !important;
  72. /* do not constrain size of text input */
  73. padding: 5px;
  74. margin: -5px;
  75. }
  76. }
  77. }
  78. div.multiselect,
  79. select.multiselect {
  80. display: inline-block;
  81. max-width: 200px;
  82. min-width: 150px !important;
  83. padding-right: 10px;
  84. min-height: 20px;
  85. position: relative;
  86. vertical-align: bottom;
  87. }
  88. select.multiselect {
  89. height: 30px;
  90. min-width: 113px;
  91. }
  92. /* To make a select look like a multiselect until it's initialized */
  93. div.multiselect {
  94. &.active {
  95. background-color: #fff;
  96. position: relative;
  97. z-index: 50;
  98. }
  99. &.up {
  100. border-top: 0 none;
  101. border-top-left-radius: 0;
  102. border-top-right-radius: 0;
  103. }
  104. &.down {
  105. border-bottom: none;
  106. border-bottom-left-radius: 0;
  107. border-bottom-right-radius: 0;
  108. }
  109. > span {
  110. &:first-child {
  111. float: left;
  112. margin-right: 32px;
  113. overflow: hidden;
  114. text-overflow: ellipsis;
  115. width: 90%;
  116. white-space: nowrap;
  117. }
  118. &:last-child {
  119. position: absolute;
  120. right: 8px;
  121. top: 8px;
  122. }
  123. }
  124. }