exadel-inc/esl

View on GitHub
packages/esl-website/src/esl-events-demo/log-area/log-area.less

Summary

Maintainability
Test Coverage
@import (reference) '../../common/variables.less';
 
.esl-d-log-area {
touch-action: none;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 200px;
min-height: 300px;
position: relative;
overflow: auto;
 
padding: 1rem;
 
color: @body-fg;
background-color: @body-bg;
border: @body-fg 1px solid;
border-radius: 4px;
box-shadow: 0 2px 4px 0 fadein(@body-fg, 0.3);
 
user-select: none;
 
> .log-item {
transition: opacity 0.5s linear;
margin-bottom: 5px;
}
> .log-item.removed {
opacity: 0;
}
 
// Placeholder
&[placeholder]::before {
content: attr(placeholder);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: @body-fg;
font-size: 2rem;
opacity: 0.4;
pointer-events: none;
}
}