zcash-grant-system/frontend/client/components/Profile/ProfileEdit.less

95 lines
1.4 KiB
Plaintext

@import '~styles/variables.less';
@small-query: ~'(max-width: 500px)';
.ProfileEditShade {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 900;
}
.ProfileEdit {
position: relative;
z-index: 901;
display: flex;
align-items: center;
padding: 1rem;
margin: -1rem;
background: #fff;
border-radius: 0.2rem;
@media @small-query {
flex-direction: column;
}
&.is-editing {
align-items: flex-start;
}
&-info {
flex: 1;
.ant-form-item {
margin-bottom: 0.25rem;
}
.ant-btn {
margin-right: 0.5rem;
&:last-child {
margin: 0;
}
}
}
&-socialButton {
position: relative;
text-overflow: ellipsis;
overflow: hidden;
&-text,
&-delete {
transition: transform 200ms ease, opacity 200ms ease;
}
&-delete {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%) translateY(-3rem);
opacity: 0;
}
&:hover {
&.is-delete {
border-color: @error-color;
color: @error-color;
}
.ProfileEdit-socialButton {
&-text {
transform: translateY(3rem);
opacity: 0;
}
&-delete {
transform: translate(-50%, -50%);
opacity: 1;
}
}
}
}
&-alert {
margin-top: 1rem;
}
.ant-alert {
margin-bottom: 0.75rem;
}
}