aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css/itcss/components/modal.scss
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css/itcss/components/modal.scss')
-rw-r--r--ui/app/css/itcss/components/modal.scss306
1 files changed, 270 insertions, 36 deletions
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 9b64564d6..5bca4a07d 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -258,19 +258,10 @@
width: 286px;
}
- .btn-clear {
- min-height: 28px;
- font-size: 14px;
- border-color: $curious-blue;
- color: $curious-blue;
- border-radius: 2px;
- flex-basis: 100%;
- width: 75%;
+ .account-modal__button {
margin-top: 17px;
padding: 10px 22px;
- height: 44px;
width: 235px;
- font-family: Roboto;
}
}
@@ -346,17 +337,17 @@
display: flex;
flex-direction: row;
justify-content: center;
+}
- .btn-clear {
- width: 141px;
- height: 54px;
- }
+.export-private-key__button {
+ margin-top: 17px;
+ padding: 10px 22px;
+ width: 141px;
+ height: 54px;
+}
- .btn-cancel {
- margin-right: 15px;
- border-color: $dusty-gray;
- color: $scorpion;
- }
+.export-private-key__button--cancel {
+ margin-right: 15px;
}
.private-key-password-display-wrapper {
@@ -495,10 +486,9 @@
.hide-token-confirmation {
min-height: 250.72px;
- width: 374.49px;
border-radius: 4px;
- background-color: #FFFFFF;
- box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5);
+ background-color: $white;
+ box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
&__container {
padding: 24px 27px 21px;
@@ -508,7 +498,7 @@
}
&__identicon {
- margin-bottom: 10px
+ margin-bottom: 10px;
}
&__symbol {
@@ -547,21 +537,264 @@
justify-content: center;
margin-top: 15px;
width: 100%;
+ }
+
+ &__button {
+ width: 141px;
+ margin: 0 5px;
+ }
+}
+
+//Notification Modal
+
+.notification-modal-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ position: relative;
+ border: 1px solid $alto;
+ box-shadow: 0 0 2px 2px $alto;
+ font-family: Roboto;
+}
+
+.notification-modal-header {
+ background: $wild-sand;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 30px;
+ font-size: 22px;
+ color: $nile-blue;
+ height: 79px;
+}
+
+.notification-modal-message {
+ padding: 20px;
+}
+
+.notification-modal-message {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ font-size: 17px;
+ color: $nile-blue;
+}
+
+// Deposit Ether Modal
+.deposit-ether-modal {
+ border-radius: 8px;
+ font-family: Roboto;
+ display: flex;
+ flex-flow: column;
+ height: 100%;
+
+ &__header {
+ width: 100%;
+ border-radius: 8px 8px 0 0;
+ background-color: $mid-gray;
+ display: flex;
+ position: relative;
+ padding: 25px;
+ flex-flow: column;
+ align-items: flex-start;
+
+ &__title {
+ color: $white;
+ font-size: 24px;
+ line-height: 32px;
+ }
+
+ &__description {
+ color: $white;
+ font-size: 16px;
+ line-height: 22px;
+ margin-top: 10px;
+ }
+
+ &__close::after {
+ content: '\00D7';
+ font-size: 2em;
+ color: $white;
+ position: absolute;
+ top: 20.8px;
+ right: 28px;
+ cursor: pointer;
+ }
+ }
+
+ &__buy-rows {
+ width: 100%;
+ padding: 33px;
+ padding-top: 0px;
+ display: flex;
+ flex-flow: column nowrap;
+ flex: 1;
+ overflow-y: auto;
- button {
- height: 44px;
- width: 113px;
- border: 1px solid $scorpion;
- border-radius: 2px;
- color: $tundora;
- font-family: Roboto;
- font-size: 14px;
- line-height: 20px;
- text-align: center;
- margin-left: 4px;
- margin-right: 4px;
+ @media screen and (max-width: 575px) {
+ height: 0;
}
}
+
+ &__buy-row {
+ border-bottom: 1px solid $alto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ padding-bottom: 25px;
+ padding-top: 25px;
+
+ @media screen and (max-width: 575px) {
+ min-height: 360px;
+ flex-flow: column;
+ justify-content: center;
+ padding-top: 45px;
+ }
+
+ &__back {
+ position: absolute;
+ top: 10px;
+ left: 0px;
+ }
+
+ &__shapeshift-buy {
+ padding-top: 25px;
+ position: relative;
+ @media screen and (max-width: 575px) {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ padding-bottom: 25px;
+ flex-flow: column;
+ justify-content: center;
+ padding-top: 20px;
+ min-height: 240px;
+ border: none;
+ }
+ }
+
+ &__logo {
+ display: flex;
+ justify-content: center;
+ flex: 0.3 1 auto;
+
+ @media screen and (min-width: 575px) {
+ min-width: 215px;
+ }
+ }
+
+ &__coinbase-logo {
+ height: 40px;
+ width: 180px;
+ }
+
+ &__shapeshift-logo {
+ height: 60px;
+ width: 174px;
+ }
+
+ &__eth-logo {
+ border-radius: 50%;
+ width: 68px;
+ height: 68px;
+ border: 3px solid $tundora;
+ z-index: 25;
+ padding: 4px;
+ background-color: #fff;
+ }
+
+ &__right {
+ display: flex;
+ }
+
+ &__description {
+ color: $cape-cod;
+ flex: 0.5 1 auto;
+
+ @media screen and (min-width: 575px) {
+ min-width: 315px;
+ }
+
+ &__title {
+ font-size: 20px;
+ line-height: 30px;
+ }
+
+ &__text {
+ font-size: 14px;
+ line-height: 22px;
+ margin-top: 7px;
+ }
+ }
+
+ &__button {
+ display: flex;
+ justify-content: flex-end;
+
+ @media screen and (min-width: 575px) {
+ min-width: 300px;
+ }
+ }
+ }
+
+ &__buy-row:last-of-type {
+ border-bottom: 0px;
+ }
+
+ &__deposit-button, .shapeshift-form__shapeshift-buy-btn {
+ height: 54px;
+ width: 257px;
+ border: 1px solid $curious-blue;
+ border-radius: 4px;
+ display: flex;
+ justify-content: center;
+ font-size: 16px;
+ color: $curious-blue;
+ background-color: $white;
+ }
+
+ .shapeshift-form-wrapper {
+ display: flex;
+ flex-flow: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 28px;
+ flex: 1 0 auto;
+
+ .shapeshift-form {
+ width: auto;
+
+ &__caret {
+ width: auto;
+ flex: 1;
+ }
+ }
+ }
+
+ .shapeshift-form__shapeshift-buy-btn {
+ margin-top: 10px;
+ }
+
+ .simple-dropdown {
+ color: #5B5D67;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 21px;
+ border: 1px solid #D8D8D8;
+ background-color: #FFFFFF;
+ text-align: center;
+ width: 100%;
+ height: 45px;
+ line-height: 44px;
+ font-family: Montserrat Light;
+ }
+
+ .simple-dropdown__selected {
+ text-align: center;
+ }
}
//Notification Modal
@@ -582,6 +815,7 @@
width: 100%;
display: flex;
justify-content: center;
+ align-items: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
@@ -598,4 +832,4 @@
justify-content: center;
font-size: 17px;
color: $nile-blue;
-} \ No newline at end of file
+}