Kibana Home page - phase one (#14673)

* make kibana home app default when defaultAppId not set

* make kibana icon link to home page, add react-router for routing within home app

* directory registry

* add href to directory listings

* add tabs to directory page

* add promo section to home page

* home page styling

* use kuiFlex components to display directory in columns

* fix react array missing key warning

* add icons

* remove feature directory title from home page, change data sources to integrations

* add tutorials registry

* fix rebase mistake

* start tutorial component

* wrap tutorial registration in helper function to hide implemenation details

* add constants for categry and instruction variant ids

* filter tutorial directory by tab category

* remove later phase stuff

* clean-up feature directory styling

* add kbnDirectory to uiExports

* remove unused file

* cleanup timelion plugin definition

* fix lint errors

* css work recommended by formgeist review

* cleanup from pairing session with snide

* rename kbnDirectory registry to featureCatalogue, rename kbnDirectory uiExports to home

* update kibana index uses name to match ui-exports name

* remove carot from package versions

* remove kuiViewContent--constrainedWidth from feature directory view

* updates from Stacey-Gammon review

* import FeatureCatalogueCategory instead of passing as parameter

* wrap KuiButton in href to fix button click bug

* remove conditional check for ADMIN and DATA feature category tabs

* consider apps for the 'OTHER' tab as anything not in ADMIN or DATA

* remove temp variable tabs and just store in this

* avoid overwriting kui class styles

* prefix class names with home

* updates from timroes review
This commit is contained in:
Nathan Reese 2017-11-02 12:58:46 -06:00 committed by GitHub
parent 53748044b0
commit ffcd5da562
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 672 additions and 23 deletions

View file

@ -30,7 +30,7 @@
#kibana.index: ".kibana"
# The default application to load.
#kibana.defaultAppId: "discover"
#kibana.defaultAppId: "home"
# If your Elasticsearch is protected with basic authentication, these settings provide
# the username and password that the Kibana server uses to perform maintenance on the Kibana

View file

@ -175,9 +175,10 @@
"react-input-autosize": "1.1.0",
"react-input-range": "1.2.1",
"react-markdown": "2.4.2",
"react-redux": "4.4.5",
"react-redux": "5.0.5",
"react-router": "2.0.0",
"react-router-redux": "4.0.4",
"react-router-dom": "4.2.2",
"react-select": "1.0.0-rc.5",
"react-sizeme": "2.3.4",
"react-sortable": "1.1.0",

View file

@ -27,7 +27,7 @@ export default function (kibana) {
config: function (Joi) {
return Joi.object({
enabled: Joi.boolean().default(true),
defaultAppId: Joi.string().default('discover'),
defaultAppId: Joi.string().default('home'),
index: Joi.string().default('.kibana')
}).default();
},
@ -47,6 +47,7 @@ export default function (kibana) {
description: 'the kibana you know and love',
main: 'plugins/kibana/kibana',
uses: [
'home',
'visTypes',
'visResponseHandlers',
'visRequestHandlers',

View file

@ -0,0 +1,30 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<defs>
<rect id="app_apm-a" width="32" height="32"/>
<rect id="app_apm-c" width="32" height="32"/>
<rect id="app_apm-e" width="32" height="32"/>
<rect id="app_apm-g" width="32" height="32"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="app_apm-b" fill="#fff">
<use xlink:href="#app_apm-a"/>
</mask>
<path fill="#13A7DF" fill-rule="nonzero" d="M5.43987776,9.60012224 L26.5601222,9.60012224 L26.5601222,9.60012224 C27.7971726,9.60012224 28.8,10.6029497 28.8,11.84 L28.8,11.84 L28.8,11.84 C28.8,13.0770503 27.7971726,14.0798778 26.5601222,14.0798778 L5.43987776,14.0798778 L5.43987776,14.0798778 C4.20282742,14.0798778 3.2,13.0770503 3.2,11.84 L3.2,11.84 L3.2,11.84 C3.2,10.6029497 4.20282742,9.60012224 5.43987776,9.60012224 Z" mask="url(#app_apm-b)"/>
<mask id="app_apm-d" fill="#fff">
<use xlink:href="#app_apm-c"/>
</mask>
<path fill="#00BFB3" fill-rule="nonzero" d="M21.44,26.2398778 L29.76,26.2398778 L29.76,26.2398778 C30.9971178,26.2398778 32,27.2427599 32,28.4798778 L32,28.4798778 L32,28.4798778 C32,29.7169956 30.9971178,30.7198778 29.76,30.7198778 L21.44,30.7198778 L21.44,30.7198778 C20.2028822,30.7198778 19.2,29.7169956 19.2,28.4798778 L19.2,28.4798778 L19.2,28.4798778 C19.2,27.2427599 20.2028822,26.2398778 21.44,26.2398778 Z" mask="url(#app_apm-d)"/>
<g>
<mask id="app_apm-f" fill="#fff">
<use xlink:href="#app_apm-e"/>
</mask>
<path fill="#00BFB3" fill-rule="nonzero" d="M2.24,1.27990221 L13.76,1.27990221 L13.76,1.27990221 C14.9971178,1.27990221 16,2.28278437 16,3.51990221 L16,3.51990221 L16,3.51990221 C16,4.75702006 14.9971178,5.75990221 13.76,5.75990221 L2.24,5.75990221 L2.24,5.75990221 C1.00288216,5.75990221 1.5150324e-16,4.75702006 0,3.51990221 L0,3.51990221 L0,3.51990221 C-1.5150324e-16,2.28278437 1.00288216,1.27990221 2.24,1.27990221 Z" mask="url(#app_apm-f)"/>
</g>
<g>
<mask id="app_apm-h" fill="#fff">
<use xlink:href="#app_apm-g"/>
</mask>
<path fill="#00BFB3" fill-rule="nonzero" d="M5.44,17.92 L16.96,17.92 L16.96,17.92 C18.1971178,17.92 19.2,18.9228822 19.2,20.16 L19.2,20.16 L19.2,20.16 C19.2,21.3971178 18.1971178,22.4 16.96,22.4 L5.44,22.4 L5.44,22.4 C4.20288218,22.4 3.2,21.3971178 3.2,20.16 L3.2,20.16 L3.2,20.16 C3.2,18.9228822 4.20288218,17.92 5.44,17.92 Z" mask="url(#app_apm-h)"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<g fill="none" fill-rule="evenodd">
<rect width="30" height="8" fill="#00A9E5" rx="2"/>
<rect width="13" height="8" y="11" fill="#00BFB3" rx="2"/>
<rect width="13" height="8" y="22" fill="#00A9E5" rx="2"/>
<rect width="14" height="19" x="16" y="11" fill="#00BFB3" rx="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 389 B

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<path fill="#00A9E5" d="M24.4308859,2.49727273 L30.7032058,14.77 C31.0989314,15.5431818 31.0989314,16.4568182 30.7032058,17.23 L24.4308859,29.5027273 C23.962082,30.4218182 23.0093071,31 21.9696656,31 L10.0303344,31 C8.98931403,31 8.03791796,30.4218182 7.5691141,29.5027273 L1.29679421,17.23 C0.901068597,16.4568182 0.901068597,15.5431818 1.29679421,14.77 L7.5691141,2.49727273 C8.03791796,1.57954545 8.98931403,1 10.0303344,1 L21.9696656,1 C23.0093071,1 23.962082,1.57954545 24.4308859,2.49727273"/>
<path fill="#00BFB3" d="M8.2084333,30.3207069 C7.94886371,30.094852 7.73042122,29.8189702 7.5691141,29.5027273 L1.29679421,17.23 C0.901068597,16.4568182 0.901068597,15.5431818 1.29679421,14.77 L7.5691141,2.49727273 C8.03791796,1.57954545 8.98931403,1 10.0303344,1 L21.9696656,1 C22.9550674,1 23.8624301,1.52065134 24.3536157,2.35643071 L8.2084333,30.3207069 Z"/>
<path fill="#0078A0" d="M11.7646861,31 L10.0303344,31 C8.98931403,31 8.03791796,30.4218182 7.5691141,29.5027273 L6.75441633,27.9086499 L12.5313521,16.6957792 C10.4502307,14.3263246 10.4384646,11.5481428 11.7621461,8.977961 C13.0961229,6.38741554 15.3860919,4.74814282 18.5408661,5.03177918 L15.5302261,10.8761428 L20.7720048,13.5175974 L23.8620657,7.51905191 C25.9873098,9.80123372 26.2873443,12.8732337 24.8871835,15.5917792 C23.478198,18.3277792 20.7837708,19.9030519 17.6731193,19.5321428 L11.7646861,31 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<path fill="#14A7DF" d="M17.2134,17.9985 L11.3034,21.5215 C10.7674,21.8425 10.1584,21.2335 10.4794,20.6975 L14.0024,14.7875 C14.7824,13.4775 16.5884,13.2535 17.6664,14.3315 L17.6694,14.3345 C18.7474,15.4125 18.5234,17.2185 17.2134,17.9985" style="mix-blend-mode:multiply"/>
<path fill="#00BFB3" d="M14.7876,14.0024 L20.6976,10.4794 C21.2336,10.1584 21.8426,10.7674 21.5216,11.3034 L17.9986,17.2134 C17.2186,18.5234 15.4126,18.7474 14.3346,17.6694 L14.3316,17.6664 C13.2536,16.5884 13.4776,14.7824 14.7876,14.0024" style="mix-blend-mode:multiply"/>
<path fill="#00BFB3" d="M17.5090887 4.41995062C17.2015591 3.10163375 16.5865.465 16.5865.465 16.4415-.155 15.5595-.155 15.4145.465L14.4847773 4.45053278C14.2670182 5.38402185 17.7292258 5.36363375 17.5090887 4.41995062zM14.5747507 27.936065L15.4145 31.5359C15.5595 32.1559 16.4415 32.1559 16.5865 31.5359 16.5865 31.5359 17.1873648 28.9601144 17.4877972 27.6722216 17.7150315 26.6981144 14.3270005 26.87401 14.5747507 27.936065zM4.57688262 14.4553031C3.20625508 14.7750354.465 15.4145.465 15.4145-.155 15.5595-.155 16.4415.465 16.5865.465 16.5865 3.11828895 17.2054444 4.44493342 17.5149165 5.38028895 17.733111 5.46825508 14.2473687 4.57688262 14.4553031zM27.2736613 14.4202755C26.4323409 14.224017 26.6431286 17.7278116 27.5898429 17.5069674 28.9051286 17.2001449 31.5357 16.5865 31.5357 16.5865 32.1557 16.4415 32.1557 15.5595 31.5357 15.4145 31.5357 15.4145 28.6943409 14.7516837 27.2736613 14.4202755z"/>
<path fill="#00A9E5" d="M16.0005,26.0005 C10.4771667,26.0005 6.0005,21.5238333 6.0005,16.0005 C6.0005,10.4771667 10.4771667,6.0005 16.0005,6.0005 C21.5238333,6.0005 26.0005,10.4771667 26.0005,16.0005 C26.0005,21.5238333 21.5238333,26.0005 16.0005,26.0005 M16.0005,3.0005 C8.82125,3.0005 3.0005,8.82125 3.0005,16.0005 C3.0005,23.17975 8.82125,29.0005 16.0005,29.0005 C23.17975,29.0005 29.0005,23.17975 29.0005,16.0005 C29.0005,8.82125 23.17975,3.0005 16.0005,3.0005"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none">
<path fill="#00BFB3" d="M22.8565714,0 L7.99942857,0 C7.36857143,0 6.85657143,0.512 6.85657143,1.14285714 L6.85657143,30.8571429 C6.85657143,31.488 7.36857143,32 7.99942857,32 L30.8565714,32 C31.4874286,32 31.9994286,31.488 31.9994286,30.8571429 L31.9994286,9.14285714 L25.2931429,5.57542857 L22.8565714,0 Z"/>
<path fill="#0279A0" d="M22.8571429,0 L22.8571429,8 C22.8571429,8.63085714 23.3691429,9.14285714 24,9.14285714 L32,9.14285714 L22.8571429,0 Z"/>
<g transform="translate(0 14.857)">
<path fill="#14A7DF" d="M15.7128571,0 L1.42857143,0 C0.64,0 0,0.576108023 0,1.2859554 L0,8.99975886 C0,9.70960629 0.64,10.2857143 1.42857143,10.2857143 L15.7128571,10.2857143 C16.5014286,10.2857143 17.1414286,9.70960629 17.1414286,8.99975886 L17.1414286,1.2859554 C17.1414286,0.576108023 16.5014286,0 15.7128571,0"/>
<polygon fill="#FFF" points="5.546 7.185 3.272 7.185 3.272 3.106 3.746 3.106 3.746 6.755 5.546 6.755"/>
<path fill="#FFF" d="M13.8692857,7.03178571 C13.6535714,7.10107143 13.4342857,7.15321429 13.2107143,7.18821429 C12.9878571,7.22392857 12.7285714,7.24107143 12.435,7.24107143 C11.8178571,7.24107143 11.3364286,7.0575 10.9928571,6.68964286 C10.6485714,6.32321429 10.4764286,5.80821429 10.4764286,5.14535714 C10.4764286,4.72178571 10.5614286,4.35035714 10.7314286,4.03107143 C10.9021429,3.7125 11.1464286,3.46892857 11.4671429,3.29964286 C11.7871429,3.13178571 12.1614286,3.0475 12.5914286,3.0475 C13.0264286,3.0475 13.4321429,3.1275 13.8078571,3.2875 L13.6235714,3.70607143 C13.2557143,3.54964286 12.9014286,3.47178571 12.5607143,3.47178571 C12.0642857,3.47178571 11.6764286,3.61964286 11.3971429,3.91535714 C11.1178571,4.21107143 10.9785714,4.62107143 10.9785714,5.14535714 C10.9785714,5.69678571 11.1135714,6.11392857 11.3821429,6.39821429 C11.6507143,6.68321429 12.045,6.82535714 12.5664286,6.82535714 C12.8485714,6.82535714 13.125,6.79321429 13.395,6.7275 L13.395,5.47178571 L12.4828571,5.47178571 L12.4828571,5.04821429 L13.8692857,5.04821429 L13.8692857,7.03178571 Z M8.93064286,6.39842857 C8.69992857,6.68271429 8.3585,6.82557143 7.90635714,6.82557143 C7.45778571,6.82557143 7.11635714,6.68271429 6.88135714,6.397 C6.64635714,6.112 6.5285,5.69271429 6.5285,5.13985714 C6.5285,4.59557143 6.64635714,4.18057143 6.88135714,3.89414286 C7.11635714,3.60914286 7.45992857,3.46628571 7.91207143,3.46628571 C8.36207143,3.46628571 8.70278571,3.60842857 8.93207143,3.89128571 C9.16135714,4.17557143 9.27635714,4.592 9.27635714,5.13985714 C9.27635714,5.69485714 9.16135714,6.11414286 8.93064286,6.39842857 L8.93064286,6.39842857 Z M9.28492857,3.59985714 C8.95564286,3.22842857 8.4985,3.042 7.91207143,3.042 C7.30921429,3.042 6.84421429,3.22485714 6.51707143,3.58985714 C6.18992857,3.95557143 6.02635714,4.47057143 6.02635714,5.13414286 C6.02635714,5.80414286 6.18921429,6.32342857 6.51564286,6.68985714 C6.84207143,7.05771429 7.30635714,7.24128571 7.90635714,7.24128571 C8.49492857,7.24128571 8.9535,7.05414286 9.2835,6.68057143 C9.6135,6.30628571 9.7785,5.79271429 9.7785,5.13985714 C9.7785,4.48557143 9.61421429,3.97271429 9.28492857,3.59985714 L9.28492857,3.59985714 Z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" transform="translate(0 2)">
<path fill="#13A7DF" d="M29.0327273,3.31636364 C25.5418182,-0.232727273 19.84,-0.290909091 16.2327273,3.14181818 C12.5672727,-0.465454545 6.69090909,-0.465454545 3.08363636,3.14181818 C-0.523636364,6.74909091 -0.523636364,12.6254545 3.14181818,16.2327273 L6.22545455,19.3163636 L9.13454545,19.3163636 C9.6,19.3163636 9.94909091,19.0836364 10.1236364,18.6763636 L11.6363636,15.8836364 L13.9054545,22.1090909 C14.08,22.5745455 14.5454545,22.8654545 14.9527273,22.8654545 L14.9527273,22.8654545 C15.4763636,22.8654545 15.8836364,22.5745455 16,22.0509091 L19.7236364,10.88 L22.8654545,18.6181818 C23.04,19.0836364 23.5054545,19.3745455 23.9127273,19.3745455 L26.0654545,19.3745455 L29.2072727,16.2327273 C32.8145455,12.5090909 32.64,6.98181818 29.0327273,3.31636364"/>
<path fill="#00BFB3" d="M24.7272727,16.9309091 L20.7127273,7.04 C20.5381818,6.57454545 20.0727273,6.28363636 19.6072727,6.28363636 C19.1418182,6.28363636 18.7345455,6.57454545 18.56,7.09818182 L14.8945455,18.0363636 L12.8581818,12.5672727 C12.7418182,12.1018182 12.2763636,11.8109091 11.8690909,11.8109091 C11.4036364,11.7527273 10.9963636,11.9854545 10.7636364,12.4509091 L8.32,16.9890909 L3.78181818,16.9890909 L14.1381818,27.4036364 C14.1381818,27.4036364 14.1381818,27.4036364 14.1963636,27.4618182 C14.5454545,27.9854545 15.0690909,28.2181818 15.6509091,28.3345455 L15.7090909,28.3345455 C15.8254545,28.3345455 15.8836364,28.3345455 16,28.3345455 C16.1163636,28.3345455 16.1745455,28.3345455 16.2909091,28.3345455 L16.3490909,28.3345455 C16.8727273,28.2763636 17.28,28.1018182 17.6872727,27.6945455 L28.2763636,17.0472727 L24.6690909,17.0472727 C24.7272727,17.0472727 24.7272727,16.9309091 24.7272727,16.9309091 Z"/>
<path fill="#007D9D" d="M24.7272727,16.9309091 L20.7127273,7.04 C20.5381818,6.57454545 20.0727273,6.28363636 19.6072727,6.28363636 C19.1418182,6.28363636 18.7345455,6.57454545 18.56,7.09818182 L14.8945455,18.0363636 L12.8581818,12.5672727 C12.7418182,12.1018182 12.2763636,11.8109091 11.8690909,11.8109091 C11.4036364,11.7527273 10.9963636,11.9854545 10.7636364,12.4509091 L8.32,16.9890909 L3.84,16.9890909 L6.22545455,19.3745455 L9.13454545,19.3745455 C9.6,19.3745455 9.94909091,19.1418182 10.1236364,18.7345455 L11.6363636,15.9418182 L13.8472727,22.1090909 C14.0218182,22.5745455 14.4872727,22.8654545 14.8945455,22.8654545 L14.8945455,22.8654545 C15.4181818,22.8654545 15.8254545,22.5745455 15.9418182,22.0509091 L19.6654545,10.88 L22.8654545,18.6181818 C23.04,19.0836364 23.5054545,19.3745455 23.9127273,19.3745455 L26.0654545,19.3745455 L28.4509091,16.9890909 L24.7272727,16.9890909 L24.7272727,16.9309091 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<path fill="#00BFB3" d="M28,15 L28,16.759375 C28,23.005375 23.1745,28.633375 16.3915,30.935875 C16.1395,31.021375 15.8605,31.021375 15.6085,30.935875 C8.8315,28.633375 4.4905,23.005375 4,16.759375 L4,15 L28,15 Z"/>
<path fill="#00A9E5" d="M27.9976126,17 C27.9992022,16.9198977 28,16.8396874 28,16.759375 L28,5.429875 C28,4.919875 27.658,4.469875 27.157,4.318375 L16.357,1.052875 C16.1245,0.982375 15.8755,0.982375 15.643,1.052875 L4.843,4.318375 C4.342,4.469875 4,4.919875 4,5.429875 L4,16.759375 C4.00630696,16.8396874 4.01325053,16.9198977 4.02082771,17 L27.9976126,17 Z" style="mix-blend-mode:multiply"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 752 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<path fill="#00BFB3" d="M17,24.5794902 L17,29.9619911 C15.9057929,30.0436076 14.9076706,29.995122 13.647603,29.803562 C12.6878456,29.6585767 12.2258032,29.5153596 11.5310408,29.1440558 C10.9161166,28.8151868 10.3674412,28.3890716 9.8935079,27.8727825 C9.54697605,27.4979426 9.48582337,27.4537397 9.07304278,27.2910733 C5.4055807,25.8553655 2.77601548,23.1377757 1.86382134,19.8402449 C1.55805794,18.7334061 1.46802761,18.0314652 1.46632893,16.7725687 C1.46632893,15.2997305 1.61241588,14.3025148 2.04048464,12.8615026 L2.19506502,12.3399093 L1.96744116,11.8678231 C1.51559081,10.9324913 1.15377079,9.60817457 1.03656148,8.46243731 C1.01165712,8.22419964 0.999999814,7.91637327 1,7.58987228 L1,7.58988569 C1.00000035,6.98102918 1.04053727,6.30724891 1.11130365,5.89867336 C1.15377079,5.65644187 1.25059586,5.22502228 1.32533803,4.94035608 L1.46293155,4.42406707 L1.88590425,4.20482105 C2.8796353,3.68853203 4.44752205,3.42508318 6.18867473,3.47989469 C7.18240578,3.51172072 7.95870507,3.61073506 8.612699,3.7928507 L9.04586382,3.9148505 L9.35842196,3.73627108 C10.6681085,2.9936636 12.3973704,2.38366459 13.8514452,2.14850555 C14.8607419,1.98643525 15.9308445,1.95837018 17,2.05769899 L17,10.8820463 C15.5477724,10.6292855 13.6619739,10.8742246 13.0139932,11.569012 C12.810151,11.788258 12.7574917,11.9809823 12.7914654,12.3929527 C12.8509194,13.1514732 13.620424,14.0673557 14.64643,14.6013259 C15.327603,14.9584847 15.7386849,15.0274411 16.289059,14.8824558 C16.4906837,14.829589 16.745301,14.7215636 17,14.5874783 L17,17.9467304 C16.5555639,17.794968 16.1192021,17.7061324 15.7743572,17.7061324 C15.0761975,17.7061324 13.9873401,18.1340158 13.080242,18.763464 C11.4444078,19.903897 10.5237202,21.5447059 10.8464705,22.7523271 C11.0129417,23.3800072 11.7212935,23.8980644 12.8899892,24.2481508 C13.9873401,24.5787879 15.597694,24.7167007 16.8852976,24.5911647 C16.9237567,24.5874253 16.9619918,24.5835334 17,24.5794902 Z M7.43211255,8.20782903 C6.85795684,9.5975659 8.2253987,11.0032158 9.57075765,10.4020573 C9.70835118,10.3419415 9.93087898,10.1739708 10.0650751,10.0307536 C10.3266727,9.74962362 10.5508992,9.24747951 10.4574715,9.15023329 C10.4014149,9.09188556 9.39069698,7.58545323 7.6019811,7.89840924 C7.57989819,7.90194547 7.50345734,8.03632206 7.43211255,8.20782903 Z"/>
<path fill="#00A9E5" d="M15,24.6051369 C15.6426915,24.6508775 16.2976118,24.6484616 16.8852976,24.5911647 C18.9220216,24.393136 20.3302319,23.767224 20.702244,22.8973124 C20.907785,22.4110813 20.8738112,21.7056042 20.610515,21.0832284 C20.2334068,20.1850269 19.1819204,19.0923331 18.060788,18.4310588 C17.3303532,17.9996392 16.4011722,17.7061324 15.7743572,17.7061324 C15.5501982,17.7061324 15.2857633,17.7502415 15,17.8309691 L15,14.7707079 C15.4847928,14.9766981 15.840707,15.0005654 16.289059,14.8824558 C16.7341146,14.7657604 17.4373704,14.3803117 17.8297668,14.0390659 C18.9186242,13.0913573 19.1632349,11.9845185 18.4073198,11.4116499 C17.700559,10.8743441 16.2505777,10.6895793 15,10.830368 L15,2.02292034 C16.8360579,1.91185099 18.7886809,2.20609511 20.523882,2.86989568 C20.7922743,2.97421435 21.4004038,3.25534433 21.8726383,3.49403959 L22.7304745,3.93076352 L23.1976131,3.80522749 C25.3447516,3.2235183 28.5161975,3.41624262 30.0535079,4.22073406 L30.3864503,4.39577726 L30.4951662,4.77238534 C31.1508588,7.05678742 30.9317283,9.62762382 29.8921328,11.8395333 C29.729059,12.1878515 29.5965615,12.4972713 29.5965615,12.5273292 C29.5965615,12.5556191 29.674701,12.8508939 29.7698274,13.179763 C30.0008487,13.9736457 30.1809093,15.00976 30.2539528,15.9574686 C30.3592713,17.3595823 30.1724159,18.9155217 29.7426485,20.2186211 C28.7200398,23.3198914 26.3197971,25.7758004 22.9445089,27.176146 C22.4620822,27.3741747 22.4281085,27.4006963 21.928695,27.9222897 C21.1982602,28.6878827 20.3166424,29.2678237 19.443518,29.5595624 C19.0715059,29.6833303 18.1915868,29.8442286 17.4815362,29.9184894 C16.621331,30.0090846 15.8468743,30.0253021 15,29.9614112 L15,24.6051369 Z M22.8188062,10.3631589 C23.3538921,10.09971 23.7377951,9.48794289 23.7377951,8.90092935 C23.7377951,8.6109588 23.5832147,8.06107564 23.4744988,7.96736565 C23.3521935,7.86127887 21.6008487,7.69507624 20.5476636,9.23156649 C20.4423451,9.38539233 20.8330428,9.94057983 21.0334877,10.115623 C21.5838618,10.5983179 22.1750044,10.6796511 22.8188062,10.3631589 Z" style="mix-blend-mode:multiply"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<rect width="8" height="18" x="1" y="13" fill="#00A9E5" rx="2"/>
<rect width="8" height="22" x="23" y="9" fill="#00A9E5" rx="2"/>
<rect width="8" height="30" x="12" y="1" fill="#00BFB3" rx="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 343 B

View file

@ -11,6 +11,7 @@ import dashboardListingTemplate from './listing/dashboard_listing.html';
import { DashboardListingController } from './listing/dashboard_listing';
import { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
import { SavedObjectNotFound } from 'ui/errors';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
uiRoutes
.defaults(/dashboard/, {
@ -56,3 +57,15 @@ uiRoutes
}
}
});
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'dashboard',
title: 'Dashboards',
description: 'Create visual landing pages made up of content from other apps.',
icon: '/plugins/kibana/assets/app_dashboard.svg',
path: `/app/kibana#${DashboardConstants.LANDING_PAGE_PATH}`,
showOnHomePage: true,
category: FeatureCatalogueCategory.DATA
};
});

