mirror of
https://github.com/empayre/fleet.git
synced 2024-11-07 09:18:59 +00:00
49e71e4ed6
- Add new PNG files for the new icons in the left side navigation and the right side labels on the Hosts page. - Rename the old `<Icon />` component to `<KolideIcon />` and create a new `<Icon />` component. The ultimate goal is to get rid of the `<KolideIcon />` and `<PlatformIcon />` components and use the encompassing `<Icon />` component for all icons. The full transition will be made when we have icon assets to replace all the kolide icons and platform icons. Currently, we don't. - Rename the `icon_name_for_label.js` utility to `icon_name.js` because the utility now includes `iconNameForLabel()` and `iconNameForPlatform()` functions. - Fixes issue #127.
114 lines
1.6 KiB
SCSS
114 lines
1.6 KiB
SCSS
.manage-hosts {
|
|
min-height: 90vh;
|
|
|
|
.header-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__text {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
&__title {
|
|
font-size: $large;
|
|
|
|
.kolidecon {
|
|
color: $core-medium-blue-grey;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.kolidecon-success-check {
|
|
color: $success;
|
|
}
|
|
|
|
.kolidecon-offline {
|
|
color: $alert;
|
|
}
|
|
|
|
.kolidecon-mia {
|
|
color: $core-black;
|
|
}
|
|
|
|
.kolidecon-clock {
|
|
color: $warning;
|
|
}
|
|
}
|
|
|
|
&__label-actions {
|
|
|
|
button {
|
|
&:first-child {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
margin: 0 0 16px;
|
|
|
|
h2 {
|
|
text-transform: uppercase;
|
|
color: $core-dark-blue-grey;
|
|
font-weight: $regular;
|
|
font-size: 16px;
|
|
}
|
|
|
|
p {
|
|
color: $core-medium-blue-grey;
|
|
margin: 0;
|
|
font-size: $x-small;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
&__topper {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
&__host-count {
|
|
font-size: $x-small;
|
|
font-weight: $bold;
|
|
color: $core-black;
|
|
margin: 0;
|
|
}
|
|
|
|
&__modal {
|
|
p {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
&__modal-buttons {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
|
|
.button--alert {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
&__toggle-view {
|
|
.kolidecon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: 12px;
|
|
fill: $ui-medium-grey;
|
|
}
|
|
|
|
&--active {
|
|
.kolidecon {
|
|
fill: $core-purple;
|
|
}
|
|
}
|
|
}
|
|
}
|