Merge branch 'master' into react-class-apis

ionic-team · Dec 10, 2018 · 3652890 · 3652890
2 parents 3abbdcf + a2c7b95
commit 3652890
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
@@ -31,12 +31,6 @@
   --background-activated: #{ion-color(primary, shade)};
 }
 
-@media (any-hover: hover) {
-  :host(.button-solid:hover) {
-    --opacity: #{$button-ios-opacity-hover};
-  }
-}
-
 :host(.button-solid.activated) {
   --opacity: #{$button-ios-opacity-activated};
 }
@@ -61,11 +55,6 @@
 
 // iOS Clear Button
 // --------------------------------------------------
-@media (any-hover: hover) {
-  :host(.button-clear:hover) {
-    --opacity: #{$button-ios-clear-opacity-hover};
-  }
-}
 
 :host(.button-clear.activated) {
   --opacity: #{$button-ios-clear-opacity-activated};
@@ -123,3 +112,17 @@
 :host(.button-strong) {
   font-weight: #{$button-ios-strong-font-weight};
 }
+
+
+// iOS Button Focus
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.button-solid:hover) {
+    --opacity: #{$button-ios-opacity-hover};
+  }
+
+  :host(.button-clear:hover) {
+    --opacity: #{$button-ios-clear-opacity-hover};
+  }
+}
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
@@ -51,14 +51,6 @@
   --color-activated: #{ion-color(primary, base)};
 }
 
-:host(.button-outline:hover) .button-native {
-  background: ion-color(primary, base, .04);
-}
-
-:host(.button-outline.ion-color:hover) .button-native {
-  background: current-color(base, .04);
-}
-
 :host(.button-outline.activated.ion-color) .button-native {
   background: transparent;
 }
@@ -75,14 +67,6 @@
   --color-focused: #{ion-color(primary, base)};
 }
 
-: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);
-}
-
 
 // Material Design Round Button
 // --------------------------------------------------
@@ -130,3 +114,25 @@
 ::slotted(ion-icon[slot="icon-only"]) {
   @include padding(0);
 }
+
+
+// Material Design Button Sizes
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.button-outline:hover) .button-native {
+    background: ion-color(primary, base, .04);
+  }
+
+  :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);
+  }
+}
diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
@@ -41,7 +41,6 @@
   outline: none;
 }
 
-:host(:hover),
 :host(:focus) {
   --background: rgba(0, 0, 0, .16);
 }
@@ -58,7 +57,6 @@
   color: current-color(shade);
 }
 
-:host(.ion-color:hover),
 :host(.ion-color:focus) {
   background: current-color(base, .12);
 }
@@ -85,7 +83,6 @@
   border-color: current-color(base, .32);
 }
 
-:host(.chip-outline:not(.ion-color):hover),
 :host(.chip-outline:not(.ion-color):focus) {
   background: rgba(0, 0, 0, .04);
 }
@@ -128,3 +125,20 @@
 ::slotted(ion-avatar:last-child) {
   @include margin(-4px, -8px, -4px, 8px);
 }
+
+
+// Hover
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --background: rgba(0, 0, 0, .16);
+  }
+
+  :host(.ion-color:hover) {
+    background: current-color(base, .12);
+  }
+
+  :host(.chip-outline:not(.ion-color):hover) {
+    background: rgba(0, 0, 0, .04);
+  }
+}