1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/app/css/itcss/components/modal.scss

866 lines
15 KiB
SCSS
Raw Normal View History

2017-09-06 13:28:47 +02:00
.modal > div:focus {
outline: none !important;
}
// Buy Modal
.buy-modal-content {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-20 03:49:35 +02:00
padding: 0 16px;
}
.buy-modal-content-option {
cursor: pointer;
color: #5B5D67;
}
2017-09-29 17:40:57 +02:00
.qr-ellip-address, .ellip-address {
width: 247px;
border: none;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-29 17:40:57 +02:00
font-size: 14px;
}
@media screen and (max-width: 575px) {
.buy-modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 100px;
}
.buy-modal-content-title {
font-size: 26px;
margin-top: 15px;
}
.buy-modal-content-options {
flex-direction: column;
padding: 5% 33%;
}
.buy-modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
div.buy-modal-content-option {
display: flex;
flex-direction: column;
width: 80vw;
height: 15vh;
margin: 10px;
text-align: center;
border-radius: 6px;
2017-08-14 10:31:27 +02:00
border: 1px solid $black;
padding: 0% 7%;
justify-content: center;
div.buy-modal-content-option-title {
font-size: 20px;
}
div.buy-modal-content-option-subtitle {
font-size: 16px;
}
}
}
@media screen and (min-width: 576px) {
.buy-modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 110px;
}
.buy-modal-content-title {
font-size: 26px;
margin-top: 15px;
}
.buy-modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
.buy-modal-content-options {
flex-direction: row;
2017-09-20 03:49:35 +02:00
margin: 20px 0 60px;
}
div.buy-modal-content-option {
display: flex;
flex-direction: column;
width: 20vw;
2017-09-20 03:49:35 +02:00
height: 120px;
text-align: center;
border-radius: 6px;
2017-08-14 10:31:27 +02:00
border: 1px solid $black;
2017-09-20 03:49:35 +02:00
margin: 0 8px;
padding: 18px 0;
div.buy-modal-content-option-title {
font-size: 20px;
2017-09-20 03:49:35 +02:00
margin-bottom: 12px;
@media screen and (max-width: 679px) {
font-size: 14px;
}
@media screen and (min-width: 1281px) {
2017-09-20 03:49:35 +02:00
font-size: 20px;
}
}
div.buy-modal-content-option-subtitle {
font-size: 16px;
2017-08-14 10:31:27 +02:00
padding: 0 10px;
height: 25%;
@media screen and (max-width: 679px) {
font-size: 10px;
2017-08-14 10:31:27 +02:00
padding: 0 10px;
margin-bottom: 5px;
line-height: 15px;
}
@media screen and (min-width: 680px) {
font-size: 14px;
2017-08-14 10:31:27 +02:00
padding: 0 4px;
margin-bottom: 2px;
}
@media screen and (min-width: 1281px) {
2017-09-20 03:49:35 +02:00
font-size: 16px;
2017-08-14 10:31:27 +02:00
padding: 0;
}
}
div.buy-modal-content-footer {
margin-top: 8vh;
}
}
}
// Edit Account Name Modal
.edit-account-name-modal-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
}
.edit-account-name-modal-cancel {
position: absolute;
top: 12px;
right: 20px;
font-size: 25px;
}
.edit-account-name-modal-title {
margin: 15px;
}
.edit-account-name-modal-save-button {
width: 33%;
height: 45px;
margin: 15px;
font-weight: 700;
margin-top: 25px;
}
.edit-account-name-modal-input {
width: 90%;
height: 50px;
text-align: left;
margin: 10px;
padding: 10px;
font-size: 18px;
}
2017-09-20 02:56:10 +02:00
// Account Modal Container
.account-modal-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
2017-08-21 15:14:28 +02:00
position: relative;
padding: 5px 0 31px 0;
border: 1px solid $silver;
border-radius: 4px;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-11 09:45:06 +02:00
button {
cursor: pointer;
}
}
.account-modal-back {
color: $dusty-gray;
position: absolute;
top: 13px;
left: 17px;
cursor: pointer;
&__text {
margin-top: 2px;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
font-size: 14px;
line-height: 18px;
}
}
2017-09-20 02:56:10 +02:00
.account-modal-close::after {
content: '\00D7';
font-size: 40px;
color: $dusty-gray;
position: absolute;
top: 10px;
right: 12px;
cursor: pointer;
}
.account-modal-container .identicon {
position: relative;
left: 0;
right: 0;
margin: 0 auto;
top: -32px;
margin-bottom: -32px;
}
// Account Details Modal
.account-modal-container {
.qr-header {
margin-top: 9px;
font-size: 20px;
}
.qr-wrapper {
margin-top: 5px;
}
.ellip-address-wrapper {
display: flex;
justify-content: center;
border: 1px solid $alto;
padding: 5px 10px;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
margin-top: 7px;
width: 286px;
}
.account-modal__button {
margin-top: 17px;
padding: 10px 22px;
2018-03-26 07:19:42 +02:00
width: 286px;
}
2017-08-21 15:14:28 +02:00
}
2017-09-20 02:56:10 +02:00
.account-modal-divider {
width: 100%;
height: 1px;
margin: 19px 0 8px 0;
background-color: $alto;
}
2017-09-20 10:06:31 +02:00
// Export Private Key Modal
.account-modal-container .account-name {
margin-top: 9px;
font-size: 20px;
}
.account-modal-container .modal-body-title {
margin-top: 16px;
margin-bottom: 16px;
font-size: 18px;
}
.account-modal__name {
margin-top: 9px;
font-size: 20px;
}
2017-09-20 10:06:31 +02:00
.private-key-password {
display: flex;
flex-direction: column;
}
.private-key-password-label, .private-key-password-error {
2017-09-20 10:06:31 +02:00
color: $scorpion;
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
}
.private-key-password-error {
color: $crimson;
margin-bottom: 0;
}
2017-09-20 10:06:31 +02:00
.private-key-password-input {
padding: 10px 0 13px 17px;
font-size: 16px;
line-height: 21px;
width: 291px;
height: 44px;
}
.private-key-password::-webkit-input-placeholder {
color: $dusty-gray;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-20 10:06:31 +02:00
}
.private-key-password-warning {
border-radius: 8px;
background-color: #FFF6F6;
font-size: 12px;
font-weight: 500;
line-height: 15px;
color: $crimson;
width: 292px;
padding: 9px 15px;
margin-top: 18px;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-20 10:06:31 +02:00
}
.export-private-key-buttons {
display: flex;
flex-direction: row;
justify-content: center;
}
2017-09-20 10:06:31 +02:00
.export-private-key__button {
margin-top: 17px;
width: 141px;
2018-03-26 07:19:42 +02:00
min-width: initial;
}
2017-09-20 10:06:31 +02:00
.export-private-key__button--cancel {
margin-right: 15px;
2017-09-20 10:06:31 +02:00
}
.private-key-password-display-wrapper {
height: 80px;
width: 291px;
border: 1px solid $silver;
border-radius: 2px;
}
.private-key-password-display-textarea {
color: $crimson;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
border: none;
height: 75px;
width: 100%;
overflow: hidden;
resize: none;
padding: 9px 13px 8px;
text-transform: uppercase;
}
2017-09-20 10:06:31 +02:00
2017-08-21 15:14:28 +02:00
// New Account Modal
.new-account-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;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
}
.new-account-modal-header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
2017-09-06 19:08:05 +02:00
height: 79px;
}
.modal-close-x::after {
content: '\00D7';
font-size: 2em;
color: $dusty-gray;
position: absolute;
top: 25px;
right: 17.5px;
font-family: sans-serif;
cursor: pointer;
}
.new-account-modal-content {
width: 100%;
display: flex;
justify-content: center;
2017-09-06 19:08:05 +02:00
margin-top: 15px;
font-size: 17px;
color: $nile-blue;
}
2017-09-06 19:08:05 +02:00
.new-account-modal-content.after-input {
margin-top: 15px;
line-height: 25px;
}
.new-account-input-wrapper {
display: flex;
width: 100%;
justify-content: center;
padding-bottom: 2px;
2017-09-06 19:08:05 +02:00
margin-top: 13px;
}
.new-account-input {
padding: 15px;
padding-bottom: 20px;
border-radius: 8px;
border: 1px solid $alto;
width: 100%;
font-size: 1em;
color: $dusty-gray;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-06 19:08:05 +02:00
font-size: 17px;
margin: 0 60px;
}
// For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css
.new-account-input::-webkit-input-placeholder {
color: $dusty-gray;
}
.new-account-input:-moz-placeholder {
color: $dusty-gray;
opacity: 1;
}
.new-account-input::-moz-placeholder {
color: $dusty-gray;
opacity: 1;
}
.new-account-input:-ms-input-placeholder {
color: $dusty-gray;
}
.new-account-input::-ms-input-placeholder {
color: $dusty-gray;
}
.new-account-modal-content.button {
2017-09-06 19:08:05 +02:00
margin-top: 22px;
margin-bottom: 30px;
width: 113px;
height: 44px;
}
.new-account-modal-wrapper .btn-clear {
font-size: 14px;
font-weight: 700;
background: $white;
border: 1px solid;
border-radius: 2px;
color: $tundora;
2017-09-06 19:08:05 +02:00
flex: 1;
}
2017-09-29 21:03:29 +02:00
// Hide token confirmation
.hide-token-confirmation {
min-height: 250.72px;
border-radius: 4px;
background-color: $white;
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
2017-09-29 21:03:29 +02:00
&__container {
padding: 24px 27px 21px;
display: flex;
flex-direction: column;
align-items: center;
}
&__identicon {
margin-bottom: 10px;
2017-09-29 21:03:29 +02:00
}
&__symbol {
color: $tundora;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-29 21:03:29 +02:00
font-size: 16px;
line-height: 24px;
text-align: center;
margin-bottom: 7.5px;
}
&__title {
height: 30px;
width: 271.28px;
color: $tundora;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-29 21:03:29 +02:00
font-size: 22px;
line-height: 30px;
text-align: center;
margin-bottom: 10.5px;
}
&__copy {
height: 41px;
width: 318px;
color: $scorpion;
2017-10-13 00:46:09 +02:00
font-family: Roboto;
2017-09-29 21:03:29 +02:00
font-size: 14px;
line-height: 18px;
text-align: center;
}
&__buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 15px;
width: 100%;
}
2017-09-29 21:03:29 +02:00
&__button {
width: 141px;
margin: 0 5px;
2017-09-29 21:03:29 +02:00
}
}
//Notification Modal
2018-02-08 18:18:25 +01:00
.notification-modal {
2018-02-08 18:18:25 +01:00
&__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;
}
2018-02-08 18:18:25 +01:00
&__header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
}
2018-02-08 18:18:25 +01:00
&__message {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
}
&__buttons {
display: flex;
justify-content: space-evenly;
width: 100%;
margin-bottom: 24px;
padding: 0px 42px;
&__btn {
cursor: pointer;
}
}
&__link {
color: $curious-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%;
2018-03-12 19:25:12 +01:00
padding: 0 30px;
display: flex;
flex-flow: column nowrap;
flex: 1;
align-items: center;
@media screen and (max-width: 575px) {
height: 0;
}
.shapeshift-form-wrapper {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
flex: 1 0 auto;
.shapeshift-form, .modal-shapeshift-form {
border-radius: 8px;
background-color: rgba(0, 0, 0, .05);
padding: 17px 15px;
margin-bottom: 10px;
&__caret {
width: auto;
flex: 1;
}
}
}
}
2018-03-12 19:25:12 +01:00
&__logo {
height: 60px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__buy-row {
border-bottom: 1px solid $alto;
display: flex;
justify-content: space-between;
align-items: center;
2018-03-12 19:25:12 +01:00
flex: 1 0 auto;
padding: 30px 0 20px;
min-height: 170px;
@media screen and (max-width: 575px) {
2018-03-12 19:25:12 +01:00
min-height: 270px;
flex-flow: column;
2018-03-12 19:25:12 +01:00
justify-content: flex-start;
}
&__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;
}
}
2018-03-12 19:25:12 +01:00
&__logo-container {
display: flex;
justify-content: center;
2018-03-12 19:25:12 +01:00
flex: 0 0 auto;
padding: 0 20px;
2018-03-12 19:25:12 +01:00
@media screen and (min-width: 576px) {
width: 12rem;
}
@media screen and (max-width: 575px) {
width: 100%;
max-height: 6rem;
padding-bottom: 20px;
}
}
&__coinbase-logo {
height: 40px;
}
&__shapeshift-logo {
height: 60px;
}
&__right {
display: flex;
}
&__description {
color: $cape-cod;
2018-03-12 19:25:12 +01:00
padding-bottom: 20px;
align-self: flex-start;
@media screen and (min-width: 575px) {
2018-03-12 19:25:12 +01:00
width: 15rem;
}
&__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 {
width: 257px;
}
.shapeshift-form-wrapper {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin-top: 28px;
flex: 1 0 auto;
.shapeshift-form, .modal-shapeshift-form {
border-radius: 8px;
background-color: rgba(0, 0, 0, .05);
padding: 17px 15px;
&__caret {
width: auto;
flex: 1;
}
}
}
.shapeshift-form__shapeshift-buy-btn {
margin-top: 10px;
}
.simple-dropdown {
color: #5B5D67;
font-size: 16px;
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
.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;
align-items: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
}
.notification-modal-message {
padding: 20px;
}
.notification-modal-message {
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
}