Converted to SASS
This commit is contained in:
16
wwwroot/styles/sass/dark.theme.sass
Normal file
16
wwwroot/styles/sass/dark.theme.sass
Normal file
@@ -0,0 +1,16 @@
|
||||
\:root
|
||||
--body-background: linear-gradient(137deg, #242424 25%, #2e2e2e 25%, #2e2e2e 50%, #242424 50%, #242424 75%, #2e2e2e 75%, #2e2e2e 100%)
|
||||
--body-background-size: 58.65px 54.69px
|
||||
--global-border-color: #eee
|
||||
--global-bgcolor: #222
|
||||
--global-secondary-bgcolor: #666
|
||||
--global-text-color: #eee
|
||||
--pos-header-background: #666
|
||||
--pos-header-text-color: #fff
|
||||
--posbutton-border-color: var(--global-bgcolor)
|
||||
--posbutton-border-color-active: #fff
|
||||
--posbutton-text-color: var(--global-text-color)
|
||||
--posbutton-text-color-active: #fff
|
||||
--posbutton-background: #232B30 -webkit-linear-gradient(top, #3D4850 3%, #000 4%, #333 100%)
|
||||
--posbutton-background-active: #20282D -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)) 0 top
|
||||
|
||||
2
wwwroot/styles/sass/dredgepos.authenticate.sass
Normal file
2
wwwroot/styles/sass/dredgepos.authenticate.sass
Normal file
@@ -0,0 +1,2 @@
|
||||
@import dredgepos.keyboards
|
||||
|
||||
77
wwwroot/styles/sass/dredgepos.core.sass
Normal file
77
wwwroot/styles/sass/dredgepos.core.sass
Normal file
@@ -0,0 +1,77 @@
|
||||
*
|
||||
margin: 0
|
||||
padding: 0
|
||||
box-sizing: border-box
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
|
||||
input[type=text], select, textarea
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
|
||||
#alert, #decorator
|
||||
display: none
|
||||
|
||||
@mixin absoluteCenter
|
||||
position: absolute
|
||||
margin: auto
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
@mixin mobile
|
||||
@media screen and (max-width: 900px)
|
||||
@content
|
||||
|
||||
@mixin flex
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
@mixin flex-column
|
||||
@include flex
|
||||
flex-direction: column
|
||||
|
||||
@mixin flex-item
|
||||
height: 100%
|
||||
flex: 1
|
||||
|
||||
@mixin flex-column-item
|
||||
width: 100%
|
||||
flex: 1
|
||||
|
||||
body
|
||||
background-image: var(--body-background)
|
||||
background-size: var(--body-background-size)
|
||||
color: var(--global-text-color)
|
||||
|
||||
.posButton
|
||||
color: var(--posbutton-text-color)
|
||||
background: var(--posbutton-background)
|
||||
text-shadow: 1px 1px #1f272b
|
||||
border: solid 1px var(--posbutton-border-color)
|
||||
|
||||
.posHeader
|
||||
padding: 0.5em
|
||||
color: var(--pos-header-text-color)
|
||||
background: var(--pos-header-background)
|
||||
|
||||
.posButton.active,.posButton:active
|
||||
border-color: var(--posbutton-border-color-active)
|
||||
color: var(--posbutton-text-color-active)
|
||||
background: var(--posbutton-background-active) /* webkit */
|
||||
box-shadow: 1px 1px 1px rgba(255,255,255,0.1) /* CSS3 */
|
||||
|
||||
#pageContainer
|
||||
@include flex
|
||||
height: 100vh !important
|
||||
|
||||
.posButton, .posHeader
|
||||
@include flex
|
||||
text-align: center
|
||||
cursor: default
|
||||
|
||||
.posButton.active, .posButton:active
|
||||
border: inset 2px
|
||||
|
||||
|
||||
140
wwwroot/styles/sass/dredgepos.floorplan.sass
Normal file
140
wwwroot/styles/sass/dredgepos.floorplan.sass
Normal file
@@ -0,0 +1,140 @@
|
||||
@import dredgepos.keyboards
|
||||
|
||||
#floorplanLeftColumn, #floorplanRightColumn
|
||||
@include flex-column
|
||||
flex-basis: 10%
|
||||
height: 100%
|
||||
background: var(--global-bgcolor)
|
||||
|
||||
#floorplanCenterColumn
|
||||
@include flex-column
|
||||
height: 100%
|
||||
flex-basis: 80%
|
||||
|
||||
.topCell
|
||||
@include flex
|
||||
flex-basis: 10%
|
||||
width: 100%
|
||||
|
||||
.posHeader
|
||||
@include flex-item
|
||||
|
||||
.posHeader, .posButton
|
||||
border-bottom: solid 2px
|
||||
|
||||
.roomButton
|
||||
border-left: none
|
||||
border-right: none
|
||||
|
||||
.roomButton.active, .roomButton.active
|
||||
border-right: solid 1px var(--posbutton-border-color-active)
|
||||
border-left: solid 1px var(--posbutton-border-color-active)
|
||||
border-bottom: none
|
||||
|
||||
.logOut
|
||||
font-size: 3em
|
||||
|
||||
.bottomCell
|
||||
@include flex
|
||||
flex-basis: 15%
|
||||
width: 100%
|
||||
background: var(--global-bgcolor)
|
||||
|
||||
.topCell, .bottomCell
|
||||
.posButton
|
||||
@include flex-item
|
||||
flex: 1
|
||||
|
||||
.bottomCell
|
||||
.editControls
|
||||
@include flex
|
||||
@include flex-item
|
||||
|
||||
.currentTable
|
||||
@include flex-column
|
||||
@include flex-item
|
||||
|
||||
.middleCell
|
||||
@include flex-column
|
||||
flex: 1
|
||||
width: 100%
|
||||
|
||||
#floorplanCanvas
|
||||
aspect-ratio: 1/1
|
||||
background-repeat: no-repeat
|
||||
|
||||
> *:not(#floorplanCanvas)
|
||||
@include flex-column-item
|
||||
flex: 1
|
||||
|
||||
.floorplanControls, .mergeControls
|
||||
@include flex-column
|
||||
> *
|
||||
@include flex-column-item
|
||||
|
||||
|
||||
#decorator
|
||||
@include flex-column
|
||||
@include absoluteCenter
|
||||
border: solid 3px var(--global-border-color)
|
||||
background-color: var(--global-bgcolor)
|
||||
width: 30vw
|
||||
height: 50vh
|
||||
|
||||
> *
|
||||
@include flex-column-item
|
||||
|
||||
#decoratorHeader
|
||||
@include flex
|
||||
flex-basis: 10%
|
||||
border-bottom: solid 1px var(--global-border-color)
|
||||
|
||||
h2
|
||||
@include flex
|
||||
@include flex-item
|
||||
flex-basis: 90%
|
||||
|
||||
a
|
||||
@include flex
|
||||
@include flex-item
|
||||
flex-basis: 10%
|
||||
|
||||
#decoratorContent
|
||||
@include flex-column
|
||||
justify-content: flex-start
|
||||
flex-basis: 90%
|
||||
overflow-y: auto
|
||||
|
||||
.decoratorRow
|
||||
@include flex
|
||||
justify-content: flex-start
|
||||
flex-basis: 25%
|
||||
width: 100%
|
||||
|
||||
.decoratorItem
|
||||
@include flex-column
|
||||
flex-basis: 25%
|
||||
height: 100%
|
||||
gap: 1em
|
||||
|
||||
> a
|
||||
width: 100%
|
||||
|
||||
> a:first-of-type
|
||||
background-size: contain
|
||||
background-repeat: no-repeat
|
||||
background-position: center
|
||||
flex-basis: 80%
|
||||
|
||||
> a:last-of-type
|
||||
text-align: center
|
||||
flex-basis: 20%
|
||||
font-weight: bold
|
||||
|
||||
.decoratorRow:nth-of-type(odd)
|
||||
.decoratorItem:nth-of-type(odd)
|
||||
background-color: var(--global-secondary-bgcolor)
|
||||
|
||||
.decoratorRow:nth-of-type(even)
|
||||
.decoratorItem:nth-of-type(even)
|
||||
background-color: var(--global-secondary-bgcolor)
|
||||
151
wwwroot/styles/sass/dredgepos.keyboards.sass
Normal file
151
wwwroot/styles/sass/dredgepos.keyboards.sass
Normal file
@@ -0,0 +1,151 @@
|
||||
@import dredgepos.core
|
||||
|
||||
#virtualNumpad, #virtualKeyboard
|
||||
display: none
|
||||
|
||||
.headingRow
|
||||
background-color: var(--global-bgcolor)
|
||||
display: flex
|
||||
flex-basis: 10%
|
||||
border-bottom: solid 1px #fff
|
||||
|
||||
@include mobile
|
||||
font-size: 1.5em
|
||||
|
||||
*
|
||||
height: 100%
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
flex: 1
|
||||
|
||||
.closeKeyboards
|
||||
flex-basis: 20%
|
||||
|
||||
#virtualNumpad
|
||||
@include absoluteCenter
|
||||
flex-direction: column
|
||||
height: 70vh
|
||||
width: 30vw
|
||||
border: solid 2px var(--global-border-color)
|
||||
|
||||
@include mobile
|
||||
height: 100vh
|
||||
width: 100vw
|
||||
|
||||
#virtualNumpadInput
|
||||
background-color: var(--global-secondary-bgcolor)
|
||||
flex-basis: 10%
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
text-align: center
|
||||
font-size: 3em
|
||||
|
||||
|
||||
#virtualNumpadButtons
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-basis: 80%
|
||||
background-color: var(--global-bgcolor)
|
||||
|
||||
.virtualNumpadRow
|
||||
display: flex
|
||||
flex: 1
|
||||
|
||||
> *
|
||||
flex: 1
|
||||
font-size: 1.5em
|
||||
|
||||
#virtualKeyboard
|
||||
@include absoluteCenter
|
||||
flex-direction: column
|
||||
width: 80vw
|
||||
height: 40vh
|
||||
background-color: var(--global-bgcolor)
|
||||
border: solid 2px var(--global-border-color)
|
||||
|
||||
@include mobile
|
||||
width: 100vw
|
||||
height: 10vh
|
||||
top: 0
|
||||
bottom: auto
|
||||
|
||||
|
||||
#virtualKeyboardInput
|
||||
flex-basis: 15%
|
||||
background-color: var(--global-secondary-bgcolor)
|
||||
font-size: 1.5em
|
||||
text-align: center
|
||||
color: var(--global-text-color)
|
||||
|
||||
@include mobile
|
||||
flex-basis: 50%
|
||||
text-align: left
|
||||
|
||||
|
||||
#virtualKeyboardButtons
|
||||
@include flex-column
|
||||
flex-basis: 75%
|
||||
|
||||
@include mobile
|
||||
display: none
|
||||
|
||||
.headingRow
|
||||
@include mobile
|
||||
flex-basis: 50%
|
||||
font-size: 1.2em
|
||||
|
||||
.closeKeyboards
|
||||
flex-basis: 10%
|
||||
|
||||
.virtualKeyboardRow
|
||||
@include flex
|
||||
@include flex-column-item
|
||||
|
||||
> *
|
||||
@include flex
|
||||
@include flex-item
|
||||
font-size: 1.5em
|
||||
|
||||
> [data-value=backspace]
|
||||
flex-basis: 10%
|
||||
|
||||
#alert
|
||||
@include flex-column
|
||||
@include absoluteCenter
|
||||
display: none
|
||||
width: 60vw
|
||||
height: 40vh
|
||||
background-color: var(--global-bgcolor)
|
||||
border: solid 2px var(--global-border-color)
|
||||
|
||||
@include mobile
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
|
||||
> *
|
||||
@include flex
|
||||
@include flex-column-item
|
||||
|
||||
#alertHeading
|
||||
@include flex
|
||||
width: 100%
|
||||
flex-basis: 20%
|
||||
font-size: 2em
|
||||
|
||||
#alertMessage
|
||||
flex-basis: 60%
|
||||
font-size: 1.5em
|
||||
background-color: var(--global-secondary-bgcolor)
|
||||
|
||||
#alertButtons
|
||||
@include flex
|
||||
flex-basis: 20%
|
||||
|
||||
a
|
||||
@include flex-item
|
||||
font-size: 2em
|
||||
Reference in New Issue
Block a user