grafana/public/sass/components/_panel_table.scss
Torkel Ödegaard 34c397002c PanelChrome: Use react Panel Header for angular panels. (#21265)
* WIP: Angular panel chrome, this is going to be tricky

* AngularPanelChrome: initial render works

* Options are showing up

* viz options working

* Fixed singlestat background

* AngularPanels: Fixed alert tab

* Removed anuglar loading spinner

* Dashboard: Refactor dashboard reducer & actions

* Dashboard: minor refactoring

* PanelChrome: loading state moved to header

* Subscribe to render events to solve title update issue

* Time info and query errors now works

* PanelHeader: unifying angular and react behavior

* added getPanelMenu test

* Scrollable now works again

* Various fixes

* Making stuff work

* seperate event emitter for angular

* Fixed issue sending updated dimensions to angular panel

* Minor tweaks

* Fixed tests

* Alerting: alert state now works

* Fixed unit tests

* Fixed a few null check errors

* Simplified events handling

* Fixed strict null checks
2020-02-09 10:53:34 +01:00

152 lines
2.4 KiB
SCSS

.table-panel-content {
padding: 0;
.panel-title-container {
padding-bottom: 4px;
}
}
.table-panel-scroll {
overflow: auto;
}
.table-panel-container {
padding-top: 2.2em;
position: relative;
}
.table-panel-footer {
text-align: center;
font-size: 90%;
line-height: 2px;
ul {
position: relative;
display: inline-block;
margin-left: 0;
margin-bottom: 0;
}
ul > li {
display: inline; // Remove list-style and block-level defaults
}
ul > li > a {
float: left; // Collapse white-space
padding: 4px 12px;
text-decoration: none;
border-left-width: 0;
&:hover {
background-color: $tight-form-func-bg;
}
&.active {
font-weight: bold;
color: $blue;
}
}
}
.table-panel-table {
width: 100%;
border-collapse: collapse;
th {
padding: 0;
&:first-child {
.table-panel-table-header-inner {
padding-left: 15px;
}
}
}
td {
padding: 0.45em 1.1em;
border-bottom: 2px solid $body-bg;
border-right: 2px solid $body-bg;
&:first-child {
padding-left: 15px;
}
&:last-child {
border-right: none;
}
&.table-panel-cell-pre {
white-space: pre;
}
&.table-panel-cell-link {
// Expand internal div to cell size (make all cell clickable)
padding: 0;
a {
padding: 0.45em 0 0.45em 1.1em;
height: 100%;
display: inline-block;
text-decoration: underline;
text-underline-position: under;
}
}
&.cell-highlighted:hover {
background-color: $tight-form-func-bg;
}
&:hover {
.table-panel-filter-link {
visibility: visible;
}
}
}
}
.table-panel-filter-link {
visibility: hidden;
color: $text-color-weak;
float: right;
display: block;
padding: 0 5px;
}
.table-panel-header-bg {
background: $list-item-bg;
border-top: 2px solid $body-bg;
border-bottom: 2px solid $body-bg;
height: 2em;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.table-panel-table-header-inner {
padding: 0.3em 0 0.45em 1.1em;
text-align: left;
color: $blue;
position: absolute;
top: 0;
}
.table-panel-width-hack {
visibility: hidden;
height: 0px;
line-height: 0px;
}
.table-panel-color-cell {
color: white;
a {
color: white;
}
}
.table-panel-color-row {
color: white;
a {
color: white;
}
}