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

perf(css): css containment

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-17 16:09:41 +01:00
parent cc59a4e1fb
commit 8956708f06
16 changed files with 45 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,13 +84,15 @@
@include padding($action-sheet-ios-button-padding); @include padding($action-sheet-ios-button-padding);
min-height: $action-sheet-ios-button-min-height; height: $action-sheet-ios-button-height;
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color; border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color;
font-size: $action-sheet-ios-button-font-size; font-size: $action-sheet-ios-button-font-size;
color: $action-sheet-ios-button-text-color; color: $action-sheet-ios-button-text-color;
background: $action-sheet-ios-button-background; background: $action-sheet-ios-button-background;
contain: strict;
} }
.action-sheet-ios .action-sheet-button .action-sheet-icon { .action-sheet-ios .action-sheet-button .action-sheet-icon {

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

@ -82,7 +82,7 @@ $action-sheet-ios-sub-title-padding-bottom: 0 !default;
$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; $action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default;
/// @prop - Minimum height of the action sheet button /// @prop - Minimum height of the action sheet button
$action-sheet-ios-button-min-height: 56px !default; $action-sheet-ios-button-height: 56px !default;
/// @prop - Padding of the action sheet button /// @prop - Padding of the action sheet button
$action-sheet-ios-button-padding: 18px !default; $action-sheet-ios-button-padding: 18px !default;

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

@ -54,11 +54,13 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: $action-sheet-md-button-min-height; height: $action-sheet-md-button-height;
font-size: $action-sheet-md-button-font-size; font-size: $action-sheet-md-button-font-size;
color: $action-sheet-md-button-text-color; color: $action-sheet-md-button-text-color;
background: $action-sheet-md-button-background; background: $action-sheet-md-button-background;
contain: strict;
} }
.action-sheet-md .action-sheet-button.activated { .action-sheet-md .action-sheet-button.activated {

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

@ -52,7 +52,7 @@ $action-sheet-md-sub-title-padding-bottom: 0 !default;
$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default;
/// @prop - Minimum height of the action sheet button /// @prop - Minimum height of the action sheet button
$action-sheet-md-button-min-height: 48px !default; $action-sheet-md-button-height: 48px !default;
/// @prop - Text color of the action sheet button /// @prop - Text color of the action sheet button
$action-sheet-md-button-text-color: $text-md-color-step-150 !default; $action-sheet-md-button-text-color: $text-md-color-step-150 !default;

1
packages/core/src/components/action-sheet/test/translucent/index.html
View File

@ -96,6 +96,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller'); const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady(); await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({ const actionSheetElement = await actionSheetController.create({
enableBackdropDismiss: false,
buttons: [{ buttons: [{
text: 'Archive', text: 'Archive',
handler: () => { handler: () => {

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

@ -113,7 +113,9 @@
.alert-ios .alert-tappable { .alert-ios .alert-tappable {
display: flex; display: flex;
min-height: $alert-ios-tappable-min-height; height: $alert-ios-tappable-height;
contain: strict;
} }
@ -209,6 +211,8 @@
border-style: $alert-ios-checkbox-border-style; border-style: $alert-ios-checkbox-border-style;
border-color: $alert-ios-checkbox-border-color-off; border-color: $alert-ios-checkbox-border-color-off;
background-color: $alert-ios-checkbox-background-color-off; background-color: $alert-ios-checkbox-background-color-off;
contain: strict;
} }

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

@ -290,5 +290,5 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
/// @prop - Filter of the translucent alert /// @prop - Filter of the translucent alert
$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; $alert-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Minimum height of the tappable inputs in the checkbox alert /// @prop - Height of the tappable inputs in the checkbox alert
$alert-ios-tappable-min-height: $item-min-height !default; $alert-ios-tappable-height: $item-min-height !default;

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

@ -97,7 +97,9 @@
overflow: hidden; overflow: hidden;
min-height: $alert-md-tappable-min-height; height: $alert-md-tappable-height;
contain: strict;
} }
@ -201,6 +203,8 @@
border-width: $alert-md-checkbox-border-width; border-width: $alert-md-checkbox-border-width;
border-style: $alert-md-checkbox-border-style; border-style: $alert-md-checkbox-border-style;
border-color: $alert-md-checkbox-border-color-off; border-color: $alert-md-checkbox-border-color-off;
contain: strict;
} }
// Material Design Alert Checkbox Checkmark: Checked // Material Design Alert Checkbox Checkmark: Checked

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

@ -323,5 +323,5 @@ $alert-md-checkbox-icon-border-color: ion-color($colors-md, $alert-md-ch
/// @prop - Transform of the icon in the checkbox alert /// @prop - Transform of the icon in the checkbox alert
$alert-md-checkbox-icon-transform: rotate(45deg) !default; $alert-md-checkbox-icon-transform: rotate(45deg) !default;
/// @prop - Minimum height of the tappable inputs in the checkbox alert /// @prop - Height of the tappable inputs in the checkbox alert
$alert-md-tappable-min-height: $item-min-height !default; $alert-md-tappable-height: $item-min-height !default;

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

@ -19,6 +19,8 @@
border-style: $checkbox-ios-icon-border-style; border-style: $checkbox-ios-icon-border-style;
border-color: $checkbox-ios-icon-border-color-off; border-color: $checkbox-ios-icon-border-color-off;
background-color: $checkbox-ios-background-color-off; background-color: $checkbox-ios-background-color-off;
contain: strict;
} }

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

@ -23,6 +23,8 @@
transition-duration: $checkbox-md-transition-duration; transition-duration: $checkbox-md-transition-duration;
transition-property: background; transition-property: background;
transition-timing-function: $checkbox-md-transition-easing; transition-timing-function: $checkbox-md-transition-easing;
contain: strict;
} }

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

