@ruliad-engr/forms
Version:
Forms fields, inputs, etc.
91 lines (90 loc) • 1.81 kB
CSS
.form-dropzone {
&__dropzone {
width: 100%;
background: var(--color-surface-secondary);
padding: 16px 24px;
border: none;
box-shadow: none;
z-index: 1;
outline: 0;
@mixin easing easeOutQuart, all, 0.2s;
@mixin text-m;
&:hover {
background: var(--color-surface-primary-hover);
}
^&__hint {
min-height: 160px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
cursor: pointer;
&-title {
color: var(--color-surface-text-primary);
padding: 0 0 8px 0;
margin: 0;
@mixin text-s;
@media (--mobile) {
padding: 0 0 4px 0;
}
& span {
@media (--mobile) {
display: none;
}
}
}
&-text {
color: var(--color-surface-text-secondary);
padding: 0;
margin: 0;
@mixin text-s;
}
}
}
&__thumb {
display: flex;
flex-flow: row wrap;
justify-content: center;
&-remove {
width: 100%;
color: red;
text-align: center;
margin: 0 0 16px 0;
cursor: pointer;
@mixin text-m;
}
&-item {
width: 100%;
@media (--mobile) {
width: 100%;
}
&-inner {
padding: 8px;
margin: 0 24px 24px 24px;
border: solid 1px #ccc;
overflow: hidden;
display: flex;
justify-content: center;
@mixin text-m;
}
}
}
&_state_focus {
^&__dropzone {
background: var(--color-surface-primary);
}
}
}
.form-dropzone {
&&_type_avatar {
width: 144px;
height: 144px;
border-radius: 50%;
overflow: hidden;
& .form-dropzone {
&__dropzone {
padding: 0;
}
}
}
}