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

refactor(sass): remove rem units in favor of px

Browse Source
This commit is contained in:
Brandy Carney
2017-12-07 18:05:32 -05:00
parent b79e2faef0
commit f4db584f8a
56 changed files with 139 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@@ -31,13 +31,13 @@ $action-sheet-ios-background: #f9f9f9 !default;
$action-sheet-ios-border-radius: 13px !default;
/// @prop - Padding of the action sheet title
$action-sheet-ios-title-padding: 1.5rem !default;
$action-sheet-ios-title-padding: 15px !default;
/// @prop - Color of the action sheet title
$action-sheet-ios-title-color: #8f8f8f !default;
/// @prop - Font size of the action sheet title
$action-sheet-ios-title-font-size: 1.3rem !default;
$action-sheet-ios-title-font-size: 13px !default;
/// @prop - Font weight of the action sheet title
$action-sheet-ios-title-font-weight: 400 !default;
@@ -52,7 +52,7 @@ $action-sheet-ios-title-border-style: solid !default;
$action-sheet-ios-title-border-color: rgba(0, 0, 0, .1) !default;
/// @prop - Minimum height of the action sheet button
$action-sheet-ios-button-min-height: 5.6rem !default;
$action-sheet-ios-button-min-height: 56px !default;
/// @prop - Padding of the action sheet button
$action-sheet-ios-button-padding: 18px !default;
@@ -76,7 +76,7 @@ $action-sheet-ios-button-icon-height: .7em !default;
$action-sheet-ios-button-icon-margin-top: -10px !default;
/// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 2rem !default;
$action-sheet-ios-button-font-size: 20px !default;
/// @prop - Border width of the action sheet button
$action-sheet-ios-button-border-width: $hairlines-width !default;

14
packages/core/src/components/action-sheet/action-sheet.md.vars.scss
View File

@@ -10,16 +10,16 @@ $action-sheet-md-text-align: start !default;
$action-sheet-md-background: #fafafa !default;
/// @prop - Padding top of the action sheet
$action-sheet-md-padding-top: .8rem !default;
$action-sheet-md-padding-top: 8px !default;
/// @prop - Padding bottom of the action sheet
$action-sheet-md-padding-bottom: .8rem !default;
$action-sheet-md-padding-bottom: 8px !default;
/// @prop - Color of the action sheet title
$action-sheet-md-title-color: #757575 !default;
/// @prop - Font size of the action sheet title
$action-sheet-md-title-font-size: 1.6rem !default;
$action-sheet-md-title-font-size: 16px !default;
/// @prop - Padding top of the action sheet title
$action-sheet-md-title-padding-top: 11px !default;
@@ -34,13 +34,13 @@ $action-sheet-md-title-padding-bottom: 17px !default;
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default;
/// @prop - Minimum height of the action sheet button
$action-sheet-md-button-min-height: 4.8rem !default;
$action-sheet-md-button-min-height: 48px !default;
/// @prop - Text color of the action sheet button
$action-sheet-md-button-text-color: #222 !default;
/// @prop - Font size of the action sheet button
$action-sheet-md-button-font-size: 1.6rem !default;
$action-sheet-md-button-font-size: 16px !default;
/// @prop - Padding top of the action sheet button
$action-sheet-md-button-padding-top: 0 !default;
@@ -61,10 +61,10 @@ $action-sheet-md-button-background: transparent !default;
$action-sheet-md-button-background-activated: #f1f1f1 !default;
/// @prop - Font size of the icon in the action sheet button
$action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-icon-font-size: 24px !default;
/// @prop - Width of the icon in the action sheet button
$action-sheet-md-icon-width: 2.3rem !default;
$action-sheet-md-icon-width: 23px !default;
/// @prop - Text align of the icon in the action sheet button
$action-sheet-md-icon-text-align: center !default;

12
packages/core/src/components/app/app.scss
View File