View file

@ -1,5 +1,6 @@
import uiRoutes from 'ui/routes';
import { DevToolsRegistryProvider } from 'ui/registry/dev_tools';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
import 'plugins/kibana/dev_tools/directives/dev_tools_app';
uiRoutes
@ -11,3 +12,15 @@ uiRoutes
}
}
});
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'console',
title: 'Console',
description: 'Manipulate your ES data directly with console.',
icon: '/plugins/kibana/assets/app_devtools.svg',
path: '/app/kibana#/dev_tools/console',
showOnHomePage: true,
category: FeatureCatalogueCategory.ADMIN
};
});

View file

@ -6,3 +6,16 @@ import 'plugins/kibana/discover/components/field_chooser/field_chooser';
import 'plugins/kibana/discover/controllers/discover';
import 'plugins/kibana/discover/styles/main.less';
import 'ui/doc_table/components/table_row';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'discover',
title: 'Discover',
description: 'Search and explore your data.',
icon: '/plugins/kibana/assets/app_discover.svg',
path: '/app/kibana#/discover',
showOnHomePage: true,
category: FeatureCatalogueCategory.DATA
};
});

View file

@ -0,0 +1,124 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Synopsis } from './synopsis';
import {
KuiTabs,
KuiTab,
KuiFlexItem,
KuiFlexGrid,
} from 'ui_framework/components';
import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
const ALL_TAB_ID = 'all';
const OTHERS_TAB_ID = 'others';
const isOtherCategory = (directory) => {
return directory.category !== FeatureCatalogueCategory.DATA && directory.category !== FeatureCatalogueCategory.ADMIN;
};
export class FeatureDirectory extends React.Component {
constructor(props) {
super(props);
this.tabs = [{
id: ALL_TAB_ID,
name: 'All',
}, {
id: FeatureCatalogueCategory.DATA,
name: 'Explore & Visualize',
}, {
id: FeatureCatalogueCategory.ADMIN,
name: 'Administrative',
}];
if (props.directories.some(isOtherCategory)) {
this.tabs.push({
id: OTHERS_TAB_ID,
name: 'Other',
});
}
this.state = {
selectedTabId: ALL_TAB_ID
};
}
onSelectedTabChanged = id => {
this.setState({
selectedTabId: id,
});
};
renderTabs = () => {
return this.tabs.map((tab, index) => (
<KuiTab
className="homeFeatureCategoryTab"
onClick={() => this.onSelectedTabChanged(tab.id)}
isSelected={tab.id === this.state.selectedTabId}
key={index}
>
{tab.name}
</KuiTab>
));
}
renderDirectories = () => {
return this.props.directories
.filter((directory) => {
if (this.state.selectedTabId === ALL_TAB_ID) {
return true;
}
if (this.state.selectedTabId === OTHERS_TAB_ID) {
return isOtherCategory(directory);
}
return this.state.selectedTabId === directory.category;
})
.map((directory) => {
return (
<KuiFlexItem key={directory.id}>
<Synopsis
description={directory.description}
iconUrl={this.props.addBasePath(directory.icon)}
title={directory.title}
url={this.props.addBasePath(directory.path)}
/>
</KuiFlexItem>
);
});
};
render() {
return (
<div className="kuiView home">
<div className="kuiViewContent">
<div className="kuiViewContentItem kuiVerticalRhythmXLarge">
<h1 className="kuiTitle ">
Feature Directory
</h1>
</div>
<div className="kuiViewContentItem kuiVerticalRhythmXLarge">
<KuiTabs className="homeFeatureDirectoryTabs">
{this.renderTabs()}
</KuiTabs>
<KuiFlexGrid columns={4} className="homeFeatureDirectory">
{ this.renderDirectories() }
</KuiFlexGrid>
</div>
</div>
</div>
);
}
}
FeatureDirectory.propTypes = {
addBasePath: PropTypes.func.isRequired,
directories: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
showOnHomePage: PropTypes.bool.isRequired,
category: PropTypes.string.isRequired
}))
};

