Organize styles a bit
Alex P
parent
e4097550c8
commit
f8852273d8
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
Styles for the Template Variables Manager Panel
|
||||
------------------------------------------------------
|
||||
Accessed via Dashboards
|
||||
*/
|
||||
|
||||
.template-variable-manager {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
|
||||
.template-variable-manager--header {
|
||||
height: 60px;
|
||||
background: $g0-obsidian;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.template-variable-manager--body {
|
||||
border-radius: 0 0 $radius $radius;
|
||||
min-height: 150px;
|
||||
@include gradient-v($g2-kevlar,$g0-obsidian);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,31 +40,6 @@ $dash-graph-options-arrow: 8px;
|
|||
transition-property: left, top, border-color, background-color;
|
||||
}
|
||||
|
||||
.template-variable-manager {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
|
||||
.template-variable-manager--header {
|
||||
height: 60px;
|
||||
background: $g0-obsidian;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.template-variable-manager--body {
|
||||
border-radius: 0 0 $radius $radius;
|
||||
min-height: 150px;
|
||||
@include gradient-v($g2-kevlar,$g0-obsidian);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
.template-control-bar {
|
||||
height: 50px;
|
||||
|
|
@ -401,116 +376,13 @@ $dash-graph-options-arrow: 8px;
|
|||
}
|
||||
|
||||
/*
|
||||
Cell Edit Mode
|
||||
Overylay Technology (Cell Edit Mode)
|
||||
------------------------------------------------------
|
||||
*/
|
||||
$overlay-controls-height: 50px;
|
||||
$overlay-controls-bg: $g2-kevlar;
|
||||
$overlay-bg: rgba($c-pool, 0.7);
|
||||
@import 'overlay-technology';
|
||||
|
||||
.overlay-technology {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: $overlay-bg;
|
||||
|
||||
.overlay-controls {
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 $overlay-controls-height;
|
||||
width: calc(100% - #{($explorer-page-padding * 2)});
|
||||
left: $explorer-page-padding;
|
||||
margin-top: 16px;
|
||||
border: 0;
|
||||
background-color: $g2-kevlar;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
.overlay-controls--right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.toggle {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
p {
|
||||
font-weight: 600;
|
||||
color: $g13-mist;
|
||||
margin: 0;
|
||||
@include no-user-select;
|
||||
}
|
||||
}
|
||||
.overlay--graph-name {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
@include no-user-select;
|
||||
}
|
||||
.confirm-buttons {
|
||||
margin-left: 32px;
|
||||
}
|
||||
.confirm-buttons .btn {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 9px;
|
||||
|
||||
& > span.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.overlay-controls .toggle {
|
||||
|
||||
.toggle-btn {
|
||||
background-color: $overlay-controls-bg;
|
||||
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
|
||||
.overlay-technology .resize-container.page-contents {
|
||||
background-image: none !important;
|
||||
overflow: visible;
|
||||
}
|
||||
.overlay-technology .graph {
|
||||
width: 70%;
|
||||
left: 15%;
|
||||
}
|
||||
.overlay-technology .graph-heading,
|
||||
.overlay-technology .graph-container,
|
||||
.overlay-technology .table-container {
|
||||
top: -24px;
|
||||
}
|
||||
.overlay-technology .graph-heading .graph-actions {
|
||||
order: 2;
|
||||
}
|
||||
.overlay-technology .graph-container,
|
||||
.overlay-technology .table-container {
|
||||
height: calc(100% - 38px);
|
||||
}
|
||||
.overlay-technology .query-maker {
|
||||
flex: 1 0 0;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
.overlay-technology .query-maker--tabs {
|
||||
margin-top: 0;
|
||||
}
|
||||
.overlay-technology .query-maker--tab-contents {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
/*
|
||||
Template Variables Manager
|
||||
------------------------------------------------------
|
||||
*/
|
||||
@import '../components/template-variables-manager';
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
/*
|
||||
Styles for Overlay Technology (aka Cell Edit Mode)
|
||||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
$overlay-controls-height: 50px;
|
||||
$overlay-controls-bg: $g2-kevlar;
|
||||
$overlay-z: 100;
|
||||
|
||||
.overlay-technology {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: $overlay-z;
|
||||
|
||||
&: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 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 $overlay-controls-height;
|
||||
width: calc(100% - #{($explorer-page-padding * 2)});
|
||||
left: $explorer-page-padding;
|
||||
margin-top: 16px;
|
||||
border: 0;
|
||||
background-color: $g2-kevlar;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
.overlay-controls--right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.toggle {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
p {
|
||||
font-weight: 600;
|
||||
color: $g13-mist;
|
||||
margin: 0;
|
||||
@include no-user-select;
|
||||
}
|
||||
}
|
||||
.overlay--graph-name {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
@include no-user-select;
|
||||
}
|
||||
.confirm-buttons {
|
||||
margin-left: 32px;
|
||||
}
|
||||
.confirm-buttons .btn {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 9px;
|
||||
|
||||
& > span.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.overlay-controls .toggle {
|
||||
|
||||
.toggle-btn {
|
||||
background-color: $overlay-controls-bg;
|
||||
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
|
||||
.overlay-technology .resize-container.page-contents {
|
||||
background-image: none !important;
|
||||
overflow: visible;
|
||||
}
|
||||
.overlay-technology .graph {
|
||||
width: 70%;
|
||||
left: 15%;
|
||||
}
|
||||
.overlay-technology .graph-heading,
|
||||
.overlay-technology .graph-container,
|
||||
.overlay-technology .table-container {
|
||||
top: -24px;
|
||||
}
|
||||
.overlay-technology .graph-heading .graph-actions {
|
||||
order: 2;
|
||||
}
|
||||
.overlay-technology .graph-container,
|
||||
.overlay-technology .table-container {
|
||||
height: calc(100% - 38px);
|
||||
}
|
||||
.overlay-technology .query-maker {
|
||||
flex: 1 0 0;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
.overlay-technology .query-maker--tabs {
|
||||
margin-top: 0;
|
||||
}
|
||||
.overlay-technology .query-maker--tab-contents {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
Loading…
Reference in New Issue