From 69b0b63e1094f0e45320b22c502a403962fb15c7 Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Thu, 5 Apr 2018 14:40:59 +0200 Subject: [PATCH 1/3] added possible iOS double tab fix --- src/components/m-button/mixins/_button.scss | 22 +++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/m-button/mixins/_button.scss b/src/components/m-button/mixins/_button.scss index 76c7b46139..a4b711c7d5 100644 --- a/src/components/m-button/mixins/_button.scss +++ b/src/components/m-button/mixins/_button.scss @@ -67,21 +67,21 @@ color: $color-button-text; - background: $color-button-bg; + background-color: $color-button-bg; border-color: $color-button-bg; border-bottom-color: $color-button-bg--hover; &:hover, &:active, &:focus { - background: $color-button-bg--hover; + background-color: $color-button-bg--hover; border-color: $color-button-bg--hover; color: $color-button-text; } &:disabled, &[disabled] { - background: $color-button-bg--disabled !important; + background-color: $color-button-bg--disabled !important; border-color: $color-button-bg--disabled !important; } } @@ -96,14 +96,14 @@ color: $color-button-text--ghost; - background: $color-button-bg--ghost; + background-color: $color-button-bg--ghost; border-color: $color-button-bg; &:hover, &:active, &:focus { color: $color-button-text--ghost--hover; - background: $color-button-bg--ghost--hover; + background-color: $color-button-bg--ghost--hover; @if $color-button-bg--ghost--hover != transparent { border-color: $color-button-bg--ghost--hover; @@ -203,6 +203,12 @@ width: 0; height: 550px; + + // fix iOS double tap for :hover + // 1. always make element visible by transparent border + // 2. never fill borders with the background color (important: never use short hand background, cause it will override the clipping) + border: 1px solid transparent; + background-clip: padding-box; content: ''; transform: translateX(-50%) translateY(-50%) rotate(45deg); @@ -224,19 +230,19 @@ $color-button-text--motion--hover: get-color($button-color, $style, text--motion--hover); &::after { - background: $color-button-bg--motion; + background-color: $color-button-bg--motion; } &:hover, &:focus { - background: $color-button-bg; + background-color: $color-button-bg; @if $color-button-text--motion--hover { color: $color-button-text--motion--hover; } &::after { - background: $color-button-bg--motion--hover; + background-color: $color-button-bg--motion--hover; } } } From 59939ac59301697e3abc02888c9879f49b7b1d60 Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Thu, 5 Apr 2018 14:57:02 +0200 Subject: [PATCH 2/3] seems this fixes it --- src/components/m-button/mixins/_button.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/m-button/mixins/_button.scss b/src/components/m-button/mixins/_button.scss index a4b711c7d5..76d1aa1901 100644 --- a/src/components/m-button/mixins/_button.scss +++ b/src/components/m-button/mixins/_button.scss @@ -201,14 +201,10 @@ display: block; - width: 0; - height: 550px; - // fix iOS double tap for :hover - // 1. always make element visible by transparent border - // 2. never fill borders with the background color (important: never use short hand background, cause it will override the clipping) - border: 1px solid transparent; - background-clip: padding-box; + // zero width is considered hidden + width: 0.001px; + height: 550px; content: ''; transform: translateX(-50%) translateY(-50%) rotate(45deg); From 59c78d3103a611c283510936397f9ee910b1b039 Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Thu, 5 Apr 2018 14:58:44 +0200 Subject: [PATCH 3/3] undo bg color shortcut fix --- src/components/m-button/mixins/_button.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/m-button/mixins/_button.scss b/src/components/m-button/mixins/_button.scss index 76d1aa1901..3cb1749e52 100644 --- a/src/components/m-button/mixins/_button.scss +++ b/src/components/m-button/mixins/_button.scss @@ -67,21 +67,21 @@ color: $color-button-text; - background-color: $color-button-bg; + background: $color-button-bg; border-color: $color-button-bg; border-bottom-color: $color-button-bg--hover; &:hover, &:active, &:focus { - background-color: $color-button-bg--hover; + background: $color-button-bg--hover; border-color: $color-button-bg--hover; color: $color-button-text; } &:disabled, &[disabled] { - background-color: $color-button-bg--disabled !important; + background: $color-button-bg--disabled !important; border-color: $color-button-bg--disabled !important; } } @@ -96,14 +96,14 @@ color: $color-button-text--ghost; - background-color: $color-button-bg--ghost; + background: $color-button-bg--ghost; border-color: $color-button-bg; &:hover, &:active, &:focus { color: $color-button-text--ghost--hover; - background-color: $color-button-bg--ghost--hover; + background: $color-button-bg--ghost--hover; @if $color-button-bg--ghost--hover != transparent { border-color: $color-button-bg--ghost--hover; @@ -226,19 +226,19 @@ $color-button-text--motion--hover: get-color($button-color, $style, text--motion--hover); &::after { - background-color: $color-button-bg--motion; + background: $color-button-bg--motion; } &:hover, &:focus { - background-color: $color-button-bg; + background: $color-button-bg; @if $color-button-text--motion--hover { color: $color-button-text--motion--hover; } &::after { - background-color: $color-button-bg--motion--hover; + background: $color-button-bg--motion--hover; } } }