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

fix(overlay): remove global css vars in overlays for local ones

Browse Source
This commit is contained in:
Brandy Carney
2018-07-23 16:12:03 -04:00
parent 79a09ab1bc
commit 38b1e47739
9 changed files with 50 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/action-sheet/action-sheet.scss
View File

@ -4,6 +4,9 @@
// --------------------------------------------------
:host {
--width: #{$action-sheet-width};
--max-width: #{$action-sheet-max-width};
@include font-smoothing();
@include position(0, 0, 0, 0);
@ -22,15 +25,15 @@
display: block;
position: absolute;
width: $action-sheet-width;
max-width: $action-sheet-max-width;
width: var(--width);
max-width: var(--max-width);
z-index: $z-index-overlay-wrapper;
pointer-events: none;
}
.action-sheet-button {
width: $action-sheet-width;
width: var(--width);
border: 0;

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

@ -7,4 +7,4 @@
$action-sheet-width: 100% !default;
/// @prop - Maximum width of the action sheet
$action-sheet-max-width: var(--ion-action-sheet-max-width, 500px) !default;
$action-sheet-max-width: 500px !default;

6
core/src/components/action-sheet/test/basic/index.html
View File

@ -32,6 +32,12 @@
</ion-content>
<style>
.my-custom-class {
--max-width: 300px;
}
</style>
</ion-app>
<script>

7
core/src/components/alert/alert.ios.scss
View File

@ -5,6 +5,9 @@
// --------------------------------------------------
:host {
--background: #{$alert-ios-background-color};
--max-width: #{$alert-ios-max-width};
font-family: $alert-ios-font-family;
font-size: $alert-ios-font-size;
}
@ -12,10 +15,6 @@
.alert-wrapper {
@include border-radius($alert-ios-border-radius);
max-width: $alert-ios-max-width;
background-color: $alert-ios-background-color;
box-shadow: $alert-ios-box-shadow;
overflow: hidden;
}

14
core/src/components/alert/alert.ios.vars.scss
View File

@ -11,10 +11,10 @@ $alert-ios-font-family: $font-family-base !defau
$alert-ios-font-size: 14px !default;
/// @prop - Max width of the alert
$alert-ios-max-width: var(--ion-alert-max-width, 270px) !default;
$alert-ios-max-width: 270px !default;
/// @prop - Border radius of the alert
$alert-ios-border-radius: var(--ion-alert-border-radius, 13px) !default;
$alert-ios-border-radius: 13px !default;
/// @prop - Background color of the alert
$alert-ios-background-color: $overlay-ios-background-color !default;
@ -26,7 +26,7 @@ $alert-ios-translucent-background-color-alpha: .9 !default;
$alert-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $alert-ios-translucent-background-color-alpha) !default;
/// @prop - Box shadow of the alert
$alert-ios-box-shadow: var(--ion-alert-box-shadow, none) !default;
$alert-ios-box-shadow: none !default;
/// @prop - Padding top of the alert head
$alert-ios-head-padding-top: 12px !default;
@ -50,13 +50,13 @@ $alert-ios-title-color: $text-color !default;
$alert-ios-title-margin-top: 8px !default;
/// @prop - Font size of the alert title
$alert-ios-title-font-size: var(--ion-alert-title-font-size, 17px) !default;
$alert-ios-title-font-size: 17px !default;
/// @prop - Font weight of the alert title
$alert-ios-title-font-weight: var(--ion-alert-title-font-weight, 600) !default;
$alert-ios-title-font-weight: 600 !default;
/// @prop - Font size of the alert sub title
$alert-ios-sub-title-font-size: var(--ion-alert-sub-title-font-size, 14px) !default;
$alert-ios-sub-title-font-size: 14px !default;
/// @prop - Text color of the alert sub title
$alert-ios-sub-title-text-color: $text-color-step-400 !default;
@ -74,7 +74,7 @@ $alert-ios-message-padding-bottom: 21px !default;
$alert-ios-message-padding-start: $alert-ios-message-padding-end !default;
/// @prop - Font size of the alert message
$alert-ios-message-font-size: var(--ion-alert-ios-message-font-size, 13px) !default;
$alert-ios-message-font-size: 13px !default;
/// @prop - Text align of the alert message
$alert-ios-message-text-align: center !default;

