You are here

Home » API reference » Slickgrid 7.2

slickgrid.css in Slickgrid 7.2

Same filename and directory in other branches
  1. 6 css/slickgrid.css
  2. 7 css/slickgrid.css
.slickgrid-wrapper,.bt-content {
  font-size: 10px !important;
  position: relative;
  font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.slickgrid-wrapper #controls,.slickgrid-wrapper #slickgrid {
  border-width: 1px;
  border-color: #A5A5A5;
}

#slickgrid {
  border-style: solid;
}

.slickgrid-wrapper #controls {
  border-style: none solid solid;
  width: 100%;
}

/* Give the views preview a fixed width, otherwise it stretches to 100%*/
.preview-section .slickgrid-wrapper {
  width: 1000px
}

/* Views */

/* turn off conext menu outline */
.contextual-links-region {
  outline: none !important;
}

/* Header bar */
#slickgrid .slick-header {
  /* Allow 1px for the bottom column border - overflow is hidden*/
  height: 31px !important;
  border: none;
}

.slick-header-columns,.slick-header-column {
  height: 30px !important;
}

.slick-header,.slick-header-columns {
  /* Give header bar a basic grey fill for when there's no columns */
  background: #E8E8E8 !important;
}

.slick-header-columns {
  border-bottom: 1px solid #A5A5A5 !important;
}

/* Main column headers */
.slick-header-column.ui-state-default {
  border-width: 1px;
  border-style: none solid;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Default column state */
.slick-header-column.ui-state-default,.slick-header-column.ui-state-hover,.slick-header-column:hover
  {
  background: #E8E8E8;
  border-right-color: #E8E8E8;
  border-left-color: #E8E8E8;
}

.slick-header-column.ui-state-default .slick-resizable-handle {
  right: -1px;
  background: url('../images/resize-handle.gif') no-repeat 0 9px;
}

/************************** FILTER BAR ************************/
#slickgrid-toggle-search-panel {
  position: absolute;
  right: 2px;
  z-index: 100;
  top: 7px;
  cursor: pointer;
}

.grid-with-tabs #slickgrid-toggle-search-panel {
  top: 39px;
}

.slick-headerrow {
  background: #cfcfcf !important;
  border: none !important;
  height: 30px;
  border-bottom: 1px solid #A5A5A5 !important;
}

.slick-headerrow .slick-headerrow-column {
  border-color: #cfcfcf !important;
  background: none;
  padding-top: 0;
}

/* text filter boxes */
.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter input
  {
  border: 1px solid #949494;
  background: #fff;
  height: 18px;
  line-height: 8px;
  font-size: 10px;
  margin-top: 4px;
  border-radius: 8px;
  max-width: 200px;
}

.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter span,.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter input
  {
  display: block;
  width: 100%;
  text-indent: 5px;
}

/**************************** VIEWPORT & CELLS  ***************************/
.slick-viewport {
  overflow-y: scroll !important;
}

/* Cells */
.slick-cell {
  border-right-style: solid;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 2em;
}

input.editor-text {
  background: none;
  border: 0 none;
  height: 100%;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

.active-row .slick-cell.editable {
  border-color: #00A8FF;
  background: #fff;
}

.slick-cell.invalid {
  border-color: #CE0020 !important;
}

.slick-cell p {
  white-space: normal !important;
}

/* Rows */
.grid-canvas div.odd div.slick-cell {
  background: #F1F5FA;
}

/* Groups */
span.grouping-field-count {
  color: green;
}

.slick-group-toggle {
  margin-right: 5px;
}

/* Collapsible */
.toggle,.slick-group-toggle {
  height: 9px;
  width: 9px;
  display: inline-block;
  cursor: pointer;
}

.toggle.expand,.slick-group-toggle.collapsed {
  background: url(../images/expand.gif) no-repeat center center;
}

.toggle.collapse,.slick-group-toggle.expanded {
  background: url(../images/collapse.gif) no-repeat center center;
}

/* Selected rows */
div.slick-cell-checkboxsel {
  background: #EFEFEF !important;
  line-height: 14px;
}

div.slick-cell-checkboxsel.selected {
  background: #E3E3E3 !important;
}

div.slick-cell-checkboxsel input,.slick-column-name input[type='checkbox']
  {
  margin-left: 2px;
}

div.slick-cell-checkboxsel input {
  margin-top: 5px;
}

.slick-column-name input[type='checkbox'] {
  margin-top: 0;
}

.slick-cell.selected,.active-row .slick-cell {
  background-color: #E1EEFF;
}

.delete-row .slick-cell {
  background-color: #FAF4D1;
  color: #B92C29;
}

/**************************** CONTROLS  ***************************/

/* Resizable handle */
#slickgrid .ui-resizable-handle.ui-resizable-s {
  bottom: 0;
  height: 5px;
  z-index: 100;
}

