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

fix(button): vanilla color is usable

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-14 22:57:12 +02:00
parent b9e42ebd11
commit b8b9b83d49
3 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/button/button.scss
View File

@ -43,6 +43,8 @@
display: inline-block;
color: var(--color);
font-family: $font-family-base;
text-align: center;
@ -212,7 +214,6 @@
outline: none;
background: var(--background);
color: var(--color);
line-height: 1;

10
core/src/components/buttons/buttons.md.scss
View File

@ -45,11 +45,11 @@
// --------------------------------------------------
::slotted(*) .button-outline {
--color: #{$toolbar-md-text-color};
--color-activated: #{$toolbar-md-text-color};
--color: currentColor;
--color-activated: currentColor;
--background: transparent;
--background-activated: transparent;
--border-color: #{$toolbar-md-text-color};
--border-color: currentColor;
}
@ -57,8 +57,8 @@
// --------------------------------------------------
::slotted(*) .button-clear {
--color: #{$toolbar-md-text-color};
--color-activated: #{$toolbar-md-text-color};
--color: currentColor;
--color-activated: currentColor;
--background: transparent;
}

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

@ -6,6 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
<style>
.custom-toolbar {
--background: black;
--color: white;
}
</style>
</head>
<body>
<ion-app>
@ -150,6 +157,20 @@
</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>