Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update CSS page syntax formatting 

Signed-off-by: Jared Scheib <jared.scheib@gmail.com>
pull/10616/head
Alex Paxton 2017-10-03 12:31:56 -07:00 committed by Jared Scheib
parent 9fda754042
commit 948fc75049
1 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
ui/src/style/pages/dashboards.scss
View File

@ -11,22 +11,49 @@ $dash-graph-options-arrow: 8px;
------------------------------------------------------
*/
@keyframes refreshingSpinnerA {
0% { transform: translate(-50%,-50%) scale(1.75); background-color: $g7-graphite; }
33% { transform: translate(-50%,-50%) scale(1,1); }
66% { transform: translate(-50%,-50%) scale(1,1); }
100% { transform: translate(-50%,-50%) scale(1,1); }
0% {
transform: translate(-50%, -50%) scale(1.75);
background-color: $g7-graphite;
}
33% {
transform: translate(-50%, -50%) scale(1, 1);
}
66% {
transform: translate(-50%, -50%) scale(1, 1);
}
100% {
transform: translate(-50%, -50%) scale(1, 1);
}
}
@keyframes refreshingSpinnerB {
0% { transform: translate(-50%,-50%) scale(1,1); }
33% { transform: translate(-50%,-50%) scale(1.75); background-color: $g7-graphite; }
66% { transform: translate(-50%,-50%) scale(1,1); }
100% { transform: translate(-50%,-50%) scale(1,1); }
0% {
transform: translate(-50%, -50%) scale(1, 1);
}
33% {
transform: translate(-50%, -50%) scale(1.75);
background-color: $g7-graphite;
}
66% {
transform: translate(-50%, -50%) scale(1, 1);
}
100% {
transform: translate(-50%, -50%) scale(1, 1);
}
}
@keyframes refreshingSpinnerC {
0% { transform: translate(-50%,-50%) scale(1,1); }
33% { transform: translate(-50%,-50%) scale(1,1); }
66% { transform: translate(-50%,-50%) scale(1.75); background-color: $g7-graphite; }
100% { transform: translate(-50%,-50%) scale(1,1); }
0% {
transform: translate(-50%, -50%) scale(1, 1);
}
33% {
transform: translate(-50%, -50%) scale(1, 1);
}
66% {
transform: translate(-50%, -50%) scale(1.75);
background-color: $g7-graphite;
}
100% {
transform: translate(-50%, -50%) scale(1, 1);
}
}
/*
@ -93,7 +120,6 @@ $dash-graph-options-arrow: 8px;
top: 0;
width: 100%;
height: 100%;
}
.dygraph .dygraph-child {
position: absolute;
@ -124,9 +150,7 @@ $dash-graph-options-arrow: 8px;
font-weight: 600;
font-size: 13px;
color: $g14-chromium;
transition:
color 0.25s ease,
background-color 0.25s ease;
transition: color 0.25s ease, background-color 0.25s ease;
&.dash-graph--heading-draggable:hover {
cursor: move;
background-color: $g5-pepper;
@ -146,9 +170,7 @@ $dash-graph-options-arrow: 8px;
line-height: $dash-graph-heading;
width: calc(100% - 53px);
padding-left: 10px;
transition:
color 0.25s ease,
background-color 0.25s ease,
transition: color 0.25s ease, background-color 0.25s ease,
border-color 0.25s ease;
}
.dash-graph--name.dash-graph--name__default {
@ -191,9 +213,7 @@ $dash-graph-options-arrow: 8px;
font-size: 12px;
position: relative;
color: $g11-sidewalk;
transition:
color 0.25s ease,
background-color 0.25s ease;
transition: color 0.25s ease, background-color 0.25s ease;
&:hover,
&.active {
@ -201,13 +221,15 @@ $dash-graph-options-arrow: 8px;
color: $g20-white;
background-color: $g5-pepper;
}
&:first-child {margin-right: 2px;}
&:first-child {
margin-right: 2px;
}
> .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
.dash-graph-context--confirm {
@ -234,7 +256,7 @@ $dash-graph-options-arrow: 8px;
border-bottom-color: $c-curacao;
left: 50%;
top: 0;
transform: translate(-50%,-100%);
transform: translate(-50%, -100%);
transition: border-color 0.25s ease;
}
@ -245,7 +267,6 @@ $dash-graph-options-arrow: 8px;
&:hover:before {
border-bottom-color: $c-dreamsicle;
}
}
/* Presentation Mode */
@ -261,7 +282,7 @@ $dash-graph-options-arrow: 8px;
.graph-panel__refreshing {
position: absolute;
top: -18px !important;
transform: translate(0,0);
transform: translate(0, 0);
right: 50%;
transform: translateX(50%);
width: 16px;
@ -274,12 +295,24 @@ $dash-graph-options-arrow: 8px;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
div:nth-child(1) {left: 0; animation: refreshingSpinnerA 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; }
div:nth-child(2) {left: 50%; animation: refreshingSpinnerB 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; }
div:nth-child(3) {left: 100%; animation: refreshingSpinnerC 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
div:nth-child(1) {
left: 0;
animation: refreshingSpinnerA 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
infinite;
}
div:nth-child(2) {
left: 50%;
animation: refreshingSpinnerB 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
infinite;
}
div:nth-child(3) {
left: 100%;
animation: refreshingSpinnerC 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
infinite;
}
}
/*
@ -295,7 +328,7 @@ $dash-graph-options-arrow: 8px;
}
.react-grid-item {
&.resizing {
background-color: fade-out($g3-castle,0.09);
background-color: fade-out($g3-castle, 0.09);
border-color: $c-pool;
border-image-slice: 3%;
border-image-repeat: initial;
@ -305,13 +338,14 @@ $dash-graph-options-arrow: 8px;
z-index: 3;
& > .react-resizable-handle {
&:before, &:after {
&:before,
&:after {
background-color: $c-comet;
}
}
}
&.react-draggable-dragging {
background-color: fade-out($g3-castle,0.09);
background-color: fade-out($g3-castle, 0.09);
border-color: $c-pool;
border-image-slice: 3%;
border-image-repeat: initial;
@ -345,14 +379,15 @@ $dash-graph-options-arrow: 8px;
}
&:before {
width: 20px;
transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
&:after {
width: 12px;
transform: translate(-3px,2px) rotate(-45deg);
transform: translate(-3px, 2px) rotate(-45deg);
}
&:hover {
&:before, &:after {
&:before,
&:after {
background-color: $c-comet;
}
}