Skip to content
Permalink
Browse files

feat(button): add variables for customizing hover state (#18499)

resolves #17974
  • Loading branch information...
brandyscarney committed Jun 10, 2019
1 parent 7610787 commit 5c5934bc24bde387fe66e16f88158d992c71dcc9
@@ -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);
background: #{current-color(base, .04)};
}

:host(.button-clear.ion-color:hover) .button-native {
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>

0 comments on commit 5c5934b

Please sign in to comment.
You can’t perform that action at this time.