status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #204 from MyEtherWallet/develop 

Alpha 0.0.2
This commit is contained in:
Daniel Ternyak 2017-09-17 22:00:29 -07:00 committed by GitHub
parent 8aa0a0827c 141cb41af2
commit 22ab3af7ad
207 changed files with 5130 additions and 10011 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
.babelrc
View File

@ -1,25 +1,30 @@
{ {
"plugins": [ "plugins": [
[ [
"transform-runtime", { "transform-runtime",
"helpers": false, {
"polyfill": false, "helpers": false,
"regenerator": true, "polyfill": false,
"moduleName": "babel-runtime" "regenerator": true,
} "moduleName": "babel-runtime"
],
["module-resolver", {
"root": ["./common"],
"alias": {
"underscore": "lodash"
},
"cwd": "babelrc"
}],
"react-hot-loader/babel"],
"presets": ["es2015", "react", "stage-0", "flow"],
"env": {
"production": {
"presets": ["react-optimize"]
} }
],
[
"module-resolver",
{
"root": ["./common"],
"alias": {
"underscore": "lodash"
},
"cwd": "babelrc"
}
],
"react-hot-loader/babel"
],
"presets": ["es2015", "react", "stage-0", "flow"],
"env": {
"production": {
"presets": ["react-optimize"]
} }
}
} }

5
.gitignore vendored
View File

@ -41,3 +41,8 @@ jspm_packages
# Optional REPL history # Optional REPL history
.node_repl_history .node_repl_history
# VScode workspace settings
.vscode/
static/dll.vendor.js
dll

13
common/actions/deterministicWallets.js
View File

@ -14,18 +14,20 @@ export type DeterministicWalletData = {
export type GetDeterministicWalletsAction = { export type GetDeterministicWalletsAction = {
type: 'DW_GET_WALLETS', type: 'DW_GET_WALLETS',
payload: { payload: {
seed: ?string,
dPath: string, dPath: string,
publicKey: string, publicKey: ?string,
chainCode: string, chainCode: ?string,
limit: number, limit: number,
offset: number offset: number
} }
}; };
export type GetDeterministicWalletsArgs = { export type GetDeterministicWalletsArgs = {
seed: ?string,
dPath: string, dPath: string,
publicKey: string, publicKey: ?string,
chainCode: string, chainCode: ?string,
limit?: number, limit?: number,
offset?: number offset?: number
}; };
@ -33,10 +35,11 @@ export type GetDeterministicWalletsArgs = {
export function getDeterministicWallets( export function getDeterministicWallets(
args: GetDeterministicWalletsArgs args: GetDeterministicWalletsArgs
): GetDeterministicWalletsAction { ): GetDeterministicWalletsAction {
const { dPath, publicKey, chainCode, limit, offset } = args; const { seed, dPath, publicKey, chainCode, limit, offset } = args;
return { return {
type: 'DW_GET_WALLETS', type: 'DW_GET_WALLETS',
payload: { payload: {
seed,
dPath, dPath,
publicKey, publicKey,
chainCode, chainCode,

2
common/actions/notifications.js
View File

@ -20,7 +20,7 @@ export type ShowNotificationAction = {
export function showNotification( export function showNotification(
level: NOTIFICATION_LEVEL = 'info', level: NOTIFICATION_LEVEL = 'info',
msg: Element<*> | string, msg: Element<*> | string,
duration?: number duration?: number | INFINITY
): ShowNotificationAction { ): ShowNotificationAction {
return { return {
type: 'SHOW_NOTIFICATION', type: 'SHOW_NOTIFICATION',

22
common/actions/rates.js
View File

@ -1,17 +1,29 @@
// @flow // @flow
export type FiatRequestedRatesAction = {
type: 'RATES_FIAT_REQUESTED'
};
export function fiatRequestedRates() {
return {
type: 'RATES_FIAT_REQUESTED'
};
}
/*** Set rates ***/ /*** Set rates ***/
export type SetRatesAction = { export type FiatSucceededRatesAction = {
type: 'RATES_SET', type: 'RATES_FIAT_SUCCEEDED',
payload: { [string]: number } payload: { [string]: number }
}; };
export function setRates(payload: { [string]: number }): SetRatesAction { export function fiatSucceededRates(payload: {
[string]: number
}): FiatSucceededRatesAction {
return { return {
type: 'RATES_SET', type: 'RATES_FIAT_SUCCEEDED',
payload payload
}; };
} }
/*** Union Type ***/ /*** Union Type ***/
export type RatesAction = SetRatesAction; export type RatesAction = FiatSucceededRatesAction | FiatRequestedRatesAction;

33
common/actions/wallet.js
View File

@ -1,6 +1,7 @@
// @flow // @flow
import BaseWallet from 'libs/wallet/base'; import type { IWallet } from 'libs/wallet/IWallet';
import Big from 'bignumber.js'; import Big from 'bignumber.js';
import { Wei } from 'libs/units';
/*** Unlock Private Key ***/ /*** Unlock Private Key ***/
export type PrivateKeyUnlockParams = { export type PrivateKeyUnlockParams = {
@ -42,13 +43,35 @@ export function unlockKeystore(
}; };
} }
/*** Unlock Mnemonic ***/
export type MnemonicUnlockParams = {
phrase: string,
pass: string,
path: string,
address: string
};
export type UnlockMnemonicAction = {
type: 'WALLET_UNLOCK_MNEMONIC',
payload: MnemonicUnlockParams
};
export function unlockMnemonic(
value: MnemonicUnlockParams
): UnlockMnemonicAction {
return {
type: 'WALLET_UNLOCK_MNEMONIC',
payload: value
};
}
/*** Set Wallet ***/ /*** Set Wallet ***/
export type SetWalletAction = { export type SetWalletAction = {
type: 'WALLET_SET', type: 'WALLET_SET',
payload: BaseWallet payload: IWallet
}; };
export function setWallet(value: BaseWallet): SetWalletAction { export function setWallet(value: IWallet): SetWalletAction {
return { return {
type: 'WALLET_SET', type: 'WALLET_SET',
payload: value payload: value
@ -58,10 +81,10 @@ export function setWallet(value: BaseWallet): SetWalletAction {
/*** Set Balance ***/ /*** Set Balance ***/
export type SetBalanceAction = { export type SetBalanceAction = {
type: 'WALLET_SET_BALANCE', type: 'WALLET_SET_BALANCE',
payload: Big payload: Wei
}; };
export function setBalance(value: Big): SetBalanceAction { export function setBalance(value: Wei): SetBalanceAction {
return { return {
type: 'WALLET_SET_BALANCE', type: 'WALLET_SET_BALANCE',
payload: value payload: value

2
common/api/bity.js
View File

@ -57,7 +57,7 @@ export function getOrderStatus(orderid: string) {
} }
function _getAllRates() { function _getAllRates() {
return fetch(`${bityConfig.bityAPI}/v1/rate2/`) return fetch(`${bityConfig.bityURL}/v1/rate2/`)
.then(checkHttpStatus) .then(checkHttpStatus)
.then(parseJSON); .then(parseJSON);
} }

1
common/assets/images/icon-help-2.svg Normal file
View File

@ -0,0 +1 @@
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><path fill="#ECECEC" d="M45.386.004C19.983.344-.333 21.215.005 46.619c.34 25.393 21.209 45.715 46.611 45.377 25.398-.342 45.718-21.213 45.38-46.615-.34-25.395-21.21-45.716-46.61-45.377zM45.25 74l-.254-.004c-3.912-.116-6.67-2.998-6.559-6.852.109-3.788 2.934-6.538 6.717-6.538l.227.004c4.021.119 6.748 2.972 6.635 6.937C51.904 71.346 49.123 74 45.25 74zm16.455-32.659c-.92 1.307-2.943 2.93-5.492 4.916l-2.807 1.938c-1.541 1.198-2.471 2.325-2.82 3.434-.275.873-.41 1.104-.434 2.88l-.004.451H39.43l.031-.907c.131-3.728.223-5.921 1.768-7.733 2.424-2.846 7.771-6.289 7.998-6.435.766-.577 1.412-1.234 1.893-1.936 1.125-1.551 1.623-2.772 1.623-3.972a7.74 7.74 0 0 0-1.471-4.576c-.939-1.323-2.723-1.993-5.303-1.993-2.559 0-4.311.812-5.359 2.478-1.078 1.713-1.623 3.512-1.623 5.35v.457H27.936l.02-.477c.285-6.769 2.701-11.643 7.178-14.487C37.947 18.918 41.447 18 45.531 18c5.346 0 9.859 1.299 13.412 3.861 3.6 2.596 5.426 6.484 5.426 11.556 0 2.837-.896 5.502-2.664 7.924z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
common/assets/images/logo-coinbase.svg Normal file
View File

@ -0,0 +1 @@
<svg width="579" height="126" viewBox="0 0 579 126" xmlns="http://www.w3.org/2000/svg"><g fill="#ffffff" fill-rule="evenodd"><path d="M37.752 125.873c-18.928 0-37.383-13.566-37.383-44.324 0-30.759 18.455-44.167 37.383-44.167 9.307 0 16.563 2.367 21.768 5.837L53.841 55.68c-3.47-2.524-8.675-4.101-13.88-4.101-11.357 0-21.768 8.991-21.768 29.812s10.726 29.97 21.768 29.97c5.205 0 10.41-1.578 13.88-4.101l5.679 12.776c-5.363 3.628-12.461 5.837-21.768 5.837M102.898 125.873c-24.133 0-37.383-19.087-37.383-44.324 0-25.238 13.25-44.167 37.383-44.167 24.134 0 37.384 18.929 37.384 44.167 0 25.237-13.25 44.324-37.384 44.324zm0-74.768c-13.407 0-20.032 11.988-20.032 30.286 0 18.297 6.625 30.443 20.032 30.443 13.408 0 20.033-12.146 20.033-30.443 0-18.298-6.625-30.286-20.033-30.286zM163.468 23.659c-5.678 0-10.253-4.416-10.253-9.779 0-5.363 4.575-9.78 10.253-9.78s10.253 4.417 10.253 9.78c0 5.363-4.575 9.779-10.253 9.779zm-8.675 15.459h17.351v85.02h-17.351v-85.02zM240.443 124.137V67.352c0-9.937-5.994-16.089-17.824-16.089-6.309 0-12.146 1.104-15.616 2.524v70.35H189.81V43.376c8.518-3.47 19.402-5.994 32.651-5.994 23.819 0 35.333 10.411 35.333 28.393v58.362h-17.351M303.536 125.873c-11.042 0-21.925-2.682-28.55-5.994V.314h17.193v41.012c4.101-1.893 10.726-3.47 16.562-3.47 21.926 0 36.753 15.773 36.753 41.8 0 32.02-16.563 46.217-41.958 46.217zm2.208-74.61c-4.732 0-10.253 1.104-13.565 2.84v55.838c2.524 1.104 7.414 2.208 12.303 2.208 13.723 0 23.819-9.464 23.819-31.231 0-18.613-8.834-29.655-22.557-29.655zM392.341 125.873c-24.449 0-36.752-9.938-36.752-26.658 0-23.66 25.237-27.919 50.948-29.339v-5.363c0-10.726-7.098-14.512-17.982-14.512-8.044 0-17.824 2.524-23.502 5.206l-4.417-11.831c6.783-2.997 18.297-5.994 29.654-5.994 20.348 0 32.652 7.887 32.652 28.866v53.631c-6.152 3.312-18.613 5.994-30.601 5.994zm14.196-44.482c-17.351.946-34.702 2.366-34.702 17.509 0 8.99 6.941 14.511 20.033 14.511 5.521 0 11.988-.946 14.669-2.208V81.391zM461.743 125.873c-9.937 0-20.348-2.682-26.499-5.994l5.836-13.25c4.416 2.681 13.723 5.52 20.19 5.52 9.306 0 15.458-4.574 15.458-11.672 0-7.729-6.467-10.726-15.142-13.881-11.358-4.259-24.134-9.464-24.134-25.395 0-14.039 10.884-23.819 29.812-23.819 10.253 0 18.771 2.524 24.765 5.994l-5.364 11.988c-3.785-2.366-11.356-5.047-17.508-5.047-8.991 0-14.039 4.732-14.039 10.884 0 7.729 6.31 10.41 14.67 13.565 11.83 4.417 24.922 9.306 24.922 25.869 0 15.3-11.672 25.238-32.967 25.238M578.625 81.233l-56.47 7.887c1.735 15.3 11.673 23.029 26.027 23.029 8.517 0 17.666-2.05 23.502-5.205l5.048 12.935c-6.625 3.47-17.982 5.994-29.654 5.994-26.816 0-41.801-17.194-41.801-44.324 0-26.027 14.512-44.167 38.33-44.167 22.083 0 35.175 14.512 35.175 37.384 0 2.05 0 4.259-.157 6.467zm-35.333-31.232c-13.25 0-21.925 10.096-22.241 27.762l41.169-5.679c-.158-14.827-7.571-22.083-18.928-22.083z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
common/assets/images/logo-ledger.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1916.3 516.8" width="2500" height="674"><style>.st0{fill:#fff}</style><g id="squares_1_"><path class="st0" d="M578.2 392.7V24.3h25.6v344.1h175.3v24.3H578.2zm327.5 5.1c-39.7 0-70.4-12.8-93.4-37.1-21.7-24.3-33.3-58.8-33.3-103.6 0-43.5 10.2-79.3 32-104.9 21.7-26.9 49.9-39.7 87-39.7 32 0 57.6 11.5 76.8 33.3 19.2 23 28.1 53.7 28.1 92.1v20.5H804.6c0 37.1 9 66.5 26.9 85.7 16.6 20.5 42.2 29.4 74.2 29.4 15.3 0 29.4-1.3 40.9-3.8 11.5-2.6 26.9-6.4 44.8-14.1v24.3c-15.3 6.4-29.4 11.5-42.2 14.1-14.3 2.6-28.9 3.9-43.5 3.8zM898 135.6c-26.9 0-47.3 9-64 25.6-15.3 17.9-25.6 42.2-28.1 75.5h168.9c0-32-6.4-56.3-20.5-74.2-12.8-18-32-26.9-56.3-26.9zm238-21.8c19.2 0 37.1 3.8 51.2 10.2 14.1 7.7 26.9 19.2 38.4 37.1h1.3c-1.3-21.7-1.3-42.2-1.3-62.7V0h24.3v392.7h-16.6l-6.4-42.2c-20.5 30.7-51.2 47.3-89.6 47.3s-66.5-11.5-87-35.8c-20.5-23-29.4-57.6-29.4-102.3 0-47.3 10.2-83.2 29.4-108.7 19.2-25.6 48.6-37.2 85.7-37.2zm0 21.8c-29.4 0-52.4 10.2-67.8 32-15.3 20.5-23 51.2-23 92.1 0 78 30.7 116.4 90.8 116.4 30.7 0 53.7-9 67.8-26.9 14.1-17.9 21.7-47.3 21.7-89.6v-3.8c0-42.2-7.7-72.9-21.7-90.8-12.8-20.5-35.8-29.4-67.8-29.4zm379.9-16.6v17.9l-56.3 3.8c15.3 19.2 23 39.7 23 61.4 0 26.9-9 47.3-26.9 64-17.9 16.6-40.9 24.3-70.4 24.3-12.8 0-21.7 0-25.6-1.3-10.2 5.1-17.9 11.5-23 17.9-5.1 7.7-7.7 14.1-7.7 23s3.8 15.3 10.2 19.2c6.4 3.8 17.9 6.4 33.3 6.4h47.3c29.4 0 52.4 6.4 67.8 17.9s24.3 29.4 24.3 53.7c0 29.4-11.5 51.2-34.5 66.5-23 15.3-56.3 23-99.8 23-34.5 0-61.4-6.4-80.6-20.5-19.2-12.8-28.1-32-28.1-55 0-19.2 6.4-34.5 17.9-47.3s28.1-20.5 47.3-25.6c-7.7-3.8-15.3-9-19.2-15.3-5-6.2-7.7-13.8-7.7-21.7 0-17.9 11.5-34.5 34.5-48.6-15.3-6.4-28.1-16.6-37.1-30.7-9-14.1-12.8-30.7-12.8-48.6 0-26.9 9-49.9 25.6-66.5 17.9-16.6 40.9-24.3 70.4-24.3 17.9 0 32 1.3 42.2 5.1h85.7v1.3h.2zm-222.6 319.8c0 37.1 28.1 56.3 84.4 56.3 71.6 0 107.5-23 107.5-69.1 0-16.6-5.1-28.1-16.6-35.8-11.5-7.7-29.4-11.5-55-11.5h-44.8c-49.9 1.2-75.5 20.4-75.5 60.1zm21.8-235.4c0 21.7 6.4 37.1 19.2 49.9 12.8 11.5 29.4 17.9 51.2 17.9 23 0 40.9-6.4 52.4-17.9 12.8-11.5 17.9-28.1 17.9-49.9 0-23-6.4-40.9-19.2-52.4-12.8-11.5-29.4-17.9-52.4-17.9-21.7 0-39.7 6.4-51.2 19.2-12.8 11.4-17.9 29.3-17.9 51.1z"/><path class="st0" d="M1640 397.8c-39.7 0-70.4-12.8-93.4-37.1-21.7-24.3-33.3-58.8-33.3-103.6 0-43.5 10.2-79.3 32-104.9 21.7-26.9 49.9-39.7 87-39.7 32 0 57.6 11.5 76.8 33.3 19.2 23 28.1 53.7 28.1 92.1v20.5h-197c0 37.1 9 66.5 26.9 85.7 16.6 20.5 42.2 29.4 74.2 29.4 15.3 0 29.4-1.3 40.9-3.8 11.5-2.6 26.9-6.4 44.8-14.1v24.3c-15.3 6.4-29.4 11.5-42.2 14.1-14.1 2.6-28.2 3.8-44.8 3.8zm-6.4-262.2c-26.9 0-47.3 9-64 25.6-15.3 17.9-25.6 42.2-28.1 75.5h168.9c0-32-6.4-56.3-20.5-74.2-12.8-18-32-26.9-56.3-26.9zm245.6-21.8c11.5 0 24.3 1.3 37.1 3.8l-5.1 24.3c-11.8-2.6-23.8-3.9-35.8-3.8-23 0-42.2 10.2-57.6 29.4-15.3 20.5-23 44.8-23 75.5v149.7h-25.6V119h21.7l2.6 49.9h1.3c11.5-20.5 23-34.5 35.8-42.2 15.4-9 30.7-12.9 48.6-12.9zM333.9 12.8h-183v245.6h245.6V76.7c.1-34.5-28.1-63.9-62.6-63.9zm-239.2 0H64c-34.5 0-64 28.1-64 64v30.7h94.7V12.8zM0 165h94.7v94.7H0V165zm301.9 245.6h30.7c34.5 0 64-28.1 64-64V316h-94.7v94.6zm-151-94.6h94.7v94.7h-94.7V316zM0 316v30.7c0 34.5 28.1 64 64 64h30.7V316H0z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

1
common/assets/images/logo-trezor.svg Normal file
View File

@ -0,0 +1 @@
<svg width="2568" height="723" viewBox="0 0 2568 723" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="#FFF"><path d="M249 0C149.9 0 69.7 80.2 69.7 179.3v67.2C34.9 252.8 0 261.2 0 272.1v350.7s0 9.7 10.9 14.3c39.5 16 194.9 71 230.6 83.6 4.6 1.7 5.9 1.7 7.1 1.7 1.7 0 2.5 0 7.1-1.7 35.7-12.6 191.5-67.6 231-83.6 10.1-4.2 10.5-13.9 10.5-13.9V272.1c0-10.9-34.4-19.7-69.3-25.6v-67.2C428.4 80.2 347.7 0 249 0zm0 85.7c58.4 0 93.7 35.3 93.7 93.7v58.4c-65.5-4.6-121.4-4.6-187.3 0v-58.4c0-58.5 35.3-93.7 93.6-93.7zm-.4 238.1c81.5 0 149.9 6.3 149.9 17.6v218.8c0 3.4-.4 3.8-3.4 5-2.9 1.3-139 50.4-139 50.4s-5.5 1.7-7.1 1.7c-1.7 0-7.1-2.1-7.1-2.1s-136.1-49.1-139-50.4c-2.9-1.3-3.4-1.7-3.4-5V341c-.8-11.3 67.6-17.2 149.1-17.2zM728.547 562.528V322.922H641V237h272.962v85.922h-86.686v239.606zM1134.394 562.528l-44.92-102.36h-35.745v102.36H955V237h173.755c76.27 0 117.175 50.56 117.175 111.536 0 56.198-32.495 85.922-58.587 98.729l58.97 115.168h-111.919v.095zm11.66-213.992c0-17.681-15.674-25.327-32.113-25.327h-60.212v51.419h60.212c16.44-.382 32.113-8.028 32.113-26.092zM1298 562.528V237h246.87v85.922h-148.523v32.113h144.891v85.922h-144.891v35.745h148.523v85.826zM1596 563.528v-78.275l124.056-161.331H1596V238h254.038v77.511L1725.6 477.702h128.07v85.922l-257.67-.096zM1878 400.594C1878 300.623 1955.511 232 2056.247 232c100.354 0 178.248 68.24 178.248 168.594 0 99.972-77.512 168.212-178.248 168.212-100.736 0-178.247-68.24-178.247-168.212zm256.141 0c0-45.398-30.87-81.525-78.276-81.525-47.405 0-78.276 36.127-78.276 81.525s30.87 81.526 78.276 81.526c47.788 0 78.276-36.128 78.276-81.526zM2455.394 563.528l-44.92-102.36h-35.745v102.36H2276V238h173.755c76.27 0 117.175 50.56 117.175 111.536 0 56.198-32.495 85.922-58.587 98.729l58.97 115.168h-111.919v.095zm12.043-214.374c0-17.682-15.675-25.328-32.113-25.328h-60.213v51.42h60.213c16.534-.383 32.113-8.029 32.113-26.092z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

159
common/assets/styles/bootstrap/alerts.less
View File

@ -1,159 +0,0 @@
// Alerts
.alert {
padding: @space-sm @space;
margin: @space 0;
border-radius: @alert-border-radius;
font-weight: 300;
font-size: @font-size-bump;
h4 {
margin-top: 0;
color: inherit;
}
&*:first-child {
margin-top: 0;
}
&*:last-child {
margin-bottom: 0;
}
.alert-link {
font-weight: @alert-link-font-weight;
}
> p, > ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
a {
color: white;
text-decoration: underline;
}
a:hover {
opacity: .8
}
a:active, a:focus {
opacity: 1
}
svg {
vertical-align: bottom;
}
}
.alerts-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.alert.popup {
position: relative;
border-radius: 0;
padding: @space 0;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.33);
transition: @transition;
z-index: @zindex-alerts;
margin: 0;
.container {
position: relative;
@media screen and (max-width: @screen-xs) {
padding: @space*2 2% 0 15%;
}
&:after {
content: '';
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
color: white;
position: absolute;
top: 0;
bottom: 0;
left: 1%;
width: @space*2;
@media screen and (max-width: @screen-sm) {
left: 3%;
}
@media screen and (max-width: @screen-xs) {
left: 1%;
}
}
}
.icon-close {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20348.333%20348.334%22%3E%3Cpath%20d%3D%22M336.559%2068.611L231.016%20174.165l105.543%20105.549c15.699%2015.705%2015.699%2041.145%200%2056.85-7.844%207.844-18.128%2011.769-28.407%2011.769-10.296%200-20.581-3.919-28.419-11.769L174.167%20231.003%2068.609%20336.563c-7.843%207.844-18.128%2011.769-28.416%2011.769-10.285%200-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139%200-56.85l105.54-105.549L11.774%2068.611c-15.699-15.699-15.699-41.145%200-56.844%2015.696-15.687%2041.127-15.687%2056.829%200l105.563%20105.554L279.721%2011.767c15.705-15.687%2041.139-15.687%2056.832%200%2015.705%2015.699%2015.705%2041.145.006%2056.844z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
background-position: 50%;
background-repeat: no-repeat;
background-size: 1rem;
cursor: pointer;
opacity: .7;
position: absolute;
top: 0;
right: 0;
width: @cont-padding;
bottom: 0;
border-left: 1px solid rgba(255, 255, 255, .7);
transition: @transition;
@media screen and (max-width: @screen-sm) {
width: @cont-padding-lg;
}
@media screen and (max-width: @screen-xs) {
width: 100%;
height: @space*2.5;
left: 0;
right: 0;
top: 0;
bottom: auto;
border-left: 0;
border-bottom: 1px solid rgba(255, 255, 255, .7);
}
&:hover {
transition: @transition;
background-color: rgba(0, 0, 0, 0.1);
border-color: rgba(255, 255, 255, .5);
}
&:active {
transition: @transition;
background-color: rgba(0, 0, 0, 0.1);
border-color: rgba(255, 255, 255, .7);
opacity: 1;
}
}
&.ng-hide {
bottom: -20%;
transition: @transition;
}
}
// Alternate styles
.alert, .alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
.container:after {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20x%3D%2230%22%20y%3D%2230%22%20viewBox%3D%220%200%2065%2065%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cpath%20d%3D%22M32.5%200C14.58%200%200%2014.579%200%2032.5S14.58%2065%2032.5%2065%2065%2050.421%2065%2032.5%2050.42%200%2032.5%200zm0%2061C16.785%2061%204%2048.215%204%2032.5S16.785%204%2032.5%204%2061%2016.785%2061%2032.5%2048.215%2061%2032.5%2061z%22%20fill%3D%22%23FFF%22/%3E%3Ccircle%20cx%3D%2233.018%22%20cy%3D%2219.541%22%20r%3D%223.345%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M32.137%2028.342a2%202%200%200%200-2%202v17a2%202%200%200%200%204%200v-17a2%202%200%200%200-2-2z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
}
}
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
.container:after {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.2%20478.2%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M457.575%20325.1c9.8-12.5%2014.5-25.9%2013.9-39.7-.6-15.2-7.4-27.1-13-34.4%206.5-16.2%209-41.7-12.7-61.5-15.9-14.5-42.9-21-80.3-19.2-26.3%201.2-48.3%206.1-49.2%206.3h-.1c-5%20.9-10.3%202-15.7%203.2-.4-6.4.7-22.3%2012.5-58.1%2014-42.6%2013.2-75.2-2.6-97-16.6-22.9-43.1-24.7-50.9-24.7-7.5%200-14.4%203.1-19.3%208.8-11.1%2012.9-9.8%2036.7-8.4%2047.7-13.2%2035.4-50.2%20122.2-81.5%20146.3-.6.4-1.1.9-1.6%201.4-9.2%209.7-15.4%2020.2-19.6%2029.4-5.9-3.2-12.6-5-19.8-5h-61c-23%200-41.6%2018.7-41.6%2041.6v162.5c0%2023%2018.7%2041.6%2041.6%2041.6h61c8.9%200%2017.2-2.8%2024-7.6l23.5%202.8c3.6.5%2067.6%208.6%20133.3%207.3%2011.9.9%2023.1%201.4%2033.5%201.4%2017.9%200%2033.5-1.4%2046.5-4.2%2030.6-6.5%2051.5-19.5%2062.1-38.6%208.1-14.6%208.1-29.1%206.8-38.3%2019.9-18%2023.4-37.9%2022.7-51.9-.4-8.1-2.2-15-4.1-20.1zm-409.3%20122.2c-8.1%200-14.6-6.6-14.6-14.6V270.1c0-8.1%206.6-14.6%2014.6-14.6h61c8.1%200%2014.6%206.6%2014.6%2014.6v162.5c0%208.1-6.6%2014.6-14.6%2014.6h-61v.1zm383.7-133.9c-4.2%204.4-5%2011.1-1.8%2016.3%200%20.1%204.1%207.1%204.6%2016.7.7%2013.1-5.6%2024.7-18.8%2034.6-4.7%203.6-6.6%209.8-4.6%2015.4%200%20.1%204.3%2013.3-2.7%2025.8-6.7%2012-21.6%2020.6-44.2%2025.4-18.1%203.9-42.7%204.6-72.9%202.2h-1.4c-64.3%201.4-129.3-7-130-7.1h-.1l-10.1-1.2c.6-2.8.9-5.8.9-8.8V270.1c0-4.3-.7-8.5-1.9-12.4%201.8-6.7%206.8-21.6%2018.6-34.3%2044.9-35.6%2088.8-155.7%2090.7-160.9.8-2.1%201-4.4.6-6.7-1.7-11.2-1.1-24.9%201.3-29%205.3.1%2019.6%201.6%2028.2%2013.5%2010.2%2014.1%209.8%2039.3-1.2%2072.7-16.8%2050.9-18.2%2077.7-4.9%2089.5%206.6%205.9%2015.4%206.2%2021.8%203.9%206.1-1.4%2011.9-2.6%2017.4-3.5.4-.1.9-.2%201.3-.3%2030.7-6.7%2085.7-10.8%20104.8%206.6%2016.2%2014.8%204.7%2034.4%203.4%2036.5-3.7%205.6-2.6%2012.9%202.4%2017.4.1.1%2010.6%2010%2011.1%2023.3.4%208.9-3.8%2018-12.5%2027z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
}
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
.container:after {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
}
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
.container:after {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
}
}

65
common/assets/styles/bootstrap/badges.less
View File

@ -1,65 +0,0 @@
//
// Badges
// --------------------------------------------------
// Base class
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
border-radius: @badge-border-radius;
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for badges in buttons
.btn & {
position: relative;
top: -1px;
}
.btn-xs &,
.btn-group-xs > .btn & {
top: 0;
padding: 1px 5px;
}
// Hover state, but only for links
a& {
&:hover,
&:focus {
color: @badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Account for badges in navs
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: @badge-active-color;
background-color: @badge-active-bg;
}
.list-group-item > & {
float: right;
}
.list-group-item > & + & {
margin-right: 5px;
}
.nav-pills > li > a > & {
margin-left: 3px;
}
}

25
common/assets/styles/bootstrap/breadcrumbs.less
View File

@ -1,25 +0,0 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
border-radius: @border-radius;
> li {
display: inline-block;
+ li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
}
}
> .active {
color: @breadcrumb-active-color;
}
}

249
common/assets/styles/bootstrap/button-groups.less
View File

@ -1,249 +0,0 @@
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
margin-bottom: 5px;
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all);
.btn,
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: 5px;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs);
}
.btn-group-sm > .btn { &:extend(.btn-sm);
}
.btn-group-lg > .btn { &:extend(.btn-lg);
}
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
.box-shadow(none);
}
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
&:extend(.clearfix all);
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
> .btn-group .dropdown-menu {
left: auto;
}
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] {
> .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
}

215
common/assets/styles/bootstrap/buttons.less
View File

@ -1,215 +0,0 @@
.btn {
background-image: none;
border: 1px solid transparent;
box-shadow: inset 2px 2px 2px rgba(200, 200, 200, .1);
cursor: pointer;
display: inline-block;
font-weight: @btn-font-weight;
letter-spacing: .05em;
margin-top: @space-sm;
margin-bottom: 0;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius);
.user-select(none);
&,
&:active,
&.active {
&:focus,
&.focus {
.tab-focus();
}
}
&:hover,
&:focus,
&.focus {
color: @btn-default-color;
text-decoration: none;
border-bottom-color: transparent;
box-shadow: inset 3px 3px 3px rgba(200, 200, 200, .1);
}
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
.opacity(.65);
.box-shadow(none);
}
a& {
&.disabled,
fieldset[disabled] & {
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
}
}
}
.alert .btn-info {
background-color: white;
text-decoration: none;
color: @brand-info;
&:hover,
&:focus,
&.focus {
color: white;
text-decoration: none;
opacity: 1;
}
&.disabled {
background-color: white;
text-decoration: none;
color: @brand-info;
opacity: .6;
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
.btn-group .btn-default {
border-bottom-width: 1px;
&.active {
border: 1px solid @brand-primary;
color: @brand-primary;
background: #F5F5F5;
}
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: @link-color;
font-weight: normal;
border-radius: 0;
&,
&:active,
&.active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: @link-hover-decoration;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
text-decoration: none;
}
}
}
// Button Sizes
// --------------------------------------------------
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-bump-more; @line-height-large; @border-radius);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius);
padding: 0.1rem .5rem .2rem;
}
.btn-xs {
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius);
}
// Block button
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}

256
common/assets/styles/bootstrap/carousel.less
View File

@ -1,256 +0,0 @@
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
&:extend(.img-responsive);
line-height: 1;
}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
.transition-transform(~'0.6s ease-in-out');
.backface-visibility(~'hidden');
.perspective(1000px);
&.next,
&.active.right {
.translate3d(100%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
.translate3d(-100%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
.translate3d(0, 0, 0);
left: 0;
}
}
}
> .active,
> .next,
> .prev {
display: block;
}
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
}
// Hover/focus state
&:hover,
&:focus {
outline: 0;
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
}
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
}
.icon-prev,
.glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}
.icon-prev {
&:before {
content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
}
.active {
margin: 0;
width: 12px;
height: 12px;
background-color: @carousel-indicator-active-bg;
}
}
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: @carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
.glyphicon-chevron-left,
.glyphicon-chevron-right,
.icon-prev,
.icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
font-size: 30px;
}
.glyphicon-chevron-left,
.icon-prev {
margin-left: -15px;
}
.glyphicon-chevron-right,
.icon-next {
margin-right: -15px;
}
}
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}

