zcash-grant-system/frontend/client/components/CreateFlow/index.less

154 lines
2.6 KiB
Plaintext

@import '~styles/variables.less';
@keyframes draft-notification-popup {
from {
opacity: 0;
transform: translateY(0.5rem);
}
to {
opacity: 0.3;
transform: translateY(0);
}
}
.CreateFlow {
padding: 2.5rem 2rem 8rem;
&-header {
max-width: 1200px;
padding: 0 1rem;
margin: 1rem auto 3rem;
&-title {
font-size: 2rem;
margin: 3rem auto 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
&-subtitle {
font-size: 1.4rem;
margin-bottom: 0;
opacity: 0.7;
text-align: center;
}
}
&-content {
padding-bottom: 2rem;
}
&-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
height: 7rem;
padding: 0 1rem;
background: #fff;
border-top: 1px solid #eee;
z-index: 1000;
&-help {
font-size: 1rem;
margin-right: 1rem;
max-width: 380px;
text-align: right;
}
&-button {
display: block;
height: 4rem;
line-height: 4rem;
width: 100%;
max-width: 12rem;
padding: 0;
margin: 0 0.5rem;
font-size: 1.4rem;
border: 1px solid #999;
color: #777;
background: transparent;
border-radius: 4px;
cursor: pointer;
transition-property: background, color, border-color, opacity;
transition-duration: 100ms;
transition-timing-function: ease;
&.is-primary {
background: @primary-color;
color: #fff;
border: none;
}
&:hover {
opacity: 0.8;
}
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.anticon {
font-size: 1.2rem;
margin-left: 0.2rem;
}
}
&-example {
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.08;
font-size: 1rem;
&:hover {
opacity: 0.5;
}
}
}
&-rfpAlert {
margin-bottom: 2rem;
.ant-radio-group {
display: block;
margin: 1.5rem 0 0 1.5rem;
.ant-radio-wrapper {
display: flex;
margin: 1rem 0;
span.ant-radio + * {
white-space: normal;
margin-top: -0.2rem;
}
}
}
}
&-draftNotification {
position: fixed;
bottom: 8rem;
right: 1rem;
text-align: right;
font-size: 0.8rem;
opacity: 0.3;
animation: draft-notification-popup 120ms ease 1;
&.is-error {
color: @error-color;
}
}
&-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}