You are here

slick.grid.css in Slickgrid 6

/*
IMPORTANT:
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
classes should alter those!
*/


.slick-header.ui-state-default, .slick-headerrow.ui-state-default {
	width: 100%;
	overflow: hidden;
	border-left: 0px;
}

.slick-header-columns, .slick-headerrow-columns {
	width: 999999px;
	position: relative;
	white-space: nowrap;
	cursor: default;
	overflow: hidden;
}

.slick-header-column.ui-state-default {
	position: relative;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 16px;
	line-height: 16px;
	margin: 0;
	padding: 4px;
	border-right: 1px solid silver;
	border-left: 0px;
	border-top: 0px;
	border-bottom: 0px;
	float: left;
}

.slick-headerrow-column.ui-state-default {
    padding: 4px;
}

.slick-header-column-sorted {
	font-style: italic;
}

.slick-sort-indicator {
	display: inline-block;
	width: 8px;
	height: 5px;
	margin-left: 4px;
}

.slick-sort-indicator-desc {
	background: url(images/sort-desc.gif);
}

.slick-sort-indicator-asc {
	background: url(images/sort-asc.gif);
}

.slick-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	cursor: col-resize;
	width: 4px;
	right: 0px;
	top: 0;
	height: 100%;
}

.slick-sortable-placeholder {
	background: silver;
}

.grid-canvas {
	position: relative;
	outline: 0;
}

.slick-row.ui-widget-content, .slick-row.ui-state-active {
	position: absolute;
	border: 0px;
}

.slick-cell, .slick-headerrow-column {
	float: left;

	border: 1px solid transparent;
	border-right: 1px dotted silver;
	border-bottom-color: silver;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 1;
	padding: 1px 2px 2px 1px;
    margin: 0;
    
	white-space: nowrap;

	cursor: default;
}

.slick-group {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.slick-group-toggle {
    display: inline-block;
}

.slick-cell.highlighted {
    background: lightskyblue;
    background: rgba(0,0,255,0.2);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.slick-cell.flashing {
    border: 1px solid red !important;
}

.slick-cell.editable {
	z-index: 11;
	overflow: visible;
	background: white;
	border-color: black;
	border-style: solid;
}

.slick-cell:focus {
	outline: none;
}

.slick-reorder-proxy {
	display: inline-block;
	background: blue;
	opacity: 0.15;
	filter: alpha(opacity=15);
	cursor: move;
}

.slick-reorder-guide {
	display: inline-block;
	height: 2px;
	background: blue;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.slick-selection {
    z-index: 10;
    position: absolute;
    border: 2px dashed black;
}

File

js/slickgrid/slick.grid.css
View source
  1. /*
  2. IMPORTANT:
  3. In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
  4. No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
  5. classes should alter those!
  6. */
  7. .slick-header.ui-state-default, .slick-headerrow.ui-state-default {
  8. width: 100%;
  9. overflow: hidden;
  10. border-left: 0px;
  11. }
  12. .slick-header-columns, .slick-headerrow-columns {
  13. width: 999999px;
  14. position: relative;
  15. white-space: nowrap;
  16. cursor: default;
  17. overflow: hidden;
  18. }
  19. .slick-header-column.ui-state-default {
  20. position: relative;
  21. display: inline-block;
  22. overflow: hidden;
  23. text-overflow: ellipsis;
  24. height: 16px;
  25. line-height: 16px;
  26. margin: 0;
  27. padding: 4px;
  28. border-right: 1px solid silver;
  29. border-left: 0px;
  30. border-top: 0px;
  31. border-bottom: 0px;
  32. float: left;
  33. }
  34. .slick-headerrow-column.ui-state-default {
  35. padding: 4px;
  36. }
  37. .slick-header-column-sorted {
  38. font-style: italic;
  39. }
  40. .slick-sort-indicator {
  41. display: inline-block;
  42. width: 8px;
  43. height: 5px;
  44. margin-left: 4px;
  45. }
  46. .slick-sort-indicator-desc {
  47. background: url(images/sort-desc.gif);
  48. }
  49. .slick-sort-indicator-asc {
  50. background: url(images/sort-asc.gif);
  51. }
  52. .slick-resizable-handle {
  53. position: absolute;
  54. font-size: 0.1px;
  55. display: block;
  56. cursor: col-resize;
  57. width: 4px;
  58. right: 0px;
  59. top: 0;
  60. height: 100%;
  61. }
  62. .slick-sortable-placeholder {
  63. background: silver;
  64. }
  65. .grid-canvas {
  66. position: relative;
  67. outline: 0;
  68. }
  69. .slick-row.ui-widget-content, .slick-row.ui-state-active {
  70. position: absolute;
  71. border: 0px;
  72. }
  73. .slick-cell, .slick-headerrow-column {
  74. float: left;
  75. border: 1px solid transparent;
  76. border-right: 1px dotted silver;
  77. border-bottom-color: silver;
  78. overflow: hidden;
  79. text-overflow: ellipsis;
  80. white-space: nowrap;
  81. vertical-align: middle;
  82. z-index: 1;
  83. padding: 1px 2px 2px 1px;
  84. margin: 0;
  85. white-space: nowrap;
  86. cursor: default;
  87. }
  88. .slick-group {
  89. position: absolute;
  90. top: 0;
  91. bottom: 0;
  92. left: 0;
  93. right: 0;
  94. }
  95. .slick-group-toggle {
  96. display: inline-block;
  97. }
  98. .slick-cell.highlighted {
  99. background: lightskyblue;
  100. background: rgba(0,0,255,0.2);
  101. -webkit-transition: all 0.5s;
  102. -moz-transition: all 0.5s;
  103. transition: all 0.5s;
  104. }
  105. .slick-cell.flashing {
  106. border: 1px solid red !important;
  107. }
  108. .slick-cell.editable {
  109. z-index: 11;
  110. overflow: visible;
  111. background: white;
  112. border-color: black;
  113. border-style: solid;
  114. }
  115. .slick-cell:focus {
  116. outline: none;
  117. }
  118. .slick-reorder-proxy {
  119. display: inline-block;
  120. background: blue;
  121. opacity: 0.15;
  122. filter: alpha(opacity=15);
  123. cursor: move;
  124. }
  125. .slick-reorder-guide {
  126. display: inline-block;
  127. height: 2px;
  128. background: blue;
  129. opacity: 0.7;
  130. filter: alpha(opacity=70);
  131. }
  132. .slick-selection {
  133. z-index: 10;
  134. position: absolute;
  135. border: 2px dashed black;
  136. }