Styling
Copy and paste this in a
src/styles.css
file right next to src/index.html
and src/index.js
.body {
color: white;
font-family: sans-serif;
}
.area {
border: 1px solid #FFFFFF;
border-radius: 10px;
transition: border-color 200ms ease;
}
.area-title {
position: absolute;
top: -2em;
text-align: center;
width: 100%;
}
.nnc {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
.nnc-recognized-class {
position: absolute;
bottom: -2em;
text-align: center;
width: 100%;
}
.mbs {
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
}
.mbs-object {
position: absolute;
border: 3px solid;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 50px;
height: 50px;
animation: grow 1s ease forwards;
}
@keyframes grow {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Then import the file in
index.js
to let Webpack know about it and apply the styles. It will take care of linking it in index.html
on its own when the time comes.// index.js
import lampix from '@lampix/core';
import './styles.css';
Last modified 4yr ago