empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Restyle actions dropdown on host details (#9865)

Browse Source 
Apply styling as directed in Figma for #8709
This commit is contained in:
Luke Heath 2023-02-16 04:32:06 -06:00 committed by GitHub
parent ca7e907659
commit 9cf0cac674
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 96 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/_styles.scss
View File

@ -1,3 +1,97 @@
.host-actions-dropdown {
width: 204px
}
.form-field {
margin: 0;
}
.Select {
position: relative;
border: 0;
height: auto;
&.is-focused,
&:hover {
border: 0;
}
&.is-focused:not(.is-open) {
.Select-control {
background-color: initial;
}
}
.Select-control {
display: flex;
background-color: initial;
height: auto;
justify-content: space-between;
border: 0;
cursor: pointer;
&:hover {
box-shadow: none;
}
&:hover .Select-placeholder {
color: $core-vibrant-blue;
}
.Select-placeholder {
color: $core-fleet-black;
font-size: 14px;
line-height: normal;
padding-left: 0;
margin-top: 1px;
}
.Select-input {
height: auto;
}
}
.Select-multi-value-wrapper {
width: 55px;
}
.Select-placeholder {
display: flex;
align-items: center;
}
.Select-menu-outer {
margin-top: $pad-xsmall;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border-radius: $border-radius;
z-index: 6;
overflow: hidden;
border: 0;
width: 188px;
left: unset;
top: unset;
max-height: 220px;
padding: $pad-small;
position: absolute;
left: -120px;
}
.Select-arrow {
transition: transform 0.25s ease;
}
&:not(.is-open) {
.Select-control:hover .Select-arrow {
content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
}
}
&.is-open {
.Select-control .Select-placeholder {
color: $core-vibrant-blue;
}
.Select-arrow {
transform: rotate(180deg);
}
}
}
}