View file

@ -0,0 +1,121 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Synopsis } from './synopsis';
import {
KuiLinkButton,
KuiFlexGroup,
KuiFlexItem,
KuiFlexGrid,
} from 'ui_framework/components';
import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
export function Home({ addBasePath, directories }) {
const renderDirectories = (category) => {
return directories
.filter((directory) => {
return directory.showOnHomePage && directory.category === category;
})
.map((directory) => {
return (
<KuiFlexItem style={{ minHeight: 64 }} key={directory.id}>
<Synopsis
description={directory.description}
iconUrl={addBasePath(directory.icon)}
title={directory.title}
url={addBasePath(directory.path)}
/>
</KuiFlexItem>
);
});
};
return (
<div className="kuiView home">
<div className="kuiViewContent">
<div className="kuiViewContentItem kuiVerticalRhythmXLarge">
<KuiFlexGroup
className="kuiVerticalRhythmSmall"
justifyContent="spaceBetween"
alignItems="flexEnd"
>
<KuiFlexItem>
<h1 className="kuiTitle">
Welcome to Kibana
</h1>
</KuiFlexItem>
<KuiFlexItem grow={false}>
<KuiFlexGroup alignItems="center">
<KuiFlexItem grow={false}>
<p className="kuiText kuiSubduedText">
Data already in Elasticsearch?
</p>
</KuiFlexItem>
<KuiFlexItem grow={false}>
<KuiLinkButton
buttonType="secondary"
href={addBasePath('/app/kibana#/management/kibana/index')}
>
Set up index patterns
</KuiLinkButton>
</KuiFlexItem>
</KuiFlexGroup>
</KuiFlexItem>
</KuiFlexGroup>
</div>
<div className="kuiViewContentItem kuiVerticalRhythmXLarge">
<KuiFlexGroup className="kuiVerticalRhythm">
<KuiFlexItem className="kuiPanel homePanel">
<h3 className="kuiSubTitle kuiVerticalRhythm">
Visualize and explore data
</h3>
<KuiFlexGrid className="kuiVerticalRhythmSmall homeTopFeatures" columns={2}>
{ renderDirectories(FeatureCatalogueCategory.DATA) }
</KuiFlexGrid>
</KuiFlexItem>
<KuiFlexItem className="kuiPanel homePanel">
<h3 className="kuiSubTitle kuiVerticalRhythm">
Manage and administer the Elastic stack
</h3>
<KuiFlexGrid className="kuiVerticalRhythmSmall homeTopFeatures" columns={2}>
{ renderDirectories(FeatureCatalogueCategory.ADMIN) }
</KuiFlexGrid>
</KuiFlexItem>
</KuiFlexGroup>
</div>
<div className="kuiViewContentItem kuiVerticalRhythmXLarge text-center">
<h4 className="kuiSubduedText kuiVerticalRhythmSmall">
{`Didn't find what you were looking for?`}
</h4>
<KuiLinkButton
buttonType="secondary"
href="#/home/feature_directory"
>
View full directory of Kibana features
</KuiLinkButton>
</div>
</div>
</div>
);
}
Home.propTypes = {
addBasePath: PropTypes.func.isRequired,
directories: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
showOnHomePage: PropTypes.bool.isRequired,
category: PropTypes.string.isRequired
}))
};

