[checkmk-commits] GUI CSS: Refactored dashboard styles to nested structure and for sass linting ( CMK-1171)

Module: check_mk Branch: master Commit: b303aa0b05950b022546d7d8f81b5b883a5c9290 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=b303aa0b05950b… Author: Kenneth Okoh &lt;ko(a)mathias-kettner.de&gt; Date: Fri Mar 29 17:04:55 2019 +0100 GUI CSS: Refactored dashboard styles to nested structure and for sass linting (CMK-1171) Change-Id: I9f3e8dec149fde885b61869083a7e693455084d6 --- web/htdocs/themes/facelift/scss/_dashboard.scss | 289 ++++++++++++------------ 1 file changed, 147 insertions(+), 142 deletions(-) diff --git a/web/htdocs/themes/facelift/scss/_dashboard.scss b/web/htdocs/themes/facelift/scss/_dashboard.scss index 483d34f..7c4b36b 100644 --- a/web/htdocs/themes/facelift/scss/_dashboard.scss +++ b/web/htdocs/themes/facelift/scss/_dashboard.scss @@ -27,223 +27,228 @@ Boston, MA 02110-1301 USA. /* Styles used by the dashboard only */ body.dashboard { - overflow: hidden; + overflow: hidden; } div#dashboard { - position: absolute; - padding: 0; - margin: 0; + position: absolute; + padding: 0; + margin: 0; } div.dashlet { - position: absolute; - padding: 0; - margin: 0; - display: none; - z-index: 1; -} - -/* content area of dashlet, if no iframes are used */ -div.dashlet div.dashlet_inner { + position: absolute; + z-index: 1; + display: none; + padding: 0; + margin: 0; + + /* content area of dashlet, if no iframes are used */ + div.dashlet_inner { position: absolute; padding: 0; margin: 0; overflow: hidden; -} - -/* Dashlets with "background" set to True */ -.dashlet .dashlet_inner.background { - background-color: #cbd6da; -} -/* TODO: Reproduce these html elements */ -div.dashlet div.really, -div.dashlet div.success, -div.dashlet div.error, -div.dashlet div.message, -div.dashlet div.warning { + /* Dashlets with "background" set to True */ + .dashlet_inner.background { + background-color: #cbd6da; + } + } + + /* TODO: Reproduce these html elements */ + div.really, + div.success, + div.error, + div.message, + div.warning { margin: 0; border-radius: 0; box-shadow: 0; -} + } -div.dashlet iframe { + iframe { border-style: none; -} + } -div.dashlet > div.title { + > div.title { position: absolute; - background: $theme-color-white; - /* IE < 9 */ - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#4c000000', endColorstr='#4c000000'); left: 0; width: 150px; /* will be changed by javascript later */ - color: $theme-color-table-text; - padding: 0px; - margin: 0px; - border: 1px solid $theme-color-table-border; - border-bottom: 0px solid; - border-radius: 5px 5px 0 0; - padding-left: 9px; + height: 17px; + padding: 0; padding-top: 4px; - font-weight: 500; + padding-left: 9px; + margin: 0; overflow: hidden; - height: 17px; - white-space: nowrap; font-size: $theme-font-size-small; - text-transform: uppercase; + font-weight: 500; letter-spacing: 2px; -} + color: $theme-color-table-text; + text-transform: uppercase; + white-space: nowrap; + background: $theme-color-white; + border: 1px solid $theme-color-table-border; + border-bottom: none solid; + border-radius: 5px 5px 0 0; + /* IE < 9 */ + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#4c000000', endColorstr='#4c000000'); -div.dashlet > div.title span { - padding-left: 8px; -} + span { + padding-left: 8px; + } + } -div.dashlet.edit div.title span { + &.edit div.title span { padding-left: 27px; -} + } -div.dashlet div.title a { + div.title a { + color: #fff; text-decoration: none; - color: white; -} - -div.dashlet div.title a:hover { - text-decoration: underline; -} -div.dashlet > div.title span a, div.dashlet > div.title span body.main .popup_menu span, body.main .popup_menu div.dashlet > div.title span span { - color: $theme-color-table-text; -} + &:hover { + text-decoration: underline; + } + } -/* Overview dashlet is not selectable TODO: Check if this style can be dropped */ -table.dashlet_overview h2 { - margin: 8px 0px 8px 0px; - font-size: 10pt; -} - -/* Styles for various builtin dashlets */ -div.dashlet canvas.pie { + /* Styles for various builtin dashlets */ + canvas.pie { position: absolute; top: 7px; left: 10px; z-index: 10; transform: scale(0.8, 0.8); transform-origin: center; -} + } -div.dashlet img.globe { + img.globe { position: absolute; top: 5px; left: 10px; z-index: 20; + filter: grayscale(100%); transform: scale(0.8, 0.8); transform-origin: center; - filter: grayscale(100%); -} + } -div.dashlet table.hoststats { - margin-top: 0px; + table.hoststats { + position: absolute; + right: 0; width: 135px; height: 142px; + margin-top: 0; border-collapse: collapse; - border-spacing: 0px; - position:absolute; - right: 0px; -} - -/* TODO: Remove this style after decoupling from classic theme */ -div.dashlet table.hoststats.narrow { - margin-top: 0px; -} - -div.dashlet table.hoststats th, table.hoststats td { - padding: 0px 4px; - border-color: #498aa6; - border-style: solid none; - border-width: 1px; - vertical-align: middle; -} - -div.dashlet table.hoststats th { - text-align: left; - background-color: transparent; -} - -div.dashlet table.hoststats td { - text-align: right; - background-color: #95bbcd; -} - -div.dashlet table.hoststats th.color, div.dashlet table.hoststats td.color { - padding: 0px; - width: 4px; + border-spacing: 0; + + &.narrow { + /* TODO: Remove this style after decoupling from classic theme */ + margin-top: 0; + + th, td { + font-size: 11px; + font-weight: normal; + } + } + + th, td { + padding: 0 4px; + vertical-align: middle; + border-color: #498aa6; + border-style: solid none; + border-width: 1px; + + &.color { + width: 4px; + padding: 0; + } + } + + th { + text-align: left; + background-color: transparent; + } + + td { + text-align: right; + background-color: #95bbcd; + } + + a { + color: #000; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} + +div.dashlet > div.title span a, +div.dashlet > div.title span body.main .popup_menu span, +body.main .popup_menu div.dashlet > div.title span span { + color: $theme-color-table-text; } -div.dashlet table.hoststats.narrow th, table.hoststats.narrow td { - font-size: 8pt; - font-weight: normal; -} - -div.dashlet table.hoststats a { - color: black; - text-decoration: none; -} -div.dashlet table.hoststats a:hover { - text-decoration: underline; +/* Overview dashlet is not selectable TODO: Check if this style can be dropped */ +table.dashlet_overview h2 { + margin: 8px 0; + font-size: 13px; } -div.dashlet_inner div.stats table.hoststats a, div.dashlet_inner div.stats table.hoststats body.main .popup_menu span, body.main .popup_menu div.dashlet_inner div.stats table.hoststats span { - color: $theme-color-text; +div.dashlet_inner div.stats table.hoststats a, +div.dashlet_inner div.stats table.hoststats body.main .popup_menu span, +body.main .popup_menu div.dashlet_inner div.stats table.hoststats span { + color: $theme-color-text; } div.dashlet_inner div.stats { - background-color: $theme-color-white; - position: relative; - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; + position: relative; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + background-color: $theme-color-white; + + table th, table td { + background: $theme-color-white; + border-top: 1px solid $theme-color-table-border; + border-bottom: none; + } } body.main.dashlet { - padding: 8px 0px; + padding: 8px 0; background: transparent; border-top: none; box-sizing: border-box; -} -body.main.dashlet table.data.table { - padding: 0px 8px; -} + table.data.table { + padding: 0 8px; -body.main.dashlet table.data.table tr.data { - background: $theme-color-nuance-13; - transition: .15s ease-in-out; -} - -body.main.dashlet table.data.table tr.data:hover { - background-color: $theme-color-background; -} + tr.data { + background: $theme-color-nuance-13; + transition: .15s ease-in-out; -div.dashlet_inner div.stats table th, div.dashlet_inner div.stats table td { - background: $theme-color-white; - border-top: 1px solid $theme-color-table-border; - border-bottom: none; + &:hover { + background-color: $theme-color-background; + } + } + } } div[id^=dashlet] div.dashlet_inner > div { border: 1px solid $theme-color-table-border; - box-sizing: border-box; border-top: none; + box-sizing: border-box; transition: .15s ease-in-out; } iframe[id^=dashlet_iframe] { - transition: .15s ease-in-out; background: $theme-color-white; + transition: .15s ease-in-out; } ///**