mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
f9ac557c8e
## Addresses #11356 Images of 3 fixed modals referenced in the issue: <img width="1235" alt="Screenshot 2023-05-12 at 4 11 52 PM" src="https://github.com/fleetdm/fleet/assets/61553566/098081c7-15d4-4009-92a0-7a2e14ffaab1"> <img width="1235" alt="Screenshot 2023-05-12 at 4 12 50 PM" src="https://github.com/fleetdm/fleet/assets/61553566/7d0f268d-f2dc-4686-a64d-94e28a94c717"> <img width="1235" alt="Screenshot 2023-05-12 at 4 13 26 PM" src="https://github.com/fleetdm/fleet/assets/61553566/d486b005-1344-4656-adec-c4929332816b"> ## Implemented: - [x] Updated global modal styles for consistency - [x] Add optional "width" prop to `Modal` - [x] Misc cleanup: - [x] Restore missing padding from inverse-alert buttons - [x] Improve naming, lots of cleanup - [x] More coming in separate PR - [x] Check each of the following modals, define `width` where necessary: - [x] Add hosts - [x] EnrollSecret - [x] Also fix misaligned icons - [x] SecretEditor - [x] DeleteSecret - [x] ShowQuery - [x] AddIntegration - [x] DeleteIntegration - [x] EditIntegration - [x] EditTeam - [x] RequestCSR - [x] HostStatusWebhook - [x] CreateTeam - [x] DeleteTeam - [x] EditTeam - [x] AddMember - [x] RemoveMember - [x] CreateUser - [x] DeleteUser - [x] EditUser - [x] Also fix randomly shorter 'Password' field - [x] ResetPassword - [x] ResetSessions - [x] WelcomeHost - [x] DeletHost - [x] TransferHost - [x] POlicyDetails - [x] AutoEnrollMdm - [x] Info - [x] ManualEnrollMdm - [x] ResetKey - [x] BootstrapPackage - [x] DiskEncryption - [x] OSPOlicy - [x] SelectQuery - [x] UnenrollMdm - [x] MacSettings - [x] DeleteLabel - [x] EditCOlumns - WIP, cannot QA yet (cc @ghernandez345): - DeleteScript - RerunScript - [x] DeleteProfile - [x] DeletePackage - allow to conform to default "m" width, 650px - [x] PackQueryEditor - allow to conform to default "m" width - [x] RemovePackQuery - allow to conform to default "m" width - [x] DeletePack - allow to conform to default "m" width - [x] AddPolicy - [x] DeletePolicy - allow to conform to default "m" width - [x] NewPolicy (now "SaveNewPolicyModal") - allow to conform to default "m" width - [x] DeleteQuery - [x] NewQuery - allow to conform to default "m" width - [x] PreviewData - [x] RemoveScheduledQuery - [x] ScheduleEditor - [x] UserSettingsPage (aka "get API token") - [x] 2 x ManageAutomations – set to large - [x] 2 x PreviewPayload - allow to conform to default "m" width - [x] 2 x PreviewTicket - same as ManageAutomations ## Checklist for submitter - [x] Changes file added for user-visible changes in `changes/` - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
.modal {
|
|
&__background {
|
|
@include position(fixed, 0 0 0 0);
|
|
background-color: rgba($core-fleet-black, 0.4);
|
|
z-index: 101;
|
|
overflow: scroll;
|
|
display: flex;
|
|
justify-content: center;
|
|
animation: fade-in 150ms ease-out;
|
|
}
|
|
|
|
&__content {
|
|
margin-top: $pad-large;
|
|
font-size: $x-small;
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
|
|
&::placeholder {
|
|
font-size: $x-small;
|
|
font-style: italic;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
.modal-cta-wrap {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
margin-top: $pad-large;
|
|
gap: $pad-medium;
|
|
}
|
|
}
|
|
|
|
&__ex {
|
|
text-decoration: none;
|
|
padding-left: $pad-xsmall;
|
|
|
|
.button::after {
|
|
content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png");
|
|
transform: scale(0.5);
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.button:hover::after {
|
|
content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png");
|
|
transform: scale(0.5);
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
font-size: $large;
|
|
font-weight: $regular;
|
|
text-align: left;
|
|
padding-bottom: $pad-xsmall;
|
|
border-bottom: 1px solid $ui-fleet-black-10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&__modal_container {
|
|
@include position(absolute, 22px null null null);
|
|
box-sizing: border-box;
|
|
background-color: $core-white;
|
|
padding: $pad-xxlarge;
|
|
border-radius: 8px;
|
|
animation: scale-up 150ms ease-out;
|
|
|
|
&__medium {
|
|
width: 650px;
|
|
}
|
|
&__large {
|
|
width: 800px;
|
|
}
|
|
&__xlarge {
|
|
width: 850px;
|
|
}
|
|
&__auto {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|