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

Add Menu, Text, and Event components.

Browse source
This commit is contained in:
CJ Cenizal 2017-01-25 17:08:33 -08:00
parent 2b12dec3b4
commit 05baa22d1f
12 changed files with 103 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

5
ui_framework/components/menu/_menu.scss
View file

@ -2,11 +2,10 @@
}
.kuiMenu--contained {
border-top: $tableRowBorder;
border-bottom: $tableRowBorder;
border: $tableRowBorder;
.kuiMenuItem {
padding: 6px;
padding: 6px 10px;
}
}

11
ui_framework/components/typography/_typography.scss
View file

@ -17,3 +17,14 @@
color: $fontColor;
font-size: 18px;
}
/**
* 1. Override p.
*/
.kuiText {
margin: 0; /* 1 */
font-weight: 400; /* 1 */
color: $fontColor;
line-height: $lineHeight;
font-size: $fontSize;
}

17
ui_framework/dist/ui_framework.css vendored
View file

@ -935,10 +935,9 @@ body {
font-weight: bold; }
.kuiMenu--contained {
border-top: 1px solid #E4E4E4;
border-bottom: 1px solid #E4E4E4; }
border: 1px solid #E4E4E4; }
.kuiMenu--contained .kuiMenuItem {
padding: 6px; }
padding: 6px 10px; }
.kuiMenuItem {
padding: 6px 0; }
@ -1557,5 +1556,17 @@ body {
color: #191E23;
font-size: 18px; }
/**
* 1. Override p.
*/
.kuiText {
margin: 0;
/* 1 */
font-weight: 400;
/* 1 */
color: #191E23;
line-height: 1.5;
font-size: 14px; }
.kuiVerticalRhythm + .kuiVerticalRhythm {
margin-top: 10px; }

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

@ -25,15 +25,18 @@ import InfoPanelExample
import LinkExample
from '../../views/link/link_example.jsx';
import ModalExample
from '../../views/modal/modal_example.jsx';
import LocalNavExample
from '../../views/local_nav/local_nav_example.jsx';
import MenuExample
from '../../views/menu/menu_example.jsx';
import MicroButtonExample
from '../../views/micro_button/micro_button_example.jsx';
import ModalExample
from '../../views/modal/modal_example.jsx';
import PanelExample
from '../../views/panel/panel_example.jsx';
@ -83,6 +86,9 @@ const components = [{
}, {
name: 'LocalNav',
component: LocalNavExample,
}, {
name: 'Menu',
component: MenuExample,
}, {
name: 'MicroButton',
component: MicroButtonExample,

6
ui_framework/doc_site/src/views/event/event_example.jsx
View file

@ -6,10 +6,16 @@ import {
export default createExample([{
title: 'Event',
description: (
<p>Events can represent updates, logs, notifications, and status changes.</p>
),
html: require('./event.html'),
hasDarkTheme: false,
}, {
title: 'Event Menu',
description: (
<p>You&rsquo;ll typically want to present them within a Menu.</p>
),
html: require('./event_menu.html'),
hasDarkTheme: false,
},]);

36
ui_framework/doc_site/src/views/event/event_menu.html
View file

@ -1,16 +1,4 @@
<div class="kuiHeaderBar">
<div class="kuiHeaderBarSection">
<h2 class="kuiSubTitle">
Cluster Alerts
</h2>
</div>
<div class="kuiHeaderBarSection">
<a class="kuiLink">View all 21 alerts</a>
</div>
</div>
<div class="kuiMenu kuiVerticalRhythm">
<div class="kuiMenu">
<div class="kuiMenuItem">
<div class="kuiEvent">
<div class="kuiEventSymbol">
@ -23,7 +11,7 @@
</div>
<div class="kuiEventBody__metadata">
August 4, 2021
August 4, 2021 02:23:28
</div>
</div>
</div>
@ -41,7 +29,7 @@
</div>
<div class="kuiEventBody__metadata">
August 3, 2021
August 3, 2021 12:00:54
</div>
</div>
</div>
@ -50,7 +38,7 @@
<div class="kuiMenuItem">
<div class="kuiEvent">
<div class="kuiEventSymbol">
<span class="kuiIcon kuiIcon--error fa-warning"></span>
<span class="kuiIcon kuiIcon--warning fa-bolt"></span>
</div>
<div class="kuiEventBody">
@ -59,24 +47,10 @@
</div>
<div class="kuiEventBody__metadata">
July 27, 2021
July 27, 2021 11:20:09
</div>
</div>
</div>
</div>
</div>
<div class="kuiHeaderBar kuiVerticalRhythm">
<div class="kuiHeaderBarSection">
<h2 class="kuiSubTitle">
Elasticsearch
</h2>
</div>
<div class="kuiHeaderBarSection">
<span class="kuiStatusText kuiStatusText--error">
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
Red health
</span>
</div>
</div>

8
ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.html
View file

@ -6,9 +6,11 @@
</div>
<div class="kuiHeaderBarSection">
<span class="kuiStatusText kuiStatusText--error">
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
Red health
<span class="kuiText">
<span class="kuiStatusText kuiStatusText--error">
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
Red health
</span>
</span>
</div>
</div>

13
ui_framework/doc_site/src/views/menu/menu.html Normal file
View file

@ -0,0 +1,13 @@
<div class="kuiMenu">
<div class="kuiMenuItem">
<p class="kuiText">Item A</p>
</div>
<div class="kuiMenuItem">
<p class="kuiText">Item B</p>
</div>
<div class="kuiMenuItem">
<p class="kuiText">Item C</p>
</div>
</div>

13
ui_framework/doc_site/src/views/menu/menu_contained.html Normal file
View file

@ -0,0 +1,13 @@
<div class="kuiMenu kuiMenu--contained">
<div class="kuiMenuItem">
<p class="kuiText">Item A</p>
</div>
<div class="kuiMenuItem">
<p class="kuiText">Item B</p>
</div>
<div class="kuiMenuItem">
<p class="kuiText">Item C</p>
</div>
</div>

15
ui_framework/doc_site/src/views/menu/menu_example.jsx Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'Menu',
html: require('./menu.html'),
hasDarkTheme: false,
}, {
title: 'Menu, contained',
html: require('./menu_contained.html'),
hasDarkTheme: false,
}]);

3
ui_framework/doc_site/src/views/typography/text.html Normal file
View file

@ -0,0 +1,3 @@
<p class="kuiText">
That was the winter the Sager froze over.
</p>

7
ui_framework/doc_site/src/views/typography/typography_example.jsx
View file

@ -18,4 +18,11 @@ export default createExample([{
),
html: require('./sub_title.html'),
hasDarkTheme: false,
}, {
title: 'Text',
description: (
<p>Works well with a <code className="guideCode">p</code>.</p>
),
html: require('./text.html'),
hasDarkTheme: false,
}]);