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

Sortable table styles moved to table component sheet

pull/712/head
Alex P 2016-12-20 19:49:00 -08:00
parent 13f6a467de
commit 9285d4fe64
2 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
ui/src/style/components/tables.scss
View File

@ -33,6 +33,58 @@ table .monotype {
}
}
/*
Sortable Tables
----------------------------------------------
*/
.sortable-header {
transition:
color 0.25s ease,
background-color 0.25s ease;
position: relative;
&:after {
content: '\e910';
display: block;
position: absolute;
top: 50%;
right: 8px;
color: #fff;
font-family: 'icomoon';
opacity: 0;
transform: translateY(-50%);
transition:
opacity 0.25s ease,
color 0.25s ease,
transform 0.35s ease;
}
&:hover {
cursor: pointer;
color: $g19-ghost;
background-color: $g5-pepper;
&:after {
opacity: 1;
}
}
&.sorting-down,
&.sorting-up {
background-color: $g5-pepper;
color: $g19-ghost;
&:after {
opacity: 1;
}
}
&.sorting-down {
&:after {
transform: translateY(-50%) rotate(180deg);
}
}
}
/*
Empty State for Tables
----------------------------------------------

48
ui/src/style/pages/hosts.scss
View File

@ -82,54 +82,6 @@
font-weight: 900;
}
}
.sortable-header {
transition:
color 0.25s ease,
background-color 0.25s ease;
position: relative;
&:after {
content: '\e910';
display: block;
position: absolute;
top: 50%;
right: 8px;
color: #fff;
font-family: 'icomoon';
opacity: 0;
transform: translateY(-50%);
transition:
opacity 0.25s ease,
color 0.25s ease,
transform 0.35s ease;
}
&:hover {
cursor: pointer;
color: $g19-ghost;
background-color: $g5-pepper;
&:after {
opacity: 1;
}
}
&.sorting-down,
&.sorting-up {
background-color: $g5-pepper;
color: $g19-ghost;
&:after {
opacity: 1;
}
}
&.sorting-down {
&:after {
transform: translateY(-50%) rotate(180deg);
}
}
}
.host-table-header {
display: flex;
align-items: center;