diff --git a/BREAKING.md b/BREAKING.md index 8dc12e5de5..0b7bf4125c 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -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 - - - Left side menu toggle - -``` - -**New Usage Example:** - -```html - - - - - - - - - Left side menu toggle - -``` - ## 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 + + + Left side menu toggle + +``` + +**New Usage Example:** + +```html + + + + + + + + + Left side menu toggle + +``` + ### 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. diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss index 663afff7cf..6256897212 100644 --- a/core/src/components/back-button/back-button.ios.scss +++ b/core/src/components/back-button/back-button.ios.scss @@ -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; -} - diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 6397013cff..88dc2b6760 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -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; diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 4e56cdd36e..494636ab6d 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -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; diff --git a/core/src/components/card-subtitle/card-subtitle.ios.scss b/core/src/components/card-subtitle/card-subtitle.ios.scss index a72f7027fb..933e2bec73 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.scss @@ -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; diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 4a863bbc53..ad4ff8b95f 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -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; diff --git a/core/src/components/card-subtitle/card-subtitle.md.scss b/core/src/components/card-subtitle/card-subtitle.md.scss index d28ac9791e..3734335db7 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.scss @@ -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; diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index e9e7a3f17f..540de37efb 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -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; diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index 77d2f62433..e24a6cc7b0 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -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; diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html index 11aa3c8dc4..4290b8064e 100644 --- a/core/src/components/card/test/basic/index.html +++ b/core/src/components/card/test/basic/index.html @@ -20,7 +20,8 @@ - Card Header + Card Subtitle + Card Title diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index 25959dbfd1..4ba87f65d0 100644 --- a/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/core/src/components/segment-button/segment-button.ios.vars.scss @@ -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; diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html index c5dbce343a..3939caa5fa 100644 --- a/core/src/components/segment/test/basic/index.html +++ b/core/src/components/segment/test/basic/index.html @@ -190,6 +190,11 @@ + diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss index c209628aa7..907d2bceb2 100644 --- a/core/src/components/title/title.ios.scss +++ b/core/src/components/title/title.ios.scss @@ -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; }