@ -13,6 +13,8 @@
width: $radio-ios-icon-width; width: $radio-ios-icon-width;
height: $radio-ios-icon-height; height: $radio-ios-icon-height;
contain: strict;
} }

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

@ -21,6 +21,8 @@
border-width: $radio-md-icon-border-width; border-width: $radio-md-icon-border-width;
border-style: $radio-md-icon-border-style; border-style: $radio-md-icon-border-style;
border-color: $radio-md-color-off; border-color: $radio-md-color-off;
contain: layout size style;
} }

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

@ -7,9 +7,17 @@
.searchbar-ios { .searchbar-ios {
@include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start); @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
min-height: $searchbar-ios-min-height; height: $searchbar-ios-input-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom;
font-family: $searchbar-ios-font-family; font-family: $searchbar-ios-font-family;
contain: strict;
}
.searchbar-ios .searchbar-input-container {
height: $searchbar-ios-input-height;
contain: strict;
} }
@ -39,6 +47,8 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: $searchbar-ios-input-search-icon-size; background-size: $searchbar-ios-input-search-icon-size;
contain: strict;
} }
@ -50,13 +60,15 @@
@include padding(0, 28px); @include padding(0, 28px);
@include border-radius($searchbar-ios-input-border-radius); @include border-radius($searchbar-ios-input-border-radius);
height: $searchbar-ios-input-height; height: 100%;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: $searchbar-ios-input-text-color; color: $searchbar-ios-input-text-color;
background-color: $searchbar-ios-input-background-color; background-color: $searchbar-ios-input-background-color;
contain: strict;
} }

3
packages/core/src/components/searchbar/searchbar.ios.vars.scss
View File

@ -18,9 +18,6 @@ $searchbar-ios-padding-start: $searchbar-ios-padding-end !de
/// @prop - Font family of the searchbar /// @prop - Font family of the searchbar
$searchbar-ios-font-family: $font-family-ios-base !default; $searchbar-ios-font-family: $font-family-ios-base !default;
/// @prop - Minimum height of the searchbar
$searchbar-ios-min-height: 44px !default;
/// @prop - Font size of the searchbar cancel button /// @prop - Font size of the searchbar cancel button
$searchbar-ios-cancel-button-font-size: 16px !default; $searchbar-ios-cancel-button-font-size: 16px !default;

3
packages/core/src/components/tap-click/tap-click.tsx
View File

@ -21,9 +21,6 @@ export class TapClick {
private clearDefers = new WeakMap<HTMLElement, any>(); private clearDefers = new WeakMap<HTMLElement, any>();
passive = true;
attachTo = 'document';
@Prop({context: 'isServer'}) isServer: boolean; @Prop({context: 'isServer'}) isServer: boolean;
@Prop({context: 'enableListener'}) enableListener: EventListenerEnable; @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;