You are here

slickgrid.controls.css in Slickgrid 7.2

Same filename and directory in other branches
  1. 7 css/slickgrid.controls.css
@CHARSET "UTF-8";

#controls .slickgrid-control {
  float: right;
}

#controls .slickgrid-control,#controls .slickgrid-control span.slickgrid-control-button
  {
  width: 30px;
  height: 30px;
  display: block;
  text-align: center;
}

#slickgrid-add,#slickgrid-add span.slickgrid-control-button {
  width: auto !important;
  color: #000;
}

#slickgrid-add span.slickgrid-control-button {
  background-position: 0 7px !important;
  padding: 6px 10px 0 20px;
}

#controls .slickgrid-control span.slickgrid-control-button {
  opacity: 0.3;
  background-repeat: no-repeat;
  background-position: center 7px;
}

#controls .slickgrid-control span.enabled {
  cursor: pointer;
  opacity: 1;
}

/* Pagination */
#controls #slickgrid-pager {
  float: left;
  width: 420px;
}

#controls #slickgrid-pager .slick-pager-settings span {
  display: none;
}

#controls #slickgrid-pager  .slick-pager {
  background: none !important;
  border-style: none !important;
}

#controls #slickgrid-pager span.slick-pager-nav {
  padding-top: 7px;
  width: 120px;
}

#controls #slickgrid-pager span.slick-pager-settings,#controls #slickgrid-pager span.slick-pager-status
  {
  padding-top: 6px;
}

#controls #slickgrid-pager span.slick-pager-status {
  margin-left: 10px;
}

#controls #slickgrid-pager span {
  float: left;
  display: block;
}

#controls #slickgrid-pager .slick-pager-settings span.slick-pager-settings-expanded
  {
  display: block !important;
}

#controls #slickgrid-pager .slick-pager-settings span.slick-pager-settings-expanded a
  {
  margin-left: 5px;
  cursor: pointer;
}

/* Next / prev buttons */
#controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container {
  background: none !important;
  border: none;
}

#controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container span
  {
  margin-left: 10px;
  cursor: pointer;
}

/* First */
#controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-first,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-first.ui-state-disabled
  { /* FIXME - Image is missing */
  background: url('../images/controls-first.png') no-repeat;
}

#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-first
  { /* FIXME - Image is missing */
  background: url('../images/controls-first-active.png') no-repeat;
}

/* Prev */
#controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-prev,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-prev.ui-state-disabled
  { /* FIXME - Image is missing */
  background: url('../images/controls-prev.png') no-repeat;
  margin-left: 8px;
}

#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-prev
  { /* FIXME - Image is missing */
  background: url('../images/controls-prev-active.png') no-repeat;
}

/* Next */
#controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-next,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-next.ui-state-disabled
  { /* FIXME - Image is missing */
  background: url('../images/controls-next.png') no-repeat;
  margin-left: 14px;
}

#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-next
  { /* FIXME - Image is missing */
  background: url('../images/controls-next-active.png') no-repeat;
}

/* Last */
#controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-end,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-end.ui-state-disabled
  { /* FIXME - Image is missing */
  background: url('../images/controls-last.png') no-repeat;
}

#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-end
  { /* FIXME - Image is missing */
  background: url('../images/controls-last-active.png') no-repeat;
}

/* Add control */
#slickgrid-add span {
  background-image: url('../images/doc_plus_icon&16.png');
}

/* Delete control */
#slickgrid-delete span {
  background-image: url('../images/doc_delete_icon&16.png');
}

/* Undo control */
#slickgrid-undo span {
  background-image: url('../images/undo_icon&16.png');
}

/* Export control */
#slickgrid-export span {
  background-image: url('../images/download_icon&16.png');
}

#slickgrid-clone span {
  background-image: url('../images/clipboard_copy_icon&16.png');
}

.slickgrid-control span.enabled:hover { /*background: #fff;*/
  
}

/* Export links are part of the feed icon links */
.feed-icon {
  display: none;
}

/* Tabs */
#slickgrid-tabs span {
  min-width: 100px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  display: inline-block;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 0 1px 0 0;
  color: #555;
  border: 1px solid #A5A5A5;
  border-bottom-style: none;
  cursor: pointer;
  position: relative;
  top: 1px;
}

#slickgrid-tabs span.active-tab {
  background: #E8E8E8;
  z-index: 100;
}

/* Form */
#controls input {
  margin-right: 3px;
}

#controls .ajax-progress {
  background-color: #fff;
  border: solid 1px #A5A5A5;
  position: absolute;
  left: 50px;
}

File

