summaryrefslogtreecommitdiffstats
path: root/skins/standard
diff options
context:
space:
mode:
authorKohei Yoshino <kohei.yoshino@gmail.com>2017-07-19 23:16:57 +0200
committerDylan William Hardison <dylan@hardison.net>2017-07-19 23:16:57 +0200
commit3d864bdde0aff3931aca3afa864228341aaa0e92 (patch)
treee0cd466756b55263cf8c8cd29284c9bab328d8f7 /skins/standard
parent4172494434f02d5aaf2254c7aa9a0110d9686ca9 (diff)
downloadbugzilla-3d864bdde0aff3931aca3afa864228341aaa0e92.tar.gz
bugzilla-3d864bdde0aff3931aca3afa864228341aaa0e92.tar.xz
Bug 1366143 - Fix alignment of select boxes
Diffstat (limited to 'skins/standard')
-rw-r--r--skins/standard/global.css48
-rw-r--r--skins/standard/material-icons/ic_unfold_more_18px.svg1
-rw-r--r--skins/standard/search_form.css3
3 files changed, 41 insertions, 11 deletions
diff --git a/skins/standard/global.css b/skins/standard/global.css
index e6f63a927..0772047c5 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -546,7 +546,7 @@ div.user_match {
.field_label {
text-align: right;
- vertical-align: top;
+ vertical-align: middle;
font-weight: bold;
}
.field_help_link {
@@ -830,7 +830,7 @@ a:hover, #header a:hover, #footer a:hover {
color: #00539f;
}
-select[multiple], textarea, input[type=text], input[type=password],
+select, textarea, input[type=text], input[type=password],
input[type=email], input[type=url], input[type=number], input:not([type]), .text_input, .yui-ac-input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -839,16 +839,16 @@ input[type=email], input[type=url], input[type=number], input:not([type]), .text
border-radius: .25em;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
background: white;
- padding: 4px 3px 5px;
+ padding: 4px;
color: #404040;
- vertical-align: top;
+ vertical-align: middle;
}
select[multiple], .text_input, .yui-ac-input, input {
font-size: 1em;
}
-select[multiple]:focus, textarea:focus, .text-input:focus, -yui-ac-input:focus, input:focus {
+select:focus, textarea:focus, .text-input:focus, -yui-ac-input:focus, input:focus {
border-color: #42a4e0;
-webkit-box-shadow: 0 0 0 2px rgba(73,173,227,0.4);
-moz-box-shadow: 0 0 0 2px rgba(73,173,227,0.4);
@@ -859,6 +859,40 @@ select, select[multiple] {
font-size: 12px;
}
+select:not([multiple]) {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ min-width: 2em;
+ height: 26px;
+ padding-right: 18px;
+ background-image: url(material-icons/ic_unfold_more_18px.svg), linear-gradient(to bottom, #FFF, #EEE);
+ background-position: center right;
+ background-repeat: no-repeat;
+ background-size: 18px 18px, cover;
+ vertical-align: middle;
+}
+
+select:disabled:not([multiple]) {
+ opacity: .6;
+ cursor: not-allowed;
+}
+
+/* Hack to remove dotted outline on Firefox */
+select:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #000;
+}
+
+/* Remove the arrow icon on IE */
+select::-ms-expand {
+ display: none;
+}
+
+option {
+ padding: 2px 5px;
+}
+
hr {
border: none;
height: 1px;
@@ -1548,10 +1582,6 @@ table.tabs {
/* search */
-#summary_field.search_field_row input {
- padding-bottom: 6px;
-}
-
body {
margin: 0;
padding: 15px 15px 2px 15px;
diff --git a/skins/standard/material-icons/ic_unfold_more_18px.svg b/skins/standard/material-icons/ic_unfold_more_18px.svg
new file mode 100644
index 000000000..ad95ff598
--- /dev/null
+++ b/skins/standard/material-icons/ic_unfold_more_18px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M9 4.12l2.38 2.38 1.06-1.06L9 2 5.56 5.44 6.62 6.5 9 4.12zm0 9.76L6.62 11.5l-1.06 1.06L9 16l3.44-3.44-1.06-1.06L9 13.88z"/></svg> \ No newline at end of file
diff --git a/skins/standard/search_form.css b/skins/standard/search_form.css
index 71ce22484..77f220980 100644
--- a/skins/standard/search_form.css
+++ b/skins/standard/search_form.css
@@ -28,7 +28,7 @@
#bug_id_container {
display: inline-block;
- vertical-align: middle;
+ vertical-align: top;
padding-bottom: 1ex;
}
@@ -92,7 +92,6 @@
#summary_field.search_field_row select
{
display: inline;
- padding-bottom: 0;
vertical-align: middle;
}