mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
62c41fa5b2
+ Update bubble component to use for displaying roles in REST API docs + Update callout box to reflect styles in the product, and create a new mixin for consistent styling (Adding the actual bubbles to the REST API docs will be done in a separate PR, figured we could get these changes merged in first since it might take awhile to verify that the role permissions are documented accurately.) #### Screenshot of style changes in the REST API docs: <img width="1057" height="444" alt="Screenshot 2026-04-15 at 5 59 44 PM" src="https://github.com/user-attachments/assets/1478b4d0-f610-4f87-a72f-2b08af917484" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Role bubbles can be clickable links for specific roles and show hover interactions. * **Style** * Redesigned bubble visuals (typography, padding, border, radius, colors) with distinct role variants. * Added hover transition for role-linked bubbles. * Consolidated "tip" block styling across the site for consistent layout and spacing. * Minor spacing tweak for bubbles in documentation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Eric <eashaw@sailsjs.com>
58 lines
1.3 KiB
Text
Vendored
58 lines
1.3 KiB
Text
Vendored
|
|
/**
|
|
* <bubble>
|
|
*
|
|
* App-wide styles for our bubbles.
|
|
*/
|
|
|
|
[parasails-component='bubble'] {
|
|
span {
|
|
color: @core-fleet-black-75;
|
|
display: inline-block;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
line-height: 24px;
|
|
vertical-align: middle;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
background-color: #fff;
|
|
border: 1px solid #C5C7D1;
|
|
font-weight: bold;
|
|
padding-top: 1px;
|
|
&.admin {
|
|
background-color: rgba(61, 182, 123, 20%);
|
|
border-color: rgba(61, 182, 123, 20%);
|
|
}
|
|
&.maintainer {
|
|
background-color: rgba(61, 182, 123, 20%);
|
|
border-color: rgba(61, 182, 123, 20%);
|
|
}
|
|
&.technician {
|
|
background-color: rgba(61, 182, 123, 20%);
|
|
border-color: rgba(61, 182, 123, 20%);
|
|
}
|
|
&.observer {
|
|
background-color: rgba(61, 182, 123, 20%);
|
|
border-color: rgba(61, 182, 123, 20%);
|
|
}
|
|
&.observer-plus {
|
|
background-color: rgba(61, 182, 123, 20%);
|
|
border-color: rgba(61, 182, 123, 20%);
|
|
}
|
|
&.gitops {
|
|
background-color: rgba(61, 182, 123, 20%);
|
|
border-color: rgba(61, 182, 123, 20%);
|
|
}
|
|
}
|
|
|
|
&.role-link {
|
|
.transition(all 250ms);
|
|
display: inline-block;
|
|
&:hover {
|
|
span {
|
|
background-color: rgba(61, 182, 123, 40%);
|
|
border-color: rgba(61, 182, 123, 40%);
|
|
}
|
|
}
|
|
}
|
|
}
|