maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Refine kuiStaticInput, Bar, and Button components. (#9917)

Browse source 
* Override Bootstrap link styles in Button component. Give kuiStaticInput a transparent background.

* Fix incorrect markup in MicroButton examples.

* Give Bar component a min height of 30px so it has a consistent height even when it has shorter children.

* Remove kuiSubHeader class. Migrate Saved Objects to use Bar component instead.
This commit is contained in:
CJ Cenizal 2017-01-18 15:01:05 -08:00 committed by GitHub
parent fb38e35e58
commit 741c053768
9 changed files with 62 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/core_plugins/kibana/public/management/sections/objects/_objects.html
View file

@ -1,12 +1,14 @@
<kbn-management-app section="kibana" class="kuiView">
<kbn-management-objects class="kuiViewContent kuiViewContent--constrainedWidth">
<!-- Header -->
<div class="kuiViewContentItem kuiSubHeader">
<h1 class="kuiTitle">
Edit Saved Objects
</h1>
<div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
<div class="kuiBarSection">
<h1 class="kuiTitle">
Edit Saved Objects
</h1>
</div>
<div>
<div class="kuiBarSection">
<button
class="kuiButton kuiButton--basic kuiButton--iconText"
ng-click="exportAll()"

12
src/core_plugins/kibana/public/management/sections/objects/_view.html
View file

@ -1,12 +1,14 @@
<kbn-management-app section="kibana" class="kuiView">
<kbn-management-objects-view class="kuiViewContent kuiViewContent--constrainedWidth">
<!-- Header -->
<div class="kuiViewContentItem kuiSubHeader">
<h1 class="kuiTitle">
Edit {{ title }}
</h1>
<div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
<div class="kuiBarSection">
<h1 class="kuiTitle">
Edit {{ title }}
</h1>
</div>
<div class="kuiButtonGroup">
<div class="kuiBarSection">
<a
class="kuiButton kuiButton--basic kuiButton--iconText"
href="{{ link }}"

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

@ -631,13 +631,6 @@ fieldset {
padding-right: 20px;
}
.kuiSubHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.kuiNotice {
padding: 40px 60px 48px;
margin: 20px;
@ -783,6 +776,7 @@ fieldset {
.kuiStaticInput {
padding: 5px 0;
border-color: transparent;
background-color: transparent;;
}
.kuiTextArea {

17
ui_framework/components/button/_button.scss
View file

@ -73,7 +73,7 @@
&:hover:enabled,
&:active:enabled {
color: #FFFFFF;
color: #FFFFFF !important; /* 1 */
background-color: #006E8A;
}
@ -86,13 +86,16 @@
}
}
/**
* 1. Override Bootstrap.
*/
.kuiButton--danger {
color: #FFFFFF;
background-color: #D76051;
&:hover:enabled,
&:active:enabled {
color: #FFFFFF;
color: #FFFFFF !important; /* 1 */
background-color: #A52E1F;
}
@ -100,26 +103,26 @@
background-color: #efc0ba;
}
/**
* 1. Override Bootstrap.
*/
&:focus {
@include focus(#ff523c);
color: #FFFFFF !important; /* 1 */
}
}
/**
* 1. Override Bootstrap.
*/
.kuiButton--hollow {
color: $linkColor;
background-color: transparent;
&:hover:enabled,
&:active:enabled {
color: $linkHoverColor;
color: $linkHoverColor !important; /* 1 */
text-decoration: underline;
}
&:disabled {
color: #dddddd;
color: #dddddd !important; /* 1 */
}
}

5
ui_framework/components/index.scss
View file

@ -124,10 +124,15 @@ $toolBarItsemSpacing: 10px;
}
}
/**
* 1. Give Bar a consistent height for when it contains shorter children, and therefore can't
* depend on them to give it the desired height.
*/
@mixin bar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 30px; /* 1 */
}
/**

35
ui_framework/dist/ui_framework.css vendored
View file

@ -7,6 +7,10 @@
* button elements and anchor tags.
* 2. Fit MicroButton inside of Table rows without pushing them taller.
*/
/**
* 1. Give Bar a consistent height for when it contains shorter children, and therefore can't
* depend on them to give it the desired height.
*/
/**
* 1. Put 10px of space between each child.
* 2. If there is only one child, align it to the right. If you wanted it aligned right, you
@ -33,7 +37,9 @@ body {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
justify-content: space-between;
min-height: 30px;
/* 1 */ }
.kuiBarSection {
display: -webkit-box;
@ -140,7 +146,8 @@ body {
color: #FFFFFF;
background-color: #6EADC1; }
.kuiButton--primary:hover:enabled, .kuiButton--primary:active:enabled {
color: #FFFFFF;
color: #FFFFFF !important;
/* 1 */
background-color: #006E8A; }
.kuiButton--primary:disabled {
background-color: #B6D6E0; }
@ -148,14 +155,15 @@ body {
color: #FFFFFF !important;
/* 1 */ }
/**
* 1. Override Bootstrap.
*/
.kuiButton--danger {
color: #FFFFFF;
background-color: #D76051;
/**
* 1. Override Bootstrap.
*/ }
background-color: #D76051; }
.kuiButton--danger:hover:enabled, .kuiButton--danger:active:enabled {
color: #FFFFFF;
color: #FFFFFF !important;
/* 1 */
background-color: #A52E1F; }
.kuiButton--danger:disabled {
background-color: #efc0ba; }
@ -169,14 +177,19 @@ body {
color: #FFFFFF !important;
/* 1 */ }
/**
* 1. Override Bootstrap.
*/
.kuiButton--hollow {
color: #3CAED2;
background-color: transparent; }
.kuiButton--hollow:hover:enabled, .kuiButton--hollow:active:enabled {
color: #006E8A;
color: #006E8A !important;
/* 1 */
text-decoration: underline; }
.kuiButton--hollow:disabled {
color: #dddddd; }
color: #dddddd !important;
/* 1 */ }
.kuiButtonGroup {
display: -webkit-box;
@ -1082,6 +1095,8 @@ body {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 30px;
/* 1 */
padding: 10px;
height: 50px;
background-color: #E4E4E4; }
@ -1159,6 +1174,8 @@ body {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 30px;
/* 1 */
padding: 10px;
height: 40px;
background-color: #ffffff;

2
ui_framework/doc_site/src/views/micro_button/micro_button.html
View file

@ -1,3 +1,3 @@
<button class="kuiMicroButton" title="Edit">
<soan class="kuiIcon fa-gear"></soan>
<span class="kuiIcon fa-gear"></span>
</button>

4
ui_framework/doc_site/src/views/micro_button/micro_button_elements.html
View file

@ -1,9 +1,9 @@
<button class="kuiMicroButton" title="Edit">
<soan class="kuiIcon fa-gear"></soan>
<span class="kuiIcon fa-gear"></span>
</button>
&nbsp;
<a href="#" class="kuiMicroButton" title="View">
<soan class="kuiIcon fa-eye"></soan>
<span class="kuiIcon fa-eye"></span>
</a>

6
ui_framework/doc_site/src/views/micro_button/micro_button_group.html
View file

@ -1,13 +1,13 @@
<div class="kuiMicroButtonGroup">
<button class="kuiMicroButton" title="Edit">
<soan class="kuiIcon fa-gear"></soan>
<span class="kuiIcon fa-gear"></span>
</button>
<button class="kuiMicroButton" title="View">
<soan class="kuiIcon fa-eye"></soan>
<span class="kuiIcon fa-eye"></span>
</button>
<button class="kuiMicroButton" title="Delete">
<soan class="kuiIcon fa-trash"></soan>
<span class="kuiIcon fa-trash"></span>
</button>
</div>