javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tab-button): accesibility outline

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-13 14:07:45 +01:00
parent e68622e074
commit 7ba33ddc6e
3 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/src/components/tab-button/tab-button.ios.scss
View File

@@ -2,10 +2,7 @@
@import "./tab-button.ios.vars";
.tab-button-ios {
@include padding($tab-button-ios-padding-top, $tab-button-ios-padding-end, $tab-button-ios-padding-bottom, $tab-button-ios-padding-start);
max-width: $tab-button-ios-max-width;
min-height: 100%;
font-size: $tab-button-ios-font-size;
color: $tab-button-ios-text-color;
@@ -13,6 +10,14 @@
fill: $tab-button-ios-icon-color;
}
.tab-button-ios .tab-cover {
@include padding(
$tab-button-ios-padding-top,
$tab-button-ios-padding-end,
$tab-button-ios-padding-bottom,
$tab-button-ios-padding-start);
}
.enable-hover .tab-button-ios:hover,
.tab-button-ios.tab-selected {
color: $tab-button-ios-text-color-active;

17
packages/core/src/components/tab-button/tab-button.md.scss
View File

@@ -5,6 +5,15 @@
// --------------------------------------------------
.tab-button-md {
max-width: 168px;
font-weight: $tab-button-md-font-weight;
color: $tab-button-md-text-color;
fill: $tab-button-md-icon-color;
}
.tab-button-md .tab-cover {
@include padding(
$tab-button-md-padding-top,
$tab-button-md-padding-end,
@@ -12,14 +21,6 @@
$tab-button-md-padding-start);
display: flex;
max-width: 168px;
height: 100%;
font-weight: $tab-button-md-font-weight;
color: $tab-button-md-text-color;
fill: $tab-button-md-icon-color;
}
.scrollable .tab-button-md {

10
packages/core/src/components/tab-button/tab-button.scss
View File

@@ -13,9 +13,8 @@ ion-tab-button {
overflow: hidden;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100%;
border: 0;
@@ -26,6 +25,9 @@ ion-tab-button {
}
.tab-cover {
@include margin(0);
@include padding(0);
display: flex;
flex-direction: column;
@@ -36,7 +38,7 @@ ion-tab-button {
height: 100%;
border: 0;
outline: none;
//outline: none;
color: inherit;
background: transparent;
cursor: pointer;