DredgePos/sass/dredgepos.orderScreen.sass

@import dredgepos.keyboards

#leftColumn
    @include flex-column
    flex-basis: 30%
    height: 100%
    background-color: grey

    > *
        @include flex-column-item

    .tableHeading
        @include flex
        color: black
        background-color: white
        flex-basis: 5%

    .tableInfo
        @include flex
        flex-basis: 5%

        > *
            @include flex-item
            @include flex

    .orderBox
        flex-basis: 75%
        background: var(--global-bgcolor)
        overflow-y: auto

    .orderBoxInfo
        @include flex
        flex-basis: 5%
        background-color: white

        .voidModeWarning
            @include flex
            @include flex-item
            color: red
            font-weight: bold

    .orderBoxFooter
        flex-basis: 10%
        @include flex-column

        > *
            @include flex
            @include flex-column-item
            justify-content: flex-end
            padding: 0 0.7em

        > .orderBoxTotal
            align-items: flex-end
            font-size: 1.3em
        > .orderBoxSelectedTotal
            align-items: flex-start
            font-size: 0.9em

#rightColumn
    @include flex-column
    height: 100%
    flex-basis: 70%
    background-color: var(--global-bgcolor)
    border-left: 2px solid var(--global-border-color)

    #topHalf
        @include flex-column
        @include flex-column-item
        flex-basis: 30%
        flex-grow:  0
        flex-shrink: 0

        .functionButtons
            @include flex-column-item
            @include flex
            flex-basis: 100%

            > .functionColumn
                @include flex-item
                @include flex-column
                flex-basis: 25%
                > *
                    @include flex-column-item

            > .printGroupButtons
                flex-basis: 25%
                height: 100%
                display: grid
                grid-template-columns: repeat(2, 1fr)
                grid-auto-rows: auto

                > *
                    padding: 0.5em


    #pageList
        @include flex
        @include flex-column-item
        flex-basis: 10%
        background-color: var(--global-secondary-bgcolor)
        flex-grow: 0
        flex-shrink: 0

        > *
            @include flex-item
            border-bottom: solid 2px var(--global-border-color)

        .active
            border-bottom: none

    #pageGroupContainer
        @include flex-column
        @include flex-column-item
        justify-content: flex-end
        flex-basis: 45%
        height: 50%
        scrollbar-width: none
        -ms-overflow-style: none

        ::-webkit-scrollbar
            display: none

.pageGroup
    /*display: inline-flex*/
    @include flex-column-item
    flex-basis: 100%
    flex-grow: 0
    overflow-x: auto
    display: none

    .gridPage
        width: 100%
        height: 100%
        flex-shrink: 0
        flex-grow: 0
        display: grid

.doubleWidth
    width: calc(200%)
    z-index: 10

.doubleHeight
    height: calc(200%)
    z-index: 10

.hasImage
    .buttonImg
        background-repeat: no-repeat
        background-size: contain
        background-position: center
        background-origin: content-box

.hasImage.normal
    font-size: 0.8em
    .buttonImg
        flex-basis: 40%
        height: 100%
        padding: 0.7em
        justify-content: flex-end

    .text
        @include flex
        justify-content: flex-start
        flex-basis: 60%
        height: 100%

.hasImage.doubleHeight
    @include flex-column

    .buttonImg
        padding: 0.6em
        flex-basis: 65%
        width: 100%
        flex-shrink: 0
        flex-grow: 0

    .text
        @include flex
        align-items: flex-start
        flex-grow: 0
        flex-shrink: 0
        flex-basis: 35%
        width: 100%
        overflow: hidden
        font-size: 0.9em

.hasImage.doubleWidth
    flex-direction: row
    .buttonImg
        @include flex
        flex-basis: 30%
        height: 100%
        padding-top: 2%

    .text
        @include flex
        flex-basis: 70%
        height: 100%
        justify-content: flex-start

.hasImage.doubleHeight.doubleWidth
    flex-direction: row

    .buttonImg
        @include flex
        flex-basis: 50%
        height: 100%


    .text
        @include flex
        flex-basis: 50%
        height: 100%


.pageNavigation
    @include flex
    @include flex-column-item

    > *
        @include flex-item


.coverSelector
    display: flex
    flex-wrap: wrap
    border: 2px solid var(--global-border-color)
    background: var(--global-bgcolor)
    position: absolute
    z-index: 100

    .coverSelectorButton
        flex-basis: 50%

    .coverSelectorButton:first-of-type
        flex-basis: 100%


.orderBoxTable
    width: 100%
    border-collapse: collapse

    tr
        background: var(--orderbox-row-background)


    .selected
        background: var(--orderbox-selected-row-background)

    thead tr
        background: var(--orderbox-header-background)

        th
            font-weight: normal
            text-align: center
            padding: 0.2em 0.5em

    tr
        td, th
            text-align: center
            font-size: 0.9em

        td
            padding: 1em 0.5em
            font-weight: bold

        .itemCell
            text-align: center
            width: 60%

        .itemIdCell
            display: none

        .qtyCell
            width: 10%

        .printGroupCell
            width: 20%

        .totalPriceCell
            width: 10%

        td.itemCell
            text-align: left
            display: flex
            flex-direction: column

    tr.instructionRow
        td
            font-weight: 100
        td.itemCell
            padding-left: 2em
            small
                font-size: 0

        .qtyCell, .printGroupCell
            font-size: 0

.gridContainer
    background: var(--global-bgcolor)
    border: var(--global-border-color) solid 2px
    z-index: 500
    margin: auto
    position: absolute
    left: 0
    right: 0
    top: 50%
    transform: translateY(-50%)

    .gridContainerHeader
        height: 3em
        width: 100%
        @include flex
        background-color: var(--global-secondary-bgcolor)
        border-bottom: solid 1px var(--global-border-color)

        > *
            @include flex
            height: 100%

        span
            flex-basis: 90%
        .closeGrid
            flex-basis: 10%

    .gridContainerGrid
        width: 100%
        @include flex-column
        scrollbar-width: none
        -ms-overflow-style: none

        ::-webkit-scrollbar
            display: none

        .pageGroup
            display: inline-flex
            flex-basis: 100%
            flex-grow: 0
            overflow-x: auto

            .gridPage
                width: 100%
                height: 100%
                flex-shrink: 0
                flex-grow: 0
                display: grid