diff --git a/components/block-editors/list/index.less b/components/block-editors/list/index.less index 47255222..29046375 100644 --- a/components/block-editors/list/index.less +++ b/components/block-editors/list/index.less @@ -1,46 +1,47 @@ -ul { +label[for="dropdown"] + ul +{ list-style: none inside; margin: 0; padding: 0; -} - -label[for="dropdown"] + ul -{ - .tip.tip-remove { - float: right; - margin-top: -32px; - } + overflow: hidden; li { margin-bottom: 15px; - } + white-space: nowrap; + width: calc(~"100% + 50px"); - input { - width: 100%; - animation-duration: 3s; - animation-name: giveSpace; - } - - * - { - animation-fill-mode: forwards; - } - - input:focus { - animation-duration: 0.4s; - animation-name: giveSpace; - & + .tip.tip-remove { - animation-duration: 0.4s; - animation-name: blendIn; + > * { + display: inline-block; + animation-fill-mode: forwards; } - } - input:not(:focus) { - animation-duration: 0.4s; - animation-name: takeSpace; - & + .tip.tip-remove { - animation-duration: 0.4s; - animation-name: blendOut; + input { + width: calc(~"100% - 50px"); + animation-duration: 3s; + animation-name: giveSpace; + + &:not(:focus) { + animation-duration: 0.4s; + animation-name: takeSpace; + & + .tip.tip-remove { + animation-duration: 0.4s; + animation-name: blendOut; + } + } + + &:focus { + animation-duration: 0.4s; + animation-name: giveSpace; + & + .tip.tip-remove { + animation-duration: 0.4s; + animation-name: blendIn; + } + } + } + + .tip.tip-remove { + position: relative; + top: 3px; } } @@ -55,12 +56,12 @@ label[for="dropdown"] + ul } @keyframes giveSpace { - from {width: 100%;} - to {width: calc(~"100% - 32px");} + from {width: calc(~"100% - 50px");} + to {width: calc(~"100% - 50px - 32px");} } @keyframes takeSpace { - from {width: calc(~"100% - 32px");} - to {width: 100%;} + from {width: calc(~"100% - 50px - 32px");} + to {width: calc(~"100% - 50px");} } } diff --git a/static/styles/tips.less b/static/styles/tips.less index 37e40275..9cf33856 100644 --- a/static/styles/tips.less +++ b/static/styles/tips.less @@ -15,12 +15,14 @@ &.tip-remove { background-color: @red; border: 1px solid @mediumGrey; - font-size: @tipSize - 3; + font-size: @tipSize - 6; line-height: @tipSize; &:before, &:after { color: @white; - margin-left: 3px; + position: relative !important; + top: -1px !important; + left: 4px !important; } }