@qooxdoo/framework 7.0.0-beta.5 → 7.0.0-beta.9

package/source/class/qx/theme/modern/Decoration.js

@@ -31,79 +31,67 @@
  *
  * @asset(qx/decoration/Modern/toolbar/toolbar-part.gif)
  */
-qx.Theme.define("qx.theme.modern.Decoration",
-{
-  aliases : {
-    decoration : "qx/decoration/Modern"
+qx.Theme.define("qx.theme.modern.Decoration", {
+  aliases: {
+    decoration: "qx/decoration/Modern"
   },
 
-  decorations :
-  {
+  decorations: {
     /*
     ---------------------------------------------------------------------------
       CORE
     ---------------------------------------------------------------------------
     */
 
-    "main" :
-    {
-      style :
-      {
-        width : 1,
-        color : "border-main"
+    main: {
+      style: {
+        width: 1,
+        color: "border-main"
       }
     },
 
-    "selected" :
-    {
-      style :
-      {
-        startColorPosition : 0,
-        endColorPosition : 100,
-        startColor : "selected-start",
-        endColor : "selected-end"
+    selected: {
+      style: {
+        startColorPosition: 0,
+        endColorPosition: 100,
+        startColor: "selected-start",
+        endColor: "selected-end"
       }
     },
 
-    "dragover" :
-    {
-      style :
-      {
+    dragover: {
+      style: {
         bottom: [2, "solid", "border-dragover"]
       }
     },
 
-    "pane" : {
-      style : {
+    pane: {
+      style: {
         width: 1,
         color: "tabview-background",
-        radius : 3,
-        shadowColor : "shadow",
-        shadowBlurRadius : 2,
-        shadowLength : 0,
-        gradientStart : ["pane-start", 0],
-        gradientEnd : ["pane-end", 100]
+        radius: 3,
+        shadowColor: "shadow",
+        shadowBlurRadius: 2,
+        shadowLength: 0,
+        gradientStart: ["pane-start", 0],
+        gradientEnd: ["pane-end", 100]
       }
     },
 
-    "group" :
-    {
-      style : {
-        backgroundColor : "group-background",
-        radius : 4,
-        color : "group-border",
+    group: {
+      style: {
+        backgroundColor: "group-background",
+        radius: 4,
+        color: "group-border",
         width: 1
       }
     },
 
-
-    "keyboard-focus" :
-    {
-      style :
-      {
-        width : 1,
-        color : "keyboard-focus",
-        style : "dotted"
+    "keyboard-focus": {
+      style: {
+        width: 1,
+        color: "keyboard-focus",
+        style: "dotted"
       }
     },
 
@@ -112,250 +100,228 @@ qx.Theme.define("qx.theme.modern.Decoration",
       RADIO BUTTON
     ---------------------------------------------------------------------------
     */
-    "radiobutton" : {
-      style : {
-        backgroundColor : "radiobutton-background",
-        radius : 5,
+    radiobutton: {
+      style: {
+        backgroundColor: "radiobutton-background",
+        radius: 5,
         width: 1,
-        innerWidth : 2,
-        color : "checkbox-border",
-        innerColor : "radiobutton-background",
-        shadowLength : 0,
-        shadowBlurRadius : 0,
-        shadowColor : "checkbox-focus"
+        innerWidth: 2,
+        color: "checkbox-border",
+        innerColor: "radiobutton-background",
+        shadowLength: 0,
+        shadowBlurRadius: 0,
+        shadowColor: "checkbox-focus"
       }
     },
 
-    "radiobutton-checked" : {
-      include : "radiobutton",
-      style : {
-        backgroundColor : "radiobutton-checked"
+    "radiobutton-checked": {
+      include: "radiobutton",
+      style: {
+        backgroundColor: "radiobutton-checked"
       }
     },
 
-    "radiobutton-checked-focused" : {
-      include  : "radiobutton-checked",
-      style : {
-        shadowBlurRadius : 4
+    "radiobutton-checked-focused": {
+      include: "radiobutton-checked",
+      style: {
+        shadowBlurRadius: 4
       }
     },
 
-    "radiobutton-checked-hovered" : {
-      include : "radiobutton-checked",
-      style : {
-        innerColor : "checkbox-hovered"
+    "radiobutton-checked-hovered": {
+      include: "radiobutton-checked",
+      style: {
+        innerColor: "checkbox-hovered"
       }
     },
 
-    "radiobutton-focused" : {
-      include : "radiobutton",
-      style : {
-        shadowBlurRadius : 4
+    "radiobutton-focused": {
+      include: "radiobutton",
+      style: {
+        shadowBlurRadius: 4
       }
     },
 
-    "radiobutton-hovered" : {
-      include : "radiobutton",
-      style : {
-        backgroundColor : "checkbox-hovered",
-        innerColor : "checkbox-hovered"
+    "radiobutton-hovered": {
+      include: "radiobutton",
+      style: {
+        backgroundColor: "checkbox-hovered",
+        innerColor: "checkbox-hovered"
       }
     },
 
-    "radiobutton-disabled" : {
-      include : "radiobutton",
-      style : {
-        innerColor : "radiobutton-disabled",
-        backgroundColor : "radiobutton-disabled",
-        color : "checkbox-disabled-border"
+    "radiobutton-disabled": {
+      include: "radiobutton",
+      style: {
+        innerColor: "radiobutton-disabled",
+        backgroundColor: "radiobutton-disabled",
+        color: "checkbox-disabled-border"
       }
     },
 
-    "radiobutton-checked-disabled" : {
-      include : "radiobutton-disabled",
-      style : {
-        backgroundColor : "radiobutton-checked-disabled"
+    "radiobutton-checked-disabled": {
+      include: "radiobutton-disabled",
+      style: {
+        backgroundColor: "radiobutton-checked-disabled"
       }
     },
 
-    "radiobutton-invalid" : {
-      include : "radiobutton",
-      style : {
-        color : "invalid"
+    "radiobutton-invalid": {
+      include: "radiobutton",
+      style: {
+        color: "invalid"
       }
     },
 
-    "radiobutton-checked-invalid" : {
-      include : "radiobutton-checked",
-      style : {
-        color : "invalid"
+    "radiobutton-checked-invalid": {
+      include: "radiobutton-checked",
+      style: {
+        color: "invalid"
       }
     },
 
-    "radiobutton-checked-focused-invalid" : {
-      include  : "radiobutton-checked-focused",
-      style : {
-        color : "invalid",
-        shadowColor : "invalid"
+    "radiobutton-checked-focused-invalid": {
+      include: "radiobutton-checked-focused",
+      style: {
+        color: "invalid",
+        shadowColor: "invalid"
       }
     },
 
-    "radiobutton-checked-hovered-invalid" : {
-      include : "radiobutton-checked-hovered",
-      style : {
-        color : "invalid",
-        innerColor : "radiobutton-hovered-invalid"
+    "radiobutton-checked-hovered-invalid": {
+      include: "radiobutton-checked-hovered",
+      style: {
+        color: "invalid",
+        innerColor: "radiobutton-hovered-invalid"
       }
     },
 
-    "radiobutton-focused-invalid" : {
-      include : "radiobutton-focused",
-      style : {
-        color : "invalid",
-        shadowColor : "invalid"
+    "radiobutton-focused-invalid": {
+      include: "radiobutton-focused",
+      style: {
+        color: "invalid",
+        shadowColor: "invalid"
       }
     },
 
-    "radiobutton-hovered-invalid" : {
-      include : "radiobutton-hovered",
-      style : {
-        color : "invalid",
-        innerColor : "radiobutton-hovered-invalid",
-        backgroundColor : "radiobutton-hovered-invalid"
+    "radiobutton-hovered-invalid": {
+      include: "radiobutton-hovered",
+      style: {
+        color: "invalid",
+        innerColor: "radiobutton-hovered-invalid",
+        backgroundColor: "radiobutton-hovered-invalid"
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       SEPARATOR
     ---------------------------------------------------------------------------
     */
 
-    "separator-horizontal" :
-    {
-      style :
-      {
-        widthLeft : 1,
-        colorLeft : "border-separator"
+    "separator-horizontal": {
+      style: {
+        widthLeft: 1,
+        colorLeft: "border-separator"
       }
     },
 
-    "separator-vertical" :
-    {
-      style :
-      {
-        widthTop : 1,
-        colorTop : "border-separator"
+    "separator-vertical": {
+      style: {
+        widthTop: 1,
+        colorTop: "border-separator"
       }
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       TOOLTIP
     ---------------------------------------------------------------------------
     */
-    "tooltip-error" :
-    {
-      style : {
-        backgroundColor : "tooltip-error",
-        radius : 4,
-        shadowColor : "shadow",
-        shadowBlurRadius : 2,
-        shadowLength : 1
+    "tooltip-error": {
+      style: {
+        backgroundColor: "tooltip-error",
+        radius: 4,
+        shadowColor: "shadow",
+        shadowBlurRadius: 2,
+        shadowLength: 1
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       POPUP
     ---------------------------------------------------------------------------
     */
 
-    "popup" :
-    {
-      style :
-      {
-        width : 1,
-        color : "border-main",
-        shadowColor : "shadow",
-        shadowBlurRadius : 3,
-        shadowLength : 1
+    popup: {
+      style: {
+        width: 1,
+        color: "border-main",
+        shadowColor: "shadow",
+        shadowBlurRadius: 3,
+        shadowLength: 1
       }
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       SCROLLBAR
     ---------------------------------------------------------------------------
     */
-    "scrollbar-horizontal" :
-    {
-      style : {
-        gradientStart : ["scrollbar-start", 0],
-        gradientEnd : ["scrollbar-end", 100]
+    "scrollbar-horizontal": {
+      style: {
+        gradientStart: ["scrollbar-start", 0],
+        gradientEnd: ["scrollbar-end", 100]
       }
     },
 
-    "scrollbar-vertical" : {
-      include : "scrollbar-horizontal",
-      style : {
-        orientation : "horizontal"
+    "scrollbar-vertical": {
+      include: "scrollbar-horizontal",
+      style: {
+        orientation: "horizontal"
       }
     },
 
-    "scrollbar-slider-horizontal" :
-    {
-      style : {
-        gradientStart : ["scrollbar-slider-start", 0],
-        gradientEnd : ["scrollbar-slider-end", 100],
+    "scrollbar-slider-horizontal": {
+      style: {
+        gradientStart: ["scrollbar-slider-start", 0],
+        gradientEnd: ["scrollbar-slider-end", 100],
 
-        color : "border-main",
+        color: "border-main",
         width: 1,
         radius: 3
       }
     },
 
-    "scrollbar-slider-vertical" :
-    {
-      include : "scrollbar-slider-horizontal",
-      style : {
-        orientation : "horizontal"
+    "scrollbar-slider-vertical": {
+      include: "scrollbar-slider-horizontal",
+      style: {
+        orientation: "horizontal"
       }
     },
 
-    "scrollbar-slider-horizontal-disabled" :
-    {
-      include : "scrollbar-slider-horizontal",
-      style : {
-        color : "button-border-disabled"
+    "scrollbar-slider-horizontal-disabled": {
+      include: "scrollbar-slider-horizontal",
+      style: {
+        color: "button-border-disabled"
       }
     },
 
-    "scrollbar-slider-vertical-disabled" :
-    {
-      include : "scrollbar-slider-vertical",
-      style : {
-        color : "button-border-disabled"
+    "scrollbar-slider-vertical-disabled": {
+      include: "scrollbar-slider-vertical",
+      style: {
+        color: "button-border-disabled"
       }
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       BUTTON
     ---------------------------------------------------------------------------
     */
-    "button" :
-    {
-      style :
-      {
+    button: {
+      style: {
         radius: 3,
         color: "border-button",
         width: 1,
@@ -366,46 +332,41 @@ qx.Theme.define("qx.theme.modern.Decoration",
       }
     },
 
-    "button-disabled" :
-    {
-      include : "button",
-      style : {
-        color : "button-border-disabled",
+    "button-disabled": {
+      include: "button",
+      style: {
+        color: "button-border-disabled",
         startColor: "button-disabled-start",
         endColor: "button-disabled-end"
       }
     },
 
-    "button-hovered" :
-    {
-      include : "button",
-      style : {
-        startColor : "button-hovered-start",
-        endColor : "button-hovered-end"
+    "button-hovered": {
+      include: "button",
+      style: {
+        startColor: "button-hovered-start",
+        endColor: "button-hovered-end"
       }
     },
 
-    "button-checked" :
-    {
-      include : "button",
-      style : {
+    "button-checked": {
+      include: "button",
+      style: {
         endColor: "button-start",
         startColor: "button-end"
       }
     },
 
-    "button-pressed" :
-    {
-      include : "button",
-      style : {
-        endColor : "button-hovered-start",
-        startColor : "button-hovered-end"
+    "button-pressed": {
+      include: "button",
+      style: {
+        endColor: "button-hovered-start",
+        startColor: "button-hovered-end"
       }
     },
 
-    "button-focused" : {
-      style :
-      {
+    "button-focused": {
+      style: {
         radius: 3,
         color: "border-button",
         width: 1,
@@ -418,640 +379,560 @@ qx.Theme.define("qx.theme.modern.Decoration",
       }
     },
 
-    "button-checked-focused" : {
-      include : "button-focused",
-      style : {
+    "button-checked-focused": {
+      include: "button-focused",
+      style: {
         endColor: "button-start",
         startColor: "button-end"
       }
     },
 
     // invalid
-    "button-invalid" : {
-      include : "button",
-      style : {
+    "button-invalid": {
+      include: "button",
+      style: {
         color: "border-invalid"
       }
     },
 
-    "button-disabled-invalid" :
-    {
-      include : "button-disabled",
-      style : {
-        color : "border-invalid"
+    "button-disabled-invalid": {
+      include: "button-disabled",
+      style: {
+        color: "border-invalid"
       }
     },
 
-    "button-hovered-invalid" :
-    {
-      include : "button-hovered",
-      style : {
-        color : "border-invalid"
+    "button-hovered-invalid": {
+      include: "button-hovered",
+      style: {
+        color: "border-invalid"
       }
     },
 
-    "button-checked-invalid" :
-    {
-      include : "button-checked",
-      style : {
-        color : "border-invalid"
+    "button-checked-invalid": {
+      include: "button-checked",
+      style: {
+        color: "border-invalid"
       }
     },
 
-    "button-pressed-invalid" :
-    {
-      include : "button-pressed",
-      style : {
-        color : "border-invalid"
+    "button-pressed-invalid": {
+      include: "button-pressed",
+      style: {
+        color: "border-invalid"
       }
     },
 
-    "button-focused-invalid" : {
-      include : "button-focused",
-      style : {
-        color : "border-invalid"
+    "button-focused-invalid": {
+      include: "button-focused",
+      style: {
+        color: "border-invalid"
       }
     },
 
-    "button-checked-focused-invalid" : {
-      include : "button-checked-focused",
-      style : {
-        color : "border-invalid"
+    "button-checked-focused-invalid": {
+      include: "button-checked-focused",
+      style: {
+        color: "border-invalid"
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       CHECK BOX
     ---------------------------------------------------------------------------
     */
-    "checkbox" : {
-      style : {
+    checkbox: {
+      style: {
         width: 1,
         color: "checkbox-border",
-        innerWidth : 1,
-        innerColor : "checkbox-inner",
+        innerWidth: 1,
+        innerColor: "checkbox-inner",
 
         backgroundColor: "checkbox-end",
 
-        shadowLength : 0,
-        shadowBlurRadius : 0,
-        shadowColor : "checkbox-focus"
+        shadowLength: 0,
+        shadowBlurRadius: 0,
+        shadowColor: "checkbox-focus"
       }
     },
 
-    "checkbox-hovered" : {
-      include : "checkbox",
-      style : {
-        innerColor : "checkbox-hovered-inner",
+    "checkbox-hovered": {
+      include: "checkbox",
+      style: {
+        innerColor: "checkbox-hovered-inner",
         backgroundColor: "checkbox-hovered"
       }
     },
 
-    "checkbox-focused" : {
-      include : "checkbox",
-      style : {
-        shadowBlurRadius : 4
+    "checkbox-focused": {
+      include: "checkbox",
+      style: {
+        shadowBlurRadius: 4
       }
     },
 
-    "checkbox-disabled" : {
-      include : "checkbox",
-      style : {
-        color : "checkbox-disabled-border",
-        innerColor : "checkbox-disabled-inner",
-        backgroundColor : "checkbox-disabled-end"
+    "checkbox-disabled": {
+      include: "checkbox",
+      style: {
+        color: "checkbox-disabled-border",
+        innerColor: "checkbox-disabled-inner",
+        backgroundColor: "checkbox-disabled-end"
       }
     },
 
-    "checkbox-invalid" : {
-      include : "checkbox",
-      style : {
-        color : "invalid"
+    "checkbox-invalid": {
+      include: "checkbox",
+      style: {
+        color: "invalid"
       }
     },
 
-    "checkbox-hovered-invalid" : {
-      include : "checkbox-hovered",
-      style : {
-        color : "invalid",
-        innerColor : "checkbox-hovered-inner-invalid",
+    "checkbox-hovered-invalid": {
+      include: "checkbox-hovered",
+      style: {
+        color: "invalid",
+        innerColor: "checkbox-hovered-inner-invalid",
         backgroundColor: "checkbox-hovered-invalid"
       }
     },
 
-    "checkbox-focused-invalid" : {
-      include : "checkbox-focused",
-      style : {
-        color : "invalid",
-        shadowColor : "invalid"
+    "checkbox-focused-invalid": {
+      include: "checkbox-focused",
+      style: {
+        color: "invalid",
+        shadowColor: "invalid"
       }
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       TEXT FIELD
     ---------------------------------------------------------------------------
     */
 
-    "input" :
-    {
-      style :
-      {
-        color : "border-input",
-        innerColor : "border-inner-input",
+    input: {
+      style: {
+        color: "border-input",
+        innerColor: "border-inner-input",
         innerWidth: 1,
-        width : 1,
-        backgroundColor : "background-light",
-        startColor : "input-start",
-        endColor : "input-end",
-        startColorPosition : 0,
-        endColorPosition : 12,
-        colorPositionUnit : "px"
+        width: 1,
+        backgroundColor: "background-light",
+        startColor: "input-start",
+        endColor: "input-end",
+        startColorPosition: 0,
+        endColorPosition: 12,
+        colorPositionUnit: "px"
       }
     },
 
-    "border-invalid" : {
-      include : "input",
-      style : {
-        color : "border-invalid"
+    "border-invalid": {
+      include: "input",
+      style: {
+        color: "border-invalid"
       }
     },
 
-    "input-focused" : {
-      include : "input",
-      style : {
-        startColor : "input-focused-start",
-        innerColor : "input-focused-end",
-        endColorPosition : 4
+    "input-focused": {
+      include: "input",
+      style: {
+        startColor: "input-focused-start",
+        innerColor: "input-focused-end",
+        endColorPosition: 4
       }
     },
 
-    "input-focused-invalid" : {
-      include : "input-focused",
-      style : {
-        innerColor : "input-focused-inner-invalid",
-        color : "border-invalid"
+    "input-focused-invalid": {
+      include: "input-focused",
+      style: {
+        innerColor: "input-focused-inner-invalid",
+        color: "border-invalid"
       }
     },
 
-    "input-disabled" : {
-      include : "input",
-      style : {
+    "input-disabled": {
+      include: "input",
+      style: {
         color: "input-border-disabled"
       }
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       TOOLBAR
     ---------------------------------------------------------------------------
     */
 
-    "toolbar" :
-    {
-      style : {
-        startColorPosition : 40,
-        endColorPosition : 60,
-        startColor : "toolbar-start",
-        endColor : "toolbar-end"
+    toolbar: {
+      style: {
+        startColorPosition: 40,
+        endColorPosition: 60,
+        startColor: "toolbar-start",
+        endColor: "toolbar-end"
       }
     },
 
-    "toolbar-button-hovered" :
-    {
-      style :
-      {
-        color : "border-toolbar-button-outer",
+    "toolbar-button-hovered": {
+      style: {
+        color: "border-toolbar-button-outer",
         width: 1,
         innerWidth: 1,
-        innerColor : "border-toolbar-border-inner",
-        radius : 2,
-        gradientStart : ["button-start", 30],
-        gradientEnd : ["button-end", 100]
+        innerColor: "border-toolbar-border-inner",
+        radius: 2,
+        gradientStart: ["button-start", 30],
+        gradientEnd: ["button-end", 100]
       }
     },
 
-    "toolbar-button-checked" :
-    {
-      include : "toolbar-button-hovered",
+    "toolbar-button-checked": {
+      include: "toolbar-button-hovered",
 
-      style :
-      {
-        gradientStart : ["button-end", 30],
-        gradientEnd : ["button-start", 100]
+      style: {
+        gradientStart: ["button-end", 30],
+        gradientEnd: ["button-start", 100]
       }
     },
 
-    "toolbar-separator" :
-    {
-      style :
-      {
-        widthLeft : 1,
-        widthRight : 1,
+    "toolbar-separator": {
+      style: {
+        widthLeft: 1,
+        widthRight: 1,
 
-        colorLeft : "border-toolbar-separator-left",
-        colorRight : "border-toolbar-separator-right",
+        colorLeft: "border-toolbar-separator-left",
+        colorRight: "border-toolbar-separator-right",
 
-        styleLeft : "solid",
-        styleRight : "solid"
+        styleLeft: "solid",
+        styleRight: "solid"
       }
     },
 
-    "toolbar-part" :
-    {
-      style :
-      {
-        backgroundImage  : "decoration/toolbar/toolbar-part.gif",
-        backgroundRepeat : "repeat-y"
+    "toolbar-part": {
+      style: {
+        backgroundImage: "decoration/toolbar/toolbar-part.gif",
+        backgroundRepeat: "repeat-y"
       }
     },
 
-
-
-
     /*
     ---------------------------------------------------------------------------
       TABVIEW
     ---------------------------------------------------------------------------
     */
 
-    "tabview-pane" :
-    {
-      style : {
+    "tabview-pane": {
+      style: {
         width: 1,
         color: "window-border",
-        radius : 3,
-        gradientStart : ["tabview-start", 90],
-        gradientEnd : ["tabview-end", 100]
+        radius: 3,
+        gradientStart: ["tabview-start", 90],
+        gradientEnd: ["tabview-end", 100]
       }
     },
 
-    "tabview-page-button-top-active" :
-    {
-      style : {
-        radius : [3, 3, 0, 0],
+    "tabview-page-button-top-active": {
+      style: {
+        radius: [3, 3, 0, 0],
         width: [1, 1, 0, 1],
         color: "tabview-background",
-        backgroundColor : "tabview-start",
+        backgroundColor: "tabview-start",
         shadowLength: 1,
         shadowColor: "shadow",
         shadowBlurRadius: 2
       }
     },
 
-    "tabview-page-button-top-inactive" :
-    {
-      style : {
-        radius : [3, 3, 0, 0],
+    "tabview-page-button-top-inactive": {
+      style: {
+        radius: [3, 3, 0, 0],
         color: "tabview-inactive",
-        colorBottom : "tabview-background",
+        colorBottom: "tabview-background",
         width: 1,
-        gradientStart : ["tabview-inactive-start", 0],
-        gradientEnd : ["tabview-inactive-end", 100]
+        gradientStart: ["tabview-inactive-start", 0],
+        gradientEnd: ["tabview-inactive-end", 100]
       }
     },
 
-    "tabview-page-button-bottom-active" :
-    {
-      include : "tabview-page-button-top-active",
+    "tabview-page-button-bottom-active": {
+      include: "tabview-page-button-top-active",
 
-      style : {
-        radius : [0, 0, 3, 3],
+      style: {
+        radius: [0, 0, 3, 3],
         width: [0, 1, 1, 1],
-        backgroundColor : "tabview-inactive-start",
+        backgroundColor: "tabview-inactive-start",
         shadowLength: 0,
         shadowBlurRadius: 0
       }
     },
 
-    "tabview-page-button-bottom-inactive" :
-    {
-      include : "tabview-page-button-top-inactive",
+    "tabview-page-button-bottom-inactive": {
+      include: "tabview-page-button-top-inactive",
 
-      style : {
-        radius : [0, 0, 3, 3],
+      style: {
+        radius: [0, 0, 3, 3],
         width: [0, 1, 1, 1],
-        colorBottom : "tabview-inactive",
-        colorTop : "tabview-background"
+        colorBottom: "tabview-inactive",
+        colorTop: "tabview-background"
       }
     },
 
-    "tabview-page-button-left-active" :
-    {
-      include : "tabview-page-button-top-active",
+    "tabview-page-button-left-active": {
+      include: "tabview-page-button-top-active",
 
-      style : {
-        radius : [3, 0, 0, 3],
+      style: {
+        radius: [3, 0, 0, 3],
         width: [1, 0, 1, 1],
         shadowLength: 0,
         shadowBlurRadius: 0
       }
     },
 
-    "tabview-page-button-left-inactive" :
-    {
-      include : "tabview-page-button-top-inactive",
+    "tabview-page-button-left-inactive": {
+      include: "tabview-page-button-top-inactive",
 
-      style : {
-        radius : [3, 0, 0, 3],
+      style: {
+        radius: [3, 0, 0, 3],
         width: [1, 0, 1, 1],
-        colorBottom : "tabview-inactive",
-        colorRight : "tabview-background"
+        colorBottom: "tabview-inactive",
+        colorRight: "tabview-background"
       }
     },
 
-    "tabview-page-button-right-active" :
-    {
-      include : "tabview-page-button-top-active",
+    "tabview-page-button-right-active": {
+      include: "tabview-page-button-top-active",
 
-      style : {
-        radius : [0, 3, 3, 0],
+      style: {
+        radius: [0, 3, 3, 0],
         width: [1, 1, 1, 0],
         shadowLength: 0,
         shadowBlurRadius: 0
       }
     },
 
-    "tabview-page-button-right-inactive" :
-    {
-      include : "tabview-page-button-top-inactive",
+    "tabview-page-button-right-inactive": {
+      include: "tabview-page-button-top-inactive",
 
-      style : {
-        radius : [0, 3, 3, 0],
+      style: {
+        radius: [0, 3, 3, 0],
         width: [1, 1, 1, 0],
-        colorBottom : "tabview-inactive",
-        colorLeft : "tabview-background"
+        colorBottom: "tabview-inactive",
+        colorLeft: "tabview-background"
       }
     },
 
-
-
-
-
     /*
     ---------------------------------------------------------------------------
       SPLITPANE
     ---------------------------------------------------------------------------
     */
 
-    "splitpane" :
-    {
-      style :
-      {
-        backgroundColor : "background-pane",
+    splitpane: {
+      style: {
+        backgroundColor: "background-pane",
 
-        width : 3,
-        color : "background-splitpane",
-        style : "solid"
+        width: 3,
+        color: "background-splitpane",
+        style: "solid"
       }
     },
 
-
-
-
-
     /*
     ---------------------------------------------------------------------------
       WINDOW
     ---------------------------------------------------------------------------
     */
-    "window" :
-    {
-      style : {
-        radius : [5, 5, 0, 0],
-        shadowBlurRadius : 4,
-        shadowLength : 2,
-        shadowColor : "shadow"
+    window: {
+      style: {
+        radius: [5, 5, 0, 0],
+        shadowBlurRadius: 4,
+        shadowLength: 2,
+        shadowColor: "shadow"
       }
     },
 
-    "window-incl-statusbar" : {
-       include : "window",
-       style : {
-         radius : [5, 5, 5, 5]
-       }
+    "window-incl-statusbar": {
+      include: "window",
+      style: {
+        radius: [5, 5, 5, 5]
+      }
     },
 
-    "window-resize-frame" :
-    {
-      style : {
-        radius : [5, 5, 0, 0],
-        width : 1,
-        color : "border-main"
+    "window-resize-frame": {
+      style: {
+        radius: [5, 5, 0, 0],
+        width: 1,
+        color: "border-main"
       }
     },
 
-    "window-resize-frame-incl-statusbar" :
-    {
-       include : "window-resize-frame",
-       style : {
-         radius : [5, 5, 5, 5]
-       }
+    "window-resize-frame-incl-statusbar": {
+      include: "window-resize-frame",
+      style: {
+        radius: [5, 5, 5, 5]
+      }
     },
 
-    "window-captionbar-active" :
-    {
-      style : {
-        width : 1,
-        color : "window-border",
-        colorBottom : "window-border-caption",
-        radius : [5, 5, 0, 0],
-        gradientStart : ["window-caption-active-start", 30],
-        gradientEnd : ["window-caption-active-end", 70]
+    "window-captionbar-active": {
+      style: {
+        width: 1,
+        color: "window-border",
+        colorBottom: "window-border-caption",
+        radius: [5, 5, 0, 0],
+        gradientStart: ["window-caption-active-start", 30],
+        gradientEnd: ["window-caption-active-end", 70]
       }
     },
 
-    "window-captionbar-inactive" :
-    {
-      include : "window-captionbar-active",
-      style : {
-        gradientStart : ["window-caption-inactive-start", 30],
-        gradientEnd : ["window-caption-inactive-end", 70]
+    "window-captionbar-inactive": {
+      include: "window-captionbar-active",
+      style: {
+        gradientStart: ["window-caption-inactive-start", 30],
+        gradientEnd: ["window-caption-inactive-end", 70]
       }
     },
 
-    "window-statusbar" :
-    {
-      style : {
-        backgroundColor : "window-statusbar-background",
+    "window-statusbar": {
+      style: {
+        backgroundColor: "window-statusbar-background",
         width: [0, 1, 1, 1],
         color: "window-border",
-        radius : [0, 0, 5, 5]
+        radius: [0, 0, 5, 5]
       }
     },
 
-    "window-pane" :
-    {
-      style :
-      {
-        backgroundColor : "background-pane",
-        width : 1,
-        color : "window-border",
-        widthTop : 0
+    "window-pane": {
+      style: {
+        backgroundColor: "background-pane",
+        width: 1,
+        color: "window-border",
+        widthTop: 0
       }
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       TABLE
     ---------------------------------------------------------------------------
     */
 
-    "table" :
-    {
-      style :
-      {
-        width : 1,
-        color : "border-main",
-        style : "solid"
+    table: {
+      style: {
+        width: 1,
+        color: "border-main",
+        style: "solid"
       }
     },
 
-    "table-statusbar" :
-    {
-      style :
-      {
-        widthTop : 1,
-        colorTop : "border-main",
-        style    : "solid"
+    "table-statusbar": {
+      style: {
+        widthTop: 1,
+        colorTop: "border-main",
+        style: "solid"
       }
     },
 
-    "table-scroller-header" :
-    {
-      style :
-      {
-        gradientStart : ["table-header-start", 10],
-        gradientEnd : ["table-header-end", 90],
+    "table-scroller-header": {
+      style: {
+        gradientStart: ["table-header-start", 10],
+        gradientEnd: ["table-header-end", 90],
 
-        widthBottom : 1,
-        colorBottom : "border-main"
+        widthBottom: 1,
+        colorBottom: "border-main"
       }
     },
 
-    "table-header-cell" :
-    {
-      style :
-      {
-        widthRight : 1,
-        colorRight : "border-separator",
-        styleRight : "solid"
+    "table-header-cell": {
+      style: {
+        widthRight: 1,
+        colorRight: "border-separator",
+        styleRight: "solid"
       }
     },
 
+    "table-header-cell-hovered": {
+      style: {
+        widthRight: 1,
+        colorRight: "border-separator",
+        styleRight: "solid",
 
-    "table-header-cell-hovered" :
-    {
-      style :
-      {
-        widthRight : 1,
-        colorRight : "border-separator",
-        styleRight : "solid",
-
-        widthBottom : 1,
-        colorBottom : "table-header-hovered",
-        styleBottom : "solid"
+        widthBottom: 1,
+        colorBottom: "table-header-hovered",
+        styleBottom: "solid"
       }
     },
 
-    "table-scroller-focus-indicator" :
-    {
-      style :
-      {
-        width : 2,
-        color : "table-focus-indicator",
-        style : "solid"
+    "table-scroller-focus-indicator": {
+      style: {
+        width: 2,
+        color: "table-focus-indicator",
+        style: "solid"
       }
     },
 
-
-
-
-
     /*
     ---------------------------------------------------------------------------
       PROGRESSIVE
     ---------------------------------------------------------------------------
     */
 
-    "progressive-table-header" :
-    {
-       style :
-       {
-         width       : 1,
-         color       : "border-main",
-         style       : "solid"
-       }
+    "progressive-table-header": {
+      style: {
+        width: 1,
+        color: "border-main",
+        style: "solid"
+      }
     },
 
-    "progressive-table-header-cell" :
-    {
-      style :
-      {
-        gradientStart : ["table-header-start", 10],
-        gradientEnd : ["table-header-end", 90],
+    "progressive-table-header-cell": {
+      style: {
+        gradientStart: ["table-header-start", 10],
+        gradientEnd: ["table-header-end", 90],
 
-        widthRight : 1,
-        colorRight : "progressive-table-header-border-right"
+        widthRight: 1,
+        colorRight: "progressive-table-header-border-right"
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       MENU
     ---------------------------------------------------------------------------
     */
 
-    "menu" :
-    {
-      style : {
-        gradientStart : ["menu-start", 0],
-        gradientEnd : ["menu-end", 100],
-        shadowColor : "shadow",
-        shadowBlurRadius : 2,
-        shadowLength : 1,
-        width : 1,
-        color : "border-main"
+    menu: {
+      style: {
+        gradientStart: ["menu-start", 0],
+        gradientEnd: ["menu-end", 100],
+        shadowColor: "shadow",
+        shadowBlurRadius: 2,
+        shadowLength: 1,
+        width: 1,
+        color: "border-main"
       }
     },
 
-    "menu-separator" :
-    {
-      style :
-      {
-        widthTop    : 1,
-        colorTop    : "menu-separator-top",
+    "menu-separator": {
+      style: {
+        widthTop: 1,
+        colorTop: "menu-separator-top",
 
-        widthBottom : 1,
-        colorBottom : "menu-separator-bottom"
+        widthBottom: 1,
+        colorBottom: "menu-separator-bottom"
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       MENU BAR
     ---------------------------------------------------------------------------
     */
 
-    "menubar" :
-    {
-      style :
-      {
-        gradientStart : ["menubar-start", 0],
-        gradientEnd : ["menu-end", 100],
+    menubar: {
+      style: {
+        gradientStart: ["menubar-start", 0],
+        gradientEnd: ["menu-end", 100],
 
-        width : 1,
-        color : "border-separator"
+        width: 1,
+        color: "border-separator"
       }
     },
 
@@ -1061,14 +942,11 @@ qx.Theme.define("qx.theme.modern.Decoration",
     ---------------------------------------------------------------------------
     */
 
-    "app-header":
-    {
-      style :
-      {
-        gradientStart : ["#243B58", 0],
-        gradientEnd : ["#1D2D45", 100]
+    "app-header": {
+      style: {
+        gradientStart: ["#243B58", 0],
+        gradientEnd: ["#1D2D45", 100]
       }
-
     },
 
     /*
@@ -1077,11 +955,8 @@ qx.Theme.define("qx.theme.modern.Decoration",
     ---------------------------------------------------------------------------
     */
 
-    "progressbar" :
-    {
-
-      style:
-      {
+    progressbar: {
+      style: {
         width: 1,
         color: "border-input"
       }
@@ -1093,14 +968,12 @@ qx.Theme.define("qx.theme.modern.Decoration",
     ---------------------------------------------------------------------------
     */
 
-    "group-item" :
-    {
-      style :
-      {
-        startColorPosition : 0,
-        endColorPosition : 100,
-        startColor : "groupitem-start",
-        endColor : "groupitem-end"
+    "group-item": {
+      style: {
+        startColorPosition: 0,
+        endColorPosition: 100,
+        startColor: "groupitem-start",
+        endColor: "groupitem-end"
       }
     }
   }