[icinga-checkins] icinga.org: icingaweb2/feature/beautify-filter-styling: CSS: Beautify filter editor styles

git at icinga.org git at icinga.org
Wed Jun 15 16:26:56 CEST 2016


Module: icingaweb2
Branch: feature/beautify-filter-styling
Commit: 136c90e3414d1a2333f6cafc93e0b8bdfc4571b3
URL:    https://git.icinga.org/?p=icingaweb2.git;a=commit;h=136c90e3414d1a2333f6cafc93e0b8bdfc4571b3

Author: Florian Strohmaier <florian.strohmaier at netways.de>
Date:   Wed Jun 15 16:22:03 2016 +0200

CSS: Beautify filter editor styles

---

 modules/eventdb/public/css/module.less |  189 ++++++++++++++++++++++----------
 1 file changed, 130 insertions(+), 59 deletions(-)

diff --git a/modules/eventdb/public/css/module.less b/modules/eventdb/public/css/module.less
index 3a39b01..34f00aa 100644
--- a/modules/eventdb/public/css/module.less
+++ b/modules/eventdb/public/css/module.less
@@ -1,80 +1,146 @@
-
 .filter {
-	.clearfix();
-	padding: 0 0 @vertical-padding 0;
+  .clearfix();
+  padding: 0 0 @vertical-padding 0;
 
-	form {
-		display: block;
-		clear: both;
-	}
+  .search {
+      float: right;
+  }
 
-	.tree {
-		padding-left: 0;
-	}
-}
+  .tree {
+      padding-left: 0;
+  }
 
-div.filter form.editor ul.tree li .datafilter li.active.active {
-	background-color: none !important;
-}
+  .filter-field {
 
-.input-btn-grp {
-    .rounded-corners();
-    background: @gray-lighter;
-    color: @icinga-blue;
-	padding: 0 @horizontal-padding;
-	float: right;
-
-    input.search {
-	    background: none;
-	    border-bottom: none;
-	    -webkit-appearance: none;
-	    -moz-appearance: none;
-	    -ms-appearance: none;
-	    appearance: none;
-	    padding-left: 0;
-		min-width: 8em;
-		width: auto;
-    }
+    width: auto;
+    display: block;
 
-    input.search::-webkit-input-placeholder {
-	    color: @gray-light;
+    > a > span {
+      color: @text-color;
+      padding: .25em .5em;
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
     }
 
-    input.search:-moz-input-placeholder {
-	    color: @gray-light;
+    > a {
+        display: block;
+        text-decoration: none;
     }
 
-    input.search::-moz-input-placeholder {
-	    color: @gray-light;
+    > a > i {
+      color: @icinga-blue;
     }
 
-    input.search::-ms-input-placeholder {
-	    color: @gray-light;
+    &.empty > a > span {
+      color: @gray-light;
     }
+  }
+}
 
-    input.search::input-placeholder {
-	    color: @gray-light;
-    }
+.editor {
+  clear: both;
+  padding: @vertical-padding 0;
 
-    input.search:focus {
-	    background-image: none !important;
-    }
+  .buttons {
+    .clearfix();
+    margin-top: @vertical-padding;
+  }
+
+  .buttons > input[name=submit] {
+    float: right
+  }
+
+  .buttons > input[name=cancel] {
+    margin-right: @horizontal-padding;
+  }
+}
+
+.input-btn-grp {
+  .rounded-corners();
+  background: @gray-lighter;
+  color: @icinga-blue;
+  padding: 0 @horizontal-padding;
+  float: right;
+
+  > i {
+  	padding: 0.25em 0;
+  	display: inline-block;
+  }
+
+  input.search {
+    background: none;
+    border-bottom: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    padding-left: 0;
+    min-width: 8em;
+    width: auto;
+    line-height: inherit;
+    padding: .25em .5em;
+  }
+
+  input.search::-webkit-input-placeholder {
+    color: @gray-light;
+  }
+
+  input.search:-moz-placeholder {
+    color: @gray-light;
+  }
+
+  input.search::-moz-placeholder {
+    color: @gray-light;
+  }
+
+  input.search:-ms-input-placeholder {
+    color: @gray-light;
+  }
+
+  input.search::input-placeholder {
+    color: @gray-light;
+  }
+
+  input.search:focus {
+    background-image: none !important;
+  }
 }
 
 .btn-grp {
-	.rounded-corners();
-    background: @gray-lighter;
-    color: @icinga-blue;
-	padding: 0 @horizontal-padding;
-	width: 8em;
-	float: left;
-
-	> a {
-		max-width: 8em;
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
+  .rounded-corners();
+  background: @gray-lighter;
+  color: @icinga-blue;
+  padding: 0 @horizontal-padding;
+  float: left;
+
+  > a {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.controls {
+  border-bottom: 1px solid @gray-lighter;
+
+  &:after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 12px;
+    position: absolute;
+    bottom: -13px;
+    margin-left: - at horizontal-padding;
+    background: -webkit-linear-gradient(top, #ffffff 0%, rgba(255,255,255,0) 100%);
+    background:    -moz-linear-gradient(top, #ffffff 0%, rgba(255,255,255,0) 100%);
+    background:     -ms-linear-gradient(top, #ffffff 0%, rgba(255,255,255,0) 100%);
+    background:         linear-gradient(top, #ffffff 0%, rgba(255,255,255,0) 100%);
+  }
+}
+
 .status-bar {
   .clearfix();
   position: fixed;
@@ -103,8 +169,13 @@ div.filter form.editor ul.tree li .datafilter li.active.active {
   }
 }
 
+div.filter form.editor ul.tree li.active {
+  background: none !important;
 }
 
+ul.tree input {
+  margin-bottom: 0.3em;
+  margin-left: 1em;
 }
 
 .toolbar {



More information about the icinga-checkins mailing list