fleet/frontend/pages/Homepage/cards/Software/_styles.scss
Martavis Parker 33c5f0651c
New tooltips! (#4326)
* Allow sort by more than one key

* created custom tooltip component

* remove unused code

* fixed style for more layouts

* added tooltip to query side panel

* tooltips added to setting form

* finished settings form

* added tooltip for perf impact table headers

* tooltip for pack table and user form

* tooltip on manage policies page

* tooltip for manage schedules

* tooltip for automations; spacing for form input

* tooltip for automations modal

* user form; fixed input with icon component

* more user form tooltips

* tooltip for homepage; style fixes

* replaced many more tooltips with new version

* added story for tooltip

* added position prop

* fixed tests

* re-work how we click react-select dropdowns

* forcing the update button click

* trying a blur

* fixed typo

* trying blur on another element

* temp check-in

* replaced tooltip from host details software

* more consolidation of tooltip use for software

* fixed settings flow test

Co-authored-by: Tomas Touceda <chiiph@gmail.com>
2022-02-28 13:25:06 -08:00

138 lines
2.5 KiB
SCSS

.home-software {
margin-top: $pad-large;
position: relative;
.software-link {
img {
transform: rotate(-90deg);
height: 16px;
width: auto;
vertical-align: middle;
}
}
.table-container {
min-height: 435px;
}
.data-table__wrapper {
overflow-x: auto;
}
.form-field--dropdown {
margin: 0;
}
.component__tabs-wrapper .table-container__header {
display: none;
}
&__software-modal {
width: 780px;
.data-table__wrapper {
margin-top: $pad-large;
}
}
&__empty-software {
margin: $pad-large auto 0;
h1 {
font-size: $small;
font-weight: $bold;
margin-bottom: $pad-medium;
}
p {
color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;
}
a {
color: $core-vibrant-blue;
font-size: $x-small;
font-weight: $bold;
text-decoration: none;
}
}
&__empty-software-modal {
width: 550px;
margin: $pad-large auto;
}
&__status_dropdown {
width: 219px;
.Select-menu-outer {
width: 364px;
max-height: 310px;
.Select-menu {
max-height: none;
}
}
.Select-value {
padding-left: $pad-medium;
padding-right: $pad-medium;
&::before {
display: inline-block;
position: absolute;
padding: 5px 0 0 0; // centers spin
content: url(../assets/images/icon-filter-black-16x16@2x.png);
transform: scale(0.5);
height: 26px;
left: 2px;
}
}
.Select-value-label {
padding-left: $pad-large;
font-size: $small !important;
}
}
.data-table-container {
.data-table__table {
table-layout: fixed;
thead {
.name__header {
width: 60%;
}
.version__header {
width: 30%;
padding-right: 0;
}
.hosts_count__header {
border-right: 0;
padding-right: 0;
width: 60px;
}
.id__header {
padding: 0;
border-left: 0;
width: 40px;
}
}
tbody {
.name__cell,
.version__cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.id__cell {
padding: 0;
width: 40px;
}
.vulnerabilities__cell {
img {
transform: scale(0.5);
}
}
}
}
}
.count-loading {
color: $ui-fleet-black-50;
}
.count-error {
color: $ui-error;
}
}