m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Lint and cleanup all scss

Browse Source
This commit is contained in:
sdtsui 2017-08-14 10:31:27 +02:00
parent b8aa529d29
commit 2eadf72fb7
21 changed files with 331 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintrc
View File

@ -34,8 +34,6 @@
{ {
"ignore": [ "ignore": [
"after-comment", "after-comment",
"all-nested",
"blockless-group"
] ]
} }
], ],

4
ui/app/components/dropdowns/network-dropdown.js
View File

@ -3,8 +3,8 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const Dropdown = require('../dropdown').Dropdown const Dropdown = require('./components/dropdown').Dropdown
const DropdownMenuItem = require('../dropdown').DropdownMenuItem const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {

1
ui/app/css/itcss/base/index.scss
View File

@ -0,0 +1 @@
// Base

20
ui/app/css/itcss/components/buttons.scss
View File

@ -3,11 +3,11 @@
*/ */
.btn-green { .btn-green {
background-color: #02C9B1; // TODO: reusable color in colors.css background-color: #02c9b1; // TODO: reusable color in colors.css
} }
button.btn-clear { button.btn-clear {
background: white; background: $white;
border: 1px solid; border: 1px solid;
} }
@ -46,9 +46,9 @@ button.btn-clear {
button.primary { button.primary {
padding: 8px 12px; padding: 8px 12px;
background: #F7861C; background: #f7861c;
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: white; color: $white;
font-size: 1.1em; font-size: 1.1em;
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
text-transform: uppercase; text-transform: uppercase;
@ -57,8 +57,8 @@ button.primary {
.btn-light { .btn-light {
padding: 8px 12px; padding: 8px 12px;
// background: #FFFFFF; // $bg-white // background: #FFFFFF; // $bg-white
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: #585D67; // TODO: make reusable light button color color: #585d67; // TODO: make reusable light button color
font-size: 1.1em; font-size: 1.1em;
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
text-transform: uppercase; text-transform: uppercase;
@ -66,14 +66,14 @@ button.primary {
line-height: 20px; line-height: 20px;
border-radius: 2px; border-radius: 2px;
border: 1px solid #979797; // #TODO: make reusable light border color border: 1px solid #979797; // #TODO: make reusable light border color
opacity: 0.5; opacity: .5;
} }
// TODO: cleanup: not used anywhere // TODO: cleanup: not used anywhere
button.btn-thin { button.btn-thin {
border: 1px solid; border: 1px solid;
border-color: #4D4D4D; border-color: #4d4d4d;
color: #4D4D4D; color: #4d4d4d;
background: rgb(255, 174, 41); background: rgb(255, 174, 41);
border-radius: 4px; border-radius: 4px;
min-width: 200px; min-width: 200px;

14
ui/app/css/itcss/components/header.scss
View File

@ -1,20 +1,18 @@
.app-header { .app-header {
align-items: center; align-items: center;
visibility: visible; visibility: visible;
background: rgb(239, 239, 239); background: $gallery;
padding-top: 1.5vh; padding: 6px 8px;
height: 12vh; height: 12vh;
max-height: 60px; max-height: 60px;
position: relative; position: relative;
z-index: 12; z-index: 12;
padding: 6px 8px;
// background: #EFEFEF; // $gallery
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
position: fixed; position: fixed;
height: 34px; height: 34px;
width: 100%; width: 100%;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08);
z-index: 30; z-index: 30;
} }
} }
@ -22,13 +20,13 @@
.app-header h1 { .app-header h1 {
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
text-transform: uppercase; text-transform: uppercase;
color: #22232C; // $shark color: #22232c; // $shark
} }
h2.page-subtitle { h2.page-subtitle {
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
text-transform: uppercase; text-transform: uppercase;
color: #AEAEAE; color: #aeaeae;
font-size: 1em; font-size: 1em;
margin: 12px; margin: 12px;
} }
@ -51,4 +49,4 @@ h2.page-subtitle {
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
margin-bottom: 1.8em; margin-bottom: 1.8em;
} }
} }

11
ui/app/css/itcss/components/hero-balance.scss
View File

@ -5,7 +5,7 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 0.3em 0.9em 0em 0.9em; margin: .3em .9em 0;
height: 80vh; height: 80vh;
max-height: 225px; max-height: 225px;
} }
@ -15,7 +15,7 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 2.8em 0.9em 0.8em 0.9em; margin: 2.8em .9em .8em;
} }
.balance-container { .balance-container {
@ -47,7 +47,7 @@
.fiat-amount { .fiat-amount {
font-size: 115%; font-size: 115%;
margin-top: 8.5%; margin-top: 8.5%;
color: #A0A0A0; color: #a0a0a0;
} }
} }
@ -61,7 +61,7 @@
} }
.fiat-amount { .fiat-amount {
margin-top: 0.25%; margin-top: .25%;
font-size: 105%; font-size: 105%;
} }
} }
@ -75,6 +75,7 @@
} }
.hero-balance-buttons { .hero-balance-buttons {
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
width: 100%; width: 100%;
height: 100px; // needed a round number to set the heights of the buttons inside height: 100px; // needed a round number to set the heights of the buttons inside
@ -86,7 +87,7 @@
button.btn-clear { button.btn-clear {
font-size: 75%; font-size: 75%;
background: white; background: $white;
border: 1px solid; border: 1px solid;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {

8
ui/app/css/itcss/components/index.scss
View File

@ -1,13 +1,21 @@
@import './buttons.scss'; @import './buttons.scss';
@import './header.scss'; @import './header.scss';
@import './footer.scss'; @import './footer.scss';
@import './network.scss'; @import './network.scss';
@import './modal.scss'; @import './modal.scss';
@import './newui-sections.scss'; @import './newui-sections.scss';
// Balances // Balances
@import './hero-balance.scss'; @import './hero-balance.scss';
@import './wallet-balance.scss'; @import './wallet-balance.scss';
// Tx List and Sections
@import './transaction-list.scss'; @import './transaction-list.scss';
@import './sections.scss'; @import './sections.scss';

16
ui/app/css/itcss/components/modal.scss
View File

@ -37,7 +37,7 @@
margin: 10px; margin: 10px;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
border: 1px solid black; border: 1px solid $black;
padding: 0% 7%; padding: 0% 7%;
justify-content: space-around; justify-content: space-around;
@ -71,7 +71,7 @@
.modal-content-options { .modal-content-options {
flex-direction: row; flex-direction: row;
margin: 20px 0px margin: 20px 0;
} }
div.modal-content-option { div.modal-content-option {
@ -81,8 +81,8 @@
height: 18vw; height: 18vw;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
border: 1px solid black; border: 1px solid $black;
margin: 0px .5vw; margin: 0 .5vw;
justify-content: space-around; justify-content: space-around;
div.modal-content-option-title { div.modal-content-option-title {
@ -99,25 +99,25 @@
div.modal-content-option-subtitle { div.modal-content-option-subtitle {
font-size: 16px; font-size: 16px;
padding: 0px 10px; padding: 0 10px;
height: 25%; height: 25%;
@media screen and (max-width: 679px) { @media screen and (max-width: 679px) {
font-size: 10px; font-size: 10px;
padding: 0px 10px; padding: 0 10px;
margin-bottom: 5px; margin-bottom: 5px;
line-height: 15px; line-height: 15px;
} }
@media screen and (min-width: 680px) { @media screen and (min-width: 680px) {
font-size: 14px; font-size: 14px;
padding: 0px 4px; padding: 0 4px;
margin-bottom: 2px; margin-bottom: 2px;
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
font-size: 20px; font-size: 20px;
padding: 0px 0px; padding: 0;
} }
} }

2
ui/app/css/itcss/components/network.scss
View File

@ -1,7 +1,7 @@
.network-indicator { .network-indicator {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.6em; font-size: .6em;
} }
.network-name { .network-name {

29
ui/app/css/itcss/components/newui-sections.scss
View File

@ -10,7 +10,7 @@ $wallet-view-bg: $wild-sand;
.main-container { .main-container {
position: absolute; position: absolute;
z-index: 18; z-index: 18;
font-family: DIN OT; font-family: "DIN OT";
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
@ -61,14 +61,14 @@ $wallet-view-bg: $wild-sand;
z-index: 26; z-index: 26;
position: fixed; position: fixed;
top: 35px; top: 35px;
left: 0px; left: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
will-change: transform; will-change: transform;
overflow-y: auto; overflow-y: auto;
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px; box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
width: 85%; width: 85%;
height: 100%; height: 100%;
} }
@ -77,12 +77,12 @@ $wallet-view-bg: $wild-sand;
z-index: 25; z-index: 25;
position: fixed; position: fixed;
top: 35px; top: 35px;
left: 0px; left: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, .3);
} }
// main-container media queries // main-container media queries
@ -100,7 +100,7 @@ $wallet-view-bg: $wild-sand;
margin-top: 35px; margin-top: 35px;
width: 85%; width: 85%;
height: 90vh; height: 90vh;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
} }
} }
@ -109,7 +109,7 @@ $wallet-view-bg: $wild-sand;
margin-top: 35px; margin-top: 35px;
width: 80%; width: 80%;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
} }
} }
@ -118,7 +118,7 @@ $wallet-view-bg: $wild-sand;
margin-top: 35px; margin-top: 35px;
width: 65%; width: 65%;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
} }
} }
@ -140,13 +140,14 @@ $wallet-view-bg: $wild-sand;
width: 93px; width: 93px;
height: 50px; height: 50px;
font-size: .7em; font-size: .7em;
background: white; background: $white;
border: 1px solid; border: 1px solid;
} }
} }
// wallet view // wallet view
.account-name { .account-name {
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
font-size: 102%; font-size: 102%;
margin-left: 3%; margin-left: 3%;
@ -162,4 +163,4 @@ $wallet-view-bg: $wild-sand;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin: 5% 7%; margin: 5% 7%;
} }

