javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(title): allow color to be set for title without attribute

Browse Source 
references #14853 references #14850
This commit is contained in:
Brandy Carney
2018-10-10 14:33:18 -05:00
parent b5e39c8675
commit a9b30646fe
2 changed files with 188 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/title/title.scss
View File

@ -4,11 +4,18 @@
// --------------------------------------------------
:host {
/**
* @prop --color: Text color of the title
*/
--color: currentColor;
display: flex;
flex: 1;
align-items: center;
color: var(--color);
transform: translateZ(0);
}

60
core/src/components/toolbar/test/colors/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Toolbar - Colors</title>
@ -7,21 +8,15 @@
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
<link rel="stylesheet" type="text/css" href="/scripts/screenshot/testing.css">
<style>
.custom-toolbar {
--background: black;
--color: white;
}
</style>
</head>
<body>
<ion-app>
<ion-content id="content">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -35,7 +30,7 @@
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -49,7 +44,7 @@
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -63,7 +58,7 @@
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -77,7 +72,7 @@
<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -91,7 +86,7 @@
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -105,7 +100,7 @@
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -119,7 +114,7 @@
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -133,7 +128,7 @@
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -147,7 +142,7 @@
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -161,7 +156,7 @@
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
@ -170,13 +165,34 @@
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
<ion-title>Custom</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title color="secondary" class="custom-title">Secondary</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title class="custom-title">Custom</ion-title>
</ion-toolbar>
</ion-content>
</ion-app>
<style>
.custom-toolbar {
--background: black;
--color: hotpink;
}
.custom-title {
--color: red;
}
</style>
</body>
</html>