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

Add pencil icons to editable names for increased affordance

pull/10616/head
Alex P 2017-10-12 16:59:15 -07:00 committed by Andrew Watkins
parent c0a2cfa14f
commit d2eaa74c07
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/style/components/graph.scss
View File

@ -49,15 +49,30 @@ $graph-gutter: 16px;
color: $g13-mist;
border-radius: 4px;
border: 2px solid transparent;
position: relative;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
&:after {
content: "\f058";
font-family: 'icomoon';
position: absolute;
font-size: 15px;
top: 50%;
right: 11px;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.25s ease;
color: $g11-sidewalk;
}
&:hover {
cursor: text;
background-color: $g5-pepper;
color: $g20-white;
&:after {opacity: 1;}
}
}
.graph-name__untitled {

22
ui/src/style/unsorted.scss
View File

@ -353,6 +353,8 @@ $tick-script-overlay-margin: 30px;
Dashboard Name Editing
-----------------------------------------------------------------------------
*/
$dash-editable-header-padding: 7px;
.page-header__left.page-header__dash-editable,
.dashboard-title,
.dashboard-title input[type="text"].form-control.dashboard-title--input,
@ -367,7 +369,7 @@ $tick-script-overlay-margin: 30px;
h1 {
font-size: $page-header-size;
font-weight: $page-header-weight;
padding: 0 7px;
padding: 0 $dash-editable-header-padding;
}
input[type="text"].form-control.dashboard-title--input,
@ -378,6 +380,7 @@ $tick-script-overlay-margin: 30px;
h1 {
@include no-user-select();
position: relative;
border: 2px solid $g0-obsidian;
color: $g17-whisper;
height: 30px;
@ -391,11 +394,28 @@ $tick-script-overlay-margin: 30px;
background-color 0.25s ease,
border-color 0.25s ease;
&:after {
content: "\f058";
font-family: 'icomoon';
position: absolute;
font-size: 15px;
top: 50%;
right: $dash-editable-header-padding;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.25s ease;
color: $g11-sidewalk;
}
&:hover {
cursor: text;
color: $g20-white;
background-color: $g3-castle;
border-color: $g3-castle;
&:after {
opacity: 1;
}
}
}