Browse Source

Animations toggle

master
morethanwords 4 years ago
parent
commit
ef884b5b8c
  1. 4
      src/components/appMediaViewer.ts
  2. 2
      src/components/appSearchSuper..ts
  3. 11
      src/components/appSelectPeers.ts
  4. 32
      src/components/chat/bubbles.ts
  5. 8
      src/components/chat/input.ts
  6. 5
      src/components/emoticonsDropdown/tabs/emoji.ts
  7. 5
      src/components/horizontalMenu.ts
  8. 7
      src/components/inputField.ts
  9. 8
      src/components/ripple.ts
  10. 6
      src/components/scrollable.ts
  11. 3
      src/components/sidebarRight/index.ts
  12. 22
      src/components/singleTransition.ts
  13. 9
      src/components/transition.ts
  14. 11
      src/helpers/dom.ts
  15. 22
      src/lib/appManagers/appImManager.ts
  16. 3
      src/lib/richtextprocessor.ts
  17. 12
      src/scss/partials/_button.scss
  18. 77
      src/scss/partials/_chat.scss
  19. 57
      src/scss/partials/_chatBubble.scss
  20. 12
      src/scss/partials/_chatMarkupTooltip.scss
  21. 23
      src/scss/partials/_chatPinned.scss
  22. 28
      src/scss/partials/_checkbox.scss
  23. 4
      src/scss/partials/_emojiDropdown.scss
  24. 36
      src/scss/partials/_input.scss
  25. 12
      src/scss/partials/_leftSidebar.scss
  26. 39
      src/scss/partials/_mediaViewer.scss
  27. 26
      src/scss/partials/_selector.scss
  28. 49
      src/scss/partials/_slider.scss
  29. 6
      src/scss/partials/popups/_createPoll.scss
  30. 22
      src/scss/partials/popups/_popup.scss
  31. 5
      src/scss/style.scss

4
src/components/appMediaViewer.ts

