Files
DredgePos/wwwroot/styles/sass/dredgepos.orderScreen.sass
2021-11-28 16:50:58 +10:00

199 lines
4.8 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)
.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
#pageContainer
@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: 80%
width: 100%
.text
@include flex
flex-basis: 20%
width: 100%
.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
flex-basis: 15%
> *
@include flex-item