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

Fix CheckBox and ToolBarSearchBox icon positioning. (#10356) (#10365)

Browse source 
* Fix CheckBox alignment by applying box-sizing: border-box to all before and after pseudo-elements.

* Fix ToolBarSearchBox height and icon alignment.

* Make Table examples consistently use the cell liner.
This commit is contained in:
CJ Cenizal 2017-02-15 08:23:30 -08:00 • committed by GitHub
parent 56cff215f6
commit 87d6b3d736
6 changed files with 101 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

3
ui_framework/components/form/_check_box.scss
View file

@ -20,8 +20,7 @@
&:before {
position: relative;
top: -0.05em;
left: 0.15em;
left: 0.25em;
font-family: FontAwesome;
content: "\F00C";
font-size: 1em;

5
ui_framework/components/index.scss
View file

@ -229,6 +229,11 @@ $verticalRhythm: 10px;
* {
box-sizing: border-box;
&:before,
&:after {
box-sizing: border-box;
}
}
body {

13
ui_framework/components/tool_bar/_tool_bar_search.scss
View file

@ -27,12 +27,14 @@
.kuiToolBarSearchBox {
flex: 1 1 auto;
position: relative;
font-size: $fontSize;
}
.kuiToolBarSearchBox__icon {
position: absolute;
top: 6px;
left: 8px;
top: 0.5em;
left: 0.7em;
font-size: 1em;
font-size: 14px;
color: #ACACAC;
}
@ -43,14 +45,15 @@
.kuiToolBarSearchBox__input {
width: 100%;
min-width: 200px;
padding: 5px 12px 6px 28px;
padding: 4px 12px 5px 28px;
font-family: $font; /* 1 */
background-color: #FFFFFF;
color: $fontColor;
border: 1px solid #FFFFFF;
border-radius: $buttonBorderRadius;
font-size: $fontSize;
font-size: 1em;
border: 1px solid #ffffff;
line-height: normal; /* 1 */
transition: border-color $formTransitionTiming;
&:focus {
@include formControlFocus;

24
ui_framework/dist/ui_framework.css vendored
View file

@ -25,6 +25,8 @@
*/
* {
box-sizing: border-box; }
*:before, *:after {
box-sizing: border-box; }
body {
font-family: "Open Sans", Helvetica, Arial, sans-serif; }
@ -302,8 +304,7 @@ body {
transition: background-color 0.1s linear; }
.kuiCheckBox:before {
position: relative;
top: -0.05em;
left: 0.15em;
left: 0.25em;
font-family: FontAwesome;
content: "\F00C";
font-size: 1em;
@ -1663,12 +1664,14 @@ body {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
position: relative; }
position: relative;
font-size: 14px; }
.kuiToolBarSearchBox__icon {
position: absolute;
top: 6px;
left: 8px;
top: 0.5em;
left: 0.7em;
font-size: 1em;
font-size: 14px;
color: #ACACAC; }
@ -1678,15 +1681,18 @@ body {
.kuiToolBarSearchBox__input {
width: 100%;
min-width: 200px;
padding: 5px 12px 6px 28px;
padding: 4px 12px 5px 28px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
/* 1 */
background-color: #FFFFFF;
color: #191E23;
border: 1px solid #FFFFFF;
border-radius: 4px;
font-size: 14px;
font-size: 1em;
border: 1px solid #ffffff;
line-height: normal;
/* 1 */ }
/* 1 */
-webkit-transition: border-color 0.1s linear;
transition: border-color 0.1s linear; }
.kuiToolBarSearchBox__input:focus {
outline: none;
border-color: #6EADC1; }

48
ui_framework/doc_site/src/views/table/controlled_table.html
View file

@ -67,13 +67,19 @@
<tbody>
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Alligator</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Alligator</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--success fa-check"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--success fa-check"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
@ -89,13 +95,19 @@
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Boomerang</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Boomerang</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--success fa-check"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--success fa-check"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
@ -111,13 +123,19 @@
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Celebration</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Celebration</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--warning fa-bolt"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--warning fa-bolt"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
@ -133,13 +151,19 @@
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Dog</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Dog</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--error fa-warning"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--error fa-warning"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">

48
ui_framework/doc_site/src/views/table/table.html
View file

@ -26,13 +26,19 @@
<tbody>
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Alligator</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Alligator</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--success fa-check"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--success fa-check"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
@ -48,13 +54,19 @@
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Boomerang</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Boomerang</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--success fa-check"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--success fa-check"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
@ -70,13 +82,19 @@
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Celebration</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Celebration</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--warning fa-bolt"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--warning fa-bolt"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
@ -92,13 +110,19 @@
<tr class="kuiTableRow">
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<input type="checkbox" class="kuiCheckBox">
<div class="kuiTableRowCell__liner">
<input type="checkbox" class="kuiCheckBox">
</div>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="#">Dog</a>
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="#">Dog</a>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiIcon kuiIcon--error fa-warning"></div>
<div class="kuiTableRowCell__liner">
<div class="kuiIcon kuiIcon--error fa-warning"></div>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">