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

fix(tabs): focus color

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-16 19:47:50 +01:00
parent 893c9a54d2
commit cce93558d7
10 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,10 @@
fill: $tab-button-ios-icon-color;
}
.tab-button-ios.focused {
background: $tabbar-ios-background-color-focused;
}
.tab-button-ios .tab-cover {
@include padding(
$tab-button-ios-padding-top,

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

@ -13,6 +13,10 @@
fill: $tab-button-md-icon-color;
}
.tab-button-md.focused {
background: $tabbar-md-background-color-focused;
}
.tab-button-md .tab-cover {
@include padding(
$tab-button-md-padding-top,

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

@ -41,6 +41,11 @@ ion-tab-button {
color: inherit;
background: transparent;
cursor: pointer;
&:active,
&:focus {
outline: none;
}
}
.tab-disabled {

20
packages/core/src/components/tab-button/tab-button.tsx
View File

@ -1,4 +1,4 @@
import {Component, Element, Event, EventEmitter, Listen, Prop} from '@stencil/core';
import {Component, Element, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';
@Component({
@ -14,6 +14,8 @@ export class TabButton {
mode: string;
@State() keyFocus = false;
@Prop() selected = false;
@Prop() tab: HTMLIonTabElement;
@ -35,6 +37,14 @@ export class TabButton {
ev.stopPropagation();
}
private onKeyUp() {
this.keyFocus = true;
}
private onBlur() {
this.keyFocus = false;
}
hostData() {
const selected = this.selected;
const tab = this.tab;
@ -56,6 +66,7 @@ export class TabButton {
'has-badge': hasBadge,
'tab-disabled': tab.disabled,
'tab-hidden': tab.hidden,
'focused': this.keyFocus
}
};
}
@ -63,7 +74,12 @@ export class TabButton {
render() {
const tab = this.tab;
return [
<button type='button' class='tab-cover' disabled={tab.disabled}>
<button
type='button'
class='tab-cover'
onKeyUp={this.onKeyUp.bind(this)}
onBlur={this.onBlur.bind(this)}
disabled={tab.disabled}>
{ tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
{ tab.title && <span class='tab-button-text'>{tab.title}</span> }
{ tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }

6
packages/core/src/components/tabbar/tabbar.ios.scss
View File

@ -42,7 +42,7 @@
@mixin tabbar-ios($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-shade: ion-color($colors-ios, $color-name, tint, ios);
$color-shade: ion-color($colors-ios, $color-name, shade, ios);
$translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios);
@ -58,6 +58,10 @@
color: $color-contrast;
}
.tabbar-ios-#{$color-name} .tab-button.focused {
background: $color-shade;
}
.tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
.tabbar-ios-#{$color-name} .tab-selected {
font-weight: bold;

5
packages/core/src/components/tabbar/tabbar.md.scss
View File

@ -26,6 +26,7 @@
@mixin tabbar-md($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
$color-shade: ion-color($colors-md, $color-name, shade, ios);
.tabbar-md-#{$color-name} {
color: $color-contrast;
@ -34,6 +35,10 @@
fill: $color-contrast;
}
.tabbar-md-#{$color-name} .tab-button.focused {
background: $color-shade;
}
.enable-hover .tabbar-md-#{$color-name} .tab-button:hover,
.tabbar-md-#{$color-name} .tab-button.tab-selected {
color: $color-contrast;

8
packages/core/src/themes/ionic.functions.color.scss
View File

@ -8,6 +8,14 @@ $enable-css-variables: true;
$css-variables: ();
$modes: (ios, md);
@function get-color-shade($color) {
@return mix(#000, $color, 12%);
}
@function get-color-tint($color) {
@return mix(#fff, $color, 10%);
}
@function force-hex($color) {
@if type-of($color) == "color" {
$hex: str-slice(ie-hex-str($color), 4);

1
packages/core/src/themes/ionic.theme.default.ios.scss
View File

@ -96,6 +96,7 @@ $overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-backg
// iOS Tabs & Tab bar
// --------------------------------------------------
$tabbar-ios-background-color: css-var($tabbar-background-color, tabbar-ios-background-color) !default;
$tabbar-ios-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
$tabbar-ios-translucent-background-color: css-var(rgba(248, 248, 248, .8), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
$tabbar-ios-border-color: css-var(rgba(0, 0, 0, .2), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$tabbar-ios-text-color: css-var($tabbar-text-color, tabbar-ios-text-color) !default;

1
packages/core/src/themes/ionic.theme.default.md.scss
View File

@ -95,6 +95,7 @@ $overlay-md-background-color: css-var(#fafafa, overlay-md-background-c
// Material Design Tabs & Tab bar
// --------------------------------------------------
$tabbar-md-background-color: css-var($tabbar-background-color, tabbar-md-background-color) !default;
$tabbar-md-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
$tabbar-md-border-color: css-var(rgba(0, 0, 0, .07), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest))
$tabbar-md-text-color: css-var($text-md-color-step-400, tabbar-md-text-color) !default; // TODO: @color-mod($text-md-color, a($alpha-high))
$tabbar-md-text-color-active: css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default;

37
packages/core/src/themes/ionic.theme.default.scss
View File

@ -35,64 +35,64 @@ $ion-colors: (
base: $primary,
contrast: #fff,
rgb: color-to-rgb-list($primary),
shade: mix(#000, $primary, 12%),
tint: mix(#fff, $primary, 10%)
shade: get-color-shade($primary),
tint: get-color-tint($primary)
),
secondary: (
base: $secondary,
contrast: #fff,
rgb: color-to-rgb-list($secondary),
shade: mix(#000, $secondary, 12%),
tint: mix(#fff, $secondary, 10%)
shade: get-color-shade($secondary),
tint: get-color-tint($secondary)
),
tertiary: (
base: $tertiary,
contrast: #fff,
rgb: color-to-rgb-list($tertiary),
shade: mix(#000, $tertiary, 12%),
tint: mix(#fff, $tertiary, 10%)
shade: get-color-shade($tertiary),
tint: get-color-tint($tertiary)
),
success: (
base: $success,
contrast: #fff,
rgb: color-to-rgb-list($success),
shade: mix(#000, $success, 12%),
tint: mix(#fff, $success, 10%)
shade: get-color-shade($success),
tint: get-color-tint($success)
),
warning: (
base: $warning,
contrast: #000,
rgb: color-to-rgb-list($warning),
shade: mix(#000, $warning, 12%),
tint: mix(#fff, $warning, 10%)
shade: get-color-shade($warning),
tint: get-color-tint($warning)
),
danger: (
base: $danger,
contrast: #fff,
rgb: color-to-rgb-list($danger),
shade: mix(#000, $danger, 12%),
tint: mix(#fff, $danger, 10%)
shade: get-color-shade($danger),
tint: get-color-tint($danger)
),
light: (
base: $light,
contrast: #000,
rgb: color-to-rgb-list($light),
shade: mix(#000, $light, 12%),
tint: mix(#fff, $light, 10%)
shade: get-color-shade($light),
tint: get-color-tint($light)
),
medium: (
base: $medium,
contrast: #000,
rgb: color-to-rgb-list($medium),
shade: mix(#000, $medium, 12%),
tint: mix(#fff, $medium, 10%)
shade: get-color-shade($medium),
tint: get-color-tint($medium)
),
dark: (
base: $dark,
contrast: #fff,
rgb: color-to-rgb-list($dark),
shade: mix(#000, $dark, 12%),
tint: mix(#fff, $dark, 10%)
shade: get-color-shade($dark),
tint: get-color-tint($dark)
)
);
$colors: ion-extend-colors($ion-colors, $colors);
@ -190,6 +190,7 @@ $overlay-background-color: css-var(#fafafa, overlay-background-colo
// Default Tabs & Tab bar
// --------------------------------------------------
$tabbar-background-color: css-var(#f8f8f8, tabbar-background-color) !default;
$tabbar-background-color-focused: css-var(get-color-shade(#f8f8f8), tabbar-background-color-focused) !default;
$tabbar-border-color: css-var($border-color, tabbar-border-color) !default;
$tabbar-text-color-active: css-var(#488aff, tabbar-text-color-active) !default;
$tabbar-text-color: css-var(#8c8c8c, tabbar-text-color) !default;