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

feat(list-header): redesign list header for iOS spec (#19915)

Browse Source
This commit is contained in:
Brandy Carney
2019-11-19 14:53:37 -05:00
committed by GitHub
parent abdaaf320b
commit 5bbb95fae1
49 changed files with 763 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/button/button.ios.scss
View File

@ -68,6 +68,11 @@
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
font-size: #{$button-ios-clear-font-size};
font-weight: #{$button-ios-clear-font-weight};
letter-spacing: #{$button-ios-clear-letter-spacing};
}

9
core/src/components/button/button.ios.vars.scss
View File

@ -153,6 +153,15 @@ $button-ios-outline-background-color-focused: ion-color(primary, base, $
// iOS Clear Button
// --------------------------------------------------
/// @prop - Font size of the clear button
$button-ios-clear-font-size: 17px !default;
/// @prop - Font weight of the clear button
$button-ios-clear-font-weight: normal !default;
/// @prop - Letter spacing of the clear button
$button-ios-clear-letter-spacing: 0 !default;
/// @prop - Border color of the clear button
$button-ios-clear-border-color: transparent !default;

7
core/src/components/button/button.tsx
View File

@ -23,9 +23,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
shadow: true,
})
export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
private inToolbar = false;
private inItem = false;
private inListHeader = false;
private inToolbar = false;
@Element() el!: HTMLElement;
@ -124,6 +124,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
componentWillLoad() {
this.inToolbar = !!this.el.closest('ion-buttons');
this.inListHeader = !!this.el.closest('ion-list-header');
this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
}
@ -189,7 +190,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
let fill = this.fill;
if (fill === undefined) {
fill = this.inToolbar ? 'clear' : 'solid';
fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
}
return (
<Host