View file

@ -0,0 +1,47 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Home } from './home';
import { FeatureDirectory } from './feature_directory';
import {
HashRouter as Router,
Switch,
Route
} from 'react-router-dom';
export function HomeApp({ addBasePath, directories }) {
return (
<Router>
<Switch>
<Route
path="/home/feature_directory"
>
<FeatureDirectory
addBasePath={addBasePath}
directories={directories}
/>
</Route>
<Route
path="/"
>
<Home
addBasePath={addBasePath}
directories={directories}
/>
</Route>
</Switch>
</Router>
);
}
HomeApp.propTypes = {
addBasePath: PropTypes.func.isRequired,
directories: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
showOnHomePage: PropTypes.bool.isRequired,
category: PropTypes.string.isRequired
}))
};

View file

@ -0,0 +1,43 @@
import './synopsis.less';
import React from 'react';
import PropTypes from 'prop-types';
import {
KuiFlexGroup,
KuiFlexItem
} from 'ui_framework/components';
export function Synopsis({ description, iconUrl, title, url }) {
let img;
if (iconUrl) {
img = (
<img
className="synopsisIcon"
src={iconUrl}
alt=""
/>
);
}
return (
<KuiFlexGroup>
<KuiFlexItem grow={false}>{img}</KuiFlexItem>
<KuiFlexItem className="synopsis">
<h4 className="kuiTextTitle synopsisTitle">
<a href={url} className="kuiLink">
{title}
</a>
</h4>
<p className="kuiText kuiSubduedText">
{description}
</p>
</KuiFlexItem>
</KuiFlexGroup>
);
}
Synopsis.propTypes = {
description: PropTypes.string.isRequired,
iconUrl: PropTypes.string,
title: PropTypes.string.isRequired,
url: PropTypes.string.isRequired
};

