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; display: inline-block;
color: var(--color);
font-family: $font-family-base; font-family: $font-family-base;
text-align: center; text-align: center;
@ -212,7 +214,6 @@
outline: none; outline: none;
background: var(--background); background: var(--background);
color: var(--color);
line-height: 1; line-height: 1;

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

@ -45,11 +45,11 @@
// -------------------------------------------------- // --------------------------------------------------
::slotted(*) .button-outline { ::slotted(*) .button-outline {
--color: #{$toolbar-md-text-color}; --color: currentColor;
--color-activated: #{$toolbar-md-text-color}; --color-activated: currentColor;
--background: transparent; --background: transparent;
--background-activated: transparent; --background-activated: transparent;
--border-color: #{$toolbar-md-text-color}; --border-color: currentColor;
} }
@ -57,8 +57,8 @@
// -------------------------------------------------- // --------------------------------------------------
::slotted(*) .button-clear { ::slotted(*) .button-clear {
--color: #{$toolbar-md-text-color}; --color: currentColor;
--color-activated: #{$toolbar-md-text-color}; --color-activated: currentColor;
--background: transparent; --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"> <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> <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">
<style>
.custom-toolbar {
--background: black;
--color: white;
}
</style>
</head> </head>
<body> <body>
<ion-app> <ion-app>
@ -150,6 +157,20 @@
</ion-buttons> </ion-buttons>
<ion-title>Dark</ion-title> <ion-title>Dark</ion-title>
</ion-toolbar> </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-content>
</ion-app> </ion-app>