Skip to content

Instantly share code, notes, and snippets.

@clintandrewhall
Last active July 3, 2019 17:00
Show Gist options
  • Save clintandrewhall/e0f3b234619c09804407f8c6c802470b to your computer and use it in GitHub Desktop.
Save clintandrewhall/e0f3b234619c09804407f8c6c802470b to your computer and use it in GitHub Desktop.
Carousel using Markdown in Kibana Canvas
{
"css": ".canvasPage {\n\n}",
"id": "workpad-437c9656-65f8-4078-9569-a3fa6b53cdaf",
"name": "Carousel in Markdown",
"width": 1080,
"height": 720,
"page": 0,
"pages": [
{
"id": "page-b58842df-918e-4580-91fe-5890fa735703",
"style": { "background": "#FFF" },
"transition": {},
"elements": [
{
"id": "element-285ba5c5-4eb2-4432-957d-d993056db88a",
"position": {
"left": 20,
"top": 20,
"width": 300,
"height": 201,
"angle": 0,
"parent": null
},
"expression": "markdown \n \"This would be slide one\n\nThis would be slide two\n\nThis would be slide three\n\nThis would be slide four\"\n| render containerStyle={containerStyle} \n css=\".canvasRenderEl {\n background: #efefef;\n overflow: hidden;\n height: 200px !important;\n width: 300px !important;\n margin: 0 auto;\n}\n\n.canvasRenderEl .canvasMarkdown {\n width: 1200px;\n -webkit-animation: slide 18s ease infinite;\n}\n\n.canvasRenderEl p {\n float: left;\n height: 200px;\n width: 300px;\n text-align: center;\n font-size: 1.5em;\n line-height: 200px;\npadding: 0;\n}\n\n.canvasRenderEl p:nth-child(1) {\n background: #D93B65;\n}\n\n.canvasRenderEl p:nth-child(2) {\n background: #037E8C;\n}\n\n.canvasRenderEl p:nth-child(3) {\n background: #36BF66;\n}\n\n.slide-number {\n color: #000;\n text-align: center;\n font-size: 10em;\n}\n\n@-webkit-keyframes slide {\n 20% {margin-left: 0px;}\n 30% {margin-left: -300px;}\n 50% {margin-left: -300px;}\n 60% {margin-left: -600px;}\n 70% {margin-left: -600px;}\n 80% {margin-left: -900px;}\n 90% {margin-left: -900px;}\n}\""
}
],
"groups": []
}
],
"colors": [
"#37988d",
"#c19628",
"#b83c6f",
"#3f9939",
"#1785b0",
"#ca5f35",
"#45bdb0",
"#f2bc33",
"#e74b8b",
"#4fbf48",
"#1ea6dc",
"#fd7643",
"#72cec3",
"#f5cc5d",
"#ec77a8",
"#7acf74",
"#4cbce4",
"#fd986f",
"#a1ded7",
"#f8dd91",
"#f2a4c5",
"#a6dfa2",
"#86d2ed",
"#fdba9f",
"#000000",
"#444444",
"#777777",
"#BBBBBB",
"#FFFFFF",
"rgba(255,255,255,0)"
],
"isWriteable": true,
"assets": {},
"@timestamp": "2019-07-03T16:48:07.754Z",
"@created": "2019-07-03T16:36:22.269Z"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment