javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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 { :host {
/**
* @prop --color: Text color of the title
*/
--color: currentColor;
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
color: var(--color);
transform: translateZ(0); transform: translateZ(0);
} }

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

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