33
common/assets/styles/bootstrap/close.less
View File

@ -1,33 +0,0 @@
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(.2);
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
.opacity(.5);
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button& {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
}

68
common/assets/styles/bootstrap/code.less
View File

@ -1,68 +0,0 @@
//
// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: @font-family-monospace;
}
// Inline code
code {
padding: 2px 4px;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius;
}
// User input typically entered via keyboard
kbd {
padding: 2px 4px;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
box-shadow: none;
}
}
// Blocks of code
pre {
display: block;
padding: ((@line-height-computed - 1) / 2);
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: @pre-scrollable-max-height;
overflow-y: scroll;
}

44
common/assets/styles/bootstrap/component-animations.less
View File

@ -1,44 +0,0 @@
//
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
/* uncss:ignore */
.fade {
opacity: 0;
.transition(opacity .15s linear);
}
/* uncss:ignore */
.fade.in {
opacity: 1;
}
/* uncss:ignore */
.collapse {
display: none;
&.in {
display: block;
}
tr&.in {
display: table-row;
}
tbody&.in {
display: table-row-group;
}
}
/* uncss:ignore */
.collapsing {
position: relative;
height: 0;
overflow: hidden;
.transition-property(~"height, visibility");
.transition-duration(.35s);
.transition-timing-function(ease);
}

219
common/assets/styles/bootstrap/dropdowns.less
View File

@ -1,219 +0,0 @@
//
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: @space-sm;
vertical-align: middle;
border-top: @caret-width-base dashed;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
// The dropdown wrapper (div)
.dropup,
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle {
margin-top: 0;
}
.dropdown:hover {
.dropdown-menu {
display: block;
}
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
float: left;
min-width: 160px;
padding: 4px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg;
border-radius: @border-radius;
.box-shadow(0 6px 10px rgba(0, 0, 0, .175));
background-clip: padding-box;
// Aligns the dropdown menu to right
//
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
}
> li {
margin: 0;
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 300;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
}
// Nuke hover/focus effects
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: @cursor-disabled;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-small;
line-height: @line-height-base;
color: @dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
}
// Right aligned dropdowns
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
}

387
common/assets/styles/bootstrap/forms.less
View File

@ -1,387 +0,0 @@
//
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
margin: 0;
border: 0;
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
}
label {
display: inline-block;
margin-top: @space-sm;
margin-bottom: @space-xs;
font-weight: 500;
font-size: @font-size-bump;
small {
font-weight: 300;
font-size: 1em;
}
}
// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
.box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 3px 0 0;
line-height: normal;
}
input[type="file"] {
display: block;
}
// Make range inputs behave like textual form controls
input[type="range"] {
display: block;
width: 100%;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Adjust output element
output {
display: block;
padding-top: (@padding-base-vertical + 1);
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
}
// Common form controls
label + .form-control,
label + input,
label + textarea,
.account-help-icon + .btn,
.account-help-icon + textarea,
.account-help-icon + input {
margin-top: 0;
}
.form-control {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
margin-top: .5rem;
margin-bottom: .5rem;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: @transition;
&:focus {
border-color: @input-border-focus;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px fadeout(@brand-primary, 50%);
}
// Placeholder
.placeholder();
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: #efefef;
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
cursor: text !important;
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
}
input[readonly] {
background-color: #efefef;
cursor: text !important;
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type="search"] {
-webkit-appearance: none;
}
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: @input-height-base;
}
&.input-sm,
.input-group-sm & {
line-height: @input-height-small;
}
&.input-lg,
.input-group-lg & {
line-height: @input-height-large;
}
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-top: @form-group-margin-bottom;
margin-bottom: @form-group-margin-bottom;
display: block;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
position: relative;
display: block;
margin: 15px 0;
label {
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
padding-right: 15px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
margin-left: -20px;
}
input[type=radio] {
margin-right: 5px;
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
}
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
padding-top: (@padding-base-vertical + 1);
padding-bottom: (@padding-base-vertical + 1);
margin-bottom: 0;
min-height: (@line-height-computed + @font-size-base);
&.input-lg,
&.input-sm {
padding-left: 0;
padding-right: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius);
}
.form-group-sm {
.form-control {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @border-radius;
}
select.form-control {
height: @input-height-small;
line-height: @input-height-small;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @input-height-small;
min-height: (@line-height-computed + @font-size-small);
padding: (@padding-small-vertical + 1) @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
}
}
.input-lg {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius);
}
.form-group-lg {
.form-control {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @border-radius;
}
select.form-control {
height: @input-height-large;
line-height: @input-height-large;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @input-height-large;
min-height: (@line-height-computed + @font-size-large);
padding: (@padding-large-vertical + 1) @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
}
}
// Custom Angular Form Validators
.form-control.is-valid {
border-color: lighten(@brand-success, 15%);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px fadeout(@brand-success, 50%);
}
.form-control.is-invalid {
border-color: lighten(@brand-danger, 15%);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px fadeout(@brand-danger, 50%);
}

1614
common/assets/styles/bootstrap/glyphicons.less
View File

File diff suppressed because it is too large Load Diff

76
common/assets/styles/bootstrap/grid.less
View File

@ -1,76 +0,0 @@
//
// Grid system
// --------------------------------------------------
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
width: 100%;
max-width: 1400px;
margin-right: auto;
margin-left: auto;
padding-left: @cont-padding;
padding-right: @cont-padding;
&:extend(.clearfix all);
@media (min-width: @screen-sm-min) {
padding-left: @cont-padding-lg;
padding-right: @cont-padding-lg;
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
.container-fixed();
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
.make-row();
}
// Columns
//
// Common styles for small and large grid columns
.make-grid-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}

167
common/assets/styles/bootstrap/input-groups.less
View File

@ -1,167 +0,0 @@
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
position: relative;
display: table;
border-collapse: separate;
> * {
margin-bottom: 0;
margin-top: 0;
}
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
}
.dropdown-toggle {
padding-right: 20px;
padding-left: 20px;
}
}
// Sizing options
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius;
// Sizing
&.input-sm {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius;
}
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
margin-bottom: 0;
margin-top: 0;
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: -1px;
}
}
&:last-child {
> .btn,
> .btn-group {
z-index: 2;
margin-left: -1px;
}
}
}

51
common/assets/styles/bootstrap/jumbotron.less
View File

@ -1,51 +0,0 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding-top: @jumbotron-padding;
padding-bottom: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg;
h1,
.h1 {
color: @jumbotron-heading-color;
}
p {
margin-bottom: (@jumbotron-padding / 2);
font-size: @jumbotron-font-size;
font-weight: 200;
}
> hr {
border-top-color: darken(@jumbotron-bg, 10%);
}
.container &,
.container-fluid & {
border-radius: @border-radius; // Only round corners at higher resolutions if contained in a container
}
.container {
max-width: 100%;
}
@media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container &,
.container-fluid & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
h1,
.h1 {
font-size: @jumbotron-heading-font-size;
}
}
}

