Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(css-blipchat): removing visibility property in css file to fix r…
…eopen bug in ios14
- Loading branch information
1 parent
f4d06f7
commit 0850aab
Showing
1 changed file
with
126 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,127 +1,126 @@ | ||
| $maxWidth: 480px; | ||
| $maxHeight: 420px; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| .chatParent { | ||
| overflow-y: hidden !important; | ||
| position: static !important; | ||
| height: 0px; | ||
| width: 0px; | ||
| } | ||
| } | ||
|
|
||
| #blip-chat-notifications { | ||
| background-color: #F76556; | ||
| color: #fff; | ||
| border-radius: 50%; | ||
| line-height: 21px; | ||
| font-size: 12px; | ||
| width: 21px; height: 21px; | ||
| position: fixed; | ||
| text-align: center; | ||
| bottom: 65px; | ||
| right: 30px; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| #blip-chat-container { | ||
| position: fixed; | ||
| bottom: 40px; | ||
| right: 80px; | ||
| z-index: 1000000; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| bottom: 0px; | ||
| right: 0px; | ||
| position: absolute; | ||
| height: 100%; | ||
| } | ||
|
|
||
| #blip-chat-iframe { | ||
| position: fixed; | ||
| bottom: 90px; | ||
| right: 38px; | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| transition: opacity 500ms, transform 500ms, visibility 500ms, height 0s 500ms; | ||
| transform: translateY(10%); | ||
| z-index: 1; | ||
| height: 0; | ||
| width: 400px; | ||
| box-shadow: 0 0 20px 1px rgba(0,0,0,.2); | ||
| border-radius: 5px; | ||
| background: #faf9f8; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| right: 0px; | ||
| bottom: 0px !important; | ||
| max-height: 100vh !important; | ||
| width: 100vw; | ||
| position: absolute; | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| &.blip-chat-iframe-opened { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| visibility: visible; | ||
| transition: opacity 500ms 10ms, transform 500ms 10ms, visibility 500ms 10ms, height 0ms; | ||
| height: 610px; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| #blip-chat-open-iframe { | ||
| border-radius: 50%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| z-index: 2; | ||
| position: fixed; | ||
| width: 4%; | ||
| max-width:60px; | ||
| min-width: 48px; | ||
| max-height:60px; | ||
| min-height: 48px; | ||
| right: 35px; | ||
| bottom: 35px; | ||
| transition: transform 200ms, opacity 500ms, visibility 500ms; | ||
| box-shadow: 0 1px 6px rgba(0,0,0,.1),0 2px 32px rgba(0,0,0,.1); | ||
| background-size: 100%; | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| &.opened { | ||
| visibility: hidden !important; | ||
| opacity: 0 !important; | ||
| } | ||
| } | ||
|
|
||
| &:active { | ||
| transform: scale(0.9); | ||
| } | ||
|
|
||
| img, svg { | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| #blip-chat-open-iframe { | ||
| display: none; | ||
| } | ||
|
|
||
| #blip-chat-iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| $maxWidth: 480px; | ||
| $maxHeight: 420px; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| .chatParent { | ||
| overflow-y: hidden !important; | ||
| position: static !important; | ||
| height: 0px; | ||
| width: 0px; | ||
| } | ||
| } | ||
|
|
||
| #blip-chat-notifications { | ||
| background-color: #F76556; | ||
| color: #fff; | ||
| border-radius: 50%; | ||
| line-height: 21px; | ||
| font-size: 12px; | ||
| width: 21px; height: 21px; | ||
| position: fixed; | ||
| text-align: center; | ||
| bottom: 65px; | ||
| right: 30px; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| #blip-chat-container { | ||
| position: fixed; | ||
| bottom: 40px; | ||
| right: 80px; | ||
| z-index: 1000000; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| bottom: 0px; | ||
| right: 0px; | ||
| position: absolute; | ||
| height: 100%; | ||
| } | ||
|
|
||
| #blip-chat-iframe { | ||
| position: fixed; | ||
| bottom: 90px; | ||
| right: 38px; | ||
| opacity: 0; | ||
| transition: opacity 500ms, transform 500ms, visibility 500ms, height 0s 500ms; | ||
| transform: translateY(10%); | ||
| z-index: 1; | ||
| height: 0; | ||
| width: 400px; | ||
| box-shadow: 0 0 20px 1px rgba(0,0,0,.2); | ||
| border-radius: 5px; | ||
| background: #faf9f8; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| right: 0px; | ||
| bottom: 0px !important; | ||
| max-height: 100vh !important; | ||
| width: 100vw; | ||
| position: absolute; | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| &.blip-chat-iframe-opened { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| visibility: visible; | ||
| transition: opacity 500ms 10ms, transform 500ms 10ms, visibility 500ms 10ms, height 0ms; | ||
| height: 610px; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| #blip-chat-open-iframe { | ||
| border-radius: 50%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| z-index: 2; | ||
| position: fixed; | ||
| width: 4%; | ||
| max-width:60px; | ||
| min-width: 48px; | ||
| max-height:60px; | ||
| min-height: 48px; | ||
| right: 35px; | ||
| bottom: 35px; | ||
| transition: transform 200ms, opacity 500ms, visibility 500ms; | ||
| box-shadow: 0 1px 6px rgba(0,0,0,.1),0 2px 32px rgba(0,0,0,.1); | ||
| background-size: 100%; | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
|
|
||
| @media screen and (max-width: $maxWidth), screen and (max-height: $maxHeight) { | ||
| &.opened { | ||
| visibility: hidden !important; | ||
| opacity: 0 !important; | ||
| } | ||
| } | ||
|
|
||
| &:active { | ||
| transform: scale(0.9); | ||
| } | ||
|
|
||
| img, svg { | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| #blip-chat-open-iframe { | ||
| display: none; | ||
| } | ||
|
|
||
| #blip-chat-iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| } |