aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css/itcss/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css/itcss/components')
-rw-r--r--ui/app/css/itcss/components/account-details-dropdown.scss7
-rw-r--r--ui/app/css/itcss/components/buttons.scss15
-rw-r--r--ui/app/css/itcss/components/header.scss113
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss130
-rw-r--r--ui/app/css/itcss/components/index.scss8
-rw-r--r--ui/app/css/itcss/components/loading-overlay.scss20
-rw-r--r--ui/app/css/itcss/components/network.scss9
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss53
-rw-r--r--ui/app/css/itcss/components/request-signature.scss19
-rw-r--r--ui/app/css/itcss/components/send.scss25
-rw-r--r--ui/app/css/itcss/components/settings.scss214
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss2
12 files changed, 84 insertions, 531 deletions
diff --git a/ui/app/css/itcss/components/account-details-dropdown.scss b/ui/app/css/itcss/components/account-details-dropdown.scss
new file mode 100644
index 000000000..2a3007f83
--- /dev/null
+++ b/ui/app/css/itcss/components/account-details-dropdown.scss
@@ -0,0 +1,7 @@
+.account-details-dropdown {
+ width: 60%;
+ position: absolute;
+ top: 120px;
+ right: 15px;
+ z-index: 2000;
+} \ No newline at end of file
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 34565767f..655188a3e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,7 @@
Buttons
*/
-.btn-default,
-.btn-primary,
-.btn-secondary,
-.btn-confirm {
+.button {
height: 44px;
background: $white;
display: flex;
@@ -79,6 +76,16 @@
background-color: $curious-blue;
}
+.btn-raised {
+ color: $curious-blue;
+ background-color: $white;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 6px;
+ height: initial;
+ width: initial;
+ min-width: initial;
+}
+
.btn--large {
height: 54px;
}
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
deleted file mode 100644
index 3ccfd5c15..000000000
--- a/ui/app/css/itcss/components/header.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-.app-header {
- align-items: center;
- background: $gallery;
- position: relative;
- z-index: $header-z-index;
- display: flex;
- flex-flow: column nowrap;
- width: 100%;
- flex: 0 0 auto;
-
- @media screen and (max-width: 575px) {
- padding: 12px;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
- z-index: $mobile-header-z-index;
- }
-
- @media screen and (min-width: 576px) {
- height: 75px;
- justify-content: center;
-
- &--back-drop {
- &::after {
- content: '';
- position: absolute;
- width: 100%;
- height: 32px;
- background: $gallery;
- bottom: -32px;
- }
- }
- }
-
- &__metafox {
- cursor: pointer;
- }
-
- &__beta-label {
- font-family: Roboto;
- text-transform: uppercase;
- font-weight: 500;
- font-size: .8rem;
- color: $buttercup;
- margin-left: 5px;
- line-height: initial;
-
- @media screen and (max-width: 575px) {
- display: none;
- }
- }
-
- &__contents {
- display: flex;
- justify-content: space-between;
- flex-flow: row nowrap;
- width: 100%;
-
- @media screen and (max-width: 575px) {
- height: 100%;
- }
-
- @media screen and (min-width: 576px) {
- width: 85vw;
- }
-
- @media screen and (min-width: 769px) {
- width: 80vw;
- }
-
- @media screen and (min-width: 1281px) {
- width: 62vw;
- }
- }
-
- &__logo-container {
- display: flex;
- flex-direction: row;
- align-items: center;
- cursor: pointer;
- }
-
- &__account-menu-container {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- }
-}
-
-.app-header h1 {
- font-family: Roboto;
- text-transform: uppercase;
- font-weight: 400;
- font-size: 1.1rem;
- position: relative;
- padding-left: 15px;
- color: #5b5d67;
-
- @media screen and (max-width: 575px) {
- display: none;
- }
-}
-
-h2.page-subtitle {
- text-transform: uppercase;
- color: #aeaeae;
- font-size: 1em;
- margin: 12px;
-}
-
-.network-component-wrapper {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
deleted file mode 100644
index eba93ecb4..000000000
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-.hero-balance {
-
- @media screen and (max-width: $break-small) {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- flex: 0 0 auto;
- padding-top: 16px;
- }
-
- @media screen and (min-width: $break-large) {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
- margin: 2.3em 2.37em .8em;
- flex: 0 0 auto;
- }
-
- .balance-container {
- display: flex;
- margin: 0;
- justify-content: flex-start;
- align-items: center;
-
- @media screen and (max-width: $break-small) {
- flex-direction: column;
- flex: 0 0 auto;
- max-width: 100%;
- }
-
- @media screen and (min-width: $break-large) {
- flex-direction: row;
- flex-grow: 3;
- min-width: 0;
- }
- }
-
- .balance-display {
- .token-amount {
- color: $black;
- max-width: 100%;
-
- .token-balance {
- display: flex;
- }
- }
-
- @media screen and (max-width: $break-small) {
- max-width: 100%;
- text-align: center;
-
- .token-amount {
- font-size: 1.75rem;
- margin-top: 1rem;
-
- .token-balance {
- flex-direction: column;
- }
- }
-
- .fiat-amount {
- font-size: 115%;
- margin-top: 8.5%;
- color: #a0a0a0;
- }
- }
-
- @media screen and (min-width: $break-large) {
- margin: 0 .8em;
- justify-content: flex-start;
- align-items: flex-start;
- min-width: 0;
-
- .token-amount {
- font-size: 1.5rem;
- }
-
- .fiat-amount {
- margin-top: .25%;
- font-size: 105%;
- }
- }
-
- @media #{$sub-mid-size-breakpoint-range} {
- margin-left: .4em;
- margin-right: .4em;
- justify-content: flex-start;
- align-items: flex-start;
-
- .token-amount {
- font-size: 1rem;
- }
-
- .fiat-amount {
- margin-top: .25%;
- font-size: 1rem;
- }
- }
- }
-
- .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
- flex: 0 0 auto;
- padding: 16px 0;
- }
-
- @media screen and (min-width: $break-large) {
- flex-grow: 2;
- justify-content: flex-end;
- }
- }
-}
-
-.hero-balance-button {
- min-width: initial;
- width: 6rem;
-
- @media #{$sub-mid-size-breakpoint-range} {
- padding: .4rem;
- width: 4rem;
- display: flex;
- flex: 1;
- justify-content: center;
- }
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 96ad5fe64..63aa62eb3 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,7 +1,5 @@
@import './buttons.scss';
-@import './header.scss';
-
@import './footer.scss';
@import './network.scss';
@@ -21,8 +19,6 @@
@import './loading-overlay.scss';
// Balances
-@import './hero-balance.scss';
-
@import './wallet-balance.scss';
// Tx List and Sections
@@ -40,14 +36,14 @@
@import './gas-slider.scss';
-@import './settings.scss';
-
@import './tab-bar.scss';
@import './simple-dropdown.scss';
@import './request-signature.scss';
+@import './account-details-dropdown.scss';
+
@import './account-dropdown-mini.scss';
@import './editable-label.scss';
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index b07d6af17..b023c8423 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -1,6 +1,6 @@
.loading-overlay {
left: 0;
- z-index: 50;
+ z-index: 51;
position: absolute;
flex-direction: column;
display: flex;
@@ -8,25 +8,9 @@
align-items: center;
flex: 1 1 auto;
width: 100%;
+ height: 100%;
background: rgba(255, 255, 255, .8);
- @media screen and (max-width: 575px) {
- margin-top: 66px;
- height: calc(100% - 66px);
- }
-
- @media screen and (min-width: 576px) {
- margin-top: 75px;
- height: calc(100% - 75px);
- }
-
- &--full-screen {
- position: fixed;
- height: 100vh;
- width: 100vw;
- margin-top: 0;
- }
-
&__container {
position: absolute;
top: 33%;
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index b23876d01..833a91f12 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -59,6 +59,15 @@
font-weight: 500;
}
+.dropdown-menu-item .fa.delete {
+ margin-right: 10px;
+ display: none;
+}
+
+.dropdown-menu-item:hover .fa.delete {
+ display: inherit;
+}
+
.network-droppo {
right: 2px;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index bbfd85c90..8e963d495 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -6,7 +6,6 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
*/
// Component Colors
-$tx-view-bg: $white;
$wallet-view-bg: $alabaster;
// Main container
@@ -23,6 +22,12 @@ $wallet-view-bg: $alabaster;
display: none;
}
+.main-container-wrapper {
+ display: flex;
+ width: 100vw;
+ justify-content: center;
+}
+
//Account and transaction details
.account-and-transaction-details {
display: flex;
@@ -30,32 +35,6 @@ $wallet-view-bg: $alabaster;
min-width: 0;
}
-// tx view
-
-.tx-view {
- flex: 1 1 66.5%;
- background: $tx-view-bg;
- min-width: 0;
-
- // No title on mobile
- @media screen and (max-width: 575px) {
- .identicon-wrapper {
- display: none;
- }
-
- .account-name {
- display: none;
- }
- }
-}
-
-.open-in-browser {
- cursor: pointer;
- display: flex;
- justify-content: center;
- padding: 10px;
-}
-
// wallet view and sidebar
.wallet-view {
@@ -175,7 +154,7 @@ $wallet-view-bg: $alabaster;
}
}
-.wallet-view.sidebar {
+.wallet-view.sidebar-right {
flex: 1 0 230px;
background: rgb(250, 250, 250);
z-index: $sidebar-z-index;
@@ -193,20 +172,6 @@ $wallet-view-bg: $alabaster;
height: calc(100% - 56px);
}
-.sidebar-overlay {
- z-index: $sidebar-overlay-z-index;
- position: fixed;
- // top: 41px;
- height: 100%;
- width: 100%;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 1;
- visibility: visible;
- background-color: rgba(0, 0, 0, .3);
-}
-
// main-container media queries
@media screen and (min-width: 576px) {
@@ -260,6 +225,10 @@ $wallet-view-bg: $alabaster;
overflow-y: auto;
background-color: $white;
}
+
+ .main-container-wrapper {
+ height: 100%;
+ }
}
// wallet view
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index b607aded3..445b9ebf5 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -23,6 +23,25 @@
}
}
+ &__typed-container {
+ padding: 17px;
+
+ h1 {
+ font-weight: 900;
+ margin-bottom: 5px;
+ }
+
+ * {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ > div {
+ margin-bottom: 10px;
+ }
+ }
+
&__header {
height: 64px;
width: 100%;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 806ac8536..a57653b45 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -622,12 +622,14 @@
position: relative;
&__down-caret {
+ z-index: 1026;
position: absolute;
top: 18px;
right: 12px;
}
&__qr-code {
+ z-index: 1026;
position: absolute;
top: 13px;
right: 33px;
@@ -647,6 +649,8 @@
&__to-autocomplete, &__memo-text-area, &__hex-data {
&__input {
+ z-index: 1025;
+ position: relative;
height: 54px;
width: 100%;
border: 1px solid $alto;
@@ -827,11 +831,17 @@
&__error-message {
display: block;
position: absolute;
- top: 4px;
- right: 4px;
+ top: -18px;
+ right: 0;
font-size: 12px;
line-height: 12px;
color: $red;
+ width: 100%;
+ text-align: center;
+ }
+
+ &__cancel {
+ margin-right: 10px;
}
}
@@ -880,12 +890,21 @@
font-size: 18px;
color: $tundora;
right: 0px;
- padding: 1px 4px;
+ padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
+ .gas-tooltip-input-arrow-wrapper {
+ align-items: center;
+ align-self: stretch;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ justify-content: center;
+ }
+
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
deleted file mode 100644
index 0dd61ac5e..000000000
--- a/ui/app/css/itcss/components/settings.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-.settings {
- position: relative;
- background: $white;
- display: flex;
- flex-flow: column nowrap;
-}
-
-.settings__header {
- padding: 25px;
-}
-
-.settings__close-button::after {
- content: '\00D7';
- font-size: 40px;
- color: $dusty-gray;
- position: absolute;
- top: 25px;
- right: 30px;
- cursor: pointer;
-}
-
-.settings__error {
- padding-bottom: 20px;
- text-align: center;
- color: $crimson;
-}
-
-.settings__content {
- padding: 0 25px;
- height: auto;
- overflow: auto;
-}
-
-.settings__content-row {
- display: flex;
- flex-direction: row;
- padding: 10px 0 20px;
-
- @media screen and (max-width: 575px) {
- flex-direction: column;
- padding: 10px 0;
- }
-}
-
-.settings__content-item {
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
- padding: 0 5px;
- height: 71px;
-
- @media screen and (max-width: 575px) {
- height: initial;
- padding: 5px 0;
- }
-
- &--without-height {
- height: initial;
- }
-}
-
-.settings__content-item-col {
- max-width: 300px;
- display: flex;
- flex-direction: column;
-
- @media screen and (max-width: 575px) {
- max-width: 100%;
- width: 100%;
- }
-}
-
-.settings__content-description {
- font-size: 14px;
- color: $dusty-gray;
- padding-top: 5px;
-}
-
-.settings__input {
- padding-left: 10px;
- font-size: 14px;
- height: 40px;
- border: 1px solid $alto;
-}
-
-.settings__input::-webkit-input-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__input::-moz-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__input:-ms-input-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__input:-moz-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__provider-wrapper {
- font-size: 16px;
- border: 1px solid $alto;
- border-radius: 2px;
- padding: 15px;
- background-color: $white;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-.settings__provider-icon {
- height: 10px;
- width: 10px;
- margin-right: 10px;
- border-radius: 10px;
-}
-
-.settings__rpc-save-button {
- align-self: flex-end;
- padding: 5px;
- text-transform: uppercase;
- color: $dusty-gray;
- cursor: pointer;
-}
-
-.settings__button--red {
- border-color: lighten($monzo, 10%);
- color: $monzo;
-
- &:active {
- background: lighten($monzo, 55%);
- border-color: $monzo;
- }
-
- &:hover {
- border-color: $monzo;
- }
-}
-
-.settings__button--orange {
- border-color: lighten($ecstasy, 20%);
- color: $ecstasy;
-
- &:active {
- background: lighten($ecstasy, 40%);
- border-color: $ecstasy;
- }
-
- &:hover {
- border-color: $ecstasy;
- }
-}
-
-.settings__info-logo-wrapper {
- height: 80px;
- margin-bottom: 20px;
-}
-
-.settings__info-logo {
- max-height: 100%;
- max-width: 100%;
-}
-
-.settings__info-item {
- padding: 10px 0;
-}
-
-.settings__info-link-header {
- padding-bottom: 15px;
-
- @media screen and (max-width: 575px) {
- padding-bottom: 5px;
- }
-}
-
-.settings__info-link-item {
- padding: 15px 0;
-
- @media screen and (max-width: 575px) {
- padding: 5px 0;
- }
-}
-
-.settings__info-version-number {
- padding-top: 5px;
- font-size: 13px;
- color: $dusty-gray;
-}
-
-.settings__info-about {
- color: $dusty-gray;
- margin-bottom: 15px;
-}
-
-.settings__info-link {
- color: $curious-blue;
-}
-
-.settings__info-separator {
- margin: 15px 0;
- width: 80px;
- border-color: $alto;
- border: none;
- height: 1px;
- background-color: $alto;
- color: $alto;
-}
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 1d45ff13b..3435353d9 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -243,7 +243,7 @@
}
.tx-list-item {
- border-top: 1px solid rgb(231, 231, 231);
+ border-bottom: 1px solid $geyser;
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 04:10:25 +0800