diff --git a/examples/BasicApp.html b/examples/BasicApp.html index 08099a6..66f2ca9 100644 --- a/examples/BasicApp.html +++ b/examples/BasicApp.html @@ -97,6 +97,47 @@

This is a test of the Universal Widget Toolkit for HTML/CSS/JavaScript.

+

+ Check out +

+
+ Try this
+ Action Preview Button +   +
+
+

Available Actions

+ +
+
+

Driver Joseph Rivera

+
+
+
Full name
+
Joseph P Rivera Jr
+
+
+
License status
+
+
+ Active +   +
+
+
+
+
+
+
+
+
This is an alert. You can use them to display inline warnings or error messages.
diff --git a/src/fonts/awesome/css/all.less b/src/fonts/awesome/css/all.css similarity index 100% rename from src/fonts/awesome/css/all.less rename to src/fonts/awesome/css/all.css diff --git a/src/uwt-web/common/uwt-actionpreviewbutton.less b/src/uwt-web/common/uwt-actionpreviewbutton.less index 9d6a8c9..64aed6b 100644 --- a/src/uwt-web/common/uwt-actionpreviewbutton.less +++ b/src/uwt-web/common/uwt-actionpreviewbutton.less @@ -73,6 +73,7 @@ div.uwt-actionpreviewbutton padding: 8px; margin-left: 8px; position: absolute; + z-index: 1; transition: all 0.3s; width: max-content; diff --git a/src/uwt-web/common/uwt-combobox.less b/src/uwt-web/common/uwt-combobox.less new file mode 100644 index 0000000..7848d96 --- /dev/null +++ b/src/uwt-web/common/uwt-combobox.less @@ -0,0 +1,4 @@ +div.uwt-combobox:not(.uwt-opened) > input +{ + cursor: default; +} \ No newline at end of file diff --git a/src/uwt-web/common/uwt.less b/src/uwt-web/common/uwt.less index a2572d7..08ba41a 100644 --- a/src/uwt-web/common/uwt.less +++ b/src/uwt-web/common/uwt.less @@ -53,7 +53,7 @@ @import "mobile/uwt.less"; @import "print/uwt.less"; -@import "../fonts/awesome/css/all.less"; +@import "../../fonts/awesome/css/all.css"; html { diff --git a/src/uwt-web/scripts/controls/DropDown.js b/src/uwt-web/scripts/controls/DropDown.js index eb5097e..a632f83 100644 --- a/src/uwt-web/scripts/controls/DropDown.js +++ b/src/uwt-web/scripts/controls/DropDown.js @@ -3,6 +3,7 @@ function DropDownWrapper(parentElement) this.ParentElement = parentElement; this.ParentContainer = this.ParentElement.parentElement; this.SelectElement = this.ParentElement; + this.WrapperElement = null; this.ShowPopupMenu = function() { @@ -18,16 +19,19 @@ function DropDownWrapper(parentElement) } } System.ClassList.Add(this.MenuElement, "uwt-visible"); + System.ClassList.Add(this.WrapperElement, "uwt-opened"); }; this.HidePopupMenu = function() { System.ClassList.Remove(this.MenuElement, "uwt-visible"); + System.ClassList.Remove(this.WrapperElement, "uwt-opened"); }; var div = document.createElement("div"); div.className = "uwt-combobox"; div.ni = this; div.tabIndex = 0; + this.WrapperElement = div; this.ParentElement.replaceWith(div); div.appendChild(this.SelectElement); diff --git a/src/uwt-web/themes/mso12/uwt-actionpreviewbutton.less b/src/uwt-web/themes/mso12/uwt-actionpreviewbutton.less new file mode 100644 index 0000000..36357f8 --- /dev/null +++ b/src/uwt-web/themes/mso12/uwt-actionpreviewbutton.less @@ -0,0 +1,48 @@ +div.uwt-actionpreviewbutton +{ + &> a.apb-button + { + border: 1px solid #7490ca; + background: linear-gradient(to bottom, #fafcfe 0%, #b6caf1 100%); + padding: 0px; + width: 22px; + height: 20px; + + &:hover + { + background: linear-gradient(to bottom, #fffffb 0%, #ffe8a7 100%); + border-color: #dbce99; + } + + &::before + { + content: " "; + background-repeat: no-repeat; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQM2MCPeKV0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACCElEQVQoz5WRTUiUQRyHn5WNzY9ITcPQi0VFahJ9QYJFeqoOHj1mduhYUrcIo+xQXSrKq6eyAkGDwKVTWIYUikmCl6Lv1or3c9933t2d+XcwdbcM7IFhGJjf//cME+vtdwXAV+ArwSjwQxujIAR0ZGEUGGx0ZBEoMDEHUTAx2hWLA+xsKMYNAcBVIGExngJPgahNeCrEKNChjRdZaGXz8cMUAHGAF5PhP9sBcspGFAQxi1y00L7E3ftjshImK6LyVuAZCTwjKdfIt3kjLUe7ZcngTyQHGeDmwBAmsElHDj8T77jYfauwHYi7SlYMD9wbYc/2jTTuOERWC2PPxzl/9Qx9p28gLE8pEuy/DPoGr7C5rpz2g61UVVZRWb6BtsPH2FXfwonLnQV3i1y13LzYvsZK0NTYQE5DlDWklcYPNfVbm1nnrMXJs45L3iHze4+CCKFoIRwa3EBje4av8xY6yhQa5L97kS9Zi8mpafxQ44YayzdYfo6Zl6MkiitIvZ9dNjDKKQgbJfT3XOdc71l+WGmqa7eQ+m4zMzFK6vMcR/aXMf9mkI72Zi71uRL3gLaOkyv9Jk76FTo9TC4bkohF7K1THKgw1Gwr5eH4J9bLW2KskpEnr+XR7VMc311CdU0ZpbVV3Emq1Q8ASD6bkwfXuuhoLGF42qHzwhD/TXJsTlr3Ncnjp7MC8As5fEyps2YlkwAAAABJRU5ErkJggg=='); + width: 15px; + height: 16px; + margin-top: 3px; + margin-left: 3px; + } + } + &.apb-selected > a.apb-button + { + background: linear-gradient(to bottom, #dba876 0%, #ff9708 100%); + border-color: #ffb206; + } + &> div.apb-preview + { + border: 1px solid #868686; + background: #fafafa; + box-shadow: 3px 3px 3px #c0c0c0; + &> div.apb-actions + { + background-color: #d1dff8; + border-right: 1px solid #7490ca; + &> h2 + { + padding: 8px 16px; + } + } + } +} diff --git a/src/uwt-web/themes/mso12/uwt-combobox.less b/src/uwt-web/themes/mso12/uwt-combobox.less new file mode 100644 index 0000000..26e3e48 --- /dev/null +++ b/src/uwt-web/themes/mso12/uwt-combobox.less @@ -0,0 +1,15 @@ +div.uwt-combobox +{ + &::after + { + content: " "; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAECAYAAABGM/VAAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQQQKhgtRYYAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKElEQVQI12NMrF77nwENME2o9kURgPM/fvv1P7F67f+P336h6kIWAADIwRNkiX6QkwAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; + width: 8px; + height: 8px; + margin-left: -16px; + display: inline-block; + background-size: 8px; + pointer-events: none; + } +} \ No newline at end of file diff --git a/src/uwt-web/themes/mso12/uwt-disclosure.less b/src/uwt-web/themes/mso12/uwt-disclosure.less index e02f5c2..4654d5e 100644 --- a/src/uwt-web/themes/mso12/uwt-disclosure.less +++ b/src/uwt-web/themes/mso12/uwt-disclosure.less @@ -2,16 +2,34 @@ div.uwt-disclosure { &> div.uwt-header { - background: #deecff; + position: relative; + + background: linear-gradient(to right, #d9e7fd 0%,#e3edfe 50%, #d9e7fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: 8px; - border-bottom: 1px solid #b2b2b2; + border-bottom: 1px solid #b5cffc; cursor: default; user-select: none; &:hover { background: linear-gradient(to right, #ffab40 0%,#ffe7a2 50%, #ffe7a2 51%, #ffab40 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - + } + &::after + { + content: " "; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQMjN4oPWuoAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAALklEQVQI12NMrF77n4GBgWF+azAjAxTAxOAcmAAyG6tqZFMYsBrHwMDAOAB2AgAmHS5lfjAyDAAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; + display: inline-block; + position: absolute; + right: 10px; + top: 12px; + + width: 7px; + height: 8px; } } + &.uwt-expanded > div.uwt-header::after + { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQMjLu5k8ioAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAK0lEQVQI12NgQAKJ1Wv/I/MZsUnMbw1mZGBgYGBCloAJwviM6BLYjKennQA4bCc54IMQ+wAAAABJRU5ErkJggg=='); + } } \ No newline at end of file diff --git a/src/uwt-web/themes/mso12/uwt-page.less b/src/uwt-web/themes/mso12/uwt-page.less index da89d60..c223293 100644 --- a/src/uwt-web/themes/mso12/uwt-page.less +++ b/src/uwt-web/themes/mso12/uwt-page.less @@ -13,4 +13,21 @@ body > div.uwt-footer, body > form > div.uwt-footer background: linear-gradient(to bottom, #e3efff 0%,#c5deff 40%,#add1ff 41%,#c0dbff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: @ControlForegroundColor; + + padding: 8px; +} + +a +{ + color: #15428b; + text-decoration: none; + &:hover + { + text-decoration: underline; + } +} + +body > div.uwt-page > div.uwt-content, body > form > div.uwt-page > div.uwt-content +{ + padding: 8px; } \ No newline at end of file