fleet/frontend/components/queries/QueryResultsTable/_styles.scss

142 lines
2.4 KiB
SCSS
Raw Normal View History

.query-results-table {
display: flex;
flex-direction: column;
background-color: $white;
padding: $pad-base;
width: 100%;
min-height: calc(500px + (#{$pad-base} * 2));
box-sizing: border-box;
max-height: 75vh;
2017-02-24 23:01:43 +00:00
&__button-wrap {
@include clearfix;
}
&__export-btn {
float: right;
}
&__filter-icon {
&--is-active {
color: $core-blue;
}
}
&__progress-details {
display: inline-block;
width: 378px;
}
&__table-wrapper {
display: flex;
flex-grow: 1;
border: solid 1px $ui-borders;
border-radius: 3px;
box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
overflow: scroll;
2017-02-24 23:01:43 +00:00
margin-top: 30px;
min-height: 400px;
width: 100%;
2017-02-24 23:01:43 +00:00
.kolide-spinner {
align-self: center;
2017-02-24 23:01:43 +00:00
}
.no-results-message {
flex-grow: 1;
align-self: center;
2017-02-24 23:01:43 +00:00
text-align: center;
}
}
&__table {
border-collapse: collapse;
color: $core-dark-blue-grey;
font-size: $small;
width: 100%;
}
thead {
background-color: $core-light-blue-grey;
color: $core-black;
text-align: left;
th {
padding: $pad-small $pad-xsmall;
min-width: 125px;
span {
white-space: nowrap;
.kolidecon {
margin-right: 5px;
}
}
2017-01-09 23:13:52 +00:00
}
.input-field {
width: 100%;
}
}
tbody {
background-color: $white;
td {
padding: $pad-xsmall;
2017-01-09 23:13:52 +00:00
}
tr {
&:nth-child(even) {
background-color: $core-light-blue-grey;
2017-01-09 23:13:52 +00:00
}
}
}
2017-02-24 23:01:43 +00:00
&--full-screen {
animation: growFullScreen 500ms;
animation-fill-mode: forwards;
border-radius: 3px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
border: solid 1px $ui-borders;
2017-02-24 23:01:43 +00:00
z-index: 99;
.query-progress-details__run-btn {
display: none;
}
}
&--shrinking {
animation: shrinkFullScreen 500ms;
animation-fill-mode: forwards;
z-index: 99;
}
&__fullscreen-btn {
float: right;
margin-left: 15px;
}
}
@keyframes growFullScreen {
2017-02-24 23:01:43 +00:00
100% {
top: $pad-half;
right: $pad-half;
bottom: $pad-half;
left: calc(#{$nav-tablet-width} + #{$pad-half});
max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-half} - #{$pad-half});
max-height: 100vh;
}
}
@keyframes shrinkFullScreen {
2017-02-24 23:01:43 +00:00
0% {
top: $pad-half;
right: auto;
bottom: auto;
left: $pad-half;
max-width: 100vw;
max-height: 100vh;
}
}