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

Fix Safari bug: Safari ignores :enabled pseudo class, preventing button active and hover states from taking effect. (#10369)

Browse source
This commit is contained in:
CJ Cenizal 2017-02-16 08:16:46 -08:00 committed by GitHub
parent f002e5df89
commit 408a2e6506
2 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
* 2. Disable for Angular.
* 3. Safari won't respect :enabled:active on links.
*/
.kuiButton {
display: inline-block; /* 1 */
@ -20,7 +21,7 @@
pointer-events: none; /* 2 */
}
&:active:enabled {
&:active { /* 3 */
transform: translateY(1px);
}
@ -43,6 +44,7 @@
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--basic {
color: #5a5a5a;
@ -53,8 +55,8 @@
color: #5a5a5a !important; /* 1 */
}
&:hover:enabled,
&:active:enabled {
&:hover, /* 2 */
&:active { /* 2 */
color: #ffffff !important; /* 1 */
background-color: #9B9B9B;
}
@ -66,13 +68,14 @@
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--primary {
color: #FFFFFF;
background-color: #6EADC1;
&:hover:enabled,
&:active:enabled {
&:hover, /* 2 */
&:active { /* 2 */
color: #FFFFFF !important; /* 1 */
background-color: #006E8A;
}
@ -88,13 +91,14 @@
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--danger {
color: #FFFFFF;
background-color: #D76051;
&:hover:enabled,
&:active:enabled {
&:hover, /* 2 */
&:active { /* 2 */
color: #FFFFFF !important; /* 1 */
background-color: #A52E1F;
}
@ -112,13 +116,14 @@
/**
* 1. Override Bootstrap.
* 2. Override either Bootstrap or Timelion styles.
* 3. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--hollow {
color: $linkColor !important; /* 2 */
background-color: transparent;
&:hover:enabled,
&:active:enabled {
&:hover, /* 3 */
&:active { /* 3 */
color: $linkHoverColor !important; /* 1 */
text-decoration: underline;
}

20
ui_framework/dist/ui_framework.css vendored
View file

@ -107,6 +107,7 @@ body {
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
* 2. Disable for Angular.
* 3. Safari won't respect :enabled:active on links.
*/
.kuiButton {
display: inline-block;
@ -126,7 +127,8 @@ body {
cursor: default;
pointer-events: none;
/* 2 */ }
.kuiButton:active:enabled {
.kuiButton:active {
/* 3 */
-webkit-transform: translateY(1px);
transform: translateY(1px); }
.kuiButton:focus {
@ -145,6 +147,7 @@ body {
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--basic {
color: #5a5a5a;
@ -152,7 +155,8 @@ body {
.kuiButton--basic:focus {
color: #5a5a5a !important;
/* 1 */ }
.kuiButton--basic:hover:enabled, .kuiButton--basic:active:enabled {
.kuiButton--basic:hover, .kuiButton--basic:active {
/* 2 */
color: #ffffff !important;
/* 1 */
background-color: #9B9B9B; }
@ -161,11 +165,13 @@ body {
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--primary {
color: #FFFFFF;
background-color: #6EADC1; }
.kuiButton--primary:hover:enabled, .kuiButton--primary:active:enabled {
.kuiButton--primary:hover, .kuiButton--primary:active {
/* 2 */
color: #FFFFFF !important;
/* 1 */
background-color: #006E8A; }
@ -177,11 +183,13 @@ body {
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--danger {
color: #FFFFFF;
background-color: #D76051; }
.kuiButton--danger:hover:enabled, .kuiButton--danger:active:enabled {
.kuiButton--danger:hover, .kuiButton--danger:active {
/* 2 */
color: #FFFFFF !important;
/* 1 */
background-color: #A52E1F; }
@ -200,12 +208,14 @@ body {
/**
* 1. Override Bootstrap.
* 2. Override either Bootstrap or Timelion styles.
* 3. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--hollow {
color: #3CAED2 !important;
/* 2 */
background-color: transparent; }
.kuiButton--hollow:hover:enabled, .kuiButton--hollow:active:enabled {
.kuiButton--hollow:hover, .kuiButton--hollow:active {
/* 3 */
color: #006E8A !important;
/* 1 */
text-decoration: underline; }