198 lines
4.8 KiB
Sass
198 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: magenta
|
|
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
|
|
flex-basis: 15%
|
|
|
|
> *
|
|
@include flex-item |