126
common/assets/styles/bootstrap/list-group.less
View File

@ -1,126 +0,0 @@
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
// Round the first and last items
&:first-child {
.border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
}
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item,
button.list-group-item {
color: @list-group-link-color;
.list-group-item-heading {
color: @list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
color: @list-group-link-hover-color;
background-color: @list-group-hover-bg;
}
}
button.list-group-item {
width: 100%;
text-align: left;
}
.list-group-item {
// Disabled state
&.disabled,
&.disabled:hover,
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
cursor: @cursor-disabled;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-disabled-text-color;
}
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: @list-group-active-text-color;
}
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

66
common/assets/styles/bootstrap/media.less
View File

@ -1,66 +0,0 @@
.media {
// Proper spacing between instances of .media
margin-top: 15px;
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
zoom: 1;
overflow: hidden;
}
.media-body {
width: 10000px;
}
.media-object {
display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
}
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
// Media list variation
//
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}

128
common/assets/styles/bootstrap/modals.less
View File

@ -1,128 +0,0 @@
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
.modal.in .modal-dialog {
.translate(0, 0)
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: @modal-content-bg;
border-radius: @border-radius;
box-shadow: 1px 1px 60px rgba(0, 0, 0, 0.32);
background-clip: padding-box;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
}
.modal-backdrop.fade {
.opacity(0);
}
.modal-backdrop.in {
.opacity(@modal-backdrop-opacity);
}
.modal-header {
padding: @modal-inner-padding/2 @modal-inner-padding;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0 0 @space;
line-height: @modal-title-line-height;
}
.modal-body {
position: relative;
padding: @modal-inner-padding;
font-size: @font-size-bump-more;
.table > tbody > tr > td {
vertical-align: middle;
}
.addressIdenticon {
margin: auto;
}
}
.modal-footer {
padding: @space 1.5rem;
text-align: right;
border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all);
.btn {
margin-top: 0;
}
.btn + .btn {
margin-left: @space-sm;
margin-bottom: 0;
margin-top: 0;
}
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: @screen-sm-min) {
.modal-dialog {
width: 800px;
margin: 30px auto;
}
.modal-sm {
width: @modal-sm;
}
}
@media (min-width: @screen-md-min) {
.modal-lg {
width: @modal-lg;
}
}

651
common/assets/styles/bootstrap/navbar.less
View File

@ -1,651 +0,0 @@
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
// Undo the collapse side padding for navbars with containers to ensure
// alignment of right-aligned contents.
.navbar-fixed-top &,
.navbar-static-top &,
.navbar-fixed-bottom & {
padding-left: 0;
padding-right: 0;
}
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
.navbar-collapse {
max-height: @navbar-collapse-max-height;
@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
max-height: 200px;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
> .navbar-header,
> .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
float: left;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
height: @navbar-height;
&:hover,
&:focus {
text-decoration: none;
}
> img {
display: block;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
border-radius: @border-radius;
// We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`.
&:focus {
outline: 0;
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a {
line-height: @line-height-computed;
&:hover,
&:focus {
background-image: none;
}
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
}
}
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
.border-top-radius(@navbar-border-radius);
.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
.navbar-vertical-align(@input-height-base);
&.btn-sm {
.navbar-vertical-align(@input-height-small);
}
&.btn-xs {
.navbar-vertical-align(22);
}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) {
.navbar-left {
.pull-left();
}
.navbar-right {
.pull-right();
margin-right: -@navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0;
}
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
.navbar-brand {
color: @navbar-default-brand-color;
&:hover,
&:focus {
color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-default-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: @navbar-default-border;
}
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
.btn-link {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
}
}
}
}
// Inverse navbar
.navbar-inverse {
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-inverse-color;
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
.divider {
background-color: @navbar-inverse-border;
}
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
}

267
common/assets/styles/bootstrap/navs.less
View File

@ -1,267 +0,0 @@
//
// Navs
// --------------------------------------------------
// Base class
// --------------------------------------------------
.nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
&:extend(.clearfix all);
ul& {
margin-top: 0;
}
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: @nav-link-padding;
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @nav-disabled-link-color;
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: @cursor-disabled;
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
}
}
// Nav dividers (deprecated with v3.0.1)
//
// This should have been removed in v3 with the dropping of `.nav-list`, but
// we missed it. We don't currently support this anywhere, but in the interest
// of maintaining backward compatibility in case you use it, it's deprecated.
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
padding-top: 5px;
margin: 0 -15px;
border-bottom: 2px solid @gray-lighter;
> li {
float: left;
margin-bottom: -2px;
> a {
line-height: @line-height-base;
border-radius: 0;
color: darken(@link-color, 15%);
&:after {
content: "";
background: @brand-primary;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -2px;
transition: all 250ms ease 0s;
transform: scale(0);
}
&:hover,
&:focus {
color: @brand-primary;
transition: all 250ms ease 0s;
&:after {
transform: scale(1);
}
}
}
&.active > a {
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
cursor: default;
border-bottom: 2px solid @brand-primary;
}
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified();
.nav-tabs-justified();
}
@media screen and (max-width: 888px) {
> li {
display: block;
float: left;
text-align: center;
width: 33%;
padding: 0 5px;
font-size: 13px;
height: 40px;
> a {
border-bottom: 1px solid @gray-lighter;
padding: 19px 0;
line-height: 0;
}
}
}
}
// Pills
// -------------------------
.nav-pills {
> li {
float: left;
// Links rendered as pills
> a {
border-radius: @nav-pills-border-radius;
}
+ li {
margin-left: 2px;
}
// Active state
&.active > a {
&,
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
}
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
// Nav variations
// --------------------------------------------------
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
> a {
text-align: center;
margin-bottom: 5px;
}
}
> .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;
> a {
margin-bottom: 0;
}
}
}
}
// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
border-bottom: 0;
> li > a {
// Override margin from .nav-tabs
margin-right: 0;
border-radius: @border-radius;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border: 1px solid @nav-tabs-justified-link-border-color;
}
@media (min-width: @screen-sm-min) {
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius @border-radius 0 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
}
// Tabbable tabs
// -------------------------
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
// Dropdowns
// -------------------------
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}

424
common/assets/styles/bootstrap/normalize.less vendored
View File

@ -1,424 +0,0 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS and IE text size adjust after device orientation change,
// without disabling user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11
// and Firefox.
// Correct `block` display not defined for `main` in IE 11.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
//
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//
audio,
canvas,
progress,
video {
display: inline-block; // 1
vertical-align: baseline; // 2
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
//
[hidden],
template {
display: none;
}
// Links
// ==========================================================================
//
// Remove the gray background color from active links in IE 10.
//
a {
background-color: transparent;
}
//
// Improve readability of focused elements when they are also in an
// active/hover state.
//
a:active,
a:hover {
outline: 0;
}
// Text-level semantics
// ==========================================================================
//
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari and Chrome.
//
dfn {
font-style: italic;
}
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9/10.
//
img {
border: 0;
}
//
// Correct overflow not hidden in IE 9/10/11.
//
svg:not(:root) {
overflow: hidden;
}
// Grouping content
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari.
//
figure {
margin: 1em 40px;
}
//
// Address differences between Firefox and other browsers.
//
hr {
box-sizing: content-box;
height: 0;
}
//
// Contain overflow in all browsers.
//
pre {
overflow: auto;
}
//
// Address odd `em`-unit font size rendering in all browsers.
//
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
// Forms
// ==========================================================================
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
//
//
// 1. Correct color not being inherited.
// Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
//
button,
input,
optgroup,
select,
textarea {
color: inherit; // 1
font: inherit; // 2
margin: 0; // 3
}
//
// Address `overflow` set to `hidden` in IE 8/9/10/11.
//
button {
overflow: visible;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
// Correct `select` style inheritance in Firefox.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
input {
line-height: normal;
}
//
// It's recommended that you don't attempt to style these elements.
// Firefox's implementation doesn't respect box-sizing, padding, or width.
//
// 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
//
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
//
input[type="search"] {
-webkit-appearance: textfield; // 1
box-sizing: content-box; //2
}
//
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance).
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9/10/11.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// Remove default vertical scrollbar in IE 8/9/10/11.
//
textarea {
overflow: auto;
}
//
// Don't inherit the `font-weight` (applied by a rule above).
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
//
optgroup {
font-weight: bold;
}
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

53
common/assets/styles/bootstrap/pager.less
View File

@ -1,53 +0,0 @@
//
// Pager pagination
// --------------------------------------------------
.pager {
padding-left: 0;
margin: @line-height-computed 0;
list-style: none;
text-align: center;
&:extend(.clearfix all);
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: @pager-bg;
border: 1px solid @pager-border;
border-radius: @pager-border-radius;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pager-hover-bg;
}
}
.next {
> a,
> span {
float: right;
}
}
.previous {
> a,
> span {
float: left;
}
}
.disabled {
> a,
> a:hover,
> a:focus,
> span {
color: @pager-disabled-color;
background-color: @pager-bg;
cursor: @cursor-disabled;
}
}
}

89
common/assets/styles/bootstrap/pagination.less
View File

@ -1,89 +0,0 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: @line-height-computed 0;
border-radius: @border-radius;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
text-decoration: none;
color: @pagination-color;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
> li > a,
> li > span {
&:hover,
&:focus {
z-index: 3;
color: @pagination-hover-color;
background-color: @pagination-hover-bg;
border-color: @pagination-hover-border;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-border;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: @pagination-disabled-color;
background-color: @pagination-disabled-bg;
border-color: @pagination-disabled-border;
cursor: @cursor-disabled;
}
}
}
// Sizing
// --------------------------------------------------
// Large
.pagination-lg {
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius);
}
// Small
.pagination-sm {
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius);
}

274
common/assets/styles/bootstrap/panels.less
View File

@ -1,274 +0,0 @@
//
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid transparent;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0, 0, 0, .05));
}
// Panel contents
.panel-body {
padding: @panel-body-padding;
&:extend(.clearfix all);
}
// Optional heading
.panel-heading {
padding: @panel-heading-padding;
border-bottom: 1px solid transparent;
.border-top-radius((@panel-border-radius - 1));
> .dropdown .dropdown-toggle {
color: inherit;
}
}
// Within heading, strip any `h*` tag of its default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: ceil((@font-size-base * 1.125));
color: inherit;
> a,
> small,
> .small,
> small > a,
> .small > a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
padding: @panel-footer-padding;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-inner-border;
.border-bottom-radius((@panel-border-radius - 1));
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
> .list-group,
> .panel-collapse > .list-group {
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
border-radius: 0;
}
// Add border top radius for first one
&:first-child {
.list-group-item:first-child {
border-top: 0;
.border-top-radius((@panel-border-radius - 1));
}
}
// Add border bottom radius for last one
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
.border-bottom-radius((@panel-border-radius - 1));
}
}
}
> .panel-heading + .panel-collapse > .list-group {
.list-group-item:first-child {
.border-top-radius(0);
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
.list-group + .panel-footer {
border-top-width: 0;
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table,
> .table-responsive > .table,
> .panel-collapse > .table {
margin-bottom: 0;
caption {
padding-left: @panel-body-padding;
padding-right: @panel-body-padding;
}
}
// Add border top radius for first one
> .table:first-child,
> .table-responsive:first-child > .table:first-child {
.border-top-radius((@panel-border-radius - 1));
> thead:first-child,
> tbody:first-child {
> tr:first-child {
border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1);
td:first-child,
th:first-child {
border-top-left-radius: (@panel-border-radius - 1);
}
td:last-child,
th:last-child {
border-top-right-radius: (@panel-border-radius - 1);
}
}
}
}
// Add border bottom radius for last one
> .table:last-child,
> .table-responsive:last-child > .table:last-child {
.border-bottom-radius((@panel-border-radius - 1));
> tbody:last-child,
> tfoot:last-child {
> tr:last-child {
border-bottom-left-radius: (@panel-border-radius - 1);
border-bottom-right-radius: (@panel-border-radius - 1);
td:first-child,
th:first-child {
border-bottom-left-radius: (@panel-border-radius - 1);
}
td:last-child,
th:last-child {
border-bottom-right-radius: (@panel-border-radius - 1);
}
}
}
}
> .panel-body + .table,
> .panel-body + .table-responsive,
> .table + .panel-body,
> .table-responsive + .panel-body {
border-top: 1px solid @table-border-color;
}
> .table > tbody:first-child > tr:first-child th,
> .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
> .table-bordered,
> .table-responsive > .table-bordered {
border: 0;
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
> thead,
> tbody {
> tr:first-child {
> td,
> th {
border-bottom: 0;
}
}
}
> tbody,
> tfoot {
> tr:last-child {
> td,
> th {
border-bottom: 0;
}
}
}
}
> .table-responsive {
border: 0;
margin-bottom: 0;
}
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
margin-bottom: @line-height-computed;
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: @panel-border-radius;
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse > .panel-body,
+ .panel-collapse > .list-group {
border-top: 1px solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-inner-border;
}
}
}
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}

140
common/assets/styles/bootstrap/popovers.less
View File

@ -1,140 +0,0 @@
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
padding: 1px;
// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: @font-size-base;
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius;
.box-shadow(0 5px 10px rgba(0, 0, 0, .2));
// Offset the popover to account for the popover arrow
&.top {
margin-top: -@popover-arrow-width;
}
&.right {
margin-left: @popover-arrow-width;
}
&.bottom {
margin-top: @popover-arrow-width;
}
&.left {
margin-left: -@popover-arrow-width;
}
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: (@border-radius - 1) (@border-radius - 1) 0 0;
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
&.right > .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
}
&.bottom > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
}
&.left > .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}

114
common/assets/styles/bootstrap/print.less
View File

@ -1,114 +0,0 @@
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; // Black prints faster: h5bp.com/s
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap specific changes start
// Bootstrap components
.navbar {
display: none;
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
// Bootstrap specific changes end
.print-text {
color: darken(@ether-blue, 10%) !important;
}
footer {
border-top: 1px solid black;
}
header {
border-bottom: 1px solid black;
}
}

92
common/assets/styles/bootstrap/progress-bars.less
View File

@ -1,92 +0,0 @@
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// WebKit
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @progress-border-radius;
.box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: @font-size-small;
line-height: @line-height-computed;
color: @progress-bar-color;
text-align: center;
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
.transition(width .6s ease);
}
// Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped {
#gradient > .striped();
background-size: 40px 40px;
}
// Call animation for the active one
//
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
.animation(progress-bar-stripes 2s linear infinite);
}
// Variations
// -------------------------
.progress-bar-success {
.progress-bar-variant(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-variant(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
}

35
common/assets/styles/bootstrap/responsive-embed.less
View File

@ -1,35 +0,0 @@
// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
}
// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
padding-bottom: 75%;
}

209
common/assets/styles/bootstrap/responsive-utilities.less
View File

