lixinru
/
YtIoT


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-grid-Panel-css_mixin-extjs-grid'>/**
</span> * Creates base structure for a Grid.
 * @member Ext.grid.Panel
 */
@mixin extjs-grid {
    //main grid view
    .#{$prefix}panel {
        .#{$prefix}grid-body {
            background: $panel-body-background-color;
            border-color: $panel-body-border-color;
            border-style: $panel-body-border-style;
            border-width: 1px;
            border-top-color: $grid-header-background-color;
        }

        // Hide using visibility so that its available width can be calculated correctly
        .#{$prefix}grid-header-ct-hidden {
            visibility: hidden;
        }
    }

    .#{$prefix}grid-empty {
        padding: 10px;
        color: gray;
        font: normal 11px tahoma, arial, helvetica, sans-serif;
    }

    .#{$prefix}grid-header-hidden .#{$prefix}grid-body {
        border-top-color: $panel-body-border-color !important;
    }

    .#{$prefix}grid-view {
        overflow: hidden;

        position: relative;
    }

    .#{$prefix}grid-table {
        table-layout: fixed;
        border-collapse: separate;
    }

    // Tree with a default single column is auto width
    // Override any inline width style set by the widget itself (through its ColumnModel) to force it to be auto width.
    .#{$prefix}autowidth-table table.#{$prefix}grid-table {
        table-layout: auto;
        width: auto!important;
    }

    .#{$prefix}grid-row .#{$prefix}grid-table {
        border-collapse: collapse;
    }

    .#{$prefix}grid-locked .#{$prefix}grid-inner-locked {
        border-width: 0 1px 0 0 !important;
        border-style: solid;
    }

    .#{$prefix}grid-header-ct {
        cursor: default;
        zoom: 1;
        padding: 0;
        border: 1px solid $panel-body-border-color;

        // Body border provided by headerCt only when in accordion layout.
        border-bottom-color: $grid-header-background-color;

        @if $supports-gradients or $compile-all {
            @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
        }
    }

    .#{$prefix}accordion-item .#{$prefix}grid-header-ct {
        border-width: 0 0 1px 0!important;
    }

    .#{$prefix}column-header {
        padding: 0;
        position: absolute;
        overflow: hidden;

        border-right: 1px solid $grid-header-background-color;
        border-left: 0 none;
        border-top: 0 none;
        border-bottom: 0 none;

        text-shadow: 0 1px 0 rgba(255, 255, 255, .3);

        @if $grid-header-color {
            color: $grid-header-color;
        }
        font: normal ceil($font-size * .9) $font-family;

        @if $supports-gradients or $compile-all {
            @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
        }
    }

    .#{$prefix}group-header {
        padding: 0;
        border-left-width: 0;
    }
    .#{$prefix}group-sub-header {
        background: transparent;
        border-top: 1px solid $grid-header-background-color;
        border-left-width: 0;
    }

    .#{$prefix}column-header-inner {
        zoom: 1;
        position: relative;
        white-space: nowrap;
        line-height: $grid-header-line-height;
        padding: $grid-header-padding;

        .#{$prefix}column-header-text {
            white-space: nowrap;
        }
    }

    .#{$prefix}column-header-over,
    .#{$prefix}column-header-sort-ASC,
    .#{$prefix}column-header-sort-DESC {
        border-left-color: $grid-header-over-border-color;
        border-right-color: $grid-header-over-border-color;

        @if $supports-gradients or $compile-all {
            @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient);
        }
    }

    @if not $supports-gradients or $compile-all {
        .#{$prefix}nlg {
            .#{$prefix}grid-header-ct,
            .#{$prefix}column-header {
                background: repeat-x 0 top;
                background-image: theme-background-image($theme-name, 'grid/column-header-bg.gif');
            }

            .#{$prefix}column-header-over,
            .#{$prefix}column-header-sort-ASC,
            .#{$prefix}column-header-sort-DESC {
                background: #ebf3fd repeat-x 0 top;
                background-image: theme-background-image($theme-name, 'grid/column-header-over-bg.gif');
            }
        }
    }

    .#{$prefix}column-header-trigger {
        display: none;
        height: 100%;
        width: $grid-header-trigger-width;
        background: no-repeat left center;
        background-color: #c3daf9;
        background-image: theme-background-image($theme-name, 'grid/grid3-hd-btn.gif');
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        cursor: pointer;
    }

    .#{$prefix}column-header-over, .#{$prefix}column-header-open {
        .#{$prefix}column-header-trigger {
            display: block;
        }
    }

    .#{$prefix}column-header-align-right {
        text-align: right;

        .#{$prefix}column-header-text {
            padding-right: 0.5ex;
            margin-right: 6px;
        }
    }
    .#{$prefix}column-header-align-center {
        text-align: center;
    }
    .#{$prefix}column-header-align-left {
        text-align: left;
    }

    // Sort direction indicator is a background of the text span.
    .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
        padding-right: 16px;
        background: no-repeat right 6px;
        background-image: theme-background-image($theme-name, 'grid/sort_asc.gif');
    }
    .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text {
        padding-right: 16px;
        background: no-repeat right 6px;
        background-image: theme-background-image($theme-name, 'grid/sort_desc.gif');
    }

    //grid rows
    .#{$prefix}grid-row {
        vertical-align: top;
        .#{$prefix}grid-cell {
            @if $grid-row-cell-color {
                color: $grid-row-cell-color;
            }
            font: $grid-row-cell-font;
            background-color: $grid-row-cell-background;
            border-color: $grid-row-cell-border-color;
            border-style: $grid-row-cell-border-style;
            border-top-color: lighten($grid-row-cell-border-color, 5);
            border-width: 0;
        }
    }

    .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell {
        border-width: $grid-row-cell-border-width;
    }

    .#{$prefix}grid-rowwrap-div {
        border-width: $grid-row-wrap-border-width;
        border-color: $grid-row-wrap-border-color;
        border-style: $grid-row-wrap-border-style;
        border-top-color: lighten($grid-row-wrap-border-color, 5);

        overflow: hidden;
    }

    .#{$prefix}grid-row-alt .#{$prefix}grid-cell,
    .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div {
        background-color: $grid-row-cell-alt-background;
    }

    .#{$prefix}grid-row-over .#{$prefix}grid-cell,
    .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div {
        border-color: $grid-row-cell-over-border-color;

        background-color: $grid-row-cell-over-background-color;
    }

    .#{$prefix}grid-row-focused .#{$prefix}grid-cell,
    .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div {
        border-color: $grid-row-cell-focus-border-color;

        background-color: $grid-row-cell-focus-background-color;
    }

    .#{$prefix}grid-row-selected .#{$prefix}grid-cell,
    .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div {
        border-style: $grid-row-cell-selected-border-style;
        border-color: $grid-row-cell-selected-border-color;

        background-color: $grid-row-cell-selected-background-color !important;
    }

    .#{$prefix}grid-rowwrap-div {
        .#{$prefix}grid-cell,
        .#{$prefix}grid-cell-inner {
            border-width: 0;

            background: transparent;
        }
    }

    .#{$prefix}grid-row-body-hidden {
        display: none;
    }

    .#{$prefix}grid-rowbody {
        font: $grid-row-body-font;

        padding: $grid-row-body-padding;

        p {
            margin: 5px 5px 10px 5px;
        }
    }

    //grid cells
    .#{$prefix}grid-cell {
        overflow: hidden;
    }

    .#{$prefix}grid-cell-inner {
        overflow: hidden;

        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;

        padding: $grid-cell-inner-padding-top $grid-cell-inner-padding-horizontal $grid-cell-inner-padding-bottom;

        white-space: nowrap;
    }

    .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-inner {
        line-height: $grid-row-cell-line-height - 2;
        padding-bottom: $grid-cell-inner-padding-bottom + 1;
    }

    // Action columns with a standard, 16x16 icon require less padding
    .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
        line-height: 0;
        padding: 2px;
    }

    .#{$prefix}action-col-cell .#{$prefix}item-disabled {
        @include opacity(0.3);
    }

    .#{$prefix}grid-with-row-lines .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
        padding-top: 1px;
    }

    .#{$prefix}grid-row .#{$prefix}grid-cell-special {
        padding: 0;
        border-right: 1px solid $grid-cell-with-col-lines-border-color;
        @include background-gradient(#f6f6f6, 'grid-cell-special');
    }

    .#{$prefix}grid-row .#{$prefix}grid-cell-row-checker {
        vertical-align: middle;
    }

    /*
    IE6-8 have issues with shrinking the TR to 0px (even w/line-height=0), so we
    use an IE-specific trick to make the row disappear. We cannot do this on any
    other browser, because it is not a non-standard thing to do and those other
    browsers will do whacky things with it.
    */

    .#{$prefix}ie6,
    .#{$prefix}ie7,
    .#{$prefix}quirks .#{$prefix}ie8 {
        .#{$prefix}grid-header-row {
            position: absolute;
        }
    }

    .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
        border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%);

        @include background-gradient($grid-row-cell-selected-background-color, 'grid-cell-special');
    }

    .#{$prefix}grid-dirty-cell {
        background-image: theme-background-image($theme-name, 'grid/dirty.gif');
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .#{$prefix}grid-cell-selected {
        background-color: #B8CFEE !important;
    }

    @if not $supports-gradients or $compile-all {
        .#{$prefix}nlg {
            .#{$prefix}grid-cell-special {
                background-repeat: repeat-y;
                background-position: top right;
            }

            .#{$prefix}grid-row .#{$prefix}grid-cell-special,
            .#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
                background-image: theme-background-image($theme-name, 'grid/cell-special-bg.gif');

            }

            .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special,
            .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
                background-image: theme-background-image($theme-name, 'grid/cell-special-selected-bg.gif');
            }
        }
    }

    .#{$prefix}grid-with-col-lines .#{$prefix}grid-cell {
        padding-right: 0;
        border-right: 1px solid $grid-cell-with-col-lines-border-color;
    }

    .#{$prefix}property-grid {
        .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
        .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
            padding-left: 12px;
            background-image: theme-background-image($theme-name, 'grid/property-cell-bg.gif');
            background-repeat: no-repeat;
            background-position: -16px 2px;
        }
    }

    .#{$prefix}grid-with-row-lines.#{$prefix}property-grid {
        .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
        .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
            background-position: -16px 1px;
        }
    }

    @if $include-ie {
        .#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
            background-position: -16px 2px;
        }
    }

    .#{$prefix}unselectable {
        @include no-select;
    }

    .#{$prefix}grid-row-body-hidden {
        display: none;
    }

    .#{$prefix}grid-group-collapsed {
        display: none;
    }

    //grid expander
    .#{$prefix}grid-view {
        .#{$prefix}grid-td-expander {
            vertical-align: top;
        }
    }

    .#{$prefix}grid-td-expander {
        background: repeat-y right transparent;
    }

    .#{$prefix}grid-view {
        .#{$prefix}grid-td-expander {
            .#{$prefix}grid-cell-inner {
                padding: 0 !important;
            }
        }
    }

    .#{$prefix}grid-row-expander {
        background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
        background-color: transparent;

        width: 9px;
        height: 13px;

        margin-left: 3px;

        background-repeat: no-repeat;
        background-position: 0 -2px;
    }

    .#{$prefix}grid-row-collapsed {
        .#{$prefix}grid-row-expander {
            background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
        }
    }

    .#{$prefix}grid-resize-marker {
        position: absolute;
        z-index: 5;
        top: 0;
        width: 1px;
        background-color: #0f0f0f;
    }

    //column move icons, when moving columns
    .col-move-top,
    .col-move-bottom {
        width: 9px;
        height: 9px;
        position: absolute;
        top: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
        z-index: 20000;
        background: no-repeat left top transparent;
    }

    .col-move-top {
        background-image: theme-background-image($theme-name, 'grid/col-move-top.gif');
    }

    .col-move-bottom {
        background-image: theme-background-image($theme-name, 'grid/col-move-bottom.gif');
    }

    //pading toolbar
    .#{$prefix}tbar-page-number {
        width: 30px;
    }

    //grouped grid
    .#{$prefix}grid-group,
    .#{$prefix}grid-group-body,
    .#{$prefix}grid-group-hd {
        zoom: 1;
    }

    .#{$prefix}grid-group-hd {
        padding-top: 6px;

        .#{$prefix}grid-cell-inner {
            padding: 10px 4px 4px 4px;

            background: $grid-grouped-header-background-color;

            border-width: $grid-grouped-header-border-width;
            border-style: $grid-grouped-header-border-style;
            border-color: $grid-grouped-header-border-color;

            cursor: pointer;
        }
    }

    .#{$prefix}grid-group-hd-collapsible {
        .#{$prefix}grid-group-title {
            background: transparent no-repeat 0 -1px;
            background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
            padding: 0 0 0 14px;
        }
    }

    .#{$prefix}grid-group-title {
        color: $grid-grouped-title-color;
        font: $grid-grouped-title-font;
    }

    .#{$prefix}grid-group-hd-collapsed {
        .#{$prefix}grid-group-title {
            background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
        }
    }

    .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body {
        display: none;
    }

    .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title {
        background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
    }

    .#{$prefix}group-by-icon {
        background-image: theme-background-image($theme-name, 'grid/group-by.gif');
    }

    .#{$prefix}show-groups-icon {
        background-image: theme-background-image($theme-name, 'grid/group-by.gif');
    }

    .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
        padding: 0;
    }

    .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
        padding-left: 4px;
        padding-right: 4px;
    }

    .#{$prefix}grid-row-checker,
    .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
        height: 14px;
        width: 14px;
        line-height: 0;
        background-image: theme-background-image($theme-name, 'grid/unchecked.gif');
        background-position: -1px -1px;
        background-repeat: no-repeat;
        background-color: transparent;
    }

    // Row checker is a div but column header checker is the text span element, so make it display: block
    // Header checkbox element needs centering
    .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
        display: block;
        margin: 0 5px;
    }

    @if $include-ie or $compile-all {
        /* 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 */
        .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie7m {
            .#{$prefix}grid-row-checker,
            .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
                line-height: 14px;
            }
        }
    }

    .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text {
        background-image: theme-background-image($theme-name, 'grid/checked.gif');
    }

    .#{$prefix}grid-cell-row-checker .#{$prefix}grid-cell-inner {
        padding-top: 4px;
        padding-bottom: 2px;
        line-height: $grid-row-height - 6;
    }
    .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-row-checker .#{$prefix}grid-cell-inner {
        padding-top: 3px;
    }
    .#{$prefix}grid-row-checker {
        margin-left: 1px;

        background-position: 50% -2px;
    }

    .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker,
    .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker {
        background-image: theme-background-image($theme-name, 'grid/checked.gif');
    }

    //grid icons
    .#{$prefix}tbar-page-first {
        background-image: theme-background-image($theme-name, 'grid/page-first.gif') !important;
    }

    .#{$prefix}tbar-loading {
        background-image: theme-background-image($theme-name, 'grid/refresh.gif') !important;
    }

    .#{$prefix}tbar-page-last {
        background-image: theme-background-image($theme-name, 'grid/page-last.gif') !important;
    }

    .#{$prefix}tbar-page-next {
        background-image: theme-background-image($theme-name, 'grid/page-next.gif') !important;
    }

    .#{$prefix}tbar-page-prev {
        background-image: theme-background-image($theme-name, 'grid/page-prev.gif') !important;
    }

    .#{$prefix}item-disabled {
        .#{$prefix}tbar-loading {
            background-image: theme-background-image($theme-name, 'grid/refresh-disabled.gif') !important;
        }

        .#{$prefix}tbar-page-first {
            background-image: theme-background-image($theme-name, 'grid/page-first-disabled.gif') !important;
        }

        .#{$prefix}tbar-page-last {
            background-image: theme-background-image($theme-name, 'grid/page-last-disabled.gif') !important;
        }

        .#{$prefix}tbar-page-next {
            background-image: theme-background-image($theme-name, 'grid/page-next-disabled.gif') !important;
        }

        .#{$prefix}tbar-page-prev {
            background-image: theme-background-image($theme-name, 'grid/page-prev-disabled.gif') !important;
        }
    }

    //menu icons
    .#{$prefix}hmenu-sort-asc .#{$prefix}menu-item-icon {
        background-image: theme-background-image($theme-name, 'grid/hmenu-asc.gif');
    }

    .#{$prefix}hmenu-sort-desc .#{$prefix}menu-item-icon {
        background-image: theme-background-image($theme-name, 'grid/hmenu-desc.gif');
    }

    .#{$prefix}hmenu-lock .#{$prefix}menu-item-icon {
        background-image: theme-background-image($theme-name, 'grid/hmenu-lock.gif');
    }

    .#{$prefix}hmenu-unlock .#{$prefix}menu-item-icon {
        background-image: theme-background-image($theme-name, 'grid/hmenu-unlock.gif');
    }

    .#{$prefix}group-by-icon {
        background-image: theme-background-image($theme-name, 'grid/group-by.gif');
    }

    .#{$prefix}cols-icon .#{$prefix}menu-item-icon {
        background-image: theme-background-image($theme-name, 'grid/columns.gif');
    }

    .#{$prefix}show-groups-icon {
        background-image: theme-background-image($theme-name, 'grid/group-by.gif');
    }

    // Drag/drop indicator styles
    .#{$prefix}grid-drop-indicator {
        position: absolute;
        height: 1px;
        line-height: 0px;
        background-color: #77BC71;
        overflow: visible;

        .#{$prefix}grid-drop-indicator-left {
            position: absolute;
            top: -8px;
            left: -12px;
            background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png');
            height: 16px;
            width: 16px;
        }

        .#{$prefix}grid-drop-indicator-right {
            position: absolute;
            top: -8px;
            right: -11px;
            background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png');
            height: 16px;
            width: 16px;
        }
    }

    .#{$prefix}ie6 {
        .#{$prefix}grid-drop-indicator-left {
            background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif');
        }

        .#{$prefix}grid-drop-indicator-right {
            background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif');
        }
    }

    // Cell Editor
    .#{$prefix}grid-editor {
        // Position editor text over underlying grid cell text
        .#{$prefix}form-text {
            padding: 0 $grid-cell-editor-field-padding-horizontal;
        }
        .#{$prefix}form-cb-wrap {
            padding-top: $grid-cell-editor-checkbox-padding-top;
        }
    }

    // Row Editor
    .#{$prefix}grid-row-editor {
        position: absolute !important;
        z-index: 1;
        zoom: 1;
        overflow: visible !important;

        .#{$prefix}form-text {
            padding: 0 $grid-row-editor-field-padding-horizontal;
        }
        .#{$prefix}form-cb-wrap {
            padding-top: $grid-row-editor-cb-wrap-padding-top;
        }
        .#{$prefix}form-checkbox {
            margin-left: $grid-row-editor-checkbox-margin-left;
        }
        .#{$prefix}form-display-field {
            font: $grid-editor-font;
            padding-top: 0;
            padding-left: $grid-row-editor-field-padding-horizontal;
        }

        .#{$prefix}panel-body {
            background-color: $grid-row-editor-background-color;
            border-top: $grid-row-editor-border;
            border-bottom: $grid-row-editor-border;
        }
    }

    // Row/Cell Editor Shared Styles
    .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
        // Align checkbox input
        .#{$prefix}form-cb-wrap {
            text-align: center;
        }
        .#{$prefix}form-trigger {
            height: $grid-row-height - $form-field-border-width;
        }
        .#{$prefix}form-trigger-wrap {
            .#{$prefix}form-spinner-up, .#{$prefix}form-spinner-down {
                background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
                height: 10px !important;
            }
        }
    }
    .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
        .#{$prefix}form-text {
            font: $grid-editor-font;
            height: $grid-row-height - 2;
        }
    }

    .#{$prefix}border-box .#{$prefix}grid-editor,
    .#{$prefix}border-box .#{$prefix}grid-row-editor {
        .#{$prefix}form-trigger {
            height: $grid-row-height;
        }
        .#{$prefix}form-text {
            height: $grid-row-height;
            padding-bottom: 1px; // fix for firefox/opera since they ignore line-height on inputs
        }
    }

    @if $include-ie {
        .#{$prefix}ie {
            .#{$prefix}grid-editor .#{$prefix}form-text {
                padding-left: $grid-cell-editor-field-padding-horizontal + 1;
            }
            .#{$prefix}grid-row-editor .#{$prefix}form-text {
                padding-left: $grid-row-editor-field-padding-horizontal + 1;
            }
        }
        .#{$prefix}ie8m {
            .#{$prefix}grid-editor .#{$prefix}form-text,
            .#{$prefix}grid-row-editor .#{$prefix}form-text {
                padding-top: 1px;
            }
        }
        .#{$prefix}strict .#{$prefix}ie6,
        .#{$prefix}strict .#{$prefix}ie7 {
            .#{$prefix}grid-editor .#{$prefix}form-text,
            .#{$prefix}grid-row-editor .#{$prefix}form-text {
                height: $grid-row-height - ($form-field-border-width * 3);
            }
        }
        .#{$prefix}quirks .#{$prefix}ie9 {
            .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
                .#{$prefix}form-text {
                    line-height: $grid-editor-line-height + 2;
                }
            }
        }
    }

    @if $include-opera {
        .#{$prefix}opera {
            .#{$prefix}grid-editor .#{$prefix}form-text {
                padding-left: $grid-cell-editor-field-padding-horizontal + 1;
            }
            .#{$prefix}grid-row-editor .#{$prefix}form-text {
                padding-left: $grid-row-editor-field-padding-horizontal + 1;
            }
        }
    }


    .#{$prefix}grid-row-editor-buttons {
        background-color: $grid-row-editor-background-color;
        position: absolute;
        bottom: -31px;
        padding: 4px;
        height: 32px;

        .#{$prefix}strict .#{$prefix}ie7m &amp; {
            width: 192px;
            height: 24px;
        }
    }

    .#{$prefix}grid-row-editor-buttons-ml,
    .#{$prefix}grid-row-editor-buttons-mr,
    .#{$prefix}grid-row-editor-buttons-bl,
    .#{$prefix}grid-row-editor-buttons-br,
    .#{$prefix}grid-row-editor-buttons-bc {
        position: absolute;
        overflow: hidden;
    }

    .#{$prefix}grid-row-editor-buttons-bl,
    .#{$prefix}grid-row-editor-buttons-br {
        width: 4px;
        height: 4px;
        bottom: 0px;
        background-image: theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif');
    }
    .#{$prefix}grid-row-editor-buttons-bl {
        left: 0px;
        background-position: 0px -16px;
    }
    .#{$prefix}grid-row-editor-buttons-br {
        right: 0px;
        background-position: 0px -20px;
    }

    .#{$prefix}grid-row-editor-buttons-bc {
        position: absolute;
        left: 4px;
        bottom: 0px;
        width: 192px;
        height: 1px;
        background-color: $grid-row-editor-border-color;
    }

    .#{$prefix}grid-row-editor-buttons-ml,
    .#{$prefix}grid-row-editor-buttons-mr {
        height: 27px;
        width: 1px;
        top: 1px;
        background-color: $grid-row-editor-border-color;
    }
    .#{$prefix}grid-row-editor-buttons-ml {
        left: 0px
    }
    .#{$prefix}grid-row-editor-buttons-mr {
        background-position: 0px -20px;
        right: 0px;
    }

    .#{$prefix}grid-row-editor-errors {
        ul {
            margin-left: 5px;
        }
        li {
            list-style: disc;
            margin-left: 15px;
        }
    }
}
</pre>
</body>
</html>