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

[UI Framework] Refine Tab focused and selected states. (#10604)

Browse source 
Backports PR #10560

**Commit 1:**
Refine Tab focused state.

* Original sha: 23e39587c4
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-23T23:43:32Z

**Commit 2:**
Open up bottom border of selected Tab.

* Original sha: a6a4e95577
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-23T23:59:03Z

**Commit 3:**
Remove focus outline when a Tab is selected or active.

* Original sha: 603d019b17
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-24T00:03:22Z

**Commit 4:**
Override Bootstrap styles that affect Tabs.

* Original sha: bcc30cd5c2
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-24T00:14:47Z
This commit is contained in:
jasper 2017-02-27 18:24:48 -05:00 • committed by CJ Cenizal
parent b1956ad432
commit 308ad10a58
2 changed files with 53 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

37
ui_framework/components/tabs/_tabs.scss
View file

@ -5,6 +5,10 @@
/**
* 1. Override button styles (some of which are from Bootstrap).
* 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
* 3. Move the tab down so that its bottom border covers the container's bottom border.
* 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
* of padding to make sure the text doesn't shift down.
*/
.kuiTab {
appearance: none; /* 1 */
@ -14,33 +18,42 @@
color: $subduedFontColor;
background-color: #ffffff; /* 1 */
border: 1px solid $standoutBackgroundColor;
border-bottom: none;
border-bottom-width: 2px;
border-radius: 0; /* 1 */
margin-bottom: -2px; /* 3 */
& + & {
border-left: none;
&:focus:not(.kuiTab-isSelected):not(:active) {
margin-left: -1px; /* 2 */
}
}
&:active {
outline: none !important; /* 1 */
box-shadow: none; /* 1 */
}
&:focus {
color: $linkColor;
outline: none; /* 1 */
}
&:focus:not(.kuiTab-isSelected):not(:active) {
z-index: 1;
outline: 1px solid $selectedBorderColor !important; /* 1 */
color: $linkColor;
border: 1px solid $selectedBorderColor !important;
padding-bottom: 11px; /* 4 */
}
&:hover:not(.kuiTab-isSelected) {
color: $linkHoverColor;
}
&:active {
outline: none;
border-color: #ffffff;
box-shadow: none; /* 1 */
color: $linkColor !important;
background-color: #F2F2F2;
}
&.kuiTab-isSelected {
color: $fontColor;
background-color: #F2F2F2;
cursor: default;
color: $fontColor;
border-bottom-color: #FFFFFF;
}
}

43
ui_framework/dist/ui_framework.css vendored
View file

@ -1543,6 +1543,10 @@ body {
/**
* 1. Override button styles (some of which are from Bootstrap).
* 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
* 3. Move the tab down so that its bottom border covers the container's bottom border.
* 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
* of padding to make sure the text doesn't shift down.
*/
.kuiTab {
-webkit-appearance: none;
@ -1556,28 +1560,37 @@ body {
background-color: #ffffff;
/* 1 */
border: 1px solid #E4E4E4;
border-bottom: none;
border-bottom-width: 2px;
border-radius: 0;
/* 1 */ }
/* 1 */
margin-bottom: -2px;
/* 3 */ }
.kuiTab + .kuiTab {
border-left: none; }
.kuiTab:focus {
color: #3CAED2;
z-index: 1;
outline: 1px solid #6EADC1 !important;
/* 1 */ }
.kuiTab:hover:not(.kuiTab-isSelected) {
color: #006E8A; }
.kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
margin-left: -1px;
/* 2 */ }
.kuiTab:active {
outline: none;
border-color: #ffffff;
box-shadow: none;
outline: none !important;
/* 1 */
color: #3CAED2 !important; }
box-shadow: none;
/* 1 */ }
.kuiTab:focus {
outline: none;
/* 1 */ }
.kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
z-index: 1;
color: #3CAED2;
border: 1px solid #6EADC1 !important;
padding-bottom: 11px;
/* 4 */ }
.kuiTab:hover:not(.kuiTab-isSelected) {
color: #006E8A;
background-color: #F2F2F2; }
.kuiTab.kuiTab-isSelected {
cursor: default;
color: #191E23;
background-color: #F2F2F2;
cursor: default; }
border-bottom-color: #FFFFFF; }
.kuiToolBar {
display: -webkit-box;