mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
feat(button): add variables for customizing hover state (#18499)
resolves #17974
This commit is contained in:
Brandy Carney
@ -149,6 +149,7 @@ ion-button,event,ionFocus,void,true
|
||||
ion-button,css-prop,--background
|
||||
ion-button,css-prop,--background-activated
|
||||
ion-button,css-prop,--background-focused
|
||||
ion-button,css-prop,--background-hover
|
||||
ion-button,css-prop,--border-color
|
||||
ion-button,css-prop,--border-radius
|
||||
ion-button,css-prop,--border-style
|
||||
@ -157,6 +158,7 @@ ion-button,css-prop,--box-shadow
|
||||
ion-button,css-prop,--color
|
||||
ion-button,css-prop,--color-activated
|
||||
ion-button,css-prop,--color-focused
|
||||
ion-button,css-prop,--color-hover
|
||||
ion-button,css-prop,--opacity
|
||||
ion-button,css-prop,--padding-bottom
|
||||
ion-button,css-prop,--padding-end
|
||||
|
||||
@ -127,7 +127,21 @@
|
||||
--opacity: #{$button-ios-opacity-hover};
|
||||
}
|
||||
|
||||
:host(.button-clear:hover) {
|
||||
:host(.button-clear:hover),
|
||||
:host(.button-outline:hover) {
|
||||
--opacity: #{$button-ios-clear-opacity-hover};
|
||||
}
|
||||
|
||||
// Since iOS changes the opacity on hover,
|
||||
// we want to keep the background if focused
|
||||
// or activated
|
||||
:host(.ion-focused:hover) {
|
||||
--background-hover: var(--background-focused);
|
||||
--color-hover: var(--color-focused);
|
||||
}
|
||||
|
||||
:host(.activated:hover) {
|
||||
--background-hover: var(--background-activated);
|
||||
--color-hover: var(--color-activated);
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
--box-shadow: none;
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-hover: #{ion-color(primary, base, .04)};
|
||||
--color-activated: #{ion-color(primary, base)};
|
||||
}
|
||||
|
||||
@ -62,6 +63,7 @@
|
||||
--opacity: #{$button-md-clear-opacity};
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-hover: #{ion-color(primary, base, .04)};
|
||||
--color-activated: #{ion-color(primary, base)};
|
||||
--color-focused: #{ion-color(primary, base)};
|
||||
}
|
||||
@ -117,23 +119,16 @@
|
||||
}
|
||||
|
||||
|
||||
// Material Design Button Sizes
|
||||
// Material Design Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.button-outline:hover) .button-native {
|
||||
background: ion-color(primary, base, .04);
|
||||
:host(.button-solid.ion-color:hover) .button-native {
|
||||
background: #{current-color(base, .92)};
|
||||
}
|
||||
|
||||
:host(.button-clear.ion-color:hover) .button-native,
|
||||
:host(.button-outline.ion-color:hover) .button-native {
|
||||
background: current-color(base, .04);
|
||||
}
|
||||
|
||||
:host(.button-clear:hover) .button-native {
|
||||
background: ion-color(primary, base, .04);
|
||||
}
|
||||
|
||||
:host(.button-clear.ion-color:hover) .button-native {
|
||||
background: current-color(base, .04);
|
||||
background: #{current-color(base, .04)};
|
||||
}
|
||||
}
|
||||
@ -8,10 +8,12 @@
|
||||
* @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 --background-hover: Background of the button on hover
|
||||
*
|
||||
* @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 --color-hover: Text color of the button when hover
|
||||
*
|
||||
* @prop --transition: Transition of the button
|
||||
*
|
||||
@ -35,6 +37,7 @@
|
||||
--border-width: initial;
|
||||
--border-color: initial;
|
||||
--border-style: initial;
|
||||
--color-hover: initial;
|
||||
--box-shadow: none;
|
||||
|
||||
display: inline-block;
|
||||
@ -76,6 +79,7 @@
|
||||
:host(.button-solid) {
|
||||
--background: #{ion-color(primary, base)};
|
||||
--background-focused: #{ion-color(primary, shade)};
|
||||
--background-hover: #{ion-color(primary, base, 0.92)};
|
||||
--color: #{ion-color(primary, contrast)};
|
||||
--color-activated: #{ion-color(primary, contrast)};
|
||||
--color-focused: #{ion-color(primary, contrast)};
|
||||
@ -234,16 +238,6 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:host(.ion-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);
|
||||
@ -289,3 +283,23 @@
|
||||
ion-ripple-effect {
|
||||
color: var(--ripple-color);
|
||||
}
|
||||
|
||||
// Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
}
|
||||
|
||||
:host(.activated) .button-native {
|
||||
background: var(--background-activated);
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
@ -17,5 +17,3 @@ $button-round-padding-start: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
/// @prop - Opacity of the button when disabled
|
||||
|
||||
@ -255,6 +255,7 @@ export default Example;
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when activated |
|
||||
| `--background-focused` | Background of the button when focused |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
@ -263,6 +264,7 @@ export default Example;
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when activated |
|
||||
| `--color-focused` | Text color of the button when focused |
|
||||
| `--color-hover` | Text color of the button when hover |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Padding bottom of the button |
|
||||
| `--padding-end` | Padding end of the button |
|
||||
|
||||
@ -23,61 +23,61 @@
|
||||
<ion-content class="ion-padding ion-text-center" id="content" no-bounce>
|
||||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button class="focused">Default.focused</ion-button>
|
||||
<ion-button class="ion-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="ion-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="ion-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="ion-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="ion-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="ion-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="ion-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="ion-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="ion-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="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
|
||||
|
||||
@ -24,71 +24,71 @@
|
||||
<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>
|
||||
<ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-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>
|
||||
<ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" disabled>Disabled</ion-button>
|
||||
|
||||
@ -24,71 +24,71 @@
|
||||
<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>
|
||||
<ion-button fill="outline" class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-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>
|
||||
<ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" disabled>Disabled</ion-button>
|
||||
|
||||
@ -53,8 +53,10 @@
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<ion-button class="custom">custom</ion-button>
|
||||
<ion-button class="custom activated ion-focused">custom.focused</ion-button>
|
||||
<ion-button class="custom activated">custom.activated</ion-button>
|
||||
<ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
|
||||
<ion-button fill="clear" class="medium">custom medium</ion-button>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
@ -99,11 +101,17 @@
|
||||
|
||||
.custom {
|
||||
--background: lightpink;
|
||||
--background-hover: rgba(255, 182, 193, 0.5);
|
||||
--background-activated: green;
|
||||
--color: #222;
|
||||
--color-activated: white;
|
||||
--opacity: 1;
|
||||
}
|
||||
|
||||
.medium {
|
||||
--color: #989aa2;
|
||||
--background-hover: rgba(152, 154, 162, 0.4);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -375,15 +375,15 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button class="focused" color="primary">Primary</ion-button>
|
||||
<ion-button class="focused" color="secondary">Secondary</ion-button>
|
||||
<ion-button class="focused" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button class="focused" fill="outline" color="success">Success Outline</ion-button>
|
||||
<ion-button class="focused" fill="clear" color="warning">Warning Clear</ion-button>
|
||||
<ion-button class="focused" color="danger">Danger</ion-button>
|
||||
<ion-button class="focused" color="light">Light</ion-button>
|
||||
<ion-button class="focused" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
|
||||
<ion-button class="focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
|
||||
<ion-button class="ion-focused" color="primary">Primary</ion-button>
|
||||
<ion-button class="ion-focused" color="secondary">Secondary</ion-button>
|
||||
<ion-button class="ion-focused" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button class="ion-focused" fill="outline" color="success">Success Outline</ion-button>
|
||||
<ion-button class="ion-focused" fill="clear" color="warning">Warning Clear</ion-button>
|
||||
<ion-button class="ion-focused" color="danger">Danger</ion-button>
|
||||
<ion-button class="ion-focused" color="light">Light</ion-button>
|
||||
<ion-button class="ion-focused" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
|
||||
<ion-button class="ion-focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user