1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/css/itcss/components/confirm.scss

325 lines
5.6 KiB
SCSS

.confirm-screen-container {
position: relative;
align-items: center;
font-family: Roboto;
flex: 1 0 auto;
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) {
// top: -26px;
}
}
.notification {
.confirm-screen-wrapper {
@media screen and (max-width: $break-small) {
height: calc(100vh - 85px);
}
}
}
.confirm-screen-wrapper {
height: 100%;
width: 380px;
background-color: $white;
display: flex;
flex-flow: column nowrap;
z-index: 25;
align-items: center;
font-family: Roboto;
position: relative;
overflow-y: auto;
overflow-x: hidden;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
@media screen and (max-width: $break-small) {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
top: 0;
box-shadow: none;
height: calc(100vh - 58px - 85px);
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 {
height: 88px;
background-color: $athens-grey;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
line-height: 29px;
width: 100%;
padding: 25px 0;
flex: 0 0 auto;
@media screen and (max-width: $break-small) {
font-size: 20px;
}
}
.confirm-screen-header-tip {
height: 25px;
width: 25px;
background: $athens-grey;
position: absolute;
transform: rotate(45deg);
top: 71px;
left: 0;
right: 0;
margin: 0 auto;
}
.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;
align-items: center;
}
.confirm-screen-account-name {
margin-top: 12px;
font-size: 14px;
line-height: 19px;
color: $scorpion;
text-align: center;
}
.confirm-screen-row-info {
font-size: 16px;
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;
flex: 0 0 auto;
i.fa-arrow-right {
align-self: start;
margin: 42px 14px 0;
}
i.fa-file-text-o {
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;
font-size: 40px;
font-weight: 300;
line-height: 53px;
flex: 0 0 auto;
}
.confirm-screen-send-amount-currency {
font-size: 20px;
line-height: 20px;
text-align: center;
flex: 0 0 auto;
}
.confirm-memo-wrapper {
min-height: 24px;
width: 100%;
border-bottom: 1px solid $alto;
flex: 0 0 auto;
}
.confirm-screen-send-memo {
color: $scorpion;
font-size: 16px;
line-height: 19px;
font-weight: 400;
}
.confirm-screen-label {
font-size: 18px;
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%;
flex: 0 0 auto;
}
.confirm-screen-section-column {
flex: .5;
}
.confirm-screen-row {
display: flex;
flex-flow: row nowrap;
border-bottom: 1px solid $alto;
width: 100%;
align-items: center;
padding: 12px;
padding-left: 35px;
font-size: 16px;
line-height: 22px;
font-weight: 300;
}
.confirm-screen-row-detail {
font-size: 12px;
line-height: 16px;
color: $dusty-gray;
}
.confirm-screen-total-box {
background-color: $wild-sand;
padding: 20px;
padding-left: 35px;
border-bottom: 1px solid $alto;
.confirm-screen-label {
line-height: 18px;
}
.confirm-screen-row-detail {
color: $scorpion;
}
&__subtitle {
font-size: 12px;
line-height: 22px;
}
.confirm-screen-row-info {
font-size: 16px;
font-weight: 500;
line-height: 21px;
}
}
.confirm-screen-confirm-button {
height: 50px;
border-radius: 4px;
background-color: #02c9b1;
font-size: 16px;
color: $white;
text-align: center;
font-family: Roboto;
padding-top: 15px;
padding-bottom: 15px;
border-width: 0;
box-shadow: none;
flex: 1 0 auto;
font-weight: 300;
margin: 0 5px;
}
.btn-light.confirm-screen-cancel-button {
height: 50px;
background: none;
border: none;
opacity: 1;
font-family: Roboto;
border-width: 0;
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
box-shadow: none;
cursor: pointer;
flex: 1 0 auto;
font-weight: 300;
margin: 0 5px;
}
#pending-tx-form {
flex: 1 0 auto;
position: relative;
display: flex;
flex-flow: row nowrap;
background-color: $white;
padding: 12px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
width: 100%;
@media screen and (max-width: $break-small) {
border-top: 1px solid $alto;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}