vault/ui/app/styles/components/selectable-card-container.scss
Kianna 11f6aad2b2
ui: VAULT-6511 PKI Overview Page (#18599)
* Inital pki overview page code setup

* Add more properties to pki-overview

* Remove previous selectable card component and update template

* Add capability check for roles and issuers

* Add acceptance tests for overview page

* Update SelectableCardForm component

* Code refactor!

* Add selectable-card-form test

* More code cleanup and move function to test helper file

* Address most feedback. Pending refactor of issue certificate card!

* Add integration test

* Moves form to SelectableCard and add tests

* Add jsdoc props to SelectableCard and fix placeholder

* Move back SelectableCard

* Covert to typescript and finish up tests

* Dont use try catch for hasConfig

* Add overview card test

* More overview card tests

* Address feedback!
2023-01-17 13:30:31 -08:00

41 lines
964 B
SCSS

.selectable-card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-template-rows: 1fr;
grid-gap: 2rem;
&.one-card {
max-width: 33%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
}
}
.selectable-card-container.has-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(2, 1fr);
grid-gap: 2rem;
@include until($mobile) {
grid-template-columns: 2fr;
}
.selectable-card.is-grid-container {
display: grid;
grid-template-columns: 2fr 0.5fr;
grid-template-rows: 1fr 2fr 0.5fr;
padding: $spacing-l 0 14px $spacing-l; // modify bottom spacing to better align with other cards
}
}
.selectable-card-container.has-grid.has-two-col-grid {
grid-template-columns: 2fr 2fr;
grid-template-rows: none;
}
.selectable-card-container.has-grid.has-three-col-grid {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: none;
}