View file

@ -0,0 +1,12 @@
.synopsis {
margin-left: 10px !important;
}
.synopsisTitle {
font-size: 16px;
font-weight: normal;
}
.synopsisIcon {
padding-top: 8px;
}

View file

@ -0,0 +1,28 @@
@import (reference) "~ui/styles/variables.less";
.home {
background-color: @globalColorLightestGray;
min-height: 100vh;
}
.homePanel {
padding: 24px;
background-color: @white;
}
.homeTopFeatures {
margin-top: 12px;
}
.homeFeatureDirectory {
background: @white;
margin: 0;
border-left: 1px solid @globalColorLightGray;
border-right: 1px solid @globalColorLightGray;
border-bottom: 1px solid @globalColorLightGray;
padding: 16px;
}
.homeFeatureCategoryTab {
background-color: @globalColorLightestGray;
}

View file

@ -0,0 +1,4 @@
<home-app
add-base-path="addBasePath"
directories="directories"
/>

View file

@ -0,0 +1,29 @@
import './home.less';
import chrome from 'ui/chrome';
import routes from 'ui/routes';
import template from './home_ng_wrapper.html';
import { FeatureCatalogueRegistryProvider } from 'ui/registry/feature_catalogue';
import { uiModules } from 'ui/modules';
import {
HomeApp
} from './components/home_app';
const app = uiModules.get('apps/home', []);
app.directive('homeApp', function (reactDirective) {
return reactDirective(HomeApp);
});
function getRoute() {
return {
template,
controller($scope, Private) {
$scope.addBasePath = chrome.addBasePath;
$scope.directories = Private(FeatureCatalogueRegistryProvider).inTitleOrder;
}
};
}
// All routing will be handled inside HomeApp via react, we just need to make sure angular doesn't
// redirect us to the default page by encountering a url it isn't marked as being able to handle.
routes.when('/home', getRoute());
routes.when('/home/feature_directory', getRoute());

