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

refactor(component): update design to match the modes more

Browse Source
This commit is contained in:
Brandy Carney
2018-03-20 15:54:33 -04:00
parent 97dc113a9f
commit e19b2142c5
13 changed files with 82 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
BREAKING.md
View File

@ -594,36 +594,6 @@ The option component should not be written as a `button` with an `ion-button` di
The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options.
## Toolbar
Previously if a `menuToggle` directive was added to an Ionic `button` in a toolbar, it would be positioned outside of the `ion-buttons` element. Since menu toggle is simply a wrapper to a button now, it should be placed inside of the `ion-buttons` element.
**Old Usage Example:**
```html
<ion-toolbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
```
**New Usage Example:**
```html
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
```
## Nav
### Method renamed
@ -950,6 +920,36 @@ $app-md-statusbar-padding: 20px;
## Toolbar
### Menu Toggle
Previously if a `menuToggle` directive was added to an Ionic `button` in a toolbar, it would be positioned outside of the `ion-buttons` element. Since menu toggle is simply a wrapper to a button now, it should be placed inside of the `ion-buttons` element.
**Old Usage Example:**
```html
<ion-toolbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
```
**New Usage Example:**
```html
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
```
### Attributes Renamed
The attributes to position an `ion-buttons` element inside of a toolbar have been either removed or renamed, as well as the behavior of the attributes. We noticed there was some confusion behind the behavior of the `start` and `end` attributes, and with the new support for RTL we wanted to make these match RTL. In order to do this we have removed the old functionality behind the `start`/`end` attributes and renamed the `left`/`right` attributes.

7
core/src/components/back-button/back-button.ios.scss
View File

@ -29,7 +29,7 @@
.back-button-ios ion-icon {
@include padding(0);
@include margin(0, -3px, 0, 0);
@include margin(0, -4px, 0, 0);
display: inherit;
@ -37,8 +37,3 @@
pointer-events: none;
}
.back-button .button-text {
letter-spacing: .01em;
}

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

@ -16,6 +16,9 @@
font-family: $button-ios-font-family;
font-size: $button-ios-font-size;
font-weight: $button-ios-font-weight;
letter-spacing: $button-ios-letter-spacing;
color: $button-ios-text-color;
background-color: $button-ios-background-color;

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

@ -39,6 +39,12 @@ $button-ios-border-radius: 8px !default;
/// @prop - Font size of the button text
$button-ios-font-size: 16px !default;
/// @prop - Font weight of the button text
$button-ios-font-weight: 500 !default;
/// @prop - Letter spacing of the button text
$button-ios-letter-spacing: -.03em !default;
/// @prop - Background color of the button
$button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;

1
core/src/components/card-subtitle/card-subtitle.ios.scss
View File

@ -5,6 +5,7 @@
// --------------------------------------------------
.card-subtitle-ios {
@include margin($card-ios-subtitle-margin-top, $card-ios-subtitle-margin-end, $card-ios-subtitle-margin-bottom, $card-ios-subtitle-margin-start);
@include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start);
font-size: $card-ios-subtitle-font-size;

16
core/src/components/card-subtitle/card-subtitle.ios.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card subtitle
$card-ios-subtitle-font-size: 16px !default;
$card-ios-subtitle-font-size: 12px !default;
/// @prop - Font weight of the card subtitle
$card-ios-subtitle-font-weight: 700 !default;
@ -13,7 +13,7 @@ $card-ios-subtitle-font-weight: 700 !default;
$card-ios-subtitle-text-transform: uppercase !default;
/// @prop - Letter spacing of the card subtitle
$card-ios-subtitle-letter-spacing: .6px !default;
$card-ios-subtitle-letter-spacing: .4px !default;
/// @prop - Padding top of the card subtitle
$card-ios-subtitle-padding-top: 0 !default;
@ -27,5 +27,17 @@ $card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default
/// @prop - Padding start of the card subtitle
$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default;
/// @prop - Margin top of the card subtitle
$card-ios-subtitle-margin-top: 0 !default;
/// @prop - Margin end of the card subtitle
$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top !default;
/// @prop - Margin bottom of the card subtitle
$card-ios-subtitle-margin-bottom: 4px !default;
/// @prop - Margin start of the card subtitle
$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default;
/// @prop - Color of the card subtitle
$card-ios-subtitle-color: $text-ios-color-step-400 !default;

1
core/src/components/card-subtitle/card-subtitle.md.scss
View File

@ -5,6 +5,7 @@
// --------------------------------------------------
.card-subtitle-md {
@include margin($card-md-subtitle-margin-top, $card-md-subtitle-margin-end, $card-md-subtitle-margin-bottom, $card-md-subtitle-margin-start);
@include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start);
font-size: $card-md-subtitle-font-size;

16
core/src/components/card-subtitle/card-subtitle.md.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card subtitle
$card-md-subtitle-font-size: 16px !default;
$card-md-subtitle-font-size: 14px !default;
/// @prop - Padding top of the card subtitle
$card-md-subtitle-padding-top: 0 !default;
@ -18,5 +18,17 @@ $card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default;
/// @prop - Padding start of the card subtitle
$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default;
/// @prop - Margin top of the card subtitle
$card-md-subtitle-margin-top: 0 !default;
/// @prop - Margin end of the card subtitle
$card-md-subtitle-margin-end: $card-md-subtitle-margin-top !default;
/// @prop - Margin bottom of the card subtitle
$card-md-subtitle-margin-bottom: 8px !default;
/// @prop - Margin start of the card subtitle
$card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default;
/// @prop - Color of the card subtitle
$card-md-subtitle-color: $text-md-color-step-150 !default;
$card-md-subtitle-color: $text-md-color-step-450 !default;

6
core/src/components/card/card.ios.vars.scss
View File

@ -19,13 +19,13 @@ $card-ios-margin-start: 20px !default;
$card-ios-background-color: $item-ios-background-color !default;
/// @prop - Box shadow color of the card
$card-ios-box-shadow-color: rgba(0, 0, 0, .18) !default;
$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default;
/// @prop - Box shadow of the card
$card-ios-box-shadow: 0 16px 42px $card-ios-box-shadow-color !default;
$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default;
/// @prop - Border radius of the card
$card-ios-border-radius: 14px !default;
$card-ios-border-radius: 8px !default;
/// @prop - Font family of the card
$card-ios-font-family: $font-family-ios-base !default;

3
core/src/components/card/test/basic/index.html
View File

@ -20,7 +20,8 @@
<ion-content id="content">
<ion-card>
<ion-card-header>
<ion-card-title>Card Header</ion-card-title>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>

2
core/src/components/segment-button/segment-button.ios.vars.scss
View File

@ -55,7 +55,7 @@ $segment-button-ios-icon-line-height: 28px !default;
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 26px !default;
$segment-button-ios-toolbar-button-height: 30px !default;
/// @prop - Line height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height: 22px !default;

5
core/src/components/segment/test/basic/index.html
View File

@ -190,6 +190,11 @@
</script>
</ion-content>
<style>
ion-content ion-segment {
margin-bottom: 10px;
}
</style>
</ion-app>
</body>

2
core/src/components/title/title.ios.scss
View File

@ -25,7 +25,7 @@
font-weight: $toolbar-ios-title-font-weight;
color: $toolbar-ios-title-text-color;
letter-spacing: -.01em;
letter-spacing: -.03em;
pointer-events: auto;
}