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

fix(button): add custom properties and remove --ion-color overrides (#15463)

Browse Source 
- adds custom properties 
- removes the overrides of `--ion-color-*` variables
- documents the properties

references #14808 references #14853 references #14850
This commit is contained in:
Brandy Carney
2018-09-05 12:23:47 -04:00
committed by GitHub
parent 1f24370497
commit 3af43610bb
15 changed files with 489 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components.d.ts vendored
View File

@ -4011,7 +4011,7 @@ export namespace Components {
* The text to display on the ok button. Default: `OK`.
*/
'okText': string;
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement>;
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement | HTMLIonActionSheetElement | HTMLIonAlertElement>;
/**
* The text to display when the select is empty.
*/

30
core/src/components/button/button.ios.scss
View File

@ -31,12 +31,7 @@
--opacity: #{$button-ios-opacity-hover};
}
:host(.button-solid.focused) {
--background: #{current-color(shade)};
}
:host(.button-solid.activated) {
--background: #{current-color(shade)};
--opacity: #{$button-ios-opacity-activated};
}
@ -47,22 +42,16 @@
--border-radius: #{$button-ios-outline-border-radius};
--border-width: #{$button-ios-outline-border-width};
--border-style: #{$button-ios-outline-border-style};
--background-activated: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, contrast)};
}
:host(.button-outline.activated) {
--background: #{current-color(base)};
color: #{current-color(contrast)};
:host(.button-outline.activated.ion-color) .button-native {
background: current-color(base);
color: current-color(contrast);
}
:host(.button-outline.focused) {
--background: #{current-color(base, .1)};
}
:host(.button-outline.activated.focused) {
--border-color: #{current-color(shade)};
--background: #{current-color(shade)};
}
// iOS Clear Button
// --------------------------------------------------
@ -75,8 +64,11 @@
--opacity: #{$button-ios-clear-opacity-activated};
}
:host(.button-clear.focused) {
--background: #{current-color(base, .1)};
:host(.button-clear) {
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
}

22
core/src/components/button/button.md.scss
View File

@ -5,9 +5,6 @@
// --------------------------------------------------
:host {
--transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
background-color $button-md-transition-duration $button-md-transition-timing-function,
color $button-md-transition-duration $button-md-transition-timing-function};
--border-radius: #{$button-md-border-radius};
--margin-top: #{$button-md-margin-top};
--margin-bottom: #{$button-md-margin-bottom};
@ -18,6 +15,9 @@
--padding-start: #{$button-md-padding-start};
--padding-end: #{$button-md-padding-end};
--height: #{$button-md-height};
--transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
background-color $button-md-transition-duration $button-md-transition-timing-function,
color $button-md-transition-duration $button-md-transition-timing-function};
font-size: #{$button-md-font-size};
font-weight: #{$button-md-font-weight};
@ -36,7 +36,6 @@
:host(.button-solid.activated) {
--box-shadow: #{$button-md-box-shadow-activated};
--background: #{current-color(shade)};
}
// Material Design Outline Button
@ -46,14 +45,13 @@
--border-width: 1px;
--border-style: solid;
--box-shadow: none;
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
}
:host(.button-outline.activated) {
--background: transparent;
}
:host(.button-outline.focused) {
--background: #{current-color(base, .1)};
:host(.button-outline.activated.ion-color) .button-native {
background: transparent;
}
@ -62,6 +60,10 @@
:host(.button-clear) {
--opacity: #{$button-md-clear-opacity};
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
}

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

@ -4,9 +4,40 @@
// --------------------------------------------------
:host {
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
--ion-color-shade: #{ion-color(primary, shade)};
/**
* @prop --background: Background of the button
* @prop --background-activated: Background of the button when activated
* @prop --background-focused: Background of the button when focused
*
* @prop --color: Text color of the button
* @prop --color-activated: Text color of the button when activated
* @prop --color-focused: Text color of the button when focused
*
* @prop --width: Width of the button
* @prop --height: Height of the button
*
* @prop --transition: Transition of the button
*
* @prop --border-radius: Border radius of the button
* @prop --border-width: Border width of the button
* @prop --border-style: Border style of the button
* @prop --border-color: Border color of the button
*
* @prop --ripple-color: Color of the button ripple effect
*
* @prop --box-shadow: Box shadow of the button
* @prop --opacity: Opacity of the button
*
* @prop --margin-top: Margin top of the button
* @prop --margin-end: Margin end of the button
* @prop --margin-bottom: Margin bottom of the button
* @prop --margin-start: Margin start of the button
*
* @prop --padding-top: Padding top of the button
* @prop --padding-end: Padding end of the button
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
*/
--overflow: hidden;
--ripple-color: currentColor;
@ -35,32 +66,79 @@
// Solid Button
// --------------------------------------------------
// Default Solid Color
:host(.button-solid) {
--background: #{current-color(base)};
--background: #{ion-color(primary, base)};
--background-activated: #{ion-color(primary, shade)};
--background-focused: #{ion-color(primary, shade)};
--color: #{ion-color(primary, contrast)};
--color-activated: #{ion-color(primary, contrast)};
--color-focused: #{ion-color(primary, contrast)};
}
color: #{current-color(contrast)};
// Solid Button with Color
:host(.button-solid.ion-color) .button-native {
background: current-color(base);
color: current-color(contrast);
}
// Focused/Activated Solid Button with Color
:host(.button-solid.ion-color.focused) .button-native,
:host(.button-solid.ion-color.activated) .button-native {
background: #{current-color(shade)};
}
// Outline Button
// --------------------------------------------------
// Default Outline Color
:host(.button-outline) {
--border-color: #{current-color(base)};
--border-color: #{ion-color(primary, base)};
--background: transparent;
--color: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
}
color: #{current-color(base)};
// Outline Button with Color
:host(.button-outline.ion-color) .button-native {
border-color: current-color(base);
background: transparent;
color: current-color(base);
}
:host(.button-outline.focused.ion-color) .button-native {
background: current-color(base, .1);
color: current-color(base);
}
// Clear Button
// --------------------------------------------------
// Default Clear Color
:host(.button-clear) {
--border-width: 0;
--background: transparent;
--color: #{ion-color(primary, base)};
}
color: #{current-color(base)};
// Clear Button with Color
:host(.button-clear.ion-color) .button-native {
background: transparent;
color: current-color(base);
}
// Focused Clear Button with Color
:host(.button-clear.focused.ion-color) .button-native {
background: current-color(base, .1);
color: current-color(base);
}
// Activated Clear Button with Color
:host(.button-clear.activated.ion-color) .button-native {
background: transparent;
}
@ -112,17 +190,17 @@
border-left-width: 0;
}
.button-native {
@include text-inherit();
@include border-radius(var(--border-radius));
@include font-smoothing();
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include text-inherit();
display: block;
position: relative;
width: var(--width);
height: var(--height);
transition: var(--transition);
@ -134,6 +212,7 @@
outline: none;
background: var(--background);
color: var(--color);
line-height: 1;
@ -154,6 +233,17 @@
pointer-events: none;
}
:host(.focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}
:host(.activated) .button-native {
background: var(--background-activated);
color: var(--color-activated);
}
// .button > .button-container:hover {
// opacity: var(--opacity-hover);
// }

1
core/src/components/button/button.tsx
View File

@ -231,6 +231,7 @@ function getColorClassMap(buttonType: string, color: string | undefined, fill: s
[`${className}-${mode}`]: true,
};
if (color !== undefined) {
map[`ion-color`] = true;
map[`ion-color-${color}`] = true;
}
return map;

30
core/src/components/button/readme.md
View File

@ -61,6 +61,36 @@ This attribute specifies the size of the button. Setting this attribute will cha
| `ionFocus` | Emitted when the button has focus. |
## CSS Custom Properties
| Name | Description |
| ------------------------ | --------------------------------------- |
| `--background` | Background of the button |
| `--background-activated` | Background of the button when activated |
| `--background-focused` | Background of the button when focused |
| `--border-color` | Border color of the button |
| `--border-radius` | Border radius of the button |
| `--border-style` | Border style of the button |
| `--border-width` | Border width of the button |
| `--box-shadow` | Box shadow of the button |
| `--color` | Text color of the button |
| `--color-activated` | Text color of the button when activated |
| `--color-focused` | Text color of the button when focused |
| `--height` | Height of the button |
| `--margin-bottom` | Margin bottom of the button |
| `--margin-end` | Margin end of the button |
| `--margin-start` | Margin start of the button |
| `--margin-top` | Margin top of the button |
| `--opacity` | Opacity of the button |
| `--padding-bottom` | Padding bottom of the button |
| `--padding-end` | Padding end of the button |
| `--padding-start` | Padding start of the button |
| `--padding-top` | Padding top of the button |
| `--ripple-color` | Color of the button ripple effect |
| `--transition` | Transition of the button |
| `--width` | Width of the button |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

10
core/src/components/button/test/basic/index.html
View File

@ -21,51 +21,61 @@
<ion-content id="content" padding no-bounce text-center>
<p>
<ion-button>Default</ion-button>
<ion-button class="focused">Default.focused</ion-button>
<ion-button class="activated">Default.activated</ion-button>
</p>
<p>
<ion-button color="primary">Primary</ion-button>
<ion-button class="focused" color="primary">Primary.focused</ion-button>
<ion-button class="activated" color="primary">Primary.activated</ion-button>
</p>
<p>
<ion-button color="secondary">Secondary</ion-button>
<ion-button class="focused" color="secondary">Secondary.focused</ion-button>
<ion-button class="activated" color="secondary">Secondary.activated</ion-button>
</p>
<p>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button class="focused" color="tertiary">Tertiary.focused</ion-button>
<ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
</p>
<p>
<ion-button color="success">Success</ion-button>
<ion-button class="focused" color="success">Success.focused</ion-button>
<ion-button class="activated" color="success">Success.activated</ion-button>
</p>
<p>
<ion-button color="warning">Warning</ion-button>
<ion-button class="focused" color="warning">Warning.focused</ion-button>
<ion-button class="activated" color="warning">Warning.activated</ion-button>
</p>
<p>
<ion-button color="danger">Danger</ion-button>
<ion-button class="focused" color="danger">Danger.focused</ion-button>
<ion-button class="activated" color="danger">Danger.activated</ion-button>
</p>
<p>
<ion-button color="light">Light</ion-button>
<ion-button class="focused" color="light">Light.focused</ion-button>
<ion-button class="activated" color="light">Light.activated</ion-button>
</p>
<p>
<ion-button color="medium">Medium</ion-button>
<ion-button class="focused" color="medium">Medium.focused</ion-button>
<ion-button class="activated" color="medium">Medium.activated</ion-button>
</p>
<p>
<ion-button color="dark">Dark</ion-button>
<ion-button class="focused" color="dark">Dark.focused</ion-button>
<ion-button class="activated" color="dark">Dark.activated</ion-button>
</p>

4
core/src/components/button/test/fill/e2e.js → core/src/components/button/test/clear/e2e.js
View File

@ -5,12 +5,12 @@ const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/button/test/fill?ionic:mode=${platform}`);
super(driver, `http://localhost:3333/src/components/button/test/clear?ionic:mode=${platform}`);
}
}
platforms.forEach(platform => {
describe('button/fill', () => {
describe('button/clear', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#content');

100
core/src/components/button/test/clear/index.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Button - Clear</title>
<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">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Button - Clear</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" padding no-bounce>
<p>
<ion-button fill="clear">Default</ion-button>
<ion-button fill="clear" class="activated">Default.activated</ion-button>
<ion-button fill="clear" class="focused">Default.focused</ion-button>
<ion-button fill="clear" class="activated focused">Default.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="primary">Primary</ion-button>
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
<ion-button fill="clear" class="focused" color="primary">Primary.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="primary">Primary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="secondary">Secondary</ion-button>
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
<ion-button fill="clear" class="focused" color="secondary">Secondary.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button fill="clear" class="focused" color="tertiary">Tertiary.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="success">Success</ion-button>
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
<ion-button fill="clear" class="focused" color="success">Success.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="success">Success.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="warning">Warning</ion-button>
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
<ion-button fill="clear" class="focused" color="warning">Warning.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="warning">Warning.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="danger">Danger</ion-button>
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
<ion-button fill="clear" class="focused" color="danger">Danger.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="danger">Danger.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="light">Light</ion-button>
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
<ion-button fill="clear" class="focused" color="light">Light.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="light">Light.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="medium">Medium</ion-button>
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
<ion-button fill="clear" class="focused" color="medium">Medium.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="medium">Medium.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="dark">Dark</ion-button>
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
<ion-button fill="clear" class="focused" color="dark">Dark.focused</ion-button>
<ion-button fill="clear" class="activated focused" color="dark">Dark.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" disabled>Disabled</ion-button>
<ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
</p>
</ion-content>
</ion-app>
</body>
</html>

19
core/src/components/button/test/outline/e2e.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/button/test/outline?ionic:mode=${platform}`);
}
}
platforms.forEach(platform => {
describe('button/outline', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#content');
});
});
});

78
core/src/components/button/test/fill/index.html → core/src/components/button/test/outline/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Button - Fill</title>
<title>Button - Outline</title>
<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">
@ -14,7 +14,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Button - Fill</ion-title>
<ion-title>Button - Outline</ion-title>
</ion-toolbar>
</ion-header>
@ -22,110 +22,76 @@
<p>
<ion-button fill="outline">Default</ion-button>
<ion-button fill="outline" class="activated">Default.activated</ion-button>
<ion-button fill="outline" class="focused">Default.focused</ion-button>
<ion-button fill="outline" class="activated focused">Default.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="primary">Primary</ion-button>
<ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
<ion-button fill="outline" class="focused" color="primary">Primary.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="primary">Primary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="secondary">Secondary</ion-button>
<ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
<ion-button fill="outline" class="focused" color="secondary">Secondary.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="tertiary">Tertiary</ion-button>
<ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button fill="outline" class="focused" color="tertiary">Tertiary.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="success">Success</ion-button>
<ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
<ion-button fill="outline" class="focused" color="success">Success.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="success">Success.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="warning">Warning</ion-button>
<ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
<ion-button fill="outline" class="focused" color="warning">Warning.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="warning">Warning.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="danger">Danger</ion-button>
<ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
<ion-button fill="outline" class="focused" color="danger">Danger.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="danger">Danger.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="light">Light</ion-button>
<ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
<ion-button fill="outline" class="focused" color="light">Light.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="light">Light.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="medium">Medium</ion-button>
<ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
<ion-button fill="outline" class="focused" color="medium">Medium.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="medium">Medium.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="dark">Dark</ion-button>
<ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
<ion-button fill="outline" class="focused" color="dark">Dark.focused</ion-button>
<ion-button fill="outline" class="activated focused" color="dark">Dark.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" disabled>Disabled</ion-button>
<ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
</p>
<p>
<ion-button fill="clear">Default</ion-button>
<ion-button fill="clear" class="activated">Default.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="primary">Primary</ion-button>
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="secondary">Secondary</ion-button>
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="success">Success</ion-button>
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="warning">Warning</ion-button>
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="danger">Danger</ion-button>
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="light">Light</ion-button>
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="medium">Medium</ion-button>
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
</p>
<p>
<ion-button fill="clear" color="dark">Dark</ion-button>
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
</p>
<p>
<ion-button fill="clear" disabled>Disabled</ion-button>
<ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
</p>
</ion-content>
</ion-app>

94
core/src/components/button/test/standalone/index.html
View File

@ -10,27 +10,91 @@
</head>
<body>
<h3>Default</h3>
<p>
<ion-button>Default</ion-button>
<ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button><ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
<ion-button shape="round">Round</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline" expand="full">Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline</ion-button>
<ion-button fill="clear" expand="block">Block Clear</ion-button>
</p>
<h3>Colors</h3>
<p>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button fill="outline" color="success">Success Outline</ion-button>
<ion-button fill="clear" color="warning">Warning Clear</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
</p>
<p>
<ion-badge color="primary">Primary</ion-badge>
<ion-badge color="secondary">Secondary</ion-badge>
<ion-badge color="tertiary">Tertiary</ion-badge>
<ion-badge color="success">Success</ion-badge>
<ion-badge color="warning">Warning</ion-badge>
<ion-badge color="danger">Danger</ion-badge>
<ion-badge color="light">Light</ion-badge>
<ion-badge color="medium">Medium</ion-badge>
<ion-badge color="dark">Dark</ion-badge>
<ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
<h3>Custom</h3>
<!-- Custom Font -->
<ion-button class="wide">wide</ion-button>
<ion-button class="large">large</ion-button>
<ion-button class="round">rounded</ion-button>
<!-- Custom Colors -->
<ion-button class="custom">custom</ion-button>
<ion-button class="custom activated">custom.activated</ion-button>
<ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>Default</ion-button>
</ion-buttons>
<ion-title>Bar</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">Secondary</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button class="custom">Custom</ion-button>
<ion-button class="custom activated">Custom.a</ion-button>
</ion-buttons>
<ion-title>Bar</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary" class="custom">Custom Secondary</ion-button>
</ion-buttons>
</ion-toolbar>
<style>
.wide {
--width: 100px;
}
.large {
font-weight: normal;
font-size: 24px;
}
.round {
--width: 60px;
--height: 60px;
--border-radius: 50%;
--vertical-align: middle;
--padding-start: 10px;
--padding-end: 10px;
}
.custom {
--background: lightpink;
--background-activated: green;
--color: #222;
--color-activated: white;
--opacity: 1;
}
</style>
</body>
</html>

17
core/src/components/button/test/toolbar/index.html
View File

@ -61,6 +61,23 @@
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="secondary">
<ion-button class="closeButton" fill="solid">
Close
</ion-button>
<ion-button fill="solid">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>

37
core/src/components/buttons/buttons.ios.scss
View File

@ -2,12 +2,12 @@
@import "./buttons";
// iOS Toolbar Button Default
// iOS Toolbar Default Button
// --------------------------------------------------
::slotted(*) .button {
--padding-top: 0;
--pading-bottom: 0;
--padding-bottom: 0;
--padding-start: 5px;
--padding-end: 5px;
--height: 32px;
@ -20,10 +20,31 @@
--border-radius: #{$toolbar-ios-button-border-radius};
}
// iOS Toolbar with Color Default Button
// --------------------------------------------------
:host-context(.ion-color)::slotted(*) .button {
--ion-color-base: currentColor;
--color: currentColor;
--color-activated: currentColor;
}
// iOS Toolbar Clear Button
// --------------------------------------------------
::slotted(*) .button-clear.activated {
color: $toolbar-ios-button-color;
}
// iOS Toolbar Button Solid
// --------------------------------------------------
::slotted(*) .button-solid-ios:hover {
opacity: .4;
}
// iOS Toolbar Button Icon
// --------------------------------------------------
::slotted(*) ion-icon[slot="start"] {
@ -56,16 +77,6 @@
pointer-events: none;
}
::slotted(*) .button.button-clear {
--height: 35px;
}
// iOS Toolbar Button Solid
// --------------------------------------------------
::slotted(*) .button.button-solid-ios:hover {
opacity: .4;
}
// iOS Toolbar Menu Toggle
// --------------------------------------------------

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

@ -1,7 +1,7 @@
@import "./buttons.md.vars";
@import "./buttons";
// Material Design Toolbar Button Default
// Material Design Toolbar Default Button
// --------------------------------------------------
::slotted(*) .button {
@ -20,6 +20,49 @@
--border-radius: #{$toolbar-md-button-border-radius};
}
// Material Design Toolbar w/ Color Default Button
// --------------------------------------------------
:host-context(.ion-color)::slotted(*) .button {
--color: currentColor;
--color-activated: currentColor;
}
// Material Design Toolbar Solid Button
// --------------------------------------------------
::slotted(*) .button-solid {
--color: #{$toolbar-md-background-color};
--color-activated: #{$toolbar-md-background-color};
--background: #{$toolbar-md-text-color};
--background-activated: #{$toolbar-md-text-color};
}
// Material Design Toolbar Outline Button
// --------------------------------------------------
::slotted(*) .button-outline {
--color: #{$toolbar-md-text-color};
--color-activated: #{$toolbar-md-text-color};
--background: transparent;
--background-activated: transparent;
--border-color: #{$toolbar-md-text-color};
}
// Material Design Toolbar Clear Button
// --------------------------------------------------
::slotted(*) .button-clear {
--color: #{$toolbar-md-text-color};
--color-activated: #{$toolbar-md-text-color};
--background: transparent;
}
// Material Design Toolbar Button Icon
// --------------------------------------------------
::slotted(*) ion-icon[slot="start"] {
@ -46,18 +89,6 @@
pointer-events: none;
}
::slotted(*) .button.button-solid,
::slotted(*) .button.button-outline {
--ion-color-base: #{$toolbar-md-text-color};
--ion-color-contrast: #{$toolbar-md-background-color};
--ion-color-shade: #{$toolbar-md-text-color};
}
::slotted(*) .button.button-clear {
--ion-color-base: currentColor;
--height: 45px;
}
// Material Design Toolbar Button Placement
// --------------------------------------------------