Restructured files, made build script
This commit is contained in:
343
sass/dredgepos.orderScreen.sass
Normal file
343
sass/dredgepos.orderScreen.sass
Normal file
@@ -0,0 +1,343 @@
|
||||
@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%
|
||||
|
||||
.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
|
||||
Reference in New Issue
Block a user