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/confirm.scss

355 lines
6.0 KiB
SCSS
Raw Normal View History

.confirm-screen-container {
2017-10-10 23:16:57 +02:00
position: relative;
2017-09-12 08:18:54 +02:00
align-items: center;
2017-10-10 23:16:57 +02:00
font-family: Roboto;
flex: 1 0 auto;
2017-10-10 23:16:57 +02:00
flex-flow: column nowrap;
box-shadow: 0 2px 4px 0 rgba($black, .08);
border-radius: 8px;
display: flex;
@media screen and (max-width: 575px) {
width: 100%;
box-shadow: initial;
}
@media screen and (min-width: 576px) {
2017-10-13 00:46:09 +02:00
// top: -26px;
}
}
2017-10-25 09:10:09 +02:00
.notification {
.confirm-screen-wrapper {
@media screen and (max-width: $break-small) {
height: calc(100vh - 85px);
}
}
}
.confirm-screen-wrapper {
2017-10-10 23:16:57 +02:00
height: 100%;
width: 380px;
background-color: $white;
display: flex;
2017-10-10 23:16:57 +02:00
flex-flow: column nowrap;
z-index: 25;
align-items: center;
2017-10-10 23:16:57 +02:00
font-family: Roboto;
position: relative;
overflow-y: auto;
overflow-x: hidden;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
2017-10-10 23:16:57 +02:00
@media screen and (max-width: $break-small) {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
top: 0;
box-shadow: none;
2017-10-24 10:19:00 +02:00
height: calc(100vh - 58px - 85px);
2017-10-10 23:40:00 +02:00
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.confirm-screen-wrapper > .confirm-screen-total-box {
margin-left: 10px;
margin-right: 10px;
}
.confirm-screen-wrapper > .confirm-memo-wrapper {
margin: 0;
}
.confirm-screen-header {
2017-10-10 23:16:57 +02:00
height: 88px;
background-color: $athens-grey;
position: relative;
display: flex;
2017-10-10 23:16:57 +02:00
justify-content: center;
align-items: center;
2017-10-10 23:16:57 +02:00
font-size: 22px;
line-height: 29px;
width: 100%;
2017-10-10 23:16:57 +02:00
padding: 25px 0;
flex: 0 0 auto;
@media screen and (max-width: $break-small) {
font-size: 20px;
}
}
2017-10-10 23:16:57 +02:00
.confirm-screen-header-tip {
height: 25px;
width: 25px;
background: $athens-grey;
position: absolute;
transform: rotate(45deg);
top: 71px;
2017-10-25 10:08:14 +02:00
left: 0;
right: 0;
margin: 0 auto;
2017-10-10 23:16:57 +02:00
}
.confirm-screen-title {
line-height: 27px;
@media screen and (max-width: $break-small) {
margin-left: 22px;
margin-right: 8px;
}
}
.confirm-screen-back-button {
color: $curious-blue;
font-family: Roboto;
font-size: 1rem;
position: absolute;
top: 38px;
right: 38px;
background: none;
}
.confirm-screen-account-wrapper {
display: flex;
flex-direction: column;
2017-10-10 23:36:13 +02:00
align-items: center;
}
.confirm-screen-account-name {
margin-top: 12px;
2017-10-10 23:16:57 +02:00
font-size: 14px;
line-height: 19px;
color: $scorpion;
text-align: center;
}
.confirm-screen-row-info {
font-size: 16px;
2017-10-10 23:16:57 +02:00
line-height: 21px;
}
.confirm-screen-account-number {
font-size: 10px;
line-height: 16px;
color: $dusty-gray;
text-align: center;
height: 16px;
}
.confirm-send-ether,
.confirm-send-token {
i.fa-arrow-right {
align-self: start;
margin: 24px 14px 0 !important;
}
}
.confirm-screen-identicons {
margin-top: 24px;
2017-10-10 23:16:57 +02:00
flex: 0 0 auto;
i.fa-arrow-right {
align-self: start;
margin: 42px 14px 0;
}
i.fa-file-text-o {
2017-10-10 23:30:20 +02:00
font-size: 60px;
margin: 16px 8px 0 8px;
text-align: center;
}
}
.confirm-screen-sending-to-message {
text-align: center;
font-size: 16px;
margin-top: 30px;
font-family: 'DIN NEXT Light';
}
.confirm-screen-send-amount {
color: $scorpion;
margin-top: 12px;
text-align: center;
2017-10-10 23:16:57 +02:00
font-size: 40px;
line-height: 53px;
flex: 0 0 auto;
}
.confirm-screen-send-amount-currency {
font-size: 20px;
line-height: 20px;
text-align: center;
2017-10-10 23:16:57 +02:00
flex: 0 0 auto;
}
.confirm-memo-wrapper {
min-height: 24px;
width: 100%;
border-bottom: 1px solid $alto;
2017-10-10 23:16:57 +02:00
flex: 0 0 auto;
}
.confirm-screen-send-memo {
2017-10-10 23:16:57 +02:00
color: $scorpion;
font-size: 16px;
2017-10-10 23:16:57 +02:00
line-height: 19px;
font-weight: 400;
}
.confirm-screen-label {
2018-03-16 21:09:49 +01:00
font-size: 16px;
line-height: 40px;
color: $scorpion;
text-align: left;
}
section .confirm-screen-account-name,
section .confirm-screen-account-number,
.confirm-screen-row-info,
.confirm-screen-row-detail {
text-align: left;
}
.confirm-screen-rows {
display: flex;
flex-flow: column nowrap;
width: 100%;
2017-10-10 23:16:57 +02:00
flex: 0 0 auto;
}
.confirm-screen-section-column {
flex: .5;
}
.confirm-screen-row {
display: flex;
flex-flow: row nowrap;
2017-10-10 23:16:57 +02:00
width: 100%;
align-items: center;
2017-10-10 23:16:57 +02:00
padding: 12px;
padding-left: 35px;
font-size: 16px;
line-height: 22px;
2018-03-16 21:09:49 +01:00
&:not(:last-of-type) {
border-bottom: 1px solid $alto;
}
}
@media screen and (max-width: 379px) {
.confirm-screen-row {
span.confirm-screen-section-column {
flex: 0.4;
}
div.confirm-screen-section-column {
flex: 0.6;
}
.currency-display__input {
font-size: 14px;
}
}
}
.confirm-screen-row-detail {
font-size: 12px;
line-height: 16px;
color: $dusty-gray;
}
.confirm-screen-total-box {
background-color: $wild-sand;
position: relative;
.confirm-screen-label {
2018-03-16 21:09:49 +01:00
line-height: 21px;
}
.confirm-screen-row-detail {
color: $scorpion;
}
&__subtitle {
2017-10-10 23:16:57 +02:00
font-size: 12px;
2018-03-16 21:09:49 +01:00
line-height: 16px;
2017-10-10 23:16:57 +02:00
}
.confirm-screen-row-info {
font-size: 16px;
font-weight: 500;
line-height: 21px;
}
}
.confirm-screen-error {
font-size: 12px;
line-height: 12px;
color: #f00;
position: absolute;
right: 12px;
width: 80px;
text-align: right;
}
.confirm-screen-row.confirm-screen-total-box {
.confirm-screen-section-column--with-error {
flex: 0.6;
}
}
@media screen and (max-width: 379px) {
.confirm-screen-row.confirm-screen-total-box {
.confirm-screen-section-column--with-error {
flex: 0.4;
}
}
}
.confirm-screen-form {
position: relative;
.confirm-screen-error {
right: 0;
width: 100%;
margin-top: 7px;
text-align: center;
}
}
.confirm-screen-confirm-button {
height: 50px;
border-radius: 4px;
background-color: #02c9b1;
font-size: 16px;
color: $white;
text-align: center;
2017-10-10 23:16:57 +02:00
font-family: Roboto;
padding-top: 15px;
padding-bottom: 15px;
border-width: 0;
box-shadow: none;
2017-10-10 23:16:57 +02:00
flex: 1 0 auto;
margin: 0 5px;
}
.btn-light.confirm-screen-cancel-button {
height: 50px;
background: none;
border: none;
opacity: 1;
2017-10-10 23:16:57 +02:00
font-family: Roboto;
border-width: 0;
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
box-shadow: none;
cursor: pointer;
2017-10-10 23:16:57 +02:00
flex: 1 0 auto;
margin: 0 5px;
}