mirror of
https://github.com/fleetdm/fleet
synced 2026-05-21 16:08:47 +00:00
0f02fa012e
I notices we were reusing styles alot for the card like container UI so I created a reusable `Card` component The component is used like this: ```tsx // default card is white background <Card> <p>whatever JSX you want</p> </Card> <Card color="gray"> <p>whatever JSX you want</p> </Card> <Card color="yellow"> <p>whatever JSX you want</p> </Card> <Card color="purple"> <p>whatever JSX you want</p> </Card> ``` **white**  **gray**  **yellow**  **purple**  - [x] Manual QA for all new/changed functionality
23 lines
419 B
SCSS
23 lines
419 B
SCSS
.card {
|
|
border-radius: $border-radius;
|
|
border: 1px solid $ui-fleet-black-10;
|
|
padding: $pad-large;
|
|
|
|
&__white {
|
|
background-color: $core-white;
|
|
}
|
|
|
|
&__gray {
|
|
background-color: $ui-off-white;
|
|
}
|
|
|
|
&__purple {
|
|
background-color: $ui-vibrant-blue-10;
|
|
border-color: $ui-vibrant-blue-50;
|
|
}
|
|
|
|
&__yellow {
|
|
background-color: $ui-yellow-banner;
|
|
border-color: $ui-yellow-banner-outline;
|
|
}
|
|
}
|