View file

@ -6,6 +6,7 @@ import routes from 'ui/routes';
import { uiModules } from 'ui/modules';
import 'ui/autoload/all';
import 'plugins/kibana/home/index';
import 'plugins/kibana/discover/index';
import 'plugins/kibana/visualize/index';
import 'plugins/kibana/dashboard/index';

View file

@ -5,6 +5,7 @@ import uiRoutes from 'ui/routes';
import { uiModules } from 'ui/modules';
import indexTemplate from 'plugins/kibana/management/sections/indices/index.html';
import { SavedObjectsClientProvider } from 'ui/saved_objects';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
const indexPatternsResolutions = {
indexPatterns: function (Private) {
@ -64,3 +65,15 @@ management.getSection('kibana').register('indices', {
order: 0,
url: '#/management/kibana/indices/'
});
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'index_patterns',
title: 'Index Patterns',
description: 'Make your ES data usable from within kibana.',
icon: '/plugins/kibana/assets/app_dashboard.svg',
path: '/app/kibana#/management/kibana/indices',
showOnHomePage: true,
category: FeatureCatalogueCategory.ADMIN
};
});

View file

@ -4,6 +4,7 @@ import 'plugins/kibana/management/sections/objects/_objects';
import 'ace';
import 'ui/directives/confirm_click';
import { uiModules } from 'ui/modules';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
// add the module deps to this module
uiModules.get('apps/management');
@ -13,3 +14,15 @@ management.getSection('kibana').register('objects', {
order: 10,
url: '#/management/kibana/objects'
});
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'saved_objects',
title: 'Saved objects',
description: 'Import / export your kibana objects for later reuse.',
icon: '/plugins/kibana/assets/app_dashboard.svg',
path: '/app/kibana#/management/kibana/objects',
showOnHomePage: true,
category: FeatureCatalogueCategory.ADMIN
};
});