css/slickgrid.controls.css
View source
  1. @CHARSET "UTF-8";
  2. #controls .slickgrid-control {
  3. float: right;
  4. }
  5. #controls .slickgrid-control,#controls .slickgrid-control span.slickgrid-control-button
  6. {
  7. width: 30px;
  8. height: 30px;
  9. display: block;
  10. text-align: center;
  11. }
  12. #slickgrid-add,#slickgrid-add span.slickgrid-control-button {
  13. width: auto !important;
  14. color: #000;
  15. }
  16. #slickgrid-add span.slickgrid-control-button {
  17. background-position: 0 7px !important;
  18. padding: 6px 10px 0 20px;
  19. }
  20. #controls .slickgrid-control span.slickgrid-control-button {
  21. opacity: 0.3;
  22. background-repeat: no-repeat;
  23. background-position: center 7px;
  24. }
  25. #controls .slickgrid-control span.enabled {
  26. cursor: pointer;
  27. opacity: 1;
  28. }
  29. /* Pagination */
  30. #controls #slickgrid-pager {
  31. float: left;
  32. width: 420px;
  33. }
  34. #controls #slickgrid-pager .slick-pager-settings span {
  35. display: none;
  36. }
  37. #controls #slickgrid-pager .slick-pager {
  38. background: none !important;
  39. border-style: none !important;
  40. }
  41. #controls #slickgrid-pager span.slick-pager-nav {
  42. padding-top: 7px;
  43. width: 120px;
  44. }
  45. #controls #slickgrid-pager span.slick-pager-settings,#controls #slickgrid-pager span.slick-pager-status
  46. {
  47. padding-top: 6px;
  48. }
  49. #controls #slickgrid-pager span.slick-pager-status {
  50. margin-left: 10px;
  51. }
  52. #controls #slickgrid-pager span {
  53. float: left;
  54. display: block;
  55. }
  56. #controls #slickgrid-pager .slick-pager-settings span.slick-pager-settings-expanded
  57. {
  58. display: block !important;
  59. }
  60. #controls #slickgrid-pager .slick-pager-settings span.slick-pager-settings-expanded a
  61. {
  62. margin-left: 5px;
  63. cursor: pointer;
  64. }
  65. /* Next / prev buttons */
  66. #controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container {
  67. background: none !important;
  68. border: none;
  69. }
  70. #controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container span
  71. {
  72. margin-left: 10px;
  73. cursor: pointer;
  74. }
  75. /* First */
  76. #controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-first,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-first.ui-state-disabled
  77. { /* FIXME - Image is missing */
  78. background: url('../images/controls-first.png') no-repeat;
  79. }
  80. #controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-first
  81. { /* FIXME - Image is missing */
  82. background: url('../images/controls-first-active.png') no-repeat;
  83. }
  84. /* Prev */
  85. #controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-prev,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-prev.ui-state-disabled
  86. { /* FIXME - Image is missing */
  87. background: url('../images/controls-prev.png') no-repeat;
  88. margin-left: 8px;
  89. }
  90. #controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-prev
  91. { /* FIXME - Image is missing */
  92. background: url('../images/controls-prev-active.png') no-repeat;
  93. }
  94. /* Next */
  95. #controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-next,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-next.ui-state-disabled
  96. { /* FIXME - Image is missing */
  97. background: url('../images/controls-next.png') no-repeat;
  98. margin-left: 14px;
  99. }
  100. #controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-next
  101. { /* FIXME - Image is missing */
  102. background: url('../images/controls-next-active.png') no-repeat;
  103. }
  104. /* Last */
  105. #controls #slickgrid-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-end,#controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-end.ui-state-disabled
  106. { /* FIXME - Image is missing */
  107. background: url('../images/controls-last.png') no-repeat;
  108. }
  109. #controls #slickgrid-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-end
  110. { /* FIXME - Image is missing */
  111. background: url('../images/controls-last-active.png') no-repeat;
  112. }
  113. /* Add control */
  114. #slickgrid-add span {
  115. background-image: url('../images/doc_plus_icon&16.png');
  116. }
  117. /* Delete control */
  118. #slickgrid-delete span {
  119. background-image: url('../images/doc_delete_icon&16.png');
  120. }
  121. /* Undo control */
  122. #slickgrid-undo span {
  123. background-image: url('../images/undo_icon&16.png');
  124. }
  125. /* Export control */
  126. #slickgrid-export span {
  127. background-image: url('../images/download_icon&16.png');
  128. }
  129. #slickgrid-clone span {
  130. background-image: url('../images/clipboard_copy_icon&16.png');
  131. }
  132. .slickgrid-control span.enabled:hover { /*background: #fff;*/
  133. }
  134. /* Export links are part of the feed icon links */
  135. .feed-icon {
  136. display: none;
  137. }
  138. /* Tabs */
  139. #slickgrid-tabs span {
  140. min-width: 100px;
  141. height: 30px;
  142. line-height: 30px;
  143. padding: 0 10px;
  144. display: inline-block;
  145. -webkit-border-top-left-radius: 5px;
  146. -webkit-border-top-right-radius: 5px;
  147. -moz-border-radius-topleft: 5px;
  148. -moz-border-radius-topright: 5px;
  149. border-top-left-radius: 5px;
  150. border-top-right-radius: 5px;
  151. margin: 0 1px 0 0;
  152. color: #555;
  153. border: 1px solid #A5A5A5;
  154. border-bottom-style: none;
  155. cursor: pointer;
  156. position: relative;
  157. top: 1px;
  158. }
  159. #slickgrid-tabs span.active-tab {
  160. background: #E8E8E8;
  161. z-index: 100;
  162. }
  163. /* Form */
  164. #controls input {
  165. margin-right: 3px;
  166. }
  167. #controls .ajax-progress {
  168. background-color: #fff;
  169. border: solid 1px #A5A5A5;
  170. position: absolute;
  171. left: 50px;
  172. }