mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Lint and cleanup all scss
This commit is contained in:
sdtsui
parent
b8aa529d29
commit
2eadf72fb7
@ -34,8 +34,6 @@
|
||||
{
|
||||
"ignore": [
|
||||
"after-comment",
|
||||
"all-nested",
|
||||
"blockless-group"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
@ -3,8 +3,8 @@ const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const Dropdown = require('../dropdown').Dropdown
|
||||
const DropdownMenuItem = require('../dropdown').DropdownMenuItem
|
||||
const Dropdown = require('./components/dropdown').Dropdown
|
||||
const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
|
||||
@ -0,0 +1 @@
|
||||
// Base
|
||||
@ -3,11 +3,11 @@
|
||||
*/
|
||||
|
||||
.btn-green {
|
||||
background-color: #02C9B1; // TODO: reusable color in colors.css
|
||||
background-color: #02c9b1; // TODO: reusable color in colors.css
|
||||
}
|
||||
|
||||
button.btn-clear {
|
||||
background: white;
|
||||
background: $white;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
@ -46,9 +46,9 @@ button.btn-clear {
|
||||
|
||||
button.primary {
|
||||
padding: 8px 12px;
|
||||
background: #F7861C;
|
||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
color: white;
|
||||
background: #f7861c;
|
||||
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
|
||||
color: $white;
|
||||
font-size: 1.1em;
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
@ -57,8 +57,8 @@ button.primary {
|
||||
.btn-light {
|
||||
padding: 8px 12px;
|
||||
// background: #FFFFFF; // $bg-white
|
||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
color: #585D67; // TODO: make reusable light button color
|
||||
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
|
||||
color: #585d67; // TODO: make reusable light button color
|
||||
font-size: 1.1em;
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
@ -66,14 +66,14 @@ button.primary {
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #979797; // #TODO: make reusable light border color
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
// TODO: cleanup: not used anywhere
|
||||
button.btn-thin {
|
||||
border: 1px solid;
|
||||
border-color: #4D4D4D;
|
||||
color: #4D4D4D;
|
||||
border-color: #4d4d4d;
|
||||
color: #4d4d4d;
|
||||
background: rgb(255, 174, 41);
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
.app-header {
|
||||
align-items: center;
|
||||
visibility: visible;
|
||||
background: rgb(239, 239, 239);
|
||||
padding-top: 1.5vh;
|
||||
background: $gallery;
|
||||
padding: 6px 8px;
|
||||
height: 12vh;
|
||||
max-height: 60px;
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
padding: 6px 8px;
|
||||
// background: #EFEFEF; // $gallery
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
position: fixed;
|
||||
height: 34px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -22,13 +20,13 @@
|
||||
.app-header h1 {
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
color: #22232C; // $shark
|
||||
color: #22232c; // $shark
|
||||
}
|
||||
|
||||
h2.page-subtitle {
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
color: #AEAEAE;
|
||||
color: #aeaeae;
|
||||
font-size: 1em;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 0.3em 0.9em 0em 0.9em;
|
||||
margin: .3em .9em 0;
|
||||
height: 80vh;
|
||||
max-height: 225px;
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 2.8em 0.9em 0.8em 0.9em;
|
||||
margin: 2.8em .9em .8em;
|
||||
}
|
||||
|
||||
.balance-container {
|
||||
@ -47,7 +47,7 @@
|
||||
.fiat-amount {
|
||||
font-size: 115%;
|
||||
margin-top: 8.5%;
|
||||
color: #A0A0A0;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
.fiat-amount {
|
||||
margin-top: 0.25%;
|
||||
margin-top: .25%;
|
||||
font-size: 105%;
|
||||
}
|
||||
}
|
||||
@ -75,6 +75,7 @@
|
||||
}
|
||||
|
||||
.hero-balance-buttons {
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
width: 100%;
|
||||
height: 100px; // needed a round number to set the heights of the buttons inside
|
||||
@ -86,7 +87,7 @@
|
||||
|
||||
button.btn-clear {
|
||||
font-size: 75%;
|
||||
background: white;
|
||||
background: $white;
|
||||
border: 1px solid;
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
@import './buttons.scss';
|
||||
|
||||
@import './header.scss';
|
||||
|
||||
@import './footer.scss';
|
||||
|
||||
@import './network.scss';
|
||||
|
||||
@import './modal.scss';
|
||||
|
||||
@import './newui-sections.scss';
|
||||
|
||||
// Balances
|
||||
@import './hero-balance.scss';
|
||||
|
||||
@import './wallet-balance.scss';
|
||||
|
||||
// Tx List and Sections
|
||||
@import './transaction-list.scss';
|
||||
|
||||
@import './sections.scss';
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid black;
|
||||
border: 1px solid $black;
|
||||
padding: 0% 7%;
|
||||
justify-content: space-around;
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
|
||||
.modal-content-options {
|
||||
flex-direction: row;
|
||||
margin: 20px 0px
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
div.modal-content-option {
|
||||
@ -81,8 +81,8 @@
|
||||
height: 18vw;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid black;
|
||||
margin: 0px .5vw;
|
||||
border: 1px solid $black;
|
||||
margin: 0 .5vw;
|
||||
justify-content: space-around;
|
||||
|
||||
div.modal-content-option-title {
|
||||
@ -99,25 +99,25 @@
|
||||
|
||||
div.modal-content-option-subtitle {
|
||||
font-size: 16px;
|
||||
padding: 0px 10px;
|
||||
padding: 0 10px;
|
||||
height: 25%;
|
||||
|
||||
@media screen and (max-width: 679px) {
|
||||
font-size: 10px;
|
||||
padding: 0px 10px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 5px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 680px) {
|
||||
font-size: 14px;
|
||||
padding: 0px 4px;
|
||||
padding: 0 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
font-size: 20px;
|
||||
padding: 0px 0px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.network-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.6em;
|
||||
font-size: .6em;
|
||||
}
|
||||
|
||||
.network-name {
|
||||
|
||||
@ -10,7 +10,7 @@ $wallet-view-bg: $wild-sand;
|
||||
.main-container {
|
||||
position: absolute;
|
||||
z-index: 18;
|
||||
font-family: DIN OT;
|
||||
font-family: "DIN OT";
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
@ -61,14 +61,14 @@ $wallet-view-bg: $wild-sand;
|
||||
z-index: 26;
|
||||
position: fixed;
|
||||
top: 35px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
will-change: transform;
|
||||
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%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -77,12 +77,12 @@ $wallet-view-bg: $wild-sand;
|
||||
z-index: 25;
|
||||
position: fixed;
|
||||
top: 35px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
// main-container media queries
|
||||
@ -100,7 +100,7 @@ $wallet-view-bg: $wild-sand;
|
||||
margin-top: 35px;
|
||||
width: 85%;
|
||||
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;
|
||||
width: 80%;
|
||||
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;
|
||||
width: 65%;
|
||||
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;
|
||||
height: 50px;
|
||||
font-size: .7em;
|
||||
background: white;
|
||||
background: $white;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
// wallet view
|
||||
.account-name {
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
font-size: 102%;
|
||||
margin-left: 3%;
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
// Old scss, do not lint - clean up later
|
||||
/* stylelint-disable */
|
||||
|
||||
|
||||
/*
|
||||
App Sections
|
||||
TODO: Move into separate files.
|
||||
@ -9,14 +13,14 @@ textarea.twelve-word-phrase {
|
||||
width: 300px;
|
||||
height: 140px;
|
||||
font-size: 16px;
|
||||
background: white;
|
||||
background: $white;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.initialize-screen hr {
|
||||
width: 60px;
|
||||
margin: 12px;
|
||||
border-color: #F7861C;
|
||||
border-color: #f7861c;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
@ -35,11 +39,11 @@ textarea.twelve-word-phrase {
|
||||
|
||||
/* unlock */
|
||||
.error {
|
||||
color: #E20202;
|
||||
color: #e20202;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #FFAE00;
|
||||
color: #ffae00;
|
||||
}
|
||||
|
||||
.lock {
|
||||
@ -49,7 +53,7 @@ textarea.twelve-word-phrase {
|
||||
|
||||
.lock.locked {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
transition: opacity 400ms ease-in, transform 400ms ease-in;
|
||||
}
|
||||
|
||||
@ -101,6 +105,7 @@ textarea.twelve-word-phrase {
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.editable-label {
|
||||
display: flex;
|
||||
}
|
||||
@ -140,7 +145,7 @@ textarea.twelve-word-phrase {
|
||||
}
|
||||
|
||||
.accounts-section .horizontal-line {
|
||||
margin: 0px 18px;
|
||||
margin: 0 18px;
|
||||
}
|
||||
|
||||
.accounts-list-option {
|
||||
@ -157,7 +162,7 @@ textarea.twelve-word-phrase {
|
||||
}
|
||||
|
||||
.unconftx-link .fa-arrow-right {
|
||||
margin: 0px -8px 0px 8px;
|
||||
margin: 0 -8px 0px 8px;
|
||||
}
|
||||
|
||||
/* identity panel */
|
||||
@ -184,7 +189,7 @@ textarea.twelve-word-phrase {
|
||||
.identity-panel i {
|
||||
margin-top: 32px;
|
||||
margin-right: 6px;
|
||||
color: #B9B9B9;
|
||||
color: #b9b9b9;
|
||||
}
|
||||
|
||||
.identity-panel .arrow-right {
|
||||
@ -195,34 +200,33 @@ textarea.twelve-word-phrase {
|
||||
}
|
||||
|
||||
.identity-copy.flex-column {
|
||||
flex: 0.25 0 auto;
|
||||
flex: .25 0 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* accounts screen */
|
||||
|
||||
.identity-section {
|
||||
|
||||
}
|
||||
|
||||
.identity-section .identity-panel {
|
||||
background: #E9E9E9;
|
||||
border-bottom: 1px solid #B1B1B1;
|
||||
background: #e9e9e9;
|
||||
border-bottom: 1px solid #b1b1b1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.identity-section .identity-panel.selected {
|
||||
background: white;
|
||||
color: #F3C83E;
|
||||
background: $white;
|
||||
color: #f3c83e;
|
||||
}
|
||||
|
||||
.identity-section .identity-panel.selected .identicon {
|
||||
border-color: orange;
|
||||
border-color: $orange;
|
||||
}
|
||||
|
||||
.identity-section .accounts-list-option:hover,
|
||||
.identity-section .accounts-list-option.selected {
|
||||
background:white;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
/* account detail screen */
|
||||
@ -239,14 +243,13 @@ textarea.twelve-word-phrase {
|
||||
}
|
||||
|
||||
.name-label {
|
||||
|
||||
}
|
||||
|
||||
.unapproved-tx-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: rgb(47, 174, 244);
|
||||
border-color: #AEAEAE;
|
||||
border-color: $silver-chalice;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
@ -262,7 +265,7 @@ textarea.twelve-word-phrase {
|
||||
margin-bottom: 2px;
|
||||
font-size: 11px;
|
||||
text-rendering: geometricPrecision;
|
||||
color: #F7861C;
|
||||
color: #f7861c;
|
||||
}
|
||||
|
||||
.name-label:hover .edit-text {
|
||||
@ -276,8 +279,8 @@ textarea.twelve-word-phrase {
|
||||
margin: 12px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #F3C83E;
|
||||
background: #FAF6F0;
|
||||
border: 2px solid #f3c83e;
|
||||
background: #faf6f0;
|
||||
}
|
||||
|
||||
/* Send Screen */
|
||||
@ -294,18 +297,18 @@ textarea.twelve-word-phrase {
|
||||
/* Ether Balance Widget */
|
||||
|
||||
.ether-balance-amount {
|
||||
color: #F7861C;
|
||||
color: #f7861c;
|
||||
}
|
||||
|
||||
.ether-balance-label {
|
||||
color: #ABA9AA;
|
||||
color: #aba9aa;
|
||||
}
|
||||
|
||||
/* Info screen */
|
||||
.info-gray {
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
color: #AEAEAE;
|
||||
color: $silver-chalice;
|
||||
}
|
||||
|
||||
.icon-size {
|
||||
@ -325,7 +328,6 @@ textarea.twelve-word-phrase {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.custom-radio-selected {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
@ -334,7 +336,7 @@ textarea.twelve-word-phrase {
|
||||
border-radius: 15px;
|
||||
border-width: 5px;
|
||||
background: rgba(247, 134, 28, 1);
|
||||
border-color: #F7F7F7;
|
||||
border-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.custom-radio-inactive {
|
||||
@ -343,7 +345,7 @@ textarea.twelve-word-phrase {
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 24px;
|
||||
border-color: #AEAEAE;
|
||||
border-color: $silver-chalice;
|
||||
}
|
||||
|
||||
.radio-titles {
|
||||
@ -370,34 +372,32 @@ textarea.twelve-word-phrase {
|
||||
box-sizing: border-box;
|
||||
border: solid;
|
||||
border-color: transparent;
|
||||
border-width: 0.5px;
|
||||
border-width: .5px;
|
||||
border-radius: 2px;
|
||||
|
||||
}
|
||||
|
||||
.input-container:hover .buy-inputs {
|
||||
box-sizing: inherit;
|
||||
border: solid;
|
||||
border-color: #F7861C;
|
||||
border-width: 0.5px;
|
||||
border-color: #f7861c;
|
||||
border-width: .5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.buy-inputs:focus {
|
||||
border: solid;
|
||||
border-color: #F7861C;
|
||||
border-width: 0.5px;
|
||||
border-color: #f7861c;
|
||||
border-width: .5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.activeForm {
|
||||
background: #F7F7F7;
|
||||
background: #f7f7f7;
|
||||
border: none;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding-bottom: 4px;
|
||||
|
||||
}
|
||||
|
||||
.inactiveForm {
|
||||
@ -416,12 +416,12 @@ textarea.twelve-word-phrase {
|
||||
width: 118px;
|
||||
height: 42px;
|
||||
padding: 1px;
|
||||
color: #4D4D4D;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.marketinfo {
|
||||
font-family: 'Montserrat light';
|
||||
color: #AEAEAE;
|
||||
color: $silver-chalice;
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
}
|
||||
@ -449,12 +449,12 @@ textarea.twelve-word-phrase {
|
||||
}
|
||||
|
||||
.inactive {
|
||||
color: #AEAEAE;
|
||||
color: $silver-chalice;
|
||||
}
|
||||
|
||||
.inactive button {
|
||||
background: #AEAEAE;
|
||||
color: white;
|
||||
background: $silver-chalice;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.ellip-address {
|
||||
@ -473,15 +473,17 @@ textarea.twelve-word-phrase {
|
||||
|
||||
.qr-message {
|
||||
font-size: 12px;
|
||||
color: #F7861C;
|
||||
color: #f7861c;
|
||||
}
|
||||
|
||||
div.message-container > div:first-child {
|
||||
margin-top: 18px;
|
||||
font-size: 15px;
|
||||
color: #4D4D4D;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.pop-hover:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* stylelint-enable */
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.tx-list-container {
|
||||
height: 87.5%;
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -7,8 +8,8 @@
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
.tx-list-header-wrapper {
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.6em;
|
||||
margin-top: .2em;
|
||||
margin-bottom: .6em;
|
||||
// TODO: Resolve Layout Conflicst in Wallet View
|
||||
// - This fixes txlist "transactions" title dispay
|
||||
// margin-top: 0.2em;
|
||||
@ -30,7 +31,7 @@
|
||||
|
||||
.tx-list-header {
|
||||
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;
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin: 0.1em 0em 0.1em 0em;
|
||||
margin: .1em 0;
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
@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) {
|
||||
margin: 0em 1.3em 0em 1.3em;
|
||||
margin: 0 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-date-wrapper {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
$wallet-balance-bg: $gallery;
|
||||
$wallet-balance-breakpoint: 890px;
|
||||
$wallet-balance-breakpoint-range:
|
||||
"screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
|
||||
$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
|
||||
|
||||
.wallet-balance-wrapper {
|
||||
flex: 0 0 80px
|
||||
flex: 0 0 80px;
|
||||
}
|
||||
|
||||
.wallet-balance {
|
||||
@ -37,7 +36,7 @@ $wallet-balance-breakpoint-range:
|
||||
}
|
||||
|
||||
.fiat-amount {
|
||||
margin-top: 0.25%;
|
||||
margin-top: .25%;
|
||||
font-size: 105%;
|
||||
}
|
||||
|
||||
|
||||
@ -8,12 +8,13 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
font-family: 'Montserrat Regular', Arial;
|
||||
color: #4D4D4D;
|
||||
color: #4d4d4d;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
background: #F7F7F7;
|
||||
background: #f7f7f7;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@ -26,17 +27,19 @@ html {
|
||||
|
||||
.app-root {
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-primary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
#app-content {
|
||||
overflow-x: hidden;
|
||||
min-width: 357px;
|
||||
@ -44,6 +47,7 @@ input:focus, textarea:focus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@ -54,8 +58,8 @@ a:hover{
|
||||
color: #df6b0e;
|
||||
}
|
||||
|
||||
input.large-input, textarea.large-input {
|
||||
/*margin-bottom: 24px;*/
|
||||
input.large-input,
|
||||
textarea.large-input {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -3,46 +3,137 @@
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, 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 {
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
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;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
/* stylelint-disable */
|
||||
font: inherit;
|
||||
/* stylelint-enable */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
@ -51,3 +142,5 @@ table {
|
||||
button {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* stylelint-enable */
|
||||
|
||||
@ -0,0 +1 @@
|
||||
// Objects
|
||||
@ -1,2 +1,3 @@
|
||||
@import './variables.scss';
|
||||
|
||||
@import './typography.scss';
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
@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://fonts.googleapis.com/css?family=Roboto:300,500');
|
||||
|
||||
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat Regular';
|
||||
src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 'small';
|
||||
}
|
||||
@ -14,7 +15,7 @@
|
||||
font-family: 'Montserrat Bold';
|
||||
src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -22,7 +23,7 @@
|
||||
font-family: 'Montserrat Light';
|
||||
src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -30,13 +31,13 @@
|
||||
font-family: 'Montserrat UltraLight';
|
||||
src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN OT';
|
||||
src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
Variables
|
||||
*/
|
||||
|
||||
|
||||
// Base Colors
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$orange: #ffa500;
|
||||
$red: #f00;
|
||||
|
||||
/*
|
||||
Colors
|
||||
*/
|
||||
$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
|
||||
$rajah: #F5C26D; // formerly 'light orange (button shades)'
|
||||
$buttercup: #F5A623; // formerly 'dark orange (text)'
|
||||
$tundora: #4A4A4A; // formerly 'borders/font/any gray'
|
||||
$gallery: #EFEFEF;
|
||||
$alabaster: #F7F7F7;
|
||||
$shark: #22232C;
|
||||
$wild-sand: #F6F6F6;
|
||||
$white: #FFFFFF;
|
||||
$dusty-gray: #9B9B9B;
|
||||
$alto: #DEDEDE;
|
||||
$alabaster: #FAFAFA;
|
||||
$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
|
||||
$rajah: #f5c26d; // formerly 'light orange (button shades)'
|
||||
$buttercup: #f5a623; // formerly 'dark orange (text)'
|
||||
$tundora: #4a4a4a; // formerly 'borders/font/any gray'
|
||||
$gallery: #efefef;
|
||||
$alabaster: #f7f7f7;
|
||||
$shark: #22232c;
|
||||
$wild-sand: #f6f6f6;
|
||||
$white: #fff;
|
||||
$dusty-gray: #9b9b9b;
|
||||
$alto: #dedede;
|
||||
$alabaster: #fafafa;
|
||||
$silver-chalice: #aeaeae;
|
||||
|
||||
/*
|
||||
Z-Indicies
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
/* color */
|
||||
|
||||
.color-orange {
|
||||
color: #F7861C; // TODO: move to settings/variables
|
||||
color: #f7861c; // TODO: move to settings/variables
|
||||
}
|
||||
|
||||
.color-forest {
|
||||
color: #0A5448; // TODO: move to settings/variables
|
||||
color: #0a5448; // TODO: move to settings/variables
|
||||
}
|
||||
|
||||
/* lib */
|
||||
@ -23,20 +23,12 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-flex-height {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
@ -141,16 +133,19 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
transform-origin: center center;
|
||||
transition: transform 50ms ease-in-out;
|
||||
}
|
||||
|
||||
.cursor-pointer:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.cursor-pointer:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(.95);
|
||||
}
|
||||
|
||||
.cursor-disabled {
|
||||
@ -170,7 +165,7 @@
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-transform-uppercase {
|
||||
@ -195,12 +190,12 @@ hr.horizontal-line {
|
||||
}
|
||||
|
||||
.hover-white:hover {
|
||||
background: white;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
background: #E91550;
|
||||
color: white;
|
||||
background: #e91550;
|
||||
color: $white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@ -215,14 +210,14 @@ hr.horizontal-line {
|
||||
}
|
||||
|
||||
.golden-square {
|
||||
background: #EBB33F;
|
||||
background: #ebb33f;
|
||||
}
|
||||
|
||||
.pending-dot {
|
||||
background: red;
|
||||
background: $red;
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
color: white;
|
||||
color: $white;
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
@ -237,9 +232,9 @@ hr.horizontal-line {
|
||||
.keyring-label {
|
||||
z-index: 1;
|
||||
font-size: 11px;
|
||||
background: rgba(255,0,0,0.8);
|
||||
background: rgba(255, 0, 0, .8);
|
||||
bottom: -47px;
|
||||
color: white;
|
||||
color: $white;
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
@ -270,8 +265,9 @@ hr.horizontal-line {
|
||||
background: rgb(0, 163, 68);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.testnet-icon {
|
||||
background: #2465E1;
|
||||
background: #2465e1;
|
||||
}
|
||||
|
||||
.drop-menu-item {
|
||||
@ -292,7 +288,7 @@ hr.horizontal-line {
|
||||
.critical-error {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: red;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -301,7 +297,7 @@ hr.horizontal-line {
|
||||
|
||||
// TODO: move into component-level contextual 'active' state
|
||||
.letter-spacey {
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
|
||||
.active {
|
||||
@ -310,7 +306,7 @@ hr.horizontal-line {
|
||||
|
||||
.check {
|
||||
margin-left: 7px;
|
||||
color: #F7861C;
|
||||
color: #f7861c;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
Trumps
|
||||
*/
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
/* universal */
|
||||
@ -15,7 +14,7 @@
|
||||
.app-primary.from-right .main-enter-active,
|
||||
.app-primary.from-left .main-enter-active {
|
||||
overflow-x: hidden;
|
||||
transform: translateX(0px);
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms ease-in;
|
||||
}
|
||||
|
||||
@ -24,6 +23,7 @@
|
||||
transform: translateX(360px);
|
||||
transition: transform 300ms ease-in;
|
||||
}
|
||||
|
||||
.app-primary.from-right .main-leave-active {
|
||||
transform: translateX(-360px);
|
||||
transition: transform 300ms ease-in;
|
||||
@ -35,12 +35,15 @@
|
||||
}
|
||||
|
||||
/* loader transitions */
|
||||
.loader-enter, .loader-leave-active {
|
||||
opacity: 0.0;
|
||||
.loader-enter,
|
||||
.loader-leave-active {
|
||||
opacity: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -48,6 +51,7 @@
|
||||
.app-primary.from-right .main-enter:not(.main-enter-active) {
|
||||
transform: translateX(360px);
|
||||
}
|
||||
|
||||
.app-primary.from-left .main-enter:not(.main-enter-active) {
|
||||
transform: translateX(-360px);
|
||||
}
|
||||
@ -56,43 +60,13 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
|
||||
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.
|
||||
// ID needed to override user agent stylesheet.
|
||||
// See components/modal.scss
|
||||
|
||||
/* stylelint-disable */
|
||||
#modal-content-footer-text {
|
||||
font-family: 'DIN OT';
|
||||
font-size: 16px;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user