/* Control bar */
#controls {
  height: 30px;
  background: #E8E8E8;
  overflow: hidden;
  padding: 0;
}

/* Slickgrid status */
#slickgrid-status {
  float: right;
  margin-top: 3px;
  text-align: center;
  height: 26px;
  min-width: 30px;
  margin-left: 5px;
}

#slickgrid-status.slickgrid-loading {
  background: url('../images/ajax-loader.gif') no-repeat center;
}

#slickgrid-status span {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 12px;
  color: #fff;
  display: inline-block;
  line-height: 8px;
  padding: 4px 2px 1px;
  min-width: 12px;
  margin-top: 4px;
  font-size: 10px;
}

#slickgrid-status span.slickgrid-status-errors {
  background-color: #CE0020;
  cursor: pointer;
}

#slickgrid-status span.slickgrid-status-success {
  background-color: #9BBF19;
  cursor: pointer;
}

.slickgrid-dialog h6 {
  font-size: 1.2em;
  color: inherit !important;
  margin: 0 0 5px 0 !important;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.slickgrid-dialog button {
  margin-right: 10px;
}

.slickgrid-dialog input {
  margin-right: 8px;
}

.slickgrid-dialog input#export-selected-rows {
  display: inline;
}

.slickgrid-dialog label {
  display: inline-block;
  margin-left: 5px;
  font-weight: normal;
}

/* Response messages */
ul.slickgrid-messages {
  margin: 0;
  padding: 0 6px !important;
}

ul.slickgrid-messages li {
  list-style: none;
  padding-left: 30px;
}

ul.slickgrid-messages li.status {
  background: url('../images/no-error.png') no-repeat left;
}

ul.slickgrid-messages li.error {
  font-weight: bold;
  color: #CE0020;
  padding: 0;
}

ul.slickgrid-messages li.error .item-list {
  max-height: 100px;
  overflow-y: auto;
  color: inherit !important;
  margin-top: 10px;
  font-weight: normal;
  color: #000;
}

ul.slickgrid-messages li ul {
  margin-top: 0 !important;
}

ul.slickgrid-messages li ul li {
  padding-left: 0;
  list-style: disc !important;
  color: #333;
}

/* Context menu */
.slick-columnpicker {
  border: 1px solid #949494;
  display: inline-block;
  -moz-box-shadow: 3px 3px 3px #C0C0C0;
  -webkit-box-shadow: 3px 3px 3px #C0C0C0;
  z-index: 99999;
  padding-bottom: 5px;
  background: #F4F4F4;
  font-size: 0.9em;
}

.slick-columnpicker label {
  display: inline;
  font-weight: normal;
}

.slick-columnpicker hr {
  margin: 5px;
  border: 1px inset #B2B2B2;
}

.slick-columnpicker li:last-child {
  display: none;
}

.slick-columnpicker li:nth-last-child(2) {
  border-top: solid 1px #ccc;
  margin-top: 3px;
  padding-top: 3px;
}

/* Dialog */
.bt-content {
  background-color: #fff;
  border-top: 1px solid #A5A5A5;
  border-left: 1px solid #A5A5A5;
}

/* Modal popup (edit and add) */
.ctools-slickgrid-modal-content .modal-header {
  background: #E8E8E8 !important;
  line-height: 26px;
  border-bottom: 1px solid #949494;
}