View file

@ -5,6 +5,7 @@ import { management } from 'ui/management';
import uiRoutes from 'ui/routes';
import { uiModules } from 'ui/modules';
import indexTemplate from 'plugins/kibana/management/sections/settings/index.html';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
uiRoutes
.when('/management/kibana/settings', {
@ -44,3 +45,15 @@ management.getSection('kibana').register('settings', {
order: 20,
url: '#/management/kibana/settings'
});
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'advanced_settings',
title: 'Advanced settings',
description: 'Use to customize your kibana instance.',
icon: '/plugins/kibana/assets/app_dashboard.svg',
path: '/app/kibana#/management/kibana/settings',
showOnHomePage: false,
category: FeatureCatalogueCategory.ADMIN
};
});

View file

@ -13,6 +13,7 @@ import uiRoutes from 'ui/routes';
import visualizeListingTemplate from './listing/visualize_listing.html';
import { VisualizeListingController } from './listing/visualize_listing';
import { VisualizeConstants } from './visualize_constants';
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
uiRoutes
.defaults(/visualize/, {
@ -24,3 +25,14 @@ uiRoutes
controllerAs: 'listingController',
});
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'visualize',
title: 'Visualize',
description: 'Build a variety of graphs for your data.',
icon: '/plugins/kibana/assets/app_visualize.svg',
path: `/app/kibana#${VisualizeConstants.LANDING_PAGE_PATH}`,
showOnHomePage: true,
category: FeatureCatalogueCategory.DATA
};
});

