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/buttons.scss230
-rw-r--r--ui/app/css/itcss/components/index.scss2
-rw-r--r--ui/app/css/itcss/components/modal.scss2
-rw-r--r--ui/app/css/itcss/components/network.scss28
-rw-r--r--ui/app/css/itcss/components/send.scss112
5 files changed, 139 insertions, 235 deletions
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
deleted file mode 100644
index 3e99d0ac6..000000000
--- a/ui/app/css/itcss/components/buttons.scss
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- Buttons
- */
-
-.button {
- min-height: 44px;
- background: $white;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- border-radius: 4px;
- font-size: 14px;
- font-weight: 400;
- transition: border-color .3s ease;
- padding: 0 16px;
- min-width: 140px;
- width: 100%;
- text-transform: uppercase;
- outline: none;
- font-family: Roboto;
-
- &--disabled,
- &[disabled] {
- cursor: auto;
- opacity: .5;
- pointer-events: none;
- }
-}
-
-.btn-primary {
- color: $curious-blue;
- border: 2px solid $spindle;
-
- &:active {
- background: $zumthor;
- border-color: $curious-blue;
- }
-
- &:hover {
- border-color: $curious-blue;
- }
-}
-
-.btn-secondary {
- color: $monzo;
- border: 2px solid lighten($monzo, 40%);
-
- &:active {
- background: lighten($monzo, 55%);
- border-color: $monzo;
- }
-
- &:hover {
- border-color: $monzo;
- }
-}
-
-.btn-default {
- color: $scorpion;
- border: 2px solid $dusty-gray;
-
- &:active {
- background: $gallery;
- border-color: $dusty-gray;
- }
-
- &:hover {
- border-color: $scorpion;
- }
-}
-
-.btn-confirm {
- color: $white;
- border: 2px solid $curious-blue;
- 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;
- min-height: initial;
- width: initial;
- min-width: initial;
-}
-
-.btn--first-time {
- height: 54px;
- width: 198px;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
- color: $white;
- font-size: 1.25rem;
- font-weight: 500;
- transition: 200ms ease-in-out;
- background-color: rgba(247, 134, 28, .9);
- border-radius: 0;
-}
-
-.btn--large {
- min-height: 54px;
-}
-
-.btn-green {
- background-color: #02c9b1; // TODO: reusable color in colors.css
-}
-
-.btn-clear {
- background: $white;
- text-align: center;
- padding: .8rem 1rem;
- color: $curious-blue;
- border: 2px solid $spindle;
- border-radius: 4px;
- font-size: .85rem;
- font-weight: 400;
- transition: border-color .3s ease;
-
- &:hover {
- border-color: $curious-blue;
- }
-
- &--disabled,
- &[disabled] {
- cursor: auto;
- opacity: .5;
- pointer-events: none;
- }
-}
-
-.btn-cancel {
- background: $white;
- text-align: center;
- padding: .9rem 1rem;
- color: $scorpion;
- border: 2px solid $dusty-gray;
- border-radius: 4px;
- font-size: .85rem;
- font-weight: 400;
- transition: border-color .3s ease;
- width: 100%;
-
- &:hover {
- border-color: $scorpion;
- }
-}
-
-// No longer used in flat design, remove when modal buttons done
-// div.wallet-btn {
-// border: 1px solid rgb(91, 93, 103);
-// border-radius: 2px;
-// height: 30px;
-// width: 75px;
-// font-size: 0.8em;
-// text-align: center;
-// line-height: 25px;
-// }
-
-// .btn-red {
-// background: rgba(254, 35, 17, 1);
-// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
-// }
-
-button[disabled],
-input[type="submit"][disabled] {
- cursor: not-allowed;
- opacity: .5;
- // background: rgba(197, 197, 197, 1);
- // box-shadow: 0 3px 6px rgba(197, 197, 197, .36);
-}
-
-// button.spaced {
-// margin: 2px;
-// }
-
-// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
-// transform: scale(1.1);
-// }
-// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
-// transform: scale(0.95);
-// }
-
-button.primary {
- padding: 8px 12px;
- background: #f7861c;
- box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
- color: $white;
- font-size: 1.1em;
- font-family: Roboto;
- text-transform: uppercase;
-}
-
-.btn-light {
- padding: 8px 12px;
- // background: #FFFFFF; // $bg-white
- box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
- color: #585d67; // TODO: make reusable light button color
- font-size: 1.1em;
- font-family: Roboto;
- text-transform: uppercase;
- text-align: center;
- line-height: 20px;
- border-radius: 2px;
- border: 1px solid #979797; // #TODO: make reusable light border color
- opacity: .5;
-}
-
-// TODO: cleanup: not used anywhere
-button.btn-thin {
- border: 1px solid;
- border-color: #4d4d4d;
- color: #4d4d4d;
- background: rgb(255, 174, 41);
- border-radius: 4px;
- min-width: 200px;
- margin: 12px 0;
- padding: 6px;
- font-size: 13px;
-}
-
-.btn-tertiary {
- border: 1px solid transparent;
- border-radius: 2px;
- background-color: transparent;
- font-size: 16px;
- line-height: 24px;
- padding: 16px 42px;
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index f2f37bfa3..3d426a33c 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,4 +1,4 @@
-@import './buttons.scss';
+@import '../../../components/ui/button/buttons';
@import './footer.scss';
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 42ef7ae0a..9c0a5cf61 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -538,6 +538,8 @@
}
&__button {
+ @include paragraph;
+ @extend %button;
width: 141px;
margin: 0 5px;
}
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index c828a2b26..2c6ca2522 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -29,6 +29,10 @@
&.rinkeby-test-network .menu-icon-circle div {
background-color: rgba(235, 179, 63, .7) !important;
}
+
+ &.goerli-test-network .menu-icon-circle div {
+ background-color: rgba(48, 153, 242, .7) !important;
+ }
}
.dropdown-menu-item {
@@ -48,6 +52,11 @@
font-size: 12px;
padding: 0 4px;
}
+
+ .fa-question-circle {
+ margin: 0 4px 0 6px;
+ font-size: 1rem;
+ }
}
.network-name {
@@ -165,5 +174,22 @@
}
.network-caret {
- margin: 0 8px 2px;
+ margin: 0 8px;
+}
+
+.network-loading-spinner {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ position: relative;
+ height: 16px;
+ width: 16px;
+ margin-left: 5px;
+
+ img {
+ height: 26px;
+ position: absolute;
+ top: -5px;
+ left: -6px;
+ }
}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 07ab04613..927640f0b 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -549,7 +549,7 @@
}
&__form-row {
- margin: 14.5px 18px 0px;
+ margin: 8px 18px 0px;
position: relative;
display: flex;
flex-flow: row;
@@ -592,8 +592,8 @@
flex: 0 0 auto;
}
- &__from-dropdown {
- height: 73px;
+ &__from-dropdown,
+ &__asset-dropdown {
width: 100%;
border: 1px solid $alto;
border-radius: 4px;
@@ -628,6 +628,112 @@
}
}
+ &__from-dropdown {
+ height: 73px;
+ }
+
+ &__asset-dropdown {
+ height: 54px;
+ border: none;
+
+ &__asset {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ padding: 0 8px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: rgba($alto, 0.2);
+ }
+ }
+
+ &__asset-icon {
+ .identicon {
+ border: 1px solid $alto;
+ }
+ }
+
+ &__asset-data {
+ display: flex;
+ flex-flow: column nowrap;
+ margin-left: 8px;
+ }
+
+ &__symbol {
+ font-size: 16px;
+ margin-bottom: 2px;
+ }
+
+ &__name {
+ display: flex;
+ flex-flow: row nowrap;
+ font-size: 12px;
+
+ &__label {
+ margin-right: .25rem;
+ }
+ }
+
+ &__close-area {
+ z-index: 2000;
+ }
+
+ &__list {
+ z-index: 2050;
+ position: absolute;
+ height: 220px;
+ width: 100%;
+ border: 1px solid $geyser;
+ border-radius: 4px;
+ background-color: $white;
+ box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
+ top: 65px;
+ left: 0;
+ box-sizing: content-box;
+ overflow-y: scroll;
+ margin-top: 0;
+ padding: 4px 0;
+
+ .send-v2__asset-dropdown__asset {
+ padding: 8px;
+ }
+ }
+
+ &__input-wrapper {
+ border: 1px solid $alto;
+ border-radius: 4px;
+ height: 100%;
+
+ &--opened {
+ position: relative;
+ z-index: 2050;
+ }
+
+ .send-v2__asset-dropdown__asset {
+ height: 100%;
+ &:hover {
+ background-color: $white;
+ }
+ }
+ }
+
+ &__input {
+ z-index: 1025;
+ position: relative;
+ height: 54px;
+ width: 100%;
+ border: none;
+ border-radius: 4px;
+ background-color: $white;
+ color: $tundora;
+ padding: 10px;
+ font-family: Roboto;
+ font-size: 16px;
+ line-height: 21px;
+ }
+ }
+
&__to-autocomplete {
position: relative;
generated by cgit (git 2.34.1) at 2024-10-20 05:42:14 +0800