Use CSS modules for styling the debug icons preview page

This commit is contained in:
Belén Albeza 2024-06-21 14:16:53 +02:00
parent 9a2ee806e4
commit cd8e2540de
6 changed files with 108 additions and 107 deletions

View file

@ -34,6 +34,5 @@
// Partials
//#################################################
@import "main/partials/debug-icons-preview";
@import "main/partials/loader";
@import "main/partials/workspace";

View file

@ -1,70 +0,0 @@
.debug-preview {
display: flex;
flex-direction: column;
overflow: scroll;
height: 100%;
h1 {
color: white;
font-size: 24px;
display: block;
width: 100vw;
margin: 12px;
}
}
.debug-icons-preview {
display: flex;
flex-wrap: wrap;
h2 {
color: white;
font-size: 16px;
display: block;
width: 100vw;
margin: 12px;
}
.subtitle-old {
color: #ff3277;
}
.icon-item,
.cursor-item,
.icon-item-old {
padding: 10px;
display: flex;
flex-direction: column;
width: 120px;
height: 120px;
margin: 10px;
align-items: center;
svg {
width: 100%;
height: 100%;
min-width: 16px;
min-height: 16px;
fill: none;
color: transparent;
stroke: #91fadb;
}
span {
color: white;
max-width: 100px;
overflow: hidden;
font-size: 12px;
margin-top: 4px;
word-break: break-word;
min-height: 40px;
}
}
.cursor-item div,
.icon-item-old svg {
stroke: #aab5ba;
}
.cursor-item {
height: auto;
}
}