68 lines
1.1 KiB
SCSS
68 lines
1.1 KiB
SCSS
|
.InlineForm {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&.inBubble {
|
||
|
|
//...
|
||
|
|
}
|
||
|
|
|
||
|
|
&.inFloating {
|
||
|
|
position: absolute;
|
||
|
|
left: calc(100% + 1rem);
|
||
|
|
top: -0.8rem;
|
||
|
|
min-width: 64vw;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 4px 10px rgba(#000, 0.25);
|
||
|
|
|
||
|
|
button {
|
||
|
|
opacity: 1;
|
||
|
|
&:disabled,
|
||
|
|
&:disabled:hover {
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
padding: 6px 11px;
|
||
|
|
|
||
|
|
input {
|
||
|
|
margin: 0 12px 0 0;
|
||
|
|
padding: 0;
|
||
|
|
flex: 1;
|
||
|
|
border: none;
|
||
|
|
min-width: 200px;
|
||
|
|
display: block;
|
||
|
|
|
||
|
|
&::placeholder {
|
||
|
|
color: rgba(#000, 0.3);
|
||
|
|
}
|
||
|
|
&:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.linkError {
|
||
|
|
padding: 6px 11px;
|
||
|
|
color: red;
|
||
|
|
font-size: 0.7em;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -3rem;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 0;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 4px 10px rgba(#000, 0.25);
|
||
|
|
opacity: 0;
|
||
|
|
transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||
|
|
|
||
|
|
&.visible {
|
||
|
|
height: 32px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|