@@ -24,8 +24,6 @@ html {
width: 100%;
height: 100%;
font-size: $font-size-root;
text-size-adjust: 100%;
}
@@ -75,7 +73,7 @@ h3,
h4,
h5,
h6 {
@include margin(1.6rem, null, 1rem, null);
@include margin(16px, null, 10px, null);
font-weight: $headings-font-weight;
line-height: $headings-line-height;
@@ -89,7 +87,7 @@ h6 {
h5,
h6 {
&:first-child {
@include margin(-.3rem, null, null, null);
@include margin(-3px, null, null, null);
}
}
}
@@ -97,17 +95,17 @@ h6 {
h1 + h2,
h1 + h3,
h2 + h3 {
@include margin(-.3rem, null, null, null);
@include margin(-3px, null, null, null);
}
h1 {
@include margin(2rem, null, null, null);
@include margin(20px, null, null, null);
font-size: $h1-font-size;
}
h2 {
@include margin(1.8rem, null, null, null);
@include margin(18px, null, null, null);
font-size: $h2-font-size;
}

19
packages/core/src/components/app/app.vars.scss
View File

@@ -6,13 +6,6 @@
// App
// --------------------------------------------------
// All font sizes use rem units
// By default, 1rem equals 10px. For example, 1.4rem === 14px
// $font-size-root value, which is on the <html> element
// is what can scale all fonts
/// @prop - Font size of the root html
$font-size-root: 62.5% !default;
/// @prop - Font weight of all headings
$headings-font-weight: 500 !default;
@@ -21,22 +14,22 @@ $headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
/// @prop - Font size of heading level 1
$h1-font-size: 2.6rem !default;
$h1-font-size: 26px !default;
/// @prop - Font size of heading level 2
$h2-font-size: 2.4rem !default;
$h2-font-size: 24px !default;
/// @prop - Font size of heading level 3
$h3-font-size: 2.2rem !default;
$h3-font-size: 22px !default;
/// @prop - Font size of heading level 4
$h4-font-size: 2rem !default;
$h4-font-size: 20px !default;
/// @prop - Font size of heading level 5
$h5-font-size: 1.8rem !default;
$h5-font-size: 18px !default;
/// @prop - Font size of heading level 6
$h6-font-size: 1.6rem !default;
$h6-font-size: 16px !default;
// Responsive Utilities

2
packages/core/src/components/badge/badge.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the badge
$badge-font-size: 1.3rem !default;
$badge-font-size: 13px !default;
/// @prop - Font weight of the badge
$badge-font-weight: bold !default;

14
packages/core/src/components/button/button.ios.vars.scss
View File

@@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Margin top of the button
$button-ios-margin-top: .4rem !default;
$button-ios-margin-top: 4px !default;
/// @prop - Margin end of the button
$button-ios-margin-end: .2rem !default;
$button-ios-margin-end: 2px !default;
/// @prop - Margin bottom of the button
$button-ios-margin-bottom: .4rem !default;
$button-ios-margin-bottom: 4px !default;
/// @prop - Margin start of the button
$button-ios-margin-start: .2rem !default;
$button-ios-margin-start: 2px !default;
/// @prop - Padding top of the button
$button-ios-padding-top: 0 !default;
@@ -34,7 +34,7 @@ $button-ios-height: 2.8em !default;
$button-ios-border-radius: 4px !default;
/// @prop - Font size of the button text
$button-ios-font-size: 1.6rem !default;
$button-ios-font-size: 16px !default;
/// @prop - Color of the button icon
$button-ios-icon-fill-color: currentColor !default;
@@ -74,7 +74,7 @@ $button-ios-large-padding-start: $button-ios-large-padding-en
$button-ios-large-height: 2.8em !default;
/// @prop - Font size of the large button
$button-ios-large-font-size: 2rem !default;
$button-ios-large-font-size: 20px !default;
// iOS Small Button
@@ -96,7 +96,7 @@ $button-ios-small-padding-start: $button-ios-small-padding-en
$button-ios-small-height: 2.1em !default;
/// @prop - Font size of the small button
$button-ios-small-font-size: 1.3rem !default;
$button-ios-small-font-size: 13px !default;
// iOS Outline Button

16
packages/core/src/components/button/button.md.vars.scss
View File

@@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Margin top of the button
$button-md-margin-top: .4rem !default;
$button-md-margin-top: 4px !default;
/// @prop - Margin end of the button
$button-md-margin-end: .2rem !default;
$button-md-margin-end: 2px !default;
/// @prop - Margin bottom of the button
$button-md-margin-bottom: .4rem !default;
$button-md-margin-bottom: 4px !default;
/// @prop - Margin start of the button
$button-md-margin-start: .2rem !default;
$button-md-margin-start: 2px !default;
/// @prop - Padding top of the button
$button-md-padding-top: 0 !default;
@@ -28,13 +28,13 @@ $button-md-padding-bottom: $button-md-padding-top !default;
$button-md-padding-start: $button-md-padding-end !default;
/// @prop - Height of the button
$button-md-height: 3.6rem !default;
$button-md-height: 36px !default;
/// @prop - Border radius of the button
$button-md-border-radius: 2px !default;
/// @prop - Font size of the button text
$button-md-font-size: 1.4rem !default;
$button-md-font-size: 14px !default;
/// @prop - Font weight of the button text
$button-md-font-weight: 500 !default;
@@ -95,7 +95,7 @@ $button-md-large-padding-start: $button-md-large-padding-end !default
$button-md-large-height: 2.8em !default;
/// @prop - Font size of the large button
$button-md-large-font-size: 2rem !default;
$button-md-large-font-size: 20px !default;
// Material Design Small Button
@@ -117,7 +117,7 @@ $button-md-small-padding-start: $button-md-small-padding-end !default
$button-md-small-height: 2.1em !default;
/// @prop - Font size of the small button
$button-md-small-font-size: 1.3rem !default;
$button-md-small-font-size: 13px !default;
// Material Design Outline Button

2
packages/core/src/components/button/button.vars.scss
View File

@@ -7,7 +7,7 @@
$button-round-padding-top: 0 !default;
/// @prop - Padding end of the round button
$button-round-padding-end: 2.6rem !default;
$button-round-padding-end: 26px !default;
/// @prop - Padding bottom of the round button
$button-round-padding-bottom: $button-round-padding-top !default;

2
packages/core/src/components/card-content/card-content.ios.vars.scss
View File

@@ -16,4 +16,4 @@ $card-ios-padding-bottom: $card-ios-padding-top !default;
$card-ios-padding-start: $card-ios-padding-top !default;
/// @prop - Font size of the card
$card-ios-font-size: 1.6rem !default;
$card-ios-font-size: 16px !default;

2
packages/core/src/components/card-content/card-content.md.vars.scss
View File

@@ -16,7 +16,7 @@ $card-md-padding-bottom: 13px !default;
$card-md-padding-start: 16px !default;
/// @prop - Font size of the card
$card-md-font-size: 1.4rem !default;
$card-md-font-size: 14px !default;
/// @prop - Line height of the card
$card-md-line-height: 1.5 !default;

4
packages/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: 1.6rem !default;
$card-ios-subtitle-font-size: 16px !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: .06rem !default;
$card-ios-subtitle-letter-spacing: .6px !default;
/// @prop - Padding top of the card subtitle
$card-ios-subtitle-padding-top: 0 !default;

2
packages/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: 1.6rem !default;
$card-md-subtitle-font-size: 16px !default;
/// @prop - Padding top of the card subtitle
$card-md-subtitle-padding-top: 0 !default;

2
packages/core/src/components/card-title/card-title.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card title
$card-ios-title-font-size: 2.8rem !default;
$card-ios-title-font-size: 28px !default;
/// @prop - Font weight of the card title
$card-ios-title-font-weight: 700 !default;

2
packages/core/src/components/card-title/card-title.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card title
$card-md-title-font-size: 2.4rem !default;
$card-md-title-font-size: 24px !default;
/// @prop - Padding top of the card title
$card-md-title-padding-top: 0 !default;

10
packages/core/src/components/card/card.ios.scss
View File

@@ -33,20 +33,20 @@
}
.card .note-ios {
font-size: 1.3rem;
font-size: 13px;
}
.card-ios h1 {
@include margin(0, 0, 2px);
font-size: 2.4rem;
font-size: 24px;
font-weight: normal;
}
.card-ios h2 {
@include margin(2px, 0);
font-size: 1.6rem;
font-size: 16px;
font-weight: normal;
}
@@ -56,14 +56,14 @@
.card-ios h6 {
@include margin(2px, 0);
font-size: 1.4rem;
font-size: 14px;
font-weight: normal;
}
.card-ios p {
@include margin(0, 0, 2px);
font-size: 1.4rem;
font-size: 14px;
color: $card-ios-text-color;
}

2
packages/core/src/components/card/card.ios.vars.scss
View File

@@ -28,7 +28,7 @@ $card-ios-box-shadow: 0 16px 42px $card-ios-box-shadow-color !d
$card-ios-border-radius: 14px !default;
/// @prop - Font size of the card
$card-ios-font-size: 1.4rem !default;
$card-ios-font-size: 14px !default;
/// @prop - Color of the card text
$card-ios-text-color: #666 !default;

10
packages/core/src/components/card/card.md.scss
View File

@@ -31,13 +31,13 @@
}
.card .note-md {
font-size: 1.3rem;
font-size: 13px;
}
.card-md h1 {
@include margin(0, 0, 2px);
font-size: 2.4rem;
font-size: 24px;
font-weight: normal;
color: $card-md-text-color;
}
@@ -45,7 +45,7 @@
.card-md h2 {
@include margin(2px, 0);
font-size: 1.6rem;
font-size: 16px;
font-weight: normal;
color: $card-md-text-color;
}
@@ -56,7 +56,7 @@
.card-md h6 {
@include margin(2px, 0);
font-size: 1.4rem;
font-size: 14px;
font-weight: normal;
color: $card-md-text-color;
}
@@ -64,7 +64,7 @@
.card-md p {
@include margin(0, 0, 2px);
font-size: 1.4rem;
font-size: 14px;
font-weight: normal;
line-height: 1.5;
color: $card-md-text-color;

2
packages/core/src/components/card/card.md.vars.scss
View File

@@ -25,7 +25,7 @@ $card-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px
$card-md-border-radius: 2px !default;
/// @prop - Font size of the card
$card-md-font-size: 1.4rem !default;
$card-md-font-size: 14px !default;
/// @prop - Line height of the card
$card-md-line-height: 1.5 !default;

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

@@ -34,8 +34,8 @@
.fab-button ion-icon {
flex: 1;
font-size: 2.4rem;
line-height: 1.8rem;
font-size: 24px;
line-height: 18px;
}
// FAB Mini

2
packages/core/src/components/item-divider/item-divider.md.vars.scss
View File

@@ -12,7 +12,7 @@ $item-md-divider-color: #858585 !default;
$item-md-divider-background: #fff !default;
/// @prop - Font size for the divider
$item-md-divider-font-size: 1.4rem !default;
$item-md-divider-font-size: 14px !default;
/// @prop - Border bottom for the divider
$item-md-divider-border-bottom: 1px solid $list-md-border-color !default;

2
packages/core/src/components/item-sliding/item-sliding.ios.vars.scss
View File

@@ -7,7 +7,7 @@
$item-ios-sliding-content-background: $list-ios-background-color !default;
/// @prop - Font size of the sliding option button
$item-ios-sliding-button-font-size: 1.6rem !default;
$item-ios-sliding-button-font-size: 16px !default;
/// @prop - Background color of the sliding option button
$item-ios-sliding-button-background-color: color($colors-ios, primary) !default;

2
packages/core/src/components/item-sliding/item-sliding.md.vars.scss
View File

@@ -7,7 +7,7 @@
$item-md-sliding-content-background: $list-md-background-color !default;
/// @prop - Font size of the sliding option button
$item-md-sliding-button-font-size: 1.4rem !default;
$item-md-sliding-button-font-size: 14px !default;
/// @prop - Background color of the sliding option button
$item-md-sliding-button-background-color: color($colors-md, primary) !default;

2
packages/core/src/components/item-sliding/item-sliding.scss
View File

@@ -71,7 +71,7 @@ ion-item-option {
align-items: center;
min-width: 6rem;
min-width: 60px;
}
.item-option-button {

8
packages/core/src/components/item/item.ios.scss
View File

@@ -25,14 +25,14 @@
.item-ios h1 {
@include margin(0, 0, 2px);
font-size: 2.4rem;
font-size: 24px;
font-weight: normal;
}
.item-ios h2 {
@include margin(0, 0, 2px);
font-size: 1.7rem;
font-size: 17px;
font-weight: normal;
}
@@ -42,7 +42,7 @@
.item-ios h6 {
@include margin(0, 0, 3px);
font-size: 1.4rem;
font-size: 14px;
font-weight: normal;
line-height: normal;
}
@@ -99,7 +99,7 @@
height: 24px;
font-size: 1.3rem;
font-size: 13px;
}
.item-ios .item-button ion-icon[slot="icon-only"] {

4
packages/core/src/components/item/item.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the item text
$item-ios-body-text-font-size: 1.7rem !default;
$item-ios-body-text-font-size: 17px !default;
/// @prop - Margin top of the item paragraph
$item-ios-paragraph-margin-top: 0 !default;
@@ -19,7 +19,7 @@ $item-ios-paragraph-margin-bottom: 2px !default;
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
/// @prop - Font size of the item paragraph
$item-ios-paragraph-font-size: 1.4rem !default;
$item-ios-paragraph-font-size: 14px !default;
/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: #8e9093 !default;

10
packages/core/src/components/item/item.md.scss
View File

@@ -30,14 +30,14 @@
.item-md h1 {
@include margin(0, 0, 2px);
font-size: 2.4rem;
font-size: 24px;
font-weight: normal;
}
.item-md h2 {
@include margin(2px, 0);
font-size: 1.6rem;
font-size: 16px;
font-weight: normal;
}
@@ -47,7 +47,7 @@
.item-md h6 {
@include margin(2px, 0);
font-size: 1.4rem;
font-size: 14px;
font-weight: normal;
line-height: normal;
}
@@ -57,7 +57,7 @@
overflow: inherit;
font-size: 1.4rem;
font-size: 14px;
line-height: normal;
text-overflow: inherit;
color: $item-md-paragraph-text-color;
@@ -106,7 +106,7 @@
height: 25px;
font-size: 1.2rem;
font-size: 12px;
}
.item-md .item-button ion-icon[slot="icon-only"] {

4
packages/core/src/components/item/item.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the item text
$item-md-body-text-font-size: 1.4rem !default;
$item-md-body-text-font-size: 14px !default;
/// @prop - line height of the item text
$item-md-body-text-line-height: 1.5 !default;
@@ -13,7 +13,7 @@ $item-md-body-text-line-height: 1.5 !default;
$item-md-paragraph-text-color: #666 !default;
/// @prop - Font size of the item
$item-md-font-size: 1.6rem !default;
$item-md-font-size: 16px !default;
/// @prop - Width of the avatar in the item
$item-md-avatar-width: 40px !default;

2
packages/core/src/components/label/label.ios.scss
View File

@@ -25,7 +25,7 @@
.label-ios[stacked] {
@include margin(null, null, 4px, null);
font-size: 1.2rem;
font-size: 12px;
}
.label-ios[floating] {

2
packages/core/src/components/label/label.md.scss
View File

@@ -28,7 +28,7 @@
// --------------------------------------------------
.label-md[stacked] {
font-size: 1.2rem;
font-size: 12px;
}
.label-md[floating] {

4
packages/core/src/components/list-header/list-header.ios.vars.scss
View File

@@ -12,13 +12,13 @@ $list-ios-header-padding-start: $item-ios-padding-start !default;
$list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default;
/// @prop - Font size of the header in a list
$list-ios-header-font-size: 1.2rem !default;
$list-ios-header-font-size: 12px !default;
/// @prop - Font weight of the header in a list
$list-ios-header-font-weight: 500 !default;
/// @prop - Letter spacing of the header in a list
$list-ios-header-letter-spacing: .1rem !default;
$list-ios-header-letter-spacing: 1px !default;
/// @prop - Text transform of the header in a list
$list-ios-header-text-transform: uppercase !default;

4
packages/core/src/components/list-header/list-header.md.vars.scss
View File

@@ -12,13 +12,13 @@ $list-md-header-margin-bottom: 13px !default;
$list-md-header-padding-start: $item-md-padding-start !default;
/// @prop - Minimum height of the header in a list
$list-md-header-min-height: 4.5rem !default;
$list-md-header-min-height: 45px !default;
/// @prop - Border top of the header in a list
$list-md-header-border-top: 1px solid $list-md-border-color !default;
/// @prop - Font size of the header in a list
$list-md-header-font-size: 1.4rem !default;
$list-md-header-font-size: 14px !default;
/// @prop - Text color of the header in a list
$list-md-header-color: #757575 !default;

2
packages/core/src/components/list-header/list-header.scss
View File

@@ -16,5 +16,5 @@ ion-list-header {
justify-content: space-between;
width: 100%;
min-height: 4rem;
min-height: 40px;
}

2
packages/core/src/components/picker/picker.ios.scss
View File

@@ -85,7 +85,7 @@
@include margin(0);
@include transform-origin(center, center);
height: 4.6rem;
height: 46px;
font-size: $picker-ios-option-font-size;
line-height: $picker-ios-option-height;

2
packages/core/src/components/picker/picker.ios.vars.scss
View File

@@ -28,7 +28,7 @@ $picker-ios-button-text-color: color($colors-ios, primary) !defa
$picker-ios-button-background-color: transparent !default;
/// @prop - Font size of the picker button
$picker-ios-button-font-size: 1.6rem !default;
$picker-ios-button-font-size: 16px !default;
/// @prop - Padding top of the picker button
$picker-ios-button-padding-top: 0 !default;

2
packages/core/src/components/picker/picker.md.scss
View File

@@ -68,7 +68,7 @@
@include margin(0);
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
height: 4.3rem;
height: 43px;
font-size: $picker-md-option-font-size;
line-height: $picker-md-option-height;

2
packages/core/src/components/picker/picker.md.vars.scss
View File

@@ -28,7 +28,7 @@ $picker-md-button-text-color: color($colors-md, primary) !defaul
$picker-md-button-background-color: transparent !default;
/// @prop - Font size of the picker button
$picker-md-button-font-size: 1.4rem !default;
$picker-md-button-font-size: 14px !default;
/// @prop - Padding top of the picker column
$picker-md-column-padding-top: 0 !default;

4
packages/core/src/components/range/range.scss
View File

@@ -37,9 +37,9 @@ ion-range ion-label {
}
ion-range ion-icon {
min-height: 2.4rem;
min-height: 24px;
font-size: 2.4rem;
font-size: 24px;
line-height: 1;
}

2
packages/core/src/components/searchbar/searchbar.ios.scss
View File

@@ -50,7 +50,7 @@
height: $searchbar-ios-input-height;
font-size: 1.4rem;
font-size: 14px;
font-weight: 400;
color: $searchbar-ios-input-text-color;

2
packages/core/src/components/searchbar/searchbar.md.scss
View File

@@ -64,7 +64,7 @@
height: $searchbar-md-input-height;
font-size: 1.6rem;
font-size: 16px;
font-weight: 400;
line-height: $searchbar-md-input-line-height;

2
packages/core/src/components/searchbar/searchbar.md.vars.scss
View File

@@ -31,7 +31,7 @@ $searchbar-md-input-search-icon-size: 20px !default;
$searchbar-md-input-height: auto !default;
/// @prop - Line height of the searchbar input
$searchbar-md-input-line-height: 3rem !default;
$searchbar-md-input-line-height: 30px !default;
/// @prop - Box shadow of the searchbar input
$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;

20
packages/core/src/components/segment/segment.ios.vars.scss
View File

@@ -37,37 +37,37 @@ $segment-button-ios-opacity-disabled: .3 !default;
$segment-button-ios-border-width: 1px !default;
/// @prop - Height of the segment button
$segment-button-ios-height: 3.2rem !default;
$segment-button-ios-height: 32px !default;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 2.8rem !default;
$segment-button-ios-line-height: 28px !default;
/// @prop - Font size of the segment button
$segment-button-ios-font-size: 1.3rem !default;
$segment-button-ios-font-size: 13px !default;
/// @prop - Border radius of the segment button
$segment-button-ios-border-radius: 4px !default;
/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 2.6rem !default;
$segment-button-ios-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height: 2.8rem !default;
$segment-button-ios-icon-line-height: 28px !default;
/// @prop - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 2.6rem !default;
$segment-button-ios-toolbar-button-height: 26px !default;
/// @prop - Line height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height: 2.2rem !default;
$segment-button-ios-toolbar-line-height: 22px !default;
/// @prop - Font size of the segment button in a toolbar
$segment-button-ios-toolbar-font-size: 1.2rem !default;
$segment-button-ios-toolbar-font-size: 12px !default;
/// @prop - Size of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-size: 2.2rem !default;
$segment-button-ios-toolbar-icon-size: 22px !default;
/// @prop - Line height of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
$segment-button-ios-toolbar-icon-line-height: 24px !default;

8
packages/core/src/components/segment/segment.md.vars.scss
View File

@@ -37,16 +37,16 @@ $segment-button-md-padding-bottom: $segment-button-md-padding-top !d
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
/// @prop - Height of the segment button
$segment-button-md-height: 4.2rem !default;
$segment-button-md-height: 42px !default;
/// @prop - Line height of the segment button
$segment-button-md-line-height: 4rem !default;
$segment-button-md-line-height: 40px !default;
/// @prop - Font size of the segment button
$segment-button-md-font-size: 1.2rem !default;
$segment-button-md-font-size: 12px !default;
/// @prop - Size of an icon in the segment button
$segment-button-md-icon-size: 2.6rem !default;
$segment-button-md-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;

2
packages/core/src/components/skeleton-text/skeleton-text.scss
View File

@@ -16,6 +16,6 @@ ion-skeleton-text {
ion-skeleton-text span {
display: inline-block;
font-size: .8rem;
font-size: 8px;
background-color: #ececec;
}

2
packages/core/src/components/tabs/tabs.ios.scss
View File

@@ -73,7 +73,7 @@
@include margin(2px, 0);
font-size: 1.4rem;
font-size: 14px;
line-height: 1.1;
}

4
packages/core/src/components/tabs/tabs.md.scss
View File

@@ -65,13 +65,13 @@
}
.tabbar-md.layout-icon-top .has-icon .tab-button-text {
@include margin(null, null, -.2rem, null);
@include margin(null, null, -2px, null);
}
.tabbar-md.layout-icon-bottom .tab-button-text {
@include transform-origin(center, top);
@include margin(-.2rem, null, null, null);
@include margin(-2px, null, null, null);
}

20
packages/core/src/components/tabs/tabs.md.vars.scss
View File

@@ -4,22 +4,22 @@
// --------------------------------------------------
/// @prop - Padding top on the tab button
$tabs-md-tab-padding-top: .8rem !default;
$tabs-md-tab-padding-top: 8px !default;
/// @prop - Padding end on the tab button
$tabs-md-tab-padding-end: 1.2rem !default;
$tabs-md-tab-padding-end: 12px !default;
/// @prop - Padding bottom on the tab button
$tabs-md-tab-padding-bottom: 1rem !default;
$tabs-md-tab-padding-bottom: 10px !default;
/// @prop - Padding start on the tab button
$tabs-md-tab-padding-start: 1.2rem, !default;
$tabs-md-tab-padding-start: 12px, !default;
/// @prop - Minimum height of the tab button
$tabs-md-tab-height: 5.6rem !default;
$tabs-md-tab-height: 56px !default;
/// @prop - Font size of the inactive tab button text
$tabs-md-tab-font-size: 1.2rem !default;
$tabs-md-tab-font-size: 12px !default;
/// @prop - Font weight of the tab button text
$tabs-md-tab-font-weight: normal !default;
@@ -40,7 +40,7 @@ $tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive,
$tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default;
/// @prop - Font size of the active tab button text
$tabs-md-tab-font-size-active: 1.4rem !default;
$tabs-md-tab-font-size-active: 14px !default;
/// @prop - Margin top on the tab button text
$tabs-md-tab-text-margin-top: 0 !default;
@@ -85,13 +85,13 @@ $tabs-md-tab-icon-right-transform-z-active: 0 !default;
$tabs-md-tab-icon-bottom-transform-x-active: 0 !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
$tabs-md-tab-icon-bottom-transform-y-active: .2rem !default;
$tabs-md-tab-icon-bottom-transform-y-active: 2px !default;
/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
$tabs-md-tab-icon-bottom-transform-z-active: 0 !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-left
$tabs-md-tab-icon-left-transform-x-active: -.2rem !default;
$tabs-md-tab-icon-left-transform-x-active: -2px !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-left
$tabs-md-tab-icon-left-transform-y-active: 0 !default;
@@ -103,4 +103,4 @@ $tabs-md-tab-icon-left-transform-z-active: 0 !default;
$tabs-md-tab-icon-transition: transform .3s ease-in-out !default;
/// @prop - Size of the tab button icon
$tabs-md-tab-icon-size: 2.4rem !default;
$tabs-md-tab-icon-size: 24px !default;

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

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the toolbar title
$toolbar-ios-title-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 17px !default;
/// @prop - Font weight of the toolbar title
$toolbar-ios-title-font-weight: 600 !default;

2
packages/core/src/components/title/title.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the toolbar title
$toolbar-md-title-font-size: 2rem !default;
$toolbar-md-title-font-size: 20px !default;
/// @prop - Text color of the toolbar title
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default;

2
packages/core/src/components/toast/toast.md.vars.scss
View File

@@ -10,7 +10,7 @@ $toast-md-background: #333 !default;
$toast-md-title-color: #fff !default;
/// @prop - Font size of the toast title
$toast-md-title-font-size: 1.5rem !default;
$toast-md-title-font-size: 15px !default;
/// @prop - Padding top of the toast title
$toast-md-title-padding-top: 19px !default;

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

@@ -289,7 +289,7 @@
order: map-get($toolbar-order-ios, back-button);
min-height: 3.2rem;
min-height: 32px;
line-height: 1;
transform: translateZ(0);
@@ -302,7 +302,7 @@
min-width: 18px;
font-size: 3.4rem;
font-size: 34px;
}
.back-button-text-ios {
@@ -324,7 +324,7 @@
ion-icon {
@include padding(0, 6px);
font-size: 2.8rem;
font-size: 28px;
}
}

2
packages/core/src/components/toolbar/toolbar.ios.vars.scss
View File

@@ -16,7 +16,7 @@ $toolbar-order-ios: (
);
/// @prop - Font size of the toolbar button
$toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-button-font-size: 17px !default;
/// @prop - Text color of the toolbar button
$toolbar-ios-button-color: color-contrast($colors-ios, $toolbar-ios-background, ios) !default;

6
packages/core/src/components/toolbar/toolbar.md.scss
View File

@@ -140,7 +140,7 @@
// --------------------------------------------------
.bar-button-md {
@include margin(0, .2rem, 0, .2rem);
@include margin(0, 2px, 0, 2px);
@include padding(0, 5px);
@include border-radius($toolbar-md-button-border-radius);
@@ -306,7 +306,7 @@
@include padding(0, 6px);
@include text-align(start);
font-size: 2.4rem;
font-size: 24px;
font-weight: normal;
}
@@ -326,7 +326,7 @@
.bar-button-menutoggle-md ion-icon {
@include padding(0, 6px);
font-size: 2.4rem;
font-size: 24px;
}
.bar-button-menutoggle-md[slot="mode-end"],

2
packages/core/src/components/toolbar/toolbar.md.vars.scss
View File

@@ -16,7 +16,7 @@ $toolbar-order-md: (
);
/// @prop - Font size of the toolbar button
$toolbar-md-button-font-size: 1.4rem !default;
$toolbar-md-button-font-size: 14px !default;
/// @prop - Text color of the toolbar button
$toolbar-md-button-color: color-contrast($colors-md, $toolbar-md-background, md) !default;

2
packages/core/src/components/toolbar/toolbar.scss
View File

@@ -37,7 +37,7 @@
}
ion-buttons {
@include margin(0, .2rem);
@include margin(0, 2px);
display: block;

4
packages/core/src/themes/ionic.theme.dark.scss
View File

@@ -21,7 +21,9 @@ $background-color: #191919 !default;
$subdued-text-color: #666 !default;
$font-family-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif !default;
$font-size-base: 1.4rem !default; // 1.4rem == 14px
// TODO remove
$font-size-base: 14px !default;
$content-padding: 16px !default;
$content-margin: 16px !default;

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

@@ -21,7 +21,9 @@ $background-color: #fff !default;
$subdued-text-color: #666 !default;
$font-family-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif !default;
$font-size-base: 1.4rem !default; // 1.4rem == 14px
// TODO remove
$font-size-base: 14px !default;
$content-padding: 16px !default;
$content-margin: 16px !default;