header.less 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. .ui-grid-top-panel-background {
  2. background-color: @headerBackgroundColor;
  3. }
  4. @topPanelRadius: @gridBorderRadius - @gridBorderWidth;
  5. .ui-grid-header {
  6. border-bottom: 1px solid @borderColor;
  7. box-sizing: border-box;
  8. }
  9. .ui-grid-top-panel {
  10. position: relative;
  11. // border-bottom: 1px solid @borderColor; // #D4D4D4
  12. overflow: hidden; // Disable so menus show up
  13. font-weight: bold;
  14. // .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop);
  15. .ui-grid-top-panel-background;
  16. .border-radius(@topPanelRadius, 0, 0, @topPanelRadius);
  17. }
  18. .ui-grid-header-viewport {
  19. overflow: hidden; // Disable so menus show up
  20. }
  21. .ui-grid-header-canvas {
  22. // Clearfix for floating header cells
  23. &:before, &:after {
  24. content: "";
  25. display: table;
  26. line-height: 0;
  27. }
  28. &:after {
  29. clear:both;
  30. }
  31. // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
  32. }
  33. .ui-grid-header-cell-wrapper {
  34. position: relative;
  35. display: table;
  36. box-sizing: border-box;
  37. height: 100%;
  38. }
  39. .ui-grid-header-cell-row {
  40. display: table-row;
  41. }
  42. .ui-grid-header-cell {
  43. position: relative;
  44. box-sizing: border-box;
  45. background-color: inherit;
  46. border-right: @gridBorderWidth solid;
  47. border-color: @headerVerticalBarColor;
  48. display: table-cell;
  49. &:last-child {
  50. border-right: 0;
  51. }
  52. .user-select(none);
  53. // Default to width 0 so header height can calculate right. Otherwise
  54. // the header cells will flow onto the next line of the header container
  55. // and cause the header height to be calculated as twice the height
  56. // it should be. The column widths are calculated dynamically
  57. width: 0;
  58. .sortable {
  59. cursor: pointer;
  60. }
  61. // Moves the sort priority number closer to the icon
  62. .ui-grid-sort-priority-number {
  63. margin-left: -8px;
  64. }
  65. }
  66. // Make vertical bar in header row fill the height of the cell completely
  67. .ui-grid-header .ui-grid-vertical-bar {
  68. top: 0;
  69. bottom: 0;
  70. }
  71. .ui-grid-column-menu-button {
  72. position: absolute;
  73. right: @gridBorderWidth; // So it doesn't overlay the vertical bar
  74. top: 0;
  75. // bottom: 0;
  76. // .ui-grid-top-panel-background;
  77. .ui-grid-icon-angle-down {
  78. vertical-align: sub;
  79. }
  80. }
  81. .ui-grid-header-cell-last-col {
  82. .ui-grid-cell-contents,
  83. .ui-grid-filter-container,
  84. .ui-grid-column-menu-button,
  85. & + .ui-grid-column-resizer.right {
  86. margin-right: 13px;
  87. }
  88. }
  89. .ui-grid-render-container-right {
  90. .ui-grid-header-cell-last-col {
  91. .ui-grid-cell-contents,
  92. .ui-grid-filter-container,
  93. .ui-grid-column-menu-button,
  94. & + .ui-grid-column-resizer.right {
  95. margin-right: 28px;
  96. }
  97. }
  98. }
  99. .ui-grid-column-menu {
  100. position: absolute;
  101. }
  102. /* Slide up/down animations */
  103. .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid {
  104. &.ng-hide-add, &.ng-hide-remove {
  105. .transition(all, 0.04s, linear);
  106. display: block !important;
  107. }
  108. &.ng-hide-add.ng-hide-add-active,
  109. &.ng-hide-remove {
  110. .transform(translateY(-100%));
  111. }
  112. &.ng-hide-add,
  113. &.ng-hide-remove.ng-hide-remove-active {
  114. .transform(translateY(0));
  115. }
  116. }
  117. /* Slide up/down animations */
  118. .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
  119. &.ng-hide-add, &.ng-hide-remove {
  120. .transition(all, 0.04s, linear);
  121. display: block !important;
  122. }
  123. &.ng-hide-add.ng-hide-add-active,
  124. &.ng-hide-remove {
  125. .transform(translateY(-100%));
  126. }
  127. &.ng-hide-add,
  128. &.ng-hide-remove.ng-hide-remove-active {
  129. .transform(translateY(0));
  130. }
  131. }
  132. .ui-grid-filter-container {
  133. padding: 4px 10px;
  134. position: relative;
  135. .ui-grid-filter-button {
  136. position: absolute;
  137. top: 0;
  138. bottom: 0;
  139. right: 0;
  140. [class^="ui-grid-icon"] {
  141. position: absolute;
  142. top: 50%;
  143. line-height: 32px;
  144. margin-top: -16px;
  145. right: 10px;
  146. opacity: 0.66;
  147. &:hover {
  148. opacity: 1;
  149. }
  150. }
  151. }
  152. .ui-grid-filter-button-select {
  153. position: absolute;
  154. top: 0;
  155. bottom: 0;
  156. right: 0;
  157. [class^="ui-grid-icon"] {
  158. position: absolute;
  159. top: 50%;
  160. line-height: 32px;
  161. margin-top: -16px;
  162. right: 0px;
  163. opacity: 0.66;
  164. &:hover {
  165. opacity: 1;
  166. }
  167. }
  168. }
  169. }
  170. input[type="text"].ui-grid-filter-input {
  171. box-sizing: border-box;
  172. padding: 0 18px 0 0;
  173. margin: 0;
  174. border: 0;
  175. width: 100%;
  176. border: @gridBorderWidth solid @borderColor;
  177. .border-radius(@gridBorderRadius);
  178. &:hover {
  179. border: @gridBorderWidth solid @borderColor;
  180. }
  181. }
  182. select.ui-grid-filter-select {
  183. padding: 0;
  184. margin: 0;
  185. border: 0;
  186. width: 90%;
  187. border: @gridBorderWidth solid @borderColor;
  188. .border-radius(@gridBorderRadius);
  189. &:hover {
  190. border: @gridBorderWidth solid @borderColor;
  191. }
  192. .ui-grid-filter-cancel-button-hidden & {
  193. width: 100%;
  194. }
  195. }