hierarchical_select.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. /* The hierarchical select. */
  2. .hierarchical-select-wrapper .hierarchical-select .selects {
  3. float: left; /* If a block is floated, it won't consume as much width as
  4. available, only just enough. This allows the grippie to
  5. perfectly scale with the with consumed by the selects. */
  6. }
  7. .hierarchical-select-wrapper .hierarchical-select .selects .grippie {
  8. clear: left;
  9. height: 9px;
  10. overflow: hidden;
  11. background: #eee url(images/grippie.png) no-repeat center 2px;
  12. border: 1px solid #ddd;
  13. border-top-width: 0;
  14. cursor: s-resize;
  15. margin-right: 0.5em; /* Give the grippie the same margin as each select. */
  16. min-width: 50px; /* Hack for IE, makes the grip usable, but not yet the same as in other browsers. */
  17. }
  18. .hierarchical-select-wrapper .hierarchical-select select,
  19. .hierarchical-select-wrapper .hierarchical-select .add-to-dropbox,
  20. .hierarchical-select-wrapper .hierarchical-select .create-new-item {
  21. margin: 0;
  22. margin-right: .5em;
  23. margin-bottom: 3px;
  24. float: left;
  25. }
  26. /* The flat select (only used in GET forms). */
  27. .hierarchical-select-wrapper .flat-select {
  28. display: none;
  29. }
  30. /* The pseudo-modal window for creating a new item or new level. */
  31. .hierarchical-select-wrapper .hierarchical-select .create-new-item {
  32. padding: .7em;
  33. border: 2px outset gray;
  34. }
  35. .hierarchical-select-wrapper .hierarchical-select .create-new-item {
  36. width: 11em;
  37. }
  38. .hierarchical-select-wrapper .hierarchical-select .create-new-item-create,
  39. .hierarchical-select-wrapper .hierarchical-select .create-new-item-cancel {
  40. float: right;
  41. margin: 0;
  42. margin-left: .4em;
  43. }
  44. .hierarchical-select-wrapper .hierarchical-select .create-new-item-input {
  45. width: 10.5em;
  46. margin: 0;
  47. margin-bottom: 1em;
  48. float: left;
  49. clear: right;
  50. }
  51. /* Level labels styles. */
  52. .hierarchical-select-level-labels-style-bold .hierarchical-select select option.level-label {
  53. font-weight: bold;
  54. }
  55. .hierarchical-select-level-labels-style-inversed .hierarchical-select select option.level-label {
  56. background-color: #000000;
  57. color: #FFFFFF;
  58. }
  59. .hierarchical-select-level-labels-style-underlined .hierarchical-select select option.level-label {
  60. text-decoration: underline;
  61. }
  62. /* Child level indicator. */
  63. .hierarchical-select-wrapper .hierarchical-select option.has-children {
  64. background: url(images/arrow.png) no-repeat right center;
  65. padding-right: 20px;
  66. }
  67. /* Dropbox limit warning.*/
  68. p.hierarchical-select-dropbox-limit-warning {
  69. padding: 0;
  70. color: #F7A54F;
  71. font-size: 110%;
  72. padding-left: .5em;
  73. }
  74. /* The dropbox table. */
  75. .hierarchical-select-wrapper .dropbox-title {
  76. font-size: 115%;
  77. color: #898989;
  78. margin-bottom: 0.2em;
  79. }
  80. .hierarchical-select-wrapper .dropbox {
  81. display: inline-block;
  82. margin: .5em 0;
  83. }
  84. .hierarchical-select-wrapper .dropbox table {
  85. margin: 0;
  86. width: auto;
  87. max-width: 100%;
  88. min-width: 20em;
  89. color: gray;
  90. font-size: 90%;
  91. border: 1px solid gray;
  92. }
  93. tr.dropbox-entry {
  94. line-height: 1.3em;
  95. padding: .3em .6em;
  96. }
  97. tr.dropbox-entry.even {
  98. background-color: transparent;
  99. border-bottom: 1px solid #CCCCCC;
  100. }
  101. tr.dropbox-entry.odd {
  102. background-color: #EDF5FA;
  103. border-bottom: 1px solid #CCCCCC;
  104. }
  105. tr.dropbox-entry.first {
  106. border-top: 1px solid gray;
  107. }
  108. tr.dropbox-entry.last {
  109. border-bottom: 1px solid gray;
  110. }
  111. .dropbox-selected-item {
  112. font-weight: bold;
  113. }
  114. .hierarchical-select-item-separator {
  115. padding-left: .5em;
  116. padding-right: .5em;
  117. }
  118. td.dropbox-remove *,
  119. td.dropbox-remove a:link,
  120. td.dropbox-remove a:visited {
  121. color: #F7A54F;
  122. text-decoration: none;
  123. }
  124. td.dropbox-remove a:hover {
  125. text-decoration: underline;
  126. }
  127. tr.dropbox-is-empty {
  128. padding: .5em 1em;
  129. }
  130. /* The "Update" button and help text (used when Javascript is disabled). */
  131. .hierarchical-select-wrapper .nojs .update-button {
  132. margin: 0 0 1em;
  133. }
  134. .hierarchical-select-wrapper .nojs .help-text {
  135. font-size: 90%;
  136. color: transparent;
  137. display: block;
  138. border: 1px dotted black;
  139. overflow: hidden;
  140. width: 34em;
  141. height: 1.2em;
  142. padding: .6em;
  143. line-height: normal;
  144. }
  145. .hierarchical-select-wrapper .nojs .help-text:hover {
  146. height: auto;
  147. width: auto;
  148. min-width: 25em;
  149. max-width: 45em;
  150. color: gray;
  151. }
  152. .hierarchical-select-wrapper .nojs .help-text .ask-to-hover {
  153. color: gray;
  154. font-style: italic;
  155. }
  156. .hierarchical-select-wrapper .nojs .help-text:hover .ask-to-hover {
  157. display: none;
  158. }
  159. .hierarchical-select-wrapper .nojs .help-text .highlight {
  160. text-decoration: underline;
  161. }
  162. .hierarchical-select-wrapper .nojs .help-text .warning {
  163. color: red;
  164. }
  165. .hierarchical-select-wrapper .nojs .help-text .solutions {
  166. margin: 0;
  167. padding: 0;
  168. }
  169. /* The 'waiting' class is set dynamically, during a callback to the server. */
  170. .hierarchical-select-wrapper.waiting {
  171. opacity: 0.5;
  172. /* IE doesn't support CSS 2 properly. */
  173. zoom: 1;
  174. filter: alpha(opacity=50);
  175. }
  176. /* Use a monospace font for the import/export config code text areas. */
  177. .hierarchical-select-config-code {
  178. font-family: 'Monaco', 'Lucida Console', 'Consolas', monospace;
  179. }