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

346
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,176 +8,191 @@
<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">
</head>
<body>
<ion-app>
<ion-content id="content">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tertiary</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Success</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Warning</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Medium</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<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: white;
--color: hotpink;
}
.custom-title {
--color: red;
}
</style>
</head>
<body>
<ion-app>
<ion-content id="content">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tertiary</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Success</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Warning</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Medium</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>