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

refactor(themes): remove the outer-content class from core (#16589)

Browse Source 
BREAKING CHANGES

The outer-content class has been removed in favor of setting the color in your app instead:

```
.outer-content {
  --background: #f2f2f2;
 }
```
This commit is contained in:
Brandy Carney
2018-12-04 16:38:50 -05:00
committed by GitHub
parent 87b25960c4
commit 7ba94900bb
52 changed files with 66 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,12 +32,6 @@
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

6
core/src/components/alert/test/preview/index.html
View File

@ -32,12 +32,6 @@
<ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
<ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

6
core/src/components/avatar/test/preview/index.html
View File

@ -38,12 +38,6 @@
<ion-label>Item Avatar</ion-label>
</ion-item>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/badge/test/preview/index.html
View File

@ -112,12 +112,6 @@
</ion-item>
</ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

6
core/src/components/button/test/preview/index.html
View File

@ -81,12 +81,6 @@
</p>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

4
core/src/components/card/test/preview/index.html
View File

@ -68,10 +68,6 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
}
.content {
background: #e5e5e5;
}

6
core/src/components/checkbox/test/preview/index.html
View File

@ -80,12 +80,6 @@
<ion-checkbox slot="end" disabled></ion-checkbox>
</ion-item>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/chip/test/preview/index.html
View File

@ -92,12 +92,6 @@
</ion-chip>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

4
core/src/components/content/test/preview/index.html
View File

@ -100,10 +100,6 @@
</script>
<style>
ion-toolbar {
--background: white;
}
ion-header.animation,
ion-footer.animation,
ion-content.animation {

4
core/src/components/content/test/standalone/index.html
View File

@ -84,6 +84,10 @@
height: 100%;
}
.outer-content {
--background: #f2f2f2;
}
.custom-color {
--background: blue;
--color: white;

6
core/src/components/datetime/test/basic/index.html
View File

@ -141,6 +141,12 @@
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
<script>
var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
var customYearValues = document.getElementById('customYearValues');

5
core/src/components/datetime/test/preview/index.html
View File

@ -127,8 +127,8 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
.outer-content {
--background: #f2f2f2;
}
</style>
@ -173,6 +173,7 @@
}
</script>
</ion-app>
</body>
</html>

4
core/src/components/fab/test/preview/index.html
View File

