[icinga-checkins] icinga.org: icingaweb2/feature/style-forms: Assimilate select elements with input elements

git at icinga.org git at icinga.org
Mon Nov 28 17:51:56 CET 2016


Module: icingaweb2
Branch: feature/style-forms
Commit: 4f170142c50c38c796724baded5bdc5e2dd2705e
URL:    https://git.icinga.org/?p=icingaweb2.git;a=commit;h=4f170142c50c38c796724baded5bdc5e2dd2705e

Author: Florian Strohmaier <florian.strohmaier at netways.de>
Date:   Mon Nov 28 17:51:52 2016 +0100

Assimilate select elements with input elements

---

 public/css/icinga/forms.less |   20 ++++++++++++++++++++
 public/img/select-icon.png   |  Bin 0 -> 319 bytes
 public/img/select-icon.svg   |   15 +++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index 1693eac..4b523d1 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -29,6 +29,26 @@ input[type=url] {
 select, textarea {
   width: 30em;
   max-width: 100%;
+  border: 1px solid @gray-lighter;
+  padding: @vertical-padding @horizontal-padding;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+      -ms-appearance: none;
+          appearance: none;
+}
+
+select {
+  background: url(../img/select-icon.svg) right center no-repeat;
+  background-size: contain;
+
+  // Hide original dropdown icon in IE
+  &::-ms-expand {
+    display: none;
+  }
+}
+
+.controls select {
+  padding: 0 @horizontal-padding;
 }
 
 .control-button,
diff --git a/public/img/select-icon.png b/public/img/select-icon.png
new file mode 100644
index 0000000..e7de677
Binary files /dev/null and b/public/img/select-icon.png differ
diff --git a/public/img/select-icon.svg b/public/img/select-icon.svg
new file mode 100644
index 0000000..91ebc43
--- /dev/null
+++ b/public/img/select-icon.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="30" viewBox="0 0 27 30" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <rect id="a" width="27" height="30"/>
+    <mask id="b" width="27" height="30" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#0095BF" transform="translate(9 8)">
+      <path d="M8.69367677,14.2847407 C8.69367677,14.3591587 8.66464007,14.4249891 8.60656578,14.4822338 L8.17101084,14.9115665 C8.11293655,14.9688111 8.04615213,14.997433 7.97065556,14.997433 C7.89515899,14.997433 7.82837457,14.9688111 7.77030028,14.9115665 L4.34683839,11.5370112 L0.923376491,14.9115665 C0.865302207,14.9688111 0.798517783,14.997433 0.723021215,14.997433 C0.647524646,14.997433 0.580740222,14.9688111 0.522665938,14.9115665 L0.0871109897,14.4822338 C0.0290367062,14.4249891 0,14.3591587 0,14.2847407 C0,14.2103226 0.0290367062,14.1444923 0.0871109897,14.0872476 L4.14648311,10.0858665 C4.20455739,10.0286219 4.27134182,10 4.34683839,10 C4.42233496,10 4.48911938,10.0286219 4.54719366,10.0858665 L8.60656578,14.0872476 C8.66464007,14.1444923 8.69367677,14.2103226 8.69367677,14.2847407 Z" transform="matrix(1 0 0 -1 0 24.997)"/>
+      <path d="M8.69367677,4.2847407 C8.69367677,4.35915874 8.66464007,4.4249891 8.60656578,4.48223375 L8.17101084,4.91156649 C8.11293655,4.96881114 8.04615213,4.99743304 7.97065556,4.99743304 C7.89515899,4.99743304 7.82837457,4.96881114 7.77030028,4.91156649 L4.34683839,1.53701119 L0.923376491,4.91156649 C0.865302207,4.96881114 0.798517783,4.99743304 0.723021215,4.99743304 C0.647524646,4.99743304 0.580740222,4.96881114 0.522665938,4.91156649 L0.0871109897,4.48223375 C0.0290367062,4.4249891 0,4.35915874 0,4.2847407 C0,4.21032265 0.0290367062,4.14449229 0.0871109897,4.08724764 L4.14648311,0.085866547 C4.20455739,0.0286218961 4.27134182,7.10542736e-15 4.34683839,7.10542736e-15 C4.42233496,7.10542736e-15 4.48911938,0.0286218961 4.54719366,0.085866547 L8.60656578,4.08724764 C8.66464007,4.14449229 8.69367677,4.21032265 8.69367677,4.2847407 Z" transform="matrix(-1 0 0 1 8.694 0)"/>
+    </g>
+    <use stroke="#979797" stroke-width="2" mask="url(#b)" opacity="0" xlink:href="#a"/>
+  </g>
+</svg>



More information about the icinga-checkins mailing list