Remove unneded files See merge request soapbox-pub/soapbox-fe!35merge-requests/36/head
Alex Gleason
4 years ago
commit
66dbed005d
@ -0,0 +1,10 @@
|
||||
import loadPolyfills from './soapbox/load_polyfills';
|
||||
import { start } from './soapbox/common';
|
||||
|
||||
start();
|
||||
|
||||
loadPolyfills().then(() => {
|
||||
require('./soapbox/main').default();
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 604 B |
|
Before Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 273 B |
|
Before Width: | Height: | Size: 205 B |
|
Before Width: | Height: | Size: 197 B |
|
Before Width: | Height: | Size: 252 B |
|
Before Width: | Height: | Size: 395 B |
|
Before Width: | Height: | Size: 305 B |
|
Before Width: | Height: | Size: 220 B |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 423 B |
|
Before Width: | Height: | Size: 251 B |
|
Before Width: | Height: | Size: 387 B |
|
Before Width: | Height: | Size: 182 B |
|
Before Width: | Height: | Size: 412 B |
|
Before Width: | Height: | Size: 387 B |
|
Before Width: | Height: | Size: 376 B |
|
Before Width: | Height: | Size: 319 B |
|
Before Width: | Height: | Size: 345 B |
|
Before Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
@ -1,27 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import loadPolyfills from '../soapbox/load_polyfills';
|
||||
import { start } from '../soapbox/common';
|
||||
|
||||
start();
|
||||
|
||||
function loaded() {
|
||||
const TimelineContainer = require('../soapbox/containers/timeline_container').default;
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const mountNode = document.getElementById('soapbox-timeline');
|
||||
|
||||
if (mountNode !== null) {
|
||||
const props = JSON.parse(mountNode.getAttribute('data-props'));
|
||||
ReactDOM.render(<TimelineContainer {...props} />, mountNode);
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
const ready = require('../soapbox/ready').default;
|
||||
ready(loaded);
|
||||
}
|
||||
|
||||
loadPolyfills().then(main).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
@ -1,123 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import { delegate } from 'rails-ujs';
|
||||
|
||||
const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]';
|
||||
|
||||
delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
|
||||
[].forEach.call(document.querySelectorAll(batchCheckboxClassName), (content) => {
|
||||
content.checked = target.checked;
|
||||
});
|
||||
});
|
||||
|
||||
delegate(document, batchCheckboxClassName, 'change', () => {
|
||||
const checkAllElement = document.querySelector('#batch_checkbox_all');
|
||||
|
||||
if (checkAllElement) {
|
||||
checkAllElement.checked = [].every.call(document.querySelectorAll(batchCheckboxClassName), (content) => content.checked);
|
||||
checkAllElement.indeterminate = !checkAllElement.checked && [].some.call(document.querySelectorAll(batchCheckboxClassName), (content) => content.checked);
|
||||
}
|
||||
});
|
||||
|
||||
delegate(document, '.media-spoiler-show-button', 'click', () => {
|
||||
[].forEach.call(document.querySelectorAll('button.media-spoiler'), (element) => {
|
||||
element.click();
|
||||
});
|
||||
});
|
||||
|
||||
delegate(document, '.media-spoiler-hide-button', 'click', () => {
|
||||
[].forEach.call(document.querySelectorAll('.spoiler-button.spoiler-button--visible button'), (element) => {
|
||||
element.click();
|
||||
});
|
||||
});
|
||||
|
||||
delegate(document, '#domain_block_severity', 'change', ({ target }) => {
|
||||
const rejectMediaDiv = document.querySelector('.input.with_label.domain_block_reject_media');
|
||||
const rejectReportsDiv = document.querySelector('.input.with_label.domain_block_reject_reports');
|
||||
|
||||
if (rejectMediaDiv) {
|
||||
rejectMediaDiv.style.display = (target.value === 'suspend') ? 'none' : 'block';
|
||||
}
|
||||
|
||||
if (rejectReportsDiv) {
|
||||
rejectReportsDiv.style.display = (target.value === 'suspend') ? 'none' : 'block';
|
||||
}
|
||||
});
|
||||
|
||||
delegate(document, '.btngroup__btn', 'click', ({ target: btn }) => {
|
||||
const btngroup = btn.parentElement;
|
||||
const btngroup_sets = document.querySelector(btngroup.dataset.sets);
|
||||
const btngroup_shows = document.querySelector(btngroup.dataset.shows);
|
||||
|
||||
const btn_shows = document.querySelector(btn.dataset.shows);
|
||||
const btn_hides = document.querySelector(btn.dataset.hides);
|
||||
const btn_focuses = document.querySelector(btn.dataset.focuses);
|
||||
const btn_value = btn.dataset.value;
|
||||
|
||||
// Reset other button states
|
||||
btngroup.querySelectorAll('.btngroup__btn').forEach((other_btn) => {
|
||||
const other_btn_shows = document.querySelector(other_btn.dataset.shows);
|
||||
const other_btn_hides = document.querySelector(other_btn.dataset.hides);
|
||||
if (other_btn_shows) {
|
||||
other_btn_shows.style.display = 'none';
|
||||
}
|
||||
if (other_btn_hides) {
|
||||
other_btn_hides.style.display = '';
|
||||
}
|
||||
other_btn.classList.remove('btngroup__btn--active');
|
||||
});
|
||||
|
||||
// Set given input
|
||||
if (btngroup_sets) {
|
||||
btngroup_sets.value = btn_value;
|
||||
}
|
||||
|
||||
// Highlight current button
|
||||
btn.classList.add('btngroup__btn--active');
|
||||
|
||||
// Set visibility of given elements
|
||||
if (btn_shows) {
|
||||
btn_shows.style.display = '';
|
||||
}
|
||||
if (btngroup_shows) {
|
||||
btngroup_shows.style.display = '';
|
||||
}
|
||||
if (btn_hides) {
|
||||
btn_hides.style.display = 'none';
|
||||
}
|
||||
|
||||
// Focus given elements
|
||||
if (btn_focuses) {
|
||||
btn_focuses.focus();
|
||||
}
|
||||
|
||||
return false; // Prevent form submit
|
||||
});
|
||||
|
||||
delegate(document, '.payform', 'submit', (e) => {
|
||||
e.preventDefault();
|
||||
document.getElementById('paybtn').disabled = true;
|
||||
|
||||
const stripe_pk = document.querySelector('meta[name=\'stripe-pk\']').content;
|
||||
const csrf_token = document.querySelector('meta[name=\'csrf-token\']').content;
|
||||
const price = Math.floor(document.getElementById('price').value.replace(/[^0-9.]/, '') * 100);
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const stripe = Stripe(stripe_pk);
|
||||
const req = new XMLHttpRequest();
|
||||
|
||||
function checkout() {
|
||||
stripe.redirectToCheckout({
|
||||
sessionId: this.responseText,
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
console.error('Could not connect to Stripe checkout');
|
||||
});
|
||||
}
|
||||
|
||||
req.addEventListener('load', checkout);
|
||||
req.open('POST', '/donate/stripe');
|
||||
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
req.setRequestHeader('X-CSRF-Token', csrf_token);
|
||||
req.send('amount=' + price);
|
||||
});
|
||||
@ -1,10 +0,0 @@
|
||||
import loadPolyfills from '../soapbox/load_polyfills';
|
||||
import { start } from '../soapbox/common';
|
||||
|
||||
start();
|
||||
|
||||
loadPolyfills().then(() => {
|
||||
require('../soapbox/main').default();
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
@ -1 +0,0 @@
|
||||
//
|
||||
@ -1 +0,0 @@
|
||||
require('../styles/mailer.scss');
|
||||
@ -1,248 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import escapeTextContentForBrowser from 'escape-html';
|
||||
import loadPolyfills from '../soapbox/load_polyfills';
|
||||
import ready from '../soapbox/ready';
|
||||
import { start } from '../soapbox/common';
|
||||
|
||||
start();
|
||||
|
||||
window.addEventListener('message', e => {
|
||||
const data = e.data || {};
|
||||
|
||||
if (!window.parent || data.type !== 'setHeight') {
|
||||
return;
|
||||
}
|
||||
|
||||
ready(() => {
|
||||
window.parent.postMessage({
|
||||
type: 'setHeight',
|
||||
id: data.id,
|
||||
height: document.getElementsByTagName('html')[0].scrollHeight,
|
||||
}, '*');
|
||||
});
|
||||
});
|
||||
|
||||
function main() {
|
||||
const IntlMessageFormat = require('intl-messageformat').default;
|
||||
import('intl-pluralrules'); // eslint-disable-line
|
||||
const { timeAgoString } = require('../soapbox/components/relative_timestamp');
|
||||
const { delegate } = require('rails-ujs');
|
||||
const emojify = require('../soapbox/features/emoji/emoji').default;
|
||||
const { getLocale } = require('../soapbox/locales');
|
||||
const { messages } = getLocale();
|
||||
//(Rjc) 2019-05-24 defined but never used
|
||||
// const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Rellax = require('rellax');
|
||||
const createHistory = require('history').createBrowserHistory; // eslint-disable-line
|
||||
|
||||
const scrollToDetailedStatus = () => {
|
||||
const history = createHistory();
|
||||
const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
|
||||
const location = history.location;
|
||||
|
||||
if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
|
||||
detailedStatuses[0].scrollIntoView();
|
||||
history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
|
||||
}
|
||||
};
|
||||
|
||||
ready(() => {
|
||||
const locale = document.documentElement.lang;
|
||||
|
||||
const dateTimeFormat = new Intl.DateTimeFormat(locale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
});
|
||||
|
||||
[].forEach.call(document.querySelectorAll('.emojify'), (content) => {
|
||||
content.innerHTML = emojify(content.innerHTML);
|
||||
});
|
||||
|
||||
[].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
|
||||
const datetime = new Date(content.getAttribute('datetime'));
|
||||
const formattedDate = dateTimeFormat.format(datetime);
|
||||
|
||||
content.title = formattedDate;
|
||||
content.textContent = formattedDate;
|
||||
});
|
||||
|
||||
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
|
||||
const datetime = new Date(content.getAttribute('datetime'));
|
||||
const now = new Date();
|
||||
|
||||
content.title = dateTimeFormat.format(datetime);
|
||||
content.textContent = timeAgoString({
|
||||
formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values),
|
||||
formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
|
||||
}, datetime, now, now.getFullYear());
|
||||
});
|
||||
|
||||
const reactComponents = document.querySelectorAll('[data-component]');
|
||||
|
||||
if (reactComponents.length > 0) {
|
||||
import(/* webpackChunkName: "containers/media_container" */ '../soapbox/containers/media_container')
|
||||
.then(({ default: MediaContainer }) => {
|
||||
[].forEach.call(reactComponents, (component) => {
|
||||
[].forEach.call(component.children, (child) => {
|
||||
component.removeChild(child);
|
||||
});
|
||||
});
|
||||
|
||||
const content = document.createElement('div');
|
||||
|
||||
ReactDOM.render(<MediaContainer locale={locale} components={reactComponents} />, content);
|
||||
document.body.appendChild(content);
|
||||
scrollToDetailedStatus();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
scrollToDetailedStatus();
|
||||
});
|
||||
} else {
|
||||
scrollToDetailedStatus();
|
||||
}
|
||||
|
||||
const parallaxComponents = document.querySelectorAll('.parallax');
|
||||
|
||||
if (parallaxComponents.length > 0) {
|
||||
new Rellax('.parallax', { speed: -1 });
|
||||
}
|
||||
|
||||
if (document.body.classList.contains('with-modals')) {
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
||||
const scrollbarWidthStyle = document.createElement('style');
|
||||
scrollbarWidthStyle.id = 'scrollbar-width';
|
||||
document.head.appendChild(scrollbarWidthStyle);
|
||||
scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0);
|
||||
}
|
||||
});
|
||||
|
||||
delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
|
||||
if (button !== 0) {
|
||||
return true;
|
||||
}
|
||||
window.location.href = target.href;
|
||||
return false;
|
||||
});
|
||||
|
||||
delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
|
||||
const contentEl = target.parentNode.parentNode.querySelector('.e-content');
|
||||
|
||||
if (contentEl.style.display === 'block') {
|
||||
contentEl.style.display = 'none';
|
||||
target.parentNode.style.marginBottom = 0;
|
||||
} else {
|
||||
contentEl.style.display = 'block';
|
||||
target.parentNode.style.marginBottom = null;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
delegate(document, '.modal-button', 'click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
let href;
|
||||
|
||||
if (e.target.nodeName !== 'A') {
|
||||
href = e.target.parentNode.href;
|
||||
} else {
|
||||
href = e.target.href;
|
||||
}
|
||||
|
||||
window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
|
||||
});
|
||||
|
||||
delegate(document, '#account_display_name', 'input', ({ target }) => {
|
||||
const name = document.querySelector('.card .display-name strong');
|
||||
if (name) {
|
||||
if (target.value) {
|
||||
name.innerHTML = emojify(escapeTextContentForBrowser(target.value));
|
||||
} else {
|
||||
name.textContent = document.querySelector('#default_account_display_name').textContent;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
delegate(document, '#account_avatar', 'change', ({ target }) => {
|
||||
const avatar = document.querySelector('.card .avatar img');
|
||||
const [file] = target.files || [];
|
||||
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
|
||||
|
||||
avatar.src = url;
|
||||
});
|
||||
|
||||
const getProfileAvatarAnimationHandler = (swapTo) => {
|
||||
//animate avatar gifs on the profile page when moused over
|
||||
return ({ target }) => {
|
||||
const swapSrc = target.getAttribute(swapTo);
|
||||
//only change the img source if autoplay is off and the image src is actually different
|
||||
if(target.getAttribute('data-autoplay') === 'false' && target.src !== swapSrc) {
|
||||
target.src = swapSrc;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnimationHandler('data-original'));
|
||||
|
||||
delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static'));
|
||||
|
||||
delegate(document, '#account_header', 'change', ({ target }) => {
|
||||
const header = document.querySelector('.card .card__img img');
|
||||
const [file] = target.files || [];
|
||||
const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
|
||||
|
||||
header.src = url;
|
||||
});
|
||||
|
||||
delegate(document, '#account_locked', 'change', ({ target }) => {
|
||||
const lock = document.querySelector('.card .display-name i');
|
||||
|
||||
if (target.checked) {
|
||||
lock.style.display = 'inline';
|
||||
} else {
|
||||
lock.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
delegate(document, '.input-copy input', 'click', ({ target }) => {
|
||||
target.focus();
|
||||
target.select();
|
||||
target.setSelectionRange(0, target.value.length);
|
||||
});
|
||||
|
||||
delegate(document, '.input-copy button', 'click', ({ target }) => {
|
||||
const input = target.parentNode.querySelector('.input-copy__wrapper input');
|
||||
|
||||
const oldReadOnly = input.readonly;
|
||||
|
||||
input.readonly = false;
|
||||
input.focus();
|
||||
input.select();
|
||||
input.setSelectionRange(0, input.value.length);
|
||||
|
||||
try {
|
||||
if (document.execCommand('copy')) {
|
||||
input.blur();
|
||||
target.parentNode.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
target.parentNode.classList.remove('copied');
|
||||
}, 700);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
input.readonly = oldReadOnly;
|
||||
});
|
||||
}
|
||||
|
||||
loadPolyfills().then(main).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
@ -1,27 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import loadPolyfills from '../soapbox/load_polyfills';
|
||||
import { start } from '../soapbox/common';
|
||||
|
||||
start();
|
||||
|
||||
function loaded() {
|
||||
const ComposeContainer = require('../soapbox/containers/compose_container').default;
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const mountNode = document.getElementById('soapbox-compose');
|
||||
|
||||
if (mountNode !== null) {
|
||||
const props = JSON.parse(mountNode.getAttribute('data-props'));
|
||||
ReactDOM.render(<ComposeContainer {...props} />, mountNode);
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
const ready = require('../soapbox/ready').default;
|
||||
ready(loaded);
|
||||
}
|
||||
|
||||
loadPolyfills().then(main).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
@ -1,553 +0,0 @@
|
||||
@import 'soapbox/variables';
|
||||
|
||||
//Check this out later - replace with 'soapbox/fonts'
|
||||
//@import 'fonts/roboto';
|
||||
|
||||
table,
|
||||
td,
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100% !important;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.email-body {
|
||||
td,
|
||||
div,
|
||||
a,
|
||||
span {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&,
|
||||
&:visited,
|
||||
span {
|
||||
text-decoration: none;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
#outlook & {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
outline: none;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
clear: both;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
mso-table-lspace: 0;
|
||||
mso-table-rspace: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.email-table,
|
||||
.content-section,
|
||||
.column,
|
||||
.column-cell {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.email-body {
|
||||
font-size: 0 !important;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.email-start {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.email-end {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.email-body,
|
||||
html,
|
||||
body {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.email-container,
|
||||
.email-row,
|
||||
.col-0,
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6, {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
min-width: 0 !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.content-cell {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.column-cell {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
vertical-align: top;
|
||||
|
||||
&.button-cell {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 632px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-row {
|
||||
display: block;
|
||||
max-width: 600px !important;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.col-0 {
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.column-cell,
|
||||
.column-cell td,
|
||||
p {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
|
||||
@media only screen {
|
||||
font-family: $font-sans-serif, sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
.email-body .column-cell,
|
||||
.column-cell,
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
mso-line-height-rule: exactly;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.lead {
|
||||
font-size: 19px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $ui-secondary-color;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 23px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
font-weight: 700;
|
||||
color: lighten($ui-base-color, 34%);
|
||||
}
|
||||
|
||||
.input-cell {
|
||||
h5 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
td {
|
||||
background: darken($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
line-height: 20px;
|
||||
mso-line-height-rule: exactly;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-cell,
|
||||
.blank-cell {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.content-cell {
|
||||
background-color: darken($ui-base-color, 4%);
|
||||
|
||||
&.darker {
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: $ui-base-color;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.hero-with-button {
|
||||
h1 {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
p.lead {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
|
||||
.column-cell {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-start {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.content-end {
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.column-cell,
|
||||
p {
|
||||
color: lighten($ui-base-color, 34%);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
|
||||
&.small {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($ui-base-color, 34%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
filter: brightness(0%) grayscale(100%) invert(100%);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
td {
|
||||
line-height: 20px;
|
||||
mso-line-height-rule: exactly;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
padding: 0 !important;
|
||||
|
||||
a,
|
||||
a span {
|
||||
color: $primary-text-color;
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
vertical-align: top !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 10px 22px !important;
|
||||
line-height: 26px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-small {
|
||||
td {
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
|
||||
a {
|
||||
padding: 5px 16px !important;
|
||||
line-height: 26px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-default {
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: darken($ui-highlight-color, 3%);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.padded-bottom {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
width: 64px;
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 100%;
|
||||
mso-line-height-rule: exactly;
|
||||
padding: 16px;
|
||||
border-radius: 80px;
|
||||
background: $success-green;
|
||||
}
|
||||
|
||||
&.alert-icon td {
|
||||
background: $error-red;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
font-size: 0;
|
||||
line-height: 1px;
|
||||
mso-line-height-rule: exactly;
|
||||
min-height: 1px;
|
||||
overflow: hidden;
|
||||
height: 2px;
|
||||
background-color: transparent !important;
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding-bottom: 32px;
|
||||
|
||||
.status-header {
|
||||
td {
|
||||
font-size: 14px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
bdi {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 19px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.status-footer {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 15px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 16px;
|
||||
|
||||
li {
|
||||
margin-bottom: 16px;
|
||||
color: lighten($ui-base-color, 26%);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
|
||||
body {
|
||||
min-height: 1024px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 697px) {
|
||||
.email-container,
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6 {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.email-start {
|
||||
padding-top: 16px !important;
|
||||
}
|
||||
|
||||
.email-end {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue