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(body): body background matches ion-content

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-12-16 18:35:52 +01:00
committed by Manu MA
parent 4c4bdf256d
commit 0699884d10
5 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/src/components/nav/test/basic/index.html
View File

@@ -8,6 +8,35 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
<style>
:root {
--ion-background-color: #171717;
--ion-text-color: #ffffff;
--ion-color-step-50: #232323;
--ion-color-step-100: #2e2e2e;
--ion-color-step-150: #3a3a3a;
--ion-color-step-200: #454545;
--ion-color-step-250: #515151;
--ion-color-step-300: #5d5d5d;
--ion-color-step-350: #686868;
--ion-color-step-400: #747474;
--ion-color-step-450: #7f7f7f;
--ion-color-step-500: #8b8b8b;
--ion-color-step-550: #979797;
--ion-color-step-600: #a2a2a2;
--ion-color-step-650: #aeaeae;
--ion-color-step-700: #b9b9b9;
--ion-color-step-750: #c5c5c5;
--ion-color-step-800: #d1d1d1;
--ion-color-step-850: #dcdcdc;
--ion-color-step-900: #e8e8e8;
--ion-color-step-950: #f3f3f3;
--ion-background-color-rgb: 23,23,23;
--ion-background-color-rgb: 0,0,0;
--ion-text-color-rgb: 255,255,255;
}
</style>
<script>
class PageOne extends HTMLElement {
connectedCallback() {

4
core/src/css/core.scss
View File

@@ -14,6 +14,10 @@ html {
--ion-font-family: var(--ion-default-font);
}
body {
background: var(--ion-background-color);
}
body.backdrop-no-scroll {
overflow: hidden;
}

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

@@ -16,7 +16,7 @@ $overlay-md-background-color: var(--ion-overlay-background-color,
// --------------------------------------------------
$tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default;
$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, .07))) !default;
$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-400) !default;
$tabbar-md-color-activated: var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;

27
core/src/themes/test/css-variables/css/dark.css Normal file
View File

@@ -0,0 +1,27 @@
:root {
--ion-background-color: #171717;
--ion-text-color: #ffffff;
--ion-color-step-50: #232323;
--ion-color-step-100: #2e2e2e;
--ion-color-step-150: #3a3a3a;
--ion-color-step-200: #454545;
--ion-color-step-250: #515151;
--ion-color-step-300: #5d5d5d;
--ion-color-step-350: #686868;
--ion-color-step-400: #747474;
--ion-color-step-450: #7f7f7f;
--ion-color-step-500: #8b8b8b;
--ion-color-step-550: #979797;
--ion-color-step-600: #a2a2a2;
--ion-color-step-650: #aeaeae;
--ion-color-step-700: #b9b9b9;
--ion-color-step-750: #c5c5c5;
--ion-color-step-800: #d1d1d1;
--ion-color-step-850: #dcdcdc;
--ion-color-step-900: #e8e8e8;
--ion-color-step-950: #f3f3f3;
--ion-background-color-rgb: 23,23,23;
--ion-background-color-rgb: 0,0,0;
--ion-text-color-rgb: 255,255,255;
}

3
core/src/themes/test/css-variables/index.html
View File

@@ -76,6 +76,7 @@
<ion-select-option value="default" selected>Default</ion-select-option>
<ion-select-option value="oceanic">Oceanic</ion-select-option>
<ion-select-option value="vibrant">Vibrant</ion-select-option>
<ion-select-option value="dark">Dark</ion-select-option>
</ion-select>
</div>
</ion-toolbar>
@@ -328,6 +329,7 @@
<ion-select-option value="default" selected>Default</ion-select-option>
<ion-select-option value="oceanic">Oceanic</ion-select-option>
<ion-select-option value="vibrant">Vibrant</ion-select-option>
<ion-select-option value="dark">Dark</ion-select-option>
</ion-select>
</div>
</ion-toolbar>
@@ -684,6 +686,7 @@
<ion-select-option value="default" selected>Default</ion-select-option>
<ion-select-option value="oceanic">Oceanic</ion-select-option>
<ion-select-option value="vibrant">Vibrant</ion-select-option>
<ion-select-option value="dark">Dark</ion-select-option>
</ion-select>
</div>
</ion-toolbar>