7
core/src/components/alert/alert.md.scss
View File

@ -5,6 +5,9 @@
// --------------------------------------------------
:host {
--background: #{$alert-md-background-color};
--max-width: #{$alert-md-max-width};
font-family: $alert-md-font-family;
font-size: $alert-md-font-size;
}
@ -12,10 +15,6 @@
.alert-wrapper {
@include border-radius($alert-md-border-radius);
max-width: $alert-md-max-width;
background-color: $alert-md-background-color;
box-shadow: $alert-md-box-shadow;
}

14
core/src/components/alert/alert.md.vars.scss
View File

@ -11,16 +11,16 @@ $alert-md-font-family: $font-family-base !default;
$alert-md-font-size: 14px !default;
/// @prop - Max width of the alert
$alert-md-max-width: var(--ion-alert-max-width, 280px) !default;
$alert-md-max-width: 280px !default;
/// @prop - Border radius of the alert
$alert-md-border-radius: var(--ion-alert-border-radius, 2px) !default;
$alert-md-border-radius: 2px !default;
/// @prop - Background color of the alert
$alert-md-background-color: $overlay-md-background-color !default;
/// @prop - Box shadow color of the alert
$alert-md-box-shadow: var(--ion-alert-box-shadow, 0 16px 20px rgba(0, 0, 0, .4)) !default;
$alert-md-box-shadow: 0 16px 20px rgba(0, 0, 0, .4) !default;
/// @prop - Padding top of the alert head
$alert-md-head-padding-top: 20px !default;
@ -41,13 +41,13 @@ $alert-md-head-text-align: start !default;
$alert-md-title-color: $text-color !default;
/// @prop - Font size of the alert title
$alert-md-title-font-size: var(--ion-alert-title-font-size, 20px) !default;
$alert-md-title-font-size: 20px !default;
/// @prop - Font weight of the alert title
$alert-md-title-font-weight: var(--ion-alert-title-font-weight, 500) !default;
$alert-md-title-font-weight: 500 !default;
/// @prop - Font size of the alert sub title
$alert-md-sub-title-font-size: var(--ion-alert-sub-title-font-size, 16px) !default;
$alert-md-sub-title-font-size: 16px !default;
/// @prop - Text color of the alert sub title
$alert-md-sub-title-text-color: $text-color !default;
@ -65,7 +65,7 @@ $alert-md-message-padding-bottom: 24px !default;
$alert-md-message-padding-start: $alert-md-message-padding-end !default;
/// @prop - Font size of the alert message
$alert-md-message-font-size: var(--ion-alert-message-font-size, 15px) !default;
$alert-md-message-font-size: 15px !default;
/// @prop - Text color of the alert message
$alert-md-message-text-color: $text-color-step-450 !default;

11
core/src/components/alert/alert.scss
View File

@ -4,6 +4,9 @@
// --------------------------------------------------
:host {
--min-width: #{$alert-min-width};
--max-height: #{$alert-max-height};
@include font-smoothing();
@include position(0, 0, 0, 0);
@ -29,8 +32,12 @@
flex-direction: column;
min-width: $alert-min-width;
max-height: $alert-max-height;
min-width: var(--min-width);
max-width: var(--max-width);
max-height: var(--max-height);
background: var(--background);
contain: content;
opacity: 0;

9
core/src/components/alert/test/basic/index.html
View File

@ -32,6 +32,13 @@
<ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
</ion-content>
<style>
.my-custom-class {
--background: lightblue;
--min-width: 0;
--max-width: 200px;
}
</style>
</ion-app>
<script>
@ -300,7 +307,7 @@
const alert = await alertController.create({
header: 'Alert',
subHeader: 'Subtitle',
cssClass: 'my-class my-customClass ',
cssClass: 'my-class my-custom-class ',
message: 'This is an alert message.',
buttons: [{
text: 'Ok',