@ -150,10 +150,6 @@
</ion-footer>
<style>
ion-toolbar {
--background: white;
}
f {
display: block;
margin: 15px auto;

4
core/src/components/grid/test/preview/index.html
View File

@ -284,10 +284,6 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
}
.grid-demo ion-col div {
background-color: #f7f7f7;
border: 1px solid #ddd;

3
core/src/components/icon/test/preview/index.html
View File

@ -176,9 +176,6 @@
<style>
ion-toolbar {
--background: white;
}
/*to ensure ng css encapsulation doesn't mess with icon attributes*/
code {

6
core/src/components/infinite-scroll/test/preview/index.html
View File

@ -34,12 +34,6 @@
</ion-infinite-scroll>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

6
core/src/components/input/test/preview/index.html
View File

@ -103,12 +103,6 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
<script>
function toggleBoolean(id, prop) {
var el = document.getElementById(id);

4
core/src/components/item-divider/test/preview/index.html
View File

@ -146,8 +146,8 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
.outer-content {
--background: #f2f2f2;
}
img {

4
core/src/components/item-sliding/test/preview/index.html
View File

@ -298,10 +298,6 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
}
.download-spinner {
display: none;
}

6
core/src/components/item/test/dividers/index.html
View File

@ -142,6 +142,12 @@
</ion-item>
</ion-item-group>
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
</ion-app>
</body>

6
core/src/components/item/test/preview/index.html
View File

@ -115,12 +115,6 @@
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/item/test/text/index.html
View File

@ -120,6 +120,12 @@
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
</ion-app>
</body>

6
core/src/components/label/test/preview/index.html
View File

@ -43,12 +43,6 @@
</ion-item>
</ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/list/test/preview/index.html
View File

@ -41,12 +41,6 @@
<ion-item>Halo</ion-item>
</ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/modal/test/preview/index.html
View File

@ -25,12 +25,6 @@
</p>
</ion-content>
<ion-modal-controller></ion-modal-controller>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

4
core/src/components/nav-pop/test/preview/index.html
View File

@ -16,10 +16,6 @@
</ion-app>
<style>
ion-toolbar {
--background: white;
}
f {
display: block;
margin: 15px auto;

4
core/src/components/nav-push/test/preview/index.html
View File

@ -16,10 +16,6 @@
</ion-app>
<style>
ion-toolbar {
--background: white;
}
f {
display: block;
margin: 15px auto;

5
core/src/components/nav-set-root/test/preview/index.html
View File

@ -14,11 +14,6 @@
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
<style>
ion-toolbar {
--background: white;
}
</style>
</body>
<script>

5
core/src/components/nav/test/preview/index.html
View File

@ -75,11 +75,6 @@
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
<style>
ion-toolbar {
--background: white;
}
</style>
</body>
</html>

6
core/src/components/note/test/preview/index.html
View File

@ -131,12 +131,6 @@
</ion-item>
</ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

9
core/src/components/radio-group/test/basic/index.html
View File

@ -12,8 +12,6 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Radio Group - Basic</ion-title>
@ -57,6 +55,12 @@
<ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button>
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
<script>
var dynamicDisabled = document.getElementById('dynamicDisabled');
@ -64,7 +68,6 @@
dynamicDisabled.disabled = !dynamicDisabled.disabled;
}
</script>
</ion-app>
</body>

7
core/src/components/radio-group/test/form/index.html
View File

@ -12,8 +12,6 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Radio Group - Form</ion-title>
@ -79,6 +77,11 @@
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
<script>
var changes = 0;

4
core/src/components/radio-group/test/preview/index.html
View File

@ -56,8 +56,8 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
.outer-content {
--background: #f2f2f2;
}
</style>

5
core/src/components/radio/test/basic/index.html
View File

@ -12,7 +12,6 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Radio - Basic</ion-title>
@ -187,6 +186,10 @@
</script>
<style>
.outer-content {
--background: #f2f2f2;
}
.radio-test pre {
background: #f6f6f6;
border: 1px solid #ddd;

4
core/src/components/radio/test/preview/index.html
View File

@ -181,8 +181,8 @@
</script>
<style>
ion-toolbar {
--background: white;
.outer-content {
--background: #f2f2f2;
}
.radio-test pre {

6
core/src/components/range/test/preview/index.html
View File

@ -104,12 +104,6 @@
</ion-app>
<style>
ion-toolbar {
--background: white;
}
</style>
<script>
var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];

6
core/src/components/refresher/test/preview/index.html
View File

@ -26,12 +26,6 @@
<ion-list id="list"></ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script type="text/javascript" src="preview/data.js"></script>

6
core/src/components/reorder-group/test/preview/index.html
View File

@ -108,12 +108,6 @@
</ion-reorder-group>
</ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>

6
core/src/components/ripple-effect/test/preview/index.html
View File

@ -59,12 +59,6 @@
<ion-ripple-effect></ion-ripple-effect>
</div>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
<script>
function blockClicked() {

4
core/src/components/router/test/preview/index.html
View File

@ -140,10 +140,6 @@
</ion-app>
<style>
ion-toolbar {
--background: white;
}
f {
display: block;
margin: 15px auto;

7
core/src/components/searchbar/test/preview/index.html
View File

@ -115,13 +115,6 @@
}
</script>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/select/test/basic/index.html
View File

@ -272,6 +272,12 @@
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
<script>
var pets = document.getElementById('pets');
pets.value = ['bird', 'dog'];

6
core/src/components/select/test/multiple-value/index.html
View File

@ -119,6 +119,12 @@
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
<script>
var toppings = document.getElementById('toppings');
toppings.value = ['bacon', 'xcheese'];

4
core/src/components/select/test/preview/index.html
View File

@ -118,8 +118,8 @@
</ion-content>
<style>
ion-toolbar {
--background: white;
.outer-content {
--background: #f2f2f2;
}
</style>

6
core/src/components/select/test/single-value/index.html
View File

@ -160,6 +160,12 @@
</p>
</ion-content>
<style>
.outer-content {
--background: #f2f2f2;
}
</style>
<script>
let selects = document.querySelectorAll('ion-select');
selects.forEach(function (select) {

6
core/src/components/spinner/test/preview/index.html
View File

@ -58,12 +58,6 @@
</ion-item>
</ion-list>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

6
core/src/components/tabs/test/preview/index.html
View File

@ -76,12 +76,6 @@
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

4
core/src/components/text/test/preview/index.html
View File

@ -72,10 +72,6 @@
</ion-app>
<style>
ion-toolbar {
--background: white;
}
.color-purple {
color: purple;
}

6
core/src/components/textarea/test/preview/index.html
View File

@ -95,12 +95,6 @@
</div>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
<script>
function toggleBoolean(id, prop) {
var el = document.getElementById(id);

6
core/src/components/thumbnail/test/preview/index.html
View File

@ -38,12 +38,6 @@
<ion-label>Wide Thumbnail</ion-label>
</ion-item>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
</ion-app>
</body>

4
core/src/components/toast/test/preview/index.html
View File

@ -84,10 +84,6 @@
</script>
<style>
ion-toolbar {
--background: white;
}
f {
display: block;
background: blue;

6
core/src/components/toggle/test/preview/index.html
View File

@ -79,12 +79,6 @@
</p>
</ion-content>
<style>
ion-toolbar {
--background: white;
}
</style>
<script>
function printForm(ev) {