mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
759a69b5b7
- Replace uses of deprecated Bourbon helpers with raw CSS
- Add autoprefixer into the build chain to prefix the now removed helpers
This process was achieved by running through each of the deprecation warnings and using the following bash function to replace it in all files:
```
function bourbon-deprecate() {
grep -rl "@include $1" ./frontend --exclude-dir=.git | xargs sed -i '' -E "s/@include $1[(](.*)[)]/$1: \1/g"
}
```
For some helpers, this did not result in valid CSS, so manual modifications were made.
Closes #1189 #1274
132 lines
2.2 KiB
SCSS
132 lines
2.2 KiB
SCSS
$base-class: 'panel-group-item';
|
|
|
|
@mixin selected-hover($color: $brand) {
|
|
&:hover {
|
|
color: $color;
|
|
background-color: rgba($color, 0.1);
|
|
|
|
.#{$base-class}__icon,
|
|
.#{$base-class}__count {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
&.#{$base-class}--selected {
|
|
color: $white;
|
|
background-color: $color;
|
|
|
|
.#{$base-class}__icon,
|
|
.#{$base-class}__count {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$base-class} {
|
|
transition: color 75ms ease-in-out, background 75ms ease-in-out;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
line-height: 2.25;
|
|
letter-spacing: 0.5px;
|
|
font-weight: $normal;
|
|
color: $text-medium;
|
|
text-align: left;
|
|
padding: 0 $pad-large;
|
|
|
|
&__flexy {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__icon {
|
|
transition: color 75ms ease-in-out;
|
|
margin-right: 23px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
&__name {
|
|
@include ellipsis(80%);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&__description {
|
|
font-size: 13px;
|
|
margin-left: 4px;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
&__count {
|
|
transition: color 75ms ease-in-out;
|
|
font-weight: $bold;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&__all {
|
|
@include selected-hover($brand);
|
|
}
|
|
|
|
&__status {
|
|
&--offline {
|
|
@include selected-hover($alert);
|
|
|
|
.#{$base-class}__count,
|
|
.#{$base-class}__icon {
|
|
color: $alert;
|
|
}
|
|
}
|
|
|
|
&--new {
|
|
@include selected-hover($warning);
|
|
|
|
.#{$base-class}__count,
|
|
.#{$base-class}__icon {
|
|
color: $warning;
|
|
}
|
|
}
|
|
|
|
&--online {
|
|
@include selected-hover($success);
|
|
|
|
.#{$base-class}__count,
|
|
.#{$base-class}__icon {
|
|
color: $success;
|
|
}
|
|
}
|
|
|
|
&--mia {
|
|
@include selected-hover($text-ultradark);
|
|
|
|
.#{$base-class}__count,
|
|
.#{$base-class}__icon {
|
|
color: $text-ultradark;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__platform {
|
|
@include selected-hover($link);
|
|
text-transform: none;
|
|
|
|
.#{$base-class}__icon {
|
|
color: $text-light;
|
|
}
|
|
|
|
&--macos {
|
|
.#{$base-class}__icon {
|
|
margin-right: 24px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__custom {
|
|
@include selected-hover($brand);
|
|
font-size: 14px;
|
|
text-transform: none;
|
|
|
|
.#{$base-class}__icon {
|
|
color: $silver;
|
|
}
|
|
}
|
|
}
|