124
ui/app/css/itcss/components/sections.scss
View File

@ -1,3 +1,7 @@
// Old scss, do not lint - clean up later
/* stylelint-disable */
/* /*
App Sections App Sections
TODO: Move into separate files. TODO: Move into separate files.
@ -9,14 +13,14 @@ textarea.twelve-word-phrase {
width: 300px; width: 300px;
height: 140px; height: 140px;
font-size: 16px; font-size: 16px;
background: white; background: $white;
resize: none; resize: none;
} }
.initialize-screen hr { .initialize-screen hr {
width: 60px; width: 60px;
margin: 12px; margin: 12px;
border-color: #F7861C; border-color: #f7861c;
border-style: solid; border-style: solid;
} }
@ -35,11 +39,11 @@ textarea.twelve-word-phrase {
/* unlock */ /* unlock */
.error { .error {
color: #E20202; color: #e20202;
} }
.warning { .warning {
color: #FFAE00; color: #ffae00;
} }
.lock { .lock {
@ -49,7 +53,7 @@ textarea.twelve-word-phrase {
.lock.locked { .lock.locked {
transform: scale(1.5); transform: scale(1.5);
opacity: 0.0; opacity: 0;
transition: opacity 400ms ease-in, transform 400ms ease-in; transition: opacity 400ms ease-in, transform 400ms ease-in;
} }
@ -96,12 +100,13 @@ textarea.twelve-word-phrase {
width: 260px; width: 260px;
} }
.sizing-input{ .sizing-input {
font-size: 14px; font-size: 14px;
height: 30px; height: 30px;
padding-left: 5px; padding-left: 5px;
} }
.editable-label{
.editable-label {
display: flex; display: flex;
} }
@ -140,7 +145,7 @@ textarea.twelve-word-phrase {
} }
.accounts-section .horizontal-line { .accounts-section .horizontal-line {
margin: 0px 18px; margin: 0 18px;
} }
.accounts-list-option { .accounts-list-option {
@ -157,7 +162,7 @@ textarea.twelve-word-phrase {
} }
.unconftx-link .fa-arrow-right { .unconftx-link .fa-arrow-right {
margin: 0px -8px 0px 8px; margin: 0 -8px 0px 8px;
} }
/* identity panel */ /* identity panel */
@ -184,7 +189,7 @@ textarea.twelve-word-phrase {
.identity-panel i { .identity-panel i {
margin-top: 32px; margin-top: 32px;
margin-right: 6px; margin-right: 6px;
color: #B9B9B9; color: #b9b9b9;
} }
.identity-panel .arrow-right { .identity-panel .arrow-right {
@ -195,34 +200,33 @@ textarea.twelve-word-phrase {
} }
.identity-copy.flex-column { .identity-copy.flex-column {
flex: 0.25 0 auto; flex: .25 0 auto;
justify-content: center; justify-content: center;
} }
/* accounts screen */ /* accounts screen */
.identity-section { .identity-section {
} }
.identity-section .identity-panel { .identity-section .identity-panel {
background: #E9E9E9; background: #e9e9e9;
border-bottom: 1px solid #B1B1B1; border-bottom: 1px solid #b1b1b1;
cursor: pointer; cursor: pointer;
} }
.identity-section .identity-panel.selected { .identity-section .identity-panel.selected {
background: white; background: $white;
color: #F3C83E; color: #f3c83e;
} }
.identity-section .identity-panel.selected .identicon { .identity-section .identity-panel.selected .identicon {
border-color: orange; border-color: $orange;
} }
.identity-section .accounts-list-option:hover, .identity-section .accounts-list-option:hover,
.identity-section .accounts-list-option.selected { .identity-section .accounts-list-option.selected {
background:white; background: $white;
} }
/* account detail screen */ /* account detail screen */
@ -238,15 +242,14 @@ textarea.twelve-word-phrase {
flex-grow: 10; flex-grow: 10;
} }
.name-label{ .name-label {
} }
.unapproved-tx-icon { .unapproved-tx-icon {
height: 16px; height: 16px;
width: 16px; width: 16px;
background: rgb(47, 174, 244); background: rgb(47, 174, 244);
border-color: #AEAEAE; border-color: $silver-chalice;
border-radius: 13px; border-radius: 13px;
} }
@ -262,7 +265,7 @@ textarea.twelve-word-phrase {
margin-bottom: 2px; margin-bottom: 2px;
font-size: 11px; font-size: 11px;
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
color: #F7861C; color: #f7861c;
} }
.name-label:hover .edit-text { .name-label:hover .edit-text {
@ -276,8 +279,8 @@ textarea.twelve-word-phrase {
margin: 12px; margin: 12px;
margin-bottom: 24px; margin-bottom: 24px;
border-radius: 4px; border-radius: 4px;
border: 2px solid #F3C83E; border: 2px solid #f3c83e;
background: #FAF6F0; background: #faf6f0;
} }
/* Send Screen */ /* Send Screen */
@ -294,25 +297,25 @@ textarea.twelve-word-phrase {
/* Ether Balance Widget */ /* Ether Balance Widget */
.ether-balance-amount { .ether-balance-amount {
color: #F7861C; color: #f7861c;
} }
.ether-balance-label { .ether-balance-label {
color: #ABA9AA; color: #aba9aa;
} }
/* Info screen */ /* Info screen */
.info-gray{ .info-gray {
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
text-transform: uppercase; text-transform: uppercase;
color: #AEAEAE; color: $silver-chalice;
} }
.icon-size{ .icon-size {
width: 20px; width: 20px;
} }
.info{ .info {
font-family: 'Montserrat Regular', Arial; font-family: 'Montserrat Regular', Arial;
padding-bottom: 10px; padding-bottom: 10px;
display: inline-block; display: inline-block;
@ -325,7 +328,6 @@ textarea.twelve-word-phrase {
align-items: center; align-items: center;
} }
.custom-radio-selected { .custom-radio-selected {
width: 17px; width: 17px;
height: 17px; height: 17px;
@ -334,7 +336,7 @@ textarea.twelve-word-phrase {
border-radius: 15px; border-radius: 15px;
border-width: 5px; border-width: 5px;
background: rgba(247, 134, 28, 1); background: rgba(247, 134, 28, 1);
border-color: #F7F7F7; border-color: #f7f7f7;
} }
.custom-radio-inactive { .custom-radio-inactive {
@ -343,26 +345,26 @@ textarea.twelve-word-phrase {
border: solid; border: solid;
border-width: 1px; border-width: 1px;
border-radius: 24px; border-radius: 24px;
border-color: #AEAEAE; border-color: $silver-chalice;
} }
.radio-titles { .radio-titles {
color: rgba(247, 134, 28, 1); color: rgba(247, 134, 28, 1);
} }
.eth-warning{ .eth-warning {
transition: opacity 400ms ease-in, transform 400ms ease-in; transition: opacity 400ms ease-in, transform 400ms ease-in;
} }
.buy-subview{ .buy-subview {
transition: opacity 400ms ease-in, transform 400ms ease-in; transition: opacity 400ms ease-in, transform 400ms ease-in;
} }
.input-container:hover .edit-text{ .input-container:hover .edit-text {
visibility: visible; visibility: visible;
} }
.buy-inputs{ .buy-inputs {
font-family: 'Montserrat Light'; font-family: 'Montserrat Light';
font-size: 13px; font-size: 13px;
height: 20px; height: 20px;
@ -370,34 +372,32 @@ textarea.twelve-word-phrase {
box-sizing: border-box; box-sizing: border-box;
border: solid; border: solid;
border-color: transparent; border-color: transparent;
border-width: 0.5px; border-width: .5px;
border-radius: 2px; border-radius: 2px;
} }
.input-container:hover .buy-inputs{ .input-container:hover .buy-inputs {
box-sizing: inherit; box-sizing: inherit;
border: solid; border: solid;
border-color: #F7861C; border-color: #f7861c;
border-width: 0.5px; border-width: .5px;
border-radius: 2px; border-radius: 2px;
} }
.buy-inputs:focus{ .buy-inputs:focus {
border: solid; border: solid;
border-color: #F7861C; border-color: #f7861c;
border-width: 0.5px; border-width: .5px;
border-radius: 2px; border-radius: 2px;
} }
.activeForm { .activeForm {
background: #F7F7F7; background: #f7f7f7;
border: none; border: none;
border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px;
width: 50%; width: 50%;
text-align: center; text-align: center;
padding-bottom: 4px; padding-bottom: 4px;
} }
.inactiveForm { .inactiveForm {
@ -416,12 +416,12 @@ textarea.twelve-word-phrase {
width: 118px; width: 118px;
height: 42px; height: 42px;
padding: 1px; padding: 1px;
color: #4D4D4D; color: #4d4d4d;
} }
.marketinfo{ .marketinfo {
font-family: 'Montserrat light'; font-family: 'Montserrat light';
color: #AEAEAE; color: $silver-chalice;
font-size: 15px; font-size: 15px;
line-height: 17px; line-height: 17px;
} }
@ -436,25 +436,25 @@ textarea.twelve-word-phrase {
overflow: scroll; overflow: scroll;
} }
.icon-control .fa-refresh{ .icon-control .fa-refresh {
visibility: hidden; visibility: hidden;
} }
.icon-control:hover .fa-refresh{ .icon-control:hover .fa-refresh {
visibility: visible; visibility: visible;
} }
.icon-control:hover .fa-chevron-right{ .icon-control:hover .fa-chevron-right {
visibility: hidden; visibility: hidden;
} }
.inactive { .inactive {
color: #AEAEAE; color: $silver-chalice;
} }
.inactive button{ .inactive button {
background: #AEAEAE; background: $silver-chalice;
color: white; color: $white;
} }
.ellip-address { .ellip-address {
@ -467,21 +467,23 @@ textarea.twelve-word-phrase {
} }
.qr-header { .qr-header {
font-size: 25px; font-size: 25px;
margin-top: 40px; margin-top: 40px;
} }
.qr-message { .qr-message {
font-size: 12px; font-size: 12px;
color: #F7861C; color: #f7861c;
} }
div.message-container > div:first-child { div.message-container > div:first-child {
margin-top: 18px; margin-top: 18px;
font-size: 15px; font-size: 15px;
color: #4D4D4D; color: #4d4d4d;
} }
.pop-hover:hover { .pop-hover:hover {
transform: scale(1.1); transform: scale(1.1);
} }
/* stylelint-enable */

22
ui/app/css/itcss/components/transaction-list.scss
View File

@ -1,5 +1,6 @@
.tx-list-container { .tx-list-container {
height: 87.5%; height: 87.5%;
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
overflow-y: scroll; overflow-y: scroll;
} }
@ -7,8 +8,8 @@
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
.tx-list-header-wrapper { .tx-list-header-wrapper {
margin-top: 0.2em; margin-top: .2em;
margin-bottom: 0.6em; margin-bottom: .6em;
// TODO: Resolve Layout Conflicst in Wallet View // TODO: Resolve Layout Conflicst in Wallet View
// - This fixes txlist "transactions" title dispay // - This fixes txlist "transactions" title dispay
// margin-top: 0.2em; // margin-top: 0.2em;
@ -30,7 +31,7 @@
.tx-list-header { .tx-list-header {
font-size: 16px; font-size: 16px;
margin: 1.8em 1.3em 1.8em 1.3em; margin: 1.8em 1.3em;
} }
} }
@ -40,11 +41,11 @@
flex: 0 0 1px; flex: 0 0 1px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin: 0.1em 0em 0.1em 0em; margin: .1em 0;
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
margin: 0.1em 1.3em 0.1em 1.3em; margin: .1em 1.3em;
} }
} }
@ -54,23 +55,22 @@
justify-content: flex-start; justify-content: flex-start;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin: 0em 1.3em 0.95em 1.3em; margin: 0 1.3em .95em;
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
margin: 0em 1.3em 0em 1.3em; margin: 0 1.3em;
} }
} }
.tx-list-date-wrapper { .tx-list-date-wrapper {
flex-grow: 1; flex: 1 1 auto;
flex-shrink: 1;
flex-basis: auto;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin-top: 6px; margin-top: 6px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
margin-top: 6px; margin-top: 6px;
} }
@ -138,4 +138,4 @@
.tx-list-fiat-value { .tx-list-fiat-value {
font-size: 12px; font-size: 12px;
} }
} }

