[checkmk-commits] Improved styling of labels a bit

Module: check_mk Branch: master Commit: b275fca3b77c4312d2e2ec567e1001436caf4d0f URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=b275fca3b77c43… Author: Lars Michelsen <lm(a)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; + 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; } + 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; + 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; } + top: 0; + right: 0; + bottom: 0; + left: 0; background: #00a8b5; box-shadow: none; + animation: none; } &.explicit > div::before {