diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index d0206bda..c9c8bb4d 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -5,56 +5,56 @@
{{ currentDisplay }}
-
- 7
-
-
- 8
-
-
- 9
-
-
- ×
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- −
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- +
-
-
- .
-
-
- 0
-
-
-
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ ×
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ −
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ +
+
+
+ .
+
+
+ 0
+
+
+
-
-
+
+
{{ confirmText }}
-
+
@@ -192,6 +192,11 @@ export default {
this.currentValue = this.currentValue.substr(0, this.currentValue.length - 1);
},
+ clear() {
+ this.currentValue = '';
+ this.previousValue = '';
+ this.currentSymbol = '';
+ },
confirm() {
if (this.currentSymbol && this.currentValue.length >= 1) {
const previousValue = this.$utilities.stringCurrencyToNumeric(this.previousValue);
@@ -268,9 +273,9 @@ export default {
display: flex;
position: relative;
text-align: center;
+ border-radius: 0;
border-right: 1px solid var(--f7-page-bg-color);
border-bottom: 1px solid var(--f7-page-bg-color);
- cursor: pointer;
height: 60px;
flex-direction: column;
justify-content: center;
@@ -279,33 +284,33 @@ export default {
user-select: none;
}
-.numpad-button.active-state {
- background-color: var(--f7-list-button-pressed-bg-color);
-}
-
.numpad-button-num {
width: calc(80% / 3);
}
-.numpad-button-function {
+.numpad-button-function, .numpad-button-confirm {
width: 20%;
}
-.numpad-button-confirm {
- background-color: var(--f7-theme-color);
- color: #ffffff;
-}
-
-.numpad-button-confirm.active-state {
- background-color: var(--f7-theme-color-tint);
+.numpad-button-num.active-state, .numpad-button-function.active-state {
+ background-color: rgba(var(--f7-color-black-rgb), .15);
}
.numpad-button-text {
display: block;
font-size: 28px;
+ font-weight: normal;
line-height: 1;
}
+.numpad-button-text-normal {
+ color: var(--f7-color-black);
+}
+
+.theme-dark .numpad-button-text-normal {
+ color: var(--f7-color-white);
+}
+
.numpad-button-text-confirm {
font-size: 20px;
}