diff --git a/src/index.css b/src/index.css index bdbbd9c..4a1e0ab 100644 --- a/src/index.css +++ b/src/index.css @@ -19,12 +19,12 @@ background-color: #fff3f6; border-color: #f3e0e0; color: #a95a5a; - box-shadow: inset 0 1px 3px 0 rgba(146, 62, 62, .05); + box-shadow: inset 0 1px 3px 0 rgba(146, 62, 62, 0.05); } } } - &[contentEditable=true][data-placeholder]::before{ + &[contentEditable="true"][data-placeholder]::before { position: absolute; content: attr(data-placeholder); color: #707684; @@ -32,15 +32,14 @@ opacity: 0; } - &[contentEditable=true][data-placeholder]:empty { - + &[contentEditable="true"][data-placeholder]:empty { &::before { opacity: 1; } &:focus::before { - opacity: 0; - } + opacity: 0; + } } } @@ -72,13 +71,13 @@ &--rendered { background: #fff; - border: 1px solid #E9E9E9; + border: 1px solid #e9e9e9; border-radius: 5px; will-change: filter; animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); &:hover { - box-shadow: 0 0 3px rgba(0,0,0, .16); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); } } } @@ -110,7 +109,7 @@ font-size: 13px; color: #595959; line-height: 1.25; - height:2rem; + height: 2rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -119,11 +118,20 @@ &__anchor { font-size: 13px; - color: #F44545; + color: #f44545; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + + &.highlight { + .link-tool__image { + flex-direction: column; + width: 100%; + height: auto; + aspect-ratio: 4/3; + } + } } @keyframes link-in {