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:
Daniel Gasienica 2018-05-07 18:44:37 -04:00 committed by GitHub
commit bad4681ade
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 816 additions and 449 deletions

View file

@ -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

View file

@ -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",

View file

@ -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');
}
}

View file

@ -9,14 +9,14 @@
}
.conversation-name + .conversation-number {
&:before {
content:"\00b7"; // &middot
content: '\00b7'; // &middot
font-weight: bold;
padding: 0 5px 0 4px;
}
}
.conversation-title .verified {
&:before {
content:"\00b7"; // &middot
content: '\00b7'; // &middot
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"; // &middot
content: '\00b7'; // &middot
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);

View file

@ -67,6 +67,5 @@
border: solid 1px #ccc;
border-right: none;
}
}
}

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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 {

View file

@ -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);
}
}

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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;

View file

@ -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;
}
}
}
}

View file

@ -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';

View file

@ -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 {

View file

@ -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.
}
}

View file

@ -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"]
}