diff --git a/src/scss/style.scss b/src/scss/style.scss index e5a26d5d..f193e94a 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -8,6 +8,7 @@ $placeholder-color: #9e9e9e; $border-radius: 8px; $border-radius-medium: 10px; $border-radius-big: 12px; +$border-radius-huge: 16px; $hover-alpha: .08; @@ -65,6 +66,7 @@ $chat-input-inner-padding-handhelds: .25rem; --tabs-transition: .25s ease-in-out; --btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1); --esg-transition: var(--btn-menu-transition); + --input-transition: .2s ease-out; --popup-transition-function: cubic-bezier(.4, 0, .2, 1); --popup-transition-time: .15s; //--layer-transition: .3s cubic-bezier(.33, 1, .68, 1); @@ -919,11 +921,26 @@ img.emoji { } [contenteditable][data-placeholder] { - &:empty:before { + &:before { content: attr(data-placeholder); color: #a2acb4; display: block; /* For Firefox By Ariel Flesler */ pointer-events: none; + position: absolute; + opacity: 0; + + @include animation-level(2) { + transform: translateX(1.75rem); + transition: opacity var(--input-transition) .01s, transform var(--input-transition) .01s; + } + } + + &:empty:before { + opacity: 1; + + @include animation-level(2) { + transform: translateX(0); + } } }