github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Document VerticalRhythm component. (#10030)

Browse source
This commit is contained in:
CJ Cenizal 2017-01-23 17:23:36 -08:00 • committed by GitHub
parent fe8c4b69eb
commit 7ef480fe89
9 changed files with 86 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/ui/public/styles/base.less
View file

@ -603,12 +603,6 @@ fieldset {
font-size: 14px;
}
.kuiVerticalRhythm {
& + & {
margin-top: 10px;
}
}
.kuiView {
background-color: #FFFFFF;
flex: 1 1 auto;

4
ui_framework/components/index.scss
View file

@ -55,6 +55,9 @@ $toolBarPadding: 10px;
$toolBarSectionSpacing: 50px;
$toolBarItsemSpacing: 10px;
// Rhythm
$verticalRhythm: 10px;
@mixin darkTheme {
.theme-dark & {
@content;
@ -224,3 +227,4 @@ body {
@import "table/index";
@import "tabs/index";
@import "tool_bar/index";
@import "vertical_rhythm/index";

1
ui_framework/components/vertical_rhythm/_index.scss Normal file
View file

@ -0,0 +1 @@
@import "vertical_rhythm";

5
ui_framework/components/vertical_rhythm/_vertical_rhythm.scss Normal file
View file

@ -0,0 +1,5 @@
.kuiVerticalRhythm {
& + & {
margin-top: $verticalRhythm;
}
}

3
ui_framework/dist/ui_framework.css vendored
View file

@ -1350,3 +1350,6 @@ body {
color: #5A5A5A;
white-space: nowrap;
/* 1 */ }
.kuiVerticalRhythm + .kuiVerticalRhythm {
margin-top: 10px; }

6
ui_framework/doc_site/src/services/routes/routes.js
View file

@ -40,6 +40,9 @@ import TabsExample
import ToolBarExample
from '../../views/tool_bar/tool_bar_example.jsx';
import VerticalRhythmExample
from '../../views/vertical_rhythm/vertical_rhythm_example.jsx';
// Component route names should match the component name exactly.
const components = [{
name: 'Bar',
@ -80,6 +83,9 @@ const components = [{
}, {
name: 'ToolBar',
component: ToolBarExample,
}, {
name: 'VerticalRhythm',
component: VerticalRhythmExample,
}];
export default {

8
ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm.html Normal file
View file

@ -0,0 +1,8 @@
<div class="kuiVerticalRhythm" style="background-color: #dadada; height: 60px;">
</div>
<div class="kuiVerticalRhythm" style="background-color: #dadada; height: 60px;">
</div>
<div class="kuiVerticalRhythm" style="background-color: #dadada; height: 60px;">
</div>

24
ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.jsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'VerticalRhythm',
description: (
<div>
<p>VerticalRhythm creates regular vertical spacing between elements.</p>
<p><strong>Note:</strong> It only works if two adjacent elements have this class applied, in which case it will create space between them.</p>
</div>
),
html: require('./vertical_rhythm.html'),
hasDarkTheme: false,
}, {
title: 'VerticalRhythm with Panels',
description: (
<p>You can apply it to any component, e.g. Panels.</p>
),
html: require('./vertical_rhythm_with_panels.html'),
hasDarkTheme: false,
}]);

35
ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_with_panels.html Normal file
View file

@ -0,0 +1,35 @@
<div class="kuiPanel kuiVerticalRhythm">
<div class="kuiPanelHeader">
<div class="kuiPanelHeader__title">
Panel title
</div>
</div>
<div class="kuiPanelBody">
<p>Content goes here</p>
</div>
</div>
<div class="kuiPanel kuiVerticalRhythm">
<div class="kuiPanelHeader">
<div class="kuiPanelHeader__title">
Panel title
</div>
</div>
<div class="kuiPanelBody">
<p>Content goes here</p>
</div>
</div>
<div class="kuiPanel kuiVerticalRhythm">
<div class="kuiPanelHeader">
<div class="kuiPanelHeader__title">
Panel title
</div>
</div>
<div class="kuiPanelBody">
<p>Content goes here</p>
</div>
</div>