Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Flash message x icon visible (#992)

Browse source 
Closes #991
This commit is contained in:
RachelElysia 2021-06-07 15:48:52 -04:00 committed by GitHub
parent 225500ad28
commit 2b9aa5ac7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/icon-close-fleet-purple-16x16@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 416 B

BIN
assets/images/icon-close-white-16x16@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 282 B

14
frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
View file

@ -41,13 +41,13 @@ const FlashMessage = ({
)}
</div>
<div className={`${baseClass}__action`}>
<Button
className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
variant="unstyled"
onClick={onRemoveFlash}
>
<FleetIcon name="x" />
</Button>
<div className={`${baseClass}__ex`}>
<Button
className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
variant="unstyled"
onClick={onRemoveFlash}
/>
</div>
</div>
</div>
);

23
frontend/components/flash_messages/FlashMessage/_styles.scss
View file

@ -43,10 +43,11 @@
span {
margin-left: 15px;
margin-right: 15px;
font-size: $small;
}
.fleeticon {
font-size: $large;
font-size: $small;
}
}
@ -63,15 +64,33 @@
cursor: pointer;
text-align: center;
margin-left: 15px;
height: 37px;
.fleeticon {
transition: color 150ms ease-in-out;
color: $core-fleet-blue;
font-size: $large;
font-size: $small;
&:hover {
color: $core-white;
}
}
}
&__ex {
text-decoration: none;
.button::after {
content: url("../assets/images/icon-close-white-16x16@2x.png");
transform: scale(0.5);
border-radius: 0px;
z-index: 4;
}
.button:hover::after {
content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png");
transform: scale(0.5);
border-radius: 0px;
}
}
}