@ -1,209 +0,0 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport {
width: device-width;
}
// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
.responsive-invisibility();
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
.visible-xs-block {
@media (max-width: @screen-xs-max) {
display: block !important;
}
}
.visible-xs-inline {
@media (max-width: @screen-xs-max) {
display: inline !important;
}
}
.visible-xs-inline-block {
@media (max-width: @screen-xs-max) {
display: inline-block !important;
}
}
.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
.visible-sm-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: block !important;
}
}
.visible-sm-inline {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline !important;
}
}
.visible-sm-inline-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline-block !important;
}
}
.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
.visible-md-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: block !important;
}
}
.visible-md-inline {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline !important;
}
}
.visible-md-inline-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline-block !important;
}
}
.visible-lg {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
.visible-lg-block {
@media (min-width: @screen-lg-min) {
display: block !important;
}
}
.visible-lg-inline {
@media (min-width: @screen-lg-min) {
display: inline !important;
}
}
.visible-lg-inline-block {
@media (min-width: @screen-lg-min) {
display: inline-block !important;
}
}
.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
.hidden-lg {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.
// Note: Deprecated .visible-print as of v3.2.0
.visible-print {
.responsive-invisibility();
@media print {
.responsive-visibility();
}
}
.visible-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.hidden-print {
@media print {
.responsive-invisibility();
}
}

86
common/assets/styles/bootstrap/scaffolding.less
View File

@ -1,86 +0,0 @@
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
html {
font-size: @font-size-pixels;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@media screen and (min-width: @screen-xl) {
font-size: @font-size-pixels-xl;
}
@media screen and (max-width: @grid-float-breakpoint-max) {
font-size: @font-size-pixels-sm;
}
height: 100%;
}
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
height: 100%;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
figure {
margin: 0;
}
img {
vertical-align: middle;
}
.img-responsive {
.img-responsive();
}
// Image thumbnails
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
// Keep them at most 100% wide
.img-responsive(inline-block);
}
hr {
margin-top: @space;
margin-bottom: @space;
border: 0;
border-top: 1px solid @hr-border;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
[role="button"] {
cursor: pointer;
}

251
common/assets/styles/bootstrap/tables.less
View File

@ -1,251 +0,0 @@
//
// Tables
// --------------------------------------------------
table {
background-color: @table-bg;
margin-bottom: 10px;
border-bottom: 1px solid @table-border-color;
}
caption {
padding-top: @table-cell-padding;
padding-bottom: @table-cell-padding;
color: @text-muted;
text-align: left;
}
th {
text-align: left;
}
// Baseline styles
.table {
width: 100%;
max-width: 100%;
margin-bottom: @line-height-computed;
// Cells
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: @table-cell-padding;
line-height: @line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
}
}
}
// Bottom align for column headings
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
}
// Condensed table w/ half padding
.table-condensed {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: @table-condensed-cell-padding;
}
}
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid @table-border-color;
}
}
}
> thead > tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody > tr:nth-of-type(odd) {
background-color: #f5f5f5;
}
& > tbody > tr > td, & > tbody > tr > th, & > tfoot > tr > td, & > tfoot > tr > th, & > thead > tr > td, & > thead > tr > th {
border-top: 0;
}
}
.table-mnemonic {
border-bottom: 0;
th {
border-bottom: 1px solid @gray-lighter;
}
td:first-child {
text-align: center;
}
tr:last-child td:first-child {
text-align: left;
}
tr:last-child,
tr:first-child {
background-color: white !important;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody > tr:hover {
background-color: @table-bg-hover;
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
}
table {
td,
th {
&[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(info; @state-info-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
.table-responsive {
overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: @screen-xs-max) {
width: 100%;
margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
// Tighten up spacing
> .table {
margin-bottom: 0;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot {
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}

344
common/assets/styles/bootstrap/theme.less
View File

@ -1,344 +0,0 @@
/*!
* Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
@shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
.box-shadow(none);
}
.badge {
text-shadow: none;
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
&:hover,
&:focus {
background-color: darken(@btn-color, 12%);
background-position: 0 -15px;
}
&:active,
&.active {
background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 14%);
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: darken(@btn-color, 12%);
background-image: none;
}
}
}
// Common styles
.btn {
// Remove the gradient for the pressed/active state
&:active,
&.active {
background-image: none;
}
}
// Apply the mixin to the buttons
.btn-default {
.btn-styles(@btn-default-bg);
text-shadow: 0 1px 0 #fff;
border-color: #ccc;
}
.btn-primary {
.btn-styles(@btn-primary-bg);
}
.btn-success {
.btn-styles(@btn-success-bg);
}
.btn-info {
.btn-styles(@btn-info-bg);
}
.btn-warning {
.btn-styles(@btn-warning-bg);
}
.btn-danger {
.btn-styles(@btn-danger-bg);
}
//
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-active-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Default navbar
.navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
.box-shadow(@shadow);
.navbar-nav > .open > a,
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
.box-shadow(inset 0 3px 9px rgba(0, 0, 0, .075));
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
border-radius: @navbar-border-radius;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
.box-shadow(inset 0 3px 9px rgba(0, 0, 0, .25));
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
.navbar .navbar-nav .open .dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: #fff;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
}
}
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
@shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
.alert-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
border-color: darken(@color, 15%);
}
// Apply the mixin to the alerts
.alert-success {
.alert-styles(@alert-success-bg);
}
.alert-info {
.alert-styles(@alert-info-bg);
}
.alert-warning {
.alert-styles(@alert-warning-bg);
}
.alert-danger {
.alert-styles(@alert-danger-bg);
}
//
// Progress bars
// --------------------------------------------------
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}
// Mixin for generating new styles
.progress-bar-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}
// Apply the mixin to the progress bars
.progress-bar {
.progress-bar-styles(@progress-bar-bg);
}
.progress-bar-success {
.progress-bar-styles(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-styles(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-styles(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-styles(@progress-bar-danger-bg);
}
// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
#gradient > .striped();
}
//
// List groups
// --------------------------------------------------
.list-group {
border-radius: @border-radius;
.box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%);
.badge {
text-shadow: none;
}
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
.box-shadow(0 1px 2px rgba(0, 0, 0, .05));
}
// Mixin for generating new styles
.panel-heading-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}
// Apply the mixin to the panel headings only
.panel-default > .panel-heading {
.panel-heading-styles(@panel-default-heading-bg);
}
.panel-primary > .panel-heading {
.panel-heading-styles(@panel-primary-heading-bg);
}
.panel-success > .panel-heading {
.panel-heading-styles(@panel-success-heading-bg);
}
.panel-info > .panel-heading {
.panel-heading-styles(@panel-info-heading-bg);
}
.panel-warning > .panel-heading {
.panel-heading-styles(@panel-warning-heading-bg);
}
.panel-danger > .panel-heading {
.panel-heading-styles(@panel-danger-heading-bg);
}
//
// Wells
// --------------------------------------------------
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
.box-shadow(@shadow);
}

35
common/assets/styles/bootstrap/thumbnails.less
View File

@ -1,35 +0,0 @@
//
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
display: block;
padding: @thumbnail-padding;
margin-bottom: @line-height-computed;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(border .2s ease-in-out);
> img,
a > img {
&:extend(.img-responsive);
margin-left: auto;
margin-right: auto;
}
// Add a hover state for linked versions only
a&:hover,
a&:focus,
a&.active {
border-color: @link-color;
}
// Image captions
.caption {
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;
}
}

115
common/assets/styles/bootstrap/tooltip.less
View File

@ -1,115 +0,0 @@
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: @font-size-small;
.opacity(0);
&.in {
.opacity(@tooltip-opacity);
}
&.top {
margin-top: -3px;
padding: @tooltip-arrow-width 0;
}
&.right {
margin-left: 3px;
padding: 0 @tooltip-arrow-width;
}
&.bottom {
margin-top: 3px;
padding: @tooltip-arrow-width 0;
}
&.left {
margin-left: -3px;
padding: 0 @tooltip-arrow-width;
}
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: @tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
background-color: @tooltip-bg;
border-radius: @border-radius;
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
}

396
common/assets/styles/bootstrap/type.less
View File

@ -1,396 +0,0 @@
//
// Typography
// --------------------------------------------------
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
letter-spacing: .02em;
small,
.small {
font-weight: normal;
line-height: 1;
color: @headings-small-color;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: @space;
margin-bottom: @space-sm;
small, .small {
font-size: 65%;
}
}
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: @space;
margin-bottom: @space-sm;
small, .small {
font-size: 75%;
}
}
h1, .h1 {
font-size: @font-size-h1;
font-weight: 300;
}
h2, .h2 {
font-size: @font-size-h2;
font-weight: 300;
}
h3, .h3 {
font-size: @font-size-h3;
font-weight: 700;
}
h4, .h4 {
font-size: @font-size-h4;
font-weight: 700;
}
h5, .h5 {
font-size: @font-size-h5;
font-weight: 400;
}
h6, .h6 {
font-size: @font-size-h6;
font-weight: 400;
}
// Body text
// -------------------------
p {
margin: 0 0 @space-sm;
font-weight: 300;
strong, .strong, &.strong {
font-weight: 400;
}
}
i {
font-style: normal
}
strong, .strong {
font-weight: 600;
}
.lead {
margin-bottom: @line-height-computed;
font-size: floor((@font-size-base * 1.15));
}
a {
color: @link-color;
text-decoration: none;
cursor: pointer;
transition: @transition;
&:hover {
opacity: .8;
color: @link-hover-color;
transition: @transition;
}
&:active, &:focus {
opacity: 1;
transition: @transition;
}
&:focus {
.tab-focus();
}
}
.strike {
text-decoration: line-through;
}
small, .small {
font-size: 85%;
}
mark, .mark {
background-color: @state-warning-bg;
padding: .2em;
}
// Alignment
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
// Transformation
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
// Contextual colors
.text-muted {
color: @text-muted;
}
.text-primary {
.text-emphasis-variant(@brand-primary);
}
.text-success {
.text-emphasis-variant(@state-success-text);
}
.text-info {
.text-emphasis-variant(@state-info-text);
}
.text-warning {
.text-emphasis-variant(@state-warning-text);
}
.text-danger {
.text-emphasis-variant(@state-danger-text);
}
.text-underline {
text-decoration: underline;
}
.text-light {
font-weight: 200;
}
// Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
.bg-primary {
// Given the contrast here, this is the only class to have its color inverted
// automatically.
color: #fff;
.bg-variant(@brand-primary);
}
.bg-success {
.bg-variant(@state-success-bg);
}
.bg-info {
.bg-variant(@state-info-bg);
}
.bg-warning {
.bg-variant(@state-warning-bg);
}
.bg-danger {
.bg-variant(@state-danger-bg);
}
// Page header
// -------------------------
.page-header {
padding-bottom: (@space-sm - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @page-header-border-color;
}
// Lists
// -------------------------
// Unordered and Ordered lists
ul,
ol {
margin-top: 0;
margin-bottom: 1em;
ul,
ol {
margin-bottom: 0;
}
}
li {
margin-bottom: .5em;
font-weight: 300;
strong {
font-weight: 400;
}
}
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
padding-left: 0;
list-style: none;
}
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
margin-left: -5px;
> li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
}
// Description Lists
dl {
margin-top: 0; // Remove browser default
margin-bottom: @line-height-computed;
}
dt,
dd {
line-height: @line-height-base;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0; // Undo browser default
}
// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).
.dl-horizontal {
dd {
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
}
@media (min-width: @grid-float-breakpoint) {
dt {
float: left;
width: (@dl-horizontal-offset - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @dl-horizontal-offset;
}
}
}
// Misc
// -------------------------
// Abbreviations and acronyms
abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @abbr-border-color;
}
.initialism {
font-size: 90%;
.text-uppercase();
}
// Blockquotes
blockquote {
padding: @space-sm @line-height-computed;
margin: 0 0 @line-height-computed;
font-size: @blockquote-font-size;
border-left: 5px solid @blockquote-border-color;
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
// Note: Deprecated small and .small as of v3.1.0
// Context: https://github.com/twbs/bootstrap/issues/11660
footer,
small,
.small {
display: block;
font-size: 80%; // back to default font-size
line-height: @line-height-base;
color: @blockquote-small-color;
&:before {
content: '\2014 \00A0'; // em dash, nbsp
}
}
}
// Opposite alignment of blockquote
//
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
.blockquote-reverse,
blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @blockquote-border-color;
border-left: 0;
text-align: right;
// Account for citation
footer,
small,
.small {
&:before {
content: '';
}
&:after {
content: '\00A0 \2014'; // nbsp, em dash
}
}
}
// Addresses
address {
margin-bottom: @line-height-computed;
font-style: normal;
line-height: @line-height-base;
}

57
common/assets/styles/bootstrap/utilities.less
View File

@ -1,57 +0,0 @@
//
// Utility classes
// --------------------------------------------------
// Floats
// -------------------------
.clearfix {
.clearfix();
}
.center-block {
.center-block();
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
// Toggling content
// -------------------------
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
.text-hide();
}
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
}
// For Affix plugin
// -------------------------
.affix {
position: fixed;
}

29
common/assets/styles/bootstrap/wells.less
View File

@ -1,29 +0,0 @@
//
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
padding: @space;
margin-top: @space;
margin-bottom: @space;
background-color: @well-bg;
border: 1px solid @well-border;
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
.well.lg {
padding: @space*2;
}
.well.sm {
padding: @space/2;
}

36
common/assets/styles/etherwallet-custom.less
View File

@ -209,38 +209,6 @@ textarea {
} }
} }
.account-info {
.clearfix;
padding-left: 1em;
margin: 0;
li {
margin-bottom: 0;
list-style-type: none;
word-break: break-all;
}
table& {
font-weight: 200;
border-bottom: 0;
min-width: 200px;
td {
padding: 4px 5px;
line-height: 1;
}
td:first-child {
max-width: 115px;
word-wrap: break-word;
padding-left: 1em;
}
tr:nth-child(even) {
background-color: @gray-lightest;
}
tr:nth-last-child(2),
tr:last-child {
background-color: white !important;
}
}
}
input[type="text"] + .eye { input[type="text"] + .eye {
cursor: pointer; cursor: pointer;
&:before { &:before {
@ -322,10 +290,6 @@ input[type="password"] + .eye {
text-align: right; text-align: right;
} }
.token-balances {
margin-bottom: 15px;
}
h2 a.isActive { h2 a.isActive {
color: #333; color: #333;
cursor: default; cursor: default;

42
common/assets/styles/etherwallet-master.less
View File

@ -2,49 +2,7 @@
@import "etherwallet-fonts.less"; @import "etherwallet-fonts.less";
// Core variables and mixins // Core variables and mixins
@import "bootstrap/mixins.less"; @import "bootstrap/mixins.less";
// Reset and dependencies
@import "bootstrap/normalize.less";
@import "bootstrap/print.less";
//@import "bootstrap/glyphicons.less";
// Core CSS
@import "bootstrap/scaffolding.less";
@import "bootstrap/type.less";
@import "bootstrap/code.less";
@import "bootstrap/grid.less";
@import "bootstrap/tables.less";
@import "bootstrap/forms.less";
@import "bootstrap/buttons.less";
// Components
//@import "bootstrap/component-animations.less";
@import "bootstrap/dropdowns.less";
@import "bootstrap/button-groups.less";
@import "bootstrap/input-groups.less";
//@import "bootstrap/navs.less";
//@import "bootstrap/navbar.less";
//@import "bootstrap/breadcrumbs.less";
//@import "bootstrap/pagination.less";
//@import "bootstrap/pager.less";
//@import "bootstrap/labels.less";
//@import "bootstrap/badges.less";
//@import "bootstrap/jumbotron.less";
//@import "bootstrap/thumbnails.less";
@import "bootstrap/alerts.less";
//@import "bootstrap/progress-bars.less";
//@import "bootstrap/media.less";
//@import "bootstrap/list-group.less";
//@import "bootstrap/panels.less";
//@import "bootstrap/responsive-embed.less";
@import "bootstrap/wells.less";
@import "bootstrap/close.less";
// Components w/ JavaScript
@import "bootstrap/modals.less";
//@import "bootstrap/tooltip.less";
//@import "bootstrap/popovers.less";
//@import "bootstrap/carousel.less";
// Utility classes // Utility classes
@import "bootstrap/utilities.less";
@import "bootstrap/responsive-utilities.less";
@import "etherwallet-custom.less"; @import "etherwallet-custom.less";
@import "etherwallet-swap.less";
@import "etherwallet-ext-custom.less"; @import "etherwallet-ext-custom.less";
@import "etherwallet-utilities.less"; @import "etherwallet-utilities.less";

296
common/assets/styles/etherwallet-swap.less
View File

@ -1,296 +0,0 @@
.swap-tab {
a.link, a.link:hover {
transition: none;
}
.btn-lg {
margin-top: @space*5;
}
.btn svg, .btn img {
margin-right: @space-sm;
margin-left: -@space-xs;
vertical-align: middle;
}
.swap-rates {
text-align: center;
.order-panel {
background: linear-gradient(150deg, @ether-blue, @ether-navy);
position: relative;
.bity-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: @screen-sm) {
padding-top: 1rem;
padding-bottom: 1rem;
.order-info {
text-align: left;
padding: 0 0 0 22%;
}
.bity-logo {
left: -1rem;
top: 40%;
transform: rotate(-90deg);
}
}
}
.form-control.input-sm {
width: 16%;
min-width: 3.5rem;
display: inline-block;
margin-right: @space;
text-align: right;
background-color: transparent;
color: white;
box-shadow: 0 0 0 white;
border: 0 solid white;
border-bottom: 2px solid white;
}
p {
margin: 0;
span {
opacity: .9;
}
}
.order-info {
&:nth-child(4n+1),
&:nth-child(4n+2),
&:nth-child(4n+3) {
background: transparent;
}
}
}
.swap-panel {
padding-top: @space*5;
text-align: center;
> * {
display: inline-block;
margin: @space-xs @space-sm;
vertical-align: middle;
}
.form-control {
width: 10rem;
}
.dropdown {
margin-left: 0;
}
}
.swap-start {
text-align: center;
.swap-info {
text-align: left;
margin-bottom: @space*5;
}
}
.swap-order {
text-align: left;
.order-info-wrap {
margin-bottom: 0;
}
h1 {
margin-top: @space*3;
margin-bottom: @space*3;
}
}
}
.swap-tab, .ens-tab {
.collapse-container {
h4, h5 {
display: inline-block;
}
.collapse-button {
float: none;
margin: 0;
}
}
}
.order-info-wrap {
margin-bottom: @space*5;
display: flex;
.order-info {
padding: @space 0;
}
}
.order-info {
.clearfix;
display: flex;
flex-direction: column;
justify-content: space-around;
min-height: 100px;
text-align: center;
padding: @space/2 0;
color: white;
h3, h4, p {
margin: 0;
}
&:nth-child(4n+1) {
background-color: #175575;
}
&:nth-child(4n+2) {
background-color: #1e92ba;
}
&:nth-child(4n+3) {
background-color: #143955;
}
&:nth-child(4n+4) {
background-color: #19b3ae;
}
}
@circle-width: 4rem;
@circle-width-phone: 3rem;
@progress-breakpoint: 675px;
.swap-progress {
margin-top: @space*2;
margin-bottom: 0;
position: relative;
.sep {
position: absolute;
top: 3.5rem;
left: @cont-padding-lg;
right: @cont-padding-lg;
height: .25rem;
background-color: @gray-lighter;
@media screen and (max-width: @progress-breakpoint) {
display: none;
}
}
.clearfix();
.progress-item {
width: 20%;
float: left;
text-align: center;
margin: .25rem 0;
@media screen and (max-width: @progress-breakpoint) {
width: 100%;
}
&:nth-child(4n+1) .progress-circle {
border-color: fadeout(#1e92ba, 60%);
color: fadeout(#1e92ba, 60%);
}
&:nth-child(4n+2) .progress-circle {
border-color: fadeout(#175575, 60%);
color: fadeout(#175575, 60%);
}
&:nth-child(4n+3) .progress-circle {
border-color: fadeout(#19b3ae, 60%);
color: fadeout(#19b3ae, 60%);
}
&:nth-child(4n+4) .progress-circle {
border-color: fadeout(#143955, 60%);
color: fadeout(#143955, 60%);
}
.progress-circle {
border-radius: 50%;
border-width: @space-xs;
border-style: solid;
box-sizing: content-box;
margin: @space auto;
padding-bottom: @circle-width;
position: relative;
width: @circle-width;
background: white;
@media screen and (max-width: @progress-breakpoint) {
margin: @space-xs @space @space-xs @space*2;
padding-bottom: @circle-width-phone;
width: @circle-width-phone;
float: left;
}
i {
font-size: @space*1.5;
line-height: @space*1.75;
height: @space*1.75;
width: @space*1.75;
font-weight: 900;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@media screen and (max-width: @progress-breakpoint) {
font-size: @space*1.5;
line-height: @space*1.5;
height: @space*1.5;
width: @space*1.5;
}
}
}
p {
font-size: @font-size-small;
font-weight: 600;
text-transform: uppercase;
color: fadeout(lighten(@gray, 10%), 50%);
letter-spacing: .1em;
@media screen and (max-width: @progress-breakpoint) {
line-height: 4rem;
margin: 0;
text-align: left;
}
small {
letter-spacing: .03em;
font-size: 75%;
}
}
&.progress-active {
p {
color: lighten(@gray, 10%);
}
}
&.progress-active:nth-child(4n+1) .progress-circle {
border-color: #1e92ba;
color: #1e92ba;
}
&.progress-active:nth-child(4n+2) .progress-circle {
border-color: #175575;
color: #175575;
}
&.progress-active:nth-child(4n+3) .progress-circle {
border-color: #19b3ae;
color: #19b3ae;
}
&.progress-active:nth-child(4n+4) .progress-circle {
border-color: #143955;
color: #143955;
}
&.progress-true {
.progress-circle {
background-color: @brand-success;
border-color: @brand-success;
box-shadow: inset 0px 0px 0px 5px white;
i {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20426.67%20426.67%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M153.504%20366.839c-8.657%200-17.323-3.302-23.927-9.911L9.914%20237.265c-13.218-13.218-13.218-34.645%200-47.863%2013.218-13.218%2034.645-13.218%2047.863%200l95.727%2095.727%20215.39-215.386c13.218-13.214%2034.65-13.218%2047.859%200%2013.222%2013.218%2013.222%2034.65%200%2047.863L177.436%20356.928c-6.609%206.605-15.271%209.911-23.932%209.911z%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
font-size: 0;
}
}
p {
color: @brand-success;
}
}
}
}
.ens-tab {
.order-info-wrap {
margin-top: @space;
margin-bottom: @space;
}
h5 + p {
margin-top: -.5em;
}
}

106
common/components/BalanceSidebar/AccountInfo.jsx Normal file
View File

@ -0,0 +1,106 @@
// @flow
import './AccountInfo.scss';
import React from 'react';
import translate from 'translations';
import { Identicon } from 'components/ui';
import { formatNumber } from 'utils/formatters';
import type { IWallet } from 'libs/wallet';
import type { NetworkConfig } from 'config/data';
import { Ether } from 'libs/units';
import type { FiatRequestedRatesAction } from 'actions/rates';
type Props = {
balance: Ether,
wallet: IWallet,
network: NetworkConfig,
fiatRequestedRates: () => FiatRequestedRatesAction
};
export default class AccountInfo extends React.Component {
props: Props;
state = {
showLongBalance: false,
address: ''
};
componentDidMount() {
this.props.fiatRequestedRates();
this.props.wallet.getAddress().then(addr => {
this.setState({ address: addr });
});
}
toggleShowLongBalance = (e: SyntheticMouseEvent) => {
e.preventDefault();
this.setState(state => {
return {
showLongBalance: !state.showLongBalance
};
});
};
render() {
const { network, balance } = this.props;
const { blockExplorer, tokenExplorer } = network;
const { address } = this.state;
return (
<div className="AccountInfo">
<div className="AccountInfo-section">
<h5 className="AccountInfo-section-header">
{translate('sidebar_AccountAddr')}
</h5>
<div className="AccountInfo-address">
<div className="AccountInfo-address-icon">
<Identicon address={address} size="100%" />
</div>
<div className="AccountInfo-address-addr">
{address}
</div>
</div>
</div>
<div className="AccountInfo-section">
<h5 className="AccountInfo-section-header">
{translate('sidebar_AccountBal')}
</h5>
<ul className="AccountInfo-list">
<li className="AccountInfo-list-item">
<span
className="AccountInfo-list-item-clickable mono wrap"
onClick={this.toggleShowLongBalance}
>
{this.state.showLongBalance
? balance ? balance.toString() : '???'
: balance ? formatNumber(balance.amount) : '???'}
</span>
{` ${network.name}`}
</li>
</ul>
</div>
{(!!blockExplorer || !!tokenExplorer) &&
<div className="AccountInfo-section">
<h5 className="AccountInfo-section-header">
{translate('sidebar_TransHistory')}
</h5>
<ul className="AccountInfo-list">
{!!blockExplorer &&
<li className="AccountInfo-list-item">
<a href={blockExplorer.address(address)} target="_blank">
{`${network.name} (${blockExplorer.name})`}
</a>
</li>}
{!!tokenExplorer &&
<li className="AccountInfo-list-item">
<a href={tokenExplorer.address(address)} target="_blank">
{`Tokens (${tokenExplorer.name})`}
</a>
</li>}
</ul>
</div>}
</div>
);
}
}

76
common/components/BalanceSidebar/AccountInfo.scss Normal file
View File

@ -0,0 +1,76 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.AccountInfo {
&-section {
margin-top: $space * 1.5;
&:first-child {
margin-top: 0;
}
&-header {
margin-top: 0;
}
}
&-address,
&-list {
padding-left: $space;
}
&-address {
@include clearfix;
&-icon {
float: left;
width: 44px;
height: 44px;
margin-right: $space-md;
}
&-addr {
width: 100%;
word-wrap: break-word;
@include mono;
}
}
&-list {
&-item {
margin-bottom: 0;
list-style-type: none;
word-break: break-all;
&-clickable:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
}
.account-info {
padding-left: 1em;
margin: 0;
li {
}
table {
font-weight: 200;
border-bottom: 0;
min-width: 200px;
td {
padding: 4px 5px;
line-height: 1;
}
td:first-child {
max-width: 115px;
word-wrap: break-word;
padding-left: 1em;
}
tr:nth-last-child(2),
tr:last-child {
background-color: white !important;
}
}
}

105
common/components/BalanceSidebar/AddCustomTokenForm.jsx
View File

@ -1,105 +0,0 @@
// @flow
import React from 'react';
import { isValidETHAddress, isPositiveIntegerOrZero } from 'libs/validators';
import translate from 'translations';
export default class AddCustomTokenForm extends React.Component {
props: {
onSave: ({ address: string, symbol: string, decimal: number }) => void
};
state = {
address: '',
symbol: '',
decimal: ''
};
render() {
return (
<div className="custom-token-fields">
<label>
{translate('TOKEN_Addr')}
</label>
<input
className={
'form-control input-sm ' +
(isValidETHAddress(this.state.address) ? 'is-valid' : 'is-invalid')
}
type="text"
name="address"
value={this.state.address}
onChange={this.onFieldChange}
/>
<label>
{translate('TOKEN_Symbol')}
</label>
<input
className={
'form-control input-sm ' +
(this.state.symbol !== '' ? 'is-valid' : 'is-invalid')
}
type="text"
name="symbol"
value={this.state.symbol}
onChange={this.onFieldChange}
/>
<label>
{translate('TOKEN_Dec')}
</label>
<input
className={
'form-control input-sm ' +
(isPositiveIntegerOrZero(parseInt(this.state.decimal))
? 'is-valid'
: 'is-invalid')
}
type="text"
name="decimal"
value={this.state.decimal}
onChange={this.onFieldChange}
/>
<div
className={`btn btn-primary btn-sm ${this.isValid()
? ''
: 'disabled'}`}
onClick={this.onSave}
>
{translate('x_Save')}
</div>
</div>
);
}
isValid() {
const { address, symbol, decimal } = this.state;
if (!isPositiveIntegerOrZero(parseInt(decimal))) {
return false;
}
if (!isValidETHAddress(address)) {
return false;
}
if (symbol === '') {
return false;
}
return true;
}
onFieldChange = (e: SyntheticInputEvent) => {
var name = e.target.name;
var value = e.target.value;
this.setState(state => {
var newState = Object.assign({}, state);
newState[name] = value;
return newState;
});
};
onSave = () => {
if (!this.isValid()) {
return;
}
const { address, symbol, decimal } = this.state;
this.props.onSave({ address, symbol, decimal: parseInt(decimal) });
};
}

198
common/components/BalanceSidebar/BalanceSidebar.jsx
View File

@ -1,198 +0,0 @@
// @flow
import React from 'react';
import Big from 'bignumber.js';
import { BaseWallet } from 'libs/wallet';
import type { NetworkConfig } from 'config/data';
import type { State } from 'reducers';
import { connect } from 'react-redux';
import { getWalletInst, getTokenBalances } from 'selectors/wallet';
import type { TokenBalance } from 'selectors/wallet';
import { getNetworkConfig } from 'selectors/config';
import { Link } from 'react-router';
import TokenBalances from './TokenBalances';
import { formatNumber } from 'utils/formatters';
import { Identicon } from 'components/ui';
import translate from 'translations';
import * as customTokenActions from 'actions/customTokens';
import { showNotification } from 'actions/notifications';
type Props = {
wallet: BaseWallet,
balance: Big,
network: NetworkConfig,
tokenBalances: TokenBalance[],
rates: { [string]: number },
showNotification: Function,
addCustomToken: typeof customTokenActions.addCustomToken,
removeCustomToken: typeof customTokenActions.removeCustomToken
};
export class BalanceSidebar extends React.Component {
props: Props;
state = {
showLongBalance: false,
address: ''
};
componentDidMount() {
this.props.wallet
.getAddress()
.then(addr => {
this.setState({ address: addr });
})
.catch(err => {
this.props.showNotification('danger', err);
});
}
render() {
const { wallet, balance, network, tokenBalances, rates } = this.props;
const { blockExplorer, tokenExplorer } = network;
const { address } = this.state;
if (!wallet) {
return null;
}
return (
<aside>
<h5>
{translate('sidebar_AccountAddr')}
</h5>
<ul className="account-info">
<Identicon address={address} />
<span className="mono wrap">
{address}
</span>
</ul>
<hr />
<h5>
{translate('sidebar_AccountBal')}
</h5>
<ul
className="account-info point"
onDoubleClick={this.toggleShowLongBalance}
title={`${balance.toString()} (Double-Click)`}
>
<li>
<span className="mono wrap">
{this.state.showLongBalance
? balance.toString()
: formatNumber(balance)}
</span>
{` ${network.name}`}
</li>
</ul>
<TokenBalances
tokens={tokenBalances}
onAddCustomToken={this.props.addCustomToken}
onRemoveCustomToken={this.props.removeCustomToken}
/>
<hr />
{(!!blockExplorer || !!tokenExplorer) &&
<div>
<h5>
{translate('sidebar_TransHistory')}
</h5>
<ul className="account-info">
{!!blockExplorer &&
<li>
<a
href={blockExplorer.address.replace('[[address]]', address)}
target="_blank"
>
{`${network.name} (${blockExplorer.name})`}
</a>
</li>}
{!!tokenExplorer &&
<li>
<a
href={tokenExplorer.address.replace('[[address]]', address)}
target="_blank"
>
{`Tokens (${tokenExplorer.name})`}
</a>
</li>}
</ul>
</div>}
<hr />
{!!Object.keys(rates).length &&
<section>
<h5>
{translate('sidebar_Equiv')}
</h5>
<ul className="account-info">
{rates['BTC'] &&
<li>
<span className="mono wrap">
{formatNumber(balance.times(rates['BTC']))}
</span>{' '}
BTC
</li>}
{rates['REP'] &&
<li>
<span className="mono wrap">
{formatNumber(balance.times(rates['REP']), 2)}
</span>{' '}
REP
</li>}
{rates['EUR'] &&
<li>
<span className="mono wrap">
€{formatNumber(balance.times(rates['EUR']), 2)}
</span>
{' EUR'}
</li>}
{rates['USD'] &&
<li>
<span className="mono wrap">
${formatNumber(balance.times(rates['USD']), 2)}
</span>
{' USD'}
</li>}
{rates['GBP'] &&
<li>
<span className="mono wrap">
£{formatNumber(balance.times(rates['GBP']), 2)}
</span>
{' GBP'}
</li>}
{rates['CHF'] &&
<li>
<span className="mono wrap">
{formatNumber(balance.times(rates['CHF']), 2)}
</span>{' '}
CHF
</li>}
</ul>
<Link to={'swap'} className="btn btn-primary btn-sm">
Swap via bity
</Link>
</section>}
</aside>
);
}
toggleShowLongBalance = (e: SyntheticMouseEvent) => {
e.preventDefault();
this.setState(state => {
return {
showLongBalance: !state.showLongBalance
};
});
};
}
function mapStateToProps(state: State) {
return {
wallet: getWalletInst(state),
balance: state.wallet.balance,
tokenBalances: getTokenBalances(state),
network: getNetworkConfig(state),
rates: state.rates
};
}
export default connect(mapStateToProps, {
...customTokenActions,
showNotification
})(BalanceSidebar);

49
common/components/BalanceSidebar/EquivalentValues.jsx Normal file
View File

@ -0,0 +1,49 @@
// @flow
import './EquivalentValues.scss';
import React from 'react';
import translate from 'translations';
import { formatNumber } from 'utils/formatters';
import { Ether } from 'libs/units';
const ratesKeys = ['BTC', 'REP', 'EUR', 'USD', 'GBP', 'CHF'];
type Props = {
balance: ?Ether,
rates: ?{ [string]: number }
};
export default class EquivalentValues extends React.Component {
props: Props;
render() {
const { balance, rates } = this.props;
return (
<div className="EquivalentValues">
<h5 className="EquivalentValues-title">
{translate('sidebar_Equiv')}
</h5>
<ul className="EquivalentValues-values">
{rates
? ratesKeys.map(key => {
if (!rates[key]) return null;
return (
<li className="EquivalentValues-values-currency" key={key}>
<span className="EquivalentValues-values-currency-label">
{key}:
</span>
<span className="EquivalentValues-values-currency-value">
{' '}{balance
? formatNumber(balance.amount.times(rates[key]))
: '???'}
</span>
</li>
);
})
: <h5>No rates were loaded.</h5>}
</ul>
</div>
);
}
}

37
common/components/BalanceSidebar/EquivalentValues.scss Normal file
View File

@ -0,0 +1,37 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.EquivalentValues {
&-title {
margin-top: 0;
margin-bottom: $space;
}
&-values {
list-style: none;
padding: 0;
@include clearfix;
&-currency {
float: left;
width: 50%;
margin-bottom: $space-xs;
&:nth-child(odd) {
padding-right: $space-sm;
}
&:nth-child(even) {
padding-left: $space-sm;
}
&-label {
display: inline-block;
min-width: 36px;
}
&-value {
font-weight: 600;
@include mono;
}
}
}
}

105
common/components/BalanceSidebar/Promos.jsx Normal file
View File

@ -0,0 +1,105 @@
// @flow
import './Promos.scss';
import React from 'react';
import { Link } from 'react-router';
const promos = [
{
color: '#6e9a3e',
href:
'https://myetherwallet.groovehq.com/knowledge_base/topics/protecting-yourself-and-your-funds',
isExternal: true,
texts: [<h6 key="1">Learn more about protecting your funds.</h6>],
images: [
require('assets/images/logo-ledger.svg'),
require('assets/images/logo-trezor.svg')
]
},
{
color: '#2b71b1',
href:
'https://buy.coinbase.com?code=a6e1bd98-6464-5552-84dd-b27f0388ac7d&address=0xA7DeFf12461661212734dB35AdE9aE7d987D648c&crypto_currency=ETH&currency=USD',
isExternal: true,
texts: [
<p key="1">It’s now easier to get more ETH</p>,
<h5 key="2">Buy ETH with USD</h5>
],
images: [require('assets/images/logo-coinbase.svg')]
},
{
color: '#006e79',
href: '/swap',
texts: [
<p key="1">It’s now easier to get more ETH</p>,
<h5 key="2">Swap BTC &lt;-&gt; ETH</h5>
],
images: [require('assets/images/logo-bity-white.svg')]
}
];
export default class Promos extends React.Component {
state: { activePromo: number };
state = {
activePromo: parseInt(Math.random() * promos.length)
};
_navigateToPromo = (idx: number) => {
this.setState({ activePromo: Math.max(0, Math.min(promos.length, idx)) });
};
render() {
const { activePromo } = this.state;
const promo = promos[activePromo];
const promoContent = (
<div className="Promos-promo-inner">
<div className="Promos-promo-text">
{promo.texts}
</div>
<div className="Promos-promo-images">
{promo.images.map((img, idx) => <img src={img} key={idx} />)}
</div>
</div>
);
const promoEl = promo.isExternal
? <a
className="Promos-promo"
key={promo.href}
target="_blank"
href={promo.href}
style={{ backgroundColor: promo.color }}
>
{promoContent}
</a>
: <Link
className="Promos-promo"
key={promo.href}
to={promo.href}
style={{ backgroundColor: promo.color }}
>
<div className="Promos-promo-inner">
{promoContent}
</div>
</Link>;
return (
<div className="Promos">
{promoEl}
<div className="Promos-nav">
{promos.map((promo, idx) => {
return (
<button
className={`Promos-nav-btn ${idx === activePromo
? 'is-active'
: ''}`}
key={idx}
onClick={() => this._navigateToPromo(idx)}
/>
);
})}
</div>
</div>
);
}
}

90
common/components/BalanceSidebar/Promos.scss Normal file
View File

@ -0,0 +1,90 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.Promos {
&-promo {
position: relative;
height: 6rem;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
transition-duration: 200ms;
@include clearfix;
&:hover,
&:focus,
&:active {
color: #fff;
opacity: 0.85;
}
&-inner {
position: absolute;
display: flex;
align-items: center;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
}
&-text,
&-images {
padding: 0 $space-sm;
}
&-text {
flex: 1;
p,
h4,
h5,
h6 {
margin: .15rem 0;
}
p {
font-size: 0.8rem;
}
h5 {
font-size: 1.3rem;
}
}
&-images {
padding: 0 $space * 1.5;
img {
display: block;
margin: 0 auto;
width: 100%;
max-width: 96px;
height: auto;
padding: $space-xs;
}
}
}
&-nav {
text-align: center;
&-btn {
@include reset-button;
display: inline-block;
margin: 0 $space-xs;
background: $gray-dark;
width: 12px;
height: 12px;
border: 3px solid $gray-lightest;
border-radius: 100%;
outline: none;
opacity: 0.6;
&.is-active {
opacity: 1;
}
}
}
}

87
common/components/BalanceSidebar/TokenBalances.jsx
View File

@ -1,87 +0,0 @@
// @flow
import React from 'react';
import translate from 'translations';
import TokenRow from './TokenRow';
import AddCustomTokenForm from './AddCustomTokenForm';
import type { TokenBalance } from 'selectors/wallet';
import type { Token } from 'config/data';
type Props = {
tokens: TokenBalance[],
onAddCustomToken: (token: Token) => any,
onRemoveCustomToken: (symbol: string) => any
};
export default class TokenBalances extends React.Component {
props: Props;
state = {
showAllTokens: false,
showCustomTokenForm: false
};
render() {
const { tokens } = this.props;
return (
<section className="token-balances">
<h5>{translate('sidebar_TokenBal')}</h5>
<table className="account-info">
<tbody>
{tokens
.filter(
token =>
!token.balance.eq(0) ||
token.custom ||
this.state.showAllTokens
)
.map(token =>
<TokenRow
key={token.symbol}
balance={token.balance}
symbol={token.symbol}
custom={token.custom}
onRemove={this.props.onRemoveCustomToken}
/>
)}
</tbody>
</table>
<a
className="btn btn-default btn-sm"
onClick={this.toggleShowAllTokens}
>
{!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'}
</a>{' '}
<a
className="btn btn-default btn-sm"
onClick={this.toggleShowCustomTokenForm}
>
<span>
{translate('SEND_custom')}
</span>
</a>
{this.state.showCustomTokenForm &&
<AddCustomTokenForm onSave={this.addCustomToken} />}
</section>
);
}
toggleShowAllTokens = () => {
this.setState(state => {
return {
showAllTokens: !state.showAllTokens
};
});
};
toggleShowCustomTokenForm = () => {
this.setState(state => {
return {
showCustomTokenForm: !state.showCustomTokenForm
};
});
};
addCustomToken = (token: Token) => {
this.props.onAddCustomToken(token);
this.setState({ showCustomTokenForm: false });
};
}

108
common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.jsx Normal file
View File

@ -0,0 +1,108 @@
// @flow
import React from 'react';
import classnames from 'classnames';
import { isValidETHAddress, isPositiveIntegerOrZero } from 'libs/validators';
import translate from 'translations';
export default class AddCustomTokenForm extends React.Component {
props: {
onSave: ({ address: string, symbol: string, decimal: number }) => void
};
state = {
address: '',
symbol: '',
decimal: ''
};
render() {
const { address, symbol, decimal } = this.state;
const inputClasses = 'AddCustom-field-input form-control input-sm';
const errors = this.getErrors();
const fields = [
{
name: 'address',
value: address,
label: translate('TOKEN_Addr')
},
{
name: 'symbol',
value: symbol,
label: translate('TOKEN_Symbol')
},
{
name: 'decimal',
value: decimal,
label: translate('TOKEN_Dec')
}
];
return (
<form className="AddCustom" onSubmit={this.onSave}>
{fields.map(field => {
return (
<label className="AddCustom-field form-group" key={field.name}>
<span className="AddCustom-field-label">
{field.label}
</span>
<input
className={classnames(
inputClasses,
errors[field.name] ? 'is-invalid' : 'is-valid'
)}
type="text"
name={field.name}
value={field.value}
onChange={this.onFieldChange}
/>
</label>
);
})}
<button
className="btn btn-primary btn-sm btn-block"
disabled={!this.isValid()}
>
{translate('x_Save')}
</button>
</form>
);
}
getErrors() {
const { address, symbol, decimal } = this.state;
const errors = {};
if (!isPositiveIntegerOrZero(parseInt(decimal, 10))) {
errors.decimal = true;
}
if (!isValidETHAddress(address)) {
errors.address = true;
}
if (!symbol) {
errors.symbol = true;
}
return errors;
}
isValid() {
return !Object.keys(this.getErrors()).length;
}
onFieldChange = (e: SyntheticInputEvent) => {
var name = e.target.name;
var value = e.target.value;
this.setState({ [name]: value });
};
onSave = (ev: SyntheticInputEvent) => {
ev.preventDefault();
if (!this.isValid()) {
return;
}
const { address, symbol, decimal } = this.state;
this.props.onSave({ address, symbol, decimal: parseInt(decimal, 10) });
};
}

10
common/components/BalanceSidebar/TokenRow.jsx → common/components/BalanceSidebar/TokenBalances/TokenRow.jsx
View File

@ -1,4 +1,5 @@
// @flow // @flow
import './TokenRow.scss';
import React from 'react'; import React from 'react';
import Big from 'bignumber.js'; import Big from 'bignumber.js';
import { formatNumber } from 'utils/formatters'; import { formatNumber } from 'utils/formatters';
@ -19,24 +20,25 @@ export default class TokenRow extends React.Component {
const { balance, symbol, custom } = this.props; const { balance, symbol, custom } = this.props;
const { showLongBalance } = this.state; const { showLongBalance } = this.state;
return ( return (
<tr> <tr className="TokenRow">
<td <td
className="mono wrap point" className="TokenRow-balance"
title={`${balance.toString()} (Double-Click)`} title={`${balance.toString()} (Double-Click)`}
onDoubleClick={this.toggleShowLongBalance} onDoubleClick={this.toggleShowLongBalance}
> >
{!!custom && {!!custom &&
<img <img
src={removeIcon} src={removeIcon}
className="token-remove" className="TokenRow-balance-remove"
title="Remove Token" title="Remove Token"
onClick={this.onRemove} onClick={this.onRemove}
tabIndex="0"
/>} />}
<span> <span>
{showLongBalance ? balance.toString() : formatNumber(balance)} {showLongBalance ? balance.toString() : formatNumber(balance)}
</span> </span>
</td> </td>
<td> <td className="TokenRow-symbol">
{symbol} {symbol}
</td> </td>
</tr> </tr>

31
common/components/BalanceSidebar/TokenBalances/TokenRow.scss Normal file
View File

@ -0,0 +1,31 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.TokenRow {
border-bottom: 1px solid $gray-lighter;
&-balance,
&-symbol {
padding: $space-xs 0 $space-xs $space-md;
}
&-balance {
@include mono;
&-remove {
margin-left: -32px;
margin-right: 20px;
height: 12px;
cursor: pointer;
opacity: 0.4;
&:hover {
opacity: 1;
}
}
}
&-symbol {
font-weight: 300;
}
}

93
common/components/BalanceSidebar/TokenBalances/index.jsx Normal file
View File

@ -0,0 +1,93 @@
// @flow
import './index.scss';
import React from 'react';
import translate from 'translations';
import TokenRow from './TokenRow';
import AddCustomTokenForm from './AddCustomTokenForm';
import type { TokenBalance } from 'selectors/wallet';
import type { Token } from 'config/data';
type Props = {
tokens: TokenBalance[],
onAddCustomToken: (token: Token) => any,
onRemoveCustomToken: (symbol: string) => any
};
export default class TokenBalances extends React.Component {
props: Props;
state = {
showAllTokens: false,
showCustomTokenForm: false
};
render() {
const { tokens } = this.props;
const shownTokens = tokens.filter(
token => !token.balance.eq(0) || token.custom || this.state.showAllTokens
);
return (
<section className="TokenBalances">
<h5 className="TokenBalances-title">
{translate('sidebar_TokenBal')}
</h5>
<table className="TokenBalances-rows">
<tbody>
{shownTokens.map(token =>
<TokenRow
key={token.symbol}
balance={token.balance}
symbol={token.symbol}
custom={token.custom}
onRemove={this.props.onRemoveCustomToken}
/>
)}
</tbody>
</table>
<div className="TokenBalances-buttons">
<button
className="btn btn-default btn-xs"
onClick={this.toggleShowAllTokens}
>
{!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'}
</button>{' '}
<button
className="btn btn-default btn-xs"
onClick={this.toggleShowCustomTokenForm}
>
<span>
{translate('SEND_custom')}
</span>
</button>
</div>
{this.state.showCustomTokenForm &&
<div className="TokenBalances-form">
<AddCustomTokenForm onSave={this.addCustomToken} />
</div>}
</section>
);
}
toggleShowAllTokens = () => {
this.setState(state => {
return {
showAllTokens: !state.showAllTokens
};
});
};
toggleShowCustomTokenForm = () => {
this.setState(state => {
return {
showCustomTokenForm: !state.showCustomTokenForm
};
});
};
addCustomToken = (token: Token) => {
this.props.onAddCustomToken(token);
this.setState({ showCustomTokenForm: false });
};
}

18
common/components/BalanceSidebar/TokenBalances/index.scss Normal file
View File

@ -0,0 +1,18 @@
@import "common/sass/variables";
.TokenBalances {
&-title {
margin-top: 0;
}
&-rows {
width: 100%;
margin-bottom: $space;
}
&-form {
margin-top: $space * 2;
padding-top: $space;
border-top: 1px solid $gray-lighter;
}
}

3
common/components/BalanceSidebar/index.js
View File

@ -1,3 +0,0 @@
// @flow
export { default } from './BalanceSidebar';

111
common/components/BalanceSidebar/index.jsx Normal file
View File

@ -0,0 +1,111 @@
// @flow
import React from 'react';
import { IWallet } from 'libs/wallet';
import type { NetworkConfig } from 'config/data';
import type { State } from 'reducers';
import { connect } from 'react-redux';
import { getWalletInst, getTokenBalances } from 'selectors/wallet';
import type { TokenBalance } from 'selectors/wallet';
import { getNetworkConfig } from 'selectors/config';
import * as customTokenActions from 'actions/customTokens';
import { showNotification } from 'actions/notifications';
import { fiatRequestedRates } from 'actions/rates';
import type { FiatRequestedRatesAction } from 'actions/rates';
import AccountInfo from './AccountInfo';
import Promos from './Promos';
import TokenBalances from './TokenBalances';
import EquivalentValues from './EquivalentValues';
import { Ether } from 'libs/units';
type Props = {
wallet: IWallet,
balance: Ether,
network: NetworkConfig,
tokenBalances: TokenBalance[],
rates: { [string]: number },
showNotification: Function,
addCustomToken: typeof customTokenActions.addCustomToken,
removeCustomToken: typeof customTokenActions.removeCustomToken,
fiatRequestedRates: () => FiatRequestedRatesAction
};
export class BalanceSidebar extends React.Component {
props: Props;
render() {
const {
wallet,
balance,
network,
tokenBalances,
rates,
fiatRequestedRates
} = this.props;
if (!wallet) {
return null;
}
const blocks = [
{
name: 'Account Info',
content: (
<AccountInfo
wallet={wallet}
balance={balance}
network={network}
fiatRequestedRates={fiatRequestedRates}
/>
)
},
{
name: 'Promos',
isFullWidth: true,
content: <Promos />
},
{
name: 'Token Balances',
content: (
<TokenBalances
tokens={tokenBalances}
onAddCustomToken={this.props.addCustomToken}
onRemoveCustomToken={this.props.removeCustomToken}
/>
)
},
{
name: 'Equivalent Values',
content: <EquivalentValues balance={balance} rates={rates} />
}
];
return (
<aside>
{blocks.map(block =>
<section
className={`Block ${block.isFullWidth ? 'is-full-width' : ''}`}
key={block.name}
>
{block.content}
</section>
)}
</aside>
);
}
}
function mapStateToProps(state: State) {
return {
wallet: getWalletInst(state),
balance: state.wallet.balance,
tokenBalances: getTokenBalances(state),
network: getNetworkConfig(state),
rates: state.rates
};
}
export default connect(mapStateToProps, {
...customTokenActions,
showNotification,
fiatRequestedRates
})(BalanceSidebar);

4
common/components/ExtendedNotifications/TransactionSucceeded.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import bityConfig from 'config/bity'; import { ETHTxExplorer } from 'config/data';
import translate from 'translations'; import translate from 'translations';
export type TransactionSucceededProps = { export type TransactionSucceededProps = {
txHash: string txHash: string
@ -7,7 +7,7 @@ export type TransactionSucceededProps = {
const TransactionSucceeded = ({ txHash }: TransactionSucceededProps) => { const TransactionSucceeded = ({ txHash }: TransactionSucceededProps) => {
// const checkTxLink = `https://www.myetherwallet.com?txHash=${txHash}/#check-tx-status`; // const checkTxLink = `https://www.myetherwallet.com?txHash=${txHash}/#check-tx-status`;
const txHashLink = bityConfig.ethExplorer.replace('[[txHash]]', txHash); const txHashLink = ETHTxExplorer(txHash);
return ( return (
<div> <div>

19
common/components/Footer/PreFooter.jsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import './PreFooter.scss';
const PreFooter = () => {
return (
<section className="pre-footer">
<div className="container">
<p>
MyEtherWallet.com does not hold your keys for you. We cannot access
accounts, recover keys, reset passwords, nor reverse transactions.
Protect your keys &amp; always check that you are on correct URL.
<a href="#"> You are responsible for your security.</a>
</p>
</div>
</section>
);
};
export default PreFooter;

12
common/components/Footer/PreFooter.scss Normal file
View File

@ -0,0 +1,12 @@
@import "common/sass/variables";
.pre-footer {
padding: 1rem;
box-shadow: 16px 16px 47px 0 rgba(0, 0, 0, .07);
margin-top: 5rem;
background-color: white;
text-align: center;
p {
font-size: $font-size-medium;
}
}

371
common/components/Footer/index.jsx
View File

@ -1,206 +1,199 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import translate, { getTranslators } from 'translations'; import translate from 'translations';
import { donationAddressMap } from 'config/data'; import { donationAddressMap } from 'config/data';
import logo from 'assets/images/logo-myetherwallet.svg'; import logo from 'assets/images/logo-myetherwallet.svg';
import { bityReferralURL } from 'config/data'; import { bityReferralURL } from 'config/data';
import PreFooter from './PreFooter';
import './index.scss'; import './index.scss';
const LINKS_LEFT = [
{
text: 'Knowledge Base',
href: 'https://myetherwallet.groovehq.com/help_center'
},
{
text: 'Helpers & ENS Debugging',
href: 'https://www.myetherwallet.com/helpers.html'
},
{
text: 'Sign Message',
href: 'https://www.myetherwallet.com/signmsg.html'
}
];
const LINKS_SUPPORT = [
{
href: bityReferralURL,
text: 'Swap ETH/BTC/EUR/CHF via Bity.com'
},
{
href: 'https://www.ledgerwallet.com/r/fa4b?path=/products/',
text: 'Buy a Ledger Nano S'
},
{
href: 'https://trezor.io/?a=myetherwallet.com',
text: 'Buy a TREZOR'
},
{
href: 'https://digitalbitbox.com/?ref=mew',
text: 'Buy a Digital Bitbox'
}
];
const LINKS_RIGHT = [
{
href: 'https://www.MyEtherWallet.com',
text: 'MyEtherWallet.com'
},
{
href: 'https://github.com/MyEtherWallet/MyEtherWallet',
text: 'Github: Current Site'
},
{
href: 'https://github.com/MyEtherWallet',
text: 'Github: MEW Org'
},
{
href: 'https://github.com/MyEtherWallet/MyEtherWallet/releases/latest',
text: 'Github: Latest Release'
},
{
href:
'https://chrome.google.com/webstore/detail/myetherwallet-cx/nlbmnnijcnlegkjjpcfjclmcfggfefdm?hl=en',
text: 'MyEtherWallet CX'
},
{
href:
'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn',
text: 'Anti-Phishing CX'
}
];
const LINKS_SOCIAL = [
{
href: 'https://myetherwallet.herokuapp.com/',
text: 'Slack'
},
{
href: 'https://www.reddit.com/r/MyEtherWallet/',
text: 'Reddit'
},
{
href: 'https://twitter.com/myetherwallet',
text: 'Twitter'
},
{
href: 'https://www.facebook.com/MyEtherWallet/',
text: 'Facebook'
},
{
href: 'https://medium.com/@myetherwallet',
text: 'Medium'
}
];
export default class Footer extends Component { export default class Footer extends Component {
render() { render() {
const translators = getTranslators();
return ( return (
<footer className="Footer" role="contentinfo" aria-label="footer"> <div>
<div className="container"> <PreFooter />
<section className="row"> <footer className="Footer" role="contentinfo" aria-label="footer">
<section className="row"> <div className="Footer-column Footer-about">
<div className="Footer-about col-sm-3"> <p aria-hidden="true">
<p aria-hidden="true"> <a href="/">
<a href="/"> <img
<img className="Footer-about-logo"
className="Footer-about-logo" src={logo}
src={logo} height="55px"
height="55px" width="auto"
width="auto" alt="MyEtherWallet"
alt="MyEtherWallet" />
/> </a>
</p>
<p className="Footer-about-text">
<span>
{translate('FOOTER_1')}
</span>
<span>
{translate('FOOTER_1b')}
</span>
</p>
{LINKS_LEFT.map(link => {
return (
<p key={link.href}>
<a href={link.href} target="_blank" rel="noopener">
{link.text}
</a> </a>
</p> </p>
<p> );
<span>{translate('FOOTER_1')}</span> })}
<span>{translate('FOOTER_1b')}</span>
<a <p>&copy; 2017 MyEtherWallet, LLC</p>
aria-label="kvhnuke's github" </div>
href="https://github.com/kvhnuke"
target="_blank" <div className="Footer-column Footer-info">
> <h5>
kvhnuke <i aria-hidden="true">👫</i>
You can support us by supporting our blockchain-family.
</h5>
<p>Consider using our affiliate links to...</p>
<ul>
{LINKS_SUPPORT.map(link => {
return (
<li key={link.href}>
<a href={link.href} target="_blank">
{link.text}
</a>
</li>
);
})}
</ul>
<h5>
<i aria-hidden="true">💝</i>
{translate('FOOTER_2')}
</h5>
<ul>
<li>
{' '}ETH:{' '}
<span className="mono wrap">{donationAddressMap.ETH}</span>
</li>
<li>
{' '}BTC:{' '}
<span className="mono wrap">{donationAddressMap.BTC}</span>
</li>
</ul>
</div>
<div className="Footer-column Footer-links">
{LINKS_RIGHT.map(link => {
return (
<p key={link.href}>
<a href={link.href} target="_blank">
{link.text}
</a> </a>
{' & '}
<a
aria-label="tayvano's github"
href="https://github.com/tayvano"
target="_blank"
>
tayvano
</a>.
</p> </p>
<br /> );
</div> })}
<p>
{LINKS_SOCIAL.map((link, i) => {
return (
<span key={link.href}>
<a key={link.href} href={link.href} target="_blank">
{link.text}
</a>
{i !== LINKS_SOCIAL.length - 1 && ' · '}
</span>
);
})}
</p>
<div className="Footer-info col-sm-6"> {/* TODO: Fix me */}
<h5> <p>Latest Block#: ?????</p>
<i aria-hidden="true">💝</i> </div>
{translate('FOOTER_2')} </footer>
</h5> </div>
<ul>
<li>
{' '}ETH:{' '}
<span className="mono wrap">{donationAddressMap.ETH}</span>
</li>
<li>
{' '}BTC:{' '}
<span className="mono wrap">{donationAddressMap.BTC}</span>
</li>
</ul>
<h5>
<i aria-hidden="true">👫</i>
{translate('ADD_Warning_1')}
</h5>
<p>Consider using our affiliate links to...</p>
<ul>
<li>
<a
aria-label="Swap Ether or Bitcoin via Bity.com"
href={bityReferralURL}
target="_blank"
>
Swap ETH/BTC/EUR/CHF via Bity.com
</a>
</li>
<li>
<a
href="https://www.ledgerwallet.com/r/fa4b?path=/products/"
target="_blank"
>
Buy a Ledger Nano S
</a>
</li>
<li>
<a
href="https://trezor.io/?a=myetherwallet.com"
target="_blank"
>
Buy a TREZOR
</a>
</li>
</ul>
{!!translators.length &&
<h5>
{' '}<i>🏅</i> <span>{translate('Translator_Desc')}</span>
</h5>}
{!!translators.length &&
<ul>
<li>
{translators.map(key =>
<span key={key}>
{translate(key)}
</span>
)}
</li>
</ul>}
</div>
<div className="Footer-links col-sm-3">
<h5>
<i aria-hidden="true">🌎</i> On the Web
</h5>
<ul>
<li>
<a
aria-label="my ether wallet.com"
href="https://www.MyEtherWallet.com"
target="_blank"
>
www.MyEtherWallet.com
</a>
</li>
<li>
<a
aria-label="my ether wallet github"
href="https://github.com/kvhnuke/etherwallet"
target="_blank"
>
Github: MyEtherWallet.com & CX
</a>
</li>
<li>
<a
aria-label="our organization on github"
href="https://github.com/MyEtherWallet"
target="_blank"
>
Github: MyEtherWallet (Org)
</a>
</li>
<li>
<a
aria-label="join our slack"
href="https://myetherwallet.herokuapp.com/"
target="_blank"
>
Join Our Slack
</a>
</li>
<li>
<a
aria-label="twitter"
href="https://twitter.com/myetherwallet"
target="_blank"
>
Twitter
</a>
</li>
<li>
<a
aria-label="facebook"
href="https://www.facebook.com/MyEtherWallet/"
target="_blank"
>
Facebook
</a>
</li>
</ul>
<h5>
<i aria-hidden="true">🙏</i> Support
</h5>
<ul>
<li>
<a
aria-label="email support at myetherwallet.com"
href="mailto:support@myetherwallet.com"
target="_blank"
>
Email
</a>
</li>
<li>
<a
aria-label="open a github issue"
href="https://github.com/kvhnuke/etherwallet/issues"
target="_blank"
>
Github Issue
</a>
</li>
</ul>
</div>
</section>
</section>
</div>
</footer>
); );
} }
} }

40
common/components/Footer/index.scss
View File

@ -4,19 +4,40 @@
.Footer { .Footer {
background-color: $ether-navy; background-color: $ether-navy;
color: white; color: white;
margin-top: 100px;
padding-top: $space-xs; padding-top: $space-xs;
padding-bottom: $space-sm; padding-bottom: $space-sm;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
align-items: center;
&-logo { @media (min-width: $screen-sm-min) {
width: 100%; flex-direction: row;
height: auto; text-align: left;
max-width: 20rem; align-items: flex-start;
}
&-column {
padding: 1rem 2rem;
}
&-about {
max-width: 22rem;
&-logo {
width: 100%;
height: auto;
max-width: 20rem;
}
}
&-info {
max-width: 34rem;
} }
&-info,
&-links { &-links {
padding-left: 3rem; max-width: 28rem;
} }
p { p {
@ -36,8 +57,11 @@
margin: $font-size-small 0 0; margin: $font-size-small 0 0;
i { i {
margin-left: -1.5em;
margin-right: .25em; margin-right: .25em;
@media (min-width: $screen-sm-min) {
margin-left: -1.5em;
}
} }
} }

5
common/components/Header/components/GasPriceDropdown.jsx
View File

@ -25,8 +25,9 @@ export default class GasPriceDropdown extends Component {
} }
render() { render() {
const { expanded } = this.state;
return ( return (
<span className="dropdown"> <span className={`dropdown ${expanded ? 'open' : ''}`}>
<a <a
aria-haspopup="true" aria-haspopup="true"
aria-label="adjust gas price" aria-label="adjust gas price"
@ -36,7 +37,7 @@ export default class GasPriceDropdown extends Component {
<span>Gas Price</span>: {this.props.value} Gwei <span>Gas Price</span>: {this.props.value} Gwei
<i className="caret" /> <i className="caret" />
</a> </a>
{this.state.expanded && {expanded &&
<ul className="dropdown-menu GasPrice-dropdown-menu"> <ul className="dropdown-menu GasPrice-dropdown-menu">
<div className="GasPrice-header"> <div className="GasPrice-header">
<span>Gas Price</span>: {this.props.value} Gwei <span>Gas Price</span>: {this.props.value} Gwei

8
common/components/Header/components/Navigation.jsx
View File

@ -28,6 +28,10 @@ const tabs = [
name: 'NAV_ViewWallet' name: 'NAV_ViewWallet'
// to: 'view-wallet' // to: 'view-wallet'
}, },
{
name: 'NAV_ENS',
to: 'ens'
},
{ {
name: 'NAV_Help', name: 'NAV_Help',
to: 'https://myetherwallet.groovehq.com/help_center', to: 'https://myetherwallet.groovehq.com/help_center',
@ -58,7 +62,7 @@ export default class TabsOptions extends Component {
<nav <nav
role="navigation" role="navigation"
aria-label="main navigation" aria-label="main navigation"
className="Navigation container overflowing" className="Navigation"
> >
{this.state.showLeftArrow && {this.state.showLeftArrow &&
<a <a
@ -69,7 +73,7 @@ export default class TabsOptions extends Component {
&#171; &#171;
</a>} </a>}
<div className="Navigation-scroll"> <div className="Navigation-scroll container">
<ul className="Navigation-links"> <ul className="Navigation-links">
{tabs.map(link => { {tabs.map(link => {
return ( return (

4
common/components/Header/components/Navigation.scss
View File

@ -1,8 +1,10 @@
@import "common/sass/variables"; @import "common/sass/variables";
.Navigation { .Navigation {
width: 100%;
position: relative; position: relative;
overflow-y: hidden; overflow-y: hidden;
border-top: .25rem solid $brand-primary;
&-scroll { &-scroll {
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@ -17,7 +19,7 @@
} }
&-links { &-links {
border-bottom: 2px solid $gray-lighter; border-bottom: 2px solid #fff;
display: inline-block; display: inline-block;
font-size: 0; font-size: 0;
margin-bottom: 20px; margin-bottom: 20px;

2
common/components/Header/index.jsx
View File

@ -61,7 +61,7 @@ export default class Header extends Component {
</Link> </Link>
<div className="Header-branding-title-tagline"> <div className="Header-branding-title-tagline">
<span className="Header-branding-title-tagline-version"> <span className="Header-branding-title-tagline-version">
Open-Source & Client-Side Ether Wallet · v{VERSION} v{VERSION}
</span> </span>
<GasPriceDropdown <GasPriceDropdown

2
common/components/Header/index.scss
View File

@ -17,6 +17,8 @@ $small-size: 900px;
// Header // Header
.Header { .Header {
margin-bottom: 2rem;
&-announcement { &-announcement {
padding: 4px 10px; padding: 4px 10px;
line-height: 26px; line-height: 26px;

1
common/components/PrintableWallet/index.jsx
View File

@ -46,6 +46,7 @@ export default class PrintableWallet extends Component {
aria-describedby="x_PrintDesc" aria-describedby="x_PrintDesc"
className={'btn btn-lg btn-primary'} className={'btn btn-lg btn-primary'}
onClick={this.print} onClick={this.print}
style={{ marginTop: 10 }}
> >
{translate('x_Print')} {translate('x_Print')}
</a> </a>

37
common/components/Root/index.jsx
View File

@ -1,22 +1,45 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { Router } from 'react-router'; import { Router, Redirect, Route } from 'react-router';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { App } from 'containers';
import GenerateWallet from 'containers/Tabs/GenerateWallet';
import ViewWallet from 'containers/Tabs/ViewWallet';
import Help from 'containers/Tabs/Help';
import Swap from 'containers/Tabs/Swap';
import SendTransaction from 'containers/Tabs/SendTransaction';
import Contracts from 'containers/Tabs/Contracts';
import ENS from 'containers/Tabs/ENS';
export default class Root extends Component { export default class Root extends Component {
static propTypes = { static propTypes = {
store: PropTypes.object, store: PropTypes.object,
history: PropTypes.object, history: PropTypes.object
routes: PropTypes.func
}; };
render() { render() {
const { store, history, routes } = this.props; const { store, history } = this.props;
// key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
return ( return (
<Provider store={store} key={Math.random()}> <Provider store={store}>
<Router history={history} key={Math.random()}> <Router history={history} key={Math.random()}>
{routes()} <Route name="App" path="" component={App}>
<Route name="GenerateWallet" path="/" component={GenerateWallet} />
<Route
name="ViewWallet"
path="/view-wallet"
component={ViewWallet}
/>
<Route name="Help" path="/help" component={Help} />
<Route name="Swap" path="/swap" component={Swap} />
<Route
name="Send"
path="/send-transaction"
component={SendTransaction}
/>
<Route name="Contracts" path="/contracts" component={Contracts} />
<Route name="ENS" path="/ens" component={ENS} />
<Redirect from="/*" to="/" />
</Route>
</Router> </Router>
</Provider> </Provider>
); );

37
common/components/WalletDecrypt/DeterministicWalletsModal.jsx
View File

@ -7,11 +7,9 @@ import {
getDeterministicWallets, getDeterministicWallets,
setDesiredToken setDesiredToken
} from 'actions/deterministicWallets'; } from 'actions/deterministicWallets';
import { toUnit } from 'libs/units';
import { getNetworkConfig } from 'selectors/config'; import { getNetworkConfig } from 'selectors/config';
import { getTokens } from 'selectors/wallet'; import { getTokens } from 'selectors/wallet';
import { isValidPath } from 'libs/validators'; import { isValidPath } from 'libs/validators';
import type { import type {
DeterministicWalletData, DeterministicWalletData,
GetDeterministicWalletsArgs, GetDeterministicWalletsArgs,
@ -38,15 +36,17 @@ type Props = {
walletType: ?string, walletType: ?string,
dPath: string, dPath: string,
dPaths: { label: string, value: string }[], dPaths: { label: string, value: string }[],
publicKey: string, publicKey: ?string,
chainCode: string, chainCode: ?string,
seed: ?string,
onCancel: () => void, onCancel: () => void,
onConfirmAddress: string => void, onConfirmAddress: (string, number) => void,
onPathChange: string => void onPathChange: string => void
}; };
type State = { type State = {
selectedAddress: string, selectedAddress: string,
selectedAddrIndex: number,
isCustomPath: boolean, isCustomPath: boolean,
customPath: string, customPath: string,
page: number page: number
@ -56,6 +56,7 @@ class DeterministicWalletsModal extends React.Component {
props: Props; props: Props;
state: State = { state: State = {
selectedAddress: '', selectedAddress: '',
selectedAddrIndex: 0,
isCustomPath: false, isCustomPath: false,
customPath: '', customPath: '',
page: 0 page: 0
@ -66,20 +67,23 @@ class DeterministicWalletsModal extends React.Component {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const { publicKey, chainCode } = this.props; const { publicKey, chainCode, seed, dPath } = this.props;
if ( if (
nextProps.publicKey !== publicKey || nextProps.publicKey !== publicKey ||
nextProps.chainCode !== chainCode nextProps.chainCode !== chainCode ||
nextProps.dPath !== dPath ||
nextProps.seed !== seed
) { ) {
this._getAddresses(nextProps); this._getAddresses(nextProps);
} }
} }
_getAddresses(props: Props = this.props) { _getAddresses(props: Props = this.props) {
const { dPath, publicKey, chainCode } = props; const { dPath, publicKey, chainCode, seed } = props;
if (dPath && publicKey && chainCode && isValidPath(dPath)) { if (dPath && ((publicKey && chainCode) || seed) && isValidPath(dPath)) {
this.props.getDeterministicWallets({ this.props.getDeterministicWallets({
seed,
dPath, dPath,
publicKey, publicKey,
chainCode, chainCode,
@ -118,12 +122,15 @@ class DeterministicWalletsModal extends React.Component {
_handleConfirmAddress = () => { _handleConfirmAddress = () => {
if (this.state.selectedAddress) { if (this.state.selectedAddress) {
this.props.onConfirmAddress(this.state.selectedAddress); this.props.onConfirmAddress(
this.state.selectedAddress,
this.state.selectedAddrIndex
);
} }
}; };
_selectAddress(selectedAddress) { _selectAddress(selectedAddress, selectedAddrIndex) {
this.setState({ selectedAddress }); this.setState({ selectedAddress, selectedAddrIndex });
} }
_nextPage = () => { _nextPage = () => {
@ -142,9 +149,7 @@ class DeterministicWalletsModal extends React.Component {
const { selectedAddress } = this.state; const { selectedAddress } = this.state;
// Get renderable values, but keep 'em short // Get renderable values, but keep 'em short
const value = wallet.value const value = wallet.value ? wallet.value.toEther().toPrecision(4) : '';
? toUnit(wallet.value, 'wei', 'ether').toPrecision(4)
: '';
const tokenValue = wallet.tokenValues[desiredToken] const tokenValue = wallet.tokenValues[desiredToken]
? wallet.tokenValues[desiredToken].toPrecision(4) ? wallet.tokenValues[desiredToken].toPrecision(4)
: ''; : '';
@ -152,7 +157,7 @@ class DeterministicWalletsModal extends React.Component {
return ( return (
<tr <tr
key={wallet.address} key={wallet.address}
onClick={this._selectAddress.bind(this, wallet.address)} onClick={this._selectAddress.bind(this, wallet.address, wallet.index)}
> >
<td> <td>
{wallet.index + 1} {wallet.index + 1}

130
common/components/WalletDecrypt/Mnemonic.jsx
View File

@ -1,27 +1,129 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import translate from 'translations'; import translate, { translateRaw } from 'translations';
import { validateMnemonic, mnemonicToSeed } from 'bip39';
import DeterministicWalletsModal from './DeterministicWalletsModal';
import DPATHS from 'config/dpaths.js';
const DEFAULT_PATH = DPATHS.MNEMONIC[0].value;
type State = {
phrase: string,
pass: string,
seed: string,
dPath: string
};
export default class MnemonicDecrypt extends Component { export default class MnemonicDecrypt extends Component {
props: { onUnlock: any => void };
state: State = {
phrase: '',
pass: '',
seed: '',
dPath: DEFAULT_PATH
};
render() { render() {
const { phrase, seed, dPath, pass } = this.state;
const isValidMnemonic = validateMnemonic(phrase);
return ( return (
<section className="col-md-4 col-sm-6"> <section className="col-md-4 col-sm-6">
<div id="selectedUploadKey"> <div id="selectedTypeKey">
<h4>{translate('ADD_Radio_2_alt')}</h4> <h4>
{translate('ADD_Radio_5')}
</h4>
<div className="form-group"> <div className="form-group">
<input type="file" id="fselector" /> <textarea
id="aria-private-key"
<a className={`form-control ${isValidMnemonic
className="btn-file marg-v-sm" ? 'is-valid'
id="aria1" : 'is-invalid'}`}
tabIndex="0" value={phrase}
role="button" onChange={this.onMnemonicChange}
> placeholder={translateRaw('x_Mnemonic')}
{translate('ADD_Radio_2_short')} rows="4"
</a> />
</div> </div>
<div className="form-group">
<p>Password (optional):</p>
<input
className="form-control"
value={pass}
onChange={this.onPasswordChange}
placeholder={translateRaw('x_Password')}
type="password"
/>
</div>
{isValidMnemonic &&
<div className="form-group">
<button
style={{ width: '100%' }}
onClick={this.onDWModalOpen}
className="btn btn-primary btn-lg"
>
{translate('Choose Address')}
</button>
</div>}
</div> </div>
<DeterministicWalletsModal
isOpen={!!seed}
seed={seed}
dPath={dPath}
dPaths={DPATHS.MNEMONIC}
onCancel={this._handleCancel}
onConfirmAddress={this._handleUnlock}
onPathChange={this._handlePathChange}
walletType={translateRaw('x_Mnemonic')}
/>
</section> </section>
); );
} }
onPasswordChange = (e: SyntheticInputEvent) => {
this.setState({ pass: e.target.value });
};
onMnemonicChange = (e: SyntheticInputEvent) => {
this.setState({ phrase: e.target.value });
};
onDWModalOpen = (e: SyntheticInputEvent) => {
const { phrase, pass } = this.state;
if (!validateMnemonic(phrase)) return;
try {
let seed = mnemonicToSeed(phrase.trim(), pass).toString('hex');
this.setState({ seed });
} catch (err) {
console.log(err);
}
};
_handleCancel = () => {
this.setState({ seed: '' });
};
_handlePathChange = (dPath: string) => {
this.setState({ dPath });
};
_handleUnlock = (address, index) => {
const { phrase, pass, dPath } = this.state;
this.props.onUnlock({
path: `${dPath}/${index}`,
pass,
phrase,
address
});
this.setState({
seed: '',
pass: '',
phrase: ''
});
};
} }

8
common/components/WalletDecrypt/Trezor.jsx
View File

@ -5,7 +5,7 @@ import translate from 'translations';
import TrezorConnect from 'vendor/trezor-connect'; import TrezorConnect from 'vendor/trezor-connect';
import DeterministicWalletsModal from './DeterministicWalletsModal'; import DeterministicWalletsModal from './DeterministicWalletsModal';
import TrezorWallet from 'libs/wallet/trezor'; import TrezorWallet from 'libs/wallet/trezor';
import DPATHS from 'config/dpaths.json'; import DPATHS from 'config/dpaths.js';
const DEFAULT_PATH = DPATHS.TREZOR[0].value; const DEFAULT_PATH = DPATHS.TREZOR[0].value;
type State = { type State = {
@ -65,8 +65,8 @@ export default class TrezorDecrypt extends Component {
}); });
}; };
_handleUnlock = (address: string) => { _handleUnlock = (address: string, index: number) => {
this.props.onUnlock(new TrezorWallet(address, this.state.dPath)); this.props.onUnlock(new TrezorWallet(address, this.state.dPath, index));
}; };
render() { render() {
@ -116,7 +116,7 @@ export default class TrezorDecrypt extends Component {
onCancel={this._handleCancel} onCancel={this._handleCancel}
onConfirmAddress={this._handleUnlock} onConfirmAddress={this._handleUnlock}
onPathChange={this._handlePathChange} onPathChange={this._handlePathChange}
walletType={translate('x_Trezor')} walletType={translate('x_Trezor', true)}
/> />
</section> </section>
); );

21
common/components/WalletDecrypt/index.jsx
View File

@ -9,8 +9,14 @@ import LedgerNanoSDecrypt from './LedgerNano';
import TrezorDecrypt from './Trezor'; import TrezorDecrypt from './Trezor';
import ViewOnlyDecrypt from './ViewOnly'; import ViewOnlyDecrypt from './ViewOnly';
import map from 'lodash/map'; import map from 'lodash/map';
import { unlockPrivateKey, unlockKeystore, setWallet } from 'actions/wallet'; import {
unlockPrivateKey,
unlockKeystore,
unlockMnemonic,
setWallet
} from 'actions/wallet';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import isEmpty from 'lodash/isEmpty';
const WALLETS = { const WALLETS = {
'keystore-file': { 'keystore-file': {
@ -34,7 +40,8 @@ const WALLETS = {
'mnemonic-phrase': { 'mnemonic-phrase': {
lid: 'x_Mnemonic', lid: 'x_Mnemonic',
component: MnemonicDecrypt, component: MnemonicDecrypt,
disabled: true initialParams: {},
unlock: unlockMnemonic
}, },
'ledger-nano-s': { 'ledger-nano-s': {
lid: 'x_Ledger', lid: 'x_Ledger',
@ -129,7 +136,7 @@ export class WalletDecrypt extends Component {
const decryptionComponent = this.getDecryptionComponent(); const decryptionComponent = this.getDecryptionComponent();
return ( return (
<article className="well decrypt-drtv row"> <article className="Tab-content-pane row">
<section className="col-md-4 col-sm-6"> <section className="col-md-4 col-sm-6">
<h4> <h4>
{translate('decrypt_Access')} {translate('decrypt_Access')}
@ -164,8 +171,14 @@ export class WalletDecrypt extends Component {
}; };
onUnlock = (payload: any) => { onUnlock = (payload: any) => {
// some components (TrezorDecrypt) don't take an onChange prop, and thus this.state.value will remain unpopulated.
// in this case, we can expect the payload to contain the unlocked wallet info.
const unlockValue =
this.state.value && !isEmpty(this.state.value)
? this.state.value
: payload;
this.props.dispatch( this.props.dispatch(
WALLETS[this.state.selectedWalletKey].unlock(this.state.value || payload) WALLETS[this.state.selectedWalletKey].unlock(unlockValue)
); );
}; };
} }

5
common/components/ui/Dropdown.jsx
View File

@ -27,9 +27,10 @@ export default class DropdownComponent<T: *> extends Component<
render() { render() {
const { options, value, ariaLabel, extra } = this.props; const { options, value, ariaLabel, extra } = this.props;
const { expanded } = this.state;
return ( return (
<span className="dropdown"> <span className={`dropdown ${expanded ? 'open' : ''}`}>
<a <a
tabIndex="0" tabIndex="0"
aria-haspopup="true" aria-haspopup="true"
@ -41,7 +42,7 @@ export default class DropdownComponent<T: *> extends Component<
{this.formatTitle(value)} {this.formatTitle(value)}
<i className="caret" /> <i className="caret" />
</a> </a>
{this.state.expanded && {expanded &&
<ul className="dropdown-menu"> <ul className="dropdown-menu">
{options.map((option, i) => { {options.map((option, i) => {
return ( return (

48
common/components/ui/NewTabLink.jsx Normal file
View File

@ -0,0 +1,48 @@
// @flow
import * as React from 'react';
type AAttributes = {
charset?: string,
coords?: string,
download?: string,
href: string,
hreflang?: string,
media?: string,
name?: string,
rel?:
| 'alternate'
| 'author'
| 'bookmark'
| 'external'
| 'help'
| 'license'
| 'next'
| 'nofollow'
| 'noreferrer'
| 'noopener'
| 'prev'
| 'search'
| 'tag',
rev?: string,
shape?: 'default' | 'rect' | 'circle' | 'poly',
target?: '_blank' | '_parent' | '_self' | '_top',
type?: string
};
type NewTabLinkProps = {
content?: React.Element<any> | string,
children?: React.Element<any> | string,
rest?: AAttributes
};
const NewTabLink = ({
/* eslint-disable */
content, // ESLINT: prop-types validation error, to be fixed in #122
children /* eslint-enable */,
...rest
}: NewTabLinkProps) =>
<a target="_blank" rel="noopener" {...rest}>
{content || children} {/* Keep content for short-hand text insertion */}
</a>;
export default NewTabLink;

62
common/components/ui/SimpleDropDown.jsx Normal file
View File

@ -0,0 +1,62 @@
// @flow
import React, { Component } from 'react';
type Props = {
value?: string,
options: string[],
onChange: (value: string) => void
};
export default class SimpleDropDown extends Component {
props: Props;
state: {
expanded: boolean
} = {
expanded: false
};
toggleExpanded = () => {
this.setState(state => {
return { expanded: !state.expanded };
});
};
onClick = (event: SyntheticInputEvent) => {
const value = event.target.getAttribute('data-value') || '';
this.props.onChange(value);
this.setState({ expanded: false });
};
render() {
const { options, value } = this.props;
const { expanded } = this.state;
return (
<div className={`dropdown ${expanded ? 'open' : ''}`}>
<a
className="btn btn-default dropdown-toggle"
onClick={this.toggleExpanded}
>
{value}
<i className="caret" />
</a>
{expanded &&
<ul className="dropdown-menu dropdown-menu-right">
{options.map((option, i) => {
return (
<li key={i}>
<a
className={option === value ? 'active' : ''}
onClick={this.onClick}
data-value={option}
>
{option}
</a>
</li>
);
})}
</ul>}
</div>
);
}
}

32
common/components/ui/SimpleDropdown.jsx
View File

@ -1,32 +0,0 @@
// @flow
import React, { Component } from 'react';
type Props<T> = {
value?: T,
options: Array<T>,
onChange: (event: SyntheticInputEvent) => void
};
export default class SimpleDropDown<T: *> extends Component {
props: Props<T>;
render() {
return (
<span className="dropdown">
<select
value={this.props.value || this.props.options[0]}
className="btn btn-default dropdown-toggle"
onChange={this.props.onChange}
>
{this.props.options.map((obj, i) => {
return (
<option value={obj} key={i}>
{obj}
</option>
);
})}
</select>
</span>
);
}
}

30
common/components/ui/SimpleSelect.jsx Normal file
View File

@ -0,0 +1,30 @@
// @flow
import React, { Component } from 'react';
type Props = {
value?: string,
options: string[],
onChange: (event: SyntheticInputEvent) => void
};
export default class SimpleSelect extends Component {
props: Props;
render() {
return (
<select
value={this.props.value || this.props.options[0]}
className={'form-control'}
onChange={this.props.onChange}
>
{this.props.options.map((obj, i) => {
return (
<option value={obj} key={i}>
{obj}
</option>
);
})}
</select>
);
}
}

12
common/components/ui/UnlockHeader.jsx
View File

@ -3,13 +3,13 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import translate from 'translations'; import translate from 'translations';
import WalletDecrypt from 'components/WalletDecrypt'; import WalletDecrypt from 'components/WalletDecrypt';
import BaseWallet from 'libs/wallet/base'; import type { IWallet } from 'libs/wallet/IWallet';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import type { State } from 'reducers'; import type { State } from 'reducers';
type Props = { type Props = {
title: string, title: string,
wallet: BaseWallet wallet: IWallet
}; };
export class UnlockHeader extends React.Component { export class UnlockHeader extends React.Component {
@ -48,13 +48,7 @@ export class UnlockHeader extends React.Component {
{translate(this.props.title)} {translate(this.props.title)}
</h1> </h1>
</div> </div>
{this.state.expanded && {this.state.expanded && <WalletDecrypt />}
<div>
<WalletDecrypt />
{/* @@if (site === 'cx' ) { <cx-wallet-decrypt-drtv></cx-wallet-decrypt-drtv> }
@@if (site === 'mew' ) { <wallet-decrypt-drtv></wallet-decrypt-drtv> } */}
</div>}
{this.state.expanded && <hr />} {this.state.expanded && <hr />}
</article> </article>
); );

1
common/components/ui/index.js
View File

@ -5,3 +5,4 @@ export { default as Identicon } from './Identicon';
export { default as Modal } from './Modal'; export { default as Modal } from './Modal';
export { default as UnlockHeader } from './UnlockHeader'; export { default as UnlockHeader } from './UnlockHeader';
export { default as QRCode } from './QRCode'; export { default as QRCode } from './QRCode';
export { default as NewTabLink } from './NewTabLink.jsx';

75
common/config/bity.js
View File

@ -1,39 +1,52 @@
export default { import { ETHTxExplorer, BTCTxExplorer } from './data';
serverURL: 'https://bity.myetherapi.com',
bityAPI: 'https://bity.com/api', type SupportedDestinationKind = 'ETH' | 'BTC' | 'REP';
ethExplorer: 'https://etherscan.io/tx/[[txHash]]',
btcExplorer: 'https://blockchain.info/tx/[[txHash]]', const serverURL = 'https://bity.myetherapi.com';
const bityURL = 'https://bity.com/api';
const BTCMin = 0.01;
const BTCMax = 3;
// while Bity is supposedly OK with any order that is at least 0.01 BTC Worth, the order will fail if you send 0.01 BTC worth of ETH.
// This is a bad magic number, but will suffice for now
// value = percent higher/lower than 0.01 BTC worth
const buffers = {
ETH: 0.1,
REP: 0.2
};
// rate must be BTC[KIND]
export function kindMin(
BTCKINDRate: number,
kind: SupportedDestinationKind
): number {
const kindMin = BTCKINDRate * BTCMin;
return kindMin + kindMin * buffers[kind];
}
// rate must be BTC[KIND]
export function kindMax(
BTCKINDRate: number,
kind: SupportedDestinationKind
): number {
const kindMax = BTCKINDRate * BTCMax;
return kindMax - kindMax * buffers[kind];
}
const info = {
serverURL,
bityURL,
ETHTxExplorer,
BTCTxExplorer,
BTCMin,
BTCMax,
validStatus: ['RCVE', 'FILL', 'CONF', 'EXEC'], validStatus: ['RCVE', 'FILL', 'CONF', 'EXEC'],
invalidStatus: ['CANC'], invalidStatus: ['CANC'],
// while Bity is supposedly OK with any order that is at least 0.01 BTC Worth, the order will fail if you send 0.01 BTC worth of ETH.
// This is a bad magic number, but will suffice for now
ETHBuffer: 0.1, // percent higher/lower than 0.01 BTC worth
REPBuffer: 0.2, // percent higher/lower than 0.01 BTC worth
BTCMin: 0.01,
BTCMax: 3,
ETHMin: function(BTCETHRate: number) {
const ETHMin = BTCETHRate * this.BTCMin;
const ETHMinWithPadding = ETHMin + ETHMin * this.ETHBuffer;
return ETHMinWithPadding;
},
ETHMax: function(BTCETHRate: number) {
const ETHMax = BTCETHRate * this.BTCMax;
const ETHMaxWithPadding = ETHMax - ETHMax * this.ETHBuffer;
return ETHMaxWithPadding;
},
REPMin: function(BTCREPRate: number) {
const REPMin = BTCREPRate * this.BTCMin;
const REPMinWithPadding = REPMin + REPMin * this.REPBuffer;
return REPMinWithPadding;
},
REPMax: function(BTCREPRate: number) {
const REPMax = BTCREPRate * this.BTCMax;
const REPMaxWithPadding = REPMax - REPMax * this.ETHBuffer;
return REPMaxWithPadding;
},
postConfig: { postConfig: {
headers: { headers: {
'Content-Type': 'application/json; charset:UTF-8' 'Content-Type': 'application/json; charset:UTF-8'
} }
} }
}; };
export default info;

35
common/config/data.js
View File

@ -2,7 +2,7 @@
import { RPCNode } from 'libs/nodes'; import { RPCNode } from 'libs/nodes';
// Displays in the header // Displays in the header
export const VERSION = '4.0.0'; export const VERSION = '4.0.0 (Alpha 0.0.2)';
// Displays at the top of the site, make message empty string to remove. // Displays at the top of the site, make message empty string to remove.
// Type can be primary, warning, danger, success, or info. // Type can be primary, warning, danger, success, or info.
@ -15,14 +15,25 @@ export const ANNOUNCEMENT_MESSAGE = `
If you're interested in recieving updates about the MyEtherWallet V4 Alpha, you can subscribe via <a href="http://myetherwallet.us16.list-manage.com/subscribe?u=afced8afb6eb2968ba407a144&id=15a7c74eab">mailchimp</a> :) If you're interested in recieving updates about the MyEtherWallet V4 Alpha, you can subscribe via <a href="http://myetherwallet.us16.list-manage.com/subscribe?u=afced8afb6eb2968ba407a144&id=15a7c74eab">mailchimp</a> :)
`; `;
export const DONATION_ADDRESSES_MAP = { const etherScan = 'https://etherscan.io';
const blockChainInfo = 'https://blockchain.info';
const ethPlorer = 'https://ethplorer.io';
export const ETHTxExplorer = (txHash: string): string =>
`${etherScan}/tx/${txHash}`;
export const BTCTxExplorer = (txHash: string): string =>
`${blockChainInfo}/tx/${txHash}`;
export const ETHAddressExplorer = (address: string): string =>
`${etherScan}/address/${address}`;
export const ETHTokenExplorer = (address: string): string =>
`${ethPlorer}/address/${address}`;
export const donationAddressMap = {
BTC: '1MEWT2SGbqtz6mPCgFcnea8XmWV5Z4Wc6', BTC: '1MEWT2SGbqtz6mPCgFcnea8XmWV5Z4Wc6',
ETH: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8', ETH: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8',
REP: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8' REP: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8'
}; };
export const donationAddressMap = DONATION_ADDRESSES_MAP;
export const gasPriceDefaults = { export const gasPriceDefaults = {
gasPriceMinGwei: 1, gasPriceMinGwei: 1,
gasPriceMaxGwei: 60 gasPriceMaxGwei: 60
@ -142,12 +153,12 @@ export type NetworkConfig = {
unit: string, unit: string,
blockExplorer?: { blockExplorer?: {
name: string, name: string,
tx: string, tx: Function,
address: string address: Function
}, },
tokenExplorer?: { tokenExplorer?: {
name: string, name: string,
address: string address: Function
}, },
chainId: number, chainId: number,
tokens: Token[], tokens: Token[],
@ -167,13 +178,13 @@ export const NETWORKS: { [key: string]: NetworkConfig } = {
unit: 'ETH', unit: 'ETH',
chainId: 1, chainId: 1,
blockExplorer: { blockExplorer: {
name: 'https://etherscan.io', name: etherScan,
tx: 'https://etherscan.io/tx/[[txHash]]', tx: ETHTxExplorer,
address: 'https://etherscan.io/address/[[address]]' address: ETHAddressExplorer
}, },
tokenExplorer: { tokenExplorer: {
name: 'Ethplorer.io', name: ethPlorer,
address: 'https://ethplorer.io/address/[[address]]' address: ETHTokenExplorer
}, },
tokens: require('./tokens/eth').default, tokens: require('./tokens/eth').default,
contracts: require('./contracts/eth.json') contracts: require('./contracts/eth.json')

50
common/config/dpaths.js Normal file
View File

@ -0,0 +1,50 @@
const ETH_DEFAULT = {
label: 'Default (ETH)',
value: "m/44'/60'/0'/0"
};
const ETH_TREZOR = {
label: 'TREZOR (ETH)',
value: "m/44'/60'/0'/0"
};
const ETH_LEDGER = {
label: 'Ledger (ETH)',
value: "m/44'/60'/0'"
};
const ETC_LEDGER = {
label: 'Ledger (ETC)',
value: "m/44'/60'/160720'/0'"
};
const ETC_TREZOR = {
label: 'TREZOR (ETC)',
value: "m/44'/61'/0'/0"
};
const TESTNET = {
label: 'Testnet',
value: "m/44'/1'/0'/0"
};
const EXPANSE = {
label: 'Expanse',
value: "m/44'/40'/0'/0"
};
const TREZOR = [ETH_TREZOR, ETC_TREZOR, TESTNET];
const MNEMONIC = [
ETH_DEFAULT,
ETH_LEDGER,
ETC_LEDGER,
ETC_TREZOR,
TESTNET,
EXPANSE
];
export default {
TREZOR,
MNEMONIC
};

16
common/config/dpaths.json
View File

@ -1,16 +0,0 @@
{
"TREZOR": [
{
"label": "TREZOR (ETH)",
"value": "m/44'/60'/0'/0"
},
{
"label": "TREZOR (ETC)",
"value": "m/44'/61'/0'/0"
},
{
"label": "Testnet",
"value": "m/44'/1'/0'/0"
}
]
}

35
common/containers/App/Notifications.jsx
View File

@ -1,6 +1,8 @@
// @flow // @flow
import './Notifications.scss';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import classnames from 'classnames';
import { closeNotification } from 'actions/notifications'; import { closeNotification } from 'actions/notifications';
import type { Notification } from 'actions/notifications'; import type { Notification } from 'actions/notifications';
@ -11,36 +13,23 @@ class NotificationRow extends React.Component {
}; };
render() { render() {
const { msg, level } = this.props.notification; const { msg, level } = this.props.notification;
let className = ''; const notifClass = classnames({
Notification: true,
switch (level) { alert: true,
case 'danger': [`alert-${level}`]: !!level
className = 'alert-danger'; });
break;
case 'success':
className = 'alert-success';
break;
case 'warning':
className = 'alert-warning';
break;
}
return ( return (
<div <div className={notifClass} role="alert" aria-live="assertive">
className={`alert popup ${className} animated-show-hide`}
role="alert"
aria-live="assertive"
>
<span className="sr-only"> <span className="sr-only">
{level} {level}
</span> </span>
<div className="container"> <div className="Notification-message">
{msg} {msg}
</div> </div>
<i <button
tabIndex="0" className="Notification-close"
aria-label="dismiss" aria-label="dismiss"
className="icon-close"
onClick={this.onClose} onClick={this.onClose}
/> />
</div> </div>
@ -62,7 +51,7 @@ export class Notifications extends React.Component {
return null; return null;
} }
return ( return (
<div className="alerts-container"> <div className="Notifications">
{this.props.notifications.map((n, i) => {this.props.notifications.map((n, i) =>
<NotificationRow <NotificationRow
key={`${n.level}-${i}`} key={`${n.level}-${i}`}

144
common/containers/App/Notifications.scss Normal file
View File

@ -0,0 +1,144 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.Notifications {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.Notification {
position: relative;
padding: $space;
margin: $space 0;
font-weight: 300;
font-size: $font-size-bump;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
// Make sure headers blend in
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: inherit;
}
&-message {
position: relative;
padding: 0 10rem 0 5rem;
@media screen and (max-width: $screen-xs) {
padding: 3rem 1rem 0 4rem;
}
// Message contents
a {
color: #fff;
text-decoration: underline;
&:hover {
opacity: 0.8;
}
&:active,
&:focus {
opacity: 1;
}
}
svg {
vertical-align: bottom;
}
// Icons
&:after {
content: '';
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 1%;
width: $space * 2;
@media screen and (max-width: $screen-sm) {
left: 3%;
}
@media screen and (max-width: $screen-xs) {
left: 1%;
}
}
&:after,
.alert-info &:after {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20x%3D%2230%22%20y%3D%2230%22%20viewBox%3D%220%200%2065%2065%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cpath%20d%3D%22M32.5%200C14.58%200%200%2014.579%200%2032.5S14.58%2065%2032.5%2065%2065%2050.421%2065%2032.5%2050.42%200%2032.5%200zm0%2061C16.785%2061%204%2048.215%204%2032.5S16.785%204%2032.5%204%2061%2016.785%2061%2032.5%2048.215%2061%2032.5%2061z%22%20fill%3D%22%23FFF%22/%3E%3Ccircle%20cx%3D%2233.018%22%20cy%3D%2219.541%22%20r%3D%223.345%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M32.137%2028.342a2%202%200%200%200-2%202v17a2%202%200%200%200%204%200v-17a2%202%200%200%200-2-2z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
}
.alert-success &:after {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.2%20478.2%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M457.575%20325.1c9.8-12.5%2014.5-25.9%2013.9-39.7-.6-15.2-7.4-27.1-13-34.4%206.5-16.2%209-41.7-12.7-61.5-15.9-14.5-42.9-21-80.3-19.2-26.3%201.2-48.3%206.1-49.2%206.3h-.1c-5%20.9-10.3%202-15.7%203.2-.4-6.4.7-22.3%2012.5-58.1%2014-42.6%2013.2-75.2-2.6-97-16.6-22.9-43.1-24.7-50.9-24.7-7.5%200-14.4%203.1-19.3%208.8-11.1%2012.9-9.8%2036.7-8.4%2047.7-13.2%2035.4-50.2%20122.2-81.5%20146.3-.6.4-1.1.9-1.6%201.4-9.2%209.7-15.4%2020.2-19.6%2029.4-5.9-3.2-12.6-5-19.8-5h-61c-23%200-41.6%2018.7-41.6%2041.6v162.5c0%2023%2018.7%2041.6%2041.6%2041.6h61c8.9%200%2017.2-2.8%2024-7.6l23.5%202.8c3.6.5%2067.6%208.6%20133.3%207.3%2011.9.9%2023.1%201.4%2033.5%201.4%2017.9%200%2033.5-1.4%2046.5-4.2%2030.6-6.5%2051.5-19.5%2062.1-38.6%208.1-14.6%208.1-29.1%206.8-38.3%2019.9-18%2023.4-37.9%2022.7-51.9-.4-8.1-2.2-15-4.1-20.1zm-409.3%20122.2c-8.1%200-14.6-6.6-14.6-14.6V270.1c0-8.1%206.6-14.6%2014.6-14.6h61c8.1%200%2014.6%206.6%2014.6%2014.6v162.5c0%208.1-6.6%2014.6-14.6%2014.6h-61v.1zm383.7-133.9c-4.2%204.4-5%2011.1-1.8%2016.3%200%20.1%204.1%207.1%204.6%2016.7.7%2013.1-5.6%2024.7-18.8%2034.6-4.7%203.6-6.6%209.8-4.6%2015.4%200%20.1%204.3%2013.3-2.7%2025.8-6.7%2012-21.6%2020.6-44.2%2025.4-18.1%203.9-42.7%204.6-72.9%202.2h-1.4c-64.3%201.4-129.3-7-130-7.1h-.1l-10.1-1.2c.6-2.8.9-5.8.9-8.8V270.1c0-4.3-.7-8.5-1.9-12.4%201.8-6.7%206.8-21.6%2018.6-34.3%2044.9-35.6%2088.8-155.7%2090.7-160.9.8-2.1%201-4.4.6-6.7-1.7-11.2-1.1-24.9%201.3-29%205.3.1%2019.6%201.6%2028.2%2013.5%2010.2%2014.1%209.8%2039.3-1.2%2072.7-16.8%2050.9-18.2%2077.7-4.9%2089.5%206.6%205.9%2015.4%206.2%2021.8%203.9%206.1-1.4%2011.9-2.6%2017.4-3.5.4-.1.9-.2%201.3-.3%2030.7-6.7%2085.7-10.8%20104.8%206.6%2016.2%2014.8%204.7%2034.4%203.4%2036.5-3.7%205.6-2.6%2012.9%202.4%2017.4.1.1%2010.6%2010%2011.1%2023.3.4%208.9-3.8%2018-12.5%2027z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
}
.alert-warning &:after {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
}
.alert-danger &:after {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
}
}
&-close {
@include reset-button;
background-position: 50%;
background-repeat: no-repeat;
background-size: 1rem;
cursor: pointer;
opacity: .7;
position: absolute;
top: 0;
right: 0;
width: 9rem;
bottom: 0;
border-left: 1px solid rgba(255, 255, 255, .7);
transition: $transition;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20348.333%20348.334%22%3E%3Cpath%20d%3D%22M336.559%2068.611L231.016%20174.165l105.543%20105.549c15.699%2015.705%2015.699%2041.145%200%2056.85-7.844%207.844-18.128%2011.769-28.407%2011.769-10.296%200-20.581-3.919-28.419-11.769L174.167%20231.003%2068.609%20336.563c-7.843%207.844-18.128%2011.769-28.416%2011.769-10.285%200-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139%200-56.85l105.54-105.549L11.774%2068.611c-15.699-15.699-15.699-41.145%200-56.844%2015.696-15.687%2041.127-15.687%2056.829%200l105.563%20105.554L279.721%2011.767c15.705-15.687%2041.139-15.687%2056.832%200%2015.705%2015.699%2015.705%2041.145.006%2056.844z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
&:hover {
background-color: rgba(#000, 0.1);
border-color: rgba(#fff, .5);
}
&:active {
background-color: rgba(#000, 0.1);
border-color: rgba(#fff, .7);
opacity: 1;
}
@media screen and (max-width: $screen-sm) {
width: 7rem;
}
@media screen and (max-width: $screen-xs) {
width: 100%;
height: 3rem;
left: 0;
right: 0;
top: 0;
bottom: auto;
border-left: 0;
border-bottom: 1px solid rgba(255, 255, 255, .7);
}
}
}

2
common/containers/App/index.jsx
View File

@ -52,7 +52,7 @@ class App extends Component {
<div className="page-layout"> <div className="page-layout">
<main> <main>
<Header {...headerProps} /> <Header {...headerProps} />
<div className="main-content"> <div className="Tab container">
{React.cloneElement(children, { languageSelection })} {React.cloneElement(children, { languageSelection })}
</div> </div>
<Footer /> <Footer />

48
common/containers/Tabs/Contracts/index.jsx
View File

@ -60,32 +60,30 @@ class Contracts extends Component {
} }
return ( return (
<section className="container" style={{ minHeight: '50%' }}> <section className="Tab-content Contracts">
<div className="tab-content"> <div className="Tab-content-pane">
<main className="tab-pane active" role="main"> <h1 className="Contracts-header">
<div className="Contracts"> <button
<h1 className="Contracts-header"> className={`Contracts-header-tab ${interactActive}`}
<button onClick={() => this.changeTab('interact')}
className={`Contracts-header-tab ${interactActive}`} >
onClick={this.changeTab.bind(this, 'interact')} {translate('NAV_InteractContract')}
> </button>{' '}
{translate('NAV_InteractContract')} <span>or</span>{' '}
</button>{' '} <button
<span>or</span>{' '} className={`Contracts-header-tab ${deployActive}`}
<button onClick={() => this.changeTab('deploy')}
className={`Contracts-header-tab ${deployActive}`} >
onClick={this.changeTab.bind(this, 'deploy')} {translate('NAV_DeployContract')}
> </button>
{translate('NAV_DeployContract')} </h1>
</button>
</h1>
<div className="Contracts-content">
{content}
</div>
</div>
</main>
</div> </div>
<main className="Tab-content-pane" role="main">
<div className="Contracts-content">
{content}
</div>
</main>
</section> </section>
); );
} }

44
common/containers/Tabs/Contracts/index.scss
View File

@ -2,29 +2,29 @@
@import "common/sass/mixins"; @import "common/sass/mixins";
.Contracts { .Contracts {
&-header { &-header {
text-align: center; margin: 0;
margin: 2rem 0; text-align: center;
&-tab { &-tab {
@include reset-button; @include reset-button;
color: $ether-blue; color: $ether-blue;
&:hover, &:hover,
&:active { &:active {
opacity: 0.8; opacity: 0.8;
} }
&.is-active { &.is-active {
&, &,
&:hover, &:hover,
&:active { &:active {
color: $text-color; color: $text-color;
cursor: default; cursor: default;
opacity: 1; opacity: 1;
font-weight: 500; font-weight: 500;
} }
} }
} }
} }
} }

28
common/containers/Tabs/ENS/components/ENS.jsx Normal file
View File

@ -0,0 +1,28 @@
// @flow
import * as React from 'react';
import Title from './Title';
import GeneralInfoPanel from './GeneralInfoPanel';
import UnfinishedBanner from './UnfinishedBanner';
type ContainerTabPaneActiveProps = {
children: React.Element<any>
};
const ContainerTabPaneActive = ({ children }: ContainerTabPaneActiveProps) =>
<section className="container">
<div className="tab-content">
<main className="tab-pane active">
<section role="main" className="row">
{children}
</section>
</main>
</div>
</section>;
const ENS = () =>
<ContainerTabPaneActive>
<UnfinishedBanner />
<Title />
<GeneralInfoPanel />
</ContainerTabPaneActive>;
export default ENS;

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