fleet/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
RachelElysia f6091509f4
Fleet UI: Side bar restyled, update UI for Team/Roles to match Figma (#1659)
* Style all settings side panels
* Add builtin label icons
* Update tests aligning jest userStub and adminUserStub
* Update tests adding cypress checks for user teams/roles
2021-08-16 12:25:51 -04:00

56 lines
1 KiB
SCSS

$base-class: "panel-group-item";
.#{$base-class} {
transition: color 75ms ease-in-out, background 75ms ease-in-out;
width: 100%;
font-size: $x-small;
font-weight: $regular;
color: $core-fleet-black;
text-align: left;
padding: 10px 0;
margin: 2px 0;
border-radius: 8px;
img {
width: 16px;
height: 16px;
margin-right: $pad-xsmall;
vertical-align: sub;
}
&.#{$base-class}--selected {
font-weight: $bold;
background-color: $ui-vibrant-blue-25;
.#{$base-class}__count {
font-weight: $bold;
}
}
&__flexy {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
&__name {
@include ellipsis(80%);
flex-grow: 1;
padding-left: $pad-medium;
}
&__description {
font-size: 13px;
margin-left: $pad-xsmall;
text-transform: lowercase;
}
&__count {
transition: color 75ms ease-in-out;
font-weight: $regular;
text-align: right;
padding-right: $pad-medium;
font-size: $x-small;
}
}