Prettier: Format CSS, SCSS, and JSON (#2339)
Expand auto-formatting to CSS, SCSS, and JSON: * [x] Ignore symlinked SCSS file from `components`. * [x] Ignore package manifest files, `package.json` and `bower.json`, as they are already formatted by their package manager. * [x] Skip locale JSON files (already managed by Transifex tools). * [x] Format all stylesheets.
This commit is contained in:
commit
bad4681ade
21 changed files with 816 additions and 449 deletions
|
@ -1,26 +1,34 @@
|
|||
# TODO: Partially duplicated from `.gitignore`. Remove once Prettier
|
||||
# supports `.gitignore`: https://github.com/prettier/prettier/issues/2294
|
||||
|
||||
# generated files
|
||||
# Generated files
|
||||
dist/**
|
||||
js/components.js
|
||||
js/libtextsecure.js
|
||||
js/libsignal-protocol-worker.js
|
||||
js/libtextsecure.js
|
||||
libtextsecure/components.js
|
||||
libtextsecure/test/test.js
|
||||
test/test.js
|
||||
ts/**/*.js
|
||||
|
||||
# Third-party files
|
||||
components/**
|
||||
js/jquery.js
|
||||
js/Mp3LameEncoder.min.js
|
||||
js/WebAudioRecorderMp3.js
|
||||
|
||||
ts/**/*.js
|
||||
components/*
|
||||
dist/*
|
||||
libtextsecure/libsignal-protocol.js
|
||||
test/fixtures.js
|
||||
libtextsecure/test/blanket_mocha.js
|
||||
test/blanket_mocha.js
|
||||
|
||||
/**/*.json
|
||||
/**/*.css
|
||||
# Test fixtures
|
||||
test/fixtures.js
|
||||
|
||||
# Managed by Transifex:
|
||||
_locales/**
|
||||
|
||||
# Managed by package manager (`bower` and `yarn`/`npm`):
|
||||
/bower.json
|
||||
/package.json
|
||||
|
||||
# Symlink into third-party `components`:
|
||||
stylesheets/_intlTelInput.scss
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
"lint": "yarn format --list-different && yarn lint-windows",
|
||||
"lint-windows": "yarn eslint && yarn grunt lint && yarn tslint",
|
||||
"tslint": "tslint --config tslint.json --format stylish --project .",
|
||||
"format": "prettier --write \"*.{js,ts,tsx,md}\" \"./**/*.{js,ts,tsx,md}\"",
|
||||
"format": "prettier --write \"*.{css,js,json,md,scss,ts,tsx}\" \"./**/*.{css,js,json,md,scss,ts,tsx}\"",
|
||||
"transpile": "tsc",
|
||||
"clean-transpile": "rimraf ts/**/*.js ts/*.js",
|
||||
"open-coverage": "open coverage/lcov-report/index.html",
|
||||
|
|
|
@ -15,7 +15,8 @@
|
|||
.conversation.placeholder .conversation-header {
|
||||
display: none;
|
||||
}
|
||||
.conversation-header, .bubble {
|
||||
.conversation-header,
|
||||
.bubble {
|
||||
@include avatar-colors;
|
||||
}
|
||||
.bottom-bar {
|
||||
|
@ -38,10 +39,16 @@
|
|||
}
|
||||
|
||||
.incoming .bubble {
|
||||
.sender, .content, .body, .meta, a, .fileView {
|
||||
.sender,
|
||||
.content,
|
||||
.body,
|
||||
.meta,
|
||||
a,
|
||||
.fileView {
|
||||
@include invert-text-color;
|
||||
}
|
||||
.attachments, .content {
|
||||
.attachments,
|
||||
.content {
|
||||
a {
|
||||
color: $grey_l;
|
||||
}
|
||||
|
@ -79,5 +86,4 @@
|
|||
.inactive button.back {
|
||||
@include header-icon-black('../images/back.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -9,14 +9,14 @@
|
|||
}
|
||||
.conversation-name + .conversation-number {
|
||||
&:before {
|
||||
content:"\00b7"; // ·
|
||||
content: '\00b7'; // ·
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 4px;
|
||||
}
|
||||
}
|
||||
.conversation-title .verified {
|
||||
&:before {
|
||||
content:"\00b7"; // ·
|
||||
content: '\00b7'; // ·
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 4px;
|
||||
}
|
||||
|
@ -149,7 +149,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.key, .placeholder {
|
||||
.key,
|
||||
.placeholder {
|
||||
padding: 0 1em;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
@ -285,7 +286,6 @@
|
|||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
@ -358,7 +358,9 @@ li.entry .error-icon-container {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover .error-message { display: inline-block; }
|
||||
&:hover .error-message {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
li.entry .menu-container {
|
||||
position: absolute;
|
||||
|
@ -399,7 +401,6 @@ li.entry.outgoing .menu-container {
|
|||
right: auto;
|
||||
}
|
||||
|
||||
|
||||
.error-icon {
|
||||
display: inline-block;
|
||||
width: $error-icon-size;
|
||||
|
@ -426,7 +427,6 @@ li.entry.outgoing .menu-container {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.group-update {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
@ -469,7 +469,9 @@ span.status {
|
|||
.pending span.status {
|
||||
display: inline-block;
|
||||
background: none;
|
||||
&:before { content: '...'; }
|
||||
&:before {
|
||||
content: '...';
|
||||
}
|
||||
}
|
||||
|
||||
.message-container,
|
||||
|
@ -487,7 +489,7 @@ span.status {
|
|||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
@ -504,15 +506,17 @@ span.status {
|
|||
text-align: -webkit-auto;
|
||||
-webkit-user-select: text;
|
||||
|
||||
@media(max-width: 825px) {
|
||||
max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
|
||||
@media (max-width: 825px) {
|
||||
max-width: calc(
|
||||
100% - 45px - #{$error-icon-size}
|
||||
); // avatar size + padding + error-icon size
|
||||
}
|
||||
|
||||
.body {
|
||||
white-space: pre-wrap;
|
||||
|
||||
a {
|
||||
word-break: break-all
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -536,7 +540,7 @@ span.status {
|
|||
|
||||
.hasRetry + .timestamp {
|
||||
&:before {
|
||||
content:"\00b7"; // ·
|
||||
content: '\00b7'; // ·
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 4px;
|
||||
text-decoration: none;
|
||||
|
@ -556,22 +560,27 @@ span.status {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hasRetry, .timestamp, .status, .timer {
|
||||
.hasRetry,
|
||||
.timestamp,
|
||||
.status,
|
||||
.timer {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timestamp, .status {
|
||||
.timestamp,
|
||||
.status {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.incoming {
|
||||
.avatar, .bubble {
|
||||
.avatar,
|
||||
.bubble {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
@ -585,7 +594,8 @@ span.status {
|
|||
right: calc(100% + 5px);
|
||||
}
|
||||
|
||||
.avatar, .bubble {
|
||||
.avatar,
|
||||
.bubble {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
@ -595,11 +605,21 @@ span.status {
|
|||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0px); }
|
||||
25% { transform: translateX(-5px); }
|
||||
50% { transform: translateX(0px); }
|
||||
75% { transform: translateX(5px); }
|
||||
100% { transform: translateX(0px); }
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.expired .bubble {
|
||||
|
@ -619,7 +639,8 @@ span.status {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -633,7 +654,9 @@ span.status {
|
|||
background-color: #ccc;
|
||||
}
|
||||
|
||||
img, audio, video {
|
||||
img,
|
||||
audio,
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
|
@ -673,13 +696,15 @@ span.status {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon, .text {
|
||||
.icon,
|
||||
.text {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon, .text {
|
||||
opacity: 1.0;
|
||||
.icon,
|
||||
.text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -703,7 +728,6 @@ span.status {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.outgoing .avatar {
|
||||
|
@ -735,8 +759,10 @@ span.status {
|
|||
background-color: #eee;
|
||||
position: relative;
|
||||
|
||||
margin-right: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
|
||||
margin-left: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
|
||||
margin-right: $android-bubble-quote-padding -
|
||||
$android-bubble-padding-horizontal;
|
||||
margin-left: $android-bubble-quote-padding -
|
||||
$android-bubble-padding-horizontal;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
// Accent color border:
|
||||
|
@ -908,7 +934,6 @@ span.status {
|
|||
border-left-color: white;
|
||||
}
|
||||
|
||||
|
||||
.message-list,
|
||||
.message-container {
|
||||
.avatar {
|
||||
|
@ -962,7 +987,8 @@ span.status {
|
|||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
color: $grey_d;
|
||||
}
|
||||
|
||||
|
@ -971,7 +997,6 @@ span.status {
|
|||
|
||||
.attachment-preview {
|
||||
padding: 13px 10px 0;
|
||||
|
||||
}
|
||||
img {
|
||||
border: 2px solid #ddd;
|
||||
|
@ -1016,7 +1041,7 @@ span.status {
|
|||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
|
||||
&[disabled=disabled] {
|
||||
&[disabled='disabled'] {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
@ -1026,9 +1051,8 @@ span.status {
|
|||
}
|
||||
.android-length-warning {
|
||||
padding: 10px;
|
||||
max-width:150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toast {
|
||||
|
@ -1120,7 +1144,6 @@ span.status {
|
|||
padding-top: 25px;
|
||||
padding-bottom: 35px;
|
||||
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -1137,7 +1160,7 @@ span.status {
|
|||
.text {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
letter-spacing: 0.06em;
|
||||
background-color: white;
|
||||
border-radius: 1.5em;
|
||||
padding: 10px 21px 9px 21px;
|
||||
|
@ -1156,7 +1179,7 @@ span.status {
|
|||
text-align: center;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
outline: none;
|
||||
|
||||
.icon {
|
||||
|
@ -1168,7 +1191,7 @@ span.status {
|
|||
background-color: #616161;
|
||||
}
|
||||
|
||||
&.new-messages {
|
||||
&.new-messages {
|
||||
background-color: $blue;
|
||||
.icon {
|
||||
@include color-svg('../images/down.svg', white);
|
||||
|
|
|
@ -67,6 +67,5 @@
|
|||
border: solid 1px #ccc;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,83 +1,83 @@
|
|||
span.emoji {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
background-position: 50%, 50%;
|
||||
background-size: contain;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
background-position: 50%, 50%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
span.emoji-sizer {
|
||||
line-height: 0.81em;
|
||||
font-size: 1em;
|
||||
margin: -2px 0;
|
||||
line-height: 0.81em;
|
||||
font-size: 1em;
|
||||
margin: -2px 0;
|
||||
}
|
||||
|
||||
span.emoji-outer {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
span.emoji-inner {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-indent: -9999px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-indent: -9999px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
img.emoji.small {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
}
|
||||
img.emoji.medium {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
img.emoji.large {
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
}
|
||||
img.emoji.jumbo {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
// we need these, or we'll make conversation items too big in the left-nav
|
||||
.conversations img.emoji.small {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.conversations img.emoji.medium {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.conversations img.emoji.large {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.conversations img.emoji.jumbo {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
button.emoji {
|
||||
|
@ -96,8 +96,9 @@ button.emoji {
|
|||
@include color-svg('../images/smile.svg', $grey);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -105,9 +106,10 @@ button.emoji {
|
|||
@import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css';
|
||||
@font-face {
|
||||
font-family: 'apple-category';
|
||||
src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format("truetype");
|
||||
src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.emoji-panel-container {
|
||||
height: 0px;
|
||||
|
|
|
@ -19,7 +19,7 @@ body {
|
|||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
|
@ -67,8 +67,9 @@ button.grey {
|
|||
box-shadow: 0 0 10px -3px rgba($grey, 0.7);
|
||||
}
|
||||
|
||||
&[disabled=disabled] {
|
||||
&, &:hover {
|
||||
&[disabled='disabled'] {
|
||||
&,
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
|
@ -76,7 +77,9 @@ button.grey {
|
|||
}
|
||||
}
|
||||
|
||||
a { color: $blue; }
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
button.back {
|
||||
@include header-icon-black('../images/back.svg');
|
||||
|
@ -88,9 +91,8 @@ button.hamburger {
|
|||
@include header-icon-black('../images/menu.svg');
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
@ -98,11 +100,11 @@ button.hamburger {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0,0,0,0.15);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.25);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -161,7 +163,7 @@ button.hamburger {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 1px 1px rgba(0,0,0, 0.2);
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
@ -199,12 +201,13 @@ button.hamburger {
|
|||
transform: rotateZ(-45deg);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
input[type='file'] {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
@ -247,7 +250,8 @@ $avatar-size: 44px;
|
|||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.file-input .thumbnail, .thumbnail .avatar,
|
||||
.file-input .thumbnail,
|
||||
.thumbnail .avatar,
|
||||
img {
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
@ -282,7 +286,8 @@ $avatar-size: 44px;
|
|||
.members .contact {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
.last-message, .last-timestamp {
|
||||
.last-message,
|
||||
.last-timestamp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -319,7 +324,7 @@ $avatar-size: 44px;
|
|||
border-radius: $border-radius;
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
border: solid 1px rgba(255,255,255,0.6);
|
||||
border: solid 1px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
.inactive .contact.selected {
|
||||
|
@ -330,7 +335,7 @@ $avatar-size: 44px;
|
|||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,0.6);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
margin: 1px;
|
||||
|
||||
&.selected {
|
||||
|
@ -416,15 +421,14 @@ $avatar-size: 44px;
|
|||
}
|
||||
|
||||
.verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $grey);
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
vertical-align: text-bottom;
|
||||
@include color-svg('../images/verified-check.svg', $grey);
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.recipients-input {
|
||||
position: relative;
|
||||
|
||||
|
@ -475,7 +479,6 @@ $avatar-size: 44px;
|
|||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.new-conversation .recipients-input .recipients::before {
|
||||
content: 'To: ';
|
||||
|
@ -489,7 +492,7 @@ $avatar-size: 44px;
|
|||
&::before {
|
||||
display: block;
|
||||
margin: 0px auto;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
height: $loading-height;
|
||||
width: $loading-height;
|
||||
border-radius: 2 * $loading-height;
|
||||
|
@ -499,7 +502,9 @@ $avatar-size: 44px;
|
|||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -522,14 +527,17 @@ $avatar-size: 44px;
|
|||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=search], textarea {
|
||||
&:active, &:focus {
|
||||
input[type='text'],
|
||||
input[type='search'],
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.expiredAlert {
|
||||
background: #F3F3A7;
|
||||
background: #f3f3a7;
|
||||
padding: 10px;
|
||||
|
||||
button {
|
||||
|
@ -628,12 +636,12 @@ input[type=text], input[type=search], textarea {
|
|||
}
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgb(238,238,238) 0%, // (1 - 0.41) * 255 + 0.41 * 213
|
||||
rgb(243,243,243) 12%, // (1 - 0.19) * 255 + 0.19 * 191
|
||||
rgb(255,255,255) 27%,
|
||||
rgb(255,255,255) 60%,
|
||||
rgb(249,249,249) 85%, // (1 - 0.19) * 255 + 0.19 * 222
|
||||
rgb(213,213,213) 100% // (1 - 0.27) * 255 + 0.27 * 98
|
||||
/* (1 - 0.41) * 255 + 0.41 * 213*/ rgb(238, 238, 238) 0%,
|
||||
/* (1 - 0.19) * 255 + 0.19 * 191*/ rgb(243, 243, 243) 12%,
|
||||
rgb(255, 255, 255) 27%,
|
||||
rgb(255, 255, 255) 60%,
|
||||
/* (1 - 0.19) * 255 + 0.19 * 222*/ rgb(249, 249, 249) 85%,
|
||||
/* (1 - 0.27) * 255 + 0.27 * 98 */ rgb(213, 213, 213) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -787,29 +795,29 @@ input[type=text], input[type=search], textarea {
|
|||
|
||||
// generic
|
||||
&.check-circle-outline {
|
||||
@include color-svg('../images/check-circle-outline.svg', #DEDEDE);
|
||||
@include color-svg('../images/check-circle-outline.svg', #dedede);
|
||||
}
|
||||
&.alert-outline {
|
||||
@include color-svg('../images/alert-outline.svg', #DEDEDE);
|
||||
@include color-svg('../images/alert-outline.svg', #dedede);
|
||||
}
|
||||
|
||||
// import and export
|
||||
&.folder-outline {
|
||||
@include color-svg('../images/folder-outline.svg', #DEDEDE);
|
||||
@include color-svg('../images/folder-outline.svg', #dedede);
|
||||
}
|
||||
&.import {
|
||||
@include color-svg('../images/import.svg', #DEDEDE);
|
||||
@include color-svg('../images/import.svg', #dedede);
|
||||
}
|
||||
&.export {
|
||||
@include color-svg('../images/export.svg', #DEDEDE);
|
||||
@include color-svg('../images/export.svg', #dedede);
|
||||
}
|
||||
|
||||
// registration process
|
||||
&.lead-pencil {
|
||||
@include color-svg('../images/lead-pencil.svg', #DEDEDE);
|
||||
@include color-svg('../images/lead-pencil.svg', #dedede);
|
||||
}
|
||||
&.sync {
|
||||
@include color-svg('../images/sync.svg', #DEDEDE);
|
||||
@include color-svg('../images/sync.svg', #dedede);
|
||||
}
|
||||
|
||||
// delete
|
||||
|
@ -817,7 +825,7 @@ input[type=text], input[type=search], textarea {
|
|||
@include color-svg('../images/alert-outline.svg', red);
|
||||
}
|
||||
&.delete {
|
||||
@include color-svg('../images/delete.svg', #DEDEDE);
|
||||
@include color-svg('../images/delete.svg', #dedede);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -838,7 +846,7 @@ input[type=text], input[type=search], textarea {
|
|||
|
||||
&.neutral {
|
||||
color: black;
|
||||
background: #DEDEDE;
|
||||
background: #dedede;
|
||||
}
|
||||
&.destructive {
|
||||
background: red;
|
||||
|
@ -912,11 +920,16 @@ input[type=text], input[type=search], textarea {
|
|||
|
||||
//yellow border fix
|
||||
.inbox:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.text-security .inbox {
|
||||
.name, .body, .last-message, .sender, .conversation-title, .number {
|
||||
-webkit-text-security: square;
|
||||
.name,
|
||||
.body,
|
||||
.last-message,
|
||||
.sender,
|
||||
.conversation-title,
|
||||
.number {
|
||||
-webkit-text-security: square;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,11 +4,16 @@
|
|||
@include color-svg('../images/hourglass_full.svg', transparent);
|
||||
background-size: 100%;
|
||||
|
||||
&, .sand, &:before, &:after {
|
||||
&,
|
||||
.sand,
|
||||
&:before,
|
||||
&:after {
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
}
|
||||
.sand, &:before, &:after {
|
||||
.sand,
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
.conversation-stack,
|
||||
.new-conversation, .inbox, .gutter {
|
||||
.new-conversation,
|
||||
.inbox,
|
||||
.gutter {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.expired {
|
||||
.conversation-stack, .gutter {
|
||||
.conversation-stack,
|
||||
.gutter {
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
}
|
||||
|
@ -36,7 +39,7 @@
|
|||
padding-left: 2 * $button-height;
|
||||
display: none;
|
||||
|
||||
.network-status-message{
|
||||
.network-status-message {
|
||||
h3 {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
@ -79,7 +82,7 @@
|
|||
color: white;
|
||||
background-color: #999999;
|
||||
transition: background-color 0.5s;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
|
||||
.avatar {
|
||||
margin-bottom: -30px;
|
||||
|
@ -94,7 +97,7 @@
|
|||
.inactive .conversation-header {
|
||||
background-color: $grey_l !important;
|
||||
color: $grey_d;
|
||||
border-color: rgba(0,0,0,0.05);
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
.verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $grey_d);
|
||||
}
|
||||
|
@ -137,11 +140,11 @@ input.search {
|
|||
background-size: $search-x-size;
|
||||
|
||||
&.ltr {
|
||||
background-position : right $search-padding-right center;
|
||||
background-position: right $search-padding-right center;
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
background-position : left $search-padding-left center;
|
||||
background-position: left $search-padding-left center;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -175,12 +178,11 @@ input.search {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
opacity: 1.0
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
|
||||
.gutter .new-group-update-form {
|
||||
display: none;
|
||||
padding: 0.5em;
|
||||
|
@ -198,15 +200,14 @@ input.search {
|
|||
right: 12px;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.conversations .unread .contact-details {
|
||||
.name,
|
||||
.last-message,
|
||||
.last-timestamp {
|
||||
font-weight: bold;
|
||||
}
|
||||
.name,
|
||||
.last-message,
|
||||
.last-timestamp {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
|
@ -226,7 +227,8 @@ input.search {
|
|||
left: 302px;
|
||||
width: 225px;
|
||||
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
@ -271,8 +273,11 @@ input.search {
|
|||
color: white;
|
||||
border: 2px dashed white;
|
||||
overflow: visible;
|
||||
p { color: white; }
|
||||
&:before, &:after {
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
$ios-header-border-color: rgba(0,0,0,0.05);
|
||||
$ios-border-color: rgba(0,0,0,0.1);
|
||||
$ios-header-border-color: rgba(0, 0, 0, 0.05);
|
||||
$ios-border-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
.ios {
|
||||
#header {
|
||||
|
@ -8,7 +8,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
border-width: 0 1px 1px 0;
|
||||
background-color: $grey_l;
|
||||
color: $grey_d;
|
||||
h1 { display: none; }
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.gutter {
|
||||
border-right: 1px solid $ios-border-color;
|
||||
|
@ -37,11 +39,11 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
input[type=text]:active,
|
||||
input[type=text]:focus,
|
||||
input[type=search]:active,
|
||||
input[type=search]:focus,
|
||||
input[type=search].active,
|
||||
input[type='text']:active,
|
||||
input[type='text']:focus,
|
||||
input[type='search']:active,
|
||||
input[type='search']:focus,
|
||||
input[type='search'].active,
|
||||
form.active {
|
||||
outline-offset: 0;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
|
@ -54,7 +56,7 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
line-height: 34px;
|
||||
background-color: #dddddd;
|
||||
&.active.rtl {
|
||||
background-position : left $search-padding-left-ios center;
|
||||
background-position: left $search-padding-left-ios center;
|
||||
}
|
||||
}
|
||||
.conversation-header {
|
||||
|
@ -77,7 +79,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
}
|
||||
}
|
||||
|
||||
.avatar { display: none; }
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation .panel,
|
||||
|
@ -299,7 +303,8 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
padding-top: 0px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
video, audio {
|
||||
video,
|
||||
audio {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
@ -325,7 +330,8 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
.tail-wrapper.with-tail {
|
||||
position: relative;
|
||||
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
border-radius: 20px;
|
||||
|
@ -379,7 +385,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
background-color: $blue;
|
||||
}
|
||||
|
||||
&, .body, a {
|
||||
&,
|
||||
.body,
|
||||
a {
|
||||
@include invert-text-color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,135 +1,341 @@
|
|||
@mixin color-svg($svg, $color) {
|
||||
-webkit-mask: url($svg) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: $color;
|
||||
-webkit-mask: url($svg) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: $color;
|
||||
}
|
||||
@mixin header-icon-white($svg) {
|
||||
@include color-svg($svg, rgba(255,255,255, 0.8));
|
||||
&:focus, &:hover {
|
||||
@include color-svg($svg, rgba(255, 255, 255, 0.8));
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include color-svg($svg, white);
|
||||
}
|
||||
}
|
||||
@mixin header-icon-black($svg) {
|
||||
@include color-svg($svg, rgba(0,0,0, 0.5));
|
||||
&:focus, &:hover {
|
||||
@include color-svg($svg, rgba(0, 0, 0, 0.5));
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include color-svg($svg, black);
|
||||
}
|
||||
}
|
||||
@mixin avatar-colors {
|
||||
&.red { background-color: $material_red ; }
|
||||
&.pink { background-color: $material_pink ; }
|
||||
&.purple { background-color: $material_purple ; }
|
||||
&.deep_purple { background-color: $material_deep_purple ; }
|
||||
&.indigo { background-color: $material_indigo ; }
|
||||
&.blue { background-color: $material_blue ; }
|
||||
&.light_blue { background-color: $material_light_blue ; }
|
||||
&.cyan { background-color: $material_cyan ; }
|
||||
&.teal { background-color: $material_teal ; }
|
||||
&.green { background-color: $material_green ; }
|
||||
&.light_green { background-color: $material_light_green ; }
|
||||
&.orange { background-color: $material_orange ; }
|
||||
&.deep_orange { background-color: $material_deep_orange ; }
|
||||
&.amber { background-color: $material_amber ; }
|
||||
&.blue_grey { background-color: $material_blue_grey ; }
|
||||
&.grey { background-color: #999999 ; }
|
||||
&.default { background-color: $blue ; }
|
||||
&.red {
|
||||
background-color: $material_red;
|
||||
}
|
||||
&.pink {
|
||||
background-color: $material_pink;
|
||||
}
|
||||
&.purple {
|
||||
background-color: $material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
background-color: $material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
background-color: $material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
background-color: $material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
background-color: $material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
background-color: $material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
background-color: $material_teal;
|
||||
}
|
||||
&.green {
|
||||
background-color: $material_green;
|
||||
}
|
||||
&.light_green {
|
||||
background-color: $material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
background-color: $material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
background-color: $material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
background-color: $material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
background-color: $material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
background-color: #999999;
|
||||
}
|
||||
&.default {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
@mixin dark-avatar-colors {
|
||||
&.red { background-color: $dark_material_red ; }
|
||||
&.pink { background-color: $dark_material_pink ; }
|
||||
&.purple { background-color: $dark_material_purple ; }
|
||||
&.deep_purple { background-color: $dark_material_deep_purple ; }
|
||||
&.indigo { background-color: $dark_material_indigo ; }
|
||||
&.blue { background-color: $dark_material_blue ; }
|
||||
&.light_blue { background-color: $dark_material_light_blue ; }
|
||||
&.cyan { background-color: $dark_material_cyan ; }
|
||||
&.teal { background-color: $dark_material_teal ; }
|
||||
&.green { background-color: $dark_material_green ; }
|
||||
&.light_green { background-color: $dark_material_light_green ; }
|
||||
&.orange { background-color: $dark_material_orange ; }
|
||||
&.deep_orange { background-color: $dark_material_deep_orange ; }
|
||||
&.amber { background-color: $dark_material_amber ; }
|
||||
&.blue_grey { background-color: $dark_material_blue_grey ; }
|
||||
&.grey { background-color: #666666 ; }
|
||||
&.default { background-color: $blue ; }
|
||||
&.red {
|
||||
background-color: $dark_material_red;
|
||||
}
|
||||
&.pink {
|
||||
background-color: $dark_material_pink;
|
||||
}
|
||||
&.purple {
|
||||
background-color: $dark_material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
background-color: $dark_material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
background-color: $dark_material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
background-color: $dark_material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
background-color: $dark_material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
background-color: $dark_material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
background-color: $dark_material_teal;
|
||||
}
|
||||
&.green {
|
||||
background-color: $dark_material_green;
|
||||
}
|
||||
&.light_green {
|
||||
background-color: $dark_material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
background-color: $dark_material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
background-color: $dark_material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
background-color: $dark_material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
background-color: $dark_material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
background-color: #666666;
|
||||
}
|
||||
&.default {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
@mixin twenty-percent-colors {
|
||||
&.red { background-color: rgba($dark_material_red, 0.2) ; }
|
||||
&.pink { background-color: rgba($dark_material_pink, 0.2) ; }
|
||||
&.purple { background-color: rgba($dark_material_purple, 0.2) ; }
|
||||
&.deep_purple { background-color: rgba($dark_material_deep_purple, 0.2) ; }
|
||||
&.indigo { background-color: rgba($dark_material_indigo, 0.2) ; }
|
||||
&.blue { background-color: rgba($dark_material_blue, 0.2) ; }
|
||||
&.light_blue { background-color: rgba($dark_material_light_blue, 0.2) ; }
|
||||
&.cyan { background-color: rgba($dark_material_cyan, 0.2) ; }
|
||||
&.teal { background-color: rgba($dark_material_teal, 0.2) ; }
|
||||
&.green { background-color: rgba($dark_material_green, 0.2) ; }
|
||||
&.light_green { background-color: rgba($dark_material_light_green, 0.2) ; }
|
||||
&.orange { background-color: rgba($dark_material_orange, 0.2) ; }
|
||||
&.deep_orange { background-color: rgba($dark_material_deep_orange, 0.2) ; }
|
||||
&.amber { background-color: rgba($dark_material_amber, 0.2) ; }
|
||||
&.blue_grey { background-color: rgba($dark_material_blue_grey, 0.2) ; }
|
||||
&.grey { background-color: rgba(#666666, 0.2) ; }
|
||||
&.default { background-color: rgba($blue, 0.2) ; }
|
||||
&.red {
|
||||
background-color: rgba($dark_material_red, 0.2);
|
||||
}
|
||||
&.pink {
|
||||
background-color: rgba($dark_material_pink, 0.2);
|
||||
}
|
||||
&.purple {
|
||||
background-color: rgba($dark_material_purple, 0.2);
|
||||
}
|
||||
&.deep_purple {
|
||||
background-color: rgba($dark_material_deep_purple, 0.2);
|
||||
}
|
||||
&.indigo {
|
||||
background-color: rgba($dark_material_indigo, 0.2);
|
||||
}
|
||||
&.blue {
|
||||
background-color: rgba($dark_material_blue, 0.2);
|
||||
}
|
||||
&.light_blue {
|
||||
background-color: rgba($dark_material_light_blue, 0.2);
|
||||
}
|
||||
&.cyan {
|
||||
background-color: rgba($dark_material_cyan, 0.2);
|
||||
}
|
||||
&.teal {
|
||||
background-color: rgba($dark_material_teal, 0.2);
|
||||
}
|
||||
&.green {
|
||||
background-color: rgba($dark_material_green, 0.2);
|
||||
}
|
||||
&.light_green {
|
||||
background-color: rgba($dark_material_light_green, 0.2);
|
||||
}
|
||||
&.orange {
|
||||
background-color: rgba($dark_material_orange, 0.2);
|
||||
}
|
||||
&.deep_orange {
|
||||
background-color: rgba($dark_material_deep_orange, 0.2);
|
||||
}
|
||||
&.amber {
|
||||
background-color: rgba($dark_material_amber, 0.2);
|
||||
}
|
||||
&.blue_grey {
|
||||
background-color: rgba($dark_material_blue_grey, 0.2);
|
||||
}
|
||||
&.grey {
|
||||
background-color: rgba(#666666, 0.2);
|
||||
}
|
||||
&.default {
|
||||
background-color: rgba($blue, 0.2);
|
||||
}
|
||||
}
|
||||
@mixin text-colors {
|
||||
&.red { color: $material_red ; }
|
||||
&.pink { color: $material_pink ; }
|
||||
&.purple { color: $material_purple ; }
|
||||
&.deep_purple { color: $material_deep_purple ; }
|
||||
&.indigo { color: $material_indigo ; }
|
||||
&.blue { color: $material_blue ; }
|
||||
&.light_blue { color: $material_light_blue ; }
|
||||
&.cyan { color: $material_cyan ; }
|
||||
&.teal { color: $material_teal ; }
|
||||
&.green { color: $material_green ; }
|
||||
&.light_green { color: $material_light_green ; }
|
||||
&.orange { color: $material_orange ; }
|
||||
&.deep_orange { color: $material_deep_orange ; }
|
||||
&.amber { color: $material_amber ; }
|
||||
&.blue_grey { color: $material_blue_grey ; }
|
||||
&.grey { color: #999999 ; }
|
||||
&.default { color: $blue ; }
|
||||
&.red {
|
||||
color: $material_red;
|
||||
}
|
||||
&.pink {
|
||||
color: $material_pink;
|
||||
}
|
||||
&.purple {
|
||||
color: $material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
color: $material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
color: $material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
color: $material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
color: $material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
color: $material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
color: $material_teal;
|
||||
}
|
||||
&.green {
|
||||
color: $material_green;
|
||||
}
|
||||
&.light_green {
|
||||
color: $material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
color: $material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
color: $material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
color: $material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
color: $material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
color: #999999;
|
||||
}
|
||||
&.default {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Deduplicate these! Can SASS functions generate property names?
|
||||
@mixin message-replies-colors {
|
||||
&.red { border-left-color: $material_red ; }
|
||||
&.pink { border-left-color: $material_pink ; }
|
||||
&.purple { border-left-color: $material_purple ; }
|
||||
&.deep_purple { border-left-color: $material_deep_purple ; }
|
||||
&.indigo { border-left-color: $material_indigo ; }
|
||||
&.blue { border-left-color: $material_blue ; }
|
||||
&.light_blue { border-left-color: $material_light_blue ; }
|
||||
&.cyan { border-left-color: $material_cyan ; }
|
||||
&.teal { border-left-color: $material_teal ; }
|
||||
&.green { border-left-color: $material_green ; }
|
||||
&.light_green { border-left-color: $material_light_green ; }
|
||||
&.orange { border-left-color: $material_orange ; }
|
||||
&.deep_orange { border-left-color: $material_deep_orange ; }
|
||||
&.amber { border-left-color: $material_amber ; }
|
||||
&.blue_grey { border-left-color: $material_blue_grey ; }
|
||||
&.grey { border-left-color: #999999 ; }
|
||||
&.default { border-left-color: $blue ; }
|
||||
&.red {
|
||||
border-left-color: $material_red;
|
||||
}
|
||||
&.pink {
|
||||
border-left-color: $material_pink;
|
||||
}
|
||||
&.purple {
|
||||
border-left-color: $material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
border-left-color: $material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
border-left-color: $material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
border-left-color: $material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
border-left-color: $material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
border-left-color: $material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
border-left-color: $material_teal;
|
||||
}
|
||||
&.green {
|
||||
border-left-color: $material_green;
|
||||
}
|
||||
&.light_green {
|
||||
border-left-color: $material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
border-left-color: $material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
border-left-color: $material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
border-left-color: $material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
border-left-color: $material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
border-left-color: #999999;
|
||||
}
|
||||
&.default {
|
||||
border-left-color: $blue;
|
||||
}
|
||||
}
|
||||
@mixin dark-message-replies-colors {
|
||||
&.red { border-left-color: $dark_material_red ; }
|
||||
&.pink { border-left-color: $dark_material_pink ; }
|
||||
&.purple { border-left-color: $dark_material_purple ; }
|
||||
&.deep_purple { border-left-color: $dark_material_deep_purple ; }
|
||||
&.indigo { border-left-color: $dark_material_indigo ; }
|
||||
&.blue { border-left-color: $dark_material_blue ; }
|
||||
&.light_blue { border-left-color: $dark_material_light_blue ; }
|
||||
&.cyan { border-left-color: $dark_material_cyan ; }
|
||||
&.teal { border-left-color: $dark_material_teal ; }
|
||||
&.green { border-left-color: $dark_material_green ; }
|
||||
&.light_green { border-left-color: $dark_material_light_green ; }
|
||||
&.orange { border-left-color: $dark_material_orange ; }
|
||||
&.deep_orange { border-left-color: $dark_material_deep_orange ; }
|
||||
&.amber { border-left-color: $dark_material_amber ; }
|
||||
&.blue_grey { border-left-color: $dark_material_blue_grey ; }
|
||||
&.grey { border-left-color: #666666 ; }
|
||||
&.default { border-left-color: $blue ; }
|
||||
&.red {
|
||||
border-left-color: $dark_material_red;
|
||||
}
|
||||
&.pink {
|
||||
border-left-color: $dark_material_pink;
|
||||
}
|
||||
&.purple {
|
||||
border-left-color: $dark_material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
border-left-color: $dark_material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
border-left-color: $dark_material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
border-left-color: $dark_material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
border-left-color: $dark_material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
border-left-color: $dark_material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
border-left-color: $dark_material_teal;
|
||||
}
|
||||
&.green {
|
||||
border-left-color: $dark_material_green;
|
||||
}
|
||||
&.light_green {
|
||||
border-left-color: $dark_material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
border-left-color: $dark_material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
border-left-color: $dark_material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
border-left-color: $dark_material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
border-left-color: $dark_material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
border-left-color: #666666;
|
||||
}
|
||||
&.default {
|
||||
border-left-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin invert-text-color {
|
||||
|
|
|
@ -17,6 +17,6 @@
|
|||
background: white;
|
||||
border-radius: $border-radius;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,21 +7,75 @@
|
|||
}
|
||||
}
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: -o-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
-webkit-background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: -o-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.progress-bar.active {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
|
|
|
@ -10,8 +10,9 @@
|
|||
padding: 0;
|
||||
border: none;
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
@ -36,8 +37,9 @@
|
|||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
@ -51,14 +53,18 @@
|
|||
background: lighten($green, 20%);
|
||||
border: 1px solid $green;
|
||||
|
||||
.icon { @include color-svg('../images/check.svg', $green); }
|
||||
.icon {
|
||||
@include color-svg('../images/check.svg', $green);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
background: lighten($red, 20%);
|
||||
border: 1px solid $red;
|
||||
|
||||
.icon { @include color-svg('../images/x.svg', $red); }
|
||||
.icon {
|
||||
@include color-svg('../images/x.svg', $red);
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
|
@ -68,9 +74,15 @@
|
|||
padding: 0 10px;
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity:0; }
|
||||
50% { opacity:1; }
|
||||
100% { opacity:0; }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
|
@ -23,13 +23,13 @@
|
|||
margin: 0 0 20px 20px;
|
||||
}
|
||||
.synced_at {
|
||||
font-size: $font-size-small;
|
||||
color: $grey;
|
||||
font-size: $font-size-small;
|
||||
color: $grey;
|
||||
}
|
||||
.sync_failed {
|
||||
display: none;
|
||||
font-size: $font-size-small;
|
||||
color: red;
|
||||
display: none;
|
||||
font-size: $font-size-small;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.clear-data-settings {
|
||||
|
|
|
@ -9,8 +9,8 @@ $grey_l3: darken($grey_l, 20%);
|
|||
$grey_l4: darken($grey_l, 40%);
|
||||
$grey: #616161;
|
||||
$grey_d: #454545;
|
||||
$green: #47D647;
|
||||
$red: #EF8989;
|
||||
$green: #47d647;
|
||||
$red: #ef8989;
|
||||
|
||||
$z-index-modal: 100;
|
||||
|
||||
|
@ -55,37 +55,37 @@ $error-icon-size: 24px;
|
|||
$font-size: 14px;
|
||||
$font-size-small: (13/14) + em;
|
||||
|
||||
$material_red: #EF5350;
|
||||
$material_pink: #EC407A;
|
||||
$material_purple: #AB47BC;
|
||||
$material_deep_purple: #7E57C2;
|
||||
$material_indigo: #5C6BC0;
|
||||
$material_blue: #2196F3;
|
||||
$material_light_blue: #03A9F4;
|
||||
$material_cyan: #00BCD4;
|
||||
$material_red: #ef5350;
|
||||
$material_pink: #ec407a;
|
||||
$material_purple: #ab47bc;
|
||||
$material_deep_purple: #7e57c2;
|
||||
$material_indigo: #5c6bc0;
|
||||
$material_blue: #2196f3;
|
||||
$material_light_blue: #03a9f4;
|
||||
$material_cyan: #00bcd4;
|
||||
$material_teal: #009688;
|
||||
$material_green: #4CAF50;
|
||||
$material_light_green: #7CB342;
|
||||
$material_orange: #FF9800;
|
||||
$material_deep_orange: #FF5722;
|
||||
$material_amber: #FFB300;
|
||||
$material_blue_grey: #607D8B;
|
||||
$material_green: #4caf50;
|
||||
$material_light_green: #7cb342;
|
||||
$material_orange: #ff9800;
|
||||
$material_deep_orange: #ff5722;
|
||||
$material_amber: #ffb300;
|
||||
$material_blue_grey: #607d8b;
|
||||
|
||||
$dark_material_red: #D32F2F;
|
||||
$dark_material_pink: #C2185B;
|
||||
$dark_material_purple: #7B1FA2;
|
||||
$dark_material_deep_purple: #512DA8;
|
||||
$dark_material_indigo: #303F9F;
|
||||
$dark_material_blue: #1976D2;
|
||||
$dark_material_light_blue: #0288D1;
|
||||
$dark_material_cyan: #0097A7;
|
||||
$dark_material_teal: #00796B;
|
||||
$dark_material_green: #388E3C;
|
||||
$dark_material_light_green: #689F38;
|
||||
$dark_material_orange: #F57C00;
|
||||
$dark_material_deep_orange: #E64A19;
|
||||
$dark_material_amber: #FFA000;
|
||||
$dark_material_blue_grey: #455A64;
|
||||
$dark_material_red: #d32f2f;
|
||||
$dark_material_pink: #c2185b;
|
||||
$dark_material_purple: #7b1fa2;
|
||||
$dark_material_deep_purple: #512da8;
|
||||
$dark_material_indigo: #303f9f;
|
||||
$dark_material_blue: #1976d2;
|
||||
$dark_material_light_blue: #0288d1;
|
||||
$dark_material_cyan: #0097a7;
|
||||
$dark_material_teal: #00796b;
|
||||
$dark_material_green: #388e3c;
|
||||
$dark_material_light_green: #689f38;
|
||||
$dark_material_orange: #f57c00;
|
||||
$dark_material_deep_orange: #e64a19;
|
||||
$dark_material_amber: #ffa000;
|
||||
$dark_material_blue_grey: #455a64;
|
||||
|
||||
// Android
|
||||
$android-bubble-padding-horizontal: 12px;
|
||||
|
|
|
@ -3,7 +3,7 @@ $grey-dark_l2: darken($grey-dark, 4%);
|
|||
$grey-dark_l3: darken($grey-dark_l2, 7%);
|
||||
$grey-dark_l4: darken($grey-dark_l3, 8%);
|
||||
$button-dark: #ccc;
|
||||
$text-dark: #CCCCCC;
|
||||
$text-dark: #cccccc;
|
||||
$text-dark_l2: darken($text-dark, 30%);
|
||||
|
||||
.android-dark {
|
||||
|
@ -14,7 +14,9 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
background-color: $grey-dark;
|
||||
}
|
||||
color: $text-dark;
|
||||
a { color: #57a5e5; }
|
||||
a {
|
||||
color: #57a5e5;
|
||||
}
|
||||
hr {
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
@ -40,7 +42,9 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
background-color: darken($button-dark, 8%);
|
||||
}
|
||||
}
|
||||
.message-detail, .message-container, .conversation,
|
||||
.message-detail,
|
||||
.message-container,
|
||||
.conversation,
|
||||
.discussion-container {
|
||||
background-color: $grey-dark_l3;
|
||||
}
|
||||
|
@ -87,10 +91,12 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
.contact-details .number {
|
||||
color: $text-dark_l2;
|
||||
.verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $text-dark_l2);
|
||||
@include color-svg('../images/verified-check.svg', $text-dark_l2);
|
||||
}
|
||||
}
|
||||
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
|
||||
.group-member-list .members .contact,
|
||||
.new-group-update .members .contact,
|
||||
.attachment-previews img {
|
||||
background-color: $grey-dark_l3;
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
@ -100,7 +106,9 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
.conversation .conversation-loading-screen {
|
||||
background-color: $grey-dark_l3;
|
||||
}
|
||||
.avatar, .conversation-header, .bubble {
|
||||
.avatar,
|
||||
.conversation-header,
|
||||
.bubble {
|
||||
@include dark-avatar-colors;
|
||||
}
|
||||
.message-list .advisory {
|
||||
|
@ -146,7 +154,7 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
transform: rotateZ(-45deg);
|
||||
}
|
||||
.capture-audio .microphone:before {
|
||||
@include color-svg('../images/microphone.svg', white);
|
||||
@include color-svg('../images/microphone.svg', white);
|
||||
}
|
||||
.conversations {
|
||||
background-color: $grey-dark_l2;
|
||||
|
@ -166,7 +174,8 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
background-color: $grey-dark_l3;
|
||||
border-color: $grey-dark_l2;
|
||||
@include invert-text-color;
|
||||
&.active.ltr, &.active.rtl {
|
||||
&.active.ltr,
|
||||
&.active.rtl {
|
||||
background-image: url('../images/x_white.svg');
|
||||
}
|
||||
}
|
||||
|
@ -189,7 +198,12 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
|
||||
.incoming .bubble {
|
||||
.sender, .content, .body, .meta, a, .fileView {
|
||||
.sender,
|
||||
.content,
|
||||
.body,
|
||||
.meta,
|
||||
a,
|
||||
.fileView {
|
||||
@include invert-text-color;
|
||||
}
|
||||
.content {
|
||||
|
@ -199,7 +213,7 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
}
|
||||
|
||||
.incoming .bubble .fileView .icon{
|
||||
.incoming .bubble .fileView .icon {
|
||||
@include color-svg('../images/file.svg', white);
|
||||
&.audio {
|
||||
@include color-svg('../images/audio.svg', white);
|
||||
|
@ -213,15 +227,15 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
|
||||
.outgoing .bubble .fileView .icon {
|
||||
@include color-svg('../images/file.svg', #CCCCCC);
|
||||
@include color-svg('../images/file.svg', #cccccc);
|
||||
&.audio {
|
||||
@include color-svg('../images/audio.svg', #CCCCCC);
|
||||
@include color-svg('../images/audio.svg', #cccccc);
|
||||
}
|
||||
&.video {
|
||||
@include color-svg('../images/video.svg', #CCCCCC);
|
||||
@include color-svg('../images/video.svg', #cccccc);
|
||||
}
|
||||
&.voice {
|
||||
@include color-svg('../images/voice.svg', #CCCCCC);
|
||||
@include color-svg('../images/voice.svg', #cccccc);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -260,10 +274,10 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.15);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.25);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
|
@ -275,7 +289,7 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
|
||||
.message-list .last-seen-indicator-view {
|
||||
.bar {
|
||||
border-top: 1px solid rgba(255, 255, 255, .0625);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.0625);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
|
@ -294,17 +308,17 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
@include color-svg('../images/down.svg', black);
|
||||
}
|
||||
.icon:hover {
|
||||
background-color: white;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.new-messages {
|
||||
&.new-messages {
|
||||
background-color: $blue;
|
||||
.icon {
|
||||
@include color-svg('../images/down.svg', white);
|
||||
}
|
||||
&:hover {
|
||||
background-color: #1472bd;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #1472bd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
// Global Settings, Variables, and Mixins
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'global';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'global';
|
||||
|
||||
// Components
|
||||
@import 'progress';
|
||||
@import 'hourglass';
|
||||
@import 'modal';
|
||||
@import 'debugLog';
|
||||
@import 'lightbox';
|
||||
@import 'recorder';
|
||||
@import 'emoji';
|
||||
@import 'settings';
|
||||
@import 'progress';
|
||||
@import 'hourglass';
|
||||
@import 'modal';
|
||||
@import 'debugLog';
|
||||
@import 'lightbox';
|
||||
@import 'recorder';
|
||||
@import 'emoji';
|
||||
@import 'settings';
|
||||
|
||||
// Build the main view
|
||||
@import 'index';
|
||||
@import 'conversation';
|
||||
@import 'ios';
|
||||
@import 'android';
|
||||
@import 'android-dark';
|
||||
@import 'index';
|
||||
@import 'conversation';
|
||||
@import 'ios';
|
||||
@import 'android';
|
||||
@import 'android-dark';
|
||||
|
||||
// Installer
|
||||
@import 'options';
|
||||
@import 'options';
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
@import 'progress';
|
||||
.iti-flag {
|
||||
// override intlTelInput's flags image location
|
||||
background: url("../images/flags.png");
|
||||
background: url('../images/flags.png');
|
||||
}
|
||||
|
||||
.intl-tel-input .country-list {
|
||||
|
|
|
@ -1,54 +1,55 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
/* Basic Options */
|
||||
"target": "es2016", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
|
||||
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||
"lib": [ /* Specify library files to be included in the compilation. */
|
||||
"dom", // Required to access `window`
|
||||
"es2017", // Required by `@sindresorhus/is`
|
||||
// Basic Options
|
||||
"target": "es2016", // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'.
|
||||
"module": "commonjs", // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
|
||||
// Specify library files to be included in the compilation.
|
||||
"lib": [
|
||||
"dom", // Required to access `window`
|
||||
"es2017" // Required by `@sindresorhus/is`
|
||||
],
|
||||
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
// "outDir": "./", /* Redirect output structure to the directory. */
|
||||
"rootDir": "./ts", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
// "noEmit": true, /* Do not emit outputs. */
|
||||
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
// "allowJs": true, // Allow javascript files to be compiled.
|
||||
// "checkJs": true, // Report errors in .js files.
|
||||
"jsx": "react", // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
|
||||
// "declaration": true, // Generates corresponding '.d.ts' file.
|
||||
// "sourceMap": true, // Generates corresponding '.map' file.
|
||||
// "outFile": "./", // Concatenate and emit output to single file.
|
||||
// "outDir": "./", // Redirect output structure to the directory.
|
||||
"rootDir": "./ts", // Specify the root directory of input files. Use to control the output directory structure with --outDir.
|
||||
// "removeComments": true, // Do not emit comments to output.
|
||||
// "noEmit": true, // Do not emit outputs.
|
||||
// "importHelpers": true, // Import emit helpers from 'tslib'.
|
||||
// "downlevelIteration": true, // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
|
||||
// "isolatedModules": true, // Transpile each file as a separate module (similar to 'ts.transpileModule').
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// Strict Type-Checking Options
|
||||
"strict": true, // Enable all strict type-checking options.
|
||||
|
||||
/* Additional Checks */
|
||||
"noUnusedLocals": true, /* Report errors on unused locals. */
|
||||
"noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||
// Additional Checks
|
||||
"noUnusedLocals": true, // Report errors on unused locals.
|
||||
"noUnusedParameters": true, // Report errors on unused parameters.
|
||||
"noImplicitReturns": true, // Report error when not all code paths in function return a value.
|
||||
"noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement.
|
||||
|
||||
/* Module Resolution Options */
|
||||
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||
// "types": [], /* Type declaration files to be included in compilation. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||
// Module Resolution Options
|
||||
"moduleResolution": "node", // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
|
||||
// "baseUrl": "./", // Base directory to resolve non-absolute module names.
|
||||
// "paths": {}, // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
|
||||
// "rootDirs": [], // List of root folders whose combined content represents the structure of the project at runtime.
|
||||
// "typeRoots": [], // List of folders to include type definitions from.
|
||||
// "types": [], // Type declaration files to be included in compilation.
|
||||
// "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
|
||||
"esModuleInterop": true // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
|
||||
// "preserveSymlinks": true, // Do not resolve the real path of symlinks.
|
||||
|
||||
/* Source Map Options */
|
||||
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||
// Source Map Options
|
||||
// "sourceRoot": "./", // Specify the location where debugger should locate TypeScript files instead of source locations.
|
||||
// "mapRoot": "./", // Specify the location where debugger should locate map files instead of generated locations.
|
||||
// "inlineSourceMap": true, // Emit a single file with source maps instead of having a separate file.
|
||||
// "inlineSources": true, // Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set.
|
||||
|
||||
/* Experimental Options */
|
||||
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||
// Experimental Options
|
||||
// "experimentalDecorators": true, // Enables experimental support for ES7 decorators.
|
||||
// "emitDecoratorMetadata": true, // Enables experimental support for emitting type metadata for decorators.
|
||||
}
|
||||
}
|
||||
|
|
39
tslint.json
39
tslint.json
|
@ -1,12 +1,16 @@
|
|||
{
|
||||
"defaultSeverity": "error",
|
||||
"extends": [
|
||||
"tslint:recommended",
|
||||
"tslint-react"
|
||||
],
|
||||
"extends": ["tslint:recommended", "tslint-react"],
|
||||
"jsRules": {},
|
||||
"rules": {
|
||||
"align": [true, "arguments", "elements", "members", "parameters", "statements"],
|
||||
"align": [
|
||||
true,
|
||||
"arguments",
|
||||
"elements",
|
||||
"members",
|
||||
"parameters",
|
||||
"statements"
|
||||
],
|
||||
"array-type": [true, "generic"],
|
||||
|
||||
// Preferred by Prettier:
|
||||
|
@ -23,7 +27,7 @@
|
|||
"linebreak-style": [true, "LF"],
|
||||
|
||||
// Ignore `import`s to allow Prettier formatting:
|
||||
"max-line-length": [true, {"limit": 90, "ignore-pattern": "^import"}],
|
||||
"max-line-length": [true, { "limit": 90, "ignore-pattern": "^import" }],
|
||||
|
||||
"mocha-avoid-only": true,
|
||||
// Disabled until we can allow dynamically generated tests:
|
||||
|
@ -37,12 +41,21 @@
|
|||
|
||||
// Ignore import sources order until we can specify that we want ordering
|
||||
// based on import name vs module name:
|
||||
"ordered-imports": [true, {
|
||||
"import-sources-order": "any",
|
||||
"named-imports-order": "case-insensitive"
|
||||
}],
|
||||
"ordered-imports": [
|
||||
true,
|
||||
{
|
||||
"import-sources-order": "any",
|
||||
"named-imports-order": "case-insensitive"
|
||||
}
|
||||
],
|
||||
|
||||
"quotemark": [true, "single", "jsx-double", "avoid-template", "avoid-escape"],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single",
|
||||
"jsx-double",
|
||||
"avoid-template",
|
||||
"avoid-escape"
|
||||
],
|
||||
|
||||
// Preferred by Prettier:
|
||||
"semicolon": [true, "always", "ignore-bound-class-methods"],
|
||||
|
@ -62,7 +75,5 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"rulesDirectory": [
|
||||
"node_modules/tslint-microsoft-contrib"
|
||||
]
|
||||
"rulesDirectory": ["node_modules/tslint-microsoft-contrib"]
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue