1.explore-active-button { 2 box-shadow: $btn-active-box-shadow; 3 border: 1px solid $orange-dark !important; 4 color: $orange-dark !important; 5} 6 7// TODO: check if this is used 8.explore { 9 display: flex; 10 flex: 1 1 auto; 11 flex-direction: column; 12} 13 14.explore + .explore { 15 border-left: 1px dotted $table-border; 16} 17 18.explore-container { 19 display: flex; 20 flex: 1 1 auto; 21 flex-direction: column; 22 padding: $dashboard-padding; 23 padding-top: 0; 24} 25 26.explore-wrapper { 27 display: flex; 28 height: 100%; 29 30 > .explore-split { 31 width: 50%; 32 } 33} 34 35// TODO: this is used in Loki & Prometheus, move it 36.explore-input-margin { 37 margin-right: 4px; 38} 39 40// TODO: move to public/app/features/explore/Time.tsx 41.navbar .elapsed-time { 42 position: absolute; 43 left: 0; 44 right: 0; 45 top: 48px; 46 text-align: center; 47 font-size: 11px; 48} 49 50.graph-legend { 51 flex-wrap: wrap; 52} 53 54// TODO: move to Loki and Prometheus 55.query-row-break { 56 flex-basis: 100%; 57} 58 59// TODO: Prometheus-specifics, to be extracted to datasource soon 60.explore { 61 .prom-query-field-info { 62 margin: 0.25em 0.5em 0.5em; 63 display: flex; 64 65 details { 66 margin-left: 1em; 67 } 68 } 69} 70 71// ReactTable basic overrides (does not include pivot/groups/filters) 72// When integrating ReactTable as new panel plugin, move to _panel_table.scss 73 74.ReactTable { 75 border: none; 76} 77 78.ReactTable .rt-table { 79 // Allow some space for the no-data text 80 min-height: 90px; 81} 82 83.ReactTable .rt-thead.-header { 84 box-shadow: none; 85 background: $list-item-bg; 86 border-top: 2px solid $body-bg; 87 border-bottom: 2px solid $body-bg; 88 height: 2em; 89} 90 91.ReactTable .rt-thead.-header .rt-th { 92 text-align: left; 93 color: $blue; 94 font-weight: $font-weight-semi-bold; 95} 96 97.ReactTable .rt-thead .rt-td, 98.ReactTable .rt-thead .rt-th { 99 padding: 0.45em 0 0.45em 1.1em; 100 border-right: none; 101 box-shadow: none; 102} 103 104.ReactTable .rt-tbody .rt-td { 105 padding: 0.45em 0 0.45em 1.1em; 106 border-bottom: 2px solid $body-bg; 107 border-right: 2px solid $body-bg; 108} 109 110.ReactTable .rt-tbody .rt-td:last-child { 111 border-right: none; 112} 113 114.ReactTable .-pagination { 115 border-top: none; 116 box-shadow: none; 117 margin-top: $space-sm; 118} 119 120.ReactTable .-pagination .-btn { 121 color: $blue; 122 background: $list-item-bg; 123} 124 125.ReactTable .-pagination input, 126.ReactTable .-pagination select { 127 color: $input-color; 128 background-color: $input-bg; 129} 130 131.ReactTable .-loading { 132 background: $input-bg; 133} 134 135.ReactTable .-loading.-active { 136 opacity: 0.8; 137} 138 139.ReactTable .-loading > div { 140 color: $input-color; 141} 142 143.ReactTable .rt-tr .rt-td:last-child { 144 text-align: right; 145} 146 147.ReactTable .rt-noData { 148 top: 60px; 149 z-index: inherit; 150} 151 152// React-component cascade fix: show "loading" when loading children 153.rc-cascader-menu-item-loading:after { 154 position: absolute; 155 right: 12px; 156 content: 'loading'; 157 color: #767980; 158 font-style: italic; 159} 160 161// React-component cascade fix: vertical alignment issue with Safari 162.rc-cascader-menu { 163 vertical-align: top; 164 // To fix cascader button width issue in windows + firefox 165 scrollbar-width: thin; 166} 167 168// TODO Experimental 169 170.cheat-sheet-item { 171 margin: $space-lg 0; 172} 173 174.cheat-sheet-item__title { 175 font-size: $font-size-h3; 176} 177 178.cheat-sheet-item__example { 179 margin: $space-xs 0; 180 cursor: pointer; 181} 182 183.query-type-toggle { 184 margin-left: 5px; 185 186 .btn.active { 187 background-color: $input-bg; 188 background-image: none; 189 background-clip: padding-box; 190 border: $input-border; 191 border-radius: $input-border-radius; 192 @include box-shadow($input-box-shadow); 193 color: $input-color; 194 } 195} 196