diff --git a/source/UI/css/UI.css b/source/UI/css/UI.css index 3ba76d5b..41abd8d4 100644 --- a/source/UI/css/UI.css +++ b/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; } diff --git a/source/UI/js/Form/ButtonGroup.js b/source/UI/js/Form/ButtonGroup.js index ddb893a2..c1c5ff5e 100644 --- a/source/UI/js/Form/ButtonGroup.js +++ b/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 diff --git a/source/UI/js/Form/Checkbox.js b/source/UI/js/Form/Checkbox.js index 68971b33..24b286c0 100644 --- a/source/UI/js/Form/Checkbox.js +++ b/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'] diff --git a/source/UI/js/Form/Input.js b/source/UI/js/Form/Input.js index 37e8297b..3af912be 100644 --- a/source/UI/js/Form/Input.js +++ b/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 diff --git a/source/UI/js/Form/Label.js b/source/UI/js/Form/Label.js index 9ce78c69..e4cc8023 100644 --- a/source/UI/js/Form/Label.js +++ b/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 diff --git a/source/UI/js/Form/Select.js b/source/UI/js/Form/Select.js index e2e55427..6e2f98b9 100644 --- a/source/UI/js/Form/Select.js +++ b/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 diff --git a/source/UI/js/Panel/TabPanel.js b/source/UI/js/Panel/TabPanel.js index ca4b20a8..346d44e8 100644 --- a/source/UI/js/Panel/TabPanel.js +++ b/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'})