some more support for squared style

source/UI/css/UI.css

@@ -1228,10 +1228,17 @@ OxSelect
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
 }
+.OxLabelSelect.OxSquared > .OxTitle {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
 .OxLabelSelect.OxRounded.OxSelected {
     border-bottom-left-radius: 8px;
 }
-.OxLabelSelect.OxRounded.OxSelected > .OxTitle {
+.OxLabelSelect.Squared.OxSelected {
+    border-bottom-left-radius: 4px;
+}
+.OxLabelSelect.OxSelected > .OxTitle {
     border-bottom-left-radius: 0;
 }
 

source/UI/js/Form/ButtonGroup.js

@@ -58,6 +58,7 @@ Ox.ButtonGroup = function(options, self) {
             overlap: self.options.overlap == 'left' && i == 0 ? 'left'
                 : self.options.overlap == 'right' && i == self.options.buttons.length - 1 ? 'right'
                 : 'none',
+            style: self.options.style,
             title: button.title || button,
             tooltip: button.tooltip,
             width: button.width

source/UI/js/Form/Checkbox.js

@@ -94,7 +94,7 @@ Ox.Checkbox = function(options, self) {
     self.$button = Ox.Button({
             disabled: self.options.disabled,
             id: self.options.id + 'Button',
-            style: self.options.style,
+            style: self.options.style != 'rounded' ? self.options.style : '',
             type: 'image',
             value: self.options.value ? 'check' : 'none',
             values: ['none', 'check']

source/UI/js/Form/Input.js

@@ -212,6 +212,7 @@ Ox.Input = function(options, self) {
     if (self.options.label) {
         self.$label = Ox.Label({
             overlap: 'right',
+            style: self.options.style,
             textAlign: 'right',
             title: self.options.label,
             width: self.options.labelWidth

source/UI/js/Form/Label.js

@@ -27,13 +27,19 @@ Ox.Label = function(options, self) {
             width: function() {
                 that.css({
                     width: self.options.width - (
-                        self.options.style == 'rounded' ? 14 : 8
+                        Ox.contains(['rounded', 'squared'], self.options.style)
+                        ? 14 : 8
                     ) + 'px'
                 });
             }
         })
         .addClass(
-            'OxLabel Ox' + Ox.toTitleCase(self.options.style) 
+            'OxLabel'
+            + (
+                self.options.style != 'rounded'
+                ? ' Ox' + Ox.toTitleCase(self.options.style)
+                : ''
+            )
             + (self.options.disabled ? ' OxDisabled' : '')
             + (
                 self.options.overlap != 'none'
@@ -42,7 +48,8 @@ Ox.Label = function(options, self) {
         )
         .css(Ox.extend(self.options.width == 'auto' ? {} : {
             width: self.options.width - (
-                self.options.style == 'rounded' ? 14 : 8
+                Ox.contains(['rounded', 'squared'], self.options.style)
+                ? 14 : 8
             ) + 'px'
         }, {
             textAlign: self.options.textAlign

source/UI/js/Form/Select.js

@@ -127,6 +127,7 @@ Ox.Select = function(options, self) {
     if (self.options.label) {
         self.$label = Ox.Label({
             overlap: 'right',
+            style: self.options.style,
             textAlign: 'right',
             title: self.options.label,
             width: self.options.labelWidth

source/UI/js/Panel/TabPanel.js

@@ -22,6 +22,7 @@ Ox.TabPanel = function(options, self) {
         .defaults({
             content: null,
             size: 24,
+            style: 'default',
             tabs: []
         })
         .options(options || {})
@@ -40,6 +41,7 @@ Ox.TabPanel = function(options, self) {
             buttons: self.options.tabs,
             id: 'tabs',
             selectable: true,
+            style: self.options.style,
             value: self.selected
         })
         .css({top: (self.options.size - 16) / 2 + 'px'})