Cleanup Old Styles (#4359)
* Remove obsolete tempvar manager styles * Remove obsolete cell editor overlay styles * Organize imports * Flatten style imports * Change class to extend Print less stuff in the final stylesheetpull/4352/head
Alex Paxton
GitHub
parent
3f5850ddec
commit
595665df4b
|
|
@ -91,7 +91,12 @@
|
|||
@import '../logs/components/logs_message/LogsMessage';
|
||||
@import '../logs/components/expandable_message/ExpandableMessage';
|
||||
@import '../dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss';
|
||||
|
||||
@import 'components/dashboard-empty';
|
||||
@import 'components/template-control-bar';
|
||||
@import 'components/edit-template-variable';
|
||||
@import 'components/write-data-form';
|
||||
@import 'components/annotation-control-bar';
|
||||
@import 'components/annotation-editor';
|
||||
|
||||
// Reusable UI Components
|
||||
@import '../reusable_ui/components/panel/Panel.scss';
|
||||
|
|
|
|||
|
|
@ -1,220 +0,0 @@
|
|||
/*
|
||||
Styles for the Template Variables Manager Panel
|
||||
------------------------------------------------------
|
||||
Accessed via Dashboards
|
||||
*/
|
||||
|
||||
$tvmp-panel-max-width: 1300px;
|
||||
$tvmp-gutter: 30px;
|
||||
$tvmp-min-height: 150px;
|
||||
$tvmp-max-height: calc(100% - 90px);
|
||||
$tvmp-table-gutter: 8px;
|
||||
|
||||
.template-variable-manager {
|
||||
max-width: $tvmp-panel-max-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.template-variable-manager--header {
|
||||
height: $chronograf-page-header-height;
|
||||
background: $g0-obsidian;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 $tvmp-gutter;
|
||||
|
||||
.page-header__dismiss {
|
||||
margin-left: 10px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
.template-variable-manager--body {
|
||||
padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter
|
||||
($tvmp-gutter - $tvmp-table-gutter);
|
||||
border-radius: 0 0 $radius $radius;
|
||||
min-height: $tvmp-min-height;
|
||||
max-height: $tvmp-max-height;
|
||||
@include gradient-v($g2-kevlar, $g0-obsidian);
|
||||
@include custom-scrollbar-round($g0-obsidian, $g3-castle);
|
||||
}
|
||||
.template-variable-manager--table,
|
||||
.template-variable-manager--table-container {
|
||||
width: 100%;
|
||||
}
|
||||
/* Column Widths */
|
||||
.tvm--col-1 {
|
||||
flex: 0 0 140px;
|
||||
}
|
||||
.tvm--col-2 {
|
||||
flex: 0 0 140px;
|
||||
}
|
||||
.tvm--col-3 {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.tvm--col-4 {
|
||||
flex: 0 0 30px;
|
||||
|
||||
&.editing {
|
||||
flex: 0 0 68px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table Column Labels */
|
||||
.template-variable-manager--table-heading {
|
||||
padding: 0 $tvmp-table-gutter;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: $g11-sidewalk;
|
||||
white-space: nowrap;
|
||||
|
||||
> * {
|
||||
@include no-user-select();
|
||||
padding-left: 6px;
|
||||
margin-right: $tvmp-table-gutter;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Table Body */
|
||||
.template-variable-manager--table-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.template-variable-manager--table-row {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: $tvmp-table-gutter;
|
||||
transition: background-color 0.25s ease;
|
||||
|
||||
&.editing {
|
||||
background-color: $g3-castle;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: $tvmp-table-gutter;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tvm-input,
|
||||
.form-control.tvm-input-edit {
|
||||
font-weight: 600 !important;
|
||||
width: 100% !important;
|
||||
padding: 0 6px !important;
|
||||
font-family: $code-font;
|
||||
color: $c-comet !important;
|
||||
height: 30px !important;
|
||||
|
||||
&:focus,
|
||||
&:focus:hover {
|
||||
color: $c-comet !important;
|
||||
}
|
||||
}
|
||||
.tvm-input {
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
padding: 0 8px;
|
||||
border-radius: $radius;
|
||||
border: 2px solid $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
}
|
||||
.tvm-values,
|
||||
.tvm-values-empty {
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: $code-font;
|
||||
color: $c-pool;
|
||||
padding: 0 $tvmp-table-gutter;
|
||||
min-height: 30px;
|
||||
max-height: 90px;
|
||||
line-height: 30px;
|
||||
border-radius: $radius;
|
||||
background-color: $g5-pepper;
|
||||
@include custom-scrollbar-round($g5-pepper, $g7-graphite);
|
||||
}
|
||||
.tvm-values-empty {
|
||||
color: $g9-mountain;
|
||||
font-style: italic;
|
||||
}
|
||||
.tvm-csv-instructions {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: $code-font;
|
||||
padding: 0 $tvmp-table-gutter;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: $radius;
|
||||
background-color: $g5-pepper;
|
||||
margin-bottom: 2px;
|
||||
color: $g9-mountain;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tvm-query-builder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
margin-bottom: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
> *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
flex: 1 0 0;
|
||||
|
||||
& > .dropdown-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tvm-query-builder--text {
|
||||
@include no-user-select();
|
||||
background-color: $g5-pepper;
|
||||
border-radius: $radius-small;
|
||||
padding: 0 $tvmp-table-gutter;
|
||||
white-space: nowrap;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: $c-pool;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: $code-font;
|
||||
}
|
||||
|
||||
.tvm-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > .btn:nth-child(2) {
|
||||
margin-left: $tvmp-table-gutter;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
/*
|
||||
Styles for Cell Editor Overlay
|
||||
------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$overlay-controls-height: 60px;
|
||||
$overlay-controls-bg: $g2-kevlar;
|
||||
|
||||
|
||||
// Make Overlay Technology full screen
|
||||
.ceo {
|
||||
left: -($sidebar--width) !important;
|
||||
|
||||
// Hacky way to ensure proper appearance of file upload modal
|
||||
// Needed to have a this div nested inside of itself for the
|
||||
// Drag & drop feature to work correctly
|
||||
.ceo {
|
||||
left: 0 !important;
|
||||
&:before {display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
.ceo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 500;
|
||||
padding: 0 30px;
|
||||
|
||||
/*
|
||||
Semi-transparent gradient in background
|
||||
Makes it possible to leave opacity alone
|
||||
*/
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include gradient-diag-down($c-pool,$c-comet);
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.overlay-controls {
|
||||
padding: 0 18px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 $overlay-controls-height;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border: 0;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
|
||||
.overlay-controls--tabs {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.overlay-controls--right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
flex: 1 0 0;
|
||||
|
||||
.toggle {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
p {
|
||||
font-weight: 600;
|
||||
color: $g13-mist;
|
||||
margin: 0 6px 0 0;
|
||||
@include no-user-select;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.overlay--graph-name {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
@include no-user-select;
|
||||
}
|
||||
}
|
||||
.ceo--editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
.ceo--editor .query-maker--empty {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.overlay-controls .confirm-or-cancel {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
|
||||
.ceo .graph {
|
||||
margin: 0 15%;
|
||||
}
|
||||
.ceo .query-maker {
|
||||
flex: 1 0 0%;
|
||||
padding: 0 18px;
|
||||
margin: 0;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
.ceo .query-maker--tabs {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ceo .query-maker--tab-contents {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@ $dash-graph-options-arrow: 8px;
|
|||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
.cell-shell {
|
||||
%cell-styles {
|
||||
background-color: $g3-castle;
|
||||
border-radius: $radius;
|
||||
border: 2px solid $g3-castle;
|
||||
|
|
@ -77,7 +77,7 @@ $dash-graph-options-arrow: 8px;
|
|||
|
||||
.dashboard {
|
||||
.react-grid-item {
|
||||
@extend .cell-shell;
|
||||
@extend %cell-styles;
|
||||
}
|
||||
.graph-empty {
|
||||
background-color: transparent;
|
||||
|
|
@ -557,44 +557,3 @@ $dash-graph-options-arrow: 8px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Dashboard Empty State
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
@import '../components/dashboard-empty';
|
||||
/*
|
||||
Template Control Bar
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
@import '../components/template-control-bar';
|
||||
/*
|
||||
Cell Editor Overlay
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
@import 'cell-editor-overlay';
|
||||
/*
|
||||
Template Variables Manager
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
@import '../components/template-variables-manager';
|
||||
/*
|
||||
Edit Template Variable
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
@import '../components/edit-template-variable';
|
||||
/*
|
||||
Write Data Form
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
@import '../components/write-data-form';
|
||||
|
||||
@import '../components/annotation-control-bar';
|
||||
|
||||
@import '../components/annotation-editor';
|
||||
|
|
|
|||
Loading…
Reference in New Issue