.ctools-slickgrid-modal-content .modal-header .modal-title {
  color: #333333 !important;
  font-size: 1em !important
}

div.ctools-modal-content a.close img {
  right: -22px !important;
  top: 3px !important;
  position: absolute !important;
}

div.ctools-modal-content {
  border-color: #949494 !important;
}

File

css/slickgrid.css
View source 
  1. .slickgrid-wrapper,.bt-content {

  2.   font-size: 10px !important;

  3.   position: relative;

  4.   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

  5. }

  6. 

  7. .slickgrid-wrapper #controls,.slickgrid-wrapper #slickgrid {

  8.   border-width: 1px;

  9.   border-color: #A5A5A5;

  10. }

  11. 

  12. #slickgrid {

  13.   border-style: solid;

  14. }

  15. 

  16. .slickgrid-wrapper #controls {

  17.   border-style: none solid solid;

  18.   width: 100%;

  19. }

  20. 

  21. /* Give the views preview a fixed width, otherwise it stretches to 100%*/

  22. .preview-section .slickgrid-wrapper {

  23.   width: 1000px

  24. }

  25. 

  26. /* Views */

  27. 

  28. /* turn off conext menu outline */

  29. .contextual-links-region {

  30.   outline: none !important;

  31. }

  32. 

  33. /* Header bar */

  34. #slickgrid .slick-header {

  35.   /* Allow 1px for the bottom column border - overflow is hidden*/

  36.   height: 31px !important;

  37.   border: none;

  38. }

  39. 

  40. .slick-header-columns,.slick-header-column {

  41.   height: 30px !important;

  42. }

  43. 

  44. .slick-header,.slick-header-columns {

  45.   /* Give header bar a basic grey fill for when there's no columns */

  46.   background: #E8E8E8 !important;

  47. }

  48. 

  49. .slick-header-columns {

  50.   border-bottom: 1px solid #A5A5A5 !important;

  51. }

  52. 

  53. /* Main column headers */

  54. .slick-header-column.ui-state-default {

  55.   border-width: 1px;

  56.   border-style: none solid;

  57.   line-height: 30px;

  58.   padding-top: 0;

  59.   padding-bottom: 0;

  60. }

  61. 

  62. /* Default column state */

  63. .slick-header-column.ui-state-default,.slick-header-column.ui-state-hover,.slick-header-column:hover

  64.   {

  65.   background: #E8E8E8;

  66.   border-right-color: #E8E8E8;

  67.   border-left-color: #E8E8E8;

  68. }

  69. 

  70. .slick-header-column.ui-state-default .slick-resizable-handle {

  71.   right: -1px;

  72.   background: url('../images/resize-handle.gif') no-repeat 0 9px;

  73. }

  74. 

  75. /************************** FILTER BAR ************************/

  76. #slickgrid-toggle-search-panel {

  77.   position: absolute;

  78.   right: 2px;

  79.   z-index: 100;

  80.   top: 7px;

  81.   cursor: pointer;

  82. }

  83. 

  84. .grid-with-tabs #slickgrid-toggle-search-panel {

  85.   top: 39px;

  86. }

  87. 

  88. .slick-headerrow {

  89.   background: #cfcfcf !important;

  90.   border: none !important;

  91.   height: 30px;

  92.   border-bottom: 1px solid #A5A5A5 !important;

  93. }

  94. 

  95. .slick-headerrow .slick-headerrow-column {

  96.   border-color: #cfcfcf !important;

  97.   background: none;

  98.   padding-top: 0;

  99. }

  100. 

  101. /* text filter boxes */

  102. .slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter input

  103.   {

  104.   border: 1px solid #949494;

  105.   background: #fff;

  106.   height: 18px;

  107.   line-height: 8px;

  108.   font-size: 10px;

  109.   margin-top: 4px;

  110.   border-radius: 8px;

  111.   max-width: 200px;

  112. }

  113. 

  114. .slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter span,.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter input

  115.   {

  116.   display: block;

  117.   width: 100%;

  118.   text-indent: 5px;

  119. }

  120. 

  121. /**************************** VIEWPORT & CELLS  ***************************/

  122. .slick-viewport {

  123.   overflow-y: scroll !important;

  124. }

  125. 

  126. /* Cells */

  127. .slick-cell {

  128.   border-right-style: solid;

  129.   padding-left: 4px;

  130.   padding-right: 4px;

  131.   line-height: 2em;

  132. }

  133. 

  134. input.editor-text {

  135.   background: none;

  136.   border: 0 none;

  137.   height: 100%;

  138.   margin: 0;

  139.   outline: 0 none;

  140.   padding: 0;

  141.   width: 100%;

  142. }

  143. 

  144. .active-row .slick-cell.editable {

  145.   border-color: #00A8FF;

  146.   background: #fff;

  147. }

  148. 

  149. .slick-cell.invalid {

  150.   border-color: #CE0020 !important;

  151. }

  152. 

  153. .slick-cell p {

  154.   white-space: normal !important;

  155. }

  156. 

  157. /* Rows */

  158. .grid-canvas div.odd div.slick-cell {

  159.   background: #F1F5FA;

  160. }

  161. 

  162. /* Groups */

  163. span.grouping-field-count {

  164.   color: green;

  165. }

  166. 

  167. .slick-group-toggle {

  168.   margin-right: 5px;

  169. }

  170. 

  171. /* Collapsible */

  172. .toggle,.slick-group-toggle {

  173.   height: 9px;

  174.   width: 9px;

  175.   display: inline-block;

  176.   cursor: pointer;

  177. }

  178. 

  179. .toggle.expand,.slick-group-toggle.collapsed {

  180.   background: url(../images/expand.gif) no-repeat center center;

  181. }

  182. 

  183. .toggle.collapse,.slick-group-toggle.expanded {

  184.   background: url(../images/collapse.gif) no-repeat center center;

  185. }

  186. 

  187. /* Selected rows */

  188. div.slick-cell-checkboxsel {

  189.   background: #EFEFEF !important;

  190.   line-height: 14px;

  191. }

  192. 

  193. div.slick-cell-checkboxsel.selected {

  194.   background: #E3E3E3 !important;

  195. }

  196. 

  197. div.slick-cell-checkboxsel input,.slick-column-name input[type='checkbox']

  198.   {

  199.   margin-left: 2px;

  200. }

  201. 

  202. div.slick-cell-checkboxsel input {

  203.   margin-top: 5px;

  204. }

  205. 

  206. .slick-column-name input[type='checkbox'] {

  207.   margin-top: 0;

  208. }

  209. 

  210. .slick-cell.selected,.active-row .slick-cell {

  211.   background-color: #E1EEFF;

  212. }

  213. 

  214. .delete-row .slick-cell {

  215.   background-color: #FAF4D1;

  216.   color: #B92C29;

  217. }

  218. 

  219. /**************************** CONTROLS  ***************************/

  220. 

  221. /* Resizable handle */

  222. #slickgrid .ui-resizable-handle.ui-resizable-s {

  223.   bottom: 0;

  224.   height: 5px;

  225.   z-index: 100;

  226. }

  227. 

  228. /* Control bar */

  229. #controls {

  230.   height: 30px;

  231.   background: #E8E8E8;

  232.   overflow: hidden;

  233.   padding: 0;

  234. }

  235. 

  236. /* Slickgrid status */

  237. #slickgrid-status {

  238.   float: right;

  239.   margin-top: 3px;

  240.   text-align: center;

  241.   height: 26px;

  242.   min-width: 30px;

  243.   margin-left: 5px;

  244. }

  245. 

  246. #slickgrid-status.slickgrid-loading {

  247.   background: url('../images/ajax-loader.gif') no-repeat center;

  248. }

  249. 

  250. #slickgrid-status span {

  251.   -webkit-border-radius: 5px;

  252.   -moz-border-radius: 5px;

  253.   border-radius: 5px;

  254.   height: 12px;

  255.   color: #fff;

  256.   display: inline-block;

  257.   line-height: 8px;

  258.   padding: 4px 2px 1px;

  259.   min-width: 12px;

  260.   margin-top: 4px;

  261.   font-size: 10px;

  262. }

  263. 

  264. #slickgrid-status span.slickgrid-status-errors {

  265.   background-color: #CE0020;

  266.   cursor: pointer;

  267. }

  268. 

  269. #slickgrid-status span.slickgrid-status-success {

  270.   background-color: #9BBF19;

  271.   cursor: pointer;

  272. }

  273. 

  274. .slickgrid-dialog h6 {

  275.   font-size: 1.2em;

  276.   color: inherit !important;

  277.   margin: 0 0 5px 0 !important;

  278.   font-weight: bold;

  279.   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

  280. }

  281. 

  282. .slickgrid-dialog button {

  283.   margin-right: 10px;

  284. }

  285. 

  286. .slickgrid-dialog input {

  287.   margin-right: 8px;

  288. }

  289. 

  290. .slickgrid-dialog input#export-selected-rows {

  291.   display: inline;

  292. }

  293. 

  294. .slickgrid-dialog label {

  295.   display: inline-block;

  296.   margin-left: 5px;

  297.   font-weight: normal;

  298. }

  299. 

  300. /* Response messages */

  301. ul.slickgrid-messages {

  302.   margin: 0;

  303.   padding: 0 6px !important;

  304. }

  305. 

  306. ul.slickgrid-messages li {

  307.   list-style: none;

  308.   padding-left: 30px;

  309. }

  310. 

  311. ul.slickgrid-messages li.status {

  312.   background: url('../images/no-error.png') no-repeat left;

  313. }

  314. 

  315. ul.slickgrid-messages li.error {

  316.   font-weight: bold;

  317.   color: #CE0020;

  318.   padding: 0;

  319. }

  320. 

  321. ul.slickgrid-messages li.error .item-list {

  322.   max-height: 100px;

  323.   overflow-y: auto;

  324.   color: inherit !important;

  325.   margin-top: 10px;

  326.   font-weight: normal;

  327.   color: #000;

  328. }

  329. 

  330. ul.slickgrid-messages li ul {

  331.   margin-top: 0 !important;

  332. }

  333. 

  334. ul.slickgrid-messages li ul li {

  335.   padding-left: 0;

  336.   list-style: disc !important;

  337.   color: #333;

  338. }

  339. 

  340. /* Context menu */

  341. .slick-columnpicker {

  342.   border: 1px solid #949494;

  343.   display: inline-block;

  344.   -moz-box-shadow: 3px 3px 3px #C0C0C0;

  345.   -webkit-box-shadow: 3px 3px 3px #C0C0C0;

  346.   z-index: 99999;

  347.   padding-bottom: 5px;

  348.   background: #F4F4F4;

  349.   font-size: 0.9em;

  350. }

  351. 

  352. .slick-columnpicker label {

  353.   display: inline;

  354.   font-weight: normal;

  355. }

  356. 

  357. .slick-columnpicker hr {

  358.   margin: 5px;

  359.   border: 1px inset #B2B2B2;

  360. }

  361. 

  362. .slick-columnpicker li:last-child {

  363.   display: none;

  364. }

  365. 

  366. .slick-columnpicker li:nth-last-child(2) {

  367.   border-top: solid 1px #ccc;

  368.   margin-top: 3px;

  369.   padding-top: 3px;

  370. }

  371. 

  372. /* Dialog */

  373. .bt-content {

  374.   background-color: #fff;

  375.   border-top: 1px solid #A5A5A5;

  376.   border-left: 1px solid #A5A5A5;

  377. }

  378. 

  379. /* Modal popup (edit and add) */

  380. .ctools-slickgrid-modal-content .modal-header {

  381.   background: #E8E8E8 !important;

  382.   line-height: 26px;

  383.   border-bottom: 1px solid #949494;

  384. }

  385. 

  386. .ctools-slickgrid-modal-content .modal-header .modal-title {

  387.   color: #333333 !important;

  388.   font-size: 1em !important

  389. }

  390. 

  391. div.ctools-modal-content a.close img {

  392.   right: -22px !important;

  393.   top: 3px !important;

  394.   position: absolute !important;

  395. }

  396. 

  397. div.ctools-modal-content {

  398.   border-color: #949494 !important;

  399. }