mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
1a245b858a
* state of device management page, chart component * add images * website: add charts.min.js, update layout, page script, and images * layout updates, component validation * add alt text, lint fixes * update image name * update bar-chart styles and layout * add empty href and link styles * Style overrides for mobile & tablet • Added style overrides for mobile and tablet. * Updated text Updated text for the following sections: • Introduction • Key findings • Part 1 * Updated text Updated text in the following sections: • Part 2 • Part 3 • Part 4 • Part 5 • Part 6 * Additional icon and text change • Added icon for GitOps • Repositioned text: The future of device management * Text change Removed "Takeaways" header from Part 6. * style changes • fixed some inconsistent headers (h3 to h2). • fixed margin bottom on new GitOps note. • Removed unneeded subsection div after removing "Takeaways" heading in my previous commit. * update chart styles, add update charts function, sticky navigation * lint fix * lint fix * Scroll navigation with header * text changes Updated chart titles to match the survey. * style tweaks Style tweaks to the charts. * add pdf Co-authored-by: Mike Thomas <mthomas@fleetdm.com>
85 lines
1.5 KiB
Plaintext
Vendored
85 lines
1.5 KiB
Plaintext
Vendored
|
|
/**
|
|
* <bar-chart>
|
|
*
|
|
* App-wide styles for our bar charts.
|
|
*/
|
|
|
|
[parasails-component='bar-chart'] {
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
|
|
[purpose='stacked-title'] {
|
|
font-size: 13px;
|
|
display: block;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
[purpose='divided-title'] {
|
|
font-size: 14px;
|
|
display: block;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
}
|
|
[purpose='subtitle'] {
|
|
font-size: 13px;
|
|
display: block;
|
|
padding-top: 4px;
|
|
font-weight: 400;
|
|
}
|
|
[purpose='chart'] {
|
|
width: 100%;
|
|
background: #E6E6E6;
|
|
border-radius: 4px;
|
|
overflow-x: hidden;
|
|
height: 8px;
|
|
[purpose='chart-fill'] {
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
[purpose='label-container']:last-child:not(:only-child) {
|
|
text-align: right;
|
|
}
|
|
|
|
[purpose='label'] {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
white-space: nowrap;
|
|
margin-right: 8px;
|
|
}
|
|
[purpose='range'] {
|
|
color: #8B8FA2;
|
|
span {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 769px) {
|
|
[purpose='label'] {
|
|
font-size: 12px;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 540px) {
|
|
[purpose='range'] {
|
|
span:nth-of-type(2n) {
|
|
display: none;
|
|
}
|
|
span:first-of-type, span:last-of-type {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 400px) {
|
|
[purpose='range'] {
|
|
span {
|
|
display: none;
|
|
}
|
|
span:first-of-type, span:last-of-type {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|