/ext-4.1.0_b3/resources/themes/stylesheets/neptune/default/widgets/_grid.scss

https://bitbucket.org/srogerf/javascript · Sass · 901 lines · 694 code · 139 blank · 68 comment · 1 complexity · 4a84e58c4caa04612c98d33dc2dfef1c MD5 · raw file

  1. @mixin extjs-grid {
  2. //main grid view
  3. .#{$prefix}panel {
  4. .#{$prefix}grid-body {
  5. background: $panel-body-background-color;
  6. // border-color: $panel-body-border-color;
  7. // border-style: $panel-body-border-style;
  8. // border-width: 1px;
  9. // border-top-color: $grid-header-background-color;
  10. border-bottom: 2px solid #D7DCE0;
  11. }
  12. // Hide using visibility so that its available width can be calculated correctly
  13. .#{$prefix}grid-header-ct-hidden {
  14. visibility: hidden;
  15. }
  16. }
  17. .#{$prefix}grid-header-hidden .#{$prefix}grid-body {
  18. // border-top-color: $panel-body-border-color !important;
  19. }
  20. .#{$prefix}grid-view {
  21. overflow: hidden;
  22. position: relative;
  23. }
  24. .#{$prefix}grid-table {
  25. table-layout: fixed;
  26. border-collapse: separate;
  27. }
  28. // Tree with a default single column is auto width
  29. // Override any inline width style set by the widget itself (through its ColumnModel) to force it to be auto width.
  30. .#{$prefix}autowidth-table table.#{$prefix}grid-table {
  31. table-layout: auto;
  32. width: auto !important;
  33. }
  34. .#{$prefix}grid-row .#{$prefix}grid-table {
  35. border-collapse: collapse;
  36. }
  37. .#{$prefix}grid-locked .#{$prefix}grid-inner-locked {
  38. border-width: 0 1px 0 0 !important;
  39. border-style: solid;
  40. // border-color: $grid-cell-with-col-lines-border-color;
  41. }
  42. .#{$prefix}grid-header-ct {
  43. // cursor: default;
  44. // @tag iezoomhack
  45. // padding: 0;
  46. // border: 1px solid $panel-body-border-color;
  47. // Body border provided by headerCt only when in accordion layout.
  48. border-bottom-color: $grid-header-background-color;
  49. @if $supports-gradients or $compile-all {
  50. @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
  51. }
  52. // -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.25);
  53. border-bottom: 2px solid #D7DCE0 !important;
  54. }
  55. .x-panel {
  56. .#{$prefix}grid-header-ct {
  57. border-bottom-width: 2px;
  58. }
  59. }
  60. .#{$prefix}accordion-item .#{$prefix}grid-header-ct {
  61. border-width: 0 0 1px 0!important;
  62. }
  63. .#{$prefix}column-header {
  64. padding: 0;
  65. position: absolute;
  66. overflow: hidden;
  67. -webkit-border-image: theme-background-image($theme-name, 'grid/header-border.png') 1 1 1 1 stretch stretch;
  68. border-right: 1px solid $grid-header-border-color;
  69. border-left: 0 none;
  70. border-top: 0 none;
  71. border-bottom: 0 none;
  72. @if $grid-header-color {
  73. color: $grid-header-color;
  74. } @else {
  75. @include color-by-background($grid-header-background-color);
  76. }
  77. font: normal $font-size-small $font-family;
  78. @if $supports-gradients or $compile-all {
  79. @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
  80. }
  81. }
  82. .#{$prefix}group-header {
  83. padding: 0;
  84. border-left-width: 0;
  85. }
  86. .#{$prefix}group-sub-header {
  87. background: transparent;
  88. -webkit-border-image: none;
  89. border-top: 1px solid $grid-header-border-color;
  90. border-left-width: 0;
  91. }
  92. .#{$prefix}column-header-inner {
  93. // @tag iezoomhack
  94. position: relative;
  95. white-space: nowrap;
  96. line-height: 22px;
  97. padding: $grid-header-padding;
  98. .#{$prefix}column-header-text {
  99. white-space: nowrap;
  100. }
  101. }
  102. .#{$prefix}column-header-sortable {
  103. color: $base-dark-color;
  104. }
  105. @if not $supports-gradients or $compile-all {
  106. .#{$prefix}nlg {
  107. .#{$prefix}grid-header-ct,
  108. .#{$prefix}column-header {
  109. // background: repeat-x 0 top;
  110. // background-image: theme-background-image($theme-name, 'grid/column-header-bg.gif');
  111. }
  112. .#{$prefix}column-header-over,
  113. .#{$prefix}column-header-sort-ASC,
  114. .#{$prefix}column-header-sort-DESC {
  115. // background: #ebf3fd repeat-x 0 top;
  116. // background-image: theme-background-image($theme-name, 'grid/column-header-over-bg.gif');
  117. }
  118. }
  119. }
  120. .#{$prefix}column-header-trigger {
  121. display: none;
  122. height: 100%;
  123. width: $grid-header-trigger-width;
  124. background: no-repeat left center;
  125. // @todo fix this
  126. // background-color: $grid-header-background-color;
  127. // @include background-gradient($grid-header-background-color);
  128. // @todo ie6ify
  129. // background-image: theme-background-image($theme-name, 'grid/grid3-hd-btn.gif');
  130. position: absolute;
  131. right: 0;
  132. top: 0;
  133. z-index: 2;
  134. cursor: pointer;
  135. }
  136. .#{$prefix}column-header-over, .#{$prefix}column-header-open {
  137. .#{$prefix}column-header-trigger {
  138. display: block;
  139. }
  140. }
  141. .#{$prefix}column-header-align-right {
  142. text-align: right;
  143. .#{$prefix}column-header-text {
  144. padding-right: 0.5ex;
  145. margin-right: 6px;
  146. }
  147. }
  148. .#{$prefix}column-header-align-center {
  149. text-align: center;
  150. }
  151. .#{$prefix}column-header-align-left {
  152. text-align: left;
  153. }
  154. // Sort direction indicator is a background of the text span.
  155. .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
  156. padding-right: 16px;
  157. background: no-repeat top right;
  158. background-position-y: 1px;
  159. background-image: theme-background-image($theme-name, 'grid/sort.png');
  160. }
  161. .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text {
  162. padding-right: 16px;
  163. background: no-repeat top right;
  164. background-position-y: -47px;
  165. background-image: theme-background-image($theme-name, 'grid/sort.png');
  166. }
  167. //grid rows
  168. .#{$prefix}grid-row {
  169. // line-height: 1.5em;
  170. height: 24px;
  171. vertical-align: top;
  172. padding: $grid-row-padding;
  173. @extend .no-select;
  174. .#{$prefix}grid-cell {
  175. @if $grid-row-cell-color != null {
  176. color: $grid-row-cell-color;
  177. } @else {
  178. color: color-by-background($grid-row-cell-background);
  179. }
  180. font: $grid-row-cell-font;
  181. background-color: $grid-row-cell-background;
  182. border-color: $grid-row-cell-border-color;
  183. border-style: $grid-row-cell-border-style;
  184. border-width: $grid-row-cell-border-width;
  185. }
  186. font: $grid-row-cell-font;
  187. background-color: $grid-row-cell-background;
  188. border-color: $grid-row-cell-border-color;
  189. border-style: $grid-row-cell-border-style;
  190. border-width: 0;
  191. }
  192. .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell {
  193. border-width: $grid-row-cell-border-width;
  194. }
  195. .#{$prefix}grid-rowwrap-div {
  196. border-width: $grid-row-wrap-border-width;
  197. border-color: $grid-row-wrap-border-color;
  198. border-style: $grid-row-wrap-border-style;
  199. border-top-color: lighten($grid-row-wrap-border-color, 5);
  200. overflow: hidden;
  201. }
  202. .#{$prefix}grid-row-alt .#{$prefix}grid-cell,
  203. .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div {
  204. background-color: $grid-row-cell-alt-background;
  205. }
  206. .#{$prefix}grid-row-over .#{$prefix}grid-cell,
  207. .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div {
  208. border-color: $grid-row-cell-over-border-color;
  209. background-color: $grid-row-cell-over-background-color;
  210. color: $grid-row-cell-over-color;
  211. .#{$prefix}grid-cell {
  212. color: $grid-row-cell-over-color;
  213. }
  214. }
  215. .#{$prefix}grid-row-focused .#{$prefix}grid-cell,
  216. .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div {
  217. border-color: $grid-row-cell-focus-border-color;
  218. color: color-by-background($grid-row-cell-focus-background-color);
  219. background-color: $grid-row-cell-focus-background-color;
  220. }
  221. .#{$prefix}grid-row-selected .#{$prefix}grid-cell,
  222. .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div {
  223. border-style: $grid-row-cell-selected-border-style;
  224. border-color: $grid-row-cell-selected-border-color;
  225. color: color-by-background($grid-row-cell-selected-background-color);
  226. background-color: $grid-row-cell-selected-background-color !important;
  227. @include inset-by-background($grid-row-cell-selected-background-color);
  228. }
  229. .#{$prefix}grid-rowwrap-div {
  230. .#{$prefix}grid-cell,
  231. .#{$prefix}grid-cell-inner {
  232. border-width: 0;
  233. background: transparent;
  234. }
  235. }
  236. .#{$prefix}grid-row-body-hidden {
  237. display: none;
  238. }
  239. .#{$prefix}grid-rowbody {
  240. font: $grid-row-body-font;
  241. padding: $grid-row-body-padding;
  242. p {
  243. margin: 5px 5px 10px 5px;
  244. }
  245. }
  246. //grid cells
  247. .#{$prefix}grid-cell {
  248. overflow: hidden;
  249. font: $grid-cell-font;
  250. @extend .no-select;
  251. }
  252. .#{$prefix}grid-cell-inner {
  253. @extend .overflow-ellipsis;
  254. padding: $grid-cell-inner-padding;
  255. // padding: $grid-cell-inner-padding-top $grid-cell-inner-padding-horizontal $grid-cell-inner-padding-bottom;
  256. }
  257. .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-inner {
  258. line-height: $grid-row-cell-line-height - 2;
  259. padding-bottom: $grid-cell-inner-padding-bottom + 1;
  260. }
  261. // Action columns with a standard, 16x16 icon require less padding
  262. .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
  263. line-height: 0;
  264. padding: 2px;
  265. }
  266. .#{$prefix}grid-with-row-lines .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
  267. padding-top: 1px;
  268. }
  269. .#{$prefix}grid-row .#{$prefix}grid-cell-special {
  270. padding: 0;
  271. border-right: 1px solid $grid-cell-with-col-lines-border-color;
  272. // @include background-gradient($grid-row-cell-background, $grid-row-special-background-gradient);
  273. }
  274. /*
  275. IE6-8 have issues with shrinking the TR to 0px (even w/line-height=0), so we
  276. use an IE-specific trick to make the row disappear. We cannot do this on any
  277. other browser, because it is not a non-standard thing to do and those other
  278. browsers will do whacky things with it.
  279. */
  280. .#{$prefix}ie6,
  281. .#{$prefix}ie7,
  282. .#{$prefix}quirks .#{$prefix}ie8 {
  283. .#{$prefix}grid-header-row {
  284. position: absolute;
  285. }
  286. }
  287. .#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
  288. border-right: 1px solid $grid-cell-with-col-lines-border-color;
  289. @include background-gradient($grid-row-cell-over-background-color, $grid-row-special-background-gradient);
  290. }
  291. .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
  292. border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%);
  293. @include background-gradient($grid-row-cell-selected-background-color, $grid-row-special-background-gradient);
  294. }
  295. .#{$prefix}grid-dirty-cell {
  296. background-image: theme-background-image($theme-name, 'grid/dirty.gif');
  297. background-position: 0 0;
  298. background-repeat: no-repeat;
  299. }
  300. // .#{$prefix}grid-cell-selected {
  301. // background-color: #B8CFEE !important;
  302. // }
  303. @if not $supports-gradients or $compile-all {
  304. .#{$prefix}nlg {
  305. .#{$prefix}grid-cell-special {
  306. background-repeat: repeat-y;
  307. background-position: top right;
  308. }
  309. .#{$prefix}grid-row .#{$prefix}grid-cell-special,
  310. .#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
  311. background-image: theme-background-image($theme-name, 'grid/cell-special-bg.gif');
  312. }
  313. .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special,
  314. .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
  315. background-image: theme-background-image($theme-name, 'grid/cell-special-selected-bg.gif');
  316. }
  317. }
  318. }
  319. .#{$prefix}grid-with-col-lines .#{$prefix}grid-cell {
  320. padding-right: 0;
  321. border-right: 1px solid $grid-cell-with-col-lines-border-color;
  322. }
  323. .#{$prefix}property-grid {
  324. .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
  325. .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
  326. padding-left: 12px;
  327. background-image: theme-background-image($theme-name, 'grid/property-cell-bg.gif');
  328. background-repeat: no-repeat;
  329. background-position: -16px 2px;
  330. }
  331. }
  332. .#{$prefix}grid-with-row-lines.#{$prefix}property-grid {
  333. .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
  334. .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
  335. background-position: -16px 1px;
  336. }
  337. }
  338. @if $include-ie {
  339. .#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
  340. background-position: -16px 2px;
  341. }
  342. }
  343. // @todo Where is this set?
  344. .#{$prefix}unselectable {
  345. @extend .no-select;
  346. }
  347. .#{$prefix}grid-row-body-hidden {
  348. @extend .#{$prefix}hide-display;
  349. }
  350. .#{$prefix}grid-group-collapsed {
  351. @extend .#{$prefix}hide-display;
  352. }
  353. //grid expander
  354. .#{$prefix}grid-view {
  355. .#{$prefix}grid-td-expander {
  356. vertical-align: top;
  357. }
  358. }
  359. .#{$prefix}grid-td-expander {
  360. background: repeat-y right transparent;
  361. }
  362. .#{$prefix}grid-view {
  363. .#{$prefix}grid-td-expander {
  364. .#{$prefix}grid-cell-inner {
  365. padding: 0 !important;
  366. }
  367. }
  368. }
  369. .#{$prefix}grid-row-expander {
  370. background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
  371. background-color: transparent;
  372. width: 9px;
  373. height: 13px;
  374. margin-left: 3px;
  375. background-repeat: no-repeat;
  376. background-position: 0 -2px;
  377. }
  378. .#{$prefix}grid-row-collapsed {
  379. .#{$prefix}grid-row-expander {
  380. background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
  381. }
  382. }
  383. .#{$prefix}grid-resize-marker {
  384. position: absolute;
  385. z-index: 5;
  386. top: 0;
  387. width: 1px;
  388. background-color: #0f0f0f;
  389. }
  390. //column move icons, when moving columns
  391. .col-move-top,
  392. .col-move-bottom {
  393. width: 9px;
  394. height: 9px;
  395. position: absolute;
  396. top: 0;
  397. line-height: 0;
  398. font-size: 0;
  399. overflow: hidden;
  400. z-index: 20000;
  401. background: no-repeat left top transparent;
  402. }
  403. .col-move-top {
  404. background-image: theme-background-image($theme-name, 'grid/col-move-top.gif');
  405. }
  406. .col-move-bottom {
  407. background-image: theme-background-image($theme-name, 'grid/col-move-bottom.gif');
  408. }
  409. //pading toolbar
  410. .#{$prefix}tbar-page-number {
  411. width: 30px;
  412. }
  413. //grouped grid
  414. .#{$prefix}grid-group,
  415. .#{$prefix}grid-group-body,
  416. .#{$prefix}grid-group-hd {
  417. // @tag iezoomhack
  418. }
  419. .#{$prefix}grid-group-hd {
  420. //padding-top: 6px;
  421. height: 24px;
  422. .#{$prefix}grid-cell-inner {
  423. background: $grid-grouped-header-background-color;
  424. // border-width: 1px solid;
  425. // border-style: $grid-grouped-header-border-style;
  426. // border-color: $grid-grouped-header-border-color;
  427. cursor: pointer;
  428. padding: 4px 8px 6px 8px;
  429. }
  430. }
  431. .#{$prefix}grid-group-title {
  432. // background: transparent no-repeat 0 0;
  433. // background-image: theme-background-image($theme-name, 'tree/Sprite_Directory_Tree_24px_SRC.png');
  434. color: $grid-grouped-title-color;
  435. font: $grid-grouped-title-font;
  436. }
  437. .#{$prefix}grid-group-hd-collapsed {
  438. .#{$prefix}grid-group-title {
  439. // background-image: theme-background-image($theme-name, 'tools-small.png');
  440. }
  441. }
  442. .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body {
  443. display: none;
  444. }
  445. .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title {
  446. background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
  447. }
  448. .#{$prefix}group-by-icon {
  449. background-image: theme-background-image($theme-name, 'grid/group-by.gif');
  450. }
  451. .#{$prefix}show-groups-icon {
  452. background-image: theme-background-image($theme-name, 'grid/group-by.gif');
  453. }
  454. .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
  455. padding: 0;
  456. }
  457. .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
  458. padding-left: 4px;
  459. padding-right: 4px;
  460. }
  461. .#{$prefix}grid-row-checker,
  462. .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
  463. height: 14px;
  464. width: 14px;
  465. line-height: 0;
  466. background-image: theme-background-image($theme-name, 'grid/unchecked.gif');
  467. background-position: -1px -1px;
  468. background-repeat: no-repeat;
  469. background-color: transparent;
  470. }
  471. // Row checker is a div but column header checker is the text span element, so make it display: block
  472. // Header checkbox element needs centering
  473. .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
  474. display: block;
  475. margin: 4px 5px;
  476. }
  477. @if $include-ie or $compile-all {
  478. /* IE6, IE7, and all IE Quirks mode need line-height to be the same as checkbox height or the header/row height will be too tall */
  479. .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie7m {
  480. .#{$prefix}grid-row-checker,
  481. .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
  482. line-height: 14px;
  483. }
  484. }
  485. }
  486. .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text {
  487. background-image: theme-background-image($theme-name, 'grid/checked.gif');
  488. }
  489. .#{$prefix}grid-cell-row-checker .#{$prefix}grid-cell-inner {
  490. padding-top: 4px;
  491. padding-bottom: 2px;
  492. line-height: $grid-row-height - 6;
  493. }
  494. .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-row-checker .#{$prefix}grid-cell-inner {
  495. padding-top: 3px;
  496. }
  497. .#{$prefix}grid-row-checker {
  498. margin-left: 1px;
  499. background-position: 50% -2px;
  500. }
  501. .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker,
  502. .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker {
  503. background-image: theme-background-image($theme-name, 'grid/checked.gif');
  504. }
  505. // Grid icons
  506. .#{$prefix}tbar-page-first {
  507. background-image: theme-background-image($theme-name, 'grid/page-first.gif') !important;
  508. }
  509. .#{$prefix}tbar-loading {
  510. background-image: theme-background-image($theme-name, 'grid/refresh.gif') !important;
  511. }
  512. .#{$prefix}tbar-page-last {
  513. background-image: theme-background-image($theme-name, 'grid/page-last.gif') !important;
  514. }
  515. .#{$prefix}tbar-page-next {
  516. background-image: theme-background-image($theme-name, 'grid/page-next.gif') !important;
  517. }
  518. .#{$prefix}tbar-page-prev {
  519. background-image: theme-background-image($theme-name, 'grid/page-prev.gif') !important;
  520. }
  521. .#{$prefix}item-disabled {
  522. .#{$prefix}tbar-loading {
  523. background-image: theme-background-image($theme-name, 'grid/refresh-disabled.gif') !important;
  524. }
  525. .#{$prefix}tbar-page-first {
  526. background-image: theme-background-image($theme-name, 'grid/page-first-disabled.gif') !important;
  527. }
  528. .#{$prefix}tbar-page-last {
  529. background-image: theme-background-image($theme-name, 'grid/page-last-disabled.gif') !important;
  530. }
  531. .#{$prefix}tbar-page-next {
  532. background-image: theme-background-image($theme-name, 'grid/page-next-disabled.gif') !important;
  533. }
  534. .#{$prefix}tbar-page-prev {
  535. background-image: theme-background-image($theme-name, 'grid/page-prev-disabled.gif') !important;
  536. }
  537. }
  538. //menu icons
  539. .#{$prefix}hmenu-sort-asc .#{$prefix}menu-item-icon {
  540. background-image: theme-background-image($theme-name, 'grid/hmenu-asc.gif');
  541. }
  542. .#{$prefix}hmenu-sort-desc .#{$prefix}menu-item-icon {
  543. background-image: theme-background-image($theme-name, 'grid/hmenu-desc.gif');
  544. }
  545. .#{$prefix}hmenu-lock .#{$prefix}menu-item-icon {
  546. background-image: theme-background-image($theme-name, 'grid/hmenu-lock.gif');
  547. }
  548. .#{$prefix}hmenu-unlock .#{$prefix}menu-item-icon {
  549. background-image: theme-background-image($theme-name, 'grid/hmenu-unlock.gif');
  550. }
  551. .#{$prefix}group-by-icon {
  552. background-image: theme-background-image($theme-name, 'grid/group-by.gif');
  553. }
  554. .#{$prefix}cols-icon .#{$prefix}menu-item-icon {
  555. background-image: theme-background-image($theme-name, 'grid/columns.gif');
  556. }
  557. .#{$prefix}show-groups-icon {
  558. background-image: theme-background-image($theme-name, 'grid/group-by.gif');
  559. }
  560. // Drag/drop indicator styles
  561. .#{$prefix}grid-drop-indicator {
  562. position: absolute;
  563. height: 1px;
  564. line-height: 0px;
  565. background-color: #77BC71;
  566. overflow: visible;
  567. .#{$prefix}grid-drop-indicator-left {
  568. position: absolute;
  569. top: -8px;
  570. left: -12px;
  571. background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png');
  572. height: 16px;
  573. width: 16px;
  574. }
  575. .#{$prefix}grid-drop-indicator-right {
  576. position: absolute;
  577. top: -8px;
  578. right: -11px;
  579. background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png');
  580. height: 16px;
  581. width: 16px;
  582. }
  583. }
  584. .#{$prefix}ie6 {
  585. .#{$prefix}grid-drop-indicator-left {
  586. background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif');
  587. }
  588. .#{$prefix}grid-drop-indicator-right {
  589. background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif');
  590. }
  591. }
  592. // Cell Editor
  593. .#{$prefix}grid-editor {
  594. // Position editor text over underlying grid cell text
  595. .#{$prefix}form-text {
  596. padding: 0 $grid-cell-editor-field-padding-horizontal;
  597. }
  598. .#{$prefix}form-cb-wrap {
  599. padding-top: $grid-cell-editor-checkbox-padding-top;
  600. }
  601. }
  602. // Row Editor
  603. .#{$prefix}grid-row-editor {
  604. position: absolute !important;
  605. z-index: 1;
  606. // @tag iezoomhack
  607. overflow: visible !important;
  608. .#{$prefix}form-text {
  609. padding: 0 $grid-row-editor-field-padding-horizontal;
  610. }
  611. .#{$prefix}form-cb-wrap {
  612. padding-top: $grid-row-editor-checkbox-padding-top;
  613. }
  614. .#{$prefix}form-display-field {
  615. font: $grid-editor-font;
  616. padding-top: 0;
  617. padding-left: $grid-row-editor-field-padding-horizontal;
  618. }
  619. .#{$prefix}panel-body {
  620. background-color: $grid-row-editor-background-color;
  621. border-top: $grid-row-editor-border;
  622. border-bottom: $grid-row-editor-border;
  623. }
  624. }
  625. // Row/Cell Editor Shared Styles
  626. .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
  627. // Align checkbox input
  628. .#{$prefix}form-cb-wrap {
  629. text-align: center;
  630. }
  631. .#{$prefix}form-trigger {
  632. height: $grid-row-height;
  633. }
  634. .#{$prefix}form-trigger-wrap {
  635. .#{$prefix}form-spinner-up, .#{$prefix}form-spinner-down {
  636. background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
  637. height: 10px !important;
  638. }
  639. }
  640. }
  641. .#{$prefix}grid {
  642. .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
  643. .#{$prefix}form-text {
  644. font: $grid-editor-font;
  645. height: $grid-row-height - 2;
  646. }
  647. }
  648. }
  649. .#{$prefix}border-box .#{$prefix}grid-editor,
  650. .#{$prefix}border-box .#{$prefix}grid-row-editor {
  651. .#{$prefix}form-trigger {
  652. height: $grid-row-height;
  653. }
  654. .#{$prefix}form-text {
  655. height: $grid-row-height;
  656. padding-bottom: 1px; // fix for firefox/opera since they ignore line-height on inputs
  657. }
  658. }
  659. @if $include-ie {
  660. .#{$prefix}ie {
  661. .#{$prefix}grid-editor .#{$prefix}form-text {
  662. padding-left: $grid-cell-editor-field-padding-horizontal + 1;
  663. }
  664. .#{$prefix}grid-row-editor .#{$prefix}form-text {
  665. padding-left: $grid-row-editor-field-padding-horizontal + 1;
  666. }
  667. }
  668. .#{$prefix}ie8m {
  669. .#{$prefix}grid-editor .#{$prefix}form-text,
  670. .#{$prefix}grid-row-editor .#{$prefix}form-text {
  671. padding-top: 1px;
  672. }
  673. }
  674. .#{$prefix}ie6,
  675. .#{$prefix}strict .#{$prefix}ie7 {
  676. .#{$prefix}grid-editor .#{$prefix}form-text,
  677. .#{$prefix}grid-row-editor .#{$prefix}form-text {
  678. height: $grid-row-height - ($form-field-border-width * 3);
  679. }
  680. }
  681. .#{$prefix}quirks .#{$prefix}ie9 {
  682. .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
  683. .#{$prefix}form-text {
  684. line-height: $grid-editor-line-height + 2;
  685. }
  686. }
  687. }
  688. }
  689. @if $include-opera {
  690. .#{$prefix}opera {
  691. .#{$prefix}grid-editor .#{$prefix}form-text {
  692. padding-left: $grid-cell-editor-field-padding-horizontal + 1;
  693. }
  694. .#{$prefix}grid-row-editor .#{$prefix}form-text {
  695. padding-left: $grid-row-editor-field-padding-horizontal + 1;
  696. }
  697. }
  698. }
  699. $grid-row-editor-btns-width: 200px;
  700. $grid-row-editor-btns-height: 32px;
  701. $grid-row-editor-btns-padding: 4px;
  702. .#{$prefix}grid-row-editor-buttons {
  703. background-color: $grid-row-editor-background-color;
  704. position: absolute;
  705. bottom: -31px;
  706. padding: 4px;
  707. height: 32px;
  708. .#{$prefix}strict .#{$prefix}ie7m & {
  709. width: $grid-row-editor-btns-width - 2 * $grid-row-editor-btns-padding;
  710. height: $grid-row-editor-btns-height - 2 * $grid-row-editor-btns-padding;
  711. }
  712. // @todo Doc these abbreviations here
  713. &-ml, &-mr, &-bl, &-br, &-bc {
  714. position: absolute;
  715. overflow: hidden;
  716. }
  717. &-bl, &-br {
  718. width: 4px;
  719. height: 4px;
  720. bottom: 0px;
  721. background-image: theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif');
  722. }
  723. &-bl {
  724. left: 0px;
  725. background-position: 0px -16px;
  726. }
  727. &-br {
  728. right: 0px;
  729. background-position: 0px -20px;
  730. }
  731. &-bc {
  732. position: absolute;
  733. left: 4px;
  734. bottom: 0px;
  735. width: 192px;
  736. height: 1px;
  737. background-color: $grid-row-editor-border-color;
  738. }
  739. &-ml, &-mr {
  740. height: 27px;
  741. width: 1px;
  742. top: 1px;
  743. background-color: $grid-row-editor-border-color;
  744. }
  745. &-ml {
  746. left: 0px
  747. }
  748. &-mr {
  749. background-position: 0px -20px;
  750. right: 0px;
  751. }
  752. }
  753. .#{$prefix}grid-row-editor-errors {
  754. ul {
  755. margin-left: 5px;
  756. }
  757. li {
  758. list-style: disc;
  759. margin-left: 15px;
  760. }
  761. }
  762. }