TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lint and cleanup all scss

Browse Source
feature/default_network_editable
sdtsui 7 years ago
parent b8aa529d29
commit 2eadf72fb7
21 changed files with 331 additions and 248 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      .stylelintrc
  2. 4
      ui/app/components/dropdowns/network-dropdown.js
  3. 1
      ui/app/css/itcss/base/index.scss
  4. 20
      ui/app/css/itcss/components/buttons.scss
  5. 14
      ui/app/css/itcss/components/header.scss
  6. 11
      ui/app/css/itcss/components/hero-balance.scss
  7. 8
      ui/app/css/itcss/components/index.scss
  8. 16
      ui/app/css/itcss/components/modal.scss
  9. 2
      ui/app/css/itcss/components/network.scss
  10. 29
      ui/app/css/itcss/components/newui-sections.scss
  11. 124
      ui/app/css/itcss/components/sections.scss
  12. 22
      ui/app/css/itcss/components/transaction-list.scss
  13. 9
      ui/app/css/itcss/components/wallet-balance.scss
  14. 20
      ui/app/css/itcss/generic/index.scss
  15. 133
      ui/app/css/itcss/generic/reset.scss
  16. 1
      ui/app/css/itcss/objects/index.scss
  17. 1
      ui/app/css/itcss/settings/index.scss
  18. 33
      ui/app/css/itcss/settings/typography.scss
  19. 31
      ui/app/css/itcss/settings/variables.scss
  20. 46
      ui/app/css/itcss/tools/utilities.scss
  21. 52
      ui/app/css/itcss/trumps/index.scss

2
.stylelintrc
Unescape View File

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

4
ui/app/components/dropdowns/network-dropdown.js
Unescape 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
Unescape View File

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

20
ui/app/css/itcss/components/buttons.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

1
ui/app/css/itcss/settings/index.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 */

Write Preview
Loading…
Cancel
Save