nils/gluon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gluon-config-mode-theme: add cross-browser styling for <select> elements

Browse Source 
Replace the ugly arrow shown in Firefox with a custom SVG arrow. Tested
and working in Firefox, Chrome and Edge. The arrow doesn't show in IE, but
the gluon-web-model JavaScript is already severely broken in IE, so we
don't care.
This commit is contained in:
Matthias Schiffer 2020-07-03 19:01:13 +02:00
parent 5263583b74
commit f75f40d29a
No known key found for this signature in database
GPG Key ID: 16EF3F64CB201D9C
3 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/gluon-config-mode-theme/files/lib/gluon/config-mode/www/static/gluon.css
View File

File diff suppressed because one or more lines are too long

29
package/gluon-config-mode-theme/sass/gluon.scss
View File

@ -326,6 +326,35 @@ input[type=checkbox] + label {
outline: 0;
}
.select-wrapper {
position: relative;
display: inline-block;
&::before {
position: absolute;
z-index: 1;
right: 0.05em;
top: calc(2px + 0.1em);
bottom: calc(2px + 0.1em);
width: 1.4em;
border-left: 0.05em solid rgba(0, 0, 0, 0.25);
pointer-events: none;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="5"><path fill="none" stroke="black" stroke-linejoin="bevel" d="M1,1L4,4L7,1"/></svg>')
center / 0.8em 0.5em
no-repeat
;
content: '';
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
}
option {
color: darken($ffzusatz, 30);
background: lighten($ffyellow, 30);

36
package/gluon-web-model/files/lib/gluon/web/view/model/lvalue.html
View File

@ -4,23 +4,25 @@
%>
<% if self.widget == "select" then %>
<select data-update="change"<%=
attr("id", id) ..
attr("name", id) ..
attr("size", self.size) ..
attr("data-type", "minlength(1)") ..
attr("data-optional", self.optional)
%>>
<% for i, entry in pairs(entries) do -%>
<option<%=
attr("id", id.."."..entry.key) ..
attr("value", entry.key) ..
attr("data-index", i) ..
attr("data-depends", self:deplist(entry.deps)) ..
attr("selected", (self:cfgvalue() == entry.key) and "selected")
%>><%|entry.value%></option>
<%- end %>
</select>
<div class="select-wrapper">
<select data-update="change"<%=
attr("id", id) ..
attr("name", id) ..
attr("size", self.size) ..
attr("data-type", "minlength(1)") ..
attr("data-optional", self.optional)
%>>
<% for i, entry in pairs(entries) do -%>
<option<%=
attr("id", id.."."..entry.key) ..
attr("value", entry.key) ..
attr("data-index", i) ..
attr("data-depends", self:deplist(entry.deps)) ..
attr("selected", (self:cfgvalue() == entry.key) and "selected")
%>><%|entry.value%></option>
<%- end %>
</select>
</div>
<% elseif self.widget == "radio" then %>
<div>
<% for i, entry in pairs(entries) do %>