1 files changed, 33 insertions, 21 deletions

diff --git a/src/imports/controls/material/SpinBox.qml b/src/imports/controls/material/SpinBox.qml
index e28815e8..6881fc23 100644
--- a/src/imports/controls/material/SpinBox.qml
+++ b/src/imports/controls/material/SpinBox.qml
@@ -34,10 +34,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.6
-import QtQuick.Templates 2.0 as T
-import QtQuick.Controls.Material 2.0
-import QtQuick.Controls.Material.impl 2.0
+import QtQuick 2.8
+import QtQuick.Templates 2.1 as T
+import QtQuick.Controls.Material 2.1
+import QtQuick.Controls.Material.impl 2.1
 
 T.SpinBox {
     id: control
@@ -68,9 +68,9 @@ T.SpinBox {
         text: control.textFromValue(control.value, control.locale)
 
         font: control.font
-        color: enabled ? control.Material.primaryTextColor : control.Material.hintTextColor
+        color: enabled ? control.Material.foreground : control.Material.hintTextColor
         selectionColor: control.Material.textSelectionColor
-        selectedTextColor: control.Material.primaryTextColor
+        selectedTextColor: control.Material.foreground
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter
         cursorDelegate: Rectangle {
@@ -104,52 +104,64 @@ T.SpinBox {
         inputMethodHints: Qt.ImhFormattedNumbersOnly
     }
 
-    up.indicator: PaddedRectangle {
+    up.indicator: Item {
         x: control.mirrored ? 0 : parent.width - width
         implicitWidth: 48
         implicitHeight: 48
         height: parent.height
         width: height
-        padding: control.spacing
-        radius: 2
-        color: Qt.tint(Qt.tint(control.Material.buttonColor,
-                               control.activeFocus ? control.Material.buttonHoverColor : "transparent"),
-                               control.up.pressed ? control.Material.buttonPressColor: "transparent")
+
+        Ripple {
+            clipRadius: 2
+            x: control.spacing
+            y: control.spacing
+            width: parent.width - 2 * control.spacing
+            height: parent.height - 2 * control.spacing
+            pressed: control.up.pressed
+            active: control.up.pressed || control.up.hovered || control.visualFocus
+            color: control.Material.rippleColor
+        }
 
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: Math.min(parent.width / 3, parent.width / 3)
             height: 2
-            color: enabled ? control.Material.primaryTextColor : control.Material.spinBoxDisabledIconColor
+            color: enabled ? control.Material.foreground : control.Material.spinBoxDisabledIconColor
         }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: 2
             height: Math.min(parent.width / 3, parent.width / 3)
-            color: enabled ? control.Material.primaryTextColor : control.Material.spinBoxDisabledIconColor
+            color: enabled ? control.Material.foreground : control.Material.spinBoxDisabledIconColor
         }
     }
 
-    down.indicator: PaddedRectangle {
+    down.indicator: Item {
         x: control.mirrored ? parent.width - width : 0
         implicitWidth: 48
         implicitHeight: 48
         height: parent.height
         width: height
-        padding: control.spacing
-        radius: 2
-        color: Qt.tint(Qt.tint(control.Material.buttonColor,
-                               control.activeFocus ? control.Material.buttonHoverColor : "transparent"),
-                               control.down.pressed ? control.Material.buttonPressColor : "transparent")
+
+        Ripple {
+            clipRadius: 2
+            x: control.spacing
+            y: control.spacing
+            width: parent.width - 2 * control.spacing
+            height: parent.height - 2 * control.spacing
+            pressed: control.down.pressed
+            active: control.down.pressed || control.down.hovered || control.visualFocus
+            color: control.Material.rippleColor
+        }
 
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: enabled ? control.Material.primaryTextColor : control.Material.spinBoxDisabledIconColor
+            color: enabled ? control.Material.foreground : control.Material.spinBoxDisabledIconColor
         }
     }