diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css deleted file mode 100644 index 1f2af3f1..00000000 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css +++ /dev/null @@ -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; -} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css new file mode 100644 index 00000000..0e4b62d3 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css @@ -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%; + } +} diff --git a/src/pages/ValidatorOnboarding/layoutGradient.css b/src/pages/ValidatorOnboarding/layoutGradient.module.css similarity index 100% rename from src/pages/ValidatorOnboarding/layoutGradient.css rename to src/pages/ValidatorOnboarding/layoutGradient.module.css