tui-grid/src/css/layout.styl

TOAST UI Grid : Powerful data grid control supported by TOAST UI

.border-line
    position absolute
    z-index 16

.border-line-top
    top 0
    left 0
    right 0
    height 1px

.border-line-left
    top 0
    bottom 17px
    left 0
    width 1px

.border-line-right
    top 0
    bottom 0
    right 0
    width 1px

.border-line-bottom
    bottom 0
    left 0
    right 17px
    height 1px

.no-scroll-x
    .border-line-left
        bottom 0
        right 0

.no-scroll-y
    .border-line-bottom
        right 0

.content-area
    position relative
    border-style solid
    border-width 0 0 1px

    &.no-scroll-x
        border-bottom-width 0

.head-area
    border-style solid
    border-width 0 0 1px
    position relative
    overflow hidden

    .table
        border-top-style solid

.body-area
    border-style solid
    border-width 0
    position relative
    overflow scroll

.has-summary-top
    .body-area
        margin-top -17px
        border-top-width 1px

.no-scroll-x
    &.has-summary-top
        .body-area
            margin-top 0

.summary-area
    position relative
    margin-top -18px
    border-top 1px solid
    overflow-y hidden
    overflow-x scroll

.no-scroll-x
    .summary-area
        margin-top -1px
        margin-bottom 1px
        overflow-x hidden
    .summary-area-right
        bottom 0
    &.has-summary-top
        margin-top 0


.has-summary-top
    .summary-area
        margin-top 0
        border-top-style hidden
        margin-bottom 0

.lside-area
    display none
    position absolute
    top 0
    left 0
    overflow hidden
    z-index 10

    .body-area
        margin-right -17px

        .selection-layer
            left 1px

.rside-area
    display none
    overflow hidden

    .head-area, .summary-area
        margin-right 17px

    .frozen-border-top
        position absolute
        top 0

        .column-resize-handle
            top 0

    .frozen-border-bottom
        position absolute
        bottom 0
        height 17px

.no-scroll-y
    .rside-area
        .head-area, .summary-area
            margin-right 0

.body-container
    position relative
    margin-top -1px

.table-container
    position absolute

.scrollbar-right-top
    display block
    position absolute
    top 0
    right 0
    width 16px
    border-style solid
    border-width 1px
    z-index 19

.scrollbar-left-bottom
    position absolute
    left 0
    right 0
    bottom 0
    height 17px
    border-style solid
    border-width 0 1px
    z-index 19

.scrollbar-right-bottom
    position absolute
    bottom 0
    right 0
    width 16px
    border-style solid
    border-width 1px 1px 0 1px
    z-index 19

.no-scroll-x
    .scrollbar-right-bottom
        height 0

    &.has-summary-bottom
        .scrollbar-right-bottom
            border-bottom-width 1px

.no-scroll-y
    .scrollbar-right-bottom
        width 0
        height 16px
        border-left 0

.scrollbar-y-inner-border
    display block
    position absolute
    right 17px
    width 1px
    z-index 19

.scrollbar-y-outer-border
    display block
    position absolute
    top 0
    bottom 0
    right 0
    width 1px
    z-index 19

.scrollbar-frozen-border
    position absolute
    bottom 0
    width 0
    height 17px
    border-style solid
    border-width 0 1px 0 0
    z-index 19

.frozen-border
    position absolute
    top 0
    bottom 0
    z-index 17

.height-resize-handle
    overflow hidden
    background-color #fff
    cursor row-resize
    height 17px
    border-style solid
    border-width 0 1px 1px
    border-color #fff
    font-size 0
    text-align center

    button
        display block
        width 100%
        cursor row-resize
        padding 0
        margin 0
        outline 0
        border 0
        background transparent

        span
            background url(../../images/icons.png) no-repeat -39px -10px
            display inline-block
            width 16px
            height 17px