151 lines
3.0 KiB
Sass
151 lines
3.0 KiB
Sass
@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: 70%
|
|
width: 25%
|
|
border: solid 2px var(--global-border-color)
|
|
|
|
@include mobile
|
|
height: 100%
|
|
width: 100%
|
|
|
|
#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: 80%
|
|
height: 40%
|
|
background-color: var(--global-bgcolor)
|
|
border: solid 2px var(--global-border-color)
|
|
|
|
@include mobile
|
|
width: 100%
|
|
height: 10%
|
|
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: 60%
|
|
height: 40%
|
|
background-color: var(--global-bgcolor)
|
|
border: solid 2px var(--global-border-color)
|
|
|
|
@include mobile
|
|
width: 100%
|
|
height: 100%
|
|
|
|
> *
|
|
@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 |