change css to modules

This commit is contained in:
Hristo Nedelkov 2024-01-19 11:11:57 +02:00
parent 75e6c5c410
commit a422ad2237
3 changed files with 32 additions and 36 deletions

View File

@ -1,36 +0,0 @@
.osCardsContainer {
display: grid;
grid-gap: 16px;
margin: 8px;
grid-template-columns: repeat(3, 1fr)
}
.osCardsContainer {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 601px) {
.osCardsContainer {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 901px) {
.osCardsContainer {
grid-template-columns: repeat(3, 1fr);
}
}
.osCard {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 16px;
padding: 12px 16px;
cursor: pointer;
min-width: 250px;
}
.osCard.selected {
background-color: #2a4af50d;
border: 1px solid #2a4af566;
}

View File

@ -0,0 +1,32 @@
.osCardsContainer {
display: flex;
justify-content: space-between;
}
.osCard {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 16px;
padding: 12px 16px;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 16px;
flex-basis: calc(33.333% - 10px);
}
.osCardSelected {
background-color: #2a4af50d;
border: 1px solid #2a4af566;
}
@media (max-width: 900px) {
.osCard {
flex-basis: calc(50% - 10px);
}
}
@media (max-width: 680px) {
.osCard {
flex-basis: 100%;
}
}