[checkmk-commits] Improved styling of labels a bit

Lars Michelsen lm at mathias-kettner.de
Thu May 2 08:00:32 CEST 2019


Module: check_mk
Branch: master
Commit: b275fca3b77c4312d2e2ec567e1001436caf4d0f
URL:    http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=b275fca3b77c4312d2e2ec567e1001436caf4d0f

Author: Lars Michelsen <lm at mathias-kettner.de>
Date:   Tue Apr 30 18:00:00 2019 +0200

Improved styling of labels a bit

Change-Id: Ibafd269246d65cd7d9e5f4e2487cacf66b0c6ff5

---

 web/htdocs/themes/classic/scss/_pages.scss  | 36 ++++++++++++++++++++++++++---
 web/htdocs/themes/facelift/scss/_pages.scss | 36 ++++++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/web/htdocs/themes/classic/scss/_pages.scss b/web/htdocs/themes/classic/scss/_pages.scss
index 5500f8c..89ae587 100644
--- a/web/htdocs/themes/classic/scss/_pages.scss
+++ b/web/htdocs/themes/classic/scss/_pages.scss
@@ -1535,28 +1535,58 @@ table.data.job_table> tbody > tr > td.job_pid{
     text-align: right;
 }
 
-.tagify, .tagify[readonly] {
+.tagify {
+  $self: &;
+  $tagMargin: 0 0 2px 5px;
+  $tagPad: .1em .3em;
+
   border: none;
 
+  #{ $self }__input {
+    padding: $tagPad;
+    margin: $tagMargin;
+  }
+
+  &[readonly] {
+    tag > div {
+      padding: $tagPad;
+    }
+  }
+
   tag {
-    margin: 0 0 0 5px;
+    margin: 0 0 2px 5px;
 
     > div {
+      padding: $tagPad;
+      padding-right: nth($tagPad, 2) * 5;
+      margin: $tagMargin;
       color: #fff;
     }
 
     x {
-      font-size: 11px;
+      top: 45%;
+      right: 2px;
+      font-size: 10px;
+      line-height: 14px;
     }
 
     &:hover:not([readonly]) div::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       opacity: 0.5;
       box-shadow: none;
     }
 
     > div::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       background: #00a8b5;
       box-shadow: none;
+      animation: none;
     }
 
     &.explicit > div::before {
diff --git a/web/htdocs/themes/facelift/scss/_pages.scss b/web/htdocs/themes/facelift/scss/_pages.scss
index 779bf7e..b5cacaf 100644
--- a/web/htdocs/themes/facelift/scss/_pages.scss
+++ b/web/htdocs/themes/facelift/scss/_pages.scss
@@ -30,28 +30,58 @@ Boston, MA 02110-1301 USA.
    styles are not used in the sidebar and in Mobile. */
 
 
-.tagify, .tagify[readonly] {
+.tagify {
+  $self: &;
+  $tagMargin: 0 0 2px 5px;
+  $tagPad: .1em .3em;
+
   border: none;
 
+  #{ $self }__input {
+    padding: $tagPad;
+    margin: $tagMargin;
+  }
+
+  &[readonly] {
+    tag > div {
+      padding: $tagPad;
+    }
+  }
+
   tag {
-    margin: 0 0 0 5px;
+    margin: 0 0 2px 5px;
 
     > div {
+      padding: $tagPad;
+      padding-right: nth($tagPad, 2) * 5;
+      margin: $tagMargin;
       color: #fff;
     }
 
     x {
-      font-size: 11px;
+      top: 45%;
+      right: 2px;
+      font-size: 10px;
+      line-height: 14px;
     }
 
     &:hover:not([readonly]) div::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       opacity: 0.5;
       box-shadow: none;
     }
 
     > div::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       background: #00a8b5;
       box-shadow: none;
+      animation: none;
     }
 
     &.explicit > div::before {



More information about the checkmk-commits mailing list