@ -324,7 +324,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
const wasActive = fromRight !== 0; const wasActive = fromRight !== 0;
const delay = wasActive ? 350 : 200; const delay = rootScope.settings.animationsEnabled ? (wasActive ? 350 : 200) : 0;
//let delay = wasActive ? 350 : 10000; //let delay = wasActive ? 350 : 10000;
/* if(wasActive) { /* if(wasActive) {
@ -685,7 +685,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
const step = () => { const step = () => {
const diff = Date.now() - start; const diff = Date.now() - start;
let progress = diff / delay; let progress = delay ? diff / delay : 1;
if(progress > 1) progress = 1; if(progress > 1) progress = 1;
if(upscale) progress = 1 - progress; if(upscale) progress = 1 - progress;

2
src/components/appSearchSuper..ts

@ -417,7 +417,7 @@ export default class AppSearchSuper {
div.append(thumb); div.append(thumb);
} }
const needBlur = !isDownloaded || !willHaveThumb; const needBlur = (!isDownloaded || !willHaveThumb) && rootScope.settings.animationsEnabled;
const img = new Image(); const img = new Image();
img.dataset.mid = '' + message.mid; img.dataset.mid = '' + message.mid;
img.classList.add('grid-item-media'); img.classList.add('grid-item-media');

11
src/components/appSelectPeers.ts

@ -393,11 +393,18 @@ export default class AppSelectPeers {
div.classList.remove('scale-in'); div.classList.remove('scale-in');
void div.offsetWidth; void div.offsetWidth;
div.classList.add('scale-out'); div.classList.add('scale-out');
div.addEventListener('animationend', () => {
const onAnimationEnd = () => {
this.selected.delete(key); this.selected.delete(key);
div.remove(); div.remove();
this.onChange && this.onChange(this.selected.size); this.onChange && this.onChange(this.selected.size);
}, {once: true}); };
if(rootScope.settings.animationsEnabled) {
div.addEventListener('animationend', onAnimationEnd, {once: true});
} else {
onAnimationEnd();
}
} }
public getSelected() { public getSelected() {

32
src/components/chat/bubbles.ts

@ -2512,22 +2512,24 @@ export default class ChatBubbles {
if(isFirstMessageRender) { if(isFirstMessageRender) {
waitPromise.then(() => { waitPromise.then(() => {
const mids = getObjectKeysAndSort(this.bubbles, 'desc').filter(mid => !additionMsgIds.includes(mid)); if(rootScope.settings.animationsEnabled) {
mids.forEach((mid, idx) => { const mids = getObjectKeysAndSort(this.bubbles, 'desc').filter(mid => !additionMsgIds.includes(mid));
const bubble = this.bubbles[mid]; mids.forEach((mid, idx) => {
const bubble = this.bubbles[mid];
//if(idx || isSafari) {
// ! 0.1 = 1ms задержка для Safari, без этого первое сообщение над самым нижним может появиться позже другого с animation-delay, LOL !
bubble.style.animationDelay = ((idx || 0.1) * 10) + 'ms';
//}
//if(idx || isSafari) { bubble.classList.add('zoom-fade');
// ! 0.1 = 1ms задержка для Safari, без этого первое сообщение над самым нижним может появиться позже другого с animation-delay, LOL ! bubble.addEventListener('animationend', () => {
bubble.style.animationDelay = ((idx || 0.1) * 10) + 'ms'; bubble.style.animationDelay = '';
//} bubble.classList.remove('zoom-fade');
}, {once: true});
bubble.classList.add('zoom-fade'); //this.log('supa', bubble);
bubble.addEventListener('animationend', () => { });
bubble.style.animationDelay = ''; }
bubble.classList.remove('zoom-fade');
}, {once: true});
//this.log('supa', bubble);
});
setTimeout(() => { setTimeout(() => {
this.loadMoreHistory(true, true); this.loadMoreHistory(true, true);

8
src/components/chat/input.ts

@ -11,7 +11,7 @@ import apiManager from "../../lib/mtproto/mtprotoworker";
//import Recorder from '../opus-recorder/dist/recorder.min'; //import Recorder from '../opus-recorder/dist/recorder.min';
import opusDecodeController from "../../lib/opusDecodeController"; import opusDecodeController from "../../lib/opusDecodeController";
import RichTextProcessor from "../../lib/richtextprocessor"; import RichTextProcessor from "../../lib/richtextprocessor";
import { attachClickEvent, blurActiveElement, cancelEvent, cancelSelection, findUpClassName, getRichValue, getSelectedNodes, isInputEmpty, markdownTags, MarkdownType, placeCaretAtEnd, serializeNodes } from "../../helpers/dom"; import { attachClickEvent, blurActiveElement, cancelEvent, cancelSelection, findUpClassName, getRichValue, getSelectedNodes, isInputEmpty, markdownTags, MarkdownType, placeCaretAtEnd } from "../../helpers/dom";
import { ButtonMenuItemOptions } from '../buttonMenu'; import { ButtonMenuItemOptions } from '../buttonMenu';
import emoticonsDropdown from "../emoticonsDropdown"; import emoticonsDropdown from "../emoticonsDropdown";
import PopupCreatePoll from "../popups/createPoll"; import PopupCreatePoll from "../popups/createPoll";
@ -393,7 +393,7 @@ export default class ChatInput {
const container = document.createElement('div'); const container = document.createElement('div');
container.classList.add('pinned-container'); container.classList.add('pinned-container');
this.pinnedControlBtn = Button('btn-primary btn-transparent pinned-container-button', {icon: 'unpin'}); this.pinnedControlBtn = Button('btn-primary btn-transparent text-bold pinned-container-button', {icon: 'unpin'});
container.append(this.pinnedControlBtn); container.append(this.pinnedControlBtn);
this.listenerSetter.add(this.pinnedControlBtn, 'click', () => { this.listenerSetter.add(this.pinnedControlBtn, 'click', () => {
@ -883,9 +883,7 @@ export default class ChatInput {
} }
} }
if(!richValue.trim() && !serializeNodes(Array.from(this.messageInput.childNodes)).trim()) { if(this.isInputEmpty()) {
this.messageInput.innerHTML = '';
this.appMessagesManager.setTyping(this.chat.peerId, 'sendMessageCancelAction'); this.appMessagesManager.setTyping(this.chat.peerId, 'sendMessageCancelAction');
} else { } else {
const time = Date.now(); const time = Date.now();

5
src/components/emoticonsDropdown/tabs/emoji.ts

@ -159,7 +159,7 @@ export default class EmojiTab implements EmoticonsTab {
spanEmoji.append(first); spanEmoji.append(first);
} }
if(spanEmoji.firstElementChild) { if(spanEmoji.firstElementChild && !RichTextProcessor.emojiSupported) {
(spanEmoji.firstElementChild as HTMLImageElement).setAttribute('loading', 'lazy'); (spanEmoji.firstElementChild as HTMLImageElement).setAttribute('loading', 'lazy');
} }
@ -186,8 +186,7 @@ export default class EmojiTab implements EmoticonsTab {
} else if(target.tagName == 'DIV') return; } else if(target.tagName == 'DIV') return;
//console.log('contentEmoji div', target); //console.log('contentEmoji div', target);
appImManager.chat.input.messageInput.innerHTML += RichTextProcessor.emojiSupported ? target.innerHTML : target.outerHTML;
appImManager.chat.input.messageInput.innerHTML += target.outerHTML;
// Recent // Recent
const emoji = this.getEmojiFromElement(target); const emoji = this.getEmojiFromElement(target);

5
src/components/horizontalMenu.ts

@ -1,6 +1,7 @@
import { findUpTag, whichChild } from "../helpers/dom"; import { findUpTag, whichChild } from "../helpers/dom";
import { TransitionSlider } from "./transition"; import { TransitionSlider } from "./transition";
import { ScrollableX } from "./scrollable"; import { ScrollableX } from "./scrollable";
import rootScope from "../lib/rootScope";
export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250, scrollableX?: ScrollableX) { export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250, scrollableX?: ScrollableX) {
const selectTab = TransitionSlider(content, tabs || content.dataset.slider == 'tabs' ? 'tabs' : 'navigation', transitionTime, onTransitionEnd); const selectTab = TransitionSlider(content, tabs || content.dataset.slider == 'tabs' ? 'tabs' : 'navigation', transitionTime, onTransitionEnd);
@ -25,6 +26,10 @@ export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?
scrollableX.scrollIntoView(target.parentElement.children[id] as HTMLElement, true, transitionTime); scrollableX.scrollIntoView(target.parentElement.children[id] as HTMLElement, true, transitionTime);
} }
if(!rootScope.settings.animationsEnabled) {
animate = false;
}
if(target.classList.contains('active') || id === selectTab.prevId) { if(target.classList.contains('active') || id === selectTab.prevId) {
return false; return false;
} }

7
src/components/inputField.ts

@ -92,6 +92,13 @@ class InputField {
processInput(); processInput();
} }
}); });
// * because if delete all characters there will br left
input.addEventListener('input', () => {
if(!this.value.trim()) {
input.innerHTML = '';
}
});
// ! childList for paste first symbol // ! childList for paste first symbol
observer.observe(input, {characterData: true, childList: true, subtree: true}); observer.observe(input, {characterData: true, childList: true, subtree: true});

8
src/components/ripple.ts

@ -1,5 +1,6 @@
import {isTouchSupported} from "../helpers/touchSupport"; import {isTouchSupported} from "../helpers/touchSupport";
import { findUpClassName } from "../helpers/dom"; import { findUpClassName } from "../helpers/dom";
import rootScope from "../lib/rootScope";
let rippleClickId = 0; let rippleClickId = 0;
export function ripple(elem: HTMLElement, callback: (id: number) => Promise<boolean | void> = () => Promise.resolve(), onEnd: (id: number) => void = null) { export function ripple(elem: HTMLElement, callback: (id: number) => Promise<boolean | void> = () => Promise.resolve(), onEnd: (id: number) => void = null) {
@ -139,6 +140,10 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
}; };
elem.addEventListener('touchstart', (e) => { elem.addEventListener('touchstart', (e) => {
if(!rootScope.settings.animationsEnabled) {
return;
}
//console.log('ripple touchstart', e); //console.log('ripple touchstart', e);
if(e.touches.length > 1 if(e.touches.length > 1
|| touchStartFired || touchStartFired
@ -163,6 +168,9 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
}, {passive: true}); }, {passive: true});
} else { } else {
elem.addEventListener('mousedown', (e) => { elem.addEventListener('mousedown', (e) => {
if(!rootScope.settings.animationsEnabled) {
return;
}
//console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') == r); //console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') == r);
if(elem.dataset.ripple == '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') != r) { if(elem.dataset.ripple == '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') != r) {

6
src/components/scrollable.ts

@ -2,6 +2,7 @@ import { CancellablePromise, deferredPromise } from "../helpers/cancellablePromi
import { isTouchSupported } from "../helpers/touchSupport"; import { isTouchSupported } from "../helpers/touchSupport";
import { logger, LogLevels } from "../lib/logger"; import { logger, LogLevels } from "../lib/logger";
import smoothscroll, { SCROLL_TIME, SmoothScrollToOptions } from '../vendor/smoothscroll'; import smoothscroll, { SCROLL_TIME, SmoothScrollToOptions } from '../vendor/smoothscroll';
import rootScope from "../lib/rootScope";
(window as any).__forceSmoothScrollPolyfill__ = true; (window as any).__forceSmoothScrollPolyfill__ = true;
smoothscroll(); smoothscroll();
/* /*
@ -86,6 +87,11 @@ export class ScrollableBase {
return; return;
} }
if(!rootScope.settings.animationsEnabled) {
smooth = false;
scrollTime = 0;
}
const wasLocked = !!this.scrollLocked; const wasLocked = !!this.scrollLocked;
if(wasLocked) clearTimeout(this.scrollLocked); if(wasLocked) clearTimeout(this.scrollLocked);
if(smooth) { if(smooth) {

3
src/components/sidebarRight/index.ts

@ -9,6 +9,7 @@ import AppSharedMediaTab from "./tabs/sharedMedia";
//import AppForwardTab from "./tabs/forward"; //import AppForwardTab from "./tabs/forward";
import { MOUNT_CLASS_TO } from "../../lib/mtproto/mtproto_config"; import { MOUNT_CLASS_TO } from "../../lib/mtproto/mtproto_config";
import { pause } from "../../helpers/schedulers"; import { pause } from "../../helpers/schedulers";
import rootScope from "../../lib/rootScope";
export const RIGHT_COLUMN_ACTIVE_CLASSNAME = 'is-right-column-shown'; export const RIGHT_COLUMN_ACTIVE_CLASSNAME = 'is-right-column-shown';
@ -112,7 +113,7 @@ export class AppSidebarRight extends SidebarSlider {
//if(mediaSizes.isMobile) { //if(mediaSizes.isMobile) {
//appImManager._selectTab(active ? 1 : 2); //appImManager._selectTab(active ? 1 : 2);
appImManager.selectTab(active ? 1 : 2); appImManager.selectTab(active ? 1 : 2);
return pause(mediaSizes.isMobile ? 250 : 200); // delay of slider animation return pause(rootScope.settings.animationsEnabled ? mediaSizes.isMobile ? 250 : 200 : 0); // delay of slider animation
//} //}
return pause(200); // delay for third column open return pause(200); // delay for third column open

22
src/components/singleTransition.ts

@ -1,17 +1,16 @@
import rootScope from "../lib/rootScope";
const SetTransition = (element: HTMLElement, className: string, forwards: boolean, duration: number, onTransitionEnd?: () => void) => { const SetTransition = (element: HTMLElement, className: string, forwards: boolean, duration: number, onTransitionEnd?: () => void) => {
const timeout = element.dataset.timeout; const timeout = element.dataset.timeout;
if(timeout !== undefined) { if(timeout !== undefined) {
clearTimeout(+timeout); clearTimeout(+timeout);
} }
if(forwards && className) { if(forwards) {
element.classList.add(className); element.classList.add(className);
} }
element.classList.add('animating'); const afterTimeout = () => {
element.classList.toggle('backwards', !forwards);
element.dataset.timeout = '' + setTimeout(() => {
delete element.dataset.timeout; delete element.dataset.timeout;
if(!forwards) { if(!forwards) {
element.classList.remove('backwards', className); element.classList.remove('backwards', className);
@ -20,7 +19,18 @@ const SetTransition = (element: HTMLElement, className: string, forwards: boolea
element.classList.remove('animating'); element.classList.remove('animating');
onTransitionEnd && onTransitionEnd(); onTransitionEnd && onTransitionEnd();
}, duration); };
if(!rootScope.settings.animationsEnabled) {
element.classList.remove('animating', 'backwards');
afterTimeout();
return;
}
element.classList.add('animating');
element.classList.toggle('backwards', !forwards);
element.dataset.timeout = '' + setTimeout(afterTimeout, duration);
}; };
export default SetTransition; export default SetTransition;

9
src/components/transition.ts

@ -1,4 +1,5 @@
import { whichChild } from "../helpers/dom"; import { whichChild } from "../helpers/dom";
import rootScope from "../lib/rootScope";
function slideNavigation(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight: boolean) { function slideNavigation(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight: boolean) {
const width = prevTabContent.getBoundingClientRect().width; const width = prevTabContent.getBoundingClientRect().width;
@ -95,13 +96,19 @@ const Transition = (content: HTMLElement, animationFunction: TransitionFunction,
const p = prevTabContent; const p = prevTabContent;
const tabContent = content.children[id] as HTMLElement; const tabContent = content.children[id] as HTMLElement;
if(!rootScope.settings.animationsEnabled) {
animate = false;
}
// * means animation isn't needed // * means animation isn't needed
if(/* content.dataset.slider == 'none' || */!animate) { if(/* content.dataset.slider == 'none' || */!animate) {
if(p) { if(p) {
p.classList.remove('active'); p.classList.remove('active');
} }
tabContent.classList.add('active'); if(tabContent) {
tabContent.classList.add('active');
}
self.prevId = id; self.prevId = id;
prevTabContent = tabContent; prevTabContent = tabContent;

11
src/helpers/dom.ts

@ -242,15 +242,16 @@ export function getRichElementValue(node: HTMLElement, lines: string[], line: st
export function isInputEmpty(element: HTMLElement) { export function isInputEmpty(element: HTMLElement) {
if(element.hasAttribute('contenteditable') || element.tagName != 'INPUT') { if(element.hasAttribute('contenteditable') || element.tagName != 'INPUT') {
const value = element.innerText; /* const value = element.innerText;
return !value.trim() && !serializeNodes(Array.from(element.childNodes)).trim(); return !value.trim() && !serializeNodes(Array.from(element.childNodes)).trim(); */
return !getRichValue(element).trim();
} else { } else {
return !(element as HTMLInputElement).value.trim().length; return !(element as HTMLInputElement).value.trim();
} }
} }
export function serializeNodes(nodes: Node[]): string { /* export function serializeNodes(nodes: Node[]): string {
return nodes.reduce((str, child: any) => { return nodes.reduce((str, child: any) => {
//console.log('childNode', str, child, typeof(child), typeof(child) === 'string', child.innerText); //console.log('childNode', str, child, typeof(child), typeof(child) === 'string', child.innerText);
@ -260,7 +261,7 @@ export function serializeNodes(nodes: Node[]): string {
return str; return str;
}, ''); }, '');
} } */
/* if (Config.Modes.animations && /* if (Config.Modes.animations &&
typeof window.requestAnimationFrame == 'function') { typeof window.requestAnimationFrame == 'function') {

22
src/lib/appManagers/appImManager.ts

@ -100,15 +100,6 @@ export class AppImManager {
this.chatsContainer.classList.add('chats-container', 'tabs-container'); this.chatsContainer.classList.add('chats-container', 'tabs-container');
this.columnEl.append(this.chatsContainer); this.columnEl.append(this.chatsContainer);
this.chatsSelectTabDebounced = debounce(() => {
const topbar = this.chat.topbar;
if(topbar.pinnedMessage) { // * буду молиться богам, чтобы это ничего не сломало, но это исправляет получение пиннеда после анимации
topbar.pinnedMessage.setCorrectIndex(0);
}
apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId);
}, 250, false, true);
this.createNewChat(); this.createNewChat();
this.chatsSelectTab(this.chat.container); this.chatsSelectTab(this.chat.container);
@ -152,6 +143,19 @@ export class AppImManager {
private setSettings() { private setSettings() {
document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px'); document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
document.body.classList.toggle('animation-level-1', false);
document.body.classList.toggle('animation-level-2', rootScope.settings.animationsEnabled);
this.chatsSelectTabDebounced = debounce(() => {
const topbar = this.chat.topbar;
if(topbar.pinnedMessage) { // * буду молиться богам, чтобы это ничего не сломало, но это исправляет получение пиннеда после анимации
topbar.pinnedMessage.setCorrectIndex(0);
}
apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId);
}, rootScope.settings.animationsEnabled ? 250 : 0, false, true);
} }
private chatsSelectTab(tab: HTMLElement) { private chatsSelectTab(tab: HTMLElement) {

3
src/lib/richtextprocessor.ts

@ -472,6 +472,9 @@ namespace RichTextProcessor {
insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`); insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
} }
} }
/* if(!emojiSupported) {
insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
} */
break; break;
} }

12
src/scss/partials/_button.scss

@ -17,6 +17,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
body.animation-level-0 & {
transition: none;
}
&.active { &.active {
color: $color-blue; color: $color-blue;
} }
@ -85,6 +89,10 @@
transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1);
font-size: 16px; font-size: 16px;
body.animation-level-0 & {
transition: none;
}
-webkit-user-select: none; /* disable selection/Copy of UIWebView */ -webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
@ -222,6 +230,10 @@
transition: .2s background-color, .2s opacity; transition: .2s background-color, .2s opacity;
background: darken($color-blue, 8%); background: darken($color-blue, 8%);
} }
body.animation-level-0 & {
transition: none;
}
svg, use { svg, use {
height: calc(100% - 20px); height: calc(100% - 20px);

77
src/scss/partials/_chat.scss

@ -22,6 +22,10 @@ $chat-helper-size: 39px;
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
transform: translateY(var(--translateY)); transform: translateY(var(--translateY));
body.animation-level-0 & {
transition: none;
}
//display: none !important; //display: none !important;
/* // * for no ESG top /* // * for no ESG top
@ -41,10 +45,6 @@ $chat-helper-size: 39px;
body.is-right-column-shown & { body.is-right-column-shown & {
transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important; transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important;
} }
body.animation-level-0 & {
transition: none;
}
} }
&.is-hidden { &.is-hidden {
@ -121,6 +121,8 @@ $chat-helper-size: 39px;
border: none; border: none;
outline: none; outline: none;
white-space: pre-wrap; white-space: pre-wrap;
font-size: var(--messages-text-size);
line-height: 1.3125;
@media only screen and (max-height: 30rem) { @media only screen and (max-height: 30rem) {
max-height: unquote('max(39px, calc(100vh - 10rem))'); max-height: unquote('max(39px, calc(100vh - 10rem))');
@ -155,6 +157,10 @@ $chat-helper-size: 39px;
right: 0; right: 0;
top: 0; top: 0;
body.animation-level-0 & {
transition: none !important;
}
// here percents can be used since there are no other transforms // here percents can be used since there are no other transforms
transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin})); transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin}));
@ -176,8 +182,16 @@ $chat-helper-size: 39px;
> .tgico { > .tgico {
position: absolute; position: absolute;
animation: hide-icon .4s forwards ease-in-out;
height: 24px; height: 24px;
body:not(.animation-level-0) & {
animation: hide-icon .4s forwards ease-in-out;
}
body.animation-level-0 & {
visibility: hidden;
animation: none !important;
}
} }
.tgico-send { .tgico-send {
@ -207,12 +221,17 @@ $chat-helper-size: 39px;
&.record .tgico-microphone2, &.record .tgico-microphone2,
&.edit .tgico-check, &.edit .tgico-check,
&.schedule .tgico-schedule { &.schedule .tgico-schedule {
animation: grow-icon .4s forwards ease-in-out; animation: grow-icon .4s forwards ease-in-out !important;
visibility: visible !important;
} }
} }
.btn-icon { .btn-icon {
transition: .2s color, background-color .2s, .2s opacity; transition: .2s color, background-color .2s, .2s opacity;
body.animation-level-0 & {
transition: none;
}
} }
.btn-record-cancel, .btn-send { .btn-record-cancel, .btn-send {
@ -250,6 +269,10 @@ $chat-helper-size: 39px;
transition: transform .03s ease-in-out, visibility .1s; transition: transform .03s ease-in-out, visibility .1s;
visibility: hidden; visibility: hidden;
body.animation-level-0 & {
transition: none !important;
}
@include respond-to(handhelds) { @include respond-to(handhelds) {
width: 300px; width: 300px;
height: 300px; height: 300px;
@ -452,6 +475,10 @@ $chat-helper-size: 39px;
flex-direction: column; flex-direction: column;
//z-index: 1; //z-index: 1;
body.animation-level-0 & {
transition: none !important;
}
&:not(.active):not(:last-child) { &:not(.active):not(:last-child) {
filter: brightness(.8); filter: brightness(.8);
} }
@ -557,6 +584,10 @@ $chat-helper-size: 39px;
z-index: 3; z-index: 3;
transition: width .1s; transition: width .1s;
body.animation-level-0 & {
transition: none;
}
.chat-input.type-pinned & { .chat-input.type-pinned & {
width: 17.125rem; width: 17.125rem;
} }
@ -709,6 +740,10 @@ $chat-helper-size: 39px;
z-index: 1; z-index: 1;
user-select: none; user-select: none;
body.animation-level-0 & {
transition: none;
}
@include respond-to(handhelds) { @include respond-to(handhelds) {
padding-top: .25rem; padding-top: .25rem;
} }
@ -738,6 +773,7 @@ $chat-helper-size: 39px;
//padding: 4.5px 0; //padding: 4.5px 0;
//padding-bottom: 4.5px; //padding-bottom: 4.5px;
align-items: flex-end; align-items: flex-end;
min-height: var(--chat-input-size);
.btn-icon:before { .btn-icon:before {
vertical-align: bottom; vertical-align: bottom;
@ -750,6 +786,7 @@ $chat-helper-size: 39px;
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
align-self: center;
> .scrollable { > .scrollable {
position: relative; position: relative;
@ -842,7 +879,7 @@ $chat-helper-size: 39px;
//margin-bottom: 1px; //margin-bottom: 1px;
// ! EXPERIMENTAL // ! EXPERIMENTAL
margin: 0 3px 4px; margin: 0 3px 5px;
padding: 0.25rem; padding: 0.25rem;
width: 34px; width: 34px;
height: 34px; height: 34px;
@ -883,6 +920,10 @@ $chat-helper-size: 39px;
transform: translateY(var(--translateY)); transform: translateY(var(--translateY));
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
body.animation-level-0 & {
transition: none;
}
/* html.is-safari & > .scrollable { /* html.is-safari & > .scrollable {
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
} */ } */
@ -945,15 +986,9 @@ $chat-helper-size: 39px;
// ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ! // ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ!
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
//transition: transform var(--layer-transition);
body.is-right-column-shown & { body.is-right-column-shown & {
transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0); transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0);
} }
body.animation-level-0 & {
transition: none;
}
} }
&.is-selecting { &.is-selecting {
@ -1032,6 +1067,10 @@ $chat-helper-size: 39px;
/* transition: margin-top var(--layer-transition); /* transition: margin-top var(--layer-transition);
transition-delay: .2s; */ transition-delay: .2s; */
body.animation-level-0 & {
transition: none;
}
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
width: calc(100% - var(--right-column-width)); width: calc(100% - var(--right-column-width));
} }
@ -1111,6 +1150,10 @@ $chat-helper-size: 39px;
--translateY: calc(var(--chat-input-size) + 10px); --translateY: calc(var(--chat-input-size) + 10px);
//--translateY: calc(100% + 10px); //--translateY: calc(100% + 10px);
body.animation-level-0 & {
transition: none !important;
}
/* &.is-broadcast { /* &.is-broadcast {
--translateY: 99px !important; --translateY: 99px !important;
} */ } */
@ -1189,6 +1232,10 @@ $chat-helper-size: 39px;
background-color: #fff; background-color: #fff;
transition: .2s ease; transition: .2s ease;
body.animation-level-0 & {
transition: none;
}
&.active { &.active {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@ -1212,6 +1259,10 @@ $chat-helper-size: 39px;
transform: translate3d(0, calc(-100% - 10px), 0); transform: translate3d(0, calc(-100% - 10px), 0);
transition: transform .2s ease; transition: transform .2s ease;
body.animation-level-0 & {
transition: none;
}
&.active { &.active {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }

57
src/scss/partials/_chatBubble.scss

@ -99,7 +99,10 @@ $bubble-margin: .25rem;
&.is-highlighted:after { &.is-highlighted:after {
background-color: rgba(0, 132, 255, .3); background-color: rgba(0, 132, 255, .3);
animation: bubbleSelected 2s linear;
body:not(.animation-level-0) & {
animation: bubbleSelected 2s linear;
}
} }
&.is-first-unread { &.is-first-unread {
@ -132,11 +135,16 @@ $bubble-margin: .25rem;
&.is-selected { &.is-selected {
&:after { &:after {
background-color: rgba(77, 142, 80, .4); background-color: rgba(77, 142, 80, .4);
animation: fade-in-opacity .2s linear forwards;
} }
&.backwards:after { body:not(.animation-level-0) & {
animation: fade-in-backwards-opacity .2s linear forwards; &:after {
animation: fade-in-opacity .2s linear forwards;
}
&.backwards:after {
animation: fade-in-backwards-opacity .2s linear forwards;
}
} }
} }
@ -173,6 +181,10 @@ $bubble-margin: .25rem;
opacity: .99999; // for safari opacity: .99999; // for safari
pointer-events: none; pointer-events: none;
body.animation-level-0 & {
transition: none;
}
&.is-sticky { &.is-sticky {
opacity: .00001; // for safari opacity: .00001; // for safari
@ -258,6 +270,10 @@ $bubble-margin: .25rem;
transition: .2s transform; transition: .2s transform;
user-select: none; user-select: none;
body.animation-level-0 & {
transition: none;
}
/* html.no-touch .bubbles:not(.is-selecting) &, /* html.no-touch .bubbles:not(.is-selecting) &,
html.is-touch .bubbles.is-selecting:not(.no-select) & { html.is-touch .bubbles.is-selecting:not(.no-select) & {
user-select: text; user-select: text;
@ -285,6 +301,10 @@ $bubble-margin: .25rem;
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
transform-origin: bottom; transform-origin: bottom;
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
body.animation-level-0 & {
transition: none;
}
} }
.bubbles.is-selecting:not(.backwards) & { .bubbles.is-selecting:not(.backwards) & {
@ -581,6 +601,10 @@ $bubble-margin: .25rem;
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
transition: opacity .3s ease; transition: opacity .3s ease;
body.animation-level-0 & {
transition: none;
}
} }
.download { .download {
@ -1056,8 +1080,10 @@ $bubble-margin: .25rem;
background-color: rgba(0, 132, 255, .3); background-color: rgba(0, 132, 255, .3);
} }
.document-selection, .document-wrapper:before { body:not(.animation-level-0) & {
animation: bubbleSelected 2s linear; .document-selection, .document-wrapper:before {
animation: bubbleSelected 2s linear;
}
} }
} }
@ -1066,13 +1092,15 @@ $bubble-margin: .25rem;
background-color: rgba(77, 142, 80, .4); background-color: rgba(77, 142, 80, .4);
} }
.document-selection, .document-wrapper:before { body:not(.animation-level-0) & {
animation: fade-in-opacity .2s linear forwards;
}
&.backwards {
.document-selection, .document-wrapper:before { .document-selection, .document-wrapper:before {
animation: fade-in-backwards-opacity .2s linear forwards; animation: fade-in-opacity .2s linear forwards;
}
&.backwards {
.document-selection, .document-wrapper:before {
animation: fade-in-backwards-opacity .2s linear forwards;
}
} }
} }
} }
@ -1113,7 +1141,6 @@ $bubble-margin: .25rem;
.checkbox-caption { .checkbox-caption {
&:after { &:after {
box-shadow: none; box-shadow: none;
} }
} }
@ -2108,6 +2135,10 @@ poll-element {
transform: scale(1); transform: scale(1);
transition: transform .2s ease; transition: transform .2s ease;
body.animation-level-0 & {
transition: none;
}
// @include respond-to(handhelds) { // @include respond-to(handhelds) {
// right: 16px; // right: 16px;
// } // }

12
src/scss/partials/_chatMarkupTooltip.scss

@ -20,6 +20,10 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
body.animation-level-0 & {
transition: none;
}
&-wrapper { &-wrapper {
position: absolute; position: absolute;
left: 0; left: 0;
@ -33,6 +37,10 @@
transform: translateX(0); transform: translateX(0);
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
max-width: 100%; max-width: 100%;
body.animation-level-0 & {
transition: none;
}
} }
&-tools { &-tools {
@ -100,6 +108,10 @@
opacity: 0; opacity: 0;
transition: opacity var(--layer-transition); transition: opacity var(--layer-transition);
pointer-events: none; pointer-events: none;
body.animation-level-0 & {
transition: none;
}
} }
} }

23
src/scss/partials/_chatPinned.scss

@ -22,8 +22,6 @@
color: $color-blue; color: $color-blue;
background: #50a2e988; background: #50a2e988;
position: relative; position: relative;
will-change: transform;
transition: transform 0.25s ease-in-out;
} }
&-bars { &-bars {
@ -40,8 +38,13 @@
width: 2px; width: 2px;
background: currentColor; background: currentColor;
border-radius: 1px; border-radius: 1px;
will-change: transform; }
transition: transform 0.25s ease-in-out;
body:not(.animation-level-0) & {
&-wrapper, &-mark {
will-change: transform;
transition: transform 0.25s ease-in-out;
}
} }
} }
} }
@ -256,6 +259,10 @@
height: 2rem; height: 2rem;
position: absolute; position: absolute;
transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */; transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
body.animation-level-0 & {
transition: none;
}
} }
/* &-media { /* &-media {
@ -309,6 +316,10 @@
height: 50%; height: 50%;
overflow: visible; overflow: visible;
transition: transform var(--pm-transition); transition: transform var(--pm-transition);
body.animation-level-0 & {
transition: none;
}
} }
} }
@ -325,6 +336,10 @@
.animated-counter { .animated-counter {
transition: transform var(--pm-transition), opacity var(--pm-transition); transition: transform var(--pm-transition), opacity var(--pm-transition);
body.animation-level-0 & {
transition: none;
}
&:before { &:before {
content: "#"; content: "#";
} }

28
src/scss/partials/_checkbox.scss

@ -19,14 +19,18 @@
&:before { &:before {
color: #fff; color: #fff;
font-size: 16px; font-size: 1rem;
line-height: 24px; line-height: 1.5rem;
margin-left: 4px; margin-left: .25rem;
transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
font-weight: bold; font-weight: bold;
z-index: 1; z-index: 1;
body.animation-level-0 & {
transition: none;
}
} }
&:after { &:after {
@ -40,6 +44,10 @@
//left: 0; //left: 0;
background-color: transparent; background-color: transparent;
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
body.animation-level-0 & {
transition: none;
}
} }
} }
@ -60,8 +68,6 @@
margin: 1.25rem 0; margin: 1.25rem 0;
line-height: 1.5rem; line-height: 1.5rem;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
&.hidden-widget { &.hidden-widget {
cursor: default; cursor: default;
@ -101,6 +107,10 @@
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
transform: translateY(-50%); transform: translateY(-50%);
body.animation-level-0 & {
transition: none;
}
} }
&::before { &::before {
@ -157,11 +167,19 @@
user-select: none; user-select: none;
transition: .2s opacity; transition: .2s opacity;
body.animation-level-0 & {
transition: none;
}
&:before, &:after { &:before, &:after {
content: ''; content: '';
left: 0; left: 0;
position: absolute; position: absolute;
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
body.animation-level-0 & {
transition: none;
}
} }
&:before { &:before {

4
src/scss/partials/_emojiDropdown.scss

@ -27,6 +27,10 @@
transition: transform .2s ease-in; transition: transform .2s ease-in;
transform: scale(1); transform: scale(1);
} }
body.animation-level-0 & {
transition: none;
}
} }
/* @include respond-to(handhelds) { /* @include respond-to(handhelds) {

36
src/scss/partials/_input.scss

@ -42,9 +42,13 @@
height: 1.5rem; height: 1.5rem;
transform: translateY(-50%); transform: translateY(-50%);
background-color: #fff; background-color: #fff;
transition: .2s transform, .2s padding, .1s opacity; transition: .2s transform, .2s padding, .1s opacity, .2s top, .2s left;
transform-origin: left center; transform-origin: left center;
pointer-events: none; pointer-events: none;
body.animation-level-0 & {
transition: none;
}
} }
input, &-input { input, &-input {
@ -66,6 +70,10 @@
/* overflow: hidden; /* overflow: hidden;
white-space: nowrap; */ white-space: nowrap; */
body.animation-level-0 & {
transition: none;
}
html.no-touch & { html.no-touch & {
&:hover:not(:focus):not(.error):not(.valid) { &:hover:not(:focus):not(.error):not(.valid) {
border-color: var(--color-gray); border-color: var(--color-gray);
@ -73,7 +81,7 @@
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {
min-height: 50px; --height: 50px;
} }
/* font-weight: 500; */ /* font-weight: 500; */
@ -125,9 +133,13 @@
} }
&:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label { &:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label {
transform: translate(-.3125rem, -2.375rem) scale(0.75); //transform: translate(-.3125rem, -2.375rem) scale(.75);
//transform: translate(-.3125rem, -50%) scale(.75);
transform: translateY(-50%) scale(.75);
top: 1px;
padding: 0 6px; padding: 0 6px;
opacity: 1; opacity: 1;
left: .75rem;
} }
} }
} }
@ -159,7 +171,13 @@ input:focus, button:focus {
padding: 0; padding: 0;
&.error { &.error {
animation: input-shake .2s ease-in-out forwards; body.animation-level-0 & {
color: $color-error!important;
}
body:not(.animation-level-0) & {
animation: input-shake .2s ease-in-out forwards;
}
} }
} }
@ -190,7 +208,7 @@ input:focus, button:focus {
overflow: hidden; overflow: hidden;
@include respond-to(handhelds) { @include respond-to(handhelds) {
margin-left: 16px; margin-left: 1rem;
} }
&-input { &-input {
@ -205,6 +223,10 @@ input:focus, button:focus {
transition: background-color .2s ease-in-out, border-color .2s ease-in-out; transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
border-color: transparent; border-color: transparent;
body.animation-level-0 & {
transition: none;
}
&:hover { &:hover {
border-color: var(--color-gray); border-color: var(--color-gray);
} }
@ -240,6 +262,10 @@ input:focus, button:focus {
opacity: .6; opacity: .6;
transition: all .2s ease-out; transition: all .2s ease-out;
body.animation-level-0 & {
transition: none;
}
&:before { &:before {
vertical-align: middle; vertical-align: middle;
} }

12
src/scss/partials/_leftSidebar.scss

@ -26,6 +26,10 @@
width: 26.5rem; width: 26.5rem;
transform: translate3d(-5rem, 0, 0); transform: translate3d(-5rem, 0, 0);
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
body.animation-level-0 & {
transition: none;
}
body.is-left-column-shown & { body.is-left-column-shown & {
transform: translateZ(0); transform: translateZ(0);
@ -204,6 +208,10 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
body.animation-level-0 &, body.animation-level-0 &:before {
transition: none;
}
& + * { & + * {
margin-left: 0!important; margin-left: 0!important;
} }
@ -609,6 +617,10 @@
width: 52px; width: 52px;
transition: width 0.2s; transition: width 0.2s;
margin: 5px 0 0 0; margin: 5px 0 0 0;
body.animation-level-0 & {
transition: none;
}
} }
} }
} }

39
src/scss/partials/_mediaViewer.scss

@ -1,8 +1,6 @@
$open-duration: .2s;
//$open-duration: 10s;
$move-duration: .35s;
.media-viewer { .media-viewer {
--open-duration: .2s;
--move-duration: .35s;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -14,6 +12,11 @@ $move-duration: .35s;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
body.animation-level-0 & {
--open-duration: 0;
--move-duration: 0;
}
@include respond-to(handhelds) { @include respond-to(handhelds) {
background: #000; background: #000;
} }
@ -28,7 +31,7 @@ $move-duration: .35s;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: #8b8b8b; color: #8b8b8b;
transition: $open-duration; transition: var(--open-duration);
cursor: pointer; cursor: pointer;
html.no-touch &:hover { html.no-touch &:hover {
@ -64,7 +67,7 @@ $move-duration: .35s;
.btn-icon { .btn-icon {
margin: 0 .25rem; margin: 0 .25rem;
transition: $open-duration; transition: var(--open-duration);
html.no-touch &:hover { html.no-touch &:hover {
color: #fff; color: #fff;
@ -123,7 +126,7 @@ $move-duration: .35s;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
border-radius: 8px; border-radius: 8px;
opacity: 0; opacity: 0;
transition: opacity $open-duration; transition: opacity var(--open-duration);
@include respond-to(handhelds) { @include respond-to(handhelds) {
border-radius: 0; border-radius: 0;
@ -189,7 +192,7 @@ $move-duration: .35s;
top: 50%; top: 50%;
transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg);
opacity: 0; opacity: 0;
transition: $open-duration opacity; transition: var(--open-duration) opacity;
z-index: 5; z-index: 5;
/* box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); */ /* box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); */
@ -262,7 +265,7 @@ $move-duration: .35s;
opacity: 1; opacity: 1;
/* border-radius: inherit; /* border-radius: inherit;
transition: $open-duration border-radius; */ transition: var(--open-duration) border-radius; */
//&.thumbnail { //&.thumbnail {
position: absolute; position: absolute;
@ -278,11 +281,11 @@ $move-duration: .35s;
} }
&.active { &.active {
transition: $open-duration transform, $open-duration border-radius; transition: var(--open-duration) transform, var(--open-duration) border-radius;
} }
&.moving { &.moving {
transition: $move-duration transform ease; transition: var(--move-duration) transform ease;
} }
/* &.center { /* &.center {
@ -350,7 +353,7 @@ $move-duration: .35s;
&.hiding { &.hiding {
img, video { img, video {
transition: $open-duration opacity; transition: var(--open-duration) opacity;
opacity: 0; opacity: 0;
} }
} }
@ -370,8 +373,8 @@ $move-duration: .35s;
} }
&-mover.active &-aspecter { &-mover.active &-aspecter {
transition: width $open-duration, height $open-duration, transform $open-duration, border-radius $open-duration; transition: width var(--open-duration), height var(--open-duration), transform var(--open-duration), border-radius var(--open-duration);
//transition: $open-duration all; //transition: var(--open-duration) all;
} }
&-whole { &-whole {
@ -383,7 +386,7 @@ $move-duration: .35s;
display: block; display: block;
z-index: 4; z-index: 4;
visibility: hidden; visibility: hidden;
transition: visibility 0s $open-duration; transition: visibility 0s var(--open-duration);
&.active { &.active {
visibility: visible; visibility: visible;
@ -392,7 +395,7 @@ $move-duration: .35s;
.overlays, > .btn-icon { .overlays, > .btn-icon {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: opacity $open-duration 0s, visibility 0s 0s; transition: opacity var(--open-duration) 0s, visibility 0s 0s;
} }
} }
@ -406,7 +409,7 @@ $move-duration: .35s;
position: fixed; position: fixed;
z-index: 5; z-index: 5;
opacity: 0; opacity: 0;
transition: opacity $open-duration 0s, visibility 0s $open-duration; transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
} }
.btn-menu-toggle { .btn-menu-toggle {
@ -446,5 +449,5 @@ $move-duration: .35s;
//display: none; //display: none;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity $open-duration 0s, visibility 0s $open-duration; transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
} }

26
src/scss/partials/_selector.scss

@ -60,7 +60,11 @@
border-radius: 24px; border-radius: 24px;
user-select: none; user-select: none;
flex: 0 0 auto; flex: 0 0 auto;
transition: .2s all; transition: .2s opacity, .2s transform, .2s background-color;
body.animation-level-0 & {
transition: none;
}
html.no-touch &:hover { html.no-touch &:hover {
background-color: #fae2e3; background-color: #fae2e3;
@ -71,14 +75,16 @@
transform: scaleX(-1) rotate(-90deg); transform: scaleX(-1) rotate(-90deg);
} }
} }
&.scale-in {
animation: scaleIn .15s ease forwards;
}
&.scale-out { body:not(.animation-level-0) & {
animation: scaleIn .1s ease forwards; &.scale-in {
animation-direction: reverse; animation: scaleIn .15s ease forwards;
}
&.scale-out {
animation: scaleIn .1s ease forwards;
animation-direction: reverse;
}
} }
&-avatar { &-avatar {
@ -104,6 +110,10 @@
opacity: 0; opacity: 0;
transition: .2s opacity, .2s transform; transition: .2s opacity, .2s transform;
transform: scaleX(-1) rotate(0deg); transform: scaleX(-1) rotate(0deg);
body.animation-level-0 & {
transition: none;
}
} }
} }
} }

49
src/scss/partials/_slider.scss

@ -1,5 +1,3 @@
$slider-time: .25s;
.menu-horizontal-div { .menu-horizontal-div {
width: 100%; width: 100%;
display: flex; display: flex;
@ -31,12 +29,15 @@ $slider-time: .25s;
html.no-touch & { html.no-touch & {
background-color: transparent; background-color: transparent;
transition: background-color .15s ease-in-out;
&:hover { &:hover {
background-color: var(--color-gray-hover); background-color: var(--color-gray-hover);
} }
} }
html.no-touch body:not(.animation-level-0) & {
transition: background-color .15s ease-in-out;
}
> span { > span {
position: relative; position: relative;
@ -71,7 +72,7 @@ $slider-time: .25s;
z-index: 1; z-index: 1;
&.animate { &.animate {
transition: transform $slider-time; transition: transform var(--tabs-transition);
} }
} }
} }
@ -111,12 +112,14 @@ $slider-time: .25s;
html.no-touch & { html.no-touch & {
background-color: transparent; background-color: transparent;
transition: background-color .15s ease-in-out;
&:hover { &:hover {
background-color: var(--color-gray-hover); background-color: var(--color-gray-hover);
} }
} }
html.no-touch body:not(.animation-level-0) & {
transition: background-color .15s ease-in-out;
}
> span { > span {
position: relative; position: relative;
@ -134,26 +137,6 @@ $slider-time: .25s;
} }
} }
/* &__stripe {
position: absolute;
background: $color-blue;
left: 0;
//left: -2px;
transition: .3s transform, .3s width;
//transition: .3s transform;
bottom: -1px;
height: 4px;
width: 1px; // need if using transform
transform: scaleX(1) translateX(0px);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
z-index: 1;
@include respond-to(handhelds) {
display: none;
}
} */
i { i {
position: absolute; position: absolute;
bottom: calc(-.625rem - 2.4px); bottom: calc(-.625rem - 2.4px);
@ -171,7 +154,7 @@ $slider-time: .25s;
z-index: 1; z-index: 1;
&.animate { &.animate {
transition: transform $slider-time; transition: transform var(--tabs-transition);
} }
} }
} }
@ -197,7 +180,7 @@ $slider-time: .25s;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
//transition: transform .42s, filter .42s; //transition: transform .42s, filter .42s;
transition: transform $slider-time, filter $slider-time; transition: transform var(--tabs-transition), filter var(--tabs-transition);
display: none; display: none;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -205,6 +188,10 @@ $slider-time: .25s;
grid-column-start: 1; grid-column-start: 1;
background-color: #fff; background-color: #fff;
//z-index: 1; //z-index: 1;
body.animation-level-0 & {
transition: none;
}
//@include respond-to(not-handhelds) { //@include respond-to(not-handhelds) {
overflow: hidden; overflow: hidden;
@ -223,6 +210,10 @@ $slider-time: .25s;
} }
&[data-slider="tabs"] { &[data-slider="tabs"] {
transition: transform $slider-time; transition: transform var(--tabs-transition);
body.animation-level-0 & {
transition: none;
}
} }
} }

6
src/scss/partials/popups/_createPoll.scss

@ -30,12 +30,12 @@
} }
} }
.poll-create-questions > label { /* .poll-create-questions > label {
margin-top: 25px; margin-top: 25px;
} } */
.input-field { .input-field {
margin-top: 0; //margin-top: 0;
.btn-icon { .btn-icon {
position: absolute; position: absolute;

22
src/scss/partials/popups/_popup.scss

@ -19,6 +19,10 @@
/* align-items: center; /* align-items: center;
justify-content: center; */ justify-content: center; */
body.animation-level-0 & {
transition: none;
}
&.active { &.active {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@ -44,6 +48,10 @@
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
margin: auto; margin: auto;
body.animation-level-0 & {
transition: none;
}
} }
&-centerer { &-centerer {
@ -57,7 +65,11 @@
text-align: center; text-align: center;
justify-self: center; justify-self: center;
line-height: 1; line-height: 1;
transition: .2s; transition: color .2s;
body.animation-level-0 & {
transition: none;
}
html.no-touch &:hover { html.no-touch &:hover {
color: #000; color: #000;
@ -87,7 +99,7 @@
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
button { .btn {
background: none; background: none;
outline: none; outline: none;
border: none; border: none;
@ -103,12 +115,16 @@
max-width: 100%; max-width: 100%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
body.animation-level-0 & {
transition: none;
}
html.no-touch &:hover { html.no-touch &:hover {
background-color: var(--color-gray-hover); background-color: var(--color-gray-hover);
} }
& + button { & + .btn {
margin-top: .5rem; margin-top: .5rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

5
src/scss/style.scss

@ -84,6 +84,7 @@ $chat-padding-handhelds: .5rem;
--color-gray-hover: rgba(112, 117, 121, .08); --color-gray-hover: rgba(112, 117, 121, .08);
--pm-transition: .2s ease-in-out; --pm-transition: .2s ease-in-out;
--layer-transition: .2s ease-in-out; --layer-transition: .2s ease-in-out;
--tabs-transition: .25s;
//--layer-transition: .3s cubic-bezier(.33, 1, .68, 1); //--layer-transition: .3s cubic-bezier(.33, 1, .68, 1);
//--layer-transition: none; //--layer-transition: none;
--btn-corner-transition: .2s cubic-bezier(.34, 1.56, .64, 1); --btn-corner-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
@ -873,6 +874,10 @@ img.emoji {
bottom: 0; bottom: 0;
transition: transform var(--pm-transition), opacity var(--pm-transition); transition: transform var(--pm-transition), opacity var(--pm-transition);
body.animation-level-0 & {
transition: none;
}
/* &:not(.is-hiding) { /* &:not(.is-hiding) {
transform: none !important; transform: none !important;
} */ } */

Loading…
Cancel
Save