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

fix(themes): added overlay-background-color

Browse Source
This commit is contained in:
Ross Gerbasi
2018-02-13 16:38:50 -06:00
parent 8c8b8548e7
commit 23dd255a8d
11 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/scripts/theme-builder/src/theme-variables.ts
View File

@@ -210,6 +210,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [
{
property: '--ion-backdrop-color'
},
{
property: '--ion-overlay-background-color'
},
{
property: '--ion-background-color',
quickPick: {

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

@@ -28,7 +28,7 @@ $action-sheet-ios-group-margin-top: 10px !default;
$action-sheet-ios-group-margin-bottom: 10px !default;
/// @prop - Background color of the action sheet
$action-sheet-ios-background-color: $background-ios-color-step-50 !default;
$action-sheet-ios-background-color: $overlay-ios-background-color !default;
/// @prop - Background color of the action sheet when translucent
$action-sheet-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;

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

@@ -31,7 +31,7 @@
// -----------------------------------------
.action-sheet-md .action-sheet-group {
background: $action-sheet-md-background;
background-color: $action-sheet-md-background-color;
}
.action-sheet-md .action-sheet-group:first-child {

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

@@ -10,7 +10,7 @@ $action-sheet-md-font-family: $font-family-md-base !de
$action-sheet-md-text-align: start !default;
/// @prop - Background color of the action sheet
$action-sheet-md-background: $background-md-color-step-50 !default;
$action-sheet-md-background-color: $overlay-md-background-color !default;
/// @prop - Padding top of the action sheet
$action-sheet-md-padding-top: 8px !default;

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

@@ -18,7 +18,7 @@ $alert-ios-max-width: 270px !default;
$alert-ios-border-radius: 13px !default;
/// @prop - Background color of the alert
$alert-ios-background-color: $background-ios-color-step-50 !default;
$alert-ios-background-color: $overlay-ios-background-color !default;
/// @prop - Background color of the alert when translucent
$alert-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;

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

@@ -18,7 +18,7 @@ $alert-md-max-width: 280px !default;
$alert-md-border-radius: 2px !default;
/// @prop - Background color of the alert
$alert-md-background-color: $background-md-color-step-50 !default;
$alert-md-background-color: $overlay-md-background-color !default;
/// @prop - Box shadow color of the alert
$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default;

1
packages/core/src/themes/css/default.css
View File

@@ -52,6 +52,7 @@
--ion-color-dark-shade: #1e1e1e;
--ion-color-dark-tint: #383838;
--ion-backdrop-color: #000000;
--ion-overlay-background-color: #fafafa;
--ion-background-color: #ffffff;
--ion-background-color-rgb: 255,255,255;
--ion-background-color-step-50: #f2f2f2;

1
packages/core/src/themes/css/oceanic.css
View File

@@ -53,6 +53,7 @@
--ion-color-dark-tint: #343d46;
--ion-backdrop-color: #1b2b34;
--ion-background-color: #1b2b34;
--ion-overlay-background-color: #142129;
--ion-background-color-rgb: 27,43,52;
--ion-background-color-step-50: #26363e;
--ion-background-color-step-100: #324048;

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

@@ -91,6 +91,7 @@ $text-ios-color-step-1000: css-var(mix($background-ios-color-
$backdrop-ios-color: css-var($backdrop-color, backdrop-ios-color) !default;
$border-ios-color: css-var(#c1c4cd, border-ios-color) !default;
$box-shadow-ios-color: css-var($box-shadow-color, box-shadow-ios-color) !default;
$overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-background-color) !default;
// iOS Tabs & Tab bar
// --------------------------------------------------

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

@@ -90,6 +90,7 @@ $text-md-color-step-1000: css-var(mix($background-md-color-value,
$backdrop-md-color: css-var($backdrop-color, backdrop-md-color) !default;
$border-md-color: css-var(#c1c4cd, border-md-color) !default;
$box-shadow-md-color: css-var($box-shadow-color, box-shadow-md-color) !default;
$overlay-md-background-color: css-var(#fafafa, overlay-md-background-color) !default;
// Material Design Tabs & Tab bar
// --------------------------------------------------

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

@@ -185,6 +185,7 @@ $text-color-step-1000: css-var(mix($background-color-value, $te
$backdrop-color: css-var(#000, backdrop-color) !default;
$border-color: css-var(#b2b2b2, border-color) !default;
$box-shadow-color: css-var(#000, box-shadow-color) !default;
$overlay-background-color: css-var(#fafafa, overlay-background-color) !default;
// Default Tabs & Tab bar
// --------------------------------------------------