9
ui/app/css/itcss/components/wallet-balance.scss
View File

@ -1,10 +1,9 @@
$wallet-balance-bg: $gallery; $wallet-balance-bg: $gallery;
$wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint: 890px;
$wallet-balance-breakpoint-range: $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
"screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
.wallet-balance-wrapper { .wallet-balance-wrapper {
flex: 0 0 80px flex: 0 0 80px;
} }
.wallet-balance { .wallet-balance {
@ -37,7 +36,7 @@ $wallet-balance-breakpoint-range:
} }
.fiat-amount { .fiat-amount {
margin-top: 0.25%; margin-top: .25%;
font-size: 105%; font-size: 105%;
} }
@ -64,4 +63,4 @@ $wallet-balance-breakpoint-range:
.wallet-balance-wrapper-active { .wallet-balance-wrapper-active {
background: $wallet-balance-bg; background: $wallet-balance-bg;
} }

20
ui/app/css/itcss/generic/index.scss
View File

@ -8,12 +8,13 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body { html,
body {
font-family: 'Montserrat Regular', Arial; font-family: 'Montserrat Regular', Arial;
color: #4D4D4D; color: #4d4d4d;
font-weight: 300; font-weight: 300;
line-height: 1.4em; line-height: 1.4em;
background: #F7F7F7; background: #f7f7f7;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -26,17 +27,19 @@ html {
.app-root { .app-root {
overflow: hidden; overflow: hidden;
position: relative position: relative;
} }
.app-primary { .app-primary {
display: flex; display: flex;
} }
input:focus, textarea:focus { input:focus,
textarea:focus {
outline: none; outline: none;
} }
/* stylelint-disable */
#app-content { #app-content {
overflow-x: hidden; overflow-x: hidden;
min-width: 357px; min-width: 357px;
@ -44,18 +47,19 @@ input:focus, textarea:focus {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* stylelint-enable */
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
a:hover{ a:hover {
color: #df6b0e; color: #df6b0e;
} }
input.large-input, textarea.large-input { input.large-input,
/*margin-bottom: 24px;*/ textarea.large-input {
padding: 8px; padding: 8px;
} }

133
ui/app/css/itcss/generic/reset.scss
View File

@ -1,48 +1,139 @@
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
License: none (public domain) License: none (public domain)
*/ */
html, body, div, span, applet, object, iframe, html,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, body,
a, abbr, acronym, address, big, cite, code, div,
del, dfn, em, img, ins, kbd, q, s, samp, span,
small, strike, strong, sub, sup, tt, var, applet,
b, u, i, center, object,
dl, dt, dd, ol, ul, li, iframe,
fieldset, form, label, legend, h1,
table, caption, tbody, tfoot, thead, tr, th, td, h2,
article, aside, canvas, details, embed, h3,
figure, figcaption, footer, header, hgroup, h4,
menu, nav, output, ruby, section, summary, h5,
time, mark, audio, video { h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
/* stylelint-disable */
font: inherit; font: inherit;
/* stylelint-enable */
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { /* stylelint-disable */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ul {
ol,
ul {
list-style: none; list-style: none;
} }
blockquote, q {
blockquote,
q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after,
q:before, q:after { blockquote:before,
blockquote:after,
q:before,
q:after {
content: ''; content: '';
content: none; content: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
@ -51,3 +142,5 @@ table {
button { button {
border-style: none; border-style: none;
} }
/* stylelint-enable */

1
ui/app/css/itcss/objects/index.scss
View File

@ -0,0 +1 @@
// Objects

1
ui/app/css/itcss/settings/index.scss
View File

@ -1,2 +1,3 @@
@import './variables.scss'; @import './variables.scss';
@import './typography.scss'; @import './typography.scss';

33
ui/app/css/itcss/settings/typography.scss
View File

@ -1,42 +1,43 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:300,500); @import url('https://fonts.googleapis.com/css?family=Roboto:300,500');
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
@font-face { @font-face {
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
font-weight: normal; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 'small'; font-size: 'small';
} }
@font-face { @font-face {
font-family: 'Montserrat Bold'; font-family: 'Montserrat Bold';
src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff'); src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
font-weight: normal; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Montserrat Light'; font-family: 'Montserrat Light';
src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
font-weight: normal; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Montserrat UltraLight'; font-family: 'Montserrat UltraLight';
src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
font-weight: normal; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'DIN OT'; font-family: 'DIN OT';
src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype'); src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
font-weight: normal; font-weight: 400;
font-style: normal; font-style: normal;
} }

31
ui/app/css/itcss/settings/variables.scss
View File

@ -2,23 +2,28 @@
Variables Variables
*/ */
// Base Colors
$white: #fff;
$black: #000;
$orange: #ffa500;
$red: #f00;
/* /*
Colors Colors
*/ */
$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)' $white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
$rajah: #F5C26D; // formerly 'light orange (button shades)' $rajah: #f5c26d; // formerly 'light orange (button shades)'
$buttercup: #F5A623; // formerly 'dark orange (text)' $buttercup: #f5a623; // formerly 'dark orange (text)'
$tundora: #4A4A4A; // formerly 'borders/font/any gray' $tundora: #4a4a4a; // formerly 'borders/font/any gray'
$gallery: #EFEFEF; $gallery: #efefef;
$alabaster: #F7F7F7; $alabaster: #f7f7f7;
$shark: #22232C; $shark: #22232c;
$wild-sand: #F6F6F6; $wild-sand: #f6f6f6;
$white: #FFFFFF; $white: #fff;
$dusty-gray: #9B9B9B; $dusty-gray: #9b9b9b;
$alto: #DEDEDE; $alto: #dedede;
$alabaster: #FAFAFA; $alabaster: #fafafa;
$silver-chalice: #aeaeae;
/* /*
Z-Indicies Z-Indicies

46
ui/app/css/itcss/tools/utilities.scss
View File

@ -5,11 +5,11 @@
/* color */ /* color */
.color-orange { .color-orange {
color: #F7861C; // TODO: move to settings/variables color: #f7861c; // TODO: move to settings/variables
} }
.color-forest { .color-forest {
color: #0A5448; // TODO: move to settings/variables color: #0a5448; // TODO: move to settings/variables
} }
/* lib */ /* lib */
@ -23,20 +23,12 @@
width: 100%; width: 100%;
} }
.full-height {
height: 100%;
}
.full-flex-height { .full-flex-height {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
} }
.full-width {
width: 100%;
}
.full-height { .full-height {
height: 100%; height: 100%;
} }
@ -141,16 +133,19 @@
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
transform-origin: center center; transform-origin: center center;
transition: transform 50ms ease-in-out; transition: transform 50ms ease-in-out;
} }
.cursor-pointer:hover { .cursor-pointer:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.cursor-pointer:active { .cursor-pointer:active {
transform: scale(0.95); transform: scale(.95);
} }
.cursor-disabled { .cursor-disabled {
@ -170,7 +165,7 @@
} }
.bold { .bold {
font-weight: bold; font-weight: 700;
} }
.text-transform-uppercase { .text-transform-uppercase {
@ -195,12 +190,12 @@ hr.horizontal-line {
} }
.hover-white:hover { .hover-white:hover {
background: white; background: $white;
} }
.red-dot { .red-dot {
background: #E91550; background: #e91550;
color: white; color: $white;
border-radius: 10px; border-radius: 10px;
} }
@ -215,14 +210,14 @@ hr.horizontal-line {
} }
.golden-square { .golden-square {
background: #EBB33F; background: #ebb33f;
} }
.pending-dot { .pending-dot {
background: red; background: $red;
left: 14px; left: 14px;
top: 14px; top: 14px;
color: white; color: $white;
border-radius: 10px; border-radius: 10px;
height: 20px; height: 20px;
min-width: 20px; min-width: 20px;
@ -237,9 +232,9 @@ hr.horizontal-line {
.keyring-label { .keyring-label {
z-index: 1; z-index: 1;
font-size: 11px; font-size: 11px;
background: rgba(255,0,0,0.8); background: rgba(255, 0, 0, .8);
bottom: -47px; bottom: -47px;
color: white; color: $white;
border-radius: 10px; border-radius: 10px;
height: 20px; height: 20px;
min-width: 20px; min-width: 20px;
@ -270,8 +265,9 @@ hr.horizontal-line {
background: rgb(0, 163, 68); background: rgb(0, 163, 68);
border-radius: 20px; border-radius: 20px;
} }
.testnet-icon { .testnet-icon {
background: #2465E1; background: #2465e1;
} }
.drop-menu-item { .drop-menu-item {
@ -292,7 +288,7 @@ hr.horizontal-line {
.critical-error { .critical-error {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
color: red; color: $red;
} }
/* /*
@ -301,7 +297,7 @@ hr.horizontal-line {
// TODO: move into component-level contextual 'active' state // TODO: move into component-level contextual 'active' state
.letter-spacey { .letter-spacey {
letter-spacing: 0.1em; letter-spacing: .1em;
} }
.active { .active {
@ -310,8 +306,8 @@ hr.horizontal-line {
.check { .check {
margin-left: 7px; margin-left: 7px;
color: #F7861C; color: #f7861c;
flex: 1 0 auto; flex: 1 0 auto;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }

52
ui/app/css/itcss/trumps/index.scss
View File

@ -2,7 +2,6 @@
Trumps Trumps
*/ */
// Transitions // Transitions
/* universal */ /* universal */
@ -15,7 +14,7 @@
.app-primary.from-right .main-enter-active, .app-primary.from-right .main-enter-active,
.app-primary.from-left .main-enter-active { .app-primary.from-left .main-enter-active {
overflow-x: hidden; overflow-x: hidden;
transform: translateX(0px); transform: translateX(0);
transition: transform 300ms ease-in; transition: transform 300ms ease-in;
} }
@ -24,6 +23,7 @@
transform: translateX(360px); transform: translateX(360px);
transition: transform 300ms ease-in; transition: transform 300ms ease-in;
} }
.app-primary.from-right .main-leave-active { .app-primary.from-right .main-leave-active {
transform: translateX(-360px); transform: translateX(-360px);
transition: transform 300ms ease-in; transition: transform 300ms ease-in;
@ -35,12 +35,15 @@
} }
/* loader transitions */ /* loader transitions */
.loader-enter, .loader-leave-active { .loader-enter,
opacity: 0.0; .loader-leave-active {
opacity: 0;
transition: opacity 150 ease-in; transition: opacity 150 ease-in;
} }
.loader-enter-active, .loader-leave {
opacity: 1.0; .loader-enter-active,
.loader-leave {
opacity: 1;
transition: opacity 150 ease-in; transition: opacity 150 ease-in;
} }
@ -48,6 +51,7 @@
.app-primary.from-right .main-enter:not(.main-enter-active) { .app-primary.from-right .main-enter:not(.main-enter-active) {
transform: translateX(360px); transform: translateX(360px);
} }
.app-primary.from-left .main-enter:not(.main-enter-active) { .app-primary.from-left .main-enter:not(.main-enter-active) {
transform: translateX(-360px); transform: translateX(-360px);
} }
@ -56,43 +60,13 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
font-size: 18px; font-size: 18px;
} }
/*
Hacky breakpoint fix for account + tab sections
Resolves issue from @frankiebee in
https://github.com/MetaMask/metamask-extension/pull/1835
Please remove this when integrating new designs
*/
// This is commented out, because it's not needed in NewUI.
// We will have a new css architecture w/ different breakpoints.
// @media screen and (min-width: 575px) and (max-width: 800px) {
// .account-data-subsection {
// flex: 0 0 auto !important; // reset flex
// margin-left: 10px !important; // create additional horizontal space
// margin-right: 10px !important;
// width: 40%;
// }
// .tabSection {
// flex: 0 0 auto !important;
// margin-left: 10px !important;
// margin-right: 10px !important;
// min-width: 285px;
// width: 49%;
// }
// .name-label {
// width: 80%;
// }
// }
// This text is contained inside a div. // This text is contained inside a div.
// ID needed to override user agent stylesheet. // ID needed to override user agent stylesheet.
// See components/modal.scss // See components/modal.scss
/* stylelint-disable */
#modal-content-footer-text { #modal-content-footer-text {
font-family: 'DIN OT'; font-family: 'DIN OT';
font-size: 16px; font-size: 16px;
} }
/* stylelint-enable */