diff options
Diffstat (limited to 'ui/app/css')
-rw-r--r-- | ui/app/css/itcss/components/account-details-dropdown.scss | 7 | ||||
-rw-r--r-- | ui/app/css/itcss/components/buttons.scss | 15 | ||||
-rw-r--r-- | ui/app/css/itcss/components/index.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/loading-overlay.scss | 20 | ||||
-rw-r--r-- | ui/app/css/itcss/components/network.scss | 9 | ||||
-rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 10 | ||||
-rw-r--r-- | ui/app/css/itcss/components/request-signature.scss | 19 | ||||
-rw-r--r-- | ui/app/css/itcss/components/send.scss | 25 | ||||
-rw-r--r-- | ui/app/css/itcss/components/settings.scss | 214 |
9 files changed, 82 insertions, 241 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/index.scss b/ui/app/css/itcss/components/index.scss index 9e2008b54..63aa62eb3 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -36,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 7eb193d6f..8e963d495 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -22,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; @@ -219,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; -} |