Import Qt Quick Extras (the former Qt Quick Enterprise Controls)

Change-Id: I59c5c97c564f707da4ce617e25e13ff8124f7d4b
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

75 files changed, 8487 insertions, 0 deletions

diff --git a/src/extras/Styles/Base/Base.pro b/src/extras/Styles/Base/Base.pro
new file mode 100644
index 00000000..fcb6ad95
--- /dev/null
+++ b/src/extras/Styles/Base/Base.pro
@@ -0,0 +1,34 @@
+TARGET = qtquickextrasstylesplugin
+TARGETPATH = QtQuick/Extras/Styles
+
+QT += qml
+
+HEADERS += \
+    basestyleplugin.h
+SOURCES += \
+    basestyleplugin.cpp
+
+BASE_STYLE = \
+    $$PWD/CircularGaugeStyle.qml \
+    $$PWD/CircularButtonStyle.qml \
+    $$PWD/CircularTickmarkLabelStyle.qml \
+    $$PWD/CommonStyleHelper.qml \
+    $$PWD/DelayButtonStyle.qml \
+    $$PWD/DialStyle.qml \
+    $$PWD/GaugeStyle.qml \
+    $$PWD/HandleStyle.qml \
+    $$PWD/HandleStyleHelper.qml \
+    $$PWD/PieMenuStyle.qml \
+    $$PWD/StatusIndicatorStyle.qml \
+    $$PWD/ToggleButtonStyle.qml \
+    $$PWD/TumblerStyle.qml
+
+BASE_STYLE += \
+    $$PWD/images/knob.png \
+    $$PWD/images/needle.png
+
+RESOURCES += \
+    basestyle.qrc
+
+CONFIG += no_cxx_module
+load(qml_plugin)
diff --git a/src/extras/Styles/Base/CircularButtonStyle.qml b/src/extras/Styles/Base/CircularButtonStyle.qml
new file mode 100644
index 00000000..9e29a534
--- /dev/null
+++ b/src/extras/Styles/Base/CircularButtonStyle.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private 1.0
+
+ButtonStyle {
+    id: buttonStyle
+
+    label: Text {
+        anchors.fill: parent
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        text: control.text
+        font.pixelSize: TextSingleton.font.pixelSize * 1.25
+        color: control.pressed || control.checked ? __buttonHelper.textColorDown : __buttonHelper.textColorUp
+        styleColor: control.pressed || control.checked ? __buttonHelper.textRaisedColorDown : __buttonHelper.textRaisedColorUp
+        style: Text.Raised
+        wrapMode: Text.Wrap
+        fontSizeMode: Text.Fit
+    }
+
+    /*! \internal */
+    property alias __buttonHelper: buttonHelper
+
+    CircularButtonStyleHelper {
+        id: buttonHelper
+        control: buttonStyle.control
+    }
+
+    background: Item {
+        implicitWidth: __buttonHelper.implicitWidth
+        implicitHeight: __buttonHelper.implicitHeight
+
+        Canvas {
+            id: backgroundCanvas
+            anchors.fill: parent
+
+            Connections {
+                target: control
+                onPressedChanged: backgroundCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                __buttonHelper.paintBackground(ctx);
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/CircularGaugeStyle.qml b/src/extras/Styles/Base/CircularGaugeStyle.qml
new file mode 100644
index 00000000..2030f775
--- /dev/null
+++ b/src/extras/Styles/Base/CircularGaugeStyle.qml
@@ -0,0 +1,498 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private 1.0
+
+/*!
+    \qmltype CircularGaugeStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.0
+    \ingroup extrasstyles
+    \brief Provides custom styling for CircularGauge.
+
+    You can create a custom circular gauge by replacing the following delegates:
+    \list
+        \li \l background
+        \li \l tickmark
+        \li \l minorTickmark
+        \li \l tickmarkLabel
+        \li \l needle
+        \li \l foreground
+    \endlist
+
+    Below is an example that changes the needle to a basic orange \l Rectangle:
+    \code
+    CircularGauge {
+        style: CircularGaugeStyle {
+            needle: Rectangle {
+                y: outerRadius * 0.15
+                implicitWidth: outerRadius * 0.03
+                implicitHeight: outerRadius * 0.9
+                antialiasing: true
+                color: Qt.rgba(0.66, 0.3, 0, 1)
+            }
+        }
+    }
+    \endcode
+
+    The result:
+    \image circulargauge-needle-example-2.png CircularGaugeStyle example
+
+    \section2 Direction
+
+    \l minimumValueAngle and \l maximumValueAngle determine not only the
+    position of the tickmarks, labels and needle, but the direction in which
+    they are displayed around the gauge. For example, if \l minimumValueAngle
+    is greater than \l maximumValueAngle, the gauge will be anti-clockwise.
+    Below, there are two gauges: the top gauge has a \l minimumValueAngle of
+    \c -90 degrees and a \l maximumValueAngle of \c 90 degrees, and the bottom
+    gauge has the opposite.
+
+    \image circulargauge-reversed.png Reversed CircularGauge
+
+    \sa {Styling CircularGauge}
+*/
+
+Style {
+    id: circularGaugeStyle
+
+    /*!
+        \since 1.3
+
+        The \l CircularGauge that this style is attached to.
+    */
+    readonly property CircularGauge control: __control
+
+    /*!
+        The distance from the center of the gauge to the outer edge of the
+        gauge.
+
+        This property is useful for determining the size of the various
+        components of the style, in order to ensure that they are scaled
+        proportionately when the gauge is resized.
+    */
+    readonly property real outerRadius: Math.min(control.width, control.height) * 0.5
+
+    /*!
+        This property determines the angle at which the minimum value is
+        displayed on the gauge.
+
+        The angle set affects the following components of the gauge:
+        \list
+            \li The angle of the needle
+            \li The position of the tickmarks and labels
+        \endlist
+
+        The angle origin points north:
+
+        \image circulargauge-angles.png
+
+        There is no minimum or maximum angle for this property, but the default
+        style only supports angles whose absolute range is less than or equal
+        to \c 360 degrees. This is because ranges higher than \c 360 degrees
+        will cause the tickmarks and labels to overlap each other.
+
+        The default value is \c -145.
+    */
+    property real minimumValueAngle: -145
+
+    /*!
+        This property determines the angle at which the maximum value is
+        displayed on the gauge.
+
+        The angle set affects the following components of the gauge:
+        \list
+            \li The angle of the needle
+            \li The position of the tickmarks and labels
+        \endlist
+
+        The angle origin points north:
+
+        \image circulargauge-angles.png
+
+        There is no minimum or maximum angle for this property, but the default
+        style only supports angles whose absolute range is less than or equal
+        to \c 360 degrees. This is because ranges higher than \c 360 degrees
+        will cause the tickmarks and labels to overlap each other.
+
+        The default value is \c 145.
+    */
+    property real maximumValueAngle: 145
+
+    /*!
+        The range between \l minimumValueAngle and \l maximumValueAngle, in
+        degrees. This value will always be positive.
+    */
+    readonly property real angleRange: control.__panel.circularTickmarkLabel.angleRange
+
+    /*!
+        This property holds the rotation of the needle in degrees.
+    */
+    property real needleRotation: {
+        var percentage = (control.value - control.minimumValue) / (control.maximumValue - control.minimumValue);
+        minimumValueAngle + percentage * angleRange;
+    }
+
+    /*!
+        The interval at which tickmarks are displayed.
+
+        For example, if this property is set to \c 10 (the default),
+        control.minimumValue to \c 0, and control.maximumValue to \c 100,
+        the tickmarks displayed will be 0, 10, 20, etc., to 100,
+        around the gauge.
+    */
+    property real tickmarkStepSize: 10
+
+    /*!
+        The distance in pixels from the outside of the gauge (outerRadius) at
+        which the outermost point of the tickmark line is drawn.
+    */
+    property real tickmarkInset: 0
+
+
+    /*!
+        The amount of tickmarks displayed by the gauge, calculated from
+        \l tickmarkStepSize and the control's
+        \l {CircularGauge::minimumValue}{minimumValue} and
+        \l {CircularGauge::maximumValue}{maximumValue}.
+
+        \sa minorTickmarkCount
+    */
+    readonly property int tickmarkCount: control.__panel.circularTickmarkLabel.tickmarkCount
+
+    /*!
+        The amount of minor tickmarks between each tickmark.
+
+        The default value is \c 4.
+
+        \sa tickmarkCount
+    */
+    property int minorTickmarkCount: 4
+
+    /*!
+        The distance in pixels from the outside of the gauge (outerRadius) at
+        which the outermost point of the minor tickmark line is drawn.
+    */
+    property real minorTickmarkInset: 0
+
+    /*!
+        The distance in pixels from the outside of the gauge (outerRadius) at
+        which the center of the value marker text is drawn.
+    */
+    property real labelInset: __protectedScope.toPixels(0.19)
+
+    /*!
+        The interval at which tickmark labels are displayed.
+
+        For example, if this property is set to \c 10 (the default),
+        control.minimumValue to \c 0, and control.maximumValue to \c 100, the
+        tickmark labels displayed will be 0, 10, 20, etc., to 100,
+        around the gauge.
+    */
+    property real labelStepSize: tickmarkStepSize
+
+    /*!
+        The amount of tickmark labels displayed by the gauge, calculated from
+        \l labelStepSize and the control's
+        \l {CircularGauge::minimumValue}{minimumValue} and
+        \l {CircularGauge::maximumValue}{maximumValue}.
+
+        \sa tickmarkCount, minorTickmarkCount
+    */
+    readonly property int labelCount: control.__panel.circularTickmarkLabel.labelCount
+
+    /*!
+        \since QtQuick.Extras 1.2
+
+        Returns \a value as an angle in degrees.
+
+        This function is useful for custom drawing or positioning of items in
+        the style's components. For example, it can be used to calculate the
+        angles at which to draw an arc around the gauge indicating the safe
+        area for the needle to be within.
+
+        For example, if minimumValueAngle is set to \c 270 and
+        maximumValueAngle is set to \c 90, this function will return \c 270
+        when passed minimumValue and \c 90 when passed maximumValue.
+
+        \sa {Styling CircularGauge#styling-circulargauge-background}{
+            Styling CircularGauge's background}
+    */
+    function valueToAngle(value) {
+        return control.__panel.circularTickmarkLabel.valueToAngle(value);
+    }
+
+    property QtObject __protectedScope: QtObject {
+        /*!
+            Converts a value expressed as a percentage of \l outerRadius to
+            a pixel value.
+        */
+        function toPixels(percentageOfOuterRadius) {
+            return percentageOfOuterRadius * outerRadius;
+        }
+    }
+
+    /*!
+        The background of the gauge.
+
+        If set, the background determines the implicit size of the gauge.
+
+        By default, there is no background defined.
+
+        \sa {Styling CircularGauge#styling-circulargauge-background}{
+            Styling CircularGauge's background}
+    */
+    property Component background
+
+    /*!
+        This component defines each individual tickmark. The position of each
+        tickmark is already set; only the
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight} need to be specified.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this tickmark.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this tickmark represents.
+        \endtable
+
+        To illustrate what these properties refer to, we can use the following
+        example:
+
+        \snippet circulargauge-tickmark-indices-values.qml tickmarks
+
+        We've replaced the conventional \e line tickmarks with \l Text items
+        and have hidden the tickmarkLabel component in order to make the
+        association clearer:
+
+        \image circulargauge-tickmark-indices-values.png Tickmarks
+
+        The index property can be useful if you have another model that
+        contains images to display for each index, for example.
+
+        The value property is useful for drawing lower and upper limits around
+        the gauge to indicate the recommended value ranges. For example, speeds
+        above 200 kilometers an hour in a car's speedometer could be indicated
+        as dangerous using this property.
+
+        \sa {Styling CircularGauge#styling-circulargauge-tickmark}{
+            Styling CircularGauge's tickmark}
+    */
+    property Component tickmark: Rectangle {
+        implicitWidth: outerRadius * 0.02
+        antialiasing: true
+        implicitHeight: outerRadius * 0.06
+        color: "#c8c8c8"
+    }
+
+    /*!
+        This component defines each individual minor tickmark. The position of
+        each minor tickmark is already set; only the
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight} need to be specified.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this tickmark.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this tickmark represents.
+        \endtable
+
+        \sa {Styling CircularGauge#styling-circulargauge-minorTickmark}{
+            Styling CircularGauge's minorTickmark}
+    */
+    property Component minorTickmark: Rectangle {
+        implicitWidth: outerRadius * 0.01
+        antialiasing: true
+        implicitHeight: outerRadius * 0.03
+        color: "#c8c8c8"
+    }
+
+    /*!
+        This defines the text of each tickmark label on the gauge.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this label.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this label represents.
+        \endtable
+
+        \sa {Styling CircularGauge#styling-circulargauge-tickmarkLabel}{
+            Styling CircularGauge's tickmarkLabel}
+    */
+    property Component tickmarkLabel: Text {
+        font.pixelSize: Math.max(6, __protectedScope.toPixels(0.12))
+        text: styleData.value
+        color: "#c8c8c8"
+        antialiasing: true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    /*!
+        The needle that points to the gauge's current value.
+
+        This component is drawn below the \l foreground component.
+
+        The style expects the needle to be pointing up at a rotation of \c 0,
+        in order for the rotation to be correct. For example:
+
+        \image circulargauge-needle.png CircularGauge's needle
+
+        When defining your own needle component, the only properties that the
+        style requires you to set are the
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight}.
+
+        Optionally, you can set \l {Item::x}{x} and \l {Item::y}{y} to change
+        the needle's transform origin. Setting the \c x position can be useful
+        for needle images where the needle is not centered exactly
+        horizontally. Setting the \c y position allows you to make the base of
+        the needle hang over the center of the gauge.
+
+        \sa {Styling CircularGauge#styling-circulargauge-needle}{
+            Styling CircularGauge's needle}
+    */
+    property Component needle: Item {
+        implicitWidth: __protectedScope.toPixels(0.08)
+        implicitHeight: 0.9 * outerRadius
+
+        Image {
+            anchors.fill: parent
+            source: "images/needle.png"
+        }
+    }
+
+    /*!
+        The foreground of the gauge. This component is drawn above all others.
+
+        Like \l background, the foreground component fills the entire gauge.
+
+        By default, the knob of the gauge is defined here.
+
+        \sa {Styling CircularGauge#styling-circulargauge-foreground}{
+            Styling CircularGauge's foreground}
+    */
+    property Component foreground: Item {
+        Image {
+            source: "images/knob.png"
+            anchors.centerIn: parent
+            scale: {
+                var idealHeight = __protectedScope.toPixels(0.2);
+                var originalImageHeight = sourceSize.height;
+                idealHeight / originalImageHeight;
+            }
+        }
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        id: panelItem
+        implicitWidth: backgroundLoader.item ? backgroundLoader.implicitWidth : TextSingleton.implicitHeight * 16
+        implicitHeight: backgroundLoader.item ? backgroundLoader.implicitHeight : TextSingleton.implicitHeight * 16
+
+        property alias background: backgroundLoader.item
+        property alias circularTickmarkLabel: circularTickmarkLabel_
+
+        Loader {
+            id: backgroundLoader
+            sourceComponent: circularGaugeStyle.background
+            width: outerRadius * 2
+            height: outerRadius * 2
+            anchors.centerIn: parent
+        }
+
+        CircularTickmarkLabel {
+            id: circularTickmarkLabel_
+            anchors.fill: backgroundLoader
+
+            minimumValue: control.minimumValue
+            maximumValue: control.maximumValue
+            stepSize: control.stepSize
+            tickmarksVisible: control.tickmarksVisible
+            minimumValueAngle: circularGaugeStyle.minimumValueAngle
+            maximumValueAngle: circularGaugeStyle.maximumValueAngle
+            tickmarkStepSize: circularGaugeStyle.tickmarkStepSize
+            tickmarkInset: circularGaugeStyle.tickmarkInset
+            minorTickmarkCount: circularGaugeStyle.minorTickmarkCount
+            minorTickmarkInset: circularGaugeStyle.minorTickmarkInset
+            labelInset: circularGaugeStyle.labelInset
+            labelStepSize: circularGaugeStyle.labelStepSize
+
+            style: CircularTickmarkLabelStyle {
+                tickmark: circularGaugeStyle.tickmark
+                minorTickmark: circularGaugeStyle.minorTickmark
+                tickmarkLabel: circularGaugeStyle.tickmarkLabel
+            }
+        }
+
+        Loader {
+            id: needleLoader
+            sourceComponent: circularGaugeStyle.needle
+            transform: [
+                Rotation {
+                    angle: needleRotation
+                    origin.x: needleLoader.width / 2
+                    origin.y: needleLoader.height
+                },
+                Translate {
+                    x: panelItem.width / 2 - needleLoader.width / 2
+                    y: panelItem.height / 2 - needleLoader.height
+                }
+            ]
+        }
+
+        Loader {
+            id: foreground
+            sourceComponent: circularGaugeStyle.foreground
+            anchors.fill: backgroundLoader
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/CircularTickmarkLabelStyle.qml b/src/extras/Styles/Base/CircularTickmarkLabelStyle.qml
new file mode 100644
index 00000000..010e9245
--- /dev/null
+++ b/src/extras/Styles/Base/CircularTickmarkLabelStyle.qml
@@ -0,0 +1,304 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.0
+
+Style {
+    id: circularTickmarkLabelStyle
+
+    /*!
+        The distance from the center of the control to the outer edge.
+    */
+    readonly property real outerRadius: Math.min(control.width, control.height) * 0.5
+
+    property QtObject __protectedScope: QtObject {
+        /*!
+            Converts a value expressed as a percentage of \l outerRadius to
+            a pixel value.
+        */
+        function toPixels(percentageOfOuterRadius) {
+            return percentageOfOuterRadius * outerRadius;
+        }
+    }
+
+    /*!
+        This component defines each individual tickmark. The position of each
+        tickmark is already set; only the size needs to be specified.
+    */
+    property Component tickmark: Rectangle {
+        width: outerRadius * 0.02
+        antialiasing: true
+        height: outerRadius * 0.06
+        color: "#c8c8c8"
+    }
+
+    /*!
+        This component defines each individual minor tickmark. The position of
+        each minor tickmark is already set; only the size needs to be specified.
+    */
+    property Component minorTickmark: Rectangle {
+        width: outerRadius * 0.01
+        antialiasing: true
+        height: outerRadius * 0.03
+        color: "#c8c8c8"
+    }
+
+    /*!
+        This defines the text of each tickmark label on the gauge.
+    */
+    property Component tickmarkLabel: Text {
+        font.pixelSize: Math.max(6, __protectedScope.toPixels(0.12))
+        text: styleData.value
+        color: "#c8c8c8"
+        antialiasing: true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        id: panelItem
+        implicitWidth: 250
+        implicitHeight: 250
+
+        function rangeUsed(count, stepSize) {
+            return (((count - 1) * stepSize) / (control.maximumValue - control.minimumValue)) * control.angleRange;
+        }
+
+        readonly property real tickmarkSectionSize: rangeUsed(control.tickmarkCount, control.tickmarkStepSize) / (control.tickmarkCount - 1)
+        readonly property real tickmarkSectionValue: (control.maximumValue - control.minimumValue) / (control.tickmarkCount - 1)
+        readonly property real minorTickmarkSectionSize: tickmarkSectionSize / (control.minorTickmarkCount + 1)
+        readonly property real minorTickmarkSectionValue: tickmarkSectionValue / (control.minorTickmarkCount + 1)
+        readonly property int totalMinorTickmarkCount: {
+            // The size of each section within two major tickmarks, expressed as a percentage.
+            var minorSectionPercentage = 1 / (control.minorTickmarkCount + 1);
+            // The amount of major tickmarks not able to be displayed; will be 0 if they all fit.
+            var tickmarksNotDisplayed = control.__tickmarkCount - control.tickmarkCount;
+            var count = control.minorTickmarkCount * (control.tickmarkCount - 1);
+            // We'll try to display as many minor tickmarks as we can to fill up the space.
+            count + tickmarksNotDisplayed / minorSectionPercentage;
+        }
+        readonly property real labelSectionSize: rangeUsed(control.labelCount, control.labelStepSize) / (control.labelCount - 1)
+
+        function toPixels(percentageOfOuterRadius) {
+            return percentageOfOuterRadius * outerRadius;
+        }
+
+        /*!
+            Returns the angle of \a marker (in the range 0 ... n - 1, where n
+            is the amount of markers) on the gauge where sections are of size
+            tickmarkSectionSize.
+        */
+        function tickmarkAngleFromIndex(tickmarkIndex) {
+            return tickmarkIndex * tickmarkSectionSize + control.minimumValueAngle;
+        }
+
+        function labelAngleFromIndex(labelIndex) {
+            return labelIndex * labelSectionSize + control.minimumValueAngle;
+        }
+
+        function labelPosFromIndex(index, labelWidth, labelHeight) {
+            return MathUtils.centerAlongCircle(outerRadius, outerRadius, labelWidth, labelHeight,
+                MathUtils.degToRadOffset(labelAngleFromIndex(index)),
+                outerRadius - control.labelInset)
+        }
+
+        function minorTickmarkAngleFromIndex(minorTickmarkIndex) {
+            var baseAngle = tickmarkAngleFromIndex(Math.floor(minorTickmarkIndex / control.minorTickmarkCount));
+            // + minorTickmarkSectionSize because we don't want the first minor tickmark to start on top of its "parent" tickmark.
+            var relativeMinorAngle = (minorTickmarkIndex % control.minorTickmarkCount * minorTickmarkSectionSize) + minorTickmarkSectionSize;
+            return baseAngle + relativeMinorAngle;
+        }
+
+        function tickmarkValueFromIndex(majorIndex) {
+            return (majorIndex * tickmarkSectionValue) + control.minimumValue;
+        }
+
+        function tickmarkValueFromMinorIndex(minorIndex) {
+            var majorIndex = Math.floor(minorIndex / control.minorTickmarkCount);
+            var relativeMinorIndex = minorIndex % control.minorTickmarkCount;
+            return tickmarkValueFromIndex(majorIndex) + ((relativeMinorIndex * minorTickmarkSectionValue) + minorTickmarkSectionValue);
+        }
+
+        Loader {
+            active: control.tickmarksVisible && tickmark != null
+            width: outerRadius * 2
+            height: outerRadius * 2
+            anchors.centerIn: parent
+
+            sourceComponent: Repeater {
+                id: tickmarkRepeater
+                model: control.tickmarkCount
+                delegate: Loader {
+                    id: tickmarkLoader
+                    objectName: "tickmark" + styleData.index
+                    x: tickmarkRepeater.width / 2
+                    y: tickmarkRepeater.height / 2
+
+                    transform: [
+                        Translate {
+                            y: -outerRadius + control.tickmarkInset
+                        },
+                        Rotation {
+                            angle: panelItem.tickmarkAngleFromIndex(styleData.index) - __tickmarkWidthAsAngle / 2
+                        }
+                    ]
+
+                    sourceComponent: tickmark
+
+                    property int __index: index
+                    property QtObject styleData: QtObject {
+                        readonly property alias index: tickmarkLoader.__index
+                        readonly property real value: tickmarkValueFromIndex(index)
+                    }
+
+                    readonly property real __tickmarkWidthAsAngle: MathUtils.radToDeg((width / (MathUtils.pi2 * outerRadius)) * MathUtils.pi2)
+                }
+            }
+        }
+        Loader {
+            active: control.tickmarksVisible && minorTickmark != null
+            width: outerRadius * 2
+            height: outerRadius * 2
+            anchors.centerIn: parent
+
+            sourceComponent: Repeater {
+                id: minorRepeater
+                anchors.fill: parent
+                model: totalMinorTickmarkCount
+                delegate: Loader {
+                    id: minorTickmarkLoader
+                    objectName: "minorTickmark" + styleData.index
+                    x: minorRepeater.width / 2
+                    y: minorRepeater.height / 2
+                    transform: [
+                        Translate {
+                            y: -outerRadius + control.minorTickmarkInset
+                        },
+                        Rotation {
+                            angle: panelItem.minorTickmarkAngleFromIndex(styleData.index) - __minorTickmarkWidthAsAngle / 2
+                        }
+                    ]
+
+                    sourceComponent: minorTickmark
+
+                    property int __index: index
+                    property QtObject styleData: QtObject {
+                        readonly property alias index: minorTickmarkLoader.__index
+                        readonly property real value: tickmarkValueFromMinorIndex(index)
+                    }
+
+                    readonly property real __minorTickmarkWidthAsAngle: MathUtils.radToDeg((width / (MathUtils.pi2 * outerRadius)) * MathUtils.pi2)
+                }
+            }
+        }
+        Loader {
+            id: labelLoader
+            active: control.tickmarksVisible && tickmarkLabel != null
+            width: outerRadius * 2
+            height: outerRadius * 2
+            anchors.centerIn: parent
+
+            sourceComponent: Item {
+                id: labelItem
+                width: outerRadius * 2
+                height: outerRadius * 2
+                anchors.centerIn: parent
+
+                Connections {
+                    target: control
+                    onMinimumValueChanged: valueTextModel.update()
+                    onMaximumValueChanged: valueTextModel.update()
+                    onTickmarkStepSizeChanged: valueTextModel.update()
+                    onLabelStepSizeChanged: valueTextModel.update()
+                }
+
+                Repeater {
+                    id: labelItemRepeater
+
+                    Component.onCompleted: valueTextModel.update();
+
+                    model: ListModel {
+                        id: valueTextModel
+
+                        function update() {
+                            if (control.labelStepSize === 0) {
+                                return;
+                            }
+
+                            // Make bigger if it's too small and vice versa.
+                            // +1 because we want to show 11 values, with, for example: 0, 10, 20... 100.
+                            var difference = control.labelCount - count;
+                            if (difference > 0) {
+                                for (; difference > 0; --difference) {
+                                    append({ value: 0 });
+                                }
+                            } else if (difference < 0) {
+                                for (; difference < 0; ++difference) {
+                                    remove(count - 1);
+                                }
+                            }
+
+                            var index = 0;
+                            for (var value = control.minimumValue;
+                                 value <= control.maximumValue && index < count;
+                                 value += control.labelStepSize, ++index) {
+                                setProperty(index, "value", value);
+                            }
+                        }
+                    }
+                    delegate: Loader {
+                        id: tickmarkLabelDelegateLoader
+                        sourceComponent: tickmarkLabel
+                        x: pos.x
+                        y: pos.y
+
+                        readonly property point pos: panelItem.labelPosFromIndex(index, width, height);
+
+                        readonly property int __index: index
+                        property QtObject styleData: QtObject {
+                            readonly property var value: index != -1 ? labelItemRepeater.model.get(index).value : 0
+                            readonly property alias index: tickmarkLabelDelegateLoader.__index
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/CommonStyleHelper.qml b/src/extras/Styles/Base/CommonStyleHelper.qml
new file mode 100644
index 00000000..4263a743
--- /dev/null
+++ b/src/extras/Styles/Base/CommonStyleHelper.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+
+QtObject {
+    property Item control
+
+    property color buttonColorUpTop: "#e3e3e3"
+    property color buttonColorUpBottom: "#b3b3b3"
+    property color buttonColorDownTop: "#d3d3d3"
+    property color buttonColorDownBottom: "#939393"
+    property color textColorUp: "#4e4e4e"
+    property color textColorDown: "#303030"
+    property color textRaisedColorUp: "#ffffff"
+    property color textRaisedColorDown: "#e3e3e3"
+    property color offColor: "#ff0000"
+    property color offColorShine: "#ff6666"
+    property color onColor: "#00cc00"
+    property color onColorShine: "#66ff66"
+    property color inactiveColor: "#1f1f1f"
+    property color inactiveColorShine: "#666666"
+}
diff --git a/src/extras/Styles/Base/DelayButtonStyle.qml b/src/extras/Styles/Base/DelayButtonStyle.qml
new file mode 100644
index 00000000..e416550b
--- /dev/null
+++ b/src/extras/Styles/Base/DelayButtonStyle.qml
@@ -0,0 +1,233 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private.CppUtils 1.1
+
+/*!
+    \qmltype DelayButtonStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.0
+    \ingroup extrasstyles
+    \brief Provides custom styling for DelayButton.
+
+    You can create a custom DelayButton by replacing the following delegates:
+    \list
+        \li \l foreground
+        \li \l {QtQuick.Controls.Styles::ButtonStyle::label}{label}
+    \endlist
+*/
+
+CircularButtonStyle {
+    id: delayButtonStyle
+
+    /*!
+        \since 1.3
+
+        The \l DelayButton that this style is attached to.
+    */
+    readonly property DelayButton control: __control
+
+    /*!
+        The gradient of the progress bar around the button.
+    */
+    property Gradient progressBarGradient: Gradient {
+        GradientStop {
+            position: 0
+            color: "#ff6666"
+        }
+        GradientStop {
+            position: 1
+            color: "#ff0000"
+        }
+    }
+
+    /*!
+        The color of the drop shadow under the progress bar.
+    */
+    property color progressBarDropShadowColor: "#ff6666"
+
+    background: Item {
+        implicitWidth: __buttonHelper.implicitWidth
+        implicitHeight: __buttonHelper.implicitHeight
+
+        Canvas {
+            id: backgroundCanvas
+            anchors.fill: parent
+
+            Connections {
+                target: control
+                onPressedChanged: backgroundCanvas.requestPaint()
+                onCheckedChanged: backgroundCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                __buttonHelper.paintBackground(ctx);
+            }
+        }
+    }
+
+    /*!
+        The foreground of the button.
+
+        The progress bar is drawn here.
+    */
+    property Component foreground: Item {
+        id: foregroundItem
+
+        state: "normal"
+        states: [
+            State {
+                name: "normal"
+
+                PropertyChanges {
+                    target: foregroundItem
+                    opacity: 1
+                }
+            },
+            State {
+                name: "activated"
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: "normal"
+                to: "activated"
+                SequentialAnimation {
+                    loops: Animation.Infinite
+
+                    NumberAnimation {
+                        target: foregroundItem
+                        property: "opacity"
+                        from: 0.8
+                        to: 0
+                        duration: 500
+                        easing.type: Easing.InOutSine
+                    }
+                    NumberAnimation {
+                        target: foregroundItem
+                        property: "opacity"
+                        from: 0
+                        to: 0.8
+                        duration: 500
+                        easing.type: Easing.InOutSine
+                    }
+                }
+            }
+        ]
+
+        Connections {
+            target: control
+            onActivated: state = "activated"
+            onCheckedChanged: if (!control.checked) state = "normal"
+        }
+
+        CircularProgressBar {
+            id: progressBar
+            visible: false
+            width: Math.min(parent.width, parent.height) + progressBarDropShadow.radius * 3 * 2
+            height: width
+            anchors.centerIn: parent
+            antialiasing: true
+            barWidth: __buttonHelper.outerArcLineWidth
+            inset: progressBarDropShadow.radius * 3
+            minimumValueAngle: -180
+            maximumValueAngle: 180
+
+            progress: control.progress
+
+            // TODO: Add gradient property if/when we drop support for building with 5.1.
+            function updateGradient() {
+                clearStops();
+                for (var i = 0; i < progressBarGradient.stops.length; ++i) {
+                    addStop(progressBarGradient.stops[i].position, progressBarGradient.stops[i].color);
+                }
+            }
+
+            Component.onCompleted: updateGradient()
+
+            Connections {
+                target: delayButtonStyle
+                onProgressBarGradientChanged: progressBar.updateGradient()
+            }
+        }
+
+        DropShadow {
+            id: progressBarDropShadow
+            anchors.fill: progressBar
+            fast: true
+            // QTBUG-33747
+//            cached: !control.pressed
+            radius: 4
+            samples: radius * 2
+            color: progressBarDropShadowColor
+            source: progressBar
+        }
+    }
+
+    panel: Item {
+        implicitWidth: backgroundLoader.implicitWidth
+        implicitHeight: backgroundLoader.implicitHeight
+
+        Loader {
+            id: backgroundLoader
+            anchors.fill: parent
+            sourceComponent: background
+        }
+
+        Loader {
+            id: foregroundLoader
+            anchors.fill: parent
+            sourceComponent: foreground
+        }
+
+        Loader {
+            id: labelLoader
+            sourceComponent: label
+            anchors.fill: parent
+            anchors.leftMargin: padding.left
+            anchors.topMargin: padding.top
+            anchors.rightMargin: padding.right
+            anchors.bottomMargin: padding.bottom
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/DialStyle.qml b/src/extras/Styles/Base/DialStyle.qml
new file mode 100644
index 00000000..3523f500
--- /dev/null
+++ b/src/extras/Styles/Base/DialStyle.qml
@@ -0,0 +1,392 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.0
+
+/*!
+    \qmltype DialStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.0
+    \ingroup extrasstyles
+    \brief Provides custom styling for Dial.
+
+    You can create a custom dial by replacing the following delegates:
+    \list
+        \li \l background
+    \endlist
+*/
+
+Style {
+    id: dialStyle
+
+    /*!
+        \since 1.3
+
+        The \l Dial that this style is attached to.
+    */
+    readonly property Dial control: __control
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The distance from the center of the dial to the outer edge of the dial.
+
+        This property is useful for determining the size of the various
+        components of the style, in order to ensure that they are scaled
+        proportionately when the dial is resized.
+    */
+    readonly property real outerRadius: Math.min(control.height, control.width) / 2
+
+    /*!
+        \since 1.2
+
+        The distance in pixels from the outside of the dial (outerRadius)
+        to the center of the handle.
+    */
+    property real handleInset: (__tickmarkRadius * 4) + ((__handleRadius * 2) * 0.55)
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The interval at which tickmarks are displayed.
+
+        For example, if this property is set to \c 10,
+        control.minimumValue to \c 0, and control.maximumValue to \c 100,
+        the tickmarks displayed will be 0, 10, 20, etc., to 100, along
+        the circumference of the dial.
+    */
+    property real tickmarkStepSize: 1
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The distance in pixels from the outside of the dial (outerRadius) at
+        which the outermost point of the tickmark line is drawn.
+    */
+    property real tickmarkInset: 0
+
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The amount of tickmarks displayed by the dial, calculated from
+        \l tickmarkStepSize and the control's
+        \l {Dial::minimumValue}{minimumValue} and
+        \l {Dial::maximumValue}{maximumValue}.
+
+        \sa minorTickmarkCount
+    */
+    readonly property int tickmarkCount: control.__panel.circularTickmarkLabel.tickmarkCount
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The amount of minor tickmarks between each tickmark.
+
+        \sa tickmarkCount
+    */
+    property int minorTickmarkCount: 0
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The distance in pixels from the outside of the dial (outerRadius) at
+        which the outermost point of the minor tickmark line is drawn.
+    */
+    property real minorTickmarkInset: 0
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The distance in pixels from the outside of the dial (outerRadius) at
+        which the center of the value marker text is drawn.
+    */
+    property real labelInset: 0
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The interval at which tickmark labels are displayed.
+
+        For example, if this property is set to \c 10 (the default),
+        control.minimumValue to \c 0, and control.maximumValue to \c 100, the
+        tickmark labels displayed will be 0, 10, 20, etc., to 100,
+        along the circumference of the dial.
+    */
+    property real labelStepSize: tickmarkStepSize
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The amount of tickmark labels displayed by the dial, calculated from
+        \l labelStepSize and the control's
+        \l {Dial::minimumValue}{minimumValue} and
+        \l {Dial::maximumValue}{maximumValue}.
+
+        \sa tickmarkCount, minorTickmarkCount
+    */
+    readonly property int labelCount: control.__panel.circularTickmarkLabel.labelCount
+
+    /*!
+        \since QtQuick.Extras 1.2
+
+        Returns \a value as an angle in degrees.
+
+        This function is useful for custom drawing or positioning of items in
+        the style's components. For example, it can be used to calculate the
+        angles at which to draw an arc around the dial indicating the safe
+        range of values.
+
+        For example, if minimumValueAngle is set to \c 270 and
+        maximumValueAngle is set to \c 90, this function will return \c 270
+        when passed minimumValue and \c 90 when passed maximumValue.
+    */
+    function valueToAngle(value) {
+        return control.__panel.circularTickmarkLabel.valueToAngle(value);
+    }
+
+    /*! \internal */
+    readonly property real __tickmarkRadius: outerRadius * 0.06
+
+    /*! \internal */
+    readonly property real __handleRadius: outerRadius * 0.15
+
+    /*!
+        \internal
+
+        This property determines whether it is possible to change the value of
+        the dial simply by pressing/tapping.
+
+        If \c false, the user must drag to rotate the dial and hence change the
+        value.
+
+        This property is useful for touch devices, where it is easy to
+        accidentally tap while flicking, for example.
+    */
+    property bool __dragToSet: Settings.hasTouchScreen && Settings.isMobile
+
+    /*!
+        The background of the dial.
+
+        The implicit size of the dial is taken from this component.
+    */
+    property Component background: Item {
+        id: backgroundItem
+        implicitWidth: backgroundHelper.implicitWidth
+        implicitHeight: backgroundHelper.implicitHeight
+
+        CircularButtonStyleHelper {
+            id: backgroundHelper
+            control: dialStyle.control
+            property color zeroMarkerColor: "#a8a8a8"
+            property color zeroMarkerColorTransparent: "transparent"
+            property real zeroMarkerLength: outerArcLineWidth * 1.25
+            property real zeroMarkerWidth: outerArcLineWidth * 0.3
+
+            smallestAxis: Math.min(backgroundItem.width, backgroundItem.height) - __tickmarkRadius * 4
+        }
+
+        Canvas {
+            id: backgroundCanvas
+            anchors.fill: parent
+
+            readonly property real xCenter: width / 2
+            readonly property real yCenter: height / 2
+
+            onPaint: {
+                var ctx = getContext("2d");
+                backgroundHelper.paintBackground(ctx);
+            }
+        }
+    }
+
+    /*!
+        \since 1.2
+
+        The handle of the dial.
+
+        The handle is automatically positioned within the dial, based on the
+        \l handleInset and the implicit width and height of the handle itself.
+    */
+    property Component handle: Canvas {
+        implicitWidth: __handleRadius * 2
+        implicitHeight: __handleRadius * 2
+
+        HandleStyleHelper {
+            id: handleHelper
+        }
+
+        onPaint: {
+            var ctx = getContext("2d");
+            handleHelper.paintHandle(ctx, 1, 1, width - 2, height - 2);
+        }
+    }
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        This component defines each individual tickmark. The position of each
+        tickmark is already set; only the
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight} need to be specified.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this tickmark.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this tickmark represents.
+        \endtable
+    */
+    property Component tickmark: Rectangle {
+        implicitWidth: outerRadius * 0.015 + (styleData.index === 0 || styleData.index === tickmarkCount ? 1 : (styleData.index) / tickmarkCount) * __tickmarkRadius * 0.75
+        implicitHeight: implicitWidth
+        radius: height / 2
+        color: styleData.index === 0 ? "transparent" : Qt.rgba(0, 0, 0, 0.266)
+        antialiasing: true
+        border.width: styleData.index === 0 ? Math.max(1, outerRadius * 0.0075) : 0
+        border.color: Qt.rgba(0, 0, 0, 0.266)
+    }
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        This component defines each individual minor tickmark. The position of each
+        minor tickmark is already set; only the
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight} need to be specified.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this tickmark.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this tickmark represents.
+        \endtable
+
+        By default, no minor tickmark is defined.
+    */
+    property Component minorTickmark
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        This defines the text of each tickmark label on the dial.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this label.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this label represents.
+        \endtable
+
+        By default, no label is defined.
+    */
+    property Component tickmarkLabel
+
+    /*! \internal */
+    property Component panel: Item {
+        implicitWidth: backgroundLoader.implicitWidth
+        implicitHeight: backgroundLoader.implicitHeight
+
+        property alias background: backgroundLoader.item
+        property alias circularTickmarkLabel: circularTickmarkLabel_
+
+        Loader {
+            id: backgroundLoader
+            sourceComponent: dialStyle.background
+            width: outerRadius * 2
+            height: width
+            anchors.centerIn: parent
+        }
+
+        Loader {
+            id: handleLoader
+            sourceComponent: dialStyle.handle
+            x: backgroundLoader.x + __pos.x - width / 2
+            y: backgroundLoader.y + __pos.y - height / 2
+
+            readonly property point __pos: {
+                var radians = 0;
+                if (control.__wrap) {
+                    radians = (control.value - control.minimumValue) /
+                            (control.maximumValue - control.minimumValue) *
+                            (MathUtils.pi2) + backgroundHelper.zeroAngle;
+                } else {
+                    radians = -(Math.PI * 8 - (control.value - control.minimumValue) * 10 *
+                                Math.PI / (control.maximumValue - control.minimumValue)) / 6;
+                }
+
+                return MathUtils.centerAlongCircle(backgroundLoader.width / 2, backgroundLoader.height / 2,
+                                               0, 0, radians, outerRadius - handleInset)
+            }
+        }
+
+        CircularTickmarkLabel {
+            id: circularTickmarkLabel_
+            anchors.fill: backgroundLoader
+
+            minimumValue: control.minimumValue
+            maximumValue: control.maximumValue
+            stepSize: control.stepSize
+            tickmarksVisible: control.tickmarksVisible
+            minimumValueAngle: -150
+            maximumValueAngle: 150
+            tickmarkStepSize: dialStyle.tickmarkStepSize
+            tickmarkInset: dialStyle.tickmarkInset
+            minorTickmarkCount: dialStyle.minorTickmarkCount
+            minorTickmarkInset: dialStyle.minorTickmarkInset
+            labelInset: dialStyle.labelInset
+            labelStepSize: dialStyle.labelStepSize
+
+            style: CircularTickmarkLabelStyle {
+                tickmark: dialStyle.tickmark
+                minorTickmark: dialStyle.minorTickmark
+                tickmarkLabel: dialStyle.tickmarkLabel
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/GaugeStyle.qml b/src/extras/Styles/Base/GaugeStyle.qml
new file mode 100644
index 00000000..49ea6f29
--- /dev/null
+++ b/src/extras/Styles/Base/GaugeStyle.qml
@@ -0,0 +1,545 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Private 1.0
+
+/*!
+    \qmltype GaugeStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.0
+    \ingroup extrasstyles
+    \brief Provides custom styling for Gauge.
+
+    You can create a custom gauge by replacing the following delegates:
+    \list
+    \li \l background
+    \li valueBar
+    \li tickmarkLabel
+    \endlist
+
+    Below, you'll find an example of how to create a temperature gauge that
+    changes color as its value increases:
+
+    \code
+    import QtQuick 2.2
+    import QtQuick.Controls 1.1
+    import QtQuick.Extras 1.3
+    import QtQuick.Extras.Styles 1.3
+
+    Rectangle {
+        width: 80
+        height: 200
+
+        Timer {
+            running: true
+            repeat: true
+            interval: 2000
+            onTriggered: gauge.value = gauge.value == gauge.maximumValue ? 5 : gauge.maximumValue
+        }
+
+        Gauge {
+            id: gauge
+            anchors.fill: parent
+            anchors.margins: 10
+
+            value: 5
+            Behavior on value {
+                NumberAnimation {
+                    duration: 1000
+                }
+            }
+
+            style: GaugeStyle {
+                valueBar: Rectangle {
+                    implicitWidth: 16
+                    color: Qt.rgba(gauge.value / gauge.maximumValue, 0, 1 - gauge.value / gauge.maximumValue, 1)
+                }
+            }
+        }
+    }
+    \endcode
+
+    \image gauge-temperature.png
+    The gauge displaying values at various points during the animation.
+
+    \sa {Styling Gauge}
+*/
+
+Style {
+    id: gaugeStyle
+
+    /*!
+        \since 1.3
+
+        The \l Gauge that this style is attached to.
+    */
+    readonly property Gauge control: __control
+
+    /*!
+        \since QtQuick.Extras.Styles 1.3
+
+        This property holds the value displayed by the gauge as a position in
+        pixels.
+
+        It is useful for custom styling.
+    */
+    readonly property real valuePosition: control.__panel.valuePosition
+
+    /*!
+        The background of the gauge, displayed behind the \l valueBar.
+
+        By default, no background is defined.
+    */
+    property Component background
+
+    /*!
+        Each tickmark displayed by the gauge.
+
+        To set the size of the tickmarks, specify an
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight}.
+
+        The widest tickmark will determine the space set aside for all
+        tickmarks. For this reason, the \c implicitWidth of each tickmark
+        should be greater than or equal to that of each minor tickmark. If you
+        need minor tickmarks to have greater widths than the major tickmarks,
+        set the larger width in a child item of the \l minorTickmark component.
+
+        For layouting reasons, each tickmark should have the same
+        \c implicitHeight. If different heights are needed for individual
+        tickmarks, specify those heights in a child item of the component.
+
+        In the example below, we decrease the height of the tickmarks:
+
+        \code
+        tickmark: Item {
+            implicitWidth: 18
+            implicitHeight: 1
+
+            Rectangle {
+                color: "#c8c8c8"
+                anchors.fill: parent
+                anchors.leftMargin: 3
+                anchors.rightMargin: 3
+            }
+        }
+        \endcode
+
+        \image gauge-tickmark-example.png Gauge tickmark example
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this tickmark.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this tickmark represents.
+            \row \li \c {readonly property real} \b styleData.valuePosition
+                \li The value that this tickmark represents as a position in
+                    pixels, with 0 being at the bottom of the gauge.
+        \endtable
+
+        \sa minorTickmark
+    */
+    property Component tickmark: Item {
+        implicitWidth: Math.round(TextSingleton.height * 1.1)
+        implicitHeight: Math.max(2, Math.round(TextSingleton.height * 0.1))
+
+        Rectangle {
+            color: "#c8c8c8"
+            anchors.fill: parent
+            anchors.leftMargin: Math.round(TextSingleton.implicitHeight * 0.2)
+            anchors.rightMargin: Math.round(TextSingleton.implicitHeight * 0.2)
+        }
+    }
+
+    /*!
+        Each minor tickmark displayed by the gauge.
+
+        To set the size of the minor tickmarks, specify an
+        \l {Item::implicitWidth}{implicitWidth} and
+        \l {Item::implicitHeight}{implicitHeight}.
+
+        For layouting reasons, each minor tickmark should have the same
+        \c implicitHeight. If different heights are needed for individual
+        tickmarks, specify those heights in a child item of the component.
+
+        In the example below, we decrease the width of the minor tickmarks:
+
+        \code
+        minorTickmark: Item {
+            implicitWidth: 8
+            implicitHeight: 1
+
+            Rectangle {
+                color: "#cccccc"
+                anchors.fill: parent
+                anchors.leftMargin: 2
+                anchors.rightMargin: 4
+            }
+        }
+        \endcode
+
+        \image gauge-minorTickmark-example.png Gauge minorTickmark example
+
+        Each instance of this component has access to the following property:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this minor tickmark.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this minor tickmark represents.
+            \row \li \c {readonly property real} \b styleData.valuePosition
+                \li The value that this minor tickmark represents as a
+                    position in pixels, with 0 being at the bottom of the
+                    gauge.
+        \endtable
+
+        \sa tickmark
+    */
+    property Component minorTickmark: Item {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 0.65)
+        implicitHeight: Math.max(1, Math.round(TextSingleton.implicitHeight * 0.05))
+
+        Rectangle {
+            color: "#c8c8c8"
+            anchors.fill: parent
+            anchors.leftMargin: control.__tickmarkAlignment === Qt.AlignBottom || control.__tickmarkAlignment === Qt.AlignRight
+                ? Math.max(3, Math.round(TextSingleton.implicitHeight * 0.2))
+                : 0
+            anchors.rightMargin: control.__tickmarkAlignment === Qt.AlignBottom || control.__tickmarkAlignment === Qt.AlignRight
+                ? 0
+                : Math.max(3, Math.round(TextSingleton.implicitHeight * 0.2))
+        }
+    }
+
+    /*!
+        This defines the text of each tickmark label on the gauge.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this label.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value that this label represents.
+        \endtable
+    */
+    property Component tickmarkLabel: Text {
+        text: control.formatValue(styleData.value)
+        font: control.font
+        color: "#c8c8c8"
+        antialiasing: true
+    }
+
+    /*!
+        The bar that represents the value of the gauge.
+
+        To height of the value bar is automatically resized according to
+        \l {Gauge::value}{value}, and does not need to be specified.
+
+        When a custom valueBar is defined, its
+        \l {Item::implicitWidth}{implicitWidth} property must be set.
+    */
+    property Component valueBar: Rectangle {
+        color: "#00bbff"
+        implicitWidth: TextSingleton.implicitHeight
+    }
+
+    /*!
+        The bar that represents the foreground of the gauge.
+
+        This component is drawn above every other component.
+    */
+    property Component foreground: Canvas {
+        readonly property real xCenter: width / 2
+        readonly property real yCenter: height / 2
+        property real shineLength: height * 0.95
+
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            ctx.beginPath();
+            ctx.rect(0, 0, width, height);
+
+            var gradient = ctx.createLinearGradient(0, yCenter, width, yCenter);
+
+            gradient.addColorStop(0, Qt.rgba(1, 1, 1, 0.08));
+            gradient.addColorStop(1, Qt.rgba(1, 1, 1, 0.20));
+            ctx.fillStyle = gradient;
+            ctx.fill();
+        }
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        id: panelComponent
+        implicitWidth: control.orientation === Qt.Vertical ? tickmarkLabelBoundsWidth + rawBarWidth : TextSingleton.height * 14
+        implicitHeight: control.orientation === Qt.Vertical ? TextSingleton.height * 14 : tickmarkLabelBoundsWidth + rawBarWidth
+
+        readonly property int tickmarkCount: (control.maximumValue - control.minimumValue) / control.tickmarkStepSize + 1
+        readonly property real tickmarkSpacing: (tickmarkLabelBounds.height - tickmarkWidth * tickmarkCount) / (tickmarkCount - 1)
+
+        property real tickmarkLength: tickmarkColumn.width
+        // Can't deduce this from the column, so we set it from within the first tickmark delegate loader.
+        property real tickmarkWidth: 2
+
+        readonly property real tickmarkOffset: control.orientation === Qt.Vertical ? control.__hiddenText.height / 2 : control.__hiddenText.width / 2
+
+        readonly property real minorTickmarkStep: control.tickmarkStepSize / (control.minorTickmarkCount + 1);
+
+        /*!
+            Returns the marker text that should be displayed based on
+            \a markerPos (\c 0 to \c 1.0).
+        */
+        function markerTextFromPos(markerPos) {
+            return markerPos * (control.maximumValue - control.minimumValue) + control.minimumValue;
+        }
+
+        readonly property real rawBarWidth: valueBarLoader.item.implicitWidth
+        readonly property real barLength: (control.orientation === Qt.Vertical ? control.height : control.width) - (tickmarkOffset * 2 - 2)
+
+        readonly property real tickmarkLabelBoundsWidth: tickmarkLength + (control.orientation === Qt.Vertical ? control.__hiddenText.width : control.__hiddenText.height)
+        readonly property int valuePosition: valueBarLoader.height
+
+        Item {
+            id: container
+
+            width: control.orientation === Qt.Vertical ? parent.width : parent.height
+            height: control.orientation === Qt.Vertical ? parent.height : parent.width
+            rotation: control.orientation === Qt.Horizontal ? 90 : 0
+            transformOrigin: Item.Center
+            anchors.centerIn: parent
+
+            Item {
+                id: valueBarItem
+
+                x: control.__tickmarkAlignment === Qt.AlignLeft || control.__tickmarkAlignment === Qt.AlignTop ? tickmarkLabelBounds.x + tickmarkLabelBounds.width : 0
+                width: rawBarWidth
+                height: barLength
+                anchors.verticalCenter: parent.verticalCenter
+
+                Loader {
+                    id: backgroundLoader
+                    sourceComponent: background
+                    anchors.fill: parent
+                }
+
+                Loader {
+                    id: valueBarLoader
+                    sourceComponent: valueBar
+
+                    readonly property real valueAsPercentage: (control.value - control.minimumValue) / (control.maximumValue - control.minimumValue)
+
+                    y: Math.round(parent.height - height)
+                    height: Math.round(valueAsPercentage * parent.height)
+                }
+            }
+            Item {
+                id: tickmarkLabelBounds
+
+                x: control.__tickmarkAlignment === Qt.AlignLeft || control.__tickmarkAlignment === Qt.AlignTop ? 0 : valueBarItem.width
+                width: tickmarkLabelBoundsWidth
+                height: barLength
+                anchors.verticalCenter: parent.verticalCenter
+                // We want our items to be laid out from bottom to top, but Column can't do that, so we flip
+                // the whole item containing the tickmarks and labels vertically. Then, we flip each tickmark
+                // and label back again.
+                transform: Rotation {
+                    axis.x: 1
+                    axis.y: 0
+                    axis.z: 0
+                    origin.x: tickmarkLabelBounds.width / 2
+                    origin.y: tickmarkLabelBounds.height / 2
+                    angle: 180
+                }
+
+                Column {
+                    id: tickmarkColumn
+                    x: control.__tickmarkAlignment === Qt.AlignRight || control.__tickmarkAlignment === Qt.AlignBottom ? 0 : tickmarkLabelBounds.width - width
+                    spacing: tickmarkSpacing
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    Repeater {
+                        id: tickmarkRepeater
+                        model: tickmarkCount
+                        delegate: Loader {
+                            id: tickmarkDelegateLoader
+
+                            sourceComponent: gaugeStyle.tickmark
+                            transform: Rotation {
+                                axis.x: 1
+                                axis.y: 0
+                                axis.z: 0
+                                origin.x: tickmarkDelegateLoader.width / 2
+                                origin.y: tickmarkDelegateLoader.height / 2
+                                angle: 180
+                            }
+
+                            onHeightChanged: {
+                                if (index == 0)
+                                    tickmarkWidth = height;
+                            }
+
+                            readonly property int __index: index
+                            property QtObject styleData: QtObject {
+                                readonly property alias index: tickmarkDelegateLoader.__index
+                                readonly property real value: (index / (tickmarkCount - 1)) * (control.maximumValue - control.minimumValue) + control.minimumValue
+                                readonly property int valuePosition: Math.round(tickmarkDelegateLoader.y)
+                            }
+                        }
+                    }
+                }
+
+                // Doesn't need to be in a column, since we assume that the major tickmarks will always be longer than us.
+                Repeater {
+                    id: minorTickmarkRepeater
+                    model: (tickmarkCount - 1) * control.minorTickmarkCount
+                    delegate: Loader {
+                        id: minorTickmarkDelegateLoader
+
+                        x: control.__tickmarkAlignment === Qt.AlignRight || control.__tickmarkAlignment === Qt.AlignBottom ? 0 : tickmarkLabelBounds.width - width
+                        y: {
+                            var tickmarkWidthOffset = Math.floor(index / control.minorTickmarkCount) * tickmarkWidth + tickmarkWidth;
+                            var relativePosition = (index % control.minorTickmarkCount + 1) * (tickmarkSpacing / (control.minorTickmarkCount + 1));
+                            var clusterOffset = Math.floor(index / control.minorTickmarkCount) * tickmarkSpacing;
+                            // We assume that each minorTickmark's height is the same.
+                            return clusterOffset + tickmarkWidthOffset + relativePosition - height / 2;
+                        }
+
+                        transform: Rotation {
+                            axis.x: 1
+                            axis.y: 0
+                            axis.z: 0
+                            origin.x: minorTickmarkDelegateLoader.width / 2
+                            origin.y: minorTickmarkDelegateLoader.height / 2
+                            angle: 180
+                        }
+
+                        sourceComponent: gaugeStyle.minorTickmark
+
+                        readonly property int __index: index
+                        property QtObject styleData: QtObject {
+                            readonly property alias index: minorTickmarkDelegateLoader.__index
+                            readonly property real value: {
+                                var tickmarkIndex = Math.floor(index / control.minorTickmarkCount);
+                                return index * minorTickmarkStep + minorTickmarkStep * tickmarkIndex + minorTickmarkStep + control.minimumValue;
+                            }
+                            readonly property int valuePosition: Math.round(minorTickmarkDelegateLoader.y)
+                        }
+                    }
+                }
+
+                Item {
+                    id: tickmarkLabelItem
+                    x: control.__tickmarkAlignment === Qt.AlignRight || control.__tickmarkAlignment === Qt.AlignBottom
+                       ? tickmarkLength
+                       : tickmarkLabelBounds.width - tickmarkLength - width
+                    width: control.__hiddenText.width
+                    // Use the bar height instead of the container's, as the labels seem to be translated by 1 when we
+                    // flip the control vertically, and this fixes that.
+                    height: parent.height
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    Repeater {
+                        id: tickmarkTextRepeater
+                        model: tickmarkCount
+                        delegate: Item {
+                            x: {
+                                if (control.orientation === Qt.Vertical)
+                                    return 0;
+
+                                // Align the text to the edge of the tickmarks.
+                                return ((width - height) / 2) * (control.__tickmarkAlignment === Qt.AlignBottom ? -1 : 1);
+                            }
+                            y: index * labelDistance - height / 2
+
+                            width: control.__hiddenText.width
+                            height: control.__hiddenText.height
+
+                            transformOrigin: Item.Center
+                            rotation: control.orientation === Qt.Vertical ? 0 : 90
+
+                            readonly property real labelDistance: tickmarkLabelBounds.height / (tickmarkCount - 1)
+
+                            Loader {
+                                id: tickmarkTextRepeaterDelegate
+
+                                x: {
+                                    if (control.orientation === Qt.Horizontal) {
+                                        return parent.width / 2 - width / 2;
+                                    }
+
+                                    return control.__tickmarkAlignment === Qt.AlignRight || control.__tickmarkAlignment === Qt.AlignBottom
+                                        ? 0
+                                        : parent.width - width;
+                                }
+
+                                transform: Rotation {
+                                    axis.x: 1
+                                    axis.y: 0
+                                    axis.z: 0
+                                    origin.x: tickmarkTextRepeaterDelegate.width / 2
+                                    origin.y: tickmarkTextRepeaterDelegate.height / 2
+                                    angle: 180
+                                }
+
+                                sourceComponent: tickmarkLabel
+
+                                readonly property int __index: index
+                                property QtObject styleData: QtObject {
+                                    readonly property alias index: tickmarkTextRepeaterDelegate.__index
+                                    readonly property real value: markerTextFromPos(index / (tickmarkTextRepeater.count - 1))
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            Loader {
+                id: foregroundLoader
+                sourceComponent: foreground
+                anchors.fill: valueBarItem
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/HandleStyle.qml b/src/extras/Styles/Base/HandleStyle.qml
new file mode 100644
index 00000000..38588417
--- /dev/null
+++ b/src/extras/Styles/Base/HandleStyle.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+
+Style {
+    id: handleStyle
+    property alias handleColorTop: __helper.handleColorTop
+    property alias handleColorBottom: __helper.handleColorBottom
+    property alias handleColorBottomStop: __helper.handleColorBottomStop
+
+    HandleStyleHelper {
+        id: __helper
+    }
+
+    property Component handle: Item {
+        implicitWidth: 50
+        implicitHeight: 50
+
+        Canvas {
+            id: handleCanvas
+            anchors.fill: parent
+
+            onPaint: {
+                var ctx = getContext("2d");
+                __helper.paintHandle(ctx);
+            }
+        }
+    }
+
+    property Component panel: Item {
+        Loader {
+            id: handleLoader
+            sourceComponent: handle
+            anchors.fill: parent
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/HandleStyleHelper.qml b/src/extras/Styles/Base/HandleStyleHelper.qml
new file mode 100644
index 00000000..61ad3bb3
--- /dev/null
+++ b/src/extras/Styles/Base/HandleStyleHelper.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+
+QtObject {
+    id: handleStyleHelper
+
+    property color handleColorTop: "#969696"
+    property color handleColorBottom: Qt.rgba(0.9, 0.9, 0.9, 0.298)
+    property real handleColorBottomStop: 0.7
+
+    property color handleRingColorTop: "#b0b0b0"
+    property color handleRingColorBottom: "transparent"
+
+    /*!
+        If \a ctx is the only argument, this is equivalent to calling
+        paintHandle(\c ctx, \c 0, \c 0, \c ctx.canvas.width, \c ctx.canvas.height).
+    */
+    function paintHandle(ctx, handleX, handleY, handleWidth, handleHeight) {
+        ctx.reset();
+
+        if (handleWidth < 0)
+            return;
+
+        if (arguments.length == 1) {
+            handleX = 0;
+            handleY = 0;
+            handleWidth = ctx.canvas.width;
+            handleHeight = ctx.canvas.height;
+        }
+
+        ctx.beginPath();
+        var gradient = ctx.createRadialGradient(handleX, handleY, handleWidth / 2,
+            handleX, handleY, handleWidth);
+        gradient.addColorStop(0, handleColorTop);
+        gradient.addColorStop(handleColorBottomStop, handleColorBottom);
+        ctx.ellipse(handleX, handleY, handleWidth, handleHeight);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+
+        /* Draw the ring gradient around the handle. */
+        // Clip first, so we only draw inside the ring.
+        ctx.beginPath();
+        ctx.ellipse(handleX, handleY, handleWidth, handleHeight);
+        ctx.ellipse(handleX + 2, handleY + 2, handleWidth - 4, handleHeight - 4);
+        ctx.clip();
+
+        ctx.beginPath();
+        gradient = ctx.createLinearGradient(handleX + handleWidth / 2, handleY,
+            handleX + handleWidth / 2, handleY + handleHeight);
+        gradient.addColorStop(0, handleRingColorTop);
+        gradient.addColorStop(1, handleRingColorBottom);
+        ctx.ellipse(handleX, handleY, handleWidth, handleHeight);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+    }
+}
diff --git a/src/extras/Styles/Base/PieMenuStyle.qml b/src/extras/Styles/Base/PieMenuStyle.qml
new file mode 100644
index 00000000..c7cd1dda
--- /dev/null
+++ b/src/extras/Styles/Base/PieMenuStyle.qml
@@ -0,0 +1,393 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.0
+
+/*!
+    \qmltype PieMenuStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.0
+    \ingroup extrasstyles
+    \brief Provides custom styling for PieMenu.
+
+    PieMenuStyle is a style for PieMenu that draws each section of the menu as a
+    filled "slice".
+
+    You can create a custom pie menu by replacing the following delegates:
+    \list
+        \li \l background
+        \li \l cancel
+        \li \l menuItem
+        \li \l title
+    \endlist
+
+    To customize the appearance of each menuItem without having to define your
+    own, you can use the \l backgroundColor and \l selectionColor properties.
+    To customize the drop shadow, use the \l shadowColor, \l shadowRadius and
+    \l shadowSpread properties.
+
+    Icons that are too large for the section that they are in will be scaled
+    down appropriately.
+
+    To style individual sections of the menu, use the menuItem component:
+    \code
+    PieMenuStyle {
+        shadowRadius: 0
+
+        menuItem: Item {
+            id: item
+            rotation: -90 + sectionCenterAngle(styleData.index)
+
+            Rectangle {
+                width: parent.height * 0.2
+                height: width
+                color: "darkorange"
+                radius: width / 2
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+
+                Text {
+                    id: textItem
+                    text: control.menuItems[styleData.index].text
+                    anchors.centerIn: parent
+                    color: control.currentIndex === styleData.index ? "red" : "white"
+                    rotation: -item.rotation
+                }
+            }
+        }
+    }
+    \endcode
+
+    \image piemenu-menuitem-example.png A custom PieMenu
+*/
+
+Style {
+    id: pieMenuStyle
+
+    /*!
+        \since 1.3
+
+        The \l PieMenu that this style is attached to.
+    */
+    readonly property PieMenu control: __control
+
+    /*! The background color. */
+    property color backgroundColor: Qt.rgba(0.6, 0.6, 0.6, 0.66)
+
+    /*! The selection color. */
+    property color selectionColor: "#eee"
+
+    /*! The shadow color. */
+    property color shadowColor: Qt.rgba(0, 0, 0, 0.26)
+
+    /*! The shadow radius. */
+    property real shadowRadius: 50
+
+    /*! The shadow spread. */
+    property real shadowSpread: 0.3
+
+    /*!
+        The distance from the center of the menu to the outer edge of the menu.
+
+        \sa cancelRadius
+    */
+    readonly property real radius: Math.min(control.width, control.height) * 0.5
+
+    /*!
+        The radius of the area that is used to cancel the menu.
+
+        \sa radius
+    */
+    property real cancelRadius: radius * 0.4
+
+    /*!
+        The angle (in degrees) at which the first menu item will be drawn.
+
+        The absolute range formed by \a startAngle and \l endAngle must be
+        less than or equal to \c 360 degrees.
+
+        Menu items are displayed clockwise when \a startAngle is less than
+        \l endAngle, otherwise they are displayed anti-clockwise.
+
+        \sa endAngle
+    */
+    property real startAngle: -90
+
+    /*!
+        The angle (in degrees) at which the last menu item will be drawn.
+
+        The absolute range formed by \l startAngle and \a endAngle must be
+        less than or equal to \c 360 degrees.
+
+        Menu items are displayed clockwise when \l startAngle is less than
+        \a endAngle, otherwise they are displayed anti-clockwise.
+
+        \sa startAngle
+    */
+    property real endAngle: 90
+
+    /*!
+        Returns the start of the section at \a itemIndex as an angle in degrees.
+    */
+    function sectionStartAngle(itemIndex) {
+        return MathUtils.radToDegOffset(control.__protectedScope.sectionStartAngle(itemIndex));
+    }
+
+    /*!
+        Returns the center of the section at \a itemIndex as an angle in
+        degrees.
+    */
+    function sectionCenterAngle(itemIndex) {
+        return MathUtils.radToDegOffset(control.__protectedScope.sectionCenterAngle(itemIndex));
+    }
+
+    /*!
+        Returns the end of the section at \a itemIndex as an angle in degrees.
+    */
+    function sectionEndAngle(itemIndex) {
+        return MathUtils.radToDegOffset(control.__protectedScope.sectionEndAngle(itemIndex));
+    }
+
+    /*!
+        \internal
+
+        The distance in pixels from the center of each menu item's icon to the
+        center of the menu. A higher value means that the icons will be further
+        from the center of the menu.
+    */
+    readonly property real __iconOffset: cancelRadius + ((radius - cancelRadius) / 2)
+
+    /*! \internal */
+    readonly property real __selectableRadius: radius - cancelRadius
+
+    /*! \internal */
+    property int __implicitWidth: Math.round(TextSingleton.implicitHeight * 12.5)
+
+    /*! \internal */
+    property int __implicitHeight: __implicitWidth
+
+    /*!
+        The background of the menu.
+
+        By default, there is no background defined.
+    */
+    property Component background
+
+    /*!
+        The cancel component of the menu.
+
+        This is an area in the center of the menu that closes the menu when
+        clicked.
+
+        By default, it is not visible.
+    */
+    property Component cancel: null
+
+    /*!
+        \since QtQuick.Extras 1.1
+
+        The component that displays the text of the currently selected menu
+        item, or the title if there is no current item.
+
+        The current item's text is available via the \c styleData.text
+        property.
+    */
+    property Component title: Text {
+        font.pointSize: 20
+        text: styleData.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        color: "#ccc"
+        antialiasing: true
+    }
+
+    /*!
+        This component defines each section of the pie menu.
+
+        This component covers the width and height of the control.
+
+        No mouse events are propagated to this component, which means that
+        controls like Button will not function when used within it. You can
+        check if the mouse is over this section by comparing
+        \c control.currentIndex to \c styleData.index.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this menu item.
+            \row \li \c {readonly property bool} \b styleData.hovered
+                \li \c true if this menu item is under the mouse.
+            \row \li \c {readonly property bool} \b styleData.pressed
+                \li \c true if the mouse is pressed down on this menu item.
+                    (since QtQuick.Extras 1.3)
+        \endtable
+    */
+    property Component menuItem: Item {
+        id: actionRootDelegateItem
+
+        function drawRingSection(ctx, x, y, section, r, ringWidth, ringColor) {
+            ctx.fillStyle = ringColor;
+
+            // Draw one section.
+            ctx.beginPath();
+            ctx.moveTo(x,y);
+
+            // Canvas draws 0 degrees at 3 o'clock, whereas we want it to draw it at 12.
+            var start = control.__protectedScope.sectionStartAngle(section);
+            var end = control.__protectedScope.sectionEndAngle(section);
+            ctx.arc(x, y, r, start, end, start > end);
+            ctx.fill();
+
+            // Either change this to the background color, or use the global composition.
+            ctx.fillStyle = "black";
+            ctx.globalCompositeOperation = "destination-out";
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.arc(x, y, ringWidth, 0, Math.PI * 2);
+            ctx.closePath();
+            ctx.fill();
+
+            // If using the global composition method, make sure to change it back to default.
+            ctx.globalCompositeOperation = "source-over";
+        }
+
+        Canvas {
+            id: actionCanvas
+            anchors.fill: parent
+            property color currentColor: control.currentIndex === styleData.index ? selectionColor : backgroundColor
+
+            Connections {
+                target: pieMenuStyle
+                onStartAngleChanged: actionCanvas.requestPaint()
+                onEndAngleChanged: actionCanvas.requestPaint()
+            }
+
+            Connections {
+                target: control
+                onCurrentIndexChanged: actionCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+                drawRingSection(ctx, width / 2, height / 2, styleData.index, radius, cancelRadius, currentColor);
+            }
+        }
+
+        readonly property var __styleData: styleData
+
+        PieMenuIcon {
+            control: pieMenuStyle.control
+            styleData: __styleData
+        }
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        implicitWidth: __implicitWidth
+        implicitHeight: __implicitHeight
+
+        property alias titleItem: titleLoader.item
+
+        Item {
+            id: itemgroup
+            anchors.fill: parent
+            visible: false
+
+            Loader {
+                id: backgroundLoader
+                sourceComponent: background
+                anchors.fill: parent
+            }
+
+            Loader {
+                id: cancelLoader
+                sourceComponent: cancel
+                anchors.centerIn: parent
+            }
+
+            Repeater {
+                id: menuItemRepeater
+                model: control.__protectedScope.visibleItems
+
+                delegate: Loader {
+                    id: menuItemLoader
+                    anchors.fill: parent
+                    sourceComponent: menuItem
+
+                    readonly property int __index: index
+                    property QtObject styleData: QtObject {
+                        readonly property alias index: menuItemLoader.__index
+                        readonly property bool hovered: control.currentIndex === index
+                        readonly property bool pressed: control.__protectedScope.pressedIndex === index
+                    }
+                }
+            }
+        }
+        DropShadow {
+            id: dropShadow
+            anchors.fill: itemgroup
+            fast: true
+            radius: shadowRadius
+            spread: shadowSpread
+            transparentBorder: true
+            samples: 12
+            color: shadowColor
+            source: itemgroup
+        }
+
+        Loader {
+            id: titleLoader
+            sourceComponent: title
+            x: parent.x + parent.width / 2 - width / 2
+            y: -height - 10
+
+            property QtObject styleData: QtObject {
+                property string text: control.currentIndex !== -1
+                    ? control.__protectedScope.visibleItems[control.currentIndex].text
+                    : control.title
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/StatusIndicatorStyle.qml b/src/extras/Styles/Base/StatusIndicatorStyle.qml
new file mode 100644
index 00000000..ddfd1b45
--- /dev/null
+++ b/src/extras/Styles/Base/StatusIndicatorStyle.qml
@@ -0,0 +1,237 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+
+/*!
+    \qmltype StatusIndicatorStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.1
+    \ingroup extrasstyles
+    \brief Provides custom styling for StatusIndicatorStyle.
+
+    You can create a custom status indicator by defining the \l indicator
+    component.
+*/
+
+Style {
+    id: pieMenuStyle
+
+    /*!
+        \since 1.3
+
+        The \l StatusIndicator that this style is attached to.
+    */
+    readonly property StatusIndicator control: __control
+
+    /*!
+        \since 1.3
+
+        The color that instances of
+        \l {QtQuick.Extras::}{StatusIndicator} will have.
+        The \l {QtQuick.Extras::StatusIndicator::}{color}
+        property in \l {QtQuick.Extras::}{StatusIndicator}
+        will override this property when set.
+    */
+    property color color: "red"
+
+    /*!
+        This defines the indicator in both its on and off status.
+    */
+    property Component indicator: Item {
+        readonly property real shineStep: 0.05
+        readonly property real smallestAxis: Math.min(control.width, control.height)
+        readonly property real shadowRadius: smallestAxis * 0.4
+        readonly property real outerRecessPercentage: 0.11
+        readonly property color offColor: Qt.rgba(0.13, 0.13, 0.13)
+        readonly property color baseColor: control.active ? control.color : offColor
+
+        implicitWidth: TextSingleton.implicitHeight * 2
+        implicitHeight: implicitWidth
+
+        Canvas {
+            id: backgroundCanvas
+            width: Math.min(parent.width, parent.height)
+            // height: width --- QTBUG-42878
+            height: Math.min(parent.width, parent.height)
+            anchors.centerIn: parent
+
+            Connections {
+                target: control
+                onActiveChanged: backgroundCanvas.requestPaint()
+                onColorChanged: backgroundCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                // Draw the semi-transparent background.
+                ctx.beginPath();
+                var gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height * 0.75);
+                gradient.addColorStop(0.0, Qt.rgba(0, 0, 0, control.active ? 0.1 : 0.25));
+                gradient.addColorStop(1.0, control.active ? Qt.rgba(0, 0, 0, 0.1) : Qt.rgba(0.74, 0.74, 0.74, 0.25));
+
+                ctx.fillStyle = gradient;
+                ctx.ellipse(0, 0, width, height);
+                ctx.fill();
+            }
+        }
+
+        Item {
+            id: shadowGuard
+            anchors.fill: backgroundCanvas
+            anchors.margins: -shadowRadius
+
+            Canvas {
+                id: colorCanvas
+                anchors.fill: parent
+                anchors.margins: shadowRadius
+
+                Connections {
+                    target: control
+                    onActiveChanged: colorCanvas.requestPaint()
+                    onColorChanged: colorCanvas.requestPaint()
+                }
+
+                onPaint: {
+                    var ctx = getContext("2d");
+                    ctx.reset();
+
+                    // Draw the actual color within the circle.
+                    ctx.beginPath();
+                    ctx.fillStyle = baseColor;
+                    var recess = smallestAxis * outerRecessPercentage;
+                    ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                    ctx.fill();
+                }
+            }
+        }
+
+        DropShadow {
+            id: shadow
+            source: shadowGuard
+            color: control.color
+            // Don't set fast here because Qt < 5.3 will run into QTBUG-36931
+            radius: shadowRadius
+            samples: Math.min(32, radius)
+            cached: true
+            anchors.fill: shadowGuard
+            visible: control.active
+        }
+
+        Canvas {
+            id: foregroundCanvas
+            anchors.fill: backgroundCanvas
+
+            Connections {
+                target: control
+                onActiveChanged: foregroundCanvas.requestPaint()
+                onColorChanged: foregroundCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                // Draw the first shine.
+                ctx.beginPath();
+                ctx.fillStyle = Qt.rgba(1, 1, 1, 0.03);
+                var recessPercentage = outerRecessPercentage + shineStep * 0.65;
+                var recess = smallestAxis * recessPercentage;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.fill();
+
+                // Draw the second, inner shine.
+                ctx.beginPath();
+                ctx.fillStyle = Qt.rgba(1, 1, 1, 0.06);
+                recessPercentage += shineStep;
+                recess = smallestAxis * recessPercentage;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.fill();
+
+                // Now draw the final arced shine that goes over the first and second shines.
+                // First, clip the entire shine area.
+                ctx.beginPath();
+                recessPercentage -= shineStep;
+                recess = smallestAxis * recessPercentage;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.clip();
+
+                if (!control.active) {
+                    // Then, clip the bottom area out of the shine.
+                    ctx.ellipse(recess, height * 0.425, width - recess * 2, height - recess * 2);
+                    ctx.clip();
+                }
+
+                ctx.beginPath();
+                var gradient;
+                if (!control.active) {
+                    // Draw the shine arc.
+                    gradient = ctx.createLinearGradient(width / 2, height * 0.2, width / 2, height * 0.65);
+                    gradient.addColorStop(0.0, Qt.rgba(1, 1, 1, 0.05));
+                    gradient.addColorStop(1.0, "transparent");
+                } else {
+                    // Draw the radial shine.
+                    gradient = ctx.createRadialGradient(width / 2, height / 2, width * 0.25, width / 2, height / 2, width * 0.25);
+                    gradient.addColorStop(0.0, Qt.lighter(baseColor, 1.4));
+                    gradient.addColorStop(1.0, "transparent");
+                }
+
+                ctx.fillStyle = gradient;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.fill();
+            }
+        }
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        implicitWidth: indicatorLoader.implicitWidth
+        implicitHeight: indicatorLoader.implicitHeight
+
+        Loader {
+            id: indicatorLoader
+            width: Math.max(1, parent.width)
+            height: Math.max(1, parent.height)
+            anchors.centerIn: parent
+            sourceComponent: indicator
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/ToggleButtonStyle.qml b/src/extras/Styles/Base/ToggleButtonStyle.qml
new file mode 100644
index 00000000..507c0314
--- /dev/null
+++ b/src/extras/Styles/Base/ToggleButtonStyle.qml
@@ -0,0 +1,294 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.0
+
+/*!
+    \qmltype ToggleButtonStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.0
+    \ingroup extrasstyles
+    \brief Provides custom styling for ToggleButton.
+
+    You can create a custom toggle button by replacing the same delegates that
+    \l {QtQuick.Controls.Styles::ButtonStyle}{ButtonStyle} provides.
+*/
+
+CircularButtonStyle {
+    id: circularButtonStyle
+
+    /*!
+        \since 1.3
+
+        The \l ToggleButton that this style is attached to.
+    */
+    readonly property ToggleButton control: __control
+
+    /*!
+        The gradient that is displayed on the inactive state indicator. The
+        inactive state indicator will be the checked gradient when the button
+        is unchecked, and the unchecked gradient when the button is checked.
+
+        \sa checkedGradient, uncheckedGradient
+    */
+    property Gradient inactiveGradient: Gradient {
+        GradientStop {
+            position: 0
+            color: commonStyleHelper.inactiveColor
+        }
+        GradientStop {
+            position: 1
+            color: commonStyleHelper.inactiveColorShine
+        }
+    }
+
+    /*!
+        The gradient that is displayed on the checked state indicator.
+
+        \sa uncheckedGradient, inactiveGradient
+    */
+    property Gradient checkedGradient: Gradient {
+        GradientStop {
+            position: 0
+            color: commonStyleHelper.onColor
+        }
+        GradientStop {
+            position: 1
+            color: commonStyleHelper.onColorShine
+        }
+    }
+
+    /*!
+        The gradient that is displayed on the unchecked state indicator.
+
+        \sa checkedGradient, inactiveGradient
+    */
+    property Gradient uncheckedGradient: Gradient {
+        GradientStop {
+            position: 0
+            color: commonStyleHelper.offColor
+        }
+        GradientStop {
+            position: 1
+            color: commonStyleHelper.offColorShine
+        }
+    }
+
+    /*!
+        The color that is used for the drop shadow below the checked state
+        indicator.
+
+        \sa uncheckedDropShadowColor
+    */
+    property color checkedDropShadowColor: commonStyleHelper.onColor
+
+    /*!
+        The color that is used for the drop shadow below the checked state
+        indicator.
+
+        \sa checkedDropShadowColor
+    */
+    property color uncheckedDropShadowColor: commonStyleHelper.offColor
+
+    CommonStyleHelper {
+        id: commonStyleHelper
+    }
+
+    background: Item {
+        implicitWidth: __buttonHelper.implicitWidth
+        implicitHeight: __buttonHelper.implicitHeight
+
+        Connections {
+            target: control
+            onPressedChanged: {
+                backgroundCanvas.requestPaint();
+            }
+
+            onCheckedChanged: {
+                uncheckedCanvas.requestPaint();
+                checkedCanvas.requestPaint();
+            }
+        }
+
+        Connections {
+            target: circularButtonStyle
+
+            onCheckedGradientChanged: checkedCanvas.requestPaint()
+            onCheckedDropShadowColorChanged: checkedCanvas.requestPaint()
+            onUncheckedGradientChanged: uncheckedCanvas.requestPaint()
+            onUncheckedDropShadowColorChanged: uncheckedCanvas.requestPaint()
+            onInactiveGradientChanged: {
+                checkedCanvas.requestPaint();
+                uncheckedCanvas.requestPaint();
+            }
+        }
+
+        Connections {
+            target: circularButtonStyle.checkedGradient
+            onUpdated: checkedCanvas.requestPaint()
+        }
+
+        Connections {
+            target: circularButtonStyle.uncheckedGradient
+            onUpdated: uncheckedCanvas.requestPaint()
+        }
+
+        Connections {
+            target: circularButtonStyle.inactiveGradient
+            onUpdated: {
+                uncheckedCanvas.requestPaint();
+                checkedCanvas.requestPaint();
+            }
+        }
+
+        Canvas {
+            id: backgroundCanvas
+            anchors.fill: parent
+
+            onPaint: {
+                var ctx = getContext("2d");
+                __buttonHelper.paintBackground(ctx);
+            }
+        }
+
+        Canvas {
+            id: uncheckedCanvas
+            anchors.fill: parent
+            anchors.margins: -(__buttonHelper.radius * 3)
+            visible: control.checked
+
+            readonly property real xCenter: width / 2
+            readonly property real yCenter: height / 2
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                /* Draw unchecked indicator */
+                ctx.beginPath();
+                ctx.lineWidth = __buttonHelper.outerArcLineWidth - __buttonHelper.innerArcLineWidth;
+                ctx.arc(xCenter, yCenter, __buttonHelper.outerArcRadius + __buttonHelper.innerArcLineWidth / 2,
+                    MathUtils.degToRad(180), MathUtils.degToRad(270), false);
+                var gradient = ctx.createLinearGradient(xCenter, yCenter + __buttonHelper.radius,
+                    xCenter, yCenter - __buttonHelper.radius);
+                var relevantGradient = control.checked ? inactiveGradient : uncheckedGradient;
+                for (var i = 0; i < relevantGradient.stops.length; ++i) {
+                    gradient.addColorStop(relevantGradient.stops[i].position, relevantGradient.stops[i].color);
+                }
+                ctx.strokeStyle = gradient;
+                ctx.stroke();
+            }
+        }
+
+        Canvas {
+            id: checkedCanvas
+            anchors.fill: parent
+            anchors.margins: -(__buttonHelper.radius * 3)
+            visible: !control.checked
+
+            readonly property real xCenter: width / 2
+            readonly property real yCenter: height / 2
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                /* Draw checked indicator */
+                ctx.beginPath();
+                ctx.lineWidth = __buttonHelper.outerArcLineWidth - __buttonHelper.innerArcLineWidth;
+                ctx.arc(xCenter, yCenter, __buttonHelper.outerArcRadius + __buttonHelper.innerArcLineWidth / 2,
+                    MathUtils.degToRad(270), MathUtils.degToRad(0), false);
+                var gradient = ctx.createLinearGradient(xCenter, yCenter + __buttonHelper.radius,
+                    xCenter, yCenter - __buttonHelper.radius);
+                var relevantGradient = control.checked ? checkedGradient : inactiveGradient;
+                for (var i = 0; i < relevantGradient.stops.length; ++i) {
+                    gradient.addColorStop(relevantGradient.stops[i].position, relevantGradient.stops[i].color);
+                }
+                ctx.strokeStyle = gradient;
+                ctx.stroke();
+            }
+        }
+
+        DropShadow {
+            id: uncheckedDropShadow
+            anchors.fill: uncheckedCanvas
+            cached: true
+            radius: 4
+            samples: 8
+            color: uncheckedDropShadowColor
+            source: uncheckedCanvas
+            visible: !control.checked
+        }
+
+        DropShadow {
+            id: checkedDropShadow
+            anchors.fill: checkedCanvas
+            cached: true
+            radius: 4
+            samples: 8
+            color: checkedDropShadowColor
+            source: checkedCanvas
+            visible: control.checked
+        }
+    }
+
+    panel: Item {
+        implicitWidth: backgroundLoader.implicitWidth
+        implicitHeight: backgroundLoader.implicitHeight
+
+        Loader {
+            id: backgroundLoader
+            anchors.fill: parent
+            sourceComponent: background
+        }
+
+        Loader {
+            id: labelLoader
+            sourceComponent: label
+            anchors.fill: parent
+            anchors.leftMargin: padding.left
+            anchors.topMargin: padding.top
+            anchors.rightMargin: padding.right
+            anchors.bottomMargin: padding.bottom
+        }
+    }
+}
diff --git a/src/extras/Styles/Base/TumblerStyle.qml b/src/extras/Styles/Base/TumblerStyle.qml
new file mode 100644
index 00000000..3ebcb7a2
--- /dev/null
+++ b/src/extras/Styles/Base/TumblerStyle.qml
@@ -0,0 +1,330 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Styles 1.3
+import QtQuick.Extras.Private 1.0
+
+/*!
+    \qmltype TumblerStyle
+    \inqmlmodule QtQuick.Extras.Styles
+    \since QtQuick.Extras.Styles 1.2
+    \ingroup extrasstyles
+    \brief Provides custom styling for Tumbler.
+
+    \note TumblerStyle requires Qt 5.3.2 or later.
+
+    You can create a custom tumbler by replacing the following delegates:
+    \list
+        \li \l background
+        \li \l foreground
+        \li \l separator
+        \li \l delegate
+        \li \l highlight
+        \li \l frame
+    \endlist
+*/
+
+Style {
+    id: tumblerStyle
+
+    padding.left: __padding
+    padding.right: __padding
+    padding.top: __padding
+    padding.bottom: __padding
+
+    /*!
+        \since 1.3
+
+        The \l Tumbler that this style is attached to.
+    */
+    readonly property Tumbler control: __control
+
+    /*!
+        This property holds the spacing between each delegate.
+    */
+    property real spacing: 0
+
+    /*!
+        This property holds the amount of items visible in each column.
+
+        This value should be an odd number.
+    */
+    property int visibleItemCount: 3
+
+    /*!
+        \internal
+
+        TODO: how do we handle differing padding values?
+    */
+    readonly property real __padding: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.4))
+    /*! \internal */
+    property real __delegateHeight: 0
+    /*! \internal */
+    property real __separatorWidth: 0
+
+    /*!
+        The background of the tumbler.
+    */
+    property Component background: Rectangle {
+        gradient: Gradient {
+            GradientStop { position: 0.00; color: "#acacac" }
+            GradientStop { position: 0.12; color: "#d5d5d5" }
+            GradientStop { position: 0.24; color: "#e8e8e8" }
+            GradientStop { position: 0.39; color: "#ffffff" }
+            GradientStop { position: 0.61; color: "#ffffff" }
+            GradientStop { position: 0.76; color: "#e8e8e8" }
+            GradientStop { position: 0.88; color: "#d5d5d5" }
+            GradientStop { position: 1.00; color: "#acacac" }
+        }
+    }
+
+    /*!
+        The foreground of the tumbler.
+    */
+    property Component foreground: Item {
+        clip: true
+
+        Rectangle {
+            id: rect
+            anchors.fill: parent
+            // Go one pixel larger than our parent so that we can hide our one pixel frame
+            // that the shadow is created from.
+            anchors.margins: -1
+            color: "transparent"
+            border.color: "black"
+            visible: false
+        }
+
+        DropShadow {
+            anchors.fill: rect
+            source: rect
+            radius: __padding
+            samples: Math.min(32, radius * 2)
+        }
+    }
+
+    /*!
+        The separator between each column.
+
+        The \l {Item::}{implicitWidth} property must be set, and should be the
+        same value for each separator.
+    */
+    property Component separator: Canvas {
+        implicitWidth: Math.max(10, Math.round(TextSingleton.implicitHeight * 0.4))
+
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            ctx.fillStyle = "#11000000";
+            ctx.fillRect(0, 0, width, height);
+            ctx.fillStyle = "#11000000";
+            ctx.fillRect(width * 0.2, 0, width * 0.6, height);
+            ctx.fillStyle = "#66000000";
+            ctx.fillRect(width * 0.4, 0, width * 0.2, height);
+        }
+    }
+
+    /*!
+        The foreground of each column.
+
+        In terms of stacking order, this component is displayed above the
+        delegate and highlight components, but below the foreground component.
+
+        \table
+            \row \li \c {readonly property int} \b styleData.column
+                \li The index of the column that contains this item.
+            \row \li \c {readonly property bool} \b styleData.activeFocus
+                \li \c true if the column that contains this item has active focus.
+
+        \endtable
+
+        Delegates for items in specific columns can be defined using
+        TumblerColumn's \l {TumblerColumn::columnForeground}{columnForeground}
+        property, which will be used instead of this component.
+    */
+    property Component columnForeground
+
+    /*!
+        The frame around the tumbler.
+
+        The \l {Item::}{implicitWidth} property must be set, and should be the
+        same value for each separator.
+    */
+    property Component frame: Canvas {
+        onPaint: {
+            // workaround for QTBUG-40792
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            var cornerRadius = Math.max(2, Math.round(TextSingleton.implicitHeight * 0.2));
+            var outerLineWidth = Math.max(1, Math.round(TextSingleton.implicitHeight * 0.05));
+            var innerLineWidth = __padding - outerLineWidth;
+
+            ctx.save();
+            ctx.lineWidth = outerLineWidth;
+            ctx.beginPath();
+            ctx.roundedRect(0, 0, width, height, cornerRadius, cornerRadius);
+            ctx.roundedRect(outerLineWidth, outerLineWidth, width - outerLineWidth * 2, height - outerLineWidth * 2,
+                cornerRadius - outerLineWidth, cornerRadius - outerLineWidth);
+            ctx.clip();
+
+            ctx.beginPath();
+            ctx.rect(0, 0, width, height);
+            var gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height);
+            gradient.addColorStop(0, "#33b3b3b3");
+            gradient.addColorStop(1, "#4ce6e6e6");
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            ctx.restore();
+
+            // The inner stroke must account for its corner radius.
+            cornerRadius -= outerLineWidth;
+
+            ctx.save();
+            ctx.lineWidth = innerLineWidth;
+            ctx.beginPath();
+            ctx.roundedRect(outerLineWidth, outerLineWidth, width - outerLineWidth * 2, height - outerLineWidth * 2,
+                cornerRadius, cornerRadius);
+            ctx.roundedRect(outerLineWidth + innerLineWidth, outerLineWidth + innerLineWidth,
+                width - outerLineWidth * 2 - innerLineWidth * 2, height - outerLineWidth * 2 - innerLineWidth * 2,
+                cornerRadius - innerLineWidth, cornerRadius - innerLineWidth);
+            ctx.clip();
+
+            ctx.beginPath();
+            ctx.rect(0, 0, width, height);
+            gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height);
+            gradient.addColorStop(0, "#4c666666");
+            gradient.addColorStop(1, "#40cccccc");
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            ctx.restore();
+        }
+    }
+
+    /*!
+        The delegate provides a template defining each item instantiated in the
+        column. Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this delegate in the model.
+            \row \li \c {readonly property int} \b styleData.column
+                \li The index of the column that contains this item.
+            \row \li \c {readonly property real} \b styleData.value
+                \li The value for this delegate from the model.
+            \row \li \c {readonly property bool} \b styleData.current
+                \li \c true if this delegate is the current item.
+            \row \li \c {readonly property real} \b styleData.displacement
+                \li \c A value from \c {-visibleItemCount / 2} to
+                    \c {visibleItemCount / 2} which represents how far away
+                    this item is from being the current item, with \c 0 being
+                    completely current.
+
+                    For example, the item below will be 40% opaque when
+                    it is not the current item, and transition to 100%
+                    opacity when it becomes the current item:
+
+                    \code
+                    delegate: Text {
+                        text: styleData.value
+                        opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
+                    }
+                    \endcode
+            \row \li \c {readonly property bool} \b styleData.activeFocus
+                \li \c true if the column that contains this item has active focus.
+
+        \endtable
+
+        Properties of the model are also available depending upon the type of
+        \l {qml-data-models}{Data Model}.
+
+        Delegates for items in specific columns can be defined using
+        TumblerColumn's \l {TumblerColumn::delegate}{delegate} property, which
+        will be used instead of this delegate.
+
+        The \l {Item::}{implicitHeight} property must be set, and it must be
+        the same for each delegate.
+    */
+    property Component delegate: Item {
+        implicitHeight: (control.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount
+
+        Text {
+            id: label
+            text: styleData.value
+            color: "#666666"
+            opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
+            font.pixelSize: Math.round(TextSingleton.font.pixelSize * 1.25)
+            anchors.centerIn: parent
+        }
+    }
+
+    /*!
+        The delegate for the highlight of each column.
+
+        Delegates for the highlight of specific columns can be defined using
+        TumblerColumn's \l {TumblerColumn::highlight}{highlight} property,
+        which will be used instead of this delegate.
+
+        Each instance of this component has access to the following properties:
+
+        \table
+            \row \li \c {readonly property int} \b styleData.index
+                \li The index of this column in the tumbler.
+            \row \li \c {readonly property int} \b styleData.columnIndex
+                \li The index of the column that contains this highlight.
+            \row \li \c {readonly property bool} \b styleData.activeFocus
+                \li \c true if the column that contains this highlight has active focus.
+        \endtable
+    */
+    property Component highlight
+
+    /*! \internal */
+    property Component panel: Item {
+        implicitWidth: {
+            var w = (__separatorWidth * (control.columnCount - 1)) + tumblerStyle.padding.left + tumblerStyle.padding.right;
+            for (var i = 0; i < control.columnCount; ++i)
+                w += control.getColumn(i).width;
+            return w;
+        }
+        implicitHeight: TextSingleton.implicitHeight * 10 + tumblerStyle.padding.top + tumblerStyle.padding.bottom
+    }
+}
diff --git a/src/extras/Styles/Base/basestyle.qrc b/src/extras/Styles/Base/basestyle.qrc
new file mode 100644
index 00000000..2bcf0328
--- /dev/null
+++ b/src/extras/Styles/Base/basestyle.qrc
@@ -0,0 +1,19 @@
+<RCC>
+    <qresource prefix="/ExtrasImports/QtQuick/Extras/Styles/Base">
+        <file>TumblerStyle.qml</file>
+        <file>ToggleButtonStyle.qml</file>
+        <file>StatusIndicatorStyle.qml</file>
+        <file>PieMenuStyle.qml</file>
+        <file>HandleStyleHelper.qml</file>
+        <file>HandleStyle.qml</file>
+        <file>GaugeStyle.qml</file>
+        <file>DialStyle.qml</file>
+        <file>DelayButtonStyle.qml</file>
+        <file>CommonStyleHelper.qml</file>
+        <file>CircularTickmarkLabelStyle.qml</file>
+        <file>CircularGaugeStyle.qml</file>
+        <file>CircularButtonStyle.qml</file>
+        <file>images/needle.png</file>
+        <file>images/knob.png</file>
+    </qresource>
+</RCC>
diff --git a/src/extras/Styles/Base/basestyleplugin.cpp b/src/extras/Styles/Base/basestyleplugin.cpp
new file mode 100644
index 00000000..ef894910
--- /dev/null
+++ b/src/extras/Styles/Base/basestyleplugin.cpp
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "basestyleplugin.h"
+
+QT_BEGIN_NAMESPACE
+
+QtQuickExtrasStylesPlugin::QtQuickExtrasStylesPlugin(QObject *parent) :
+    QQmlExtensionPlugin(parent)
+{
+}
+
+void QtQuickExtrasStylesPlugin::registerTypes(const char *uri)
+{
+    Q_INIT_RESOURCE(basestyle);
+    const QString prefix = "qrc:/ExtrasImports/QtQuick/Extras/Styles";
+    // register version 1.0
+    qmlRegisterType(QUrl(prefix + "/Base/CircularButtonStyle.qml"), uri, 1, 0, "CircularButtonStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/CircularGaugeStyle.qml"), uri, 1, 0, "CircularGaugeStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/CircularTickmarkLabelStyle.qml"), uri, 1, 0, "CircularTickmarkLabelStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/CommonStyleHelper.qml"), uri, 1, 0, "CommonStyleHelper");
+    qmlRegisterType(QUrl(prefix + "/Base/DelayButtonStyle.qml"), uri, 1, 0, "DelayButtonStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/DialStyle.qml"), uri, 1, 0, "DialStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/GaugeStyle.qml"), uri, 1, 0, "GaugeStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/HandleStyleHelper.qml"), uri, 1, 0, "HandleStyleHelper");
+    qmlRegisterType(QUrl(prefix + "/Base/HandleStyle.qml"), uri, 1, 0, "HandleStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/PieMenuStyle.qml"), uri, 1, 0, "PieMenuStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/ToggleButtonStyle.qml"), uri, 1, 0, "ToggleButtonStyle");
+    // register version 1.1
+    qmlRegisterType(QUrl(prefix + "/Base/DialStyle.qml"), uri, 1, 1, "DialStyle");
+    qmlRegisterType(QUrl(prefix + "/Base/StatusIndicatorStyle.qml"), uri, 1, 1, "StatusIndicatorStyle");
+    // register version 1.2
+    qmlRegisterType(QUrl(prefix + "/Base/TumblerStyle.qml"), uri, 1, 2, "TumblerStyle");
+    // register version 1.3
+    qmlRegisterType(QUrl(prefix + "/Base/PieMenuStyle.qml"), uri, 1, 3, "PieMenuStyle");
+}
+
+QT_END_NAMESPACE
diff --git a/src/extras/Styles/Base/basestyleplugin.h b/src/extras/Styles/Base/basestyleplugin.h
new file mode 100644
index 00000000..4f1fb6d1
--- /dev/null
+++ b/src/extras/Styles/Base/basestyleplugin.h
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef STYLES_PLUGIN_H
+#define STYLES_PLUGIN_H
+
+#include <QtQml/qqmlextensionplugin.h>
+#include <QtQml/qqml.h>
+#include <QtQml/qqmlengine.h>
+
+QT_BEGIN_NAMESPACE
+
+class QtQuickExtrasStylesPlugin : public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QQmlExtensionInterface/1.0")
+public:
+    explicit QtQuickExtrasStylesPlugin(QObject *parent = 0);
+
+    void registerTypes(const char *uri);
+};
+
+QT_END_NAMESPACE
+
+#endif // STYLES_PLUGIN_H
diff --git a/src/extras/Styles/Base/images/knob.png b/src/extras/Styles/Base/images/knob.png
new file mode 100644
index 00000000..ecac4d09
--- /dev/null
+++ b/src/extras/Styles/Base/images/knob.png
diff --git a/src/extras/Styles/Base/images/needle.png b/src/extras/Styles/Base/images/needle.png
new file mode 100644
index 00000000..8237e516
--- /dev/null
+++ b/src/extras/Styles/Base/images/needle.png
diff --git a/src/extras/Styles/Base/qmldir b/src/extras/Styles/Base/qmldir
new file mode 100644
index 00000000..509cd05c
--- /dev/null
+++ b/src/extras/Styles/Base/qmldir
@@ -0,0 +1,4 @@
+module QtQuick.Extras.Styles
+plugin qtquickextrasstylesplugin
+classname QtQuickExtrasStylesPlugin
+depends QtGraphicalEffects 1.0
diff --git a/src/extras/Styles/Flat/ApplicationWindowStyle.qml b/src/extras/Styles/Flat/ApplicationWindowStyle.qml
new file mode 100644
index 00000000..8ae620b0
--- /dev/null
+++ b/src/extras/Styles/Flat/ApplicationWindowStyle.qml
@@ -0,0 +1,111 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.3 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+
+Base.ApplicationWindowStyle {
+    panel: Item {
+        readonly property alias contentArea: contentArea
+        readonly property alias menuBarArea: menuBarArea
+        readonly property alias toolBarArea: toolBarArea
+        readonly property alias statusBarArea: statusBarArea
+        readonly property bool hasToolBar: !!control.toolBar && control.toolBar.Accessible.role === Accessible.ToolBar
+
+        Rectangle {
+            id: background
+            visible: !styleData.hasColor
+            color: FlatStyle.backgroundColor
+        }
+
+        Item {
+            id: contentArea
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: statusBarArea.top
+            anchors.topMargin: toolBarArea.implicitHeight
+        }
+
+        Item {
+            id: toolBarArea
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            implicitHeight: childrenRect.height
+            height: visibleChildren.length > 0 ? implicitHeight : 0
+
+            Loader {
+                visible: active
+                active: !hasToolBar && !!control.menuBar
+                anchors.left: parent.left
+                anchors.right: parent.right
+                sourceComponent: ToolBar {
+                    __menu: proxyMenu.items.length > 1 ? proxyMenu :
+                            proxyMenu.items.length === 1 ? proxyMenu.items[0] : null
+                }
+            }
+        }
+
+        Item {
+            id: statusBarArea
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            implicitHeight: childrenRect.height
+            height: visibleChildren.length > 0 ? implicitHeight : 0
+        }
+
+        Item {
+            id: menuBarArea
+            visible: false
+
+            Menu {
+                id: proxyMenu
+                items: control.menuBar ? control.menuBar.menus : []
+            }
+
+            Binding {
+                target: control.toolBar
+                property: "__menu"
+                value: proxyMenu.items.length > 1 ? proxyMenu :
+                       proxyMenu.items.length === 1 ? proxyMenu.items[0] : null
+                when: hasToolBar
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/BusyIndicatorStyle.qml b/src/extras/Styles/Flat/BusyIndicatorStyle.qml
new file mode 100644
index 00000000..d2809b02
--- /dev/null
+++ b/src/extras/Styles/Flat/BusyIndicatorStyle.qml
@@ -0,0 +1,75 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls.Styles 1.2 as Base
+
+Base.BusyIndicatorStyle {
+    indicator: Item {
+        id: indicator
+
+        function resolveSize() {
+            // Small: 26, Medium: 52, Large: 104
+            var sizeHint = control.styleHints ? control.styleHints['size'] : undefined
+            if (sizeHint === "small" || !sizeHint && control.width > 0 && control.width < 52)
+                return "Small"
+            if (sizeHint === "large" || !sizeHint && control.width >= 104)
+                return "Large"
+            return "Medium"
+        }
+
+        anchors.centerIn: parent
+        implicitWidth: image.sourceSize.width
+        implicitHeight: image.sourceSize.height
+
+        opacity: control.running ? 1 : 0
+        Behavior on opacity { OpacityAnimator { duration: 250 } }
+
+        Image {
+            id: image
+            anchors.centerIn: parent
+            anchors.alignWhenCentered: true
+            source: "images/BusyIndicator_Normal-" + indicator.resolveSize() + ".png"
+
+            RotationAnimator on rotation {
+                from: 0
+                to: 360
+                duration: 1000
+                loops: Animation.Infinite
+                running: indicator.visible && (control.running || indicator.opacity > 0)
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/ButtonStyle.qml b/src/extras/Styles/Flat/ButtonStyle.qml
new file mode 100644
index 00000000..d0d4ca7b
--- /dev/null
+++ b/src/extras/Styles/Flat/ButtonStyle.qml
@@ -0,0 +1,194 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+
+Base.ButtonStyle {
+    padding { top: 0; left: 0; right: 0; bottom: 0 }
+
+    readonly property bool __hovered: !Settings.hasTouchScreen && control.hovered
+
+    background: Rectangle {
+        property bool down: control.pressed || (control.checkable && control.checked)
+
+        implicitWidth: Math.round(100 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(26 * FlatStyle.scaleFactor)
+        radius: FlatStyle.radius
+
+        color: {
+            if (control.isDefault) {
+                if (control.checkable && control.checked) {
+                    if (!control.enabled)
+                        return Qt.rgba(0, 0, 0, 0.25);
+
+                    if (control.pressed)
+                        return control.activeFocus ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.checkedAndPressedColorAlt;
+
+                    return control.activeFocus ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.pressedColor;
+                } else {
+                    // Normal state.
+                    if (!control.enabled)
+                        return Qt.rgba(0, 0, 0, 0.15);
+
+                    if (control.pressed)
+                        return control.activeFocus ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.pressedColor;
+
+                    if (control.activeFocus)
+                        return control.pressed ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.focusedColor;
+
+                    return FlatStyle.styleColor;
+                }
+            }
+
+            // Non-default button.
+            if (control.checkable && control.checked) {
+                if (!control.enabled)
+                    return Qt.rgba(0, 0, 0, 0.1);
+
+                if (control.pressed)
+                    return control.activeFocus ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.checkedAndPressedColor;
+
+                return control.activeFocus ? FlatStyle.focusedAndPressedColor : FlatStyle.pressedColorAlt;
+            }
+
+            if (control.pressed)
+                return control.activeFocus ? FlatStyle.focusedAndPressedColor : FlatStyle.pressedColorAlt;
+
+            if (!control.activeFocus && __hovered)
+                return FlatStyle.hoveredColor;
+
+            return "transparent";
+        }
+
+        border.color: {
+            if (!control.isDefault) {
+                if (!control.enabled)
+                    return Qt.rgba(0, 0, 0, (control.checkable && control.checked ? 0.3 : 0.2));
+
+                if (control.activeFocus && !control.pressed && !control.checked)
+                    return FlatStyle.focusedColor;
+
+                if (!__hovered && !control.checked && !control.pressed)
+                    return FlatStyle.styleColor;
+            }
+
+            return "transparent";
+        }
+
+        border.width: control.activeFocus ? FlatStyle.twoPixels : FlatStyle.onePixel
+    }
+
+    label: Item {
+        readonly property bool isDown: control.pressed || (control.checkable && control.checked)
+        readonly property bool hasIcon: icon.status === Image.Ready || icon.status === Image.Loading
+        readonly property bool hasMenu: !!control.menu
+        readonly property bool hasText: !!control.text
+        readonly property int labelSpacing: Math.round(10 * FlatStyle.scaleFactor)
+        implicitWidth: icon.implicitWidth + label.implicitWidth + indicator.implicitHeight
+                       + (hasIcon || hasText ? labelSpacing : 0) + (hasIcon && hasText ? labelSpacing : 0)
+        implicitHeight: Math.max(Math.max(icon.implicitHeight, label.implicitHeight), indicator.height)
+        baselineOffset: label.y + label.baselineOffset
+        Image {
+            id: icon
+            visible: hasIcon
+            source: control.iconSource
+            // center align when only icon, otherwise left align
+            anchors.left: parent.left
+            anchors.leftMargin: hasMenu || hasText ? labelSpacing : parent.width / 2 - width / 2
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        Text {
+            id: label
+            visible: hasText
+            text: control.text
+            elide: Text.ElideRight
+            font.family: FlatStyle.fontFamily
+            renderType: FlatStyle.__renderType
+            opacity: !enabled && !control.isDefault ? FlatStyle.disabledOpacity : 1.0
+            color: control.isDefault ? FlatStyle.selectedTextColor :
+                   !enabled ? FlatStyle.disabledColor :
+                   isDown ? FlatStyle.selectedTextColor :
+                   control.activeFocus ? FlatStyle.focusedTextColor :
+                   __hovered ? FlatStyle.selectedTextColor : FlatStyle.styleColor
+            horizontalAlignment: hasMenu != hasIcon ? Qt.AlignLeft : Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+            anchors.fill: parent
+            anchors.leftMargin: labelSpacing + (hasIcon ? labelSpacing + icon.width : 0)
+            anchors.rightMargin: hasMenu ? indicator.width : labelSpacing
+        }
+        Item {
+            id: indicator
+            visible: hasMenu
+            implicitWidth: Math.round(28 * FlatStyle.scaleFactor)
+            implicitHeight: Math.round(26 * FlatStyle.scaleFactor)
+            // center align when only menu, otherwise right align
+            anchors.right: parent.right
+            anchors.rightMargin: !hasIcon && !hasText ? parent.width / 2 - width / 2 : 0
+            anchors.verticalCenter: parent.verticalCenter
+
+            opacity: control.enabled ? 1.0 : 0.2
+            property color color: !control.enabled ? FlatStyle.disabledColor :
+                                   control.activeFocus && !control.pressed ? FlatStyle.focusedColor :
+                                   control.activeFocus || control.pressed || __hovered ? FlatStyle.selectedTextColor : FlatStyle.styleColor
+
+            Rectangle {
+                x: Math.round(7 * FlatStyle.scaleFactor)
+                y: Math.round(7 * FlatStyle.scaleFactor)
+                width: Math.round(14 * FlatStyle.scaleFactor)
+                height: FlatStyle.twoPixels
+                color: indicator.color
+            }
+            Rectangle {
+                x: Math.round(7 * FlatStyle.scaleFactor)
+                y: Math.round(12 * FlatStyle.scaleFactor)
+                width: Math.round(14 * FlatStyle.scaleFactor)
+                height: FlatStyle.twoPixels
+                color: indicator.color
+            }
+            Rectangle {
+                x: Math.round(7 * FlatStyle.scaleFactor)
+                y: Math.round(17 * FlatStyle.scaleFactor)
+                width: Math.round(14 * FlatStyle.scaleFactor)
+                height: FlatStyle.twoPixels
+                color: indicator.color
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/CalendarStyle.qml b/src/extras/Styles/Flat/CalendarStyle.qml
new file mode 100644
index 00000000..b41e3c8e
--- /dev/null
+++ b/src/extras/Styles/Flat/CalendarStyle.qml
@@ -0,0 +1,205 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.0
+
+Base.CalendarStyle {
+    // This style doesn't support a grid.
+    gridVisible: false
+    // gridColor == frame color
+    gridColor: control.enabled ? FlatStyle.mediumFrameColor : FlatStyle.alphaFrameColor
+    // This ensures the week number separator is hidden.
+    __gridLineWidth: 0
+
+    // Used in conjunction with the control height.
+    // These values are taken from the flat style specs.
+    readonly property real __headerFontRatio: 18 / 264
+    readonly property real __weekNumberFontRatio: 9 / 264
+    readonly property real __dayFontRatio: 13 / 264
+
+    navigationBar: Rectangle {
+        implicitHeight: Math.round(control.height * 0.2121)
+        color: control.enabled ? FlatStyle.styleColor : FlatStyle.mediumFrameColor
+
+        MouseArea {
+            id: previousMonth
+            width: parent.height
+            height: width
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            onClicked: control.showPreviousMonth()
+
+            Rectangle {
+                anchors.fill: parent
+                color: FlatStyle.selectedTextColor
+                opacity: previousMonth.pressed ? 0.25 : 0
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: 80
+                    }
+                }
+            }
+
+            LeftArrowIcon {
+                width: Math.round(parent.width * 0.3)
+                height: Math.round(parent.width * 0.3)
+                anchors.centerIn: parent
+            }
+        }
+        Label {
+            id: dateText
+            text: styleData.title
+            color: FlatStyle.selectedTextColor
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: control.height * __headerFontRatio
+            font.family: FlatStyle.fontFamily
+            font.weight: Font.Light
+            renderType: FlatStyle.__renderType
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: previousMonth.right
+            anchors.leftMargin: 2
+            anchors.right: nextMonth.left
+            anchors.rightMargin: 2
+        }
+        MouseArea {
+            id: nextMonth
+            width: parent.height
+            height: width
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            onClicked: control.showNextMonth()
+
+            Rectangle {
+                anchors.fill: parent
+                color: FlatStyle.selectedTextColor
+                opacity: nextMonth.pressed ? 0.25 : 0
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: 100
+                    }
+                }
+            }
+
+            LeftArrowIcon {
+                width: Math.round(parent.width * 0.3)
+                height: Math.round(parent.width * 0.3)
+                anchors.centerIn: parent
+                scale: -1
+            }
+        }
+    }
+
+    dayDelegate: Item {
+        Rectangle {
+            id: rect
+            // There should always be at least 1 pixel margin between circles.
+            width: MathUtils.roundEven(Math.min(parent.width, parent.height) - 1)
+            height: width
+            anchors.centerIn: parent
+            radius: width / 2
+            color: (styleData.date !== undefined && styleData.selected
+                ? (control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor)
+                : "transparent")
+            border.width: styleData.today ? FlatStyle.onePixel : 0
+            border.color: !control.enabled ? FlatStyle.alphaFrameColor : FlatStyle.styleColor
+            opacity: control.enabled ? 1 : 0.15
+        }
+
+        Label {
+            id: dayDelegateText
+            text: styleData.date.getDate()
+            anchors.fill: rect
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            font.pixelSize: control.height * __dayFontRatio
+            font.family: FlatStyle.fontFamily
+            font.weight: Font.Light
+            renderType: FlatStyle.__renderType
+            opacity: !control.enabled ? (!styleData.valid || !styleData.visibleMonth ? 0.3 : 0.6) :
+                (!styleData.valid || !styleData.visibleMonth ? 0.3 : 1)
+            color: !control.enabled ? FlatStyle.disabledColor
+                : (styleData.selected ? FlatStyle.selectedTextColor : FlatStyle.textColor)
+        }
+    }
+
+    weekNumberDelegate: Item {
+        implicitWidth: control.width * 0.14
+
+        Label {
+            text: styleData.weekNumber
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: control.height * (__dayFontRatio - __weekNumberFontRatio) / 2
+            fontSizeMode: Text.Fit
+            font.pixelSize: control.height * __weekNumberFontRatio
+            renderType: FlatStyle.__renderType
+            color: !control.enabled ? FlatStyle.disabledColor : FlatStyle.styleColor
+            opacity: !control.enabled ? FlatStyle.disabledOpacity : 1
+        }
+    }
+
+    dayOfWeekDelegate: Item {
+        implicitHeight: control.height * 0.13
+
+        Label {
+            text: localeDayName.length == 0 || localeDayName.length > 1
+                ? control.__locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)[0]
+                : localeDayName
+            color: !control.enabled ? FlatStyle.disabledColor : FlatStyle.styleColor
+            opacity: !control.enabled ? FlatStyle.disabledOpacity : 1
+            font.family: FlatStyle.fontFamily
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            font.pixelSize: control.height * __headerFontRatio
+            renderType: FlatStyle.__renderType
+
+            property string localeDayName: control.__locale.dayName(styleData.dayOfWeek, Locale.NarrowFormat)
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/CheckBoxDrawer.qml b/src/extras/Styles/Flat/CheckBoxDrawer.qml
new file mode 100644
index 00000000..5955b6fe
--- /dev/null
+++ b/src/extras/Styles/Flat/CheckBoxDrawer.qml
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+
+// Internal, for use with CheckBoxStyle and GroupBoxStyle
+Item {
+    implicitWidth: Math.round(26 * FlatStyle.scaleFactor)
+    implicitHeight: implicitWidth
+
+    property bool controlEnabled: false
+    property bool controlActiveFocus: false
+    property bool controlPressed: false
+    property bool controlHovered: false
+    property bool controlChecked: false
+    property alias backgroundVisible: background.visible
+
+    onControlActiveFocusChanged: checkCanvas.requestPaint()
+    onControlEnabledChanged: checkCanvas.requestPaint()
+    onControlPressedChanged: checkCanvas.requestPaint()
+
+    Rectangle {
+        id: background
+        anchors.centerIn: parent
+        width: Math.round(20 * FlatStyle.scaleFactor)
+        height: width
+        radius: FlatStyle.radius
+        color: controlEnabled ? (controlPressed ? FlatStyle.lightFrameColor : FlatStyle.backgroundColor) : FlatStyle.disabledFillColor
+        border.color: !controlEnabled ? FlatStyle.disabledFillColor :
+            (controlPressed ? FlatStyle.darkFrameColor :
+            (controlActiveFocus ? FlatStyle.focusedColor :
+            (controlHovered ? FlatStyle.styleColor : FlatStyle.lightFrameColor)))
+        border.width: controlActiveFocus &&
+            !controlPressed ? FlatStyle.twoPixels : FlatStyle.onePixel
+    }
+
+    Canvas {
+        id: checkCanvas
+        anchors.centerIn: parent
+        width: Math.round(20 * FlatStyle.scaleFactor)
+        height: width
+        visible: controlChecked
+
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            ctx.beginPath();
+            ctx.moveTo(0.417 * width, 0.783 * height);
+            ctx.lineTo(0.152 * width, 0.519 * height);
+            ctx.lineTo(0.248 * width, 0.423 * height);
+            ctx.lineTo(0.417 * width, 0.593 * height);
+            ctx.lineTo(0.75 * width, 0.26 * height);
+            ctx.lineTo(0.846 * width, 0.355 * height);
+            ctx.lineTo();
+            ctx.closePath();
+            ctx.fillStyle = !controlEnabled ? FlatStyle.mediumFrameColor :
+                (controlPressed ? FlatStyle.checkedAndPressedColor :
+                (controlActiveFocus ? FlatStyle.focusedColor : FlatStyle.styleColor));
+            ctx.fill();
+        }
+    }
+
+}
diff --git a/src/extras/Styles/Flat/CheckBoxStyle.qml b/src/extras/Styles/Flat/CheckBoxStyle.qml
new file mode 100644
index 00000000..65377365
--- /dev/null
+++ b/src/extras/Styles/Flat/CheckBoxStyle.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.CheckBoxStyle {
+    spacing: Math.round(8 * FlatStyle.scaleFactor)
+
+    indicator: CheckBoxDrawer {
+        controlEnabled: control.enabled
+        controlActiveFocus: control.activeFocus
+        controlPressed: control.pressed
+        controlHovered: !Settings.hasTouchScreen && control.hovered
+        controlChecked: control.checked
+    }
+
+    label: Text {
+        text: control.text
+        font.family: FlatStyle.fontFamily
+        renderType: FlatStyle.__renderType
+        anchors.verticalCenter: parent.verticalCenter
+        opacity: enabled ? 1.0 : FlatStyle.disabledOpacity
+        color: !enabled ? FlatStyle.disabledColor :
+               control.activeFocus ? FlatStyle.focusedTextColor : FlatStyle.defaultTextColor
+    }
+}
diff --git a/src/extras/Styles/Flat/CircularButtonStyle.qml b/src/extras/Styles/Flat/CircularButtonStyle.qml
new file mode 100644
index 00000000..774870e6
--- /dev/null
+++ b/src/extras/Styles/Flat/CircularButtonStyle.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick.Extras.Styles 1.3 as Base
+
+Base.CircularButtonStyle { }
diff --git a/src/extras/Styles/Flat/CircularGaugeStyle.qml b/src/extras/Styles/Flat/CircularGaugeStyle.qml
new file mode 100644
index 00000000..d18cdea5
--- /dev/null
+++ b/src/extras/Styles/Flat/CircularGaugeStyle.qml
@@ -0,0 +1,168 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.1
+import QtQuick.Extras.Styles 1.3 as Base
+
+Base.CircularGaugeStyle {
+    id: circularGaugeStyle
+
+    tickmarkInset: __thickArcTickmarklessMargin + __thickArcLineWidth / 2 - __tickmarkLength / 2
+    minorTickmarkInset: __thickArcTickmarklessMargin + __thickArcLineWidth / 2 - (__tickmarkLength / 2) / 2
+    labelInset: Math.max(textMetrics.width, textMetrics.height) / 2
+
+    // A stroked arc starts losing its shape when it is very thick, so prevent that from happening.
+    readonly property real __thickArcLineWidth: Math.min(22 * FlatStyle.scaleFactor, Math.round(outerRadius * 0.2))
+    readonly property real __thickArcTickmarklessMargin: labelInset * 2
+    readonly property real __tickmarkLength: __thickArcLineWidth * 0.5
+    readonly property real __tickmarkWidth: FlatStyle.onePixel
+    readonly property real __fontSize: Math.max(6, __protectedScope.toPixels(0.12))
+    // TODO: add this to Utils or something; it's not specific to this control
+    readonly property real __antialiasingAdjustment: FlatStyle.onePixel
+
+    Text {
+        id: textMetrics
+        font.pixelSize: __fontSize
+        text: control.maximumValue.toFixed(0)
+        visible: false
+    }
+
+    background: Item {
+        implicitWidth: Math.round(160 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(160 * FlatStyle.scaleFactor)
+
+        readonly property real thinArcLineWidth: FlatStyle.onePixel
+        readonly property bool tickmarklessVariant: false
+        readonly property real arcDistance: thinArcLineWidth * 3
+
+        Connections {
+            target: control
+            onValueChanged: thickArc.requestPaint()
+            onMinimumValueChanged: thickArc.requestPaint()
+            onMaximumValueChanged: thickArc.requestPaint()
+            onEnabledChanged: {
+                thickArc.requestPaint();
+                thinArc.requestPaint();
+            }
+        }
+
+        // TODO: test performance of this on the Pi
+        Canvas {
+            id: thickArc
+            anchors.fill: parent
+            anchors.margins: Math.floor(tickmarklessVariant ? arcDistance : __thickArcTickmarklessMargin)
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                ctx.lineWidth = __thickArcLineWidth;
+                var radius = Math.floor(width / 2 - ctx.lineWidth / 2 - __antialiasingAdjustment);
+                if (radius < 0)
+                    return;
+
+                ctx.beginPath();
+                ctx.globalAlpha = control.enabled ? 1 : 0.2;
+                ctx.strokeStyle = control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor;
+                var startAngle = MathUtils.degToRad(minimumValueAngle - 90);
+                var endAngle = MathUtils.degToRad(needleRotation - 90);
+                ctx.arc(Math.floor(width / 2), Math.floor(height / 2), radius, startAngle, endAngle, false);
+                ctx.stroke();
+            }
+        }
+
+        Canvas {
+            id: thinArc
+            anchors.fill: parent
+            anchors.margins: Math.floor(tickmarklessVariant ? 0 : thickArc.anchors.margins + __thickArcLineWidth + arcDistance)
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                ctx.lineWidth = thinArcLineWidth;
+                var radius = width / 2 - ctx.lineWidth / 2 - __antialiasingAdjustment;
+                if (radius < 0)
+                    return;
+
+                ctx.beginPath();
+                ctx.globalAlpha = control.enabled ? 1 : 0.2;
+                ctx.strokeStyle = control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor;
+                var startAngle = MathUtils.degToRad(minimumValueAngle - 90);
+                var endAngle = MathUtils.degToRad(maximumValueAngle - 90);
+                ctx.arc(Math.floor(width / 2), Math.floor(height / 2), radius, startAngle, endAngle, false);
+                ctx.stroke();
+            }
+        }
+    }
+
+    needle: null
+    foreground: null
+
+    tickmark: Rectangle {
+        implicitWidth: __tickmarkWidth
+        implicitHeight: __tickmarkLength
+        antialiasing: true
+        color: control.value < styleData.value || isEdgeTickmark ? (control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor) : FlatStyle.selectedTextColor
+        opacity: control.value < styleData.value || isEdgeTickmark ? (control.enabled ? 1 : 0.2) : 0.5
+        visible: (!isEdgeTickmark) || (control.value < styleData.value)
+            || (styleData.value === control.minimumValue && control.value === control.minimumValue)
+
+        readonly property bool isEdgeTickmark: styleData.value === control.minimumValue || styleData.value === control.maximumValue
+    }
+
+    minorTickmark: Rectangle {
+        implicitWidth: __tickmarkWidth
+        implicitHeight: __tickmarkLength / 2
+        antialiasing: true
+        color: control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+        visible: control.value < styleData.value
+        opacity: control.enabled ? 1 : 0.2
+    }
+
+    tickmarkLabel: Text {
+        font.pixelSize: __fontSize
+        text: styleData.value
+        color: control.enabled ? FlatStyle.defaultTextColor : FlatStyle.disabledColor
+        opacity: control.enabled ? 1 : FlatStyle.disabledOpacity
+        antialiasing: true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/extras/Styles/Flat/CircularTickmarkLabelStyle.qml b/src/extras/Styles/Flat/CircularTickmarkLabelStyle.qml
new file mode 100644
index 00000000..8127608b
--- /dev/null
+++ b/src/extras/Styles/Flat/CircularTickmarkLabelStyle.qml
@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick.Extras.Styles 1.3 as Base
+
+Base.CircularTickmarkLabelStyle {}
diff --git a/src/extras/Styles/Flat/ComboBoxStyle.qml b/src/extras/Styles/Flat/ComboBoxStyle.qml
new file mode 100644
index 00000000..b263c9cd
--- /dev/null
+++ b/src/extras/Styles/Flat/ComboBoxStyle.qml
@@ -0,0 +1,163 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras.Private 1.0
+
+Base.ComboBoxStyle {
+    id: style
+
+    padding {
+        top: 0
+        left: Math.round(FlatStyle.scaleFactor * (control.editable ? 10 : 6))
+        right: 0
+        bottom: 0
+    }
+
+    font.family: FlatStyle.fontFamily
+    textColor: !control.enabled ? FlatStyle.mediumFrameColor :
+                control.editable ? FlatStyle.defaultTextColor :
+                control.pressed ? FlatStyle.selectedTextColor :
+                control.activeFocus ? FlatStyle.focusedTextColor : FlatStyle.styleColor
+    selectionColor: FlatStyle.highlightColor
+    selectedTextColor: FlatStyle.selectedTextColor
+
+    dropDownButtonWidth: Math.round(28 * FlatStyle.scaleFactor)
+
+    background: Item {
+        id: background
+        anchors.fill: parent
+        implicitWidth: Math.round(100 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(26 * FlatStyle.scaleFactor)
+
+        Rectangle {
+            anchors.fill: parent
+            radius: FlatStyle.radius
+
+            visible: !control.editable
+            opacity: control.enabled ? 1.0 : control.editable ? 0.1 : 0.2
+
+            color: control.editable && !control.enabled ? FlatStyle.disabledColor :
+                   control.activeFocus && control.pressed ? FlatStyle.focusedAndPressedColor :
+                   control.pressed ? FlatStyle.pressedColorAlt : "transparent"
+
+            border.width: control.activeFocus ? FlatStyle.twoPixels : FlatStyle.onePixel
+            border.color: !control.enabled ? FlatStyle.disabledColor :
+                           control.activeFocus && control.pressed ? FlatStyle.focusedAndPressedColor :
+                           control.activeFocus ? FlatStyle.highlightColor :
+                           control.pressed ? FlatStyle.pressedColorAlt : FlatStyle.styleColor
+        }
+
+        Item {
+            clip: true
+            visible: control.editable
+            width: style.dropDownButtonWidth
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+
+            Rectangle {
+                width: background.width
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                radius: FlatStyle.radius
+                color: !control.enabled ? FlatStyle.lightFrameColor :
+                        control.activeFocus && control.pressed ? FlatStyle.focusedAndPressedColor :
+                        control.activeFocus ? FlatStyle.focusedColor :
+                        control.pressed ? FlatStyle.pressedColor : FlatStyle.styleColor
+            }
+        }
+
+        LeftArrowIcon {
+            width: Math.round(14 * FlatStyle.scaleFactor)
+            height: Math.round(14 * FlatStyle.scaleFactor)
+            anchors.right: parent.right
+            anchors.rightMargin: width / 2
+            anchors.verticalCenter: parent.verticalCenter
+            rotation: control.pressed ? 90 : -90
+            color: control.editable || control.pressed ? FlatStyle.selectedTextColor
+                : control.activeFocus ? FlatStyle.focusedColor
+                : control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+            opacity: control.enabled || control.editable ? 1.0 : 0.2
+        }
+    }
+
+    __editor: Item {
+        clip: true
+        anchors.fill: parent
+        anchors.bottomMargin: anchors.margins + 1 // ### FIXME: compensate the -1 margin in ComboBoxStyle:
+        Rectangle {
+            anchors.fill: parent
+            anchors.rightMargin: -Math.round(3 * FlatStyle.scaleFactor)
+
+            radius: FlatStyle.radius
+            color: !control.enabled ? FlatStyle.disabledColor : FlatStyle.backgroundColor
+            opacity: control.enabled ? 1.0 : 0.1
+
+            border.width: control.activeFocus ? FlatStyle.twoPixels : FlatStyle.onePixel
+            border.color: !control.enabled ? FlatStyle.disabledColor :
+                           control.activeFocus ? FlatStyle.highlightColor :
+                           control.pressed ? FlatStyle.pressedColorAlt : FlatStyle.styleColor
+        }
+    }
+
+    __dropDownStyle: MenuStyle {
+        font: style.font
+        __maxPopupHeight: 600
+        __menuItemType: "comboboxitem"
+        __scrollerStyle: ScrollViewStyle { }
+
+        itemDelegate.background: Item {
+            Rectangle {
+                anchors.fill: parent
+                color: !!styleData.pressed || styleData.selected ? FlatStyle.disabledColor : "transparent"
+                opacity: !!styleData.pressed || styleData.selected ? 0.15 : 1.0
+            }
+            Rectangle {
+                color: FlatStyle.darkFrameColor
+                width: parent.width
+                height: FlatStyle.onePixel
+                anchors.bottom: parent.bottom
+                visible: styleData.index < control.__menu.items.length - 1 // TODO
+            }
+        }
+    }
+
+    __selectionHandle: SelectionHandleStyle { }
+    __cursorHandle: CursorHandleStyle { }
+}
diff --git a/src/extras/Styles/Flat/CursorHandleStyle.qml b/src/extras/Styles/Flat/CursorHandleStyle.qml
new file mode 100644
index 00000000..4efe5c15
--- /dev/null
+++ b/src/extras/Styles/Flat/CursorHandleStyle.qml
@@ -0,0 +1,45 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls.Styles.Flat 1.0
+
+TextHandle {
+    x: -Math.round(FlatStyle.scaleFactor)
+    type: TextHandle.CursorHandle
+    color: FlatStyle.selectionHandleColor
+    scaleFactor: FlatStyle.scaleFactor
+    visible: styleData.hasSelection
+}
diff --git a/src/extras/Styles/Flat/DelayButtonStyle.qml b/src/extras/Styles/Flat/DelayButtonStyle.qml
new file mode 100644
index 00000000..2e438497
--- /dev/null
+++ b/src/extras/Styles/Flat/DelayButtonStyle.qml
@@ -0,0 +1,291 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras.Styles 1.1 as Base
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.1
+
+Base.DelayButtonStyle {
+    id: delayButtonStyle
+
+    StateGroup {
+        id: privateScope
+
+        property color buttonColor
+        property color borderColor
+        property color textColor
+        property color progressBarColor
+        readonly property real progressBarWidth: Math.round(4 * FlatStyle.scaleFactor)
+        readonly property real progressBarSpacing: Math.round(16 * FlatStyle.scaleFactor)
+        readonly property bool hovered: control.hovered && (!Settings.hasTouchScreen && !Settings.isMobile)
+
+        states: [
+            State {
+                name: "normal"
+                when: control.enabled && !control.activeFocus && !control.pressed && !privateScope.hovered && !control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: "white"
+                    borderColor: FlatStyle.styleColor
+                    textColor: FlatStyle.styleColor
+                    progressBarColor: borderColor
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.disabledFillColor
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "hovered"
+                when: !control.activeFocus && !control.pressed && privateScope.hovered
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.hoveredColor
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "focused"
+                when: control.activeFocus && !control.pressed && !control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: "white"
+                    borderColor: FlatStyle.highlightColor
+                    textColor: borderColor
+                    progressBarColor: borderColor
+                }
+            },
+            State {
+                name: "pressed"
+                when: !control.activeFocus && control.pressed && !control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.pressedColorAlt
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "focusedAndPressed"
+                when: control.activeFocus && control.pressed && !control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.focusedAndPressedColor
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "checked"
+                when: !control.activeFocus && !control.pressed && !privateScope.hovered && control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.pressedColorAlt
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "checkedAndPressed"
+                when: !control.activeFocus && control.pressed && control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.checkedAndPressedColorAlt
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "checkedAndFocused"
+                when: control.activeFocus && !control.pressed && control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.focusedAndPressedColor
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            },
+            State {
+                name: "checkedPressedAndFocused"
+                when: control.activeFocus && control.pressed && control.checked
+
+                PropertyChanges {
+                    target: privateScope
+                    buttonColor: FlatStyle.checkedFocusedAndPressedColor
+                    borderColor: "transparent"
+                    textColor: "white"
+                    progressBarColor: buttonColor
+                }
+            }
+        ]
+    }
+
+    label: Text {
+        text: control.text
+        anchors.fill: parent
+        anchors.margins: privateScope.progressBarWidth + privateScope.progressBarSpacing
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        fontSizeMode: Text.Fit
+        font.family: FlatStyle.fontFamily
+        font.weight: Font.Light
+        renderType: FlatStyle.__renderType
+        color: privateScope.textColor
+        font.pixelSize: TextSingleton.font.pixelSize * 1.5
+    }
+
+    background: Item {
+        implicitWidth: Math.round(160 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(160 * FlatStyle.scaleFactor)
+
+        Item {
+            id: container
+            width: Math.min(parent.width, parent.height)
+            height: width
+            anchors.centerIn: parent
+
+            Rectangle {
+                id: body
+                anchors.fill: parent
+                anchors.margins: privateScope.progressBarWidth + privateScope.progressBarSpacing
+                radius: width / 2
+                color: privateScope.buttonColor
+                border.color: privateScope.borderColor
+                border.width: FlatStyle.onePixel
+            }
+
+            CircularProgressBar {
+                id: progressBar
+                anchors.fill: parent
+                antialiasing: true
+                barWidth: privateScope.progressBarWidth
+                progress: control.progress
+                minimumValueAngle: 0
+                maximumValueAngle: 360
+
+                // TODO: Add gradient property if/when we drop support for building with 5.1.
+                Component.onCompleted: {
+                    clearStops()
+                    addStop(0, privateScope.progressBarColor)
+                    redraw()
+                }
+
+                Connections {
+                    target: privateScope
+                    onProgressBarColorChanged: {
+                        progressBar.clearStops()
+                        progressBar.addStop(0, privateScope.progressBarColor)
+                        progressBar.redraw()
+                    }
+                }
+
+                states: [
+                    State {
+                        name: "normal"
+                        when: control.progress < 1
+
+                        PropertyChanges {
+                            target: progressBar
+                            opacity: 1
+                        }
+                    },
+                    State {
+                        name: "flashing"
+                        when: control.progress === 1
+                    }
+                ]
+
+                transitions: [
+                    Transition {
+                        from: "normal"
+                        to: "flashing"
+
+                        SequentialAnimation {
+                            loops: Animation.Infinite
+
+                            NumberAnimation {
+                                target: progressBar
+                                property: "opacity"
+                                from: 1
+                                to: 0
+                                duration: 500
+                                easing.type: Easing.InOutSine
+                            }
+                            NumberAnimation {
+                                target: progressBar
+                                property: "opacity"
+                                from: 0
+                                to: 1
+                                duration: 500
+                                easing.type: Easing.InOutSine
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    foreground: null
+}
diff --git a/src/extras/Styles/Flat/DialStyle.qml b/src/extras/Styles/Flat/DialStyle.qml
new file mode 100644
index 00000000..3e841d9b
--- /dev/null
+++ b/src/extras/Styles/Flat/DialStyle.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.1
+import QtQuick.Extras.Styles 1.3 as Base
+
+Base.DialStyle {
+    id: dialStyle
+
+    handleInset: handleSize * 1.5 + Math.min(control.width, control.height) * 0.15
+
+    readonly property int handleSize: Math.max(6, Math.round(Math.min(control.width, control.height) * 0.05))
+
+    background: Item {
+        implicitWidth: Math.round(160 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(160 * FlatStyle.scaleFactor)
+
+        CircularProgressBar {
+            id: progressBar
+            anchors.fill: parent
+            progress: control.value
+            minimumValueAngle: -150
+            maximumValueAngle: 150
+            barWidth: handleSize / 2
+            backgroundColor: FlatStyle.grooveColor
+
+            function updateColor() {
+                clearStops();
+                addStop(0, control.enabled ? (control.activeFocus ? FlatStyle.focusedColor : FlatStyle.styleColor) : FlatStyle.mediumFrameColor);
+                redraw();
+            }
+
+            Component.onCompleted: updateColor()
+
+            Connections {
+                target: control
+                onEnabledChanged: progressBar.updateColor()
+                onActiveFocusChanged: progressBar.updateColor()
+            }
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: parent.width * 0.15
+            radius: width / 2
+            color: "white"
+            border.width: control.enabled && control.activeFocus ? FlatStyle.twoPixels : FlatStyle.onePixel
+            border.color: control.enabled ? (control.activeFocus ? FlatStyle.focusedColor : FlatStyle.styleColor) : FlatStyle.mediumFrameColor
+        }
+    }
+
+    handle: Rectangle {
+        color: control.enabled ? (control.activeFocus ? FlatStyle.focusedColor : FlatStyle.styleColor) : FlatStyle.mediumFrameColor
+        width: handleSize
+        height: width
+        radius: height / 2
+    }
+
+    tickmark: null
+}
diff --git a/src/extras/Styles/Flat/Flat.pro b/src/extras/Styles/Flat/Flat.pro
new file mode 100644
index 00000000..6f70c7a8
--- /dev/null
+++ b/src/extras/Styles/Flat/Flat.pro
@@ -0,0 +1,67 @@
+TARGET = qtquickextrasflatplugin
+TARGETPATH = QtQuick/Controls/Styles/Flat
+
+QT += qml quick
+
+HEADERS += \
+    flatstyleplugin.h \
+    qquicktexthandle.h
+SOURCES += \
+    flatstyleplugin.cpp \
+    qquicktexthandle.cpp
+
+FLAT_STYLE += \
+    $$PWD/FlatStyle.qml \
+    $$PWD/ApplicationWindowStyle.qml \
+    $$PWD/BusyIndicatorStyle.qml \
+    $$PWD/ButtonStyle.qml \
+    $$PWD/CalendarStyle.qml \
+    $$PWD/CheckBoxStyle.qml \
+    $$PWD/CheckBoxDrawer.qml \
+    $$PWD/CircularButtonStyle.qml \
+    $$PWD/CircularGaugeStyle.qml \
+    $$PWD/CircularTickmarkLabelStyle.qml \
+    $$PWD/ComboBoxStyle.qml \
+    $$PWD/CursorHandleStyle.qml \
+    $$PWD/DelayButtonStyle.qml \
+    $$PWD/DialStyle.qml \
+    $$PWD/FocusFrameStyle.qml \
+    $$PWD/GaugeStyle.qml \
+    $$PWD/GroupBoxStyle.qml \
+    $$PWD/LeftArrowIcon.qml \
+    $$PWD/MenuBarStyle.qml \
+    $$PWD/MenuStyle.qml \
+    $$PWD/PieMenuStyle.qml \
+    $$PWD/ProgressBarStyle.qml \
+    $$PWD/RadioButtonStyle.qml \
+    $$PWD/ScrollViewStyle.qml \
+    $$PWD/SelectionHandleStyle.qml \
+    $$PWD/SliderStyle.qml \
+    $$PWD/SpinBoxStyle.qml \
+    $$PWD/StatusBarStyle.qml \
+    $$PWD/StatusIndicatorStyle.qml \
+    $$PWD/SwitchStyle.qml \
+    $$PWD/TabViewStyle.qml \
+    $$PWD/TableViewStyle.qml \
+    $$PWD/TextAreaStyle.qml \
+    $$PWD/TextFieldStyle.qml \
+    $$PWD/ToggleButtonStyle.qml \
+    $$PWD/ToolBarStyle.qml \
+    $$PWD/ToolButtonStyle.qml \
+    $$PWD/ToolButtonBackground.qml \
+    $$PWD/ToolButtonIndicator.qml \
+    $$PWD/TumblerStyle.qml
+
+FLAT_STYLE += \
+    $$PWD/images/BusyIndicator_Normal-Large.png \
+    $$PWD/images/BusyIndicator_Normal-Medium.png \
+    $$PWD/images/BusyIndicator_Normal-Small.png \
+    $$PWD/fonts/OpenSans-Light.ttf \
+    $$PWD/fonts/OpenSans-Regular.ttf \
+    $$PWD/fonts/OpenSans-Semibold.ttf \
+    $$PWD/fonts/LICENSE.txt \
+
+RESOURCES += flatstyle.qrc
+
+CONFIG += no_cxx_module
+load(qml_plugin)
diff --git a/src/extras/Styles/Flat/FlatStyle.qml b/src/extras/Styles/Flat/FlatStyle.qml
new file mode 100644
index 00000000..60e03d4e
--- /dev/null
+++ b/src/extras/Styles/Flat/FlatStyle.qml
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+pragma Singleton
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+
+QtObject {
+    readonly property string fontFamily: __openSansRegularLoader.name
+
+    readonly property color backgroundColor: "#ffffff"
+    readonly property color defaultTextColor: "#333333"
+    readonly property color styleColor: "#5caa15"
+    readonly property color strokeColor: "#328930"
+    readonly property color hoveredColor: "#7dbb44"
+    readonly property color focusedColor: "#4da6d8"
+    readonly property color focusedTextColor: "#1288cb"
+    readonly property color focusedAndPressedColor: "#4595c2"
+    readonly property color focusedStrokeColor: "#2f86bb"
+    readonly property color focusedAndPressedStrokeColor: "#266b96"
+    readonly property color checkedFocusedAndPressedColor: "#3a7ca2"
+    readonly property color checkedAndPressedColor: "#4a8811"
+    readonly property color checkedAndPressedColorAlt: "#3c6f0e"
+    readonly property color pressedColor: "#457f10"
+    readonly property color pressedColorAlt: "#539913"
+    readonly property color pressedStrokeColor: "#286e26"
+    readonly property color invalidColor: "#dd0000"
+    readonly property color disabledColor: "#000000"
+    readonly property color disabledFillColor: "#d9d9d9"
+    readonly property color highlightColor: "#4da6d8"
+    readonly property color selectedTextColor: "#ffffff"
+    readonly property color textSelectionColor: "#ceeaff"
+    readonly property color textColor: "#1a1a1a"
+    readonly property color grooveColor: "#14000000"
+    readonly property color lightFrameColor: "#cccccc"
+    readonly property color mediumFrameColor: "#b3b3b3"
+    readonly property color darkFrameColor: "#999999"
+    readonly property color alphaFrameColor: "#33000000"
+    readonly property color selectionHandleColor: "#0668ec"
+    readonly property color flatFrameColor: "#f2f2f2"
+    readonly property real disabledOpacity: 0.3
+    readonly property real defaultFontSize: 13
+
+    // 16 is the implicitHeight of text on a PC monitor. This should scale well
+    // to other devices. For example, if the implicitHeight is 64 on a touch
+    // device, the scale factor will be x4.
+    readonly property real scaleFactor: Math.max(1, TextSingleton.implicitHeight / 16)
+
+    readonly property real onePixel: Math.max(1, Math.round(scaleFactor * 1))
+    readonly property real twoPixels: Math.max(2, Math.round(scaleFactor * 2))
+    readonly property int radius: Math.round(scaleFactor * 3)
+
+    property FontLoader __openSansDemiBoldLoader: FontLoader {
+        source: "fonts/OpenSans-Semibold.ttf"
+    }
+
+    property FontLoader __openSansRegularLoader: FontLoader {
+        source: "fonts/OpenSans-Regular.ttf"
+    }
+
+    property FontLoader __openSansLightLoader: FontLoader {
+        source: "fonts/OpenSans-Light.ttf"
+    }
+
+    readonly property int __renderType: Text.QtRendering
+}
diff --git a/src/extras/Styles/Flat/FocusFrameStyle.qml b/src/extras/Styles/Flat/FocusFrameStyle.qml
new file mode 100644
index 00000000..eb4fa009
--- /dev/null
+++ b/src/extras/Styles/Flat/FocusFrameStyle.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick.Controls.Private 1.0 as Private
+
+Private.FocusFrameStyle { }
diff --git a/src/extras/Styles/Flat/GaugeStyle.qml b/src/extras/Styles/Flat/GaugeStyle.qml
new file mode 100644
index 00000000..d5bf986b
--- /dev/null
+++ b/src/extras/Styles/Flat/GaugeStyle.qml
@@ -0,0 +1,132 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras.Styles 1.3 as Base
+import QtQuick.Extras.Private 1.0
+
+Base.GaugeStyle {
+    id: gaugeStyle
+
+    readonly property int __totalValueBarWidth: Math.round(22 * FlatStyle.scaleFactor + __lineSpacing + __lineWidth)
+    readonly property int __actualValueBarWidth: __totalValueBarWidth - __lineSpacing - __lineWidth
+    readonly property int __lineWidth: FlatStyle.onePixel
+    readonly property int __lineSpacing: Math.round(3 * FlatStyle.scaleFactor)
+
+    background: Item {
+        Rectangle {
+            color: control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+            opacity: control.enabled ? 1 : 0.2
+            width: __lineWidth
+            height: parent.height
+            x: control.tickmarkAlignment === Qt.AlignLeft || control.tickmarkAlignment === Qt.AlignTop ? parent.width - width : 0
+        }
+    }
+
+    valueBar: Item {
+        implicitWidth: __totalValueBarWidth
+
+        Rectangle {
+            color: control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+            opacity: control.enabled ? 1 : 0.2
+            x: control.tickmarkAlignment === Qt.AlignRight || control.tickmarkAlignment === Qt.AlignBottom ? __lineWidth + __lineSpacing : 0
+            implicitWidth: __actualValueBarWidth
+            height: parent.height
+        }
+    }
+
+    foreground: null
+
+    tickmark: Item {
+        id: tickmarkItem
+        implicitWidth: Math.round(12 * FlatStyle.scaleFactor)
+        implicitHeight: FlatStyle.onePixel
+
+        Rectangle {
+            x: control.tickmarkAlignment === Qt.AlignLeft || control.tickmarkAlignment === Qt.AlignTop
+               ? parent.width + __actualValueBarWidth / 2 - width / 2
+               : -__actualValueBarWidth / 2 - width / 2
+            // Length of the tickmark is the same as the spacing between the tickmarks and labels.
+            width: parent.width
+            height: parent.height
+            color: gaugeStyle.valuePosition > styleData.valuePosition + height ? FlatStyle.selectedTextColor : (control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor)
+            opacity: gaugeStyle.valuePosition > styleData.valuePosition + height ? 0.5 : (control.enabled ? 1 : 0.2)
+            visible: (styleData.index === 0 && gaugeStyle.valuePosition === 0) ||
+                (styleData.index !== 0 && (gaugeStyle.valuePosition <= styleData.valuePosition || gaugeStyle.valuePosition > styleData.valuePosition + height))
+        }
+    }
+
+    minorTickmark: Item {
+        implicitWidth: Math.round(6 * FlatStyle.scaleFactor)
+        implicitHeight: FlatStyle.onePixel
+
+        Rectangle {
+            x: control.tickmarkAlignment === Qt.AlignLeft || control.tickmarkAlignment === Qt.AlignTop
+               ? parent.width + __actualValueBarWidth / 2 - width / 2
+               : -__actualValueBarWidth / 2 - width / 2
+            width: parent.width
+            height: parent.height
+            color: control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+            opacity: control.enabled ? 1 : 0.2
+            visible: gaugeStyle.valuePosition <= styleData.valuePosition
+        }
+    }
+
+    tickmarkLabel: Item {
+        implicitWidth: textLabel.implicitWidth
+        implicitHeight: textLabel.implicitHeight
+
+        Label {
+            id: textLabel
+            text: control.formatValue(styleData.value)
+            font: control.font
+            color: control.enabled ? FlatStyle.defaultTextColor : FlatStyle.disabledColor
+            opacity: control.enabled ? 1 : FlatStyle.disabledOpacity
+            renderType: FlatStyle.__renderType
+            Connections {
+                target: control
+                // Setting an anchor to undefined leaves it in the position it was in last.
+                // We don't want that, as we want the label's y pos to be at zero when it's not anchored.
+                // Using a binding here whose when property is true when control.orientation === Qt.Horizontal
+                // doesn't work.
+                onOrientationChanged: textLabel.y = 0
+            }
+            anchors.baseline: control.orientation === Qt.Vertical ? parent.verticalCenter : undefined
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/GroupBoxStyle.qml b/src/extras/Styles/Flat/GroupBoxStyle.qml
new file mode 100644
index 00000000..65f8cf19
--- /dev/null
+++ b/src/extras/Styles/Flat/GroupBoxStyle.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls.Private 1.0 as Private
+import QtQuick.Controls.Styles.Flat 1.0
+
+Private.GroupBoxStyle {
+    id: root
+
+    readonly property int spacing: Math.round(8 * FlatStyle.scaleFactor)
+
+    padding {
+        left: spacing
+        right: spacing
+        bottom: spacing
+    }
+
+    textColor: !control.enabled ? FlatStyle.disabledColor : check.activeFocus ? FlatStyle.focusedTextColor : FlatStyle.defaultTextColor
+
+    panel: Item {
+        anchors.fill: parent
+
+        Rectangle {
+            id: background
+            radius: FlatStyle.radius
+            border.width: control.flat ? 0 : FlatStyle.onePixel
+            border.color: FlatStyle.lightFrameColor
+            color: control.flat ? FlatStyle.flatFrameColor : "transparent"
+            anchors.fill: parent
+            anchors.topMargin: Math.max(indicator.height, label.height) + root.spacing / 2
+        }
+
+        // TODO:
+        Binding {
+            target: root
+            property: "padding.top"
+            value: background.anchors.topMargin + root.spacing
+        }
+
+        CheckBoxDrawer {
+            id: indicator
+            visible: control.checkable
+            controlEnabled: control.enabled
+            controlActiveFocus: check.activeFocus
+            controlPressed: check.pressed
+            controlChecked: control.checked
+            anchors.left: parent.left
+            // compensate padding around check indicator
+            anchors.leftMargin: Math.round(-3 * FlatStyle.scaleFactor)
+        }
+
+        Text {
+            id: label
+            anchors.left: control.checkable ? indicator.right : parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: indicator.verticalCenter
+            anchors.leftMargin: control.checkable ? root.spacing / 2 : 0
+            text: control.title
+            color: root.textColor
+            renderType: FlatStyle.__renderType
+            elide: Text.ElideRight
+            font.family: FlatStyle.fontFamily
+            font.pixelSize: 16 * FlatStyle.scaleFactor
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/LeftArrowIcon.qml b/src/extras/Styles/Flat/LeftArrowIcon.qml
new file mode 100644
index 00000000..de64f3c9
--- /dev/null
+++ b/src/extras/Styles/Flat/LeftArrowIcon.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.3
+
+Canvas {
+    implicitWidth: 32
+    implicitHeight: 32
+
+    property color color: "white"
+
+    onColorChanged: requestPaint()
+
+    onPaint: {
+        var ctx = getContext("2d");
+        ctx.reset();
+
+        ctx.beginPath();
+        ctx.moveTo(0.66321495 * width, 0.06548707 * height);
+        ctx.lineTo(0.2191097 * width, 0.50959232 * height);
+        ctx.lineTo(0.66628301 * width, 0.95676556 * height);
+        ctx.lineTo(0.77673409 * width, 0.84631453 * height);
+        ctx.lineTo(0.44001181 * width, 0.50959232 * height);
+        ctx.lineTo(0.77366599 * width, 0.1759381 * height);
+        ctx.fillStyle = color;
+        ctx.fill();
+    }
+}
diff --git a/src/extras/Styles/Flat/MenuBarStyle.qml b/src/extras/Styles/Flat/MenuBarStyle.qml
new file mode 100644
index 00000000..4be92cbc
--- /dev/null
+++ b/src/extras/Styles/Flat/MenuBarStyle.qml
@@ -0,0 +1,42 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick.Controls.Styles 1.2 as Base
+
+Base.MenuBarStyle {
+    __isNative: false
+    background: null
+    itemDelegate: null
+}
diff --git a/src/extras/Styles/Flat/MenuStyle.qml b/src/extras/Styles/Flat/MenuStyle.qml
new file mode 100644
index 00000000..54a7e33f
--- /dev/null
+++ b/src/extras/Styles/Flat/MenuStyle.qml
@@ -0,0 +1,95 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+
+Base.MenuStyle {
+    id: style
+    font.family: FlatStyle.fontFamily
+    __leftLabelMargin: Math.round(30 * FlatStyle.scaleFactor)
+
+    frame: Rectangle {
+        border.color: FlatStyle.darkFrameColor
+        border.width: FlatStyle.onePixel
+    }
+
+    itemDelegate.background: Rectangle {
+        color: !!styleData.pressed || styleData.selected ? FlatStyle.disabledColor : "transparent"
+        opacity: !!styleData.pressed || styleData.selected ? 0.15 : 1.0
+    }
+
+    itemDelegate.label: Text {
+        text: formatMnemonic(styleData.text, styleData.underlineMnemonic)
+        renderType: FlatStyle.__renderType
+        color: FlatStyle.defaultTextColor
+        font.family: FlatStyle.fontFamily
+        font.pixelSize: FlatStyle.defaultFontSize
+        verticalAlignment: Text.AlignVCenter
+        height: Math.round(26 * FlatStyle.scaleFactor)
+    }
+
+    itemDelegate.shortcut: Text {
+        text: styleData.shortcut
+        renderType: FlatStyle.__renderType
+        color: FlatStyle.defaultTextColor
+        font.family: FlatStyle.fontFamily
+        font.pixelSize: FlatStyle.defaultFontSize
+    }
+
+    itemDelegate.checkmarkIndicator: CheckBoxDrawer {
+        visible: styleData.checked
+        controlEnabled: styleData.enabled
+        controlChecked: styleData.checked
+        backgroundVisible: false
+        x: -4 // ### FIXME: compensate hardcoded "x: 4" in MenuStyle
+        y: FlatStyle.onePixel
+    }
+
+    itemDelegate.submenuIndicator: LeftArrowIcon {
+        scale: -1
+        color: "#000000"
+        width: Math.round(10 * FlatStyle.scaleFactor)
+        height: Math.round(10 * FlatStyle.scaleFactor)
+        baselineOffset: Math.round(7 * FlatStyle.scaleFactor)
+    }
+
+    separator: Rectangle {
+        color: FlatStyle.lightFrameColor
+        width: parent.width
+        implicitHeight: FlatStyle.onePixel
+    }
+}
diff --git a/src/extras/Styles/Flat/PieMenuStyle.qml b/src/extras/Styles/Flat/PieMenuStyle.qml
new file mode 100644
index 00000000..9b314610
--- /dev/null
+++ b/src/extras/Styles/Flat/PieMenuStyle.qml
@@ -0,0 +1,169 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.3
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras.Styles 1.3 as Base
+import QtQuick.Extras.Private 1.0
+
+Base.PieMenuStyle {
+    id: pieMenuStyle
+    shadowRadius: 0
+    shadowSpread: 0
+    shadowColor: "transparent"
+    backgroundColor: FlatStyle.styleColor
+    selectionColor: FlatStyle.styleColor
+    startAngle: -78
+    endAngle: 78
+    cancelRadius: radius * 0.4352
+
+    __implicitWidth: Math.round(85 * 2 * FlatStyle.scaleFactor)
+    __implicitHeight: __implicitWidth
+
+    title: null
+
+    menuItem: Item {
+        readonly property var __styleData: styleData
+
+        Canvas {
+            id: actionCanvas
+            antialiasing: true
+            anchors.fill: parent
+            anchors.margins: -1
+
+            Connections {
+                target: pieMenuStyle
+                onStartAngleChanged: actionCanvas.requestPaint()
+                onEndAngleChanged: actionCanvas.requestPaint()
+            }
+
+            Connections {
+                target: __styleData
+                onPressedChanged: actionCanvas.requestPaint()
+            }
+
+            readonly property bool stroke: !__styleData.hovered
+            readonly property real spacingThickness: Math.max(4 * FlatStyle.scaleFactor, radius * 0.05)
+            // It's actually one, but stroking always goes 50/50 on the inside/outside, so this is
+            // an easy way of making it one pixel without having to mess around with more drawing code.
+            // This will work as long as the fill and stroke colors are both completely opaque.
+            readonly property real lineWidth: FlatStyle.twoPixels
+            // The following properties are all for either side of a radius/circumference, so the total is actually double.
+            readonly property real outerMenuItemSpacing: Math.asin(spacingThickness / (2 * radius))
+            readonly property real innerMenuItemSpacing: Math.asin(spacingThickness / (2 * cancelRadius))
+            // The total angle to subtract from the circumference of the inner radius arc
+            readonly property real innerRadiusStrokeCircumferenceAdjustment: Math.asin(lineWidth / (2 * cancelRadius))
+            readonly property real outerRadiusStrokeCircumferenceAdjustment: Math.asin(lineWidth / (2 * radius))
+
+            onStrokeChanged: actionCanvas.requestPaint()
+
+            function drawRingSection(ctx, x, y, section, r, ringWidth, ringColor) {
+                if (stroke) {
+                    ctx.strokeStyle = ringColor;
+                    ctx.fillStyle = "white";
+                } else {
+                    ctx.fillStyle = ringColor;
+                }
+
+                ctx.beginPath();
+
+                if (stroke)
+                    ctx.lineWidth = lineWidth;
+                var start = control.__protectedScope.sectionStartAngle(section);
+                var end = control.__protectedScope.sectionEndAngle(section);
+                // Adjust the radius to account for stroke being 50% inside/50% outside.
+                var radius = !stroke ? r : r - ctx.lineWidth / 2;
+                // Add spacing between the items, while still accounting for reversed menus.
+                if (start > end) {
+                    start -= outerMenuItemSpacing;
+                    end += outerMenuItemSpacing;
+                    if (stroke) {
+                        start -= outerRadiusStrokeCircumferenceAdjustment;
+                        end += outerRadiusStrokeCircumferenceAdjustment;
+                    }
+                } else {
+                    start += outerMenuItemSpacing;
+                    end -= outerMenuItemSpacing;
+                    if (stroke) {
+                        start += outerRadiusStrokeCircumferenceAdjustment;
+                        end -= outerRadiusStrokeCircumferenceAdjustment;
+                    }
+                }
+
+                ctx.arc(x, y, radius, start, end, start > end);
+
+                start = control.__protectedScope.sectionStartAngle(section);
+                end = control.__protectedScope.sectionEndAngle(section);
+                radius = !stroke ? ringWidth : ringWidth + ctx.lineWidth / 2;
+                if (start > end) {
+                    start -= innerMenuItemSpacing;
+                    end += innerMenuItemSpacing;
+                    if (stroke) {
+                        start -= innerRadiusStrokeCircumferenceAdjustment;
+                        end += innerRadiusStrokeCircumferenceAdjustment;
+                    }
+                } else {
+                    start += innerMenuItemSpacing;
+                    end -= innerMenuItemSpacing;
+                    if (stroke) {
+                        start += innerRadiusStrokeCircumferenceAdjustment;
+                        end -= innerRadiusStrokeCircumferenceAdjustment;
+                    }
+                }
+
+                ctx.arc(x, y, radius, end, start, start <= end);
+                ctx.closePath();
+
+                if (stroke)
+                    ctx.stroke();
+
+                ctx.fill();
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+                drawRingSection(ctx, width / 2, height / 2, styleData.index, radius, cancelRadius,
+                    __styleData.pressed ? FlatStyle.pressedColorAlt : (stroke ? backgroundColor : selectionColor));
+            }
+        }
+
+        PieMenuIcon {
+            control: pieMenuStyle.control
+            styleData: __styleData
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/ProgressBarStyle.qml b/src/extras/Styles/Flat/ProgressBarStyle.qml
new file mode 100644
index 00000000..f0b5bdd4
--- /dev/null
+++ b/src/extras/Styles/Flat/ProgressBarStyle.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Private.CppUtils 1.1
+
+Base.ProgressBarStyle {
+    background: Item {
+        implicitWidth: Math.round(100 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(16 * FlatStyle.scaleFactor)
+
+        FlatProgressBar {
+            enabled: control.enabled
+            width: Math.round(parent.width)
+            height: Math.round(parent.height)
+            indeterminate: control.indeterminate
+            progress: (control.value - control.minimumValue) / (control.maximumValue - control.minimumValue)
+        }
+    }
+
+    progress: null
+}
diff --git a/src/extras/Styles/Flat/RadioButtonStyle.qml b/src/extras/Styles/Flat/RadioButtonStyle.qml
new file mode 100644
index 00000000..779e8636
--- /dev/null
+++ b/src/extras/Styles/Flat/RadioButtonStyle.qml
@@ -0,0 +1,87 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+
+Base.RadioButtonStyle {
+    spacing: Math.round(8 * FlatStyle.scaleFactor)
+
+    indicator: Item {
+        implicitWidth: Math.round(26 * FlatStyle.scaleFactor)
+        implicitHeight: implicitWidth
+
+        Rectangle {
+            id: outer
+            anchors.centerIn: parent
+            width: Math.round(20 * FlatStyle.scaleFactor)
+            height: width
+            radius: width / 2
+            color: control.enabled ? (control.pressed ? FlatStyle.lightFrameColor : FlatStyle.backgroundColor) : FlatStyle.disabledFillColor
+            border.color: !control.enabled ? FlatStyle.disabledFillColor :
+                (control.pressed ? FlatStyle.darkFrameColor :
+                (control.activeFocus ? FlatStyle.focusedColor :
+                (!Settings.hasTouchScreen && control.hovered ? FlatStyle.styleColor : FlatStyle.lightFrameColor)))
+            border.width: control.activeFocus && !control.pressed ? FlatStyle.twoPixels : FlatStyle.onePixel
+        }
+
+        Rectangle {
+            id: inner
+            anchors.centerIn: parent
+            implicitWidth: Math.round(FlatStyle.scaleFactor * 8)
+            width: implicitWidth + (outer.width % 2 + implicitWidth % 2) % 2
+            height: width
+            radius: width / 2
+            visible: control.checked
+            color: !control.enabled ? FlatStyle.mediumFrameColor :
+                (control.activeFocus ? FlatStyle.focusedColor :
+                (control.pressed ? FlatStyle.checkedAndPressedColor : FlatStyle.styleColor))
+        }
+    }
+
+    label: Text {
+        text: control.text
+        font.family: FlatStyle.fontFamily
+        renderType: FlatStyle.__renderType
+        anchors.verticalCenter: parent.verticalCenter
+        opacity: enabled ? 1.0 : FlatStyle.disabledOpacity
+        color: !enabled ? FlatStyle.disabledColor :
+               control.activeFocus ? FlatStyle.focusedTextColor : FlatStyle.defaultTextColor
+    }
+}
diff --git a/src/extras/Styles/Flat/ScrollViewStyle.qml b/src/extras/Styles/Flat/ScrollViewStyle.qml
new file mode 100644
index 00000000..7e94b7db
--- /dev/null
+++ b/src/extras/Styles/Flat/ScrollViewStyle.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.ScrollViewStyle {
+    readonly property int barWidth: 2 * Math.round(FlatStyle.scaleFactor)
+    readonly property int frameWidth: control.frameVisible ? Math.max(1, Math.round(FlatStyle.scaleFactor)) : 0
+    padding {
+        top: frameWidth
+        left: frameWidth
+        right: frameWidth
+        bottom: frameWidth
+    }
+    corner: null
+    transientScrollBars: true
+    frame: Rectangle {
+        color: control["backgroundVisible"] ? FlatStyle.backgroundColor : "transparent"
+        border.color: FlatStyle.mediumFrameColor
+        border.width: frameWidth
+        visible: control.frameVisible
+    }
+    scrollBarBackground: Item {
+        implicitWidth: 2 * barWidth
+        implicitHeight: 2 * barWidth
+    }
+    handle: Item  {
+        implicitWidth: barWidth
+        implicitHeight: barWidth
+        Rectangle {
+            color: FlatStyle.darkFrameColor
+            radius: barWidth / 2
+            anchors.fill: parent
+            anchors.topMargin: styleData.horizontal ? 0 : barWidth
+            anchors.leftMargin: styleData.horizontal ? barWidth : 0
+            anchors.rightMargin: styleData.horizontal ? barWidth : 0
+            anchors.bottomMargin: styleData.horizontal ? 0 : barWidth
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/SelectionHandleStyle.qml b/src/extras/Styles/Flat/SelectionHandleStyle.qml
new file mode 100644
index 00000000..954e4f8b
--- /dev/null
+++ b/src/extras/Styles/Flat/SelectionHandleStyle.qml
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls.Styles.Flat 1.0
+
+TextHandle {
+    x: -width
+    type: TextHandle.SelectionHandle
+    color: FlatStyle.selectionHandleColor
+    scaleFactor: FlatStyle.scaleFactor
+}
diff --git a/src/extras/Styles/Flat/SliderStyle.qml b/src/extras/Styles/Flat/SliderStyle.qml
new file mode 100644
index 00000000..191612c5
--- /dev/null
+++ b/src/extras/Styles/Flat/SliderStyle.qml
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Private 1.0
+
+Base.SliderStyle {
+    handle: Item {
+        width: Math.round(26 * FlatStyle.scaleFactor)
+        height: width
+
+        readonly property bool focusedOnly: control.activeFocus && !control.pressed
+
+        Rectangle {
+            id: handleBorder
+            width: parent.width
+            height: width
+            radius: width / 2
+            color: focusedOnly ? FlatStyle.focusedColor :
+                   control.hovered && !control.pressed ? FlatStyle.styleColor : "#000000"
+            opacity: (control.activeFocus || control.hovered) && !control.pressed ? 1.0 : 0.2
+        }
+
+        Rectangle {
+            id: handleBody
+            readonly property real borderThickness: focusedOnly ? FlatStyle.twoPixels : FlatStyle.onePixel
+            x: borderThickness
+            y: borderThickness
+            width: parent.width - 2 * borderThickness
+            height: width
+            border.color: "white"
+            border.width: (width - parent.width * 10 / 26) / 2
+            radius: width / 2
+            color: !control.enabled ? FlatStyle.disabledFillColor :
+                   focusedOnly ? FlatStyle.focusedColor : FlatStyle.styleColor
+        }
+
+        Rectangle {
+            id: pressedDarkness
+            anchors.fill: parent
+            radius: width / 2
+            color: "#000000"
+            opacity: 0.2
+            visible: control.pressed
+        }
+    }
+
+    groove: Item {
+        implicitWidth: Math.round(100 * FlatStyle.scaleFactor)
+        height: Math.round(4 * FlatStyle.scaleFactor)
+        anchors.verticalCenter: parent.verticalCenter
+
+        Rectangle {
+            id: emptyGroove
+            width: parent.width
+            height: parent.height
+            radius: Math.round(2 * FlatStyle.scaleFactor)
+            color: "#000000"
+            opacity: control.enabled ? 0.2 : 0.12
+        }
+
+        Rectangle {
+            id: filledGroove
+            color: control.enabled ? FlatStyle.styleColor : FlatStyle.mediumFrameColor
+            width: styleData.handlePosition
+            height: parent.height
+            radius: emptyGroove.radius
+        }
+    }
+
+    // TODO: tickmarks
+}
diff --git a/src/extras/Styles/Flat/SpinBoxStyle.qml b/src/extras/Styles/Flat/SpinBoxStyle.qml
new file mode 100644
index 00000000..1b182da5
--- /dev/null
+++ b/src/extras/Styles/Flat/SpinBoxStyle.qml
@@ -0,0 +1,153 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.SpinBoxStyle {
+    padding { top: 0; left: 0; right: 0; bottom: 0 }
+    renderType: FlatStyle.__renderType
+
+    panel: Item {
+        property int horizontalAlignment: Qt.AlignHCenter
+        property int verticalAlignment: Qt.AlignVCenter
+
+        property color foregroundColor: !control.enabled ? FlatStyle.mediumFrameColor : FlatStyle.defaultTextColor
+        property color selectionColor: FlatStyle.highlightColor
+        property color selectedTextColor: FlatStyle.selectedTextColor
+        property var margins: QtObject {
+            readonly property real top: 2 * FlatStyle.scaleFactor
+            readonly property real left: decrement.width
+            readonly property real right: increment.width
+            readonly property real bottom: 2 * FlatStyle.scaleFactor
+        }
+
+        property rect upRect: Qt.rect(increment.x, increment.y, increment.width, increment.height)
+        property rect downRect: Qt.rect(decrement.x, decrement.y, decrement.width, decrement.height)
+
+        property font font
+        font.family: FlatStyle.fontFamily
+
+        implicitWidth: Math.round(100 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(26 * FlatStyle.scaleFactor)
+
+        Item {
+            id: decrement
+            clip: true
+            width: Math.round(28 * FlatStyle.scaleFactor)
+            height: parent.height
+
+            Rectangle {
+                width: parent.width + FlatStyle.radius
+                height: parent.height
+                color: !control.enabled ? FlatStyle.lightFrameColor :
+                        control.activeFocus && styleData.downPressed ? FlatStyle.checkedFocusedAndPressedColor :
+                        control.activeFocus ? FlatStyle.highlightColor :
+                        styleData.downPressed ? FlatStyle.checkedAndPressedColor : FlatStyle.styleColor
+                radius: FlatStyle.radius
+            }
+
+            Rectangle {
+                color: FlatStyle.backgroundColor
+                width: Math.round(10 * FlatStyle.scaleFactor)
+                height: Math.round(2 * FlatStyle.scaleFactor)
+                anchors.horizontalCenter: parent.left
+                anchors.horizontalCenterOffset: Math.round(14 * FlatStyle.scaleFactor)
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Item {
+            id: increment
+            clip: true
+            width: Math.round(28 * FlatStyle.scaleFactor)
+            height: parent.height
+            anchors.right: parent.right
+
+            Rectangle {
+                width: parent.width + FlatStyle.radius
+                height: parent.height
+                anchors.right: parent.right
+                color: !control.enabled ? FlatStyle.lightFrameColor :
+                        control.activeFocus && styleData.upPressed ? FlatStyle.checkedFocusedAndPressedColor :
+                        control.activeFocus ? FlatStyle.highlightColor :
+                        styleData.upPressed ? FlatStyle.checkedAndPressedColor : FlatStyle.styleColor
+                radius: FlatStyle.radius
+            }
+
+            Rectangle {
+                color: FlatStyle.backgroundColor
+                width: Math.round(10 * FlatStyle.scaleFactor)
+                height: Math.round(2 * FlatStyle.scaleFactor)
+                anchors.horizontalCenter: parent.right
+                anchors.horizontalCenterOffset: Math.round(-14 * FlatStyle.scaleFactor)
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Rectangle {
+                color: FlatStyle.backgroundColor
+                width: Math.round(2 * FlatStyle.scaleFactor)
+                height: Math.round(10 * FlatStyle.scaleFactor)
+                anchors.horizontalCenter: parent.right
+                anchors.horizontalCenterOffset: Math.round(-14 * FlatStyle.scaleFactor)
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Rectangle {
+            id: frame
+            anchors.fill: parent
+            anchors.leftMargin: decrement.width
+            anchors.rightMargin: increment.width
+            color: !control.enabled ? "transparent" :
+                    control.activeFocus ? FlatStyle.highlightColor : FlatStyle.mediumFrameColor
+
+            Rectangle {
+                id: field
+                anchors.fill: parent
+                anchors.topMargin: Math.round((!control.enabled ? 0 : control.activeFocus ? 2 : 1) * FlatStyle.scaleFactor)
+                anchors.bottomMargin: Math.round((!control.enabled ? 0 : control.activeFocus ? 2 : 1) * FlatStyle.scaleFactor)
+                color: !control.enabled ? FlatStyle.disabledColor : FlatStyle.backgroundColor
+                opacity: !control.enabled ? 0.1 : 1.0
+            }
+        }
+    }
+
+    __selectionHandle: null
+    __cursorHandle: null
+}
diff --git a/src/extras/Styles/Flat/StatusBarStyle.qml b/src/extras/Styles/Flat/StatusBarStyle.qml
new file mode 100644
index 00000000..e2bc77ff
--- /dev/null
+++ b/src/extras/Styles/Flat/StatusBarStyle.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick.Controls.Styles 1.2 as Base
+
+Base.StatusBarStyle { }
diff --git a/src/extras/Styles/Flat/StatusIndicatorStyle.qml b/src/extras/Styles/Flat/StatusIndicatorStyle.qml
new file mode 100644
index 00000000..fb527665
--- /dev/null
+++ b/src/extras/Styles/Flat/StatusIndicatorStyle.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras.Styles 1.3 as Base
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Private.CppUtils 1.0
+
+Base.StatusIndicatorStyle {
+    color: FlatStyle.focusedTextColor
+
+    indicator: Item {
+        implicitWidth: Math.max(12, MathUtils.roundEven(12 * FlatStyle.scaleFactor))
+        implicitHeight: MathUtils.roundEven(implicitWidth / 2)
+
+        Rectangle {
+            // Math.max because the control could be manually resized to be too small.
+            width: Math.max(12, MathUtils.roundEven(parent.width))
+            height: MathUtils.roundEven(width / 2)
+            radius: Math.max(2, height * 0.2)
+            anchors.centerIn: parent
+            color: !control.enabled || !control.active ? FlatStyle.disabledColor : control.color
+            opacity: control.enabled ? (control.active ? 1 : 0.3) : (control.active ? FlatStyle.disabledOpacity : 0.15)
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/SwitchStyle.qml b/src/extras/Styles/Flat/SwitchStyle.qml
new file mode 100644
index 00000000..3918c474
--- /dev/null
+++ b/src/extras/Styles/Flat/SwitchStyle.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+
+Base.SwitchStyle {
+    readonly property int __knobHeight: Math.round(26 * FlatStyle.scaleFactor)
+
+    groove: Item {
+        implicitWidth: Math.round(46 * FlatStyle.scaleFactor)
+        implicitHeight: __knobHeight
+        Rectangle {
+            radius: height / 2
+            y: 1 * FlatStyle.scaleFactor
+            implicitWidth: parent.implicitWidth
+            implicitHeight: Math.round(24 * FlatStyle.scaleFactor)
+            border.width: (control.activeFocus ? FlatStyle.twoPixels : FlatStyle.onePixel)
+            border.color: control.activeFocus ? FlatStyle.highlightColor : control.enabled && control.checked ? FlatStyle.styleColor : FlatStyle.mediumFrameColor
+            color: !control.checked ? "transparent" :
+                   !control.enabled ? FlatStyle.disabledFillColor :
+                   control.activeFocus ? FlatStyle.highlightColor : FlatStyle.styleColor
+        }
+    }
+
+    handle: Item {
+        implicitWidth: __knobHeight
+        implicitHeight: __knobHeight
+        Rectangle {
+            id: knobShadow
+            x: 1 * FlatStyle.scaleFactor
+            y: 1 * FlatStyle.scaleFactor
+            radius: height / 2
+            width: parent.width
+            height: parent.height
+            color: "#000000"
+            opacity: 0.1
+        }
+        Rectangle {
+            id: knob
+            radius: height / 2
+            width: parent.width
+            height: parent.height
+            border.width: (control.activeFocus ? FlatStyle.twoPixels : FlatStyle.onePixel)
+            border.color: !control.enabled ? FlatStyle.mediumFrameColor :
+                          control.pressed && control.activeFocus ? FlatStyle.focusedAndPressedStrokeColor :
+                          control.activeFocus ? FlatStyle.focusedStrokeColor :
+                          control.checked ? FlatStyle.strokeColor : FlatStyle.darkFrameColor
+            color: !control.enabled ? FlatStyle.disabledFillColor : control.pressed ? FlatStyle.lightFrameColor : FlatStyle.backgroundColor
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/TabViewStyle.qml b/src/extras/Styles/Flat/TabViewStyle.qml
new file mode 100644
index 00000000..c680f762
--- /dev/null
+++ b/src/extras/Styles/Flat/TabViewStyle.qml
@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.TabViewStyle {
+    readonly property int frameWidth: Math.round(FlatStyle.scaleFactor)
+
+    tabOverlap: -frameWidth
+    frameOverlap: frameWidth
+
+    frame: Rectangle {
+        visible: control.frameVisible
+        color: FlatStyle.backgroundColor
+        border.color: FlatStyle.lightFrameColor
+    }
+
+    tab: Item {
+        readonly property int totalWidth: styleData.availableWidth + tabOverlap * (control.count - 1)
+        readonly property int tabWidth: Math.max(1, totalWidth / Math.max(1, control.count))
+        readonly property int remainder: (styleData.index == control.count - 1 && tabWidth > 0) ? totalWidth % tabWidth : 0
+
+        implicitWidth: tabWidth + remainder
+        implicitHeight: Math.round(40 * FlatStyle.scaleFactor)
+
+        Rectangle {
+            anchors.fill: parent
+            visible: styleData.pressed || !styleData.selected || styleData.activeFocus
+            opacity: styleData.enabled ? 1.0 : FlatStyle.disabledOpacity
+            color: styleData.activeFocus ? (styleData.pressed ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.focusedColor) :
+                    styleData.pressed ? FlatStyle.pressedColor :
+                    styleData.selected ? FlatStyle.backgroundColor :
+                   !styleData.enabled ? FlatStyle.disabledColor : FlatStyle.styleColor
+        }
+
+        Text {
+            text: styleData.title
+            anchors.fill: parent
+            anchors.leftMargin: Math.round(5 * FlatStyle.scaleFactor)
+            anchors.rightMargin: anchors.leftMargin
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.family: FlatStyle.fontFamily
+            renderType: FlatStyle.__renderType
+            elide: Text.ElideRight
+            opacity: !styleData.enabled && styleData.selected ? FlatStyle.disabledOpacity : 1.0
+            color: !styleData.enabled && styleData.selected ? FlatStyle.disabledColor :
+                    styleData.selected && styleData.enabled && !styleData.activeFocus && !styleData.pressed ? FlatStyle.styleColor : FlatStyle.selectedTextColor
+        }
+    }
+
+    tabBar: Rectangle {
+        color: FlatStyle.backgroundColor
+        border.color: control.frameVisible ? FlatStyle.lightFrameColor : "transparent"
+        anchors.fill: parent
+        Rectangle {
+            height: frameWidth
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.margins: frameWidth
+            y: control.tabPosition == Qt.TopEdge ? parent.height - height : 0
+            color: FlatStyle.backgroundColor
+            visible: control.frameVisible
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/TableViewStyle.qml b/src/extras/Styles/Flat/TableViewStyle.qml
new file mode 100644
index 00000000..c64628e8
--- /dev/null
+++ b/src/extras/Styles/Flat/TableViewStyle.qml
@@ -0,0 +1,163 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.4
+import QtQuick.Controls 1.3
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+
+Base.ScrollViewStyle {
+    readonly property TableView control: __control
+
+    readonly property color backgroundColor: "transparent"
+    readonly property color alternateBackgroundColor: FlatStyle.disabledColor
+
+    readonly property color textColor: FlatStyle.defaultTextColor
+    readonly property color highlightedTextColor: FlatStyle.styleColor
+
+    transientScrollBars: true
+
+    readonly property bool activateItemOnSingleClick: false
+
+    readonly property real __alternateBackgroundOpacity: 0.07
+    readonly property real __selectedBackgroundOpacity: 0.2
+    readonly property real __focusedBackgroundOpacity: 0.4
+    readonly property real __columnMargin: Math.round(20 * FlatStyle.scaleFactor)
+
+    frame: Item {
+        visible: control.frameVisible && control.alternatingRowColors
+        Rectangle {
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: 1
+            color: FlatStyle.mediumFrameColor
+        }
+    }
+
+    property Component headerDelegate: Rectangle {
+        height: Math.round(56 * FlatStyle.scaleFactor)
+        color: control.enabled ? FlatStyle.styleColor : FlatStyle.mediumFrameColor
+        Text {
+            anchors.fill: parent
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: styleData.textAlignment
+            anchors.leftMargin: __columnMargin
+            text: styleData.value
+            elide: Text.ElideRight
+            color: FlatStyle.selectedTextColor
+            font {
+                family: FlatStyle.fontFamily
+                pixelSize: FlatStyle.defaultFontSize * FlatStyle.scaleFactor
+            }
+
+            renderType: FlatStyle.__renderType
+        }
+
+        Rectangle {
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            height: Math.round(36 * FlatStyle.scaleFactor)
+            width: FlatStyle.onePixel
+            color: "white"
+            opacity: styleData.column !== control.columnCount - 1 ? 0.4 : 0
+        }
+    }
+
+    property Component rowDelegate: Item {
+        height: 46 * FlatStyle.scaleFactor
+        readonly property color selectedColor: styleData.hasActiveFocus ?
+                                               FlatStyle.focusedColor : FlatStyle.styleColor
+        readonly property bool selected: control.enabled && (styleData.hasActiveFocus || styleData.selected)
+
+        Rectangle {
+            id: bg
+            color: selected ? selectedColor :
+                   styleData.alternate ? alternateBackgroundColor : backgroundColor
+            opacity: !control.enabled ? (styleData.alternate ? __alternateBackgroundOpacity : 1.0) :
+                     styleData.hasActiveFocus ? __focusedBackgroundOpacity :
+                     styleData.selected ? (styleData.alternate ? __selectedBackgroundOpacity : __alternateBackgroundOpacity) :
+                     (styleData.alternate ? __alternateBackgroundOpacity : 1.0)
+            anchors.fill: parent
+        }
+
+        Rectangle {
+            // Bottom separator
+            visible: !control.alternatingRowColors
+            color: selected ? selectedColor : FlatStyle.mediumFrameColor
+            height: Math.round(1 * FlatStyle.scaleFactor)
+            width: parent.width
+            anchors.bottom: parent.bottom
+        }
+
+        Rectangle {
+            // Top separator. Only visible if the current row is selected. It hides
+            // the previous row's bottom separator when this row is selected or focused
+            visible: selected && !control.alternatingRowColors
+            color: selectedColor
+            height: Math.round(1 * FlatStyle.scaleFactor)
+            width: parent.width
+            anchors.bottom: parent.top
+        }
+    }
+
+    property Component itemDelegate: Item {
+        height: Math.round(46 * FlatStyle.scaleFactor)
+        implicitWidth: label.implicitWidth + __columnMargin
+
+        Text {
+            id: label
+            text: styleData.value !== undefined ? styleData.value : ""
+            elide: styleData.elideMode
+            color: !control.enabled ? FlatStyle.disabledColor :
+                   styleData.hasActiveFocus ? FlatStyle.focusedTextColor :
+                   styleData.textColor
+            opacity: !control.enabled ? FlatStyle.disabledOpacity : 1.0
+            font {
+                family: FlatStyle.fontFamily
+                pixelSize: FlatStyle.defaultFontSize * FlatStyle.scaleFactor
+                weight: control.enabled && (styleData.selected || styleData.hasActiveFocus) ?
+                        Font.DemiBold : Font.Normal
+            }
+            renderType: FlatStyle.__renderType
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: __columnMargin
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+}
diff --git a/src/extras/Styles/Flat/TextAreaStyle.qml b/src/extras/Styles/Flat/TextAreaStyle.qml
new file mode 100644
index 00000000..52275f2f
--- /dev/null
+++ b/src/extras/Styles/Flat/TextAreaStyle.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+
+ScrollViewStyle {
+    readonly property TextArea control: __control
+
+    property font font
+    readonly property color textColor: !control.enabled ? FlatStyle.darkFrameColor : FlatStyle.defaultTextColor
+    readonly property color selectionColor: FlatStyle.textSelectionColor
+    readonly property color selectedTextColor: FlatStyle.defaultTextColor
+    readonly property color backgroundColor: "transparent"
+    readonly property int renderType: FlatStyle.__renderType
+    readonly property real textMargin: Math.round(10 * FlatStyle.scaleFactor)
+
+    font.family: FlatStyle.fontFamily
+
+    frame: Rectangle {
+        anchors.fill: parent
+        implicitWidth: Math.round(150 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(170 * FlatStyle.scaleFactor)
+        radius: control.frameVisible ? FlatStyle.radius : 0
+        border.width: (control.activeFocus ? FlatStyle.twoPixels : enabled ? FlatStyle.onePixel : 0)
+        border.color: !control.frameVisible ? "transparent" : control.activeFocus ? FlatStyle.highlightColor : FlatStyle.darkFrameColor
+        color: !control.backgroundVisible ? "transparent" : enabled ? FlatStyle.backgroundColor : FlatStyle.disabledColor
+        opacity: enabled ? 1.0 : 0.15
+    }
+
+    property Component __selectionHandle: SelectionHandleStyle { }
+    property Component __cursorHandle: CursorHandleStyle { }
+}
diff --git a/src/extras/Styles/Flat/TextFieldStyle.qml b/src/extras/Styles/Flat/TextFieldStyle.qml
new file mode 100644
index 00000000..060e63d1
--- /dev/null
+++ b/src/extras/Styles/Flat/TextFieldStyle.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.TextFieldStyle {
+    font.family: FlatStyle.fontFamily
+
+    textColor: !control.enabled ? FlatStyle.mediumFrameColor : FlatStyle.defaultTextColor
+    placeholderTextColor: FlatStyle.mediumFrameColor
+    selectionColor: FlatStyle.textSelectionColor
+    selectedTextColor: FlatStyle.defaultTextColor
+    renderType: FlatStyle.__renderType
+
+    padding {
+        top: 0
+        left: Math.round(FlatStyle.scaleFactor * 10)
+        right: Math.round(FlatStyle.scaleFactor * 10)
+        bottom: 0
+    }
+
+    background: Rectangle {
+        implicitWidth: Math.round(150 * FlatStyle.scaleFactor)
+        implicitHeight: Math.max(Math.round(26 * FlatStyle.scaleFactor), Math.round(control.__contentHeight * 1.2))
+        radius: FlatStyle.radius
+        border.width: (control.activeFocus ? FlatStyle.twoPixels : enabled ? FlatStyle.onePixel : 0)
+        border.color: control.activeFocus ? FlatStyle.highlightColor : FlatStyle.darkFrameColor
+        color: enabled ? FlatStyle.backgroundColor : FlatStyle.disabledColor
+        opacity: enabled ? 1.0 : 0.15
+    }
+
+    __selectionHandle: SelectionHandleStyle { }
+    __cursorHandle: CursorHandleStyle { }
+}
diff --git a/src/extras/Styles/Flat/ToggleButtonStyle.qml b/src/extras/Styles/Flat/ToggleButtonStyle.qml
new file mode 100644
index 00000000..3b120e1d
--- /dev/null
+++ b/src/extras/Styles/Flat/ToggleButtonStyle.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.3
+import QtQuick.Extras.Private 1.0
+import QtQuick.Extras.Styles 1.3 as Base
+
+Base.ToggleButtonStyle {
+    label: Label {
+        text: control.text
+        color: FlatStyle.mediumFrameColor
+        font.family: FlatStyle.fontFamily
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        renderType: FlatStyle.__renderType
+    }
+
+    background: Item {
+        implicitWidth: Math.round(100 * FlatStyle.scaleFactor)
+        implicitHeight: Math.round(52 * FlatStyle.scaleFactor)
+
+        readonly property real outerLightLineWidth: Math.max(4, Math.round(innerRect.radius * 0.5))
+        readonly property real thinDarkLineWidth: Math.max(1, FlatStyle.onePixel)
+        readonly property color indicatorColor: control.enabled ? (control.checked ? FlatStyle.styleColor : FlatStyle.invalidColor) : FlatStyle.lightFrameColor
+        readonly property bool hovered: control.hovered && (!Settings.hasTouchScreen && !Settings.isMobile)
+
+        Rectangle {
+            id: innerRect
+            color: control.enabled ? (control.pressed ? FlatStyle.lightFrameColor : "white") : Qt.rgba(0, 0, 0, 0.07)
+            border.color: control.enabled ? (hovered ? indicatorColor : FlatStyle.mediumFrameColor) : "#d8d8d8" // TODO: specs don't mention having a border for disabled toggle buttons
+            border.width: !control.activeFocus ? thinDarkLineWidth : 0
+            radius: Math.round(3 * FlatStyle.scaleFactor)
+            anchors.fill: parent
+
+            Item {
+                id: clipItem
+                x: control.checked ? width : 0
+                width: indicatorRect.width / 2
+                height: indicatorRect.height / 2
+                clip: true
+
+                Rectangle {
+                    id: indicatorRect
+                    x: control.checked ? -parent.width : 0
+                    color: indicatorColor
+                    radius: innerRect.radius
+                    width: innerRect.width
+                    height: Math.round(8 * FlatStyle.scaleFactor) * 2
+                }
+            }
+        }
+
+        Rectangle {
+            anchors.fill: innerRect
+            color: "transparent"
+            radius: innerRect.radius
+            border.color: FlatStyle.focusedColor
+            border.width: 2 * FlatStyle.scaleFactor
+            visible: control.activeFocus
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/ToolBarStyle.qml b/src/extras/Styles/Flat/ToolBarStyle.qml
new file mode 100644
index 00000000..0b6aa688
--- /dev/null
+++ b/src/extras/Styles/Flat/ToolBarStyle.qml
@@ -0,0 +1,75 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.ToolBarStyle {
+    padding {
+        top: 0
+        left: Math.round(FlatStyle.scaleFactor * 10)
+        right: Math.round(FlatStyle.scaleFactor * 10)
+        bottom: 0
+    }
+
+    menuButton: Item {
+        implicitWidth: Math.round(FlatStyle.scaleFactor * 26)
+        implicitHeight: Math.round(FlatStyle.scaleFactor * 26)
+
+        ToolButtonBackground {
+            anchors.fill: parent
+            buttonEnabled: control.enabled
+            buttonHasActiveFocus: control.activeFocus
+            buttonPressed: styleData.pressed
+            buttonChecked: false
+            buttonHovered: !Settings.hasTouchScreen && styleData.hovered
+        }
+
+        ToolButtonIndicator {
+            buttonEnabled: control.enabled
+            buttonHasActiveFocus: styleData.activeFocus
+            buttonPressedOrChecked: styleData.pressed
+            anchors.centerIn: parent
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: Math.max(1, Math.round(FlatStyle.scaleFactor * 40))
+        color: FlatStyle.flatFrameColor
+    }
+}
diff --git a/src/extras/Styles/Flat/ToolButtonBackground.qml b/src/extras/Styles/Flat/ToolButtonBackground.qml
new file mode 100644
index 00000000..7dcd1ee0
--- /dev/null
+++ b/src/extras/Styles/Flat/ToolButtonBackground.qml
@@ -0,0 +1,94 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+
+// Internal, for use with ToolButtonStyle and ToolBarStyle
+Rectangle {
+    id: background
+
+    property bool buttonEnabled: false
+    property bool buttonHasActiveFocus: false
+    property bool buttonHovered: false
+    property bool buttonChecked: false
+    property bool buttonPressed: false
+
+    color: {
+        if (buttonChecked) {
+            if (!buttonEnabled)
+                return "transparent";
+            if (buttonHasActiveFocus)
+                return buttonPressed ? FlatStyle.checkedFocusedAndPressedColor : FlatStyle.focusedAndPressedColor;
+            if (buttonPressed)
+                return Qt.rgba(0, 0, 0, 0.1);
+            return "transparent";
+        }
+
+        if (!buttonEnabled)
+            return "transparent";
+        if (buttonHasActiveFocus)
+            return buttonPressed ? FlatStyle.focusedAndPressedColor : "transparent";
+        if (buttonPressed)
+            return Qt.rgba(0, 0, 0, 0.1);
+        return "transparent";
+    }
+    border.color: {
+        if (buttonChecked) {
+            if (!buttonEnabled)
+                return Qt.rgba(0, 0, 0, 0.1);
+            if (buttonHasActiveFocus)
+                return "transparent";
+            if (buttonPressed)
+                return Qt.rgba(0, 0, 0, 0.2);
+            if (buttonHovered)
+                return Qt.rgba(0, 0, 0, 0.3);
+            return Qt.rgba(0, 0, 0, 0.2);
+        }
+
+        if (!buttonEnabled)
+            return "transparent";
+        if (buttonHasActiveFocus && !buttonPressed)
+            return FlatStyle.focusedColor;
+        if (buttonHovered && !buttonPressed)
+            return Qt.rgba(0, 0, 0, 0.2);
+        return "transparent";
+    }
+    border.width: buttonHasActiveFocus ? FlatStyle.twoPixels : FlatStyle.onePixel
+    radius: FlatStyle.radius
+}
diff --git a/src/extras/Styles/Flat/ToolButtonIndicator.qml b/src/extras/Styles/Flat/ToolButtonIndicator.qml
new file mode 100644
index 00000000..1c6ffc74
--- /dev/null
+++ b/src/extras/Styles/Flat/ToolButtonIndicator.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+
+// Internal, for use with ToolButtonStyle and ToolBarStyle
+Item {
+    id: toolButtonIndicator
+    implicitWidth: Math.round(26 * FlatStyle.scaleFactor)
+    implicitHeight: Math.round(26 * FlatStyle.scaleFactor)
+
+    property bool buttonEnabled: false
+    property bool buttonHasActiveFocus: false
+    property bool buttonPressedOrChecked: false
+
+    Column {
+        anchors.centerIn: parent
+        spacing: Math.round(2 * FlatStyle.scaleFactor)
+
+        Repeater {
+            model: toolButtonIndicator.visible ? 3 : 0
+
+            Rectangle {
+                width: Math.round(4 * FlatStyle.scaleFactor)
+                height: width
+                radius: width / 2
+                color: !buttonEnabled ? FlatStyle.disabledColor : buttonPressedOrChecked && buttonHasActiveFocus
+                    ? FlatStyle.selectedTextColor : buttonHasActiveFocus
+                    ? FlatStyle.focusedColor : FlatStyle.defaultTextColor
+                opacity: !buttonEnabled ? FlatStyle.disabledOpacity : 1
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/ToolButtonStyle.qml b/src/extras/Styles/Flat/ToolButtonStyle.qml
new file mode 100644
index 00000000..60866e91
--- /dev/null
+++ b/src/extras/Styles/Flat/ToolButtonStyle.qml
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2 as Base
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Controls.Private 1.0
+
+Base.ButtonStyle {
+    padding { top: 0; left: 0; right: 0; bottom: 0 }
+
+    panel: Item {
+        id: panelItem
+
+        readonly property bool isDown: control.pressed || (control.checkable && control.checked)
+        readonly property bool hasIcon: icon.status === Image.Ready || icon.status === Image.Loading
+        readonly property bool hasMenu: !!control.menu
+        readonly property bool hasText: !!control.text
+        readonly property real margins: 10 * FlatStyle.scaleFactor
+
+        ToolButtonBackground {
+            id: background
+            anchors.fill: parent
+            buttonEnabled: control.enabled
+            buttonHasActiveFocus: control.activeFocus
+            buttonPressed: control.pressed
+            buttonChecked: control.checkable && control.checked
+            buttonHovered: !Settings.hasTouchScreen && control.hovered
+        }
+
+        implicitWidth: icon.implicitWidth + label.implicitWidth + indicator.implicitHeight
+                       + (hasIcon || hasText ? panelItem.margins : 0) + (hasIcon && hasText ? panelItem.margins : 0)
+        implicitHeight: Math.max(background.height, Math.max(icon.implicitHeight, Math.max(label.implicitHeight, indicator.height)))
+        baselineOffset: label.y + label.baselineOffset
+
+        Image {
+            id: icon
+            visible: hasIcon
+            source: control.iconSource
+            anchors.leftMargin: panelItem.margins
+            anchors.verticalCenter: parent.verticalCenter
+            // center align when only icon, otherwise left align
+            anchors.left: hasMenu || hasText ? parent.left : undefined
+            anchors.horizontalCenter: !hasMenu && !hasText ? parent.horizontalCenter : undefined
+        }
+        Text {
+            id: label
+            visible: hasText
+            text: control.text
+            elide: Text.ElideRight
+            font.family: FlatStyle.fontFamily
+            renderType: FlatStyle.__renderType
+            color: !enabled ? FlatStyle.disabledColor : panelItem.isDown && control.activeFocus
+                    ? FlatStyle.selectedTextColor : control.activeFocus
+                    ? FlatStyle.focusedColor : FlatStyle.defaultTextColor
+            opacity: !enabled ? FlatStyle.disabledOpacity : 1.0
+            horizontalAlignment: hasMenu && !hasIcon ? Qt.AlignLeft : Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: icon.right
+            anchors.right: indicator.left
+            anchors.leftMargin: hasIcon ? panelItem.margins : 0
+            anchors.rightMargin: hasMenu ? 0 : panelItem.margins
+        }
+        ToolButtonIndicator {
+            id: indicator
+            visible: panelItem.hasMenu
+            buttonEnabled: control.enabled
+            buttonHasActiveFocus: control.activeFocus
+            buttonPressedOrChecked: panelItem.isDown
+            anchors.verticalCenter: parent.verticalCenter
+            // center align when only menu, otherwise right align
+            anchors.right: hasIcon || hasText ? parent.right : undefined
+            anchors.horizontalCenter: !hasIcon && !hasText ? parent.horizontalCenter : undefined
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/TumblerStyle.qml b/src/extras/Styles/Flat/TumblerStyle.qml
new file mode 100644
index 00000000..cede9fee
--- /dev/null
+++ b/src/extras/Styles/Flat/TumblerStyle.qml
@@ -0,0 +1,167 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles.Flat 1.0
+import QtQuick.Extras.Styles 1.3 as Base
+
+Base.TumblerStyle {
+    id: tumblerStyle
+
+    padding.left: 0
+    padding.right: 0
+    padding.top: __frameHeight
+    padding.bottom: __frameHeight
+
+    visibleItemCount: 5
+
+    readonly property real __frameHeight: FlatStyle.onePixel
+
+    background: null
+
+    foreground: null
+
+    columnForeground: Item {
+        Item {
+            anchors.centerIn: parent
+            width: parent.width
+            height: tumblerStyle.__delegateHeight
+
+            Rectangle {
+                width: parent.width * 0.8
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: __frameHeight
+                color: control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+                opacity: control.enabled ? 1 : 0.2
+                anchors.top: parent.top
+                visible: !styleData.activeFocus
+            }
+
+            Rectangle {
+                width: parent.width * 0.8
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: __frameHeight
+                color: control.enabled ? FlatStyle.styleColor : FlatStyle.disabledColor
+                opacity: control.enabled ? 1 : 0.2
+                anchors.top: parent.bottom
+                visible: !styleData.activeFocus
+            }
+        }
+    }
+
+    highlight: Item {
+        id: highlightItem
+        implicitHeight: (control.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount
+
+        Rectangle {
+            color: styleData.activeFocus ? FlatStyle.highlightColor : "white"
+            width: parent.width
+            height: parent.height
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    separator: null
+
+    frame: Item {
+        Rectangle {
+            height: __frameHeight
+            width: parent.width
+            color: FlatStyle.disabledColor
+            opacity: control.enabled ? 0.2 : 0.1
+        }
+
+        Rectangle {
+            height: __frameHeight
+            width: parent.width
+            anchors.bottom: parent.bottom
+            color: FlatStyle.disabledColor
+            opacity: control.enabled ? 0.2 : 0.1
+        }
+    }
+
+    delegate: Item {
+        id: delegateItem
+        implicitHeight: (control.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount
+
+        Text {
+            id: label
+            text: styleData.value
+            color: control.enabled ? (styleData.activeFocus ? FlatStyle.focusedTextColor : FlatStyle.defaultTextColor) : FlatStyle.disabledColor
+            opacity: control.enabled ? enabledOpacity : FlatStyle.disabledOpacity
+            font.pixelSize: Math.round(TextSingleton.font.pixelSize * 1.3)
+            font.family: FlatStyle.fontFamily
+            renderType: FlatStyle.__renderType
+            anchors.centerIn: parent
+
+            readonly property real enabledOpacity: 1.1 - Math.abs(styleData.displacement * 2) / tumblerStyle.visibleItemCount * (230 / 255)
+        }
+
+        Loader {
+            id: block
+            y: styleData.displacement < 0 ? 0 : (1 - offset) * parent.height
+            width: parent.width
+            height: parent.height * offset
+            clip: true
+            active: Math.abs(styleData.displacement) <= 1
+
+            property real offset: Math.max(0, 1 - Math.abs(styleData.displacement))
+
+            sourceComponent: Rectangle {
+                // Use a Rectangle that is the same color as the highlight in order to avoid rendering text on top of text.
+                color: styleData.activeFocus ? FlatStyle.highlightColor : "white"
+                anchors.fill: parent
+
+                Text {
+                    id: focusText
+                    y: styleData.displacement < 0 ? 0 : parent.height - height
+                    width: parent.width
+                    height: delegateItem.height
+                    color: control.enabled ? (styleData.activeFocus ? "white" : FlatStyle.defaultTextColor) : FlatStyle.disabledColor
+                    opacity: control.enabled ? 1 : FlatStyle.disabledOpacity
+                    text: styleData.value
+                    font.pixelSize: Math.round(TextSingleton.font.pixelSize * 1.5)
+                    font.family: FlatStyle.fontFamily
+                    renderType: FlatStyle.__renderType
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+        }
+    }
+}
diff --git a/src/extras/Styles/Flat/flatstyle.qrc b/src/extras/Styles/Flat/flatstyle.qrc
new file mode 100644
index 00000000..3084d51e
--- /dev/null
+++ b/src/extras/Styles/Flat/flatstyle.qrc
@@ -0,0 +1,51 @@
+<RCC>
+    <qresource prefix="/ExtrasImports/QtQuick/Controls/Styles/Flat">
+        <file>ApplicationWindowStyle.qml</file>
+        <file>BusyIndicatorStyle.qml</file>
+        <file>ButtonStyle.qml</file>
+        <file>CalendarStyle.qml</file>
+        <file>CheckBoxDrawer.qml</file>
+        <file>CheckBoxStyle.qml</file>
+        <file>CircularButtonStyle.qml</file>
+        <file>CircularGaugeStyle.qml</file>
+        <file>CircularTickmarkLabelStyle.qml</file>
+        <file>ComboBoxStyle.qml</file>
+        <file>CursorHandleStyle.qml</file>
+        <file>DelayButtonStyle.qml</file>
+        <file>DialStyle.qml</file>
+        <file>FlatStyle.qml</file>
+        <file>FocusFrameStyle.qml</file>
+        <file>GaugeStyle.qml</file>
+        <file>GroupBoxStyle.qml</file>
+        <file>LeftArrowIcon.qml</file>
+        <file>MenuBarStyle.qml</file>
+        <file>MenuStyle.qml</file>
+        <file>PieMenuStyle.qml</file>
+        <file>ProgressBarStyle.qml</file>
+        <file>RadioButtonStyle.qml</file>
+        <file>ScrollViewStyle.qml</file>
+        <file>SelectionHandleStyle.qml</file>
+        <file>SliderStyle.qml</file>
+        <file>SpinBoxStyle.qml</file>
+        <file>StatusBarStyle.qml</file>
+        <file>StatusIndicatorStyle.qml</file>
+        <file>SwitchStyle.qml</file>
+        <file>TabViewStyle.qml</file>
+        <file>TableViewStyle.qml</file>
+        <file>TextAreaStyle.qml</file>
+        <file>TextFieldStyle.qml</file>
+        <file>ToggleButtonStyle.qml</file>
+        <file>ToolBarStyle.qml</file>
+        <file>ToolButtonBackground.qml</file>
+        <file>ToolButtonIndicator.qml</file>
+        <file>ToolButtonStyle.qml</file>
+        <file>TumblerStyle.qml</file>
+        <file>images/BusyIndicator_Normal-Large.png</file>
+        <file>images/BusyIndicator_Normal-Medium.png</file>
+        <file>images/BusyIndicator_Normal-Small.png</file>
+        <file>fonts/LICENSE.txt</file>
+        <file>fonts/OpenSans-Light.ttf</file>
+        <file>fonts/OpenSans-Regular.ttf</file>
+        <file>fonts/OpenSans-Semibold.ttf</file>
+    </qresource>
+</RCC>
diff --git a/src/extras/Styles/Flat/flatstyleplugin.cpp b/src/extras/Styles/Flat/flatstyleplugin.cpp
new file mode 100644
index 00000000..e3bffd5c
--- /dev/null
+++ b/src/extras/Styles/Flat/flatstyleplugin.cpp
@@ -0,0 +1,117 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "flatstyleplugin.h"
+
+#include <QtCore/qglobal.h>
+#include <QtCore/qfile.h>
+#include <QtCore/qdebug.h>
+
+#include "qquicktexthandle.h"
+
+static void initResources()
+{
+    Q_INIT_RESOURCE(flatstyle);
+}
+
+extern "C" {
+    Q_DECL_EXPORT bool qt_quick_controls_style_init()
+    {
+        initResources();
+        return true;
+    }
+
+    Q_DECL_EXPORT const char* qt_quick_controls_style_path()
+    {
+        return "qrc:/ExtrasImports/QtQuick/Controls/Styles/";
+    }
+}
+
+QT_BEGIN_NAMESPACE
+
+QtQuickExtrasStylesPlugin::QtQuickExtrasStylesPlugin(QObject *parent) :
+    QQmlExtensionPlugin(parent)
+{
+}
+
+void QtQuickExtrasStylesPlugin::registerTypes(const char *uri)
+{
+    Q_INIT_RESOURCE(flatstyle);
+
+    const QString prefix = "qrc:/ExtrasImports/QtQuick/Controls/Styles/Flat/";
+    // register version 1.0
+    qmlRegisterSingletonType(QUrl(prefix + "FlatStyle.qml"), uri, 1, 0, "FlatStyle");
+    qmlRegisterType(QUrl(prefix + "ApplicationWindowStyle.qml"), uri, 1, 0, "ApplicationWindowStyle");
+    qmlRegisterType(QUrl(prefix + "BusyIndicatorStyle.qml"), uri, 1, 0, "BusyIndicatorStyle");
+    qmlRegisterType(QUrl(prefix + "ButtonStyle.qml"), uri, 1, 0, "ButtonStyle");
+    qmlRegisterType(QUrl(prefix + "CalendarStyle.qml"), uri, 1, 0, "CalendarStyle");
+    qmlRegisterType(QUrl(prefix + "CheckBoxStyle.qml"), uri, 1, 0, "CheckBoxStyle");
+    qmlRegisterType(QUrl(prefix + "CheckBoxDrawer.qml"), uri, 1, 0, "CheckBoxDrawer");
+    qmlRegisterType(QUrl(prefix + "CircularButtonStyle.qml"), uri, 1, 0, "CircularButtonStyle");
+    qmlRegisterType(QUrl(prefix + "CircularGaugeStyle.qml"), uri, 1, 0, "CircularGaugeStyle");
+    qmlRegisterType(QUrl(prefix + "CircularTickmarkLabelStyle.qml"), uri, 1, 0, "CircularTickmarkLabelStyle");
+    qmlRegisterType(QUrl(prefix + "ComboBoxStyle.qml"), uri, 1, 0, "ComboBoxStyle");
+    qmlRegisterType(QUrl(prefix + "CursorHandleStyle.qml"), uri, 1, 0, "CursorHandleStyle");
+    qmlRegisterType(QUrl(prefix + "DelayButtonStyle.qml"), uri, 1, 0, "DelayButtonStyle");
+    qmlRegisterType(QUrl(prefix + "FocusFrameStyle.qml"), uri, 1, 0, "FocusFrameStyle");
+    qmlRegisterType(QUrl(prefix + "GaugeStyle.qml"), uri, 1, 0, "GaugeStyle");
+    qmlRegisterType(QUrl(prefix + "GroupBoxStyle.qml"), uri, 1, 0, "GroupBoxStyle");
+    qmlRegisterType(QUrl(prefix + "LeftArrowIcon.qml"), uri, 1, 0, "LeftArrowIcon");
+    qmlRegisterType(QUrl(prefix + "MenuBarStyle.qml"), uri, 1, 0, "MenuBarStyle");
+    qmlRegisterType(QUrl(prefix + "PieMenuStyle.qml"), uri, 1, 0, "PieMenuStyle");
+    qmlRegisterType(QUrl(prefix + "ProgressBarStyle.qml"), uri, 1, 0, "ProgressBarStyle");
+    qmlRegisterType(QUrl(prefix + "RadioButtonStyle.qml"), uri, 1, 0, "RadioButtonStyle");
+    qmlRegisterType(QUrl(prefix + "ScrollViewStyle.qml"), uri, 1, 0, "ScrollViewStyle");
+    qmlRegisterType(QUrl(prefix + "SelectionHandleStyle.qml"), uri, 1, 0, "SelectionHandleStyle");
+    qmlRegisterType(QUrl(prefix + "SliderStyle.qml"), uri, 1, 0, "SliderStyle");
+    qmlRegisterType(QUrl(prefix + "SpinBoxStyle.qml"), uri, 1, 0, "SpinBoxStyle");
+    qmlRegisterType(QUrl(prefix + "StatusBarStyle.qml"), uri, 1, 0, "StatusBarStyle");
+    qmlRegisterType(QUrl(prefix + "StatusIndicatorStyle.qml"), uri, 1, 0, "StatusIndicatorStyle");
+    qmlRegisterType(QUrl(prefix + "SwitchStyle.qml"), uri, 1, 0, "SwitchStyle");
+    qmlRegisterType(QUrl(prefix + "TabViewStyle.qml"), uri, 1, 0, "TabViewStyle");
+    qmlRegisterType(QUrl(prefix + "TableViewStyle.qml"), uri, 1, 0, "TableViewStyle");
+    qmlRegisterType(QUrl(prefix + "TextAreaStyle.qml"), uri, 1, 0, "TextAreaStyle");
+    qmlRegisterType(QUrl(prefix + "TextFieldStyle.qml"), uri, 1, 0, "TextFieldStyle");
+    qmlRegisterType(QUrl(prefix + "ToggleButtonStyle.qml"), uri, 1, 0, "ToggleButtonStyle");
+    qmlRegisterType(QUrl(prefix + "ToolBarStyle.qml"), uri, 1, 0, "ToolBarStyle");
+    qmlRegisterType(QUrl(prefix + "ToolButtonStyle.qml"), uri, 1, 0, "ToolButtonStyle");
+    qmlRegisterType(QUrl(prefix + "ToolButtonBackground.qml"), uri, 1, 0, "ToolButtonBackground");
+    qmlRegisterType(QUrl(prefix + "ToolButtonIndicator.qml"), uri, 1, 0, "ToolButtonIndicator");
+    qmlRegisterType(QUrl(prefix + "TumblerStyle.qml"), uri, 1, 0, "TumblerStyle");
+    qmlRegisterType<QQuickTextHandle>("QtQuick.Controls.Styles.Flat", 1, 0, "TextHandle");
+}
+
+QT_END_NAMESPACE
diff --git a/src/extras/Styles/Flat/flatstyleplugin.h b/src/extras/Styles/Flat/flatstyleplugin.h
new file mode 100644
index 00000000..4f1fb6d1
--- /dev/null
+++ b/src/extras/Styles/Flat/flatstyleplugin.h
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef STYLES_PLUGIN_H
+#define STYLES_PLUGIN_H
+
+#include <QtQml/qqmlextensionplugin.h>
+#include <QtQml/qqml.h>
+#include <QtQml/qqmlengine.h>
+
+QT_BEGIN_NAMESPACE
+
+class QtQuickExtrasStylesPlugin : public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QQmlExtensionInterface/1.0")
+public:
+    explicit QtQuickExtrasStylesPlugin(QObject *parent = 0);
+
+    void registerTypes(const char *uri);
+};
+
+QT_END_NAMESPACE
+
+#endif // STYLES_PLUGIN_H
diff --git a/src/extras/Styles/Flat/fonts/LICENSE.txt b/src/extras/Styles/Flat/fonts/LICENSE.txt
new file mode 100644
index 00000000..d6456956
--- /dev/null
+++ b/src/extras/Styles/Flat/fonts/LICENSE.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/src/extras/Styles/Flat/fonts/OpenSans-Light.ttf b/src/extras/Styles/Flat/fonts/OpenSans-Light.ttf
new file mode 100644
index 00000000..0d381897
--- /dev/null
+++ b/src/extras/Styles/Flat/fonts/OpenSans-Light.ttf
diff --git a/src/extras/Styles/Flat/fonts/OpenSans-Regular.ttf b/src/extras/Styles/Flat/fonts/OpenSans-Regular.ttf
new file mode 100644
index 00000000..db433349
--- /dev/null
+++ b/src/extras/Styles/Flat/fonts/OpenSans-Regular.ttf
diff --git a/src/extras/Styles/Flat/fonts/OpenSans-Semibold.ttf b/src/extras/Styles/Flat/fonts/OpenSans-Semibold.ttf
new file mode 100644
index 00000000..1a7679e3
--- /dev/null
+++ b/src/extras/Styles/Flat/fonts/OpenSans-Semibold.ttf
diff --git a/src/extras/Styles/Flat/images/BusyIndicator_Normal-Large.png b/src/extras/Styles/Flat/images/BusyIndicator_Normal-Large.png
new file mode 100644
index 00000000..6f9e6e25
--- /dev/null
+++ b/src/extras/Styles/Flat/images/BusyIndicator_Normal-Large.png
diff --git a/src/extras/Styles/Flat/images/BusyIndicator_Normal-Medium.png b/src/extras/Styles/Flat/images/BusyIndicator_Normal-Medium.png
new file mode 100644
index 00000000..2922e2a3
--- /dev/null
+++ b/src/extras/Styles/Flat/images/BusyIndicator_Normal-Medium.png
diff --git a/src/extras/Styles/Flat/images/BusyIndicator_Normal-Small.png b/src/extras/Styles/Flat/images/BusyIndicator_Normal-Small.png
new file mode 100644
index 00000000..c1e1b1f1
--- /dev/null
+++ b/src/extras/Styles/Flat/images/BusyIndicator_Normal-Small.png
diff --git a/src/extras/Styles/Flat/qmldir b/src/extras/Styles/Flat/qmldir
new file mode 100644
index 00000000..2b6390a4
--- /dev/null
+++ b/src/extras/Styles/Flat/qmldir
@@ -0,0 +1,3 @@
+module QtQuick.Controls.Styles.Flat
+plugin qtquickextrasflatplugin
+classname QtQuickExtrasFlatPlugin
diff --git a/src/extras/Styles/Flat/qquicktexthandle.cpp b/src/extras/Styles/Flat/qquicktexthandle.cpp
new file mode 100644
index 00000000..57029b8f
--- /dev/null
+++ b/src/extras/Styles/Flat/qquicktexthandle.cpp
@@ -0,0 +1,129 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "qquicktexthandle.h"
+
+QQuickTextHandle::QQuickTextHandle(QQuickItem *parent) :
+    QQuickPaintedItem(parent)
+{
+    setAntialiasing(true);
+}
+
+QQuickTextHandle::~QQuickTextHandle()
+{
+}
+
+void QQuickTextHandle::paint(QPainter *painter)
+{
+    painter->save();
+    paintBulb(painter, QColor(0, 0, 0, 38), true);
+    painter->restore();
+
+    paintBulb(painter, mColor, false);
+    painter->fillRect((mType == SelectionHandle ? 10 : 1), 0, 2, 23, mColor);
+}
+
+QQuickTextHandle::TextHandleType QQuickTextHandle::type() const
+{
+    return mType;
+}
+
+void QQuickTextHandle::setType(QQuickTextHandle::TextHandleType type)
+{
+    if (mType != type) {
+        mType = type;
+        update();
+        emit typeChanged();
+    }
+}
+
+QColor QQuickTextHandle::color() const
+{
+    return mColor;
+}
+
+void QQuickTextHandle::setColor(const QColor &color)
+{
+    if (mColor != color) {
+        mColor = color;
+        update();
+        emit colorChanged();
+    }
+}
+
+qreal QQuickTextHandle::scaleFactor() const
+{
+    return mScaleFactor;
+}
+
+void QQuickTextHandle::setScaleFactor(qreal scaleFactor)
+{
+    if (mScaleFactor != scaleFactor) {
+        mScaleFactor = scaleFactor;
+        setImplicitWidth(qRound(28 * mScaleFactor));
+        // + 2 for shadows
+        setImplicitHeight(qRound((32 + 2) * mScaleFactor));
+        update();
+        emit scaleFactorChanged();
+    }
+}
+
+void QQuickTextHandle::paintBulb(QPainter *painter, const QColor &color, bool isShadow)
+{
+    painter->scale(mScaleFactor, mScaleFactor);
+    QPainterPath path;
+
+    if (mType == SelectionHandle) {
+        painter->translate(16, isShadow ? 2 : 0);
+        path.moveTo(10.242, 28.457);
+        path.cubicTo(7.8980000000000015, 30.799, 4.099000000000001, 30.799,1.7560000000000002, 28.457);
+        path.cubicTo(-0.5859999999999999, 26.115000000000002, -0.5859999999999999,22.314, 1.7560000000000002, 19.973);
+        path.cubicTo(4.748, 16.980999999999998, 11.869, 18.343999999999998, 11.869, 18.343999999999998);
+        path.cubicTo(11.869, 18.343999999999998, 13.244, 25.455, 10.242, 28.457);
+
+    } else {
+        if (isShadow)
+            painter->translate(0, 2);
+        path.moveTo(2.757,28.457);
+        path.cubicTo(5.101,30.799,8.899000000000001,30.799,11.243,28.457);
+        path.cubicTo(13.585,26.115000000000002,13.585,22.314,11.243,19.973);
+        path.cubicTo(8.251,16.98,1.13,18.344,1.13,18.344);
+        path.cubicTo(1.13,18.344,-0.245,25.455,2.757,28.457);
+    }
+
+    painter->fillPath(path, QBrush(color));
+}
+
diff --git a/src/extras/Styles/Flat/qquicktexthandle.h b/src/extras/Styles/Flat/qquicktexthandle.h
new file mode 100644
index 00000000..4df6d42d
--- /dev/null
+++ b/src/extras/Styles/Flat/qquicktexthandle.h
@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef QQUICKTEXTHANDLE_H
+#define QQUICKTEXTHANDLE_H
+
+#include <QPainter>
+#include <QQuickPaintedItem>
+
+class QQuickTextHandle : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(TextHandleType type READ type WRITE setType NOTIFY typeChanged)
+    Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
+    Q_PROPERTY(qreal scaleFactor READ scaleFactor WRITE setScaleFactor NOTIFY scaleFactorChanged)
+    Q_ENUMS(TextHandleType)
+public:
+    enum TextHandleType {
+        CursorHandle = 0,
+        SelectionHandle = 1
+    };
+
+    QQuickTextHandle(QQuickItem *parent = 0);
+    ~QQuickTextHandle();
+
+    void paint(QPainter *painter) Q_DECL_OVERRIDE;
+
+    TextHandleType type() const;
+    void setType(TextHandleType type);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    qreal scaleFactor() const;
+    void setScaleFactor(qreal scaleFactor);
+
+Q_SIGNALS:
+    void typeChanged();
+    void colorChanged();
+    void scaleFactorChanged();
+
+private:
+    void paintBulb(QPainter *painter, const QColor &color, bool isShadow);
+
+    TextHandleType mType;
+    QColor mColor;
+    qreal mScaleFactor;
+};
+
+#endif // QQUICKTEXTHANDLE_H
diff --git a/src/extras/Styles/styles.pro b/src/extras/Styles/styles.pro
new file mode 100644
index 00000000..8f05bcd0
--- /dev/null
+++ b/src/extras/Styles/styles.pro
@@ -0,0 +1,4 @@
+TEMPLATE = subdirs
+
+SUBDIRS += Base \
+    Flat