mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
SCSS: remove some low hanging dead fruit (#87260)
* remove some low hanging fruit * restore json_explorer
This commit is contained in:
Ashley Harrison
GitHub
parent
a4d296559c
commit
27fa544f72
@ -27,9 +27,6 @@
|
||||
@import 'utils/widths';
|
||||
@import 'utils/hacks';
|
||||
|
||||
// LAYOUTS
|
||||
@import 'layout/lists';
|
||||
|
||||
// COMPONENTS
|
||||
@import 'components/scrollbar';
|
||||
@import 'components/buttons';
|
||||
@ -41,7 +38,6 @@
|
||||
@import 'components/tags';
|
||||
@import 'components/panel_graph';
|
||||
@import 'components/submenu';
|
||||
@import 'components/panel_gettingstarted';
|
||||
@import 'components/panel_piechart';
|
||||
@import 'components/panel_pluginlist';
|
||||
@import 'components/panel_singlestat';
|
||||
@ -49,9 +45,7 @@
|
||||
@import 'components/panel_heatmap';
|
||||
@import 'components/tagsinput';
|
||||
@import 'components/tables_lists';
|
||||
@import 'components/search';
|
||||
@import 'components/gf-form';
|
||||
@import 'components/navbar';
|
||||
@import 'components/filter-controls';
|
||||
@import 'components/filter-list';
|
||||
@import 'components/filter-table';
|
||||
@ -66,13 +60,11 @@
|
||||
@import 'components/query_editor';
|
||||
@import 'components/tabbed_view';
|
||||
@import 'components/query_part';
|
||||
@import 'components/jsontree';
|
||||
@import 'components/edit_sidemenu';
|
||||
@import 'components/row';
|
||||
@import 'components/json_explorer';
|
||||
@import 'components/code_editor';
|
||||
@import 'components/dashboard_grid';
|
||||
@import 'components/dashboard_list';
|
||||
@import 'components/page_header';
|
||||
@import 'components/dashboard_settings';
|
||||
@import 'components/toolbar';
|
||||
@ -88,12 +80,9 @@
|
||||
// PAGES
|
||||
@import 'pages/login';
|
||||
@import 'pages/dashboard';
|
||||
@import 'pages/playlist';
|
||||
@import 'pages/admin';
|
||||
@import 'pages/alerting';
|
||||
@import 'pages/history';
|
||||
@import 'pages/signup';
|
||||
@import 'pages/errorpage';
|
||||
@import 'pages/explore';
|
||||
@import 'pages/plugins';
|
||||
@import 'components/view_states';
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
.dashboard-list {
|
||||
.search-results-container {
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
margin-top: $space-xl;
|
||||
}
|
||||
|
||||
.search-results-filter-row {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.gf-form-button-row {
|
||||
padding-top: 0;
|
||||
|
||||
button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-filter-row__filters {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-results-filter-row__filters-item {
|
||||
width: 150px;
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
/* Structure */
|
||||
json-tree {
|
||||
.json-tree-key {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.expandable {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::before,
|
||||
> .json-tree-key {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.json-tree-branch-preview {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* Looks */
|
||||
json-tree {
|
||||
ul {
|
||||
padding-left: $spacer;
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.json-tree-key {
|
||||
color: $variable;
|
||||
padding: 5px 10px 5px 15px;
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
json-node.expandable {
|
||||
&::before {
|
||||
content: '\25b6';
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
font-size: 8px;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
&.expanded::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.json-tree-leaf-value,
|
||||
.json-tree-branch-preview {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.json-tree-branch-preview {
|
||||
overflow: hidden;
|
||||
font-style: italic;
|
||||
max-width: 40%;
|
||||
height: 1.5em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
.navbar-page-btn {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: $font-size-lg;
|
||||
min-height: $navbarHeight;
|
||||
|
||||
.gicon {
|
||||
top: -2px;
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
line-height: 8px;
|
||||
opacity: 0.75;
|
||||
margin-right: 10px;
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-page-btn__folder-icon {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,173 +0,0 @@
|
||||
// Colors
|
||||
$progress-color-dark: $panel-bg !default;
|
||||
$progress-color: $panel-bg !default;
|
||||
$progress-line-uncompleted: lightOrDark($gray-3, $gray-1);
|
||||
|
||||
// Sizing
|
||||
$marker-size: 60px !default;
|
||||
$marker-size-half: calc($marker-size / 2);
|
||||
$path-height: 2px !default;
|
||||
$path-position: $marker-size-half - calc($path-height / 2);
|
||||
|
||||
.progress-tracker-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-tracker-close-btn {
|
||||
color: $text-color-weak;
|
||||
position: absolute;
|
||||
z-index: $panel-header-z-index;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: $font-size-lg;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Container element
|
||||
.progress-tracker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Step container that creates lines between steps
|
||||
.progress-step {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 1 1 0%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $text-color-weak;
|
||||
height: 84px;
|
||||
|
||||
// For a flexbox bug in firefox that wont allow the text overflow on the text
|
||||
min-width: $marker-size;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: $path-position;
|
||||
bottom: $path-position;
|
||||
right: -$marker-size-half;
|
||||
width: 100%;
|
||||
height: $path-height;
|
||||
border-top: 2px solid $progress-line-uncompleted;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::after {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
&::after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
.progress-step-cta {
|
||||
display: inline-flex;
|
||||
}
|
||||
.progress-title {
|
||||
font-weight: 400;
|
||||
}
|
||||
.progress-text {
|
||||
display: none;
|
||||
}
|
||||
.progress-marker {
|
||||
.icon-gf {
|
||||
color: $brand-primary;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background: $brand-gradient-horizontal;
|
||||
-webkit-background-clip: text;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gicon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.progress-marker {
|
||||
color: $online;
|
||||
|
||||
// change icon to check
|
||||
.icon-gf::before {
|
||||
content: '\e604';
|
||||
}
|
||||
}
|
||||
.progress-text {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
// &::after {
|
||||
// border-top: 2px solid $progress-line-completed;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.progress-step-cta {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
|
||||
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Progress marker
|
||||
.progress-marker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: $marker-size;
|
||||
height: $marker-size;
|
||||
padding-bottom: 2px; // To align text within the marker
|
||||
z-index: 1;
|
||||
background-color: $panel-bg;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: $text-color-weak;
|
||||
font-size: 35px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
// Progress text
|
||||
.progress-text {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
color: $text-color-weak;
|
||||
text-decoration: none;
|
||||
font-size: 35px;
|
||||
vertical-align: sub;
|
||||
.gicon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
a.progress-link {
|
||||
&:hover {
|
||||
.progress-marker,
|
||||
.progress-text {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
&:hover .progress-marker.completed {
|
||||
color: $online;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,166 +0,0 @@
|
||||
.search-results-container {
|
||||
display: block;
|
||||
padding: $spacer;
|
||||
position: relative;
|
||||
flex-grow: 10;
|
||||
margin-bottom: $space-md;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
border-radius: 3px;
|
||||
|
||||
// Fix for search scroller in mobile view
|
||||
height: unset;
|
||||
|
||||
.label-tag {
|
||||
margin-top: 2px;
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.search-result-tag {
|
||||
opacity: 0.7;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background: $panel-bg;
|
||||
border-bottom: 1px solid lightOrDark($gray95, $gray25);
|
||||
padding: 0px 4px 4px 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.search-section__header {
|
||||
font-size: $font-size-h6;
|
||||
padding: 7px 4px 3px 0;
|
||||
color: $text-color-weak;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.search-section__header__link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-section__header__icon {
|
||||
padding: 5px 0px;
|
||||
width: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-section__header__toggle {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.search-section__header__text {
|
||||
flex-grow: 1;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.search-section__header__link {
|
||||
padding: 2px 10px 0;
|
||||
color: $text-muted;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
@include list-item();
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
min-height: 37px;
|
||||
white-space: initial;
|
||||
padding: 0px;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: $list-item-hover-bg;
|
||||
|
||||
.search-item__body-title {
|
||||
color: $text-color-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-item__body {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.search-item__body-folder-title {
|
||||
color: $text-color-weak;
|
||||
font-size: $font-size-xs;
|
||||
line-height: 11px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.search-item__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
font-size: 19px;
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
|
||||
.search-item__tags {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-item__actions {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.search-item__actions__item {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.fa-star,
|
||||
.fa-star-o {
|
||||
color: $orange;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item:hover {
|
||||
.search-item__actions__item {
|
||||
width: 15px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button-row {
|
||||
text-align: center;
|
||||
padding: $spacer * 2 $spacer;
|
||||
background: $panel-bg;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.search-item__tags {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.ui-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
margin-bottom: $space-xs;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,130 +0,0 @@
|
||||
.playlist-description {
|
||||
width: 555px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.playlist-search-container {
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
width: 700px;
|
||||
box-shadow: 0px 0px 55px 0px black;
|
||||
background-color: $panel-bg;
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-switches {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.playlist-search-containerwrapper {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.playlist-search-field-wrapper {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-results-container {
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
|
||||
.search-item:hover,
|
||||
.search-item.selected {
|
||||
background-color: $list-item-hover-bg;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.search-result-tag {
|
||||
opacity: 0.7;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-star,
|
||||
.fa-star-o {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.search-result-link {
|
||||
.fa {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
white-space: nowrap;
|
||||
background-color: $list-item-bg;
|
||||
margin-bottom: 4px;
|
||||
.search-result-icon:before {
|
||||
content: '\f009';
|
||||
}
|
||||
|
||||
&.search-item-dash-home .search-result-icon:before {
|
||||
content: '\f015';
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-tags {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.search-result-actions {
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-available-list {
|
||||
td {
|
||||
line-height: 28px;
|
||||
max-width: 335px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.add-dashboard {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-column-header {
|
||||
border-bottom: thin solid $gray-1;
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.selected-playlistitem-settings {
|
||||
text-align: right;
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
.sidebar-content {
|
||||
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
@include media-breakpoint-up(md) {
|
||||
width: $page-sidebar-width;
|
||||
margin-left: $page-sidebar-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar-section {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
.get-more-plugins-link {
|
||||
color: $gray-3;
|
||||
font-size: $font-size-sm;
|
||||
position: relative;
|
||||
top: $space-md;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.get-more-plugins-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-info-list-item {
|
||||
white-space: nowrap;
|
||||
max-width: $page-sidebar-width;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
img,
|
||||
i {
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
.signup-page-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(../img/background_tease.jpg);
|
||||
|
||||
.signup-logo-container {
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user