fleet/frontend/components/DataSet/_styles.scss
Gabriel Hernandez 76e16f0ec2
UI for certificate details on host details and my device pages (#26380)
For #25464

Implements the UI for viewing certification details on the host details
and my device pages.

This includes:

**Certs card and table on host details and my device page**


![image](https://github.com/user-attachments/assets/e685e55f-d982-43a7-91ff-e6d033b758f5)

**Cert details modal**


![image](https://github.com/user-attachments/assets/4a1d7421-85b8-4b3e-a010-ea752e7c6bdf)

- includes some work around normalising the details section card header
styles on these pages.
- includes extending DataSet component to add a `horizontal` orientation
when rendering the data


> NOTE: We still need to integrate with the API endpoints when they are
ready.

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [ ] Added/updated automated tests
- [x] Manual QA for all new/changed functionality
2025-02-21 11:52:41 +00:00

29 lines
448 B
SCSS

.data-set {
font-size: $x-small;
&__horizontal {
display: flex;
gap: $pad-small;
}
// ff only
@-moz-document url-prefix() {
display: flex;
flex-direction: column;
gap: 6px;
}
dt {
font-weight: $bold;
display: flex;
gap: $pad-xsmall; // For deprecated sandbox icons
}
dd {
display: flex;
gap: $pad-small;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}