AG-420 Improve React implementation
This commit is contained in:
105
src/index.html
105
src/index.html
@@ -4,14 +4,115 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
|
||||
<!-- Example uses font awesome icons -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ag-react-container {
|
||||
display: inline-block;
|
||||
button {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.customHeaderMenuButton {
|
||||
margin-top: 5px;
|
||||
margin-left: 4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.customHeaderLabel {
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.customSortDownLabel {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.customSortUpLabel {
|
||||
float: left;
|
||||
margin-left: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.customSortRemoveLabel {
|
||||
float: left;
|
||||
font-size: 11px;
|
||||
margin-left: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: cornflowerblue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customHeaderLabel {
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.customExpandButton {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
animation-name: toExpanded;
|
||||
animation-duration: 1s;
|
||||
-ms-transform: rotate(180deg); /* IE 9 */
|
||||
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
color: cornflowerblue;
|
||||
animation-name: toCollapsed;
|
||||
animation-duration: 1s;
|
||||
-ms-transform: rotate(0deg); /* IE 9 */
|
||||
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
@keyframes toExpanded {
|
||||
from {
|
||||
color: cornflowerblue;
|
||||
-ms-transform: rotate(0deg); /* IE 9 */
|
||||
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
color: black;
|
||||
-ms-transform: rotate(180deg); /* IE 9 */
|
||||
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toCollapsed {
|
||||
from {
|
||||
color: black;
|
||||
-ms-transform: rotate(180deg); /* IE 9 */
|
||||
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
to {
|
||||
color: cornflowerblue;
|
||||
-ms-transform: rotate(0deg); /* IE 9 */
|
||||
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user