View file

@ -1,4 +1,3 @@
export default function (kibana) {
let mainFile = 'plugins/timelion/app';
@ -29,7 +28,7 @@ export default function (kibana) {
};
},
uses: [
'savedObjectTypes',
'savedObjectTypes'
]
},
hacks: [
@ -39,6 +38,9 @@ export default function (kibana) {
visTypes: [
'plugins/timelion/vis'
],
home: [
'plugins/timelion/register_feature'
],
mappings: require('./mappings.json'),
uiSettingDefaults: {

View file

@ -0,0 +1,13 @@
import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
FeatureCatalogueRegistryProvider.register(() => {
return {
id: 'timelion',
title: 'Timelion',
description: 'Build powerful time based visualizations thru expressions.',
icon: '/plugins/kibana/assets/app_timelion.svg',
path: '/app/timelion',
showOnHomePage: true,
category: FeatureCatalogueCategory.DATA
};
});

View file

@ -6,25 +6,27 @@
<!-- Logo -->
<div class="global-nav__logo">
<li
ng-if="!logoBrand && !smallLogoBrand"
aria-label="{{ appTitle }} Logo"
class="logo kibana"
></li>
<a href="{{ getHref('/app/kibana#/home') }}">
<li
ng-if="!logoBrand && !smallLogoBrand"
aria-label="{{ appTitle }} Logo"
class="logo kibana"
></li>
<li
ng-if="logoBrand"
ng-style="{ 'background': logoBrand }"
aria-label="{{ appTitle }} Logo"
class="logo hidden-sm"
></li>
<li
ng-if="logoBrand"
ng-style="{ 'background': logoBrand }"
aria-label="{{ appTitle }} Logo"
class="logo hidden-sm"
></li>
<li
ng-if="smallLogoBrand"
ng-style="{ 'background': smallLogoBrand }"
aria-label="{{ appTitle }} Logo"
class="logo-small visible-sm hidden-xs"
></li>
<li
ng-if="smallLogoBrand"
ng-style="{ 'background': smallLogoBrand }"
aria-label="{{ appTitle }} Logo"
class="logo-small visible-sm hidden-xs"
></li>
</a>
</div>
<!-- Links -->

View file

@ -8,7 +8,7 @@ import { uiModules } from 'ui/modules';
const module = uiModules.get('kibana');
module.directive('globalNav', globalNavState => {
module.directive('globalNav', (globalNavState, chrome) => {
return {
restrict: 'E',
replace: true,
@ -41,6 +41,10 @@ module.directive('globalNav', globalNavState => {
updateGlobalNav();
});
scope.getHref = path => {
return chrome.addBasePath(path);
};
scope.toggleGlobalNav = event => {
event.preventDefault();
globalNavState.setOpen(!globalNavState.isOpen());

View file

@ -0,0 +1,14 @@
import { uiRegistry } from 'ui/registry/_registry';
export const FeatureCatalogueRegistryProvider = uiRegistry({
name: 'featureCatalogue',
index: ['id'],
group: ['category'],
order: ['title']
});
export const FeatureCatalogueCategory = {
ADMIN: 'admin',
DATA: 'data',
OTHER: 'other'
};

View file

@ -119,6 +119,7 @@ export default class UiExports {
case 'managementSections':
case 'devTools':
case 'docViews':
case 'home':
case 'hacks':
return (plugin, spec) => {
this.aliases[type] = _.union(this.aliases[type] || [], spec);

View file

@ -3741,6 +3741,7 @@ main {
.kuiTab.kuiTab-isSelected {
cursor: default;
color: #191E23;
background-color: #FFF;
border-bottom-color: #FFF; }
.theme-dark .kuiTab.kuiTab-isSelected {
color: #cecece;
@ -4111,6 +4112,12 @@ main {
.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall {
margin-top: 5px; }
.kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge {
margin-top: 20px; }
.kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge {
margin-top: 40px; }
.kuiView {
background-color: #FFF;
-webkit-box-flex: 1;

View file

@ -74,6 +74,7 @@
&.kuiTab-isSelected {
cursor: default;
color: $kuiFontColor;
background-color: $tabBackgroundColor;
border-bottom-color: $tabBackgroundColor;
@include darkTheme {

View file

@ -1,4 +1,6 @@
$verticalRhythmSpacing: 10px;
$verticalRhythmSmallSpacing: 5px;
$verticalRhythmLargeSpacing: 20px;
$verticalRhythmXLargeSpacing: 40px;
@import "vertical_rhythm";

View file

@ -9,3 +9,15 @@
margin-top: $verticalRhythmSmallSpacing;
}
}
.kuiVerticalRhythmLarge {
& + & {
margin-top: $verticalRhythmLargeSpacing;
}
}
.kuiVerticalRhythmXLarge {
& + & {
margin-top: $verticalRhythmXLargeSpacing;
}
}