anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

refactor(common): gc common.scss, organize styles in proper places

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-03 19:38:57 -04:00
commit 99573f30b8
21 changed files with 163 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

131
src/sass/common.scss
View file

@ -1,131 +0,0 @@
.icon.nav-item-arrow-right {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-right;
}
.icon.nav-item-arrow-down {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-down;
}
.icon.nav-item-arrow-up {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-up;
}
.item.item-heading {
font-weight: bold;
}
.item.item-footer {
font-weight: lighter;
}
.icon.close-home-tip {
color: #666;
font-size: 38px;
}
.icon.list-add-button {
color: #666;
font-size: 38px;
}
.item.item-big-icon-left {
padding-left: 74px;
}
.item-no-bottom-border + .item {
border-top: 0;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}
.white-bg{
background: #fff;
}
.overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
}
.back-button {
border: 0;
.icon:before {
color: #fff;
font-size: 30px !important;
font-weight: bold;
margin-left: 5px;
}
}
.search-button {
.icon:before {
color: #fff;
font-size: 30px !important;
margin-left: 5px;
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.bar-green{
background: rgb(17, 209, 166) !important;
}
ion-header-bar{
button{
border:none;
}
}
.border-top{
border-top:1px solid rgb(228,228,228);
}
.bold-text{
font-weight: bold !important;
}
.card{
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/* Wrap text from item-note */
.item-note{
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: -webkit-pre-wrap;
word-break: break-all;
white-space: normal;
}

31
src/sass/icons.scss Normal file
View file

@ -0,0 +1,31 @@
.icon.bp-arrow-right {
@extend .ion-ios-arrow-right;
}
.icon.bp-arrow-down {
@extend .ion-ios-arrow-down;
}
.icon.bp-arrow-up {
@extend .ion-ios-arrow-up;
}
.item.item-big-icon-left {
padding-left: 74px;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}

31
src/sass/ionic.scss
View file

@ -1,19 +1,9 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
// This file is for changes to the standard Ionic Framework which cannot be made
// in variables.scss.
/* Set ionic variables */
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;
@import "../../bower_components/ionic/scss/ionic";
$ios-transition-duration: 200ms;
/* Ionic Workarounds */
/* Ionic Overrides and Workarounds */
// Please include a description of the problem solved by the workaround.
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
@ -25,4 +15,15 @@ ion-tabs.ion-tabs-transparent {
background: none transparent;
}
@import "../../bower_components/ionic/scss/ionic";
// Some overrides for the card class which can't be set by variable
.card, .list {
.icon {
color: $light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
}
}
}

3
src/sass/main.scss
View file

@ -1,6 +1,7 @@
@import "fonts";
@import "variables";
@import "icons";
@import "ionic";
@import "common";
@import "forms";
@import "mixins/mixins";
@import "views/views";

36
src/sass/shame.scss
View file

@ -62,6 +62,42 @@ input[type=number] {
height: 24px;
}
/* Wrap text from item-note */
.item-note{
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: -webkit-pre-wrap;
word-break: break-all;
white-space: normal;
}
.back-button {
border: 0;
.icon:before {
color: #fff;
font-size: 30px !important;
font-weight: bold;
margin-left: 5px;
}
}
.search-button {
.icon:before {
color: #fff;
font-size: 30px !important;
margin-left: 5px;
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.name-wallet {
font-size: 14px;
font-weight: 400;

20
src/sass/variables.scss Normal file
View file

@ -0,0 +1,20 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$mid-gray: #667;
$light-gray: #9b9bab;
/* Set ionic variables */
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;
$ios-transition-duration: 200ms;
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$item-icon-font-size: 24px;

3
src/sass/views/amount.scss
View file

@ -1,4 +1,7 @@
#view-amount {
.item-no-bottom-border + .item {
border-top: 0;
}
.icon-bitpay-card {
background-image: url("../img/icon-bitpay.svg");
}

9
src/sass/views/onboarding/onboard-collect-email.scss
View file

@ -1,5 +1,14 @@
#onboarding-collect-email {
background: rgb(17, 209, 166);
.overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
}
.scroll-content {
margin-top: 0;
height: 101%;

3
src/sass/views/tab-receive.scss
View file

@ -7,6 +7,9 @@
}
}
}
.border-top{
border-top:1px solid rgb(228,228,228);
}
#address {
background: #fff;
.incomplete {

5
src/sass/views/wallet-backup-phrase.scss
View file

@ -26,6 +26,9 @@
color: rgb(43, 43, 43);
}
}
.bold-text {
font-weight: bold !important;
}
p {
color: rgb(58, 58, 58);
font-weight: 200;
@ -115,7 +118,7 @@
&,
& ion-content,
& ion-content .scroll {
overflow-y:visible;
overflow-y:visible;
}
#select-phrase {
float: left;

3
src/sass/views/walletDetails.scss
View file

@ -28,6 +28,9 @@
line-height: 100%;
}
}
.item.item-footer {
font-weight: lighter;
}
}
.wallet-details-release {