switching back to (better) icons

build/css/ox.ui.css

@@ -207,8 +207,7 @@ input[type=image].OxLarge {
 input[type=image].OxLarge {
     width: 18px;
 }
-input[type=image].OxMedium,
-.OxButton.OxSymbol.OxMedium {
+input[type=image].OxMedium {
     width: 14px;
 }
 input[type=image].OxSmall {
@@ -329,12 +328,12 @@ div.OxInput > .OxInputLabel {
 div.OxInput > .OxButton {
     float: left;
     //margin-left: 1px;
-    margin-top: -2px;
+    margin-top: -1px;
 }
 div.OxInput > .OxButton:last-child {
     float: left;
     margin-left: -1px;
-    margin-top: -2px;
+    margin-top: -1px;
 }
 input.OxInput {
     float: left;
@@ -399,9 +398,10 @@ OxSelect
 --------------------------------------------------------------------------------
 */
 .OxSelect.OxMedium {
-
+    margin-left: 0;
 }
 .OxSelect > .OxButton {
+    float: right;
     text-align: left;
 }
 .OxSelect > .OxSymbol {
@@ -411,7 +411,9 @@ OxSelect
     -webkit-user-select: none;
 }
 .OxSelect.OxMedium > .OxSymbol {
-    margin: -16px 0 0 8px;
+    float: right;
+    margin: -16px 0 0 -4px;
+    z-index: 9;
 }
 
 /*

build/js/ox.ui.js

@@ -1554,7 +1554,7 @@ requires
                     type: self.options.type == "text" ? "button" : "image"
                 })
                 .addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
-                    (self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
+                    (self.options.style != "default" ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
                     (self.options.disabled ? " OxDisabled": "") +
                     (self.options.selected ? " OxSelected": ""))
                 .mousedown(mousedown)
@@ -1772,9 +1772,9 @@ requires
             that.$label && that.$label.click(select);
             that.$select = new Ox.Button({
                     style: "symbol",
-                    // type: "image",
-                    // value: "select"
-                    value: oxui.symbols.select
+                    type: "image",
+                    value: "select"
+                    // value: oxui.symbols.select
                 })
                 .click(select)
                 .appendTo(that);
@@ -1818,9 +1818,9 @@ requires
         if (self.options.clear) {
             that.$clear = new Ox.Button({
                     style: "symbol",
-                    //type: "image",
-                    //value: "clear"
-                    value: oxui.symbols.clear
+                    type: "image",
+                    value: "clear"
+                    //value: oxui.symbols.clear
                 })
                 .click(clear)
                 .appendTo(that);
@@ -2058,20 +2058,20 @@ requires
     Ox.Range
 
     options:
-        animate     boolean         if true, animate thumb
-        arrows      boolean         if true, show arrows
-        arrowImages array           arrow symbols, like ["minus", "plus"]
-        arrowStep   number          step when clicking arrows
-        max         number          maximum value
-        min         number          minimum value
-        orientation string          "horizontal" or "vertical"
-        step        number          step between values
-        size        number          width or height, in px
-        thumbSize   number          minimum width or height of thumb, in px
-        thumbValue  boolean         if true, display value on thumb
-        trackImages string or array one or multiple track background image URLs          
-        trackStep   number          0 (scroll here) or step when clicking track
-        value       number          initial value
+        animate      boolean         if true, animate thumb
+        arrows       boolean         if true, show arrows
+        arrowStep    number          step when clicking arrows
+        arrowSymbols array           arrow symbols, like ["minus", "plus"]
+        max          number          maximum value
+        min          number          minimum value
+        orientation  string          "horizontal" or "vertical"
+        step         number          step between values
+        size         number          width or height, in px
+        thumbSize    number          minimum width or height of thumb, in px
+        thumbValue   boolean         if true, display value on thumb
+        trackImages  string or array one or multiple track background image URLs          
+        trackStep    number          0 (scroll here) or step when clicking track
+        value        number          initial value
     ----------------------------------------------------------------------------
     */
 
@@ -2085,8 +2085,8 @@ requires
                 .defaults({
                     animate: false,
                     arrows: false,
-                    arrowImages: ["previous", "next"],
                     arrowStep: 1,
+                    arrowSymbols: ["previous", "next"],
                     max: 100,
                     min: 0,
                     orientation: "horizontal",
@@ -2121,7 +2121,7 @@ requires
             var $arrowDec = Ox.Button({
                     style: "symbol",
                     type: "image",
-                    value: self.options.arrowImages[0]
+                    value: self.options.arrowSymbols[0]
                 })
                 .addClass("OxArrow")
                 .mousedown(mousedownArrow)
@@ -2162,7 +2162,7 @@ requires
             var $arrowInc = Ox.Button({
                     style: "symbol",
                     type: "image",
-                    value: self.options.arrowImages[1]
+                    value: self.options.arrowSymbols[1]
                 })
                 .addClass("OxArrow")
                 .mousedown(mousedownArrow)
@@ -2312,14 +2312,13 @@ requires
             .click(clickButton)
             .appendTo(that);
 
-        that.$symbol = $("<div>", {
-                "class": "OxSymbol",
-                html: oxui.symbols.select
+        that.$symbol = new Ox.Button({
+                style: "symbol",
+                type: "image",
+                value: "select"
             })
-            .click(function() {
-                that.$button.trigger("click");
-            })
-            .appendTo(that.$element);
+            .click(clickButton)
+            .appendTo(that);
 
         that.$menu = new Ox.Menu({
             element: that.$button,
@@ -2355,7 +2354,7 @@ requires
             // fixme: silly hack, and won't work for css()
             that.$element.width(val + 16);
             that.$button.width(val);
-            that.$symbol.width(val);
+            //that.$symbol.width(val);
             return that;
         };