mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-23 05:29:56 +05:30
The UI is adapted to the RTL layout
This commit is contained in:
ErickSkrauch
parent
370725dd7e
commit
4525089725
@ -144,6 +144,7 @@
|
||||
"loader-utils": "^2.0.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"postcss-bidirection": "https://github.com/erickskrauch/postcss-bidirection.git#iss_23",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-scss": "^2.1.1",
|
||||
|
||||
@ -119,6 +119,7 @@ interface State {
|
||||
formsHeights: Record<PanelId, number>;
|
||||
}
|
||||
|
||||
// TODO: completely broken for RTL languages
|
||||
class PanelTransition extends React.PureComponent<Props, State> {
|
||||
state: State = {
|
||||
contextHeight: 0,
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
width: 40px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
.accountSwitcher {
|
||||
background: $black;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
$border: 1px solid lighter($black);
|
||||
@ -37,12 +37,12 @@ $border: 1px solid lighter($black);
|
||||
|
||||
.accountAvatar {
|
||||
font-size: 35px;
|
||||
margin-right: 15px;
|
||||
margin-inline-end: 15px;
|
||||
}
|
||||
|
||||
.accountInfo {
|
||||
flex-grow: 1;
|
||||
margin-right: 15px;
|
||||
margin-inline-end: 15px;
|
||||
min-width: 0; // Fix for text-overflow. See https://stackoverflow.com/a/40612184
|
||||
}
|
||||
|
||||
@ -76,17 +76,25 @@ $border: 1px solid lighter($black);
|
||||
composes: arrowRight from '~app/components/ui/icons.scss';
|
||||
|
||||
position: relative;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
font-size: 24px;
|
||||
color: #4e4e4e;
|
||||
line-height: 35px;
|
||||
|
||||
transition: color 0.25s, inset-inline-start 0.5s;
|
||||
// TODO: right now transition property doesn't support the bidirectional value.
|
||||
// See https://github.com/gasolin/postcss-bidirection/issues/25.
|
||||
// noinspection CssOverwrittenProperties Graceful degradation
|
||||
transition: color 0.25s, left 0.5s;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transition: color 0.25s, right 0.5s;
|
||||
}
|
||||
|
||||
.item:hover & {
|
||||
color: #aaa;
|
||||
left: 5px;
|
||||
inset-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
padding-left: 3px;
|
||||
padding-inline-start: 3px;
|
||||
|
||||
color: #666666;
|
||||
font-size: 10px;
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
.authInfo {
|
||||
// Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
|
||||
padding: 5px 20px 7px;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.authInfoAvatar {
|
||||
$size: 30px;
|
||||
|
||||
float: left;
|
||||
float: start;
|
||||
height: $size;
|
||||
width: $size;
|
||||
font-size: $size;
|
||||
line-height: 1;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
margin-top: 2px;
|
||||
color: #aaa;
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
.permissionsContainer {
|
||||
padding: 15px 12px;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.permissionsTitle {
|
||||
@ -57,7 +57,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 17px;
|
||||
padding-inline-start: 17px;
|
||||
position: relative;
|
||||
|
||||
&:last-of-type {
|
||||
@ -71,7 +71,7 @@
|
||||
line-height: 9px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -4px;
|
||||
inset-inline-start: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
width: 50%;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: $popupPadding;
|
||||
margin-inline-end: $popupPadding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
composes: arrowRight from '~app/components/ui/icons.scss';
|
||||
|
||||
position: relative;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
font-size: 28px;
|
||||
color: #ebe8e1;
|
||||
@ -173,7 +173,11 @@
|
||||
|
||||
.appExpanded & {
|
||||
color: #777;
|
||||
transform: rotate(360deg) !important; // Prevent it from hover rotating
|
||||
transform: rotate(360deg)!important; // Prevent it from hover rotating
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: rotate(0)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,7 +199,7 @@ $appDetailsContainerRightLeftPadding: 30px;
|
||||
.editAppLink {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
font-size: 12px;
|
||||
color: #9a9a9a;
|
||||
@ -221,17 +225,19 @@ $appDetailsContainerRightLeftPadding: 30px;
|
||||
}
|
||||
|
||||
.appActionButton {
|
||||
margin: 0 10px 10px 0;
|
||||
margin-inline-end: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.appActionContainer {
|
||||
position: absolute;
|
||||
width: calc(100% - #{$appDetailsContainerRightLeftPadding * 2});
|
||||
top: 100%;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
padding: 0 $appDetailsContainerRightLeftPadding;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
@ -244,7 +250,7 @@ $appDetailsContainerRightLeftPadding: 30px;
|
||||
|
||||
.continueActionButtonWrapper {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
.continueActionLink {
|
||||
|
||||
@ -24,5 +24,5 @@
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
font-size: 11px;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
height: $height;
|
||||
width: $height * 4 / 3;
|
||||
box-shadow: 0 0 1px rgba(#000, 0.2);
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 12px;
|
||||
inset-inline-end: 12px;
|
||||
font-size: 22px;
|
||||
color: #edebe5;
|
||||
pointer-events: none; // Иконка чисто декоративная, так что клик должен проходить сквозь неё
|
||||
@ -94,7 +94,7 @@ $languageListBorderStyle: 1px solid $languageListBorderColor;
|
||||
|
||||
.languageIco {
|
||||
display: inline-block;
|
||||
margin-right: 7px;
|
||||
margin-inline-end: 7px;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
box-shadow: 0 0 1px rgba(#000, 0.2);
|
||||
@ -129,7 +129,7 @@ $languageListBorderStyle: 1px solid $languageListBorderColor;
|
||||
box-sizing: border-box;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
right: -32px;
|
||||
inset-inline-end: -32px;
|
||||
|
||||
font-size: 10px;
|
||||
line-height: 18px;
|
||||
@ -146,13 +146,13 @@ $languageListBorderStyle: 1px solid $languageListBorderColor;
|
||||
}
|
||||
|
||||
.languageItem:hover & {
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.activeLanguageItem & {
|
||||
border-color: $green;
|
||||
background: $green;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
@ -209,7 +209,7 @@ $languageListBorderStyle: 1px solid $languageListBorderColor;
|
||||
|
||||
color: lighter($blue);
|
||||
font-size: 22px;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.improveTranslatesContent {
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 11px;
|
||||
padding-inline-start: 11px;
|
||||
|
||||
&:before {
|
||||
content: '—';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ export default function OsInstruction({ os }: { os: OS }) {
|
||||
<ul className={styles.appList}>
|
||||
{linksByOs[os].featured.map((item) => (
|
||||
<li key={item.label}>
|
||||
<a href={item.link} target="_blank">
|
||||
<a href={item.link} target="_blank" dir="ltr">
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
.otherApps {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 5px;
|
||||
font-size: 10px;
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.androidActive & {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.appleActive &,
|
||||
@ -111,21 +111,33 @@
|
||||
$translateX: -51%;
|
||||
|
||||
transform: translateX($translateX) scale(1);
|
||||
left: 49%;
|
||||
inset-inline-start: 49%;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translateX(-$translateX) scale(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX($translateX) scale(1.1);
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translateX(-$translateX) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.appleActive & {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
transform: translateX(0)!important; // override dir='rtl'
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.androidActive &,
|
||||
.windowsActive & {
|
||||
transform: translateX($translateX) scale(0);
|
||||
opacity: 0;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translateX(-$translateX) scale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,21 +146,33 @@
|
||||
$translateX: -100%;
|
||||
|
||||
transform: translateX($translateX) scale(1);
|
||||
left: 100%;
|
||||
inset-inline-start: 100%;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translateX(-$translateX) scale(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX($translateX) scale(1.1);
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translateX(-$translateX) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.windowsActive & {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
transform: translateX(0)!important; // override dir='rtl'
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.appleActive &,
|
||||
.androidActive & {
|
||||
transform: translateX($translateX) scale(0);
|
||||
opacity: 0;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translateX(-$translateX) scale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -166,8 +190,8 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 15px;
|
||||
margin-left: 30%;
|
||||
padding-left: 15px;
|
||||
margin-inline-start: 30%;
|
||||
padding-inline-start: 15px;
|
||||
padding-bottom: 15px;
|
||||
min-height: $boxHeight;
|
||||
}
|
||||
@ -212,7 +236,7 @@
|
||||
.osName {
|
||||
font-family: $font-family-title;
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
@mixin commonNonActiveTile() {
|
||||
|
||||
@ -16,8 +16,8 @@ $maxQrCodeSize: 242px;
|
||||
}
|
||||
|
||||
.or {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
position: absolute; // Use absolute positioning to put an element between margin
|
||||
inset-inline-start: 0; // TODO: doesn't have any effect. Probably can be removed
|
||||
width: 100%;
|
||||
margin-top: -18px;
|
||||
|
||||
|
||||
@ -13,7 +13,8 @@ $formColumnWidth: 416px;
|
||||
}
|
||||
|
||||
.descriptionColumn {
|
||||
padding: 12px 20px 0 0;
|
||||
padding-top: 12px;
|
||||
padding-inline-end: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -97,7 +98,8 @@ $formColumnWidth: 416px;
|
||||
}
|
||||
|
||||
.paramMessage {
|
||||
padding: 10px 40px 0 0;
|
||||
padding-top: 10px;
|
||||
padding-inline-end: 40px;
|
||||
|
||||
color: $red;
|
||||
font-size: 11px;
|
||||
@ -168,7 +170,7 @@ $formColumnWidth: 416px;
|
||||
}
|
||||
|
||||
.paramEditIcon {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
.backButton {
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
inset-inline-start: -60px;
|
||||
top: 15px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@ -60,7 +60,6 @@
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
width: 86px;
|
||||
@ -110,7 +109,7 @@
|
||||
|
||||
.backButton {
|
||||
top: 29px;
|
||||
left: 27px;
|
||||
inset-inline-start: 27px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
|
||||
@ -29,7 +29,8 @@
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
margin: 4px 12px 0 0;
|
||||
margin-top: 4px;
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
.dbIcon {
|
||||
@ -68,14 +69,15 @@
|
||||
font-family: $font-family-title;
|
||||
font-size: 14px;
|
||||
color: #9a9a9a;
|
||||
margin: 0 0 5px 1px; // Add 1px from the left to make icon look visually aligned with texts
|
||||
margin-bottom: 5px;
|
||||
margin-inline-start: 1px; // Add 1px from the left to make icon look visually aligned with texts
|
||||
}
|
||||
|
||||
.githubIcon {
|
||||
composes: github from '~app/components/ui/icons.scss';
|
||||
|
||||
font-size: 12px;
|
||||
margin-right: 2px;
|
||||
margin-inline-end: 2px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
.horizontalGroup {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item {
|
||||
// TODO: in some cases we do not need overflow hidden
|
||||
// probably, it is better to create a separate class for children, that will
|
||||
// enable overflow hidden and ellipsis
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
$borderConfig: 1px solid rgba(#fff, 0.15);
|
||||
|
||||
border-left: $borderConfig;
|
||||
|
||||
&:last-child {
|
||||
border-right: $borderConfig;
|
||||
}
|
||||
}
|
||||
@ -1,29 +1,29 @@
|
||||
import React from 'react';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { MessageDescriptor } from 'react-intl';
|
||||
|
||||
import i18n from 'app/services/i18n';
|
||||
|
||||
function isMessageDescriptor(value: any): value is MessageDescriptor {
|
||||
return typeof value === 'object' && value.id;
|
||||
}
|
||||
|
||||
export default class FormComponent<P, S = {}> extends React.Component<P, S> {
|
||||
/**
|
||||
* Formats message resolving intl translations
|
||||
*
|
||||
* @param {string|object} message - message string, or intl message descriptor with an `id` field
|
||||
*
|
||||
* @deprecated
|
||||
* @returns {string}
|
||||
*/
|
||||
formatMessage(message: string | MessageDescriptor): string {
|
||||
if (!message) {
|
||||
throw new Error('A message is required');
|
||||
formatMessage<T extends ReactNode | MessageDescriptor>(message: T): T extends MessageDescriptor ? string : T {
|
||||
if (isMessageDescriptor(message)) {
|
||||
// @ts-ignore
|
||||
return i18n.getIntl().formatMessage(message);
|
||||
}
|
||||
|
||||
if (typeof message === 'string') {
|
||||
return message;
|
||||
}
|
||||
|
||||
if (!message.id) {
|
||||
throw new Error(`Invalid message format: ${JSON.stringify(message)}`);
|
||||
}
|
||||
|
||||
return i18n.getIntl().formatMessage(message);
|
||||
// @ts-ignore
|
||||
return message;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { MessageDescriptor } from 'react-intl';
|
||||
import clsx from 'clsx';
|
||||
import { uniqueId, omit } from 'app/functions';
|
||||
@ -17,7 +17,7 @@ export default class Input extends FormInputComponent<
|
||||
color: Color;
|
||||
center: boolean;
|
||||
disabled: boolean;
|
||||
label?: string | MessageDescriptor;
|
||||
label?: ReactNode | MessageDescriptor;
|
||||
placeholder?: string | MessageDescriptor;
|
||||
icon?: string;
|
||||
copy?: boolean;
|
||||
|
||||
@ -25,8 +25,9 @@ $dropdownPadding: 15px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
padding-inline-start: $dropdownPadding;
|
||||
// 28px - ширина иконки при заданном размере шрифта
|
||||
padding: 0 ($dropdownPadding * 2 + 28px) 0 $dropdownPadding;
|
||||
padding-inline-end: $dropdownPadding * 2 + 28px;
|
||||
position: relative;
|
||||
|
||||
font-family: $font-family-title;
|
||||
@ -48,6 +49,7 @@ $dropdownPadding: 15px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.opened {
|
||||
@ -57,18 +59,26 @@ $dropdownPadding: 15px;
|
||||
composes: selecter from '~app/components/ui/icons.scss';
|
||||
|
||||
position: absolute;
|
||||
right: $dropdownPadding;
|
||||
inset-inline-end: $dropdownPadding;
|
||||
top: 16px;
|
||||
font-size: 17px;
|
||||
transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
|
||||
transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
|
||||
// TODO: right now transition property doesn't support the bidirectional value.
|
||||
// See https://github.com/gasolin/postcss-bidirection/issues/25.
|
||||
// noinspection CssOverwrittenProperties Graceful degradation
|
||||
transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transition: left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.dropdown:hover & {
|
||||
right: $dropdownPadding - 5px;
|
||||
inset-inline-end: $dropdownPadding - 5px;
|
||||
}
|
||||
|
||||
.dropdown:active &,
|
||||
.dropdown.opened & {
|
||||
right: $dropdownPadding + 5px;
|
||||
inset-inline-end: $dropdownPadding + 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,7 +94,7 @@ $dropdownPadding: 15px;
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 10;
|
||||
|
||||
width: 120%;
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
composes: formRow;
|
||||
|
||||
.textField {
|
||||
padding-left: 60px;
|
||||
padding-inline-start: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
.textFieldIcon {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
.copyIcon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
inset-inline-end: 5px;
|
||||
top: 10px;
|
||||
|
||||
padding: 5px;
|
||||
@ -175,6 +175,7 @@
|
||||
font-family: $font-family-title;
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.fieldError {
|
||||
@ -248,7 +249,7 @@
|
||||
.markableContainer {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 27px;
|
||||
padding-inline-start: 27px;
|
||||
|
||||
font-family: $font-family-title;
|
||||
font-size: 16px;
|
||||
@ -260,7 +261,7 @@
|
||||
.markPosition {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
|
||||
|
||||
@ -15,10 +15,30 @@
|
||||
@extend .arrow;
|
||||
|
||||
transform: rotate(270deg);
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.arrowLeft {
|
||||
@extend .arrow;
|
||||
|
||||
transform: rotate(90deg);
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
html[dir='rtl'] {
|
||||
.brush,
|
||||
.exit,
|
||||
.key,
|
||||
.pencil,
|
||||
.search {
|
||||
&:before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.loader-overlay {
|
||||
direction: ltr;
|
||||
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@ -77,6 +77,7 @@ class SlideMotion extends React.PureComponent<Props, State> {
|
||||
<div
|
||||
className={styles.container}
|
||||
style={{
|
||||
// TODO: inverse for RTL language
|
||||
WebkitTransform: `translateX(-${interpolatingStyle.transform}%)`,
|
||||
transform: `translateX(-${interpolatingStyle.transform}%)`,
|
||||
}}
|
||||
|
||||
@ -25,12 +25,12 @@ $headerHeight: 60px;
|
||||
.headerControl {
|
||||
composes: black from '~app/components/ui/buttons.scss';
|
||||
|
||||
float: left;
|
||||
float: start;
|
||||
overflow: hidden;
|
||||
height: $headerHeight - 1px;
|
||||
width: 49px;
|
||||
padding: 0;
|
||||
border-right: 1px solid lighter($black);
|
||||
border-inline-end: 1px solid lighter($black);
|
||||
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
@ -122,7 +122,7 @@ $bodyTopBottomPadding: 15px;
|
||||
composes: close from '~app/components/ui/icons.scss';
|
||||
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
inset-inline-end: 5px;
|
||||
top: 5px;
|
||||
|
||||
font-size: 10px;
|
||||
|
||||
@ -59,7 +59,7 @@ $popupMargin: 20px; // Outer popup margins
|
||||
|
||||
.popup {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(#000, 0.2);
|
||||
@ -95,7 +95,7 @@ $popupMargin: 20px; // Outer popup margins
|
||||
composes: close from '~app/components/ui/icons.scss';
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
@ -122,6 +122,10 @@ $popupMargin: 20px; // Outer popup margins
|
||||
opacity: 0;
|
||||
transform: translate(100%);
|
||||
transition: 0s;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: translate(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
position: absolute;
|
||||
top: 0.16em;
|
||||
left: -0.145em;
|
||||
inset-inline-start: -0.145em;
|
||||
font-size: 0.7em;
|
||||
color: rgba($red, 0.75);
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
width: 100%;
|
||||
|
||||
height: 4px;
|
||||
@ -24,8 +24,8 @@
|
||||
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
right: 100%;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 100%;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
.activeStep {
|
||||
&:before {
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
transition-delay: unset;
|
||||
}
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ const AccountSwitcher: ComponentType<Props> = ({
|
||||
<div className={clsx(styles.accountSwitcher)} data-testid="account-switcher">
|
||||
<div className={styles.item} data-testid="active-account">
|
||||
<PseudoAvatar className={styles.activeAccountIcon} />
|
||||
<div className={styles.activeAccountInfo}>
|
||||
<div>
|
||||
<div className={styles.activeAccountUsername}>{activeAccount.username}</div>
|
||||
<div className={clsx(styles.accountEmail, styles.activeAccountEmail)}>{activeAccount.email}</div>
|
||||
<div className={styles.links}>
|
||||
@ -81,16 +81,16 @@ const AccountSwitcher: ComponentType<Props> = ({
|
||||
>
|
||||
<PseudoAvatar index={index + 1} deleted={account.isDeleted} className={styles.accountIcon} />
|
||||
|
||||
<div className={styles.accountInfo}>
|
||||
<div className={styles.accountUsername}>{account.username}</div>
|
||||
<div className={styles.accountEmail}>{account.email}</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.logoutIcon}
|
||||
data-testid="logout-account"
|
||||
onClick={onAccountRemoveCallback(account)}
|
||||
/>
|
||||
|
||||
<div className={styles.accountInfo}>
|
||||
<div className={styles.accountUsername}>{account.username}</div>
|
||||
<div className={styles.accountEmail}>{account.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<Link to="/login" onClick={onLoginClick}>
|
||||
|
||||
@ -8,8 +8,6 @@ $bodyLeftRightPadding: 20px;
|
||||
$lightBorderColor: #eee;
|
||||
|
||||
.accountSwitcher {
|
||||
text-align: left;
|
||||
|
||||
background: #fff;
|
||||
color: #444;
|
||||
min-width: 205px;
|
||||
@ -20,9 +18,6 @@ $lightBorderColor: #eee;
|
||||
border-bottom: 7px solid darker($green);
|
||||
}
|
||||
|
||||
.accountInfo {
|
||||
}
|
||||
|
||||
.accountUsername,
|
||||
.accountEmail {
|
||||
overflow: hidden;
|
||||
@ -30,6 +25,7 @@ $lightBorderColor: #eee;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid $lightBorderColor;
|
||||
}
|
||||
@ -50,8 +46,7 @@ $lightBorderColor: #eee;
|
||||
.accountIcon {
|
||||
font-size: 27px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-inline-end: 9px;
|
||||
}
|
||||
|
||||
.activeAccountIcon {
|
||||
@ -60,10 +55,6 @@ $lightBorderColor: #eee;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.activeAccountInfo {
|
||||
margin-left: 29px;
|
||||
}
|
||||
|
||||
.activeAccountUsername {
|
||||
font-family: $font-family-title;
|
||||
font-size: 20px;
|
||||
@ -88,8 +79,7 @@ $lightBorderColor: #eee;
|
||||
}
|
||||
|
||||
.accountInfo {
|
||||
margin-left: 29px;
|
||||
margin-right: 25px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.accountUsername {
|
||||
@ -117,15 +107,16 @@ $lightBorderColor: #eee;
|
||||
color: $green;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
.logoutIcon {
|
||||
composes: exit from '~app/components/ui/icons.scss';
|
||||
|
||||
align-self: center;
|
||||
margin-inline-start: 9px;
|
||||
|
||||
color: #cdcdcd;
|
||||
float: right;
|
||||
line-height: 27px;
|
||||
transition: 0.25s;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -27,6 +27,10 @@
|
||||
|
||||
.expandIcon {
|
||||
transform: rotate(-180deg);
|
||||
|
||||
html[dir='rtl'] & {
|
||||
transform: rotate(180deg); // Fix spin direction
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,13 +40,13 @@
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
|
||||
padding-right: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
.expandIcon {
|
||||
composes: caret from '~app/components/ui/icons.scss';
|
||||
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
font-size: 6px;
|
||||
color: #ccc;
|
||||
transition: 0.2s;
|
||||
@ -54,7 +58,7 @@
|
||||
.accountSwitcherContainer {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: -2px;
|
||||
inset-inline-end: -2px;
|
||||
cursor: auto;
|
||||
|
||||
display: none;
|
||||
|
||||
@ -26,7 +26,11 @@
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: white;
|
||||
animation: cubeRotate 1s ease-out infinite;
|
||||
animation: cubeRotateLTR 1s ease-out infinite;
|
||||
|
||||
html[dir='rtl'] & {
|
||||
animation-name: cubeRotateRTL;
|
||||
}
|
||||
}
|
||||
|
||||
.road {
|
||||
@ -34,12 +38,12 @@
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: white;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
animation: roadStab 1s ease-out infinite;
|
||||
}
|
||||
|
||||
@keyframes cubeRotate {
|
||||
@keyframes cubeRotateLTR {
|
||||
0% {
|
||||
transform: rotate(0deg) translate3D(0, 0, 0);
|
||||
}
|
||||
@ -54,6 +58,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cubeRotateRTL {
|
||||
0% {
|
||||
transform: rotate(0deg) translate3D(0, 0, 0);
|
||||
}
|
||||
65% {
|
||||
transform: rotate(-45deg) translate3D(0, -13px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: rotate(-70deg) translate3D(0, -8px, 0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-90deg) translate3D(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes roadStab {
|
||||
0% {
|
||||
transform: translate3D(0, 0, 0);
|
||||
@ -91,7 +110,7 @@
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
overflow: hidden;
|
||||
animation: roadStab 1s ease-out infinite;
|
||||
}
|
||||
@ -103,7 +122,7 @@
|
||||
border-right: 2px solid transparent;
|
||||
border-bottom: 4px solid white;
|
||||
bottom: $bottom;
|
||||
right: -2%;
|
||||
inset-inline-end: -2%;
|
||||
animation: rockTravelling 10s $delay ease-out infinite;
|
||||
}
|
||||
}
|
||||
@ -116,37 +135,37 @@
|
||||
|
||||
@keyframes rockTravelling {
|
||||
0% {
|
||||
right: -2%;
|
||||
inset-inline-end: -2%;
|
||||
}
|
||||
10% {
|
||||
right: 8%;
|
||||
inset-inline-end: 8%;
|
||||
}
|
||||
20% {
|
||||
right: 18%;
|
||||
inset-inline-end: 18%;
|
||||
}
|
||||
30% {
|
||||
right: 29%;
|
||||
inset-inline-end: 29%;
|
||||
}
|
||||
40% {
|
||||
right: 40%;
|
||||
inset-inline-end: 40%;
|
||||
}
|
||||
50% {
|
||||
right: 51%;
|
||||
inset-inline-end: 51%;
|
||||
}
|
||||
60% {
|
||||
right: 62%;
|
||||
inset-inline-end: 62%;
|
||||
}
|
||||
70% {
|
||||
right: 72%;
|
||||
inset-inline-end: 72%;
|
||||
}
|
||||
80% {
|
||||
right: 82%;
|
||||
inset-inline-end: 82%;
|
||||
}
|
||||
90% {
|
||||
right: 92%;
|
||||
inset-inline-end: 92%;
|
||||
}
|
||||
100% {
|
||||
right: 102%;
|
||||
inset-inline-end: 102%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,7 +177,7 @@
|
||||
animation: roadStab 1s ease-out infinite, cloudStab 1s ease-out infinite;
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: -50%;
|
||||
inset-inline-start: -50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -183,7 +202,7 @@
|
||||
composes: cloud;
|
||||
|
||||
top: 65px;
|
||||
right: -30%;
|
||||
inset-inline-end: -30%;
|
||||
width: 50px;
|
||||
height: 16px;
|
||||
animation: cloudTravelling 21s 5s linear infinite;
|
||||
@ -193,7 +212,7 @@
|
||||
composes: cloud;
|
||||
|
||||
top: 40px;
|
||||
right: -30%;
|
||||
inset-inline-end: -30%;
|
||||
width: 70px;
|
||||
height: 22px;
|
||||
animation: cloudTravelling 26s 11s linear infinite;
|
||||
@ -201,10 +220,10 @@
|
||||
|
||||
@keyframes cloudTravelling {
|
||||
0% {
|
||||
right: -30%;
|
||||
inset-inline-end: -30%;
|
||||
}
|
||||
100% {
|
||||
right: 110%;
|
||||
inset-inline-end: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -34,12 +34,10 @@ $sidebar-width: 320px;
|
||||
@media (min-width: 720px) {
|
||||
.content {
|
||||
padding: 55px 50px;
|
||||
margin-left: $sidebar-width;
|
||||
margin-inline-start: $sidebar-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
right: auto;
|
||||
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
inset-inline-start: 0; // TODO: does nothing. Maybe should be reimplemented?
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ $toolbarHeight: 50px;
|
||||
|
||||
.toolbarContent {
|
||||
composes: wrapper;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.siteName {
|
||||
@ -44,15 +44,11 @@ $toolbarHeight: 50px;
|
||||
|
||||
font-family: $font-family-title;
|
||||
font-size: 33px;
|
||||
color: #fff!important; // TODO: why?
|
||||
color: #fff!important; // Important to remove hover effect, which is inherited from the global <a> style
|
||||
}
|
||||
|
||||
.userBar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 115px;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.body {
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
.rulesList {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
.rulesItem {
|
||||
@ -71,7 +71,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -40px;
|
||||
inset-inline-start: -40px;
|
||||
width: calc(100% + 60px);
|
||||
height: calc(100% + 20px);
|
||||
background: $white;
|
||||
|
||||
@ -47,6 +47,7 @@ module.exports = ({ webpack: loader }) => ({
|
||||
return defaultLoad(filename, importOptions);
|
||||
})(require('postcss-import/lib/load-content')),
|
||||
},
|
||||
'postcss-bidirection': {},
|
||||
// TODO: for some reason cssnano strips out @mixin declarations
|
||||
// cssnano: {
|
||||
// /**
|
||||
|
||||
15
yarn.lock
15
yarn.lock
@ -12540,6 +12540,12 @@ posix-character-classes@^0.1.0:
|
||||
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
||||
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
|
||||
|
||||
"postcss-bidirection@https://github.com/erickskrauch/postcss-bidirection.git#iss_23":
|
||||
version "2.7.2"
|
||||
resolved "https://github.com/erickskrauch/postcss-bidirection.git#feabf42c8ab5cf6b0e22f78de04984e22cf42ba4"
|
||||
dependencies:
|
||||
postcss "^7.0.13"
|
||||
|
||||
postcss-calc@^7.0.1:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
|
||||
@ -12922,6 +12928,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2
|
||||
source-map "^0.6.1"
|
||||
supports-color "^6.1.0"
|
||||
|
||||
postcss@^7.0.13:
|
||||
version "7.0.35"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
|
||||
integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
|
||||
dependencies:
|
||||
chalk "^2.4.2"
|
||||
source-map "^0.6.1"
|
||||
supports-color "^6.1.0"
|
||||
|
||||
postcss@^7.0.26:
|
||||
version "7.0.26"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.26.tgz#5ed615cfcab35ba9bbb82414a4fa88ea10429587"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user