mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

RTL

Browse source
This commit is contained in:
Jamie Kyle 2023-04-20 10:03:43 -07:00 • committed by GitHub
parent 1f2cde6d04
commit 0e490542a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
196 changed files with 2117 additions and 1217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -16,6 +16,7 @@ release/
/sql/
/start.sh
.eslintcache
.stylelintcache
tsconfig.tsbuildinfo
.smartling-source.sh

40
.stylelintrc.js Normal file
View file

@ -0,0 +1,40 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
module.exports = {
extends: [
'stylelint-config-recommended-scss',
'stylelint-config-css-modules',
],
plugins: ['stylelint-use-logical-spec'],
rules: {
// Disabled from recommended set to get stylelint working initially
'block-no-empty': null,
'declaration-block-no-duplicate-properties': null,
'declaration-block-no-shorthand-property-overrides': null,
'font-family-no-missing-generic-family-keyword': null,
'no-duplicate-selectors': null,
'no-descending-specificity': null,
'selector-pseudo-element-no-unknown': null,
'scss/at-import-partial-extension': null,
'scss/comment-no-empty': null,
'scss/no-global-function-names': null,
'scss/operator-no-newline-after': null,
'scss/operator-no-unspaced': null,
'scss/function-no-unknown': null,
'unit-no-unknown': null,
// RTL
'liberty/use-logical-spec': [
'always',
{
except: [/\btop\b/, /\bbottom\b/, /\bwidth\b/, /\bheight\b/],
},
],
'declaration-property-value-disallowed-list': {
// Use dir="ltr/rtl" instead
direction: ['ltr', 'rtl', 'auto'],
transform: [/translate3d\(/, /translateX\(/, /translate\(/],
translate: [/./],
},
},
};

62
app/locale.ts
View file

@ -5,11 +5,17 @@ import { join } from 'path';
import { readFileSync } from 'fs';
import { merge } from 'lodash';
import * as LocaleMatcher from '@formatjs/intl-localematcher';
import { z } from 'zod';
import { setupI18n } from '../ts/util/setupI18n';
import type { LoggerType } from '../ts/types/Logging';
import type { LocaleMessagesType } from '../ts/types/I18N';
import type { LocalizerType } from '../ts/types/Util';
import * as Errors from '../ts/types/errors';
const TextInfoSchema = z.object({
direction: z.enum(['ltr', 'rtl']),
});
function getLocaleMessages(locale: string): LocaleMessagesType {
const targetFile = join(__dirname, '..', '_locales', locale, 'messages.json');
@ -17,25 +23,64 @@ function getLocaleMessages(locale: string): LocaleMessagesType {
return JSON.parse(readFileSync(targetFile, 'utf-8'));
}
export type LocaleDirection = 'ltr' | 'rtl';
export type LocaleType = {
i18n: LocalizerType;
name: string;
direction: LocaleDirection;
messages: LocaleMessagesType;
};
function getLocaleDirection(
localeName: string,
logger: LoggerType
): LocaleDirection {
const locale = new Intl.Locale(localeName);
// TC39 proposal is now `locale.getTextInfo()` but in browsers its currently
// `locale.textInfo`
try {
// @ts-expect-error -- TS doesn't know about this method
if (typeof locale.getTextInfo === 'function') {
return TextInfoSchema.parse(
// @ts-expect-error -- TS doesn't know about this method
locale.getTextInfo()
).direction;
}
// @ts-expect-error -- TS doesn't know about this property
if (typeof locale.textInfo === 'object') {
return TextInfoSchema.parse(
// @ts-expect-error -- TS doesn't know about this property
locale.textInfo
).direction;
}
} catch (error) {
logger.error(
'locale: Error getting text info for locale',
Errors.toLogFormat(error)
);
}
return 'ltr';
}
function finalize(
messages: LocaleMessagesType,
backupMessages: LocaleMessagesType,
localeName: string
localeName: string,
logger: LoggerType
) {
// We start with english, then overwrite that with anything present in locale
const finalMessages = merge(backupMessages, messages);
const i18n = setupI18n(localeName, finalMessages);
const direction = getLocaleDirection(localeName, logger);
logger.info(`locale: Text info direction for ${localeName}: ${direction}`);
return {
i18n,
name: localeName,
direction,
messages: finalMessages,
};
}
@ -45,17 +90,11 @@ export function load({
logger,
}: {
preferredSystemLocales: Array<string>;
logger: Pick<LoggerType, 'warn' | 'info'>;
logger: LoggerType;
}): LocaleType {
if (preferredSystemLocales == null) {
throw new TypeError('locale: `preferredSystemLocales` is required');
}
if (!logger.info) {
throw new TypeError('locale: `logger.info` is required');
}
if (!logger.warn) {
throw new TypeError('locale: `logger.warn` is required');
}
if (preferredSystemLocales.length === 0) {
logger.warn('locale: `preferredSystemLocales` was empty');
@ -83,5 +122,10 @@ export function load({
const matchedLocaleMessages = getLocaleMessages(matchedLocale);
const englishMessages = getLocaleMessages('en');
return finalize(matchedLocaleMessages, englishMessages, matchedLocale);
return finalize(
matchedLocaleMessages,
englishMessages,
matchedLocale,
logger
);
}

2
app/main.ts
View file

@ -177,6 +177,7 @@ const defaultWebPrefs = {
getEnvironment() !== Environment.Production ||
!isProduction(app.getVersion()),
spellcheck: false,
enableBlinkFeatures: 'CSSPseudoDir,CSSLogical',
};
const DISABLE_GPU =
@ -2259,6 +2260,7 @@ ipc.on('get-config', async event => {
const parsed = rendererConfigSchema.safeParse({
name: packageJson.productName,
resolvedTranslationsLocale: getResolvedMessagesLocale().name,
resolvedTranslationsLocaleDirection: getResolvedMessagesLocale().direction,
preferredSystemLocales: getPreferredSystemLocales(),
version: app.getVersion(),
buildCreation: config.get<number>('buildCreation'),

1
images/icons/v2/chevron-left-20.svg Normal file
View file

@ -0,0 +1 @@
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.7168 9.71191C1.7168 9.46289 1.812 9.25049 2.00244 9.06006L7.71533 3.47168C7.87646 3.31055 8.07422 3.22998 8.30859 3.22998C8.78467 3.22998 9.16553 3.59619 9.16553 4.07227C9.16553 4.30664 9.07031 4.51904 8.90918 4.6875L3.75293 9.71191L8.90918 14.7363C9.06299 14.8975 9.16553 15.1099 9.16553 15.3442C9.16553 15.8276 8.78467 16.1938 8.30859 16.1938C8.07422 16.1938 7.87646 16.1133 7.71533 15.9521L2.00244 10.3638C1.8047 10.1733 1.7168 9.96094 1.7168 9.71191Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 583 B

7
package.json
View file

@ -44,11 +44,12 @@
"test-node-coverage": "nyc --reporter=lcov --reporter=text mocha --recursive test/modules ts/test-node ts/test-both",
"test-lint-intl": "ts-node ./build/intl-linter/linter.ts --test",
"eslint": "eslint --cache . --cache-strategy content --max-warnings 0",
"lint": "run-s --print-label lint-prettier check:types eslint",
"lint": "run-s --print-label lint-prettier lint-css check:types eslint",
"lint-deps": "node ts/util/lint/linter.js",
"lint-license-comments": "ts-node ts/util/lint/license_comments.ts",
"lint-prettier": "pprettier --check '**/*.{ts,tsx,d.ts,js,json,html,scss,md,yml,yaml}' '!node_modules/**'",
"lint-intl": "ts-node ./build/intl-linter/linter.ts",
"lint-css": "stylelint '**/*.scss' --cache",
"danger:local": "./danger/danger.sh local --base main",
"danger:ci": "./danger/danger.sh ci --base origin/main",
"format": "pprettier --write '**/*.{ts,tsx,d.ts,js,json,html,scss,md,yml,yaml}' '!node_modules/**'",
@ -285,6 +286,10 @@
"sass-loader": "10.2.0",
"sinon": "11.1.1",
"style-loader": "1.0.0",
"stylelint": "15.4.0",
"stylelint-config-css-modules": "4.2.0",
"stylelint-config-recommended-scss": "10.0.0",
"stylelint-use-logical-spec": "5.0.0",
"svgo": "3.0.2",
"terser-webpack-plugin": "5.1.1",
"ts-loader": "4.1.0",

2
settings.html
View file

@ -1,7 +1,7 @@
<!-- Copyright 2021 Signal Messenger, LLC -->
<!-- SPDX-License-Identifier: AGPL-3.0-only -->
<html>
<html dir="auto">
<head>
<meta
http-equiv="Content-Security-Policy"

11
sticker-creator/src/components/ArtFrame.module.scss
View file

@ -124,7 +124,7 @@ $emoji-height: 64px;
width: $width - (2 * $guide-offset);
height: $height - (2 * $guide-offset);
position: absolute;
left: $guide-offset - $border-width;
inset-inline-start: $guide-offset - $border-width;
top: $guide-offset - $border-width;
pointer-events: none;
@ -132,7 +132,7 @@ $emoji-height: 64px;
width: $emoji-width;
height: $emoji-height;
position: absolute;
left: calc(($width - $emoji-width) / 2);
inset-inline-start: calc(($width - $emoji-width) / 2);
top: calc(($height - $emoji-height) / 2);
}
}
@ -140,7 +140,7 @@ $emoji-height: 64px;
.close-button {
position: absolute;
top: 8px;
right: 8px;
inset-inline-end: 8px;
width: 20px;
height: 20px;
@ -169,7 +169,7 @@ $emoji-height: 64px;
height: 32px;
position: absolute;
top: 6px;
right: 6px;
inset-inline-end: 6px;
border: none;
border-radius: 16px;
padding: 0;
@ -202,7 +202,8 @@ $emoji-height: 64px;
.emoji-name-input {
width: 100%;
padding: 7px 8px;
padding-block: 7px;
padding-inline: 8px;
border-radius: 4px;
background-color: transparent;
font-size: 14px;

9
sticker-creator/src/components/ArtPackPreview.module.scss
View file

@ -30,7 +30,8 @@
.title-bar {
height: 36px;
padding: 9px 16px;
padding-block: 9px;
padding-inline: 16px;
display: flex;
flex-direction: row;
align-items: center;
@ -61,7 +62,8 @@
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 16px 0 12px;
padding-block: 0;
padding-inline: 12px 16px;
overflow: auto;
justify-items: center;
@ -76,7 +78,8 @@
}
.meta {
padding: 18px 16px;
padding-block: 18px;
padding-inline: 16px;
display: flex;
@include light-theme {

2
sticker-creator/src/components/ConfirmModal.module.scss
View file

@ -9,6 +9,6 @@
justify-content: center;
align-items: center;
position: fixed;
left: 0;
inset-inline-start: 0;
top: 0;
}

6
sticker-creator/src/elements/Button.module.scss
View file

@ -9,7 +9,8 @@
border: none;
min-width: 80px;
height: 36px;
padding: 0 25px;
padding-block: 0;
padding-inline: 25px;
border-radius: 4px;
display: flex;
justify-content: center;
@ -89,7 +90,8 @@
composes: base;
height: 28px;
border-radius: 15px;
padding: 0 17px;
padding-block: 0;
padding-inline: 17px;
@include light-theme() {
color: $color-gray-90;

6
sticker-creator/src/elements/ConfirmDialog.module.scss
View file

@ -9,7 +9,8 @@
max-width: 468px;
width: 100%;
height: 138px;
padding: 16px 16px 8px 16px;
padding-block: 16px 8px;
padding-inline: 16px;
display: flex;
flex-direction: column;
border-radius: 8px;
@ -70,7 +71,8 @@
composes: base;
height: 28px;
border-radius: 15px;
padding: 0 17px;
padding-block: 0;
padding-inline: 17px;
@include light-theme() {
color: $color-gray-90;

3
sticker-creator/src/elements/CopyText.module.scss
View file

@ -19,7 +19,8 @@
flex-grow: 1;
height: 36px;
line-height: 34px;
padding: 0 12px;
padding-block: 0;
padding-inline: 12px;
border-radius: 4px;
background-color: transparent;
font-size: 14px;

3
sticker-creator/src/elements/DropZone.module.scss
View file

@ -24,7 +24,8 @@
}
.text {
margin: 16px 0 0 0;
margin-block: 16px 0;
margin-inline: 0;
font-family: $inter;
font-size: 14px;
font-weight: normal;

2
sticker-creator/src/elements/LabeledCheckbox.module.scss
View file

@ -54,7 +54,7 @@
}
.label {
margin-left: 11px;
margin-inline-start: 11px;
position: relative;
user-select: none;
}

6
sticker-creator/src/elements/LabeledInput.module.scss
View file

@ -25,7 +25,8 @@
width: 100%;
height: 34px;
line-height: 34px;
padding: 0 12px;
padding-block: 0;
padding-inline: 12px;
border-radius: 4px;
background-color: transparent;
font-size: 14px;
@ -47,7 +48,8 @@
&:focus {
outline: none;
padding: 0 11px;
padding-block: 0;
padding-inline: 11px;
@include light-theme() {
border: 2px solid $color-ultramarine;

3
sticker-creator/src/elements/MessageBubble.module.scss
View file

@ -6,7 +6,8 @@
.base {
background-color: $color-ultramarine;
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
border-radius: 18px;
color: $color-white-alpha-90;
font: {

2
sticker-creator/src/elements/MessageMeta.module.scss
View file

@ -13,7 +13,7 @@
}
.item {
margin-left: 6px;
margin-inline-start: 6px;
font: {
size: 11px;
family: $inter;

3
sticker-creator/src/elements/MessageSticker.module.scss
View file

@ -2,7 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
.base {
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
}
.image {

11
sticker-creator/src/elements/PageHeader.module.scss
View file

@ -12,9 +12,11 @@
margin-bottom: 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
padding: 0 64px;
padding-block: 0;
padding-inline: 64px;
@include small-screen() {
padding: 0 32px;
padding-block: 0;
padding-inline: 32px;
}
display: flex;
flex-direction: row;
@ -32,11 +34,12 @@
.guidelines {
text-decoration: none;
padding: 12px 16px;
padding-block: 12px;
padding-inline: 16px;
}
.icon {
margin-right: 8px;
margin-inline-end: 8px;
}
.grow {

7
sticker-creator/src/elements/StickerPreview.module.scss
View file

@ -24,7 +24,8 @@
.frame {
width: 50%;
padding: 12px 12px 3px 12px;
padding-block: 12px 3px;
padding-inline: 12px;
}
.frame-light {
@ -77,7 +78,7 @@
.arrow-left {
composes: arrow;
border-width: 8px 8px 8px 0;
left: -8px;
inset-inline-start: -8px;
@include light-theme() {
border-color: transparent $color-white transparent transparent;
@ -91,7 +92,7 @@
.arrow-right {
composes: arrow;
border-width: 8px 0 8px 8px;
right: -8px;
inset-inline-end: -8px;
@include light-theme() {
border-color: transparent transparent transparent $color-white;

3
sticker-creator/src/elements/Toast.module.scss
View file

@ -6,7 +6,8 @@
@import '../fonts.scss';
.base {
padding: 8px 12px;
padding-block: 8px;
padding-inline: 12px;
border-radius: 4px;
border: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);

3
sticker-creator/src/index.scss
View file

@ -46,7 +46,8 @@ button.grey {
border-radius: 5px;
border: solid 1px $color-gray-25;
cursor: pointer;
margin: 1em auto;
margin-block: 1em;
margin-inline: auto;
padding: 1em;
font-family: inherit;

25
sticker-creator/src/routes/art/AppStage.module.scss
View file

@ -31,10 +31,12 @@
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 0 64px;
padding-block: 0;
padding-inline: 64px;
@include small-screen() {
padding: 0 32px;
padding-block: 0;
padding-inline: 32px;
}
}
@ -47,13 +49,15 @@
}
.footer {
margin: 16px 64px;
margin-block: 16px;
margin-inline: 64px;
display: flex;
flex-direction: row;
align-items: center;
@include small-screen() {
margin: 16px 32px;
margin-block: 16px;
margin-inline: 32px;
}
}
@ -64,12 +68,19 @@
}
.button {
margin-left: 12px;
margin-inline-start: 12px;
}
.toaster {
position: fixed;
bottom: 16px;
left: 50%;
transform: translate(-50%, 0px);
inset-inline-start: 50%;
&:dir(ltr) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translate(-50%, 0px);
}
&:dir(rtl) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translate(50%, 0px)
}
}

4
sticker-creator/src/routes/art/MetaStage.module.scss
View file

@ -90,7 +90,7 @@
.edit-button {
position: absolute;
top: 6px;
right: 6px;
inset-inline-end: 6px;
content: '';
width: 32px;
height: 32px;
@ -111,7 +111,7 @@
width: 24px;
height: 24px;
top: 5px;
left: 5px;
inset-inline-start: 5px;
mask-image: url(/src/assets/icons/compose-outline-24.svg);
mask-size: 22px;
-webkit-mask-image: url(/src/assets/icons/compose-outline-24.svg);

3
sticker-creator/src/routes/art/UploadStage.module.scss
View file

@ -27,5 +27,6 @@
}
.progress {
margin: 24px 0;
margin-block: 24px;
margin-inline: 0;
}

34
stylesheets/_conversation.scss
View file

@ -3,12 +3,26 @@
@import './mixins';
@keyframes panel--in {
@keyframes panel--in--ltr {
from {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(500px);
}
to {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(0);
}
}
@keyframes panel--in--rtl {
from {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(-500px);
}
to {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(0);
}
}
@ -24,7 +38,7 @@
.panel {
height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
left: 0;
inset-inline-start: 0;
overflow-y: overlay;
position: absolute;
top: calc(#{$header-height} + var(--title-bar-drag-area-height));
@ -42,7 +56,12 @@
.panel {
&:not(.main) {
animation: panel--in 350ms cubic-bezier(0.17, 0.17, 0, 1);
&:dir(ltr) {
animation: panel--in--ltr 350ms cubic-bezier(0.17, 0.17, 0, 1);
}
&:dir(rtl) {
animation: panel--in--rtl 350ms cubic-bezier(0.17, 0.17, 0, 1);
}
}
&--static {
@ -50,7 +69,14 @@
}
&--remove {
transform: translateX(100%);
&:dir(ltr) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(100%);
}
&:dir(rtl) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(-100%);
}
transition: transform 350ms cubic-bezier(0.17, 0.17, 0, 1);
}
}

6
stylesheets/_emoji.scss
View file

@ -21,7 +21,8 @@ span.emoji {
span.emoji-sizer {
line-height: 0.81em;
font-size: 1em;
margin: -2px 0;
margin-block: -2px;
margin-inline: 0;
}
span.emoji-outer {
@ -46,8 +47,7 @@ span.emoji-inner {
img.emoji {
height: 1.4em;
margin-bottom: -5px;
margin-left: 2px;
margin-right: 2px;
margin-inline: 2px;
vertical-align: baseline;
width: 1.4em;
}

78
stylesheets/_global.scss
View file

@ -81,8 +81,7 @@ audio {
.dark-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
inset-inline: 0;
bottom: 0;
opacity: 0.25;
@ -117,7 +116,8 @@ button.grey {
border-radius: 5px;
border: solid 1px $color-gray-25;
cursor: pointer;
margin: 1em auto;
margin-block: 1em;
margin-inline: auto;
padding: 1em;
font-family: inherit;
@ -174,7 +174,8 @@ $loading-height: 16px;
position: relative;
&::before {
display: block;
margin: 0px auto;
margin-block: 0px;
margin-inline: auto;
content: ' ';
height: $loading-height;
width: $loading-height;
@ -189,7 +190,7 @@ $loading-height: 16px;
.x {
display: inline-block;
float: right;
float: inline-end;
cursor: pointer;
border-radius: 50%;
width: 22px;
@ -233,11 +234,11 @@ $loading-height: 16px;
.app-loading-screen {
z-index: $z-index-on-top-of-everything;
position: absolute;
left: 0;
right: 0;
inset-inline: 0;
top: 0;
bottom: 0;
padding: 0 16px;
padding-block: 0;
padding-inline: 16px;
&--without-titlebar {
/* There is no titlebar during loading screen on Windows */
@ -263,15 +264,17 @@ $loading-height: 16px;
.container {
display: flex;
gap: 7px;
margin: 6px 0 22px 0;
margin-block: 6px 22px;
margin-inline: 0;
.dot {
width: 14px;
height: 14px;
border: 3px solid $color-white;
border-radius: 50%;
float: left;
margin: 0 6px;
float: inline-start;
margin-block: 0;
margin-inline: 6px;
transform: scale(0);
animation: loading 1500ms ease infinite 0ms;
@ -294,7 +297,8 @@ $loading-height: 16px;
max-width: 400px;
overflow: hidden;
width: 100%;
margin: 12px 0 26px 0;
margin-block: 12px 26px;
margin-inline: 0;
}
&--bar {
@ -303,7 +307,14 @@ $loading-height: 16px;
display: block;
height: 100%;
width: 100%;
transform: translateX(-100%);
&:dir(ltr) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(-100%);
}
&:dir(rtl) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(100%);
}
transition: transform 500ms linear;
}
}
@ -318,8 +329,7 @@ $loading-height: 16px;
.full-screen-flow {
position: absolute;
left: 0;
right: 0;
inset-inline: 0;
top: 0;
bottom: 0;
@ -376,15 +386,13 @@ $loading-height: 16px;
.body-text {
max-width: 22em;
text-align: left;
margin-left: auto;
margin-right: auto;
text-align: start;
margin-inline: auto;
}
.body-text-wide {
max-width: 30em;
text-align: left;
margin-left: auto;
margin-right: auto;
text-align: start;
margin-inline: auto;
}
form {
@ -394,11 +402,11 @@ $loading-height: 16px;
.step {
height: 100%;
width: 100%;
padding: 70px 0 50px;
padding-block: 70px 50px;
padding-inline: 0;
}
.step-body {
margin-left: auto;
margin-right: auto;
margin-inline: auto;
max-width: 35em;
}
@ -493,8 +501,7 @@ $loading-height: 16px;
min-width: 300px;
padding: 0.75em;
margin-top: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
margin-inline: 0.5em;
color: $color-white;
background: $color-ultramarine;
box-shadow: 2px 2px 4px $color-black-alpha-40;
@ -523,7 +530,8 @@ $loading-height: 16px;
@include button-reset;
display: block;
margin: 0.5em auto;
margin-block: 0.5em;
margin-inline: auto;
text-align: center;
text-decoration: underline;
color: $color-ultramarine;
@ -567,13 +575,11 @@ $loading-height: 16px;
bottom: 50px;
margin-top: auto;
padding-bottom: 2em;
padding-left: 20px;
padding-right: 20px;
padding-inline: 20px;
.instructions {
text-align: left;
margin-left: auto;
margin-right: auto;
text-align: start;
margin-inline: auto;
margin-bottom: 2em;
margin-top: 2em;
max-width: 30em;
@ -582,16 +588,16 @@ $loading-height: 16px;
clear: both;
}
.android {
float: left;
float: inline-start;
}
.apple {
float: right;
float: inline-end;
}
.label {
float: left;
float: inline-start;
}
.body {
float: left;
float: inline-start;
}
}
}

98
stylesheets/_mixins.scss
View file

@ -189,8 +189,68 @@
// Icons
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return (
str-slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
)
);
}
@return $string;
}
$rtl-icon-map: (
'chevron-left-16.svg': 'chevron-right-16.svg',
'chevron-right-16.svg': 'chevron-left-16.svg',
'chevron-left-20.svg': 'chevron-right-20.svg',
'chevron-right-20.svg': 'chevron-left-20.svg',
'chevron-left-24.svg': 'chevron-right-24.svg',
'chevron-right-24.svg': 'chevron-left-24.svg',
'arrow-left-32.svg': 'arrow-right-32.svg',
'arrow-right-32.svg': 'arrow-left-32.svg',
// Ignored cases:
'phone-right-outline-24.svg': '',
'phone-right-solid-24.svg': '',
);
@function get-rtl-svg($svg) {
@each $ltr, $rtl in $rtl-icon-map {
@if str-index($svg, $ltr) {
@if $rtl == '' {
@return $ltr;
}
@return str-replace($svg, $ltr, $rtl);
}
}
@if str-index($svg, 'left') or str-index($svg, 'right') {
@error "Missing RTL icon for #{$svg}";
}
@return false;
}
@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
-webkit-mask: url($svg) no-repeat center;
$rtl-svg: get-rtl-svg($svg);
@if $rtl-svg {
:dir(ltr) & {
-webkit-mask: url($svg) no-repeat center;
}
:dir(rtl) & {
-webkit-mask: url($rtl-svg) no-repeat center;
}
} @else {
-webkit-mask: url($svg) no-repeat center;
}
@if $stretch {
-webkit-mask-size: 100%;
}
@ -260,7 +320,7 @@
position: absolute;
top: 8px;
right: 8px;
inset-inline-end: 8px;
width: 18px;
height: 18px;
z-index: $z-index-above-base;
@ -514,7 +574,8 @@
@mixin button-small {
@include rounded-corners;
padding: 7px 14px;
padding-block: 7px;
padding-inline: 14px;
}
// Modals
@ -522,7 +583,8 @@
@mixin modal-reset {
@include popper-shadow();
border-radius: 8px;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
max-height: 100%;
max-width: 360px;
padding: 16px;
@ -546,7 +608,7 @@
@include button-reset;
position: absolute;
right: 12px;
inset-inline-end: 12px;
top: 12px;
height: 24px;
@ -646,7 +708,8 @@
@mixin normal-input {
@include font-body-1;
padding: 8px 12px;
padding-block: 8px;
padding-inline: 12px;
border-radius: 6px;
border-width: 2px;
border-style: solid;
@ -752,3 +815,26 @@
@content;
}
}
@mixin position-absolute-center {
position: absolute;
top: 50%;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 50%;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translate(-50%, -50%);
}
@mixin position-absolute-center-x {
position: absolute;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 50%;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(-50%);
}
@mixin position-absolute-center-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

844
stylesheets/_modules.scss
View file

File diff suppressed because it is too large Load diff

2
stylesheets/_options.scss
View file

@ -18,7 +18,7 @@
}
.intl-tel-input .country-list {
text-align: left;
text-align: start;
}
.intl-tel-input .country-list .country .country-name {

2
stylesheets/components/AddGroupMembersModal.scss
View file

@ -20,7 +20,7 @@
.module-Button {
&:not(:first-child) {
margin-left: 12px;
margin-inline-start: 12px;
}
}
}

3
stylesheets/components/AddUserToAnotherGroupModal.scss
View file

@ -18,6 +18,7 @@
&__item,
&__item--contact-or-conversation {
height: 52px;
padding: 0 6px;
padding-block: 0;
padding-inline: 6px;
}
}

5
stylesheets/components/AudioCapture.scss
View file

@ -102,7 +102,8 @@
color: $color-gray-60;
font-variant: tabular-nums;
line-height: 36px;
margin: 0 15px;
margin-block: 0;
margin-inline: 15px;
@keyframes pulse {
0% {
@ -123,7 +124,7 @@
width: 10px;
height: 10px;
background: $color-accent-red;
margin-right: 10px;
margin-inline-end: 10px;
opacity: 0;
animation: pulse 2s infinite;
}

4
stylesheets/components/Avatar.scss
View file

@ -52,7 +52,7 @@
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
@ -121,7 +121,7 @@
// Positioning should be overridden by JavaScript. These are set defensively.
bottom: 0;
right: 0;
inset-inline-end: 0;
&--static {
pointer-events: none;

6
stylesheets/components/AvatarEditor.scss
View file

@ -15,10 +15,12 @@
font-size: 9px;
justify-content: center;
line-height: 14px;
margin: 0 8px;
margin-block: 0;
margin-inline: 8px;
min-height: 44px;
min-width: 60px;
padding: 0 8px;
padding-block: 0;
padding-inline: 8px;
@include light-theme {
background-color: $color-gray-05;

4
stylesheets/components/AvatarModalButtons.scss
View file

@ -4,9 +4,9 @@
.AvatarModalButtons {
bottom: 0;
position: absolute;
right: 0;
inset-inline-end: 0;
.module-Button {
margin-left: 12px;
margin-inline-start: 12px;
}
}

4
stylesheets/components/AvatarPreview.scss
View file

@ -59,7 +59,7 @@
height: 28px;
justify-content: center;
position: absolute;
right: -7px;
inset-inline-end: -7px;
width: 28px;
&::after {
@ -84,7 +84,7 @@
height: 24px;
justify-content: center;
position: absolute;
right: 0;
inset-inline-end: 0;
top: 0;
width: 24px;

2
stylesheets/components/AvatarTextEditor.scss
View file

@ -15,7 +15,7 @@
}
&__measure {
left: -9999;
inset-inline-start: -9999;
position: fixed;
text-transform: uppercase;
top: -9999;

6
stylesheets/components/BadgeDialog.scss
View file

@ -27,7 +27,8 @@
border-radius: 4px;
display: flex;
justify-content: center;
padding: 3px 0;
padding-block: 3px;
padding-inline: 0;
&[disabled] {
visibility: hidden;
@ -93,7 +94,8 @@
&__main {
flex-grow: 1;
text-align: center;
padding: 24px 10px;
padding-block: 24px;
padding-inline: 10px;
}
&__name {

3
stylesheets/components/BadgeSustainerInstructionsDialog.scss
View file

@ -29,7 +29,8 @@
content: '';
display: block;
height: 160px;
margin: 24px auto;
margin-block: 24px;
margin-inline: auto;
width: 146px;
@include light-theme {

2
stylesheets/components/BetterAvatarBubble.scss
View file

@ -69,7 +69,7 @@
justify-content: center;
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
width: 20px;
&:after {

12
stylesheets/components/Button.scss
View file

@ -23,7 +23,8 @@
@include button-reset;
border-radius: 4px;
padding: 8px 16px;
padding-block: 8px;
padding-inline: 16px;
text-align: center;
user-select: none;
@ -51,7 +52,8 @@
&--small {
@include font-body-2;
@include rounded-corners;
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
}
&--primary {
@ -170,10 +172,8 @@
@include rounded-corners;
&.module-Button--small {
padding: {
top: 5px;
bottom: 5px;
}
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
}

17
stylesheets/components/CallingButton.scss
View file

@ -17,8 +17,7 @@
justify-content: center;
outline: none;
width: 52px;
margin-left: 6px;
margin-right: 6px;
margin-inline: 6px;
@mixin calling-button-icon($icon, $background-color, $icon-color) {
background-color: $background-color;
@ -120,15 +119,16 @@
&--shown {
background-color: $color-gray-75;
border-radius: 16px;
padding: 6px 8px;
padding-block: 6px;
padding-inline: 8px;
padding-bottom: 2px;
margin-top: -6px;
margin-right: -8px;
margin-inline-end: -8px;
}
&--count {
@include font-body-2-bold;
margin-left: 5px;
margin-inline-start: 5px;
vertical-align: top;
}
}
@ -156,17 +156,16 @@
&__container {
display: inline-flex;
flex-direction: column;
margin-left: 6px;
margin-right: 6px;
margin-inline: 6px;
max-width: 64px;
transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
transition: margin-inline-start 0.3s ease-out, opacity 0.3s ease-out;
@media (prefers-reduced-motion) {
transition: none;
}
&--hidden {
margin-left: -100px;
margin-inline-start: -100px;
opacity: 0;
pointer-events: none;

7
stylesheets/components/CallingScreenSharingController.scss
View file

@ -5,7 +5,8 @@
align-items: center;
display: flex;
justify-content: space-between;
padding: 4px 16px;
padding-block: 4px;
padding-inline: 16px;
-webkit-app-region: drag;
&__text {
@ -25,7 +26,7 @@
&__buttons {
align-items: center;
display: flex;
margin-left: 6px;
margin-inline-start: 6px;
-webkit-app-region: no-drag;
}
@ -33,7 +34,7 @@
@include button-reset;
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
cursor: pointer;
margin-left: 12px;
margin-inline-start: 12px;
height: 20px;
width: 20px;
}

2
stylesheets/components/CallingSelectPresentingSourcesModal.scss
View file

@ -71,7 +71,7 @@
}
&--icon {
margin-right: 8px;
margin-inline-end: 8px;
}
}
}

6
stylesheets/components/ChatColorPicker.scss
View file

@ -6,7 +6,8 @@
&__container {
max-width: 748px;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
hr {
@include light-theme {
@ -25,7 +26,8 @@
grid-gap: 24px;
grid-template-columns: repeat(auto-fit, $bubble-size);
justify-content: center;
margin: 20px 0;
margin-block: 20px;
margin-inline: 0;
}
&__bubble {

2
stylesheets/components/Checkbox.scss
View file

@ -14,7 +14,7 @@
&__checkbox {
height: 18px;
margin-right: 20px;
margin-inline-end: 20px;
width: 18px;
}

6
stylesheets/components/CircleCheckbox.scss
View file

@ -89,7 +89,7 @@
border: solid $color-white;
border-width: 0 2px 2px 0;
height: 11px;
left: 7px;
inset-inline-start: 7px;
top: 3px;
transform: rotate(45deg);
width: 6px;
@ -106,7 +106,7 @@
&::after {
background: $color-ultramarine;
top: 4px;
left: 4px;
inset-inline-start: 4px;
width: 12px;
height: 12px;
border-radius: 6px;
@ -136,6 +136,7 @@
border: solid $color-white;
border-width: 0 2px 2px 0;
height: 10px;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 7px;
top: 3px;
transform: rotate(45deg);
@ -153,6 +154,7 @@
&::after {
background: $color-ultramarine;
top: 4px;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 4px;
width: 10px;
height: 10px;

30
stylesheets/components/CompositionArea.scss
View file

@ -4,13 +4,12 @@
.CompositionArea {
position: relative;
min-height: 42px;
padding: 10px 0 10px 0;
padding-block: 10px;
padding-inline: 0;
&__placeholder {
flex-grow: 1;
margin: {
bottom: 6px;
}
margin-bottom: 6px;
}
&__row {
@ -22,7 +21,8 @@
justify-content: center;
}
&--padded {
padding: 0 12px;
padding-block: 0;
padding-inline: 12px;
}
&--control-row {
margin-top: 12px;
@ -34,7 +34,8 @@
}
&__button-cell {
margin: 0 6px;
margin-block: 0;
margin-inline: 6px;
display: flex;
justify-content: center;
align-items: center;
@ -42,11 +43,11 @@
flex-shrink: 0;
&:first-child {
margin-left: 12px;
margin-inline-start: 12px;
}
&:last-child {
margin-right: 12px;
margin-inline-end: 12px;
}
}
@ -73,7 +74,7 @@
}
&--accept {
background-color: $color-ultramarine;
margin-left: 16px;
margin-inline-start: 16px;
&::before {
@include color-svg('../images/icons/v3/check.svg', $color-white);
}
@ -99,8 +100,9 @@
}
&__input {
flex-grow: 1;
margin: 0 6px;
position: relative;
margin-block: 0;
margin-inline: 6px;
&--large {
margin: 0;
@ -114,7 +116,7 @@
width: $width;
height: $height;
position: absolute;
left: calc(50% - $width / 2);
inset-inline-start: calc(50% - $width / 2);
// 6px coming from padding-top of .module-composition-input__input__scroller
top: calc(0px - $height / 2 - 6px);
@ -187,7 +189,8 @@
align-items: center;
// Note the margin in &__placeholder above
padding: 14px 16px 18px 16px;
padding-block: 14px 18px;
padding-inline: 16px;
&:not(.module-composition-area--pending) {
@include light-theme {
@ -200,7 +203,8 @@
&__title {
@include font-body-2-bold;
margin: 0 0 2px 0;
margin-block: 0 2px;
margin-inline: 0;
@include light-theme {
color: $color-gray-60;

41
stylesheets/components/CompositionInput.scss
View file

@ -4,7 +4,7 @@
.module-composition-input {
&__quill {
height: 100%;
padding-left: 12px;
padding-inline-start: 12px;
.ql-editor {
caret-color: transparent;
@ -18,8 +18,7 @@
}
&.ql-blank::before {
left: 0;
right: 0;
inset-inline: 0;
font-style: normal;
}
@ -35,8 +34,7 @@
background-color: $color-gray-20;
border-radius: 4px;
display: inline;
padding-left: 4px;
padding-right: 4px;
padding-inline: 4px;
height: 22px;
line-height: 22px;
@ -81,7 +79,8 @@
&__scroller {
$padding-top: 6px;
padding: $padding-top 0;
padding-block: $padding-top;
padding-inline: 0;
min-height: calc(32px - 2 * $border-size);
max-height: calc(72px - 2 * $border-size);
@ -121,7 +120,8 @@
}
&__format-menu {
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
border-radius: 8px;
z-index: $z-index-above-popup;
@ -145,9 +145,9 @@
width: 24px;
border-radius: 4px;
margin-right: 8px;
margin-inline-end: 8px;
&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
@include mouse-mode {
@ -282,7 +282,8 @@
&__row {
height: 34px;
padding: 0 12px;
padding-block: 0;
padding-inline: 12px;
display: flex;
flex-direction: row;
align-items: center;
@ -310,7 +311,7 @@
}
&__short-name {
margin-left: 4px;
margin-inline-start: 4px;
}
&--selected,
@ -328,7 +329,7 @@
}
&__title {
padding-left: 8px;
padding-inline-start: 8px;
}
stroke: $color-white;
@ -343,7 +344,8 @@
content: '';
display: inline-block;
height: 16px;
margin: 0 8px 0 10px;
margin-block: 0;
margin-inline: 10px 8px;
width: 16px;
vertical-align: middle;
@ -357,7 +359,7 @@
&__attachment img {
height: 18px;
position: absolute;
right: 8px;
inset-inline-end: 8px;
top: 8px;
width: 18px;
}
@ -380,19 +382,18 @@ div.CompositionInput__link-preview {
&__icon-container {
align-items: center;
display: flex;
margin-left: 8px;
margin-right: 0;
margin-inline: 8px 0;
}
&__content {
margin-right: 0;
margin-inline-end: 0;
padding-bottom: 8px;
padding-left: 12px;
padding-inline-start: 12px;
padding-top: 8px;
}
&__no-image {
margin-right: 0;
margin-inline-end: 0;
min-width: 74px;
}
}
@ -406,7 +407,7 @@ button.CompositionInput__link-preview__close-button {
display: flex;
height: 20px;
justify-content: center;
right: 6px;
inset-inline-end: 6px;
top: 6px;
width: 20px;

8
stylesheets/components/CompositionRecording.scss
View file

@ -5,7 +5,8 @@
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
padding-block: 10px;
padding-inline: 18px;
&__wave {
display: flex;
@ -14,7 +15,8 @@
flex: 1;
border-radius: 16px;
height: 32px;
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
@include light-theme {
background: $color-gray-05;
@ -37,6 +39,6 @@
&__timer {
min-width: 40px;
text-align: right;
text-align: end;
}
}

3
stylesheets/components/CompositionRecordingDraft.scss
View file

@ -5,7 +5,8 @@
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
padding-block: 10px;
padding-inline: 18px;
&__sizer {
// ignore the content size

9
stylesheets/components/CompositionTextArea.scss
View file

@ -35,13 +35,13 @@
min-height: 300px;
padding: 16px;
// Need more padding on the right to make room for floating emoji button
padding-right: 36px;
padding-inline-end: 36px;
}
}
&__emoji {
position: absolute;
right: 8px;
inset-inline-end: 8px;
top: 8px;
button::after {
@ -54,8 +54,9 @@
color: $color-gray-45;
position: absolute;
bottom: 0;
left: 0;
padding: 12px 12px 12px 24px;
inset-inline-start: 0;
padding-block: 12px;
padding-inline: 24px 12px;
}
// remove background, should be seamless with modal

9
stylesheets/components/ContactModal.scss
View file

@ -33,7 +33,8 @@
display: flex;
align-items: center;
padding: 7px 16px;
padding-block: 7px;
padding-inline: 16px;
width: 100%;
&:last-child {
@ -63,7 +64,7 @@
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
margin-inline-end: 10px;
width: 20px;
}
@ -148,7 +149,7 @@
background: url('../images/icons/v2/official-20.svg') no-repeat center;
display: inline-block;
height: 18px;
margin-left: 4px;
margin-inline-start: 4px;
margin-bottom: -3px;
width: 18px;
}
@ -157,7 +158,7 @@
background: url('../images/icons/v2/official-20.svg') no-repeat center;
display: inline-block;
height: 18px;
margin-left: 9px;
margin-inline-start: 9px;
margin-bottom: -2px;
width: 18px;
scale: 1.3;

6
stylesheets/components/ContactPill.scss
View file

@ -19,7 +19,8 @@
&__contact-name {
@include font-body-2;
padding: 0 6px;
padding-block: 0;
padding-inline: 6px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -34,7 +35,8 @@
width: 28px;
justify-content: center;
align-items: center;
padding: 0 6px 0 4px;
padding-block: 0;
padding-inline: 4px 6px;
&::before {
content: '';

3
stylesheets/components/ContactPills.scss
View file

@ -10,7 +10,8 @@
max-height: 88px;
overflow-x: hidden;
overflow-y: scroll;
padding: 4px 24px;
padding-block: 4px;
padding-inline: 24px;
gap: 8px 12px;
.module-ContactPill {

5
stylesheets/components/ContactSpoofingReviewDialog.scss
View file

@ -23,7 +23,8 @@
hr {
border: 0;
height: 1px;
margin: 16px 0;
margin-block: 16px;
margin-inline: 0;
@include light-theme {
background: $color-gray-05;
@ -37,7 +38,7 @@
margin-top: 8px;
.module-Button:not(:last-child) {
margin-right: 12px;
margin-inline-end: 12px;
}
}
}

5
stylesheets/components/ContactSpoofingReviewDialogPerson.scss
View file

@ -9,7 +9,7 @@
}
&__info {
margin-left: 12px;
margin-inline-start: 12px;
&__contact-name {
@include font-body-1;
@ -28,7 +28,8 @@
&--callout {
@include font-body-2-italic;
margin: 12px 0;
margin-block: 12px;
margin-inline: 0;
}
}
}

14
stylesheets/components/ContextMenu.scss
View file

@ -11,7 +11,8 @@
&__popper {
@extend %module-composition-popper;
margin: 0;
padding: 6px 0px;
padding-block: 6px;
padding-inline: 0px;
width: auto;
&--single-item {
@ -38,7 +39,8 @@
align-items: center;
display: flex;
justify-content: space-between;
padding: 7px 12px;
padding-block: 7px;
padding-inline: 12px;
min-width: 150px;
width: 100%;
@ -48,13 +50,14 @@
&--icon {
height: 16px;
margin-right: 8px;
margin-inline-end: 8px;
width: 16px;
}
&--selected {
height: 12px;
margin: 0 6px;
margin-block: 0;
margin-inline: 6px;
width: 16px;
@include light-theme {
@ -94,7 +97,8 @@
}
&__popper--single-item &__option {
padding: 12px 6px;
padding-block: 12px;
padding-inline: 6px;
}
&__divider {

42
stylesheets/components/ConversationDetails.scss
View file

@ -7,8 +7,10 @@
align-items: center;
display: flex;
flex-direction: column;
margin: 0 0 20px 0;
padding: 0 24px;
margin-block: 0 20px;
margin-inline: 0;
padding-block: 0;
padding-inline: 24px;
text-align: center;
width: 100%;
}
@ -49,8 +51,8 @@
content: '';
height: $size;
left: $size + 13px;
margin-left: -$size;
inset-inline-start: $size + 13px;
margin-inline-start: -$size;
opacity: 0;
position: relative;
transition: opacity 100ms ease-out;
@ -159,7 +161,8 @@
@include dark-theme {
color: $color-gray-25;
}
padding: 0 28px;
padding-block: 0;
padding-inline: 28px;
padding-top: 16px;
}
@ -447,13 +450,15 @@
&__root {
display: flex;
justify-content: center;
padding: 0 20px;
padding-block: 0;
padding-inline: 20px;
padding-bottom: 24px;
.module-media-grid-item {
border-radius: 4px;
height: auto;
margin: 0 4px;
margin-block: 0;
margin-inline: 4px;
max-height: 94px;
overflow: hidden;
width: calc(100% / 6);
@ -494,7 +499,8 @@
border-radius: 5px;
border: 2px solid transparent;
display: flex;
padding: 8px 24px;
padding-block: 8px;
padding-inline: 24px;
user-select: none;
width: 100%;
@ -536,14 +542,14 @@
}
&__icon {
margin-right: 12px;
margin-inline-end: 12px;
flex-shrink: 0;
}
&__label {
flex-grow: 1;
text-align: left;
margin-right: 12px;
text-align: start;
margin-inline-end: 12px;
}
&__info {
@ -566,7 +572,7 @@
}
&__actions {
margin-left: 12px;
margin-inline-start: 12px;
overflow: hidden;
opacity: 0;
@ -594,7 +600,8 @@
content: '';
display: block;
margin: 8px 0;
margin-block: 8px;
margin-inline: 0;
}
&--borderless {
@ -607,7 +614,8 @@
&__header {
display: flex;
justify-content: space-between;
padding: 18px 24px 12px;
padding-block: 18px 12px;
padding-inline: 24px;
&--center {
justify-content: center;
@ -625,13 +633,15 @@
margin-bottom: 24px;
.module-Button {
margin: 0 8px;
margin-block: 0;
margin-inline: 8px;
}
}
&__radio {
&__container {
padding: 12px 0;
padding-block: 12px;
padding-inline: 0;
}
}
}

38
stylesheets/components/ConversationHeader.scss
View file

@ -15,7 +15,7 @@
width: 13px;
height: 13px;
display: block;
margin-right: $margin-right;
margin-inline-end: $margin-right;
@include light-theme {
@include color-svg($icon, $color-gray-60);
@ -55,11 +55,11 @@
width: 24px;
height: 24px;
min-width: 24px;
margin-left: -24px;
margin-inline-start: -24px;
vertical-align: text-bottom;
border: none;
opacity: 0;
transition: margin-left $transition, opacity $transition;
transition: margin-inline-start $transition, opacity $transition;
&:disabled {
cursor: default;
@ -67,8 +67,7 @@
&--show {
opacity: 1;
margin-right: 6px;
margin-left: 12px;
margin-inline: 12px 6px;
}
@include light-theme {
@ -103,12 +102,11 @@
display: flex;
flex-direction: row;
flex-grow: 1;
margin-left: 4px;
margin-right: var(--button-spacing);
margin-inline: 4px var(--button-spacing);
padding: $padding;
overflow: hidden;
min-width: 0;
transition: margin-right 200ms ease-out;
transition: margin-inline-end 200ms ease-out;
&--clickable {
@include button-reset;
@ -117,10 +115,9 @@
-webkit-app-region: no-drag;
// These are clobbered by button-reset:
margin-left: 4px;
margin-right: var(--button-spacing);
margin-inline: 4px var(--button-spacing);
padding: $padding;
padding-left: 0;
padding-inline-start: 0;
@include keyboard-mode {
&:focus {
@ -136,7 +133,7 @@
&__avatar {
min-width: 32px;
margin-right: 12px;
margin-inline-end: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
@ -155,7 +152,7 @@
user-select: none;
&__in-contacts-icon {
margin-left: 4px;
margin-inline-start: 4px;
}
}
@ -172,7 +169,7 @@
&__expiration {
@include icon-element('../images/icons/v2/timer-outline-24.svg');
margin-right: 12px;
margin-inline-end: 12px;
}
&__verified {
@ -193,11 +190,11 @@
border: 2px solid transparent;
display: flex;
height: $icon-size;
margin-right: var(--button-spacing);
margin-inline-end: var(--button-spacing);
min-width: $icon-size;
opacity: 0;
padding: 2px;
transition: margin-right 200ms ease-out, opacity 200ms ease-out,
transition: margin-inline-end 200ms ease-out, opacity 200ms ease-out,
background 100ms ease-out;
width: $icon-size;
@ -296,7 +293,8 @@
display: flex;
outline: none;
overflow: hidden;
padding: 5px 18px;
padding-block: 5px;
padding-inline: 18px;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
@ -312,7 +310,7 @@
content: '';
display: block;
height: $icon-size;
margin-right: 5px;
margin-inline-end: 5px;
min-width: $icon-size;
width: $icon-size;
}
@ -326,10 +324,10 @@
}
&__disappearing-timer__item {
padding-left: 25px;
padding-inline-start: 25px;
&--active {
padding-left: 0px;
padding-inline-start: 0px;
@include icon-element('../images/icons/v2/check-24.svg', 12px);
}
}

14
stylesheets/components/ConversationHero.scss
View file

@ -2,7 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
.module-conversation-hero {
padding: 32px 0 28px 0;
padding-block: 32px 28px;
padding-inline: 0;
text-align: center;
&__avatar {
@ -24,7 +25,8 @@
&__with {
@include font-body-2;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
margin-bottom: 16px;
max-width: 500px;
@ -40,7 +42,9 @@
&__membership {
@include font-body-2;
padding: 0 16px;
padding-block: 0;
padding-inline: 16px;
@include light-theme {
color: $color-gray-60;
@ -76,7 +80,7 @@
content: '';
display: block;
height: 14px;
margin-right: 8px;
margin-inline-end: 8px;
width: 14px;
@include light-theme {
@ -106,7 +110,7 @@
content: '';
display: inline-block;
height: 16px;
margin-right: 8px;
margin-inline-end: 8px;
vertical-align: middle;
width: 16px;

9
stylesheets/components/ConversationMergeNotification.scss
View file

@ -5,8 +5,7 @@
&__dialog__image {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
}
&__dialog__text-1 {
@ -14,8 +13,7 @@
margin-top: 32px;
margin-left: 5px;
margin-right: 5px;
margin-inline: 5px;
}
&__dialog__text-2 {
text-align: center;
@ -23,7 +21,6 @@
margin-top: 24px;
margin-bottom: 37px;
margin-left: 5px;
margin-right: 5px;
margin-inline: 5px;
}
}

3
stylesheets/components/ConversationView.scss
View file

@ -40,7 +40,8 @@
// height calculation.
.quote-wrapper,
.preview-wrapper {
margin: 0 16px 10px 16px;
margin-block: 0 10px;
margin-inline: 16px;
}
}
}

8
stylesheets/components/CustomColorEditor.scss
View file

@ -5,14 +5,14 @@
&__messages {
border-radius: 8px;
border: 1px solid $color-gray-15;
padding: 27px 0;
padding-block: 27px;
padding-inline: 0;
margin-top: 16px;
position: relative;
}
&__tabs {
margin-left: -16px;
margin-right: -16px;
margin-inline: -16px;
}
&__gradient-knob {
@ -61,7 +61,7 @@
margin-top: 16px;
.module-Button {
margin-left: 8px;
margin-inline-start: 8px;
}
}
}

3
stylesheets/components/CustomizingPreferredReactionsModal.scss
View file

@ -12,7 +12,8 @@
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 0;
padding-block: 4rem;
padding-inline: 0;
text-align: center;
user-select: none;

5
stylesheets/components/DebugLogWindow.scss
View file

@ -59,14 +59,15 @@
margin-top: 16px;
.module-Button {
margin-left: 8px;
margin-inline-start: 8px;
}
}
&__link {
border-radius: 4px;
height: 36px;
padding: 0 10px;
padding-block: 0;
padding-inline: 10px;
width: 100%;
@include light-theme {

5
stylesheets/components/DisappearingTimeDialog.scss
View file

@ -7,7 +7,8 @@
}
&__body p {
margin: 0 0 25px 0;
margin-block: 0 25px;
margin-inline: 0;
}
&__time-boxes {
@ -19,7 +20,7 @@
}
&__units {
margin-left: 9px;
margin-inline-start: 9px;
}
}
}

2
stylesheets/components/DisappearingTimerSelect.scss
View file

@ -8,7 +8,7 @@
position: absolute;
margin-top: 4px;
padding-left: 14px;
padding-inline-start: 14px;
@include font-subtitle;

9
stylesheets/components/EditConversationAttributesModal.scss
View file

@ -3,17 +3,20 @@
.module-EditConversationAttributesModal {
.module-AvatarInput {
margin: 24px 0 24px 0;
margin-block: 24px;
margin-inline: 0;
}
&__error-message {
@include font-body-1;
margin: 16px 0;
margin-block: 16px;
margin-inline: 0;
}
&__description-warning {
@include font-subtitle;
color: $color-gray-45;
margin: 0 16px;
margin-block: 0;
margin-inline: 16px;
}
}

3
stylesheets/components/EditHistoryMessagesModal.scss
View file

@ -3,8 +3,7 @@
.EditHistoryMessagesModal {
.module-message {
padding-left: 0;
padding-right: 0;
padding-inline: 0;
&__link-preview__content {
@include dark-theme {

11
stylesheets/components/EditUsernameModalBody.scss
View file

@ -54,7 +54,8 @@
&__divider {
width: 2px;
height: 20px;
margin: 0 12px;
margin-block: 0;
margin-inline: 12px;
@include light-theme {
background-color: $color-gray-20;
@ -71,14 +72,16 @@
&__error {
@include font-body-2;
margin: 16px 0;
margin-block: 16px;
margin-inline: 0;
color: $color-accent-red;
}
&__info {
@include font-body-2;
margin: 16px 0;
margin-block: 16px;
margin-inline: 0;
@include light-theme {
color: $color-gray-60;
@ -109,7 +112,7 @@
display: inline-block;
width: 20px;
height: 20px;
margin-right: 12px;
margin-inline-end: 12px;
-webkit-mask-size: 100%;
content: '';

10
stylesheets/components/ForwardMessageModal.scss
View file

@ -7,7 +7,8 @@
border-radius: 8px;
display: flex;
flex-direction: column;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
max-height: 90vh;
max-width: 360px;
width: 95%;
@ -29,7 +30,8 @@
&--link-preview {
border-bottom: 1px solid $color-gray-15;
padding: 12px 16px;
padding-block: 12px;
padding-inline: 16px;
@include dark-theme() {
border-color: $color-gray-60;
@ -54,7 +56,7 @@
@include button-reset;
position: absolute;
top: 8px;
right: 16px;
inset-inline-end: 16px;
height: 22px;
width: 22px;
@ -78,7 +80,7 @@
@include button-reset;
height: 24px;
left: 16px;
inset-inline-start: 16px;
position: absolute;
width: 24px;

9
stylesheets/components/GradientDial.scss
View file

@ -4,10 +4,7 @@
.GradientDial {
&__container {
height: 100%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
@include position-absolute-center;
width: 100%;
}
@ -24,7 +21,7 @@
border: 1px solid $color-black-alpha-20;
height: 100%;
height: 1000px;
left: 50%;
inset-inline-start: 50%;
position: absolute;
top: 50%;
transform-origin: center;
@ -36,7 +33,7 @@
@include color-bubble(30px);
box-shadow: 0 0 4px $color-black-alpha-20;
cursor: move;
margin-left: -20px;
margin-inline-start: -20px;
margin-top: -20px;
padding: 2px;
position: absolute;

17
stylesheets/components/GroupDialog.scss
View file

@ -4,7 +4,8 @@
.module-GroupDialog {
@include popper-shadow();
border-radius: 8px;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
max-height: 100%;
max-width: 360px;
padding: 16px;
@ -27,7 +28,7 @@
@include button-reset;
position: absolute;
right: 12px;
inset-inline-end: 12px;
top: 12px;
height: 24px;
@ -68,15 +69,17 @@
&__paragraph,
&__contacts {
margin: 0 0 16px 0;
padding: 0 16px 0 28px;
margin-block: 0 16px;
margin-inline: 0;
padding-block: 0;
padding-inline: 28px 16px;
position: relative;
&::before {
content: '';
display: block;
height: 11px;
left: 4px;
inset-inline-start: 4px;
position: absolute;
top: 4px;
width: 4px;
@ -98,7 +101,7 @@
}
&__contact__name {
margin-left: 8px;
margin-inline-start: 8px;
}
}
@ -114,7 +117,7 @@
max-width: 152px;
&:not(:first-child) {
margin-left: 16px;
margin-inline-start: 16px;
}
}
}

2
stylesheets/components/GroupInput.scss
View file

@ -18,7 +18,7 @@
color: $color-gray-45;
margin: 12px;
position: absolute;
right: 0;
inset-inline-end: 0;
}
&--large {

4
stylesheets/components/HueSlider.scss
View file

@ -18,7 +18,7 @@
);
border-radius: 4px;
height: 8px;
margin-left: 7px;
margin-inline-start: 7px;
width: 280px;
}
@ -26,7 +26,7 @@
&.Slider__handle {
border: 7px solid $color-white;
margin-top: -7px;
margin-left: -11px;
margin-inline-start: -11px;
height: 22px;
width: 22px;
}

17
stylesheets/components/IncomingCallBar.scss
View file

@ -8,10 +8,7 @@
top: 22px;
width: 100%;
z-index: $z-index-popup;
padding: {
left: 1rem;
right: 1rem;
}
padding-inline: 1rem;
}
&__bar {
@ -21,7 +18,8 @@
display: flex;
height: 70px;
justify-content: space-between;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
max-width: 600px;
width: 100%;
}
@ -33,7 +31,7 @@
&--avatar {
margin-bottom: 8px;
margin-left: 16px;
margin-inline-start: 16px;
margin-top: 8px;
position: relative;
}
@ -42,7 +40,7 @@
align-items: stretch;
display: flex;
flex-direction: column;
margin-left: 12px;
margin-inline-start: 12px;
min-width: 0;
}
@ -67,7 +65,7 @@
&__actions {
display: flex;
margin-right: 16px;
margin-inline-end: 16px;
}
&__button {
@ -77,8 +75,7 @@
display: flex;
height: 40px;
justify-content: center;
margin-left: 12px;
margin-right: 12px;
margin-inline: 12px;
outline: none;
width: 40px;

13
stylesheets/components/Input.scss
View file

@ -7,13 +7,16 @@
border-radius: 6px;
border-style: solid;
border-width: 2px;
margin: 16px 0;
padding: 2px 16px;
margin-block: 16px;
margin-inline: 0;
padding-block: 2px;
padding-inline: 16px;
display: flex;
position: relative;
&--expandable {
padding: 2px 8px;
padding-block: 2px;
padding-inline: 8px;
}
@include light-theme {
@ -58,7 +61,7 @@
font-size: 24px;
height: 32px;
width: 32px;
margin-right: 8px;
margin-inline-end: 8px;
}
&__input {
@ -122,7 +125,7 @@
&--large {
position: absolute;
bottom: 0;
right: 0;
inset-inline-end: 0;
margin: 12px;
}

3
stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
View file

@ -9,7 +9,8 @@
&__inputs {
display: flex;
flex-direction: column;
padding: 32px 0 16px 0;
padding-block: 32px 16px;
padding-inline: 0;
align-items: center;
}

7
stylesheets/components/InstallScreenErrorStep.scss
View file

@ -4,17 +4,16 @@
.module-InstallScreenErrorStep {
@include install-screen;
flex-direction: column;
padding-left: 2rem;
padding-right: 2rem;
padding-inline: 2rem;
text-align: center;
&__buttons {
margin-top: 1rem;
.module-Button {
margin-left: 1rem;
margin-inline-start: 1rem;
&:first-child {
margin-left: 0;
margin-inline-start: 0;
}
}
}

6
stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
View file

@ -38,7 +38,8 @@
display: flex;
flex-direction: column;
justify-content: center;
margin: 8px 38px 8px 8px;
margin-block: 8px;
margin-inline: 8px 38px;
min-height: $size;
min-width: $size;
width: $size;
@ -72,7 +73,8 @@
content: '';
display: block;
height: 22px;
margin: 8px auto 0 auto;
margin-block: 8px 0;
margin-inline: auto;
width: 22px;
}

4
stylesheets/components/InstallScreenSignalLogo.scss
View file

@ -8,14 +8,14 @@
font-weight: bold;
position: absolute;
top: calc(35px + var(--title-bar-drag-area-height));
left: 32px;
inset-inline-start: 32px;
&::before {
@include color-svg('../images/signal-logo.svg', $color-ultramarine);
content: '';
display: block;
height: 32px;
margin-right: 6px;
margin-inline-end: 6px;
width: 32px;
}
}

12
stylesheets/components/InstallScreenUpdateDialog.scss
View file

@ -18,7 +18,8 @@
height: 4px;
overflow: hidden;
width: 100%;
margin: 16px 0;
margin-block: 16px;
margin-inline: 0;
}
&--bar {
@ -27,7 +28,14 @@
display: block;
height: 100%;
width: 100%;
transform: translateX(-100%);
&:dir(ltr) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(-100%);
}
&:dir(rtl) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(100%);
}
transition: transform 500ms ease-out;
}
}

23
stylesheets/components/LeftPaneDialog.scss
View file

@ -24,7 +24,8 @@
cursor: inherit;
display: flex;
min-height: 64px;
padding: 12px 14px 12px 16px;
padding-block: 12px;
padding-inline: 16px 14px;
user-select: none;
width: 100%;
@ -34,7 +35,7 @@
font-weight: 400;
.module-left-pane--width-narrow & {
padding-left: 36px;
padding-inline-start: 36px;
}
&__retry {
@ -62,7 +63,7 @@
}
&__spinner-container {
margin-right: 18px;
margin-inline-end: 18px;
}
&__spinner {
@ -83,7 +84,7 @@
&__icon {
width: 24px;
height: 24px;
margin-right: 18px;
margin-inline-end: 18px;
background-color: $color-white;
-webkit-mask-size: contain;
@ -120,7 +121,7 @@
@include button-reset;
border-radius: 4px;
float: right;
float: inline-end;
height: 20px;
width: 20px;
@ -241,7 +242,8 @@
max-width: 210px;
overflow: hidden;
width: 100%;
margin: 10px 0 6px 0;
margin-block: 10px 6px;
margin-inline: 0;
}
&--bar {
@ -259,7 +261,14 @@
display: block;
height: 100%;
width: 100%;
transform: translateX(-100%);
&:dir(ltr) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(-100%);
}
&:dir(rtl) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(100%);
}
transition: transform 500ms ease-out;
}
}

9
stylesheets/components/LeftPaneSearchInput.scss
View file

@ -3,7 +3,7 @@
.LeftPaneSearchInput {
&__input--with-children.module-SearchInput__input--with-children {
padding-left: 50px;
padding-inline-start: 50px;
}
&__in-conversation-pill {
@ -13,8 +13,9 @@
bottom: 4px;
display: flex;
flex-direction: row;
left: 3px;
padding: 0 3px 0 0;
inset-inline-start: 3px;
padding-block: 0;
padding-inline: 0 3px;
position: absolute;
top: 4px;
@ -27,7 +28,7 @@
&__x-button {
height: 16px;
margin-left: 2px;
margin-inline-start: 2px;
width: 16px;
@include light-theme {

39
stylesheets/components/Lightbox.scss
View file

@ -5,18 +5,16 @@
&__container {
background-color: $color-black;
bottom: 0;
left: 0;
inset-inline: 0;
position: absolute;
right: 0;
top: var(--titlebar-height);
z-index: $z-index-popup;
}
&__animated {
bottom: 0;
left: 0;
inset-inline: 0;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
@ -43,7 +41,7 @@
align-items: center;
display: flex;
justify-content: center;
left: 50%;
inset-inline-start: 50%;
position: absolute;
&--container {
@ -57,7 +55,7 @@
position: relative;
border-radius: 6px;
height: 44px;
margin-right: 8px;
margin-inline-end: 8px;
overflow: hidden;
width: 44px;
@ -71,7 +69,7 @@
&--selected::after {
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
content: '';
width: 100%;
height: 100%;
@ -103,7 +101,7 @@
&--video {
height: 100%;
left: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
@ -149,7 +147,8 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 40px;
margin-block: 0;
margin-inline: 40px;
}
&__zoom-button {
@ -169,7 +168,8 @@
&__caption {
@include font-body-2;
color: $color-white;
margin: 12px 0;
margin-block: 12px;
margin-inline: 0;
text-align: center;
}
@ -182,7 +182,8 @@
background-color: $color-black;
border-radius: 15px;
color: #eeefef;
padding: 6px 18px;
padding-block: 6px;
padding-inline: 18px;
text-align: center;
}
@ -201,12 +202,12 @@
}
&__nav-next {
right: 0;
inset-inline-end: 0;
align-items: end;
}
&__nav-prev {
left: 0;
inset-inline-start: 0;
align-items: start;
}
@ -219,7 +220,8 @@
margin-bottom: 16px;
min-height: 52px;
opacity: 1;
padding: 0 16px;
padding-block: 0;
padding-inline: 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
&--container {
@ -227,7 +229,7 @@
}
&--avatar {
margin-right: 10px;
margin-inline-end: 10px;
}
&--name {
@ -243,7 +245,8 @@
&__footer {
opacity: 1;
padding: 16px 16px 24px 16px;
padding-block: 16px 24px;
padding-inline: 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
}
@ -362,7 +365,7 @@
&--previous {
justify-content: start;
padding-left: 16px;
padding-inline-start: 16px;
&::before {
@include color-svg(
@ -374,7 +377,7 @@
&--next {
justify-content: end;
padding-right: 16px;
padding-inline-end: 16px;
&::before {
@include color-svg(

10
stylesheets/components/ListTile.scss
View file

@ -8,7 +8,8 @@ button.ListTile {
.ListTile {
display: flex;
align-items: center;
padding: 6px 14px;
padding-block: 6px;
padding-inline: 14px;
user-select: none;
// use a transparent border to inset the background
@ -24,7 +25,8 @@ button.ListTile {
text-align: inherit;
&--variant-panelrow {
padding: 8px 16px;
padding-block: 8px;
padding-inline: 16px;
}
&__content {
@ -78,10 +80,10 @@ button.ListTile {
}
&__leading {
margin-right: 12px;
margin-inline-end: 12px;
}
&__trailing {
margin-left: 12px;
margin-inline-start: 12px;
}
&--clickable {

22
stylesheets/components/MediaEditor.scss
View file

@ -9,7 +9,7 @@
flex-direction: column;
width: var(--window-width);
height: var(--window-height);
left: 0;
inset-inline-start: 0;
top: var(--titlebar-height);
position: absolute;
user-select: none;
@ -18,7 +18,8 @@
&__container {
display: flex;
flex: 1;
padding: 22px 60px;
padding-block: 22px;
padding-inline: 60px;
padding-bottom: 0;
overflow: hidden;
}
@ -48,7 +49,8 @@
display: inline-flex;
height: 32px;
justify-content: center;
margin: 0 15px;
margin-block: 0;
margin-inline: 15px;
opacity: 1;
width: 32px;
@ -141,7 +143,8 @@
border-radius: 9999px;
background: $color-gray-90;
color: $color-gray-15;
padding: 8px 15px;
padding-block: 8px;
padding-inline: 15px;
border: none;
& > span {
@ -171,11 +174,12 @@
height: $tools-height;
justify-content: center;
margin-bottom: 22px;
padding: 14px 12px;
padding-block: 14px;
padding-inline: 12px;
&__tool,
&__tool__button {
margin-right: 14px;
margin-inline-end: 14px;
}
&__button {
@ -193,13 +197,15 @@
@include button-reset;
display: flex;
margin: 0 8px;
margin-block: 0;
margin-inline: 8px;
padding: 8px;
&--words {
height: auto;
width: auto;
padding: 0 6px;
padding-block: 0;
padding-inline: 6px;
}
&--draw-pen__button {

9
stylesheets/components/MediaQualitySelector.scss
View file

@ -4,7 +4,8 @@
.MediaQualitySelector {
&__popper {
@extend %module-composition-popper;
padding: 12px 16px;
padding-block: 12px;
padding-inline: 16px;
width: auto;
}
@ -82,12 +83,14 @@
border-radius: 6px;
display: flex;
height: 42px;
margin: 2px 0;
margin-block: 2px;
margin-inline: 0;
min-width: 200px;
&--checkmark {
height: 12px;
margin: 0 6px;
margin-block: 0;
margin-inline: 6px;
width: 16px;
}

8
stylesheets/components/MessageAudio.scss
View file

@ -12,7 +12,7 @@ $audio-attachment-button-margin-small: 4px;
.PlaybackButton {
@media (min-width: 0px) and (max-width: 799px) {
margin-right: $audio-attachment-button-margin-small;
margin-inline-end: $audio-attachment-button-margin-small;
}
}
}
@ -52,7 +52,7 @@ $audio-attachment-button-margin-small: 4px;
.module-message__audio-attachment__controls {
display: flex;
flex: 1;
margin-right: 4px;
margin-inline-end: 4px;
}
.module-message__audio-attachment__dot {
@ -122,7 +122,7 @@ $audio-attachment-button-margin-small: 4px;
align-items: center;
@media (min-width: 0px) and (max-width: 799px) {
margin-left: $audio-attachment-button-size +
margin-inline-start: $audio-attachment-button-size +
$audio-attachment-button-margin-small;
}
}
@ -133,7 +133,7 @@ $audio-attachment-button-margin-small: 4px;
user-select: none;
text-align: center;
white-space: nowrap;
margin-right: 12px;
margin-inline-end: 12px;
.module-message__audio-attachment--incoming & {
@include light-theme {

3
stylesheets/components/MessageBody.scss
View file

@ -23,8 +23,7 @@
border-radius: 4px;
cursor: pointer;
display: inline-block;
padding-left: 4px;
padding-right: 4px;
padding-inline: 4px;
border: 1px solid transparent;
@include light-theme {

21
stylesheets/components/MessageDetail.scss
View file

@ -3,8 +3,7 @@
.module-message-detail {
max-width: 650px;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
padding: 20px;
outline: none;
}
@ -58,7 +57,8 @@
display: flex;
justify-content: space-between;
margin-top: 24px;
padding: 10px 0;
padding-block: 10px;
padding-inline: 0;
user-select: none;
&:first-child {
@ -76,7 +76,7 @@
display: block;
flex-shrink: 0;
height: 12px;
margin-left: 10px;
margin-inline-start: 10px;
}
}
@ -131,7 +131,8 @@
.module-message-detail__contact {
margin-bottom: 8px;
padding: 8px 0;
padding-block: 8px;
padding-inline: 0;
display: flex;
flex-direction: row;
align-items: center;
@ -144,7 +145,7 @@
.module-message-detail__contact__text {
@include font-body-1;
flex-grow: 1;
margin-left: 10px;
margin-inline-start: 10px;
}
.module-message-detail__contact__error {
@ -153,7 +154,7 @@
}
.module-message-detail__contact__unidentified-delivery-icon {
margin-left: 6px;
margin-inline-start: 6px;
width: 18px;
height: 18px;
@ -174,7 +175,7 @@
}
.module-message-detail__contact__error-buttons {
text-align: right;
text-align: end;
}
.module-message-detail__contact__show-safety-number {
@ -193,7 +194,7 @@
}
.module-message-detail__contact__send-anyway {
@include button-reset;
margin-left: 5px;
margin-inline-start: 5px;
margin-top: 5px;
padding: 4px;
border-radius: 4px;
@ -203,5 +204,5 @@
}
.module-message-detail__status-timestamp {
margin-left: 6px;
margin-inline-start: 6px;
}

11
stylesheets/components/MiniPlayer.scss
View file

@ -17,15 +17,15 @@
.MiniPlayer {
position: absolute;
top: 0;
left: 0;
right: 0;
inset-inline: 0;
z-index: calc($z-index-above-above-base + 1);
display: flex;
align-items: center;
gap: 18px;
padding: 8px 16px;
padding-block: 8px;
padding-inline: 16px;
margin-top: calc(52px + var(--title-bar-drag-area-height));
text-align: left;
text-align: start;
@include light-theme {
background-color: $color-gray-02;
@ -67,7 +67,8 @@
}
&__middot {
padding: 0 5px;
padding-block: 0;
padding-inline: 5px;
}
&__close-button {

28
stylesheets/components/Modal.scss
View file

@ -24,7 +24,8 @@
align-items: center;
display: flex;
justify-content: space-between;
padding: 16px 16px 1em 16px;
padding-block: 16px 1em;
padding-inline: 16px;
&--with-back-button .module-Modal__title {
text-align: center;
@ -142,7 +143,8 @@
// ProfileEditor nests footer within the Modal's body
.module-Modal__button-footer {
padding: 1em 0 0 0;
padding-block: 1em 0;
padding-inline: 0;
}
}
}
@ -197,11 +199,12 @@
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
padding: 1em 16px 16px 16px;
padding-block: 1em 16px;
padding-inline: 16px;
gap: 8px;
.module-Button {
margin-left: 8px;
margin-inline-start: 8px;
}
&--one-button-per-line {
@ -212,7 +215,8 @@
// Overrides for a modal with important message
&--important {
padding: 10px 12px 16px 12px;
padding-block: 10px 16px;
padding-inline: 12px;
.module-Modal__header {
// Necessary because of the larger top margins for the title
@ -221,17 +225,20 @@
}
.module-Modal__body {
padding: 0 12px 4px 12px !important;
padding-block: 0 4px !important;
padding-inline: 12px !important;
}
.module-Modal__body p {
margin: 0 0 20px 0;
margin-block: 0 20px;
margin-inline: 0;
}
.module-Modal__title {
@include font-title-2;
text-align: center;
margin: 10px 0 22px 0;
margin-block: 10px 22px;
margin-inline: 0;
flex-shrink: 0;
@ -245,14 +252,15 @@
margin-top: 27px;
flex-grow: 0;
flex-shrink: 0;
padding: 0 12px 4px 12px;
padding-block: 0 4px;
padding-inline: 12px;
.module-Button {
flex-grow: 1;
max-width: 152px;
&:not(:first-child) {
margin-left: 16px;
margin-inline-start: 16px;
}
}
}

13
stylesheets/components/MyStories.scss
View file

@ -6,7 +6,8 @@
&__title {
@include font-body-1-bold;
color: $color-gray-05;
margin: 24px 10px 8px 10px;
margin-block: 24px 8px;
margin-inline: 10px;
}
}
@ -19,7 +20,7 @@
border-radius: 10px;
display: flex;
height: 96px;
padding-right: 10px;
padding-inline-end: 10px;
&:hover {
background: $color-gray-65;
@ -36,7 +37,7 @@
display: flex;
flex-direction: column;
flex: 1;
margin-left: 12px;
margin-inline-start: 12px;
&__failed {
align-items: center;
@ -46,7 +47,7 @@
content: '';
display: block;
height: 12px;
margin-right: 12px;
margin-inline-end: 12px;
width: 12px;
@include color-svg(
'../images/icons/v2/error-outline-24.svg',
@ -99,7 +100,7 @@
display: flex;
height: 28px;
justify-content: center;
margin-left: 16px;
margin-inline-start: 16px;
width: 28px;
&::after {
@ -157,7 +158,7 @@
height: 20px;
justify-content: center;
position: absolute;
right: -4px;
inset-inline-end: -4px;
width: 20px;
z-index: $z-index-base;

6
stylesheets/components/OutgoingGiftBadgeModal.scss
View file

@ -16,8 +16,7 @@
&__description {
@include font-body-1;
margin-top: 8px;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
width: 328px;
}
&__badge {
@ -27,8 +26,7 @@
&--missing {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
@include light-theme {
background-color: $color-gray-05;

2
stylesheets/components/PermissionsPopup.scss
View file

@ -29,7 +29,7 @@
width: 100%;
button {
margin-left: 16px;
margin-inline-start: 16px;
}
}
}

Some files were not shown because too many files have changed in this diff Show more