Fix display notification close button style (#1185)

This commit is contained in:
toasted-nutbread 2020-12-30 23:00:52 -05:00 committed by GitHub
parent 4650f0b542
commit 32f233acfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 14 deletions

View File

@ -1447,7 +1447,10 @@ button.action-button[data-icon=source-term]::before {
flex: 1 1 auto; flex: 1 1 auto;
padding-right: 0.5em; padding-right: 0.5em;
} }
.footer-notification-close-button { button.footer-notification-close-button,
button.footer-notification-close-button:focus,
button.footer-notification-close-button:hover,
button.footer-notification-close-button:active {
flex: 0 0 auto; flex: 0 0 auto;
background-color: transparent; background-color: transparent;
margin: -0.25em; margin: -0.25em;
@ -1456,21 +1459,12 @@ button.action-button[data-icon=source-term]::before {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
font-size: inherit; font-size: inherit;
box-shadow: none;
} }
.footer-notification-close-button-icon { .footer-notification-close-button-icon {
display: block; display: block;
width: calc(12em / var(--font-size-no-units)); width: calc(16em / var(--font-size-no-units));
height: calc(12em / var(--font-size-no-units)); height: calc(16em / var(--font-size-no-units));
mask-repeat: no-repeat;
mask-position: center center;
mask-mode: alpha;
mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
mask-image: url(/mixed/img/cross.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-mode: alpha;
-webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
-webkit-mask-image: url(/mixed/img/cross.svg);
background-color: var(--notification-text-color); background-color: var(--notification-text-color);
} }

View File

@ -181,6 +181,7 @@
.icon[data-icon=collapse] { --icon-image: url(/mixed/img/collapse.svg); } .icon[data-icon=collapse] { --icon-image: url(/mixed/img/collapse.svg); }
.icon[data-icon=expand] { --icon-image: url(/mixed/img/expand.svg); } .icon[data-icon=expand] { --icon-image: url(/mixed/img/expand.svg); }
.icon[data-icon=window] { --icon-image: url(/mixed/img/window.svg); } .icon[data-icon=window] { --icon-image: url(/mixed/img/window.svg); }
.icon[data-icon=cross] { --icon-image: url(/mixed/img/cross.svg); }
/* Checkbox */ /* Checkbox */

View File

@ -127,7 +127,7 @@
<!-- Extra --> <!-- Extra -->
<template id="footer-notification-template"><div class="footer-notification"> <template id="footer-notification-template"><div class="footer-notification">
<div class="footer-notification-body"></div> <div class="footer-notification-body"></div>
<button class="footer-notification-close-button"><span class="footer-notification-close-button-icon"></span></button> <button class="footer-notification-close-button"><span class="footer-notification-close-button-icon icon" data-icon="cross"></span></button>
</div></template> </div></template>
<template id="profile-list-item-template"><label class="profile-list-item"> <template id="profile-list-item-template"><label class="profile-list-item">
<div class="profile-list-item-selection"><label class="radio"><input type="radio" class="profile-entry-is-default-radio" name="profile-entry-default-radio"><span class="radio-body"><span class="radio-border"></span><span class="radio-dot"></span></span></label></div> <div class="profile-list-item-selection"><label class="radio"><input type="radio" class="profile-entry-is-default-radio" name="profile-entry-default-radio"><span class="radio-body"><span class="radio-border"></span><span class="radio-dot"></span></span></label></div>