Files
DredgePos/wwwroot/styles/sass/dredgepos.orderScreen.sass
2022-01-04 15:04:55 +10:00

251 lines
5.9 KiB
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
flex-basis: 5%
background-color: white
.orderBoxFooter
flex-basis: 10%
#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
.utilityButtons
@include flex-column-item
@include flex
flex-basis: 20%
> *
@include flex-item
@include flex
flex-basis: 30%
.logoutButton
flex-basis: 10%
.functionButtons
@include flex-column-item
@include flex
flex-basis: 80%
> *
@include flex-item
@include flex-column
> *
@include flex-column-item
#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
grid-template-columns: repeat(6, 1fr)
grid-template-rows: repeat(8, 1fr)
.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
display: none
> *
@include flex-item
.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: 70%
td.itemCell
text-align: left
tr.instructionRow
td.itemCell
padding-left: 2em
font-weight: 100
.qtyCell, .totalPriceCell, .printGroupCell
font-size: 0