status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-04 07:34:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

update css using repeat

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-01-21 16:14:47 +02:00
parent 086e8956aa
commit 91970547f9
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
View File

@ -1,7 +1,8 @@
.osCardsContainer {
display: flex;
justify-content: space-between;
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(3, 1fr);
}
.osCard {
@ -10,8 +11,6 @@
padding: 12px 16px;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 16px;
flex-basis: calc(33.333% - 10px);
}
.osCardSelected {
@ -19,14 +18,23 @@
border: 1px solid #2a4af566;
}
@media (max-width: 900px) {
.osCard {
flex-basis: calc(50% - 10px);
@media (max-width: 1000px) {
.osCardsContainer {
grid-template-columns: repeat(2, 1fr);
}
.osCard:nth-child(3) {
width: 205%;
}
}
@media (max-width: 680px) {
@media (max-width: 750px) {
.osCardsContainer {
grid-template-columns: repeat(1, 1fr);
}
.osCard {
flex-basis: 100%;
width: 90%;
}
.osCard:nth-child(3) {
width: 90%;
}
}