mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
f099b2ae22
* Creates new PackComposerPage at /packs/new * Creates PackForm component * Adds PackForm to PackComposerPage * Creates QueriesListItem * Creates QueriesList * Creates QueriesListWrapper * Get all queries when the Packs Composer Page loads * Form HOC handles updates to formData prop * Creates form to configure scheduled queries * QueriesListWrapper renders ConfigurePackQueryForm * search queries input filters queries list * Empty state text * create pack when user submits the new pack form * Adds Edit pack page to /packs/:pack_id/edit * API client - get scheduled queries for a pack * API client - create scheduled query * Redux config for scheduled queries * Remove scheduled queries from packs * Add labels to pack on create * Add disabled state to the select targets dropdown * Adds edit route and pushes to new route on edit click * Adds cancel button to edit pack form * Adds Checkbox that selects all scheduled queries in table
180 lines
3.2 KiB
SCSS
180 lines
3.2 KiB
SCSS
.user-block {
|
|
@include transition(all 300ms ease-in-out);
|
|
background-color: $white;
|
|
display: inline-block;
|
|
height: 390px;
|
|
margin-left: 30px;
|
|
margin-top: 30px;
|
|
position: relative;
|
|
width: 240px;
|
|
box-shadow: 0 2px 12px 0 rgba(102, 105, 111, 0.12);
|
|
border: solid 0.5px rgba(156, 163, 172, 0.35);
|
|
border-radius: 2px;
|
|
|
|
&--invited {
|
|
border: 1px dashed $brand;
|
|
}
|
|
|
|
&--disabled {
|
|
background-color: $bg-medium;
|
|
}
|
|
|
|
&__header {
|
|
@include transition(all 300ms ease-in-out);
|
|
background-color: $bg-light;
|
|
border-bottom: 1px solid $accent-light;
|
|
color: $text-ultradark;
|
|
height: 51px;
|
|
margin-bottom: $pad-xsmall;
|
|
text-align: center;
|
|
width: 100%;
|
|
border-radius: 2px 2px 0 0;
|
|
|
|
&--admin {
|
|
background-color: $brand;
|
|
color: $white;
|
|
}
|
|
|
|
&--user {
|
|
background-color: $white;
|
|
color: $text-ultradark;
|
|
}
|
|
|
|
&--invited {
|
|
background-color: #f9f0ff;
|
|
color: #515762;
|
|
}
|
|
|
|
&--disabled {
|
|
background-color: $text-light;
|
|
color: $text-ultradark;
|
|
}
|
|
}
|
|
|
|
&__header-name {
|
|
line-height: 51px;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: $light;
|
|
font-size: $base;
|
|
}
|
|
|
|
&__details {
|
|
padding: 0 $pad-large;
|
|
|
|
.Select {
|
|
position: absolute;
|
|
bottom: $pad-large;
|
|
width: calc(239px - (#{$pad-large} * 2));
|
|
}
|
|
}
|
|
|
|
&__avatar {
|
|
@include size(100px);
|
|
@include transition(all 300ms ease-in-out);
|
|
border: 1px solid $text-medium;
|
|
filter: none;
|
|
display: block;
|
|
margin: 0 auto;
|
|
|
|
&--enabled {
|
|
border: 1px solid $brand;
|
|
}
|
|
}
|
|
|
|
&__status-wrapper {
|
|
border-top: 1px solid $border-medium;
|
|
border-bottom: 1px solid $border-medium;
|
|
margin-top: $pad-xsmall;
|
|
padding: $pad-xsmall 0;
|
|
}
|
|
|
|
&__status-label {
|
|
@include transition(color 300ms ease-in-out);
|
|
float: left;
|
|
font-weight: $bold;
|
|
font-size: $medium;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&__status-text {
|
|
@include transition(color 300ms ease-in-out);
|
|
float: right;
|
|
text-transform: uppercase;
|
|
font-weight: $light;
|
|
font-size: $medium;
|
|
letter-spacing: 1px;
|
|
|
|
&--invited {
|
|
color: $brand;
|
|
}
|
|
|
|
&--enabled {
|
|
color: $success;
|
|
}
|
|
|
|
&--disabled {
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
&__username {
|
|
@include transition(color 300ms ease-in-out);
|
|
color: $text-medium;
|
|
font-size: $medium;
|
|
text-transform: uppercase;
|
|
line-height: $larger;
|
|
margin: 0;
|
|
letter-spacing: 1px;
|
|
|
|
&--enabled {
|
|
color: $brand;
|
|
}
|
|
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__position {
|
|
@include ellipsis;
|
|
font-size: $small;
|
|
line-height: $larger;
|
|
margin: 0;
|
|
letter-spacing: 0.5px;
|
|
color: $text-ultradark;
|
|
font-weight: $light;
|
|
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__email {
|
|
@include transition(all 300ms ease-in-out);
|
|
color: $link;
|
|
font-size: $small;
|
|
line-height: $larger;
|
|
margin: 0;
|
|
|
|
&--disabled {
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
&__last-seen {
|
|
font-size: $mini;
|
|
line-height: $larger;
|
|
margin: 0;
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
.revoke-invite {
|
|
position: absolute;
|
|
width: 189px;
|
|
bottom: 43px;
|
|
}
|