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

[UI Framework] Use box-shadow to create outlines in Button and CheckBox focus state (#10045)

Browse source 
Backports PR #10044

**Commit 1:**
Use box-shadow instead of outline to create focused states for Button and CheckBox.

* Original sha: db5276ef26
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-24T18:36:58Z

**Commit 2:**
Fix hover state of Hollow Button in Timelion.

* Original sha: 99e10af4ba
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-24T18:43:40Z
This commit is contained in:
jasper 2017-01-24 15:08:34 -05:00 • committed by CJ Cenizal
parent 470a2e7000
commit 5502c009bd
3 changed files with 62 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -104,16 +104,17 @@
}
&:focus {
@include focus(#ff523c);
@include focus($focusDangerColor);
color: #FFFFFF !important; /* 1 */
}
}
/**
* 1. Override Bootstrap.
* 2. Override either Bootstrap or Timelion styles.
*/
.kuiButton--hollow {
color: $linkColor;
color: $linkColor !important; /* 2 */
background-color: transparent;
&:hover:enabled,

21
ui_framework/components/index.scss
View file

@ -34,6 +34,8 @@ $successColor: #417505;
$warningColor: #ffac15;
$errorColor: #D86051;
$focusColor: #6EADC1;
$focusDangerColor: #ff523c;
$focusBackgroundColor: #ffffff;
$fontColor: #191E23;
$subduedFontColor: #9fa3a7;
$linkColor: #3CAED2;
@ -67,11 +69,12 @@ $verticalRhythm: 10px;
/**
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
* 2. Override inherited styles (possibly from Bootstrap).
* 3. Create an offset box-shadow that follows the contours of the element.
*/
@mixin focus($color: $focusColor) {
@mixin focus($color: $focusColor, $backgroundColor: $focusBackgroundColor) {
z-index: 1; /* 1 */
outline: 1px solid $color !important; /* 2 */
outline-offset: 2px !important; /* 2 */
outline: none; /* 2 */
box-shadow: 0 0 0 1px $backgroundColor, 0 0 0 2px $color; /* 3 */
}
@mixin formControlFocus {
@ -189,6 +192,18 @@ $verticalRhythm: 10px;
}
@mixin buttonOnStandoutBackground {
.kuiButton {
&:focus {
@include focus($focusColor, $standoutBackgroundColor);
}
}
.kuiButton--danger {
&:focus {
@include focus($focusDangerColor, $standoutBackgroundColor);
}
}
.kuiButton--basic {
color: #5a5a5a;
background-color: #FFFFFF;

51
ui_framework/dist/ui_framework.css vendored
View file

@ -1,6 +1,7 @@
/**
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
* 2. Override inherited styles (possibly from Bootstrap).
* 3. Create an offset box-shadow that follows the contours of the element.
*/
/**
* Nothing fancy, just the basics so we can use this for both regular and static controls.
@ -115,10 +116,10 @@ body {
.kuiButton:focus {
z-index: 1;
/* 1 */
outline: 1px solid #6EADC1 !important;
outline: none;
/* 2 */
outline-offset: 2px !important;
/* 2 */ }
box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #6EADC1;
/* 3 */ }
.kuiButton--iconText .kuiButton__icon:first-child {
margin-right: 4px; }
@ -173,18 +174,20 @@ body {
.kuiButton--danger:focus {
z-index: 1;
/* 1 */
outline: 1px solid #ff523c !important;
/* 2 */
outline-offset: 2px !important;
outline: none;
/* 2 */
box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
/* 3 */
color: #FFFFFF !important;
/* 1 */ }
/**
* 1. Override Bootstrap.
* 2. Override either Bootstrap or Timelion styles.
*/
.kuiButton--hollow {
color: #3CAED2;
color: #3CAED2 !important;
/* 2 */
background-color: transparent; }
.kuiButton--hollow:hover:enabled, .kuiButton--hollow:active:enabled {
color: #006E8A !important;
@ -271,10 +274,10 @@ body {
.kuiCheckBox:focus {
z-index: 1;
/* 1 */
outline: 1px solid #6EADC1 !important;
outline: none;
/* 2 */
outline-offset: 2px !important;
/* 2 */ }
box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #6EADC1;
/* 3 */ }
.kuiCheckBox:disabled {
opacity: 0.3;
cursor: not-allowed; }
@ -981,6 +984,20 @@ body {
padding: 10px;
height: 50px;
background-color: #E4E4E4; }
.kuiPanelHeader .kuiButton:focus {
z-index: 1;
/* 1 */
outline: none;
/* 2 */
box-shadow: 0 0 0 1px #E4E4E4, 0 0 0 2px #6EADC1;
/* 3 */ }
.kuiPanelHeader .kuiButton--danger:focus {
z-index: 1;
/* 1 */
outline: none;
/* 2 */
box-shadow: 0 0 0 1px #E4E4E4, 0 0 0 2px #ff523c;
/* 3 */ }
.kuiPanelHeader .kuiButton--basic {
color: #5a5a5a;
background-color: #FFFFFF; }
@ -1178,6 +1195,20 @@ body {
padding: 10px;
height: 50px;
background-color: #E4E4E4; }
.kuiToolBar .kuiButton:focus {
z-index: 1;
/* 1 */
outline: none;
/* 2 */
box-shadow: 0 0 0 1px #E4E4E4, 0 0 0 2px #6EADC1;
/* 3 */ }
.kuiToolBar .kuiButton--danger:focus {
z-index: 1;
/* 1 */
outline: none;
/* 2 */
box-shadow: 0 0 0 1px #E4E4E4, 0 0 0 2px #ff523c;
/* 3 */ }
.kuiToolBar .kuiButton--basic {
color: #5a5a5a;
background-color: #FFFFFF; }