Improve color of the popup close button #6
This commit is contained in:
parent
9bc8dfbdfc
commit
be08136a31
15
service.js
15
service.js
@ -2786,11 +2786,14 @@ class BesPopup extends HTMLElement {
|
|||||||
.bes-close-btn svg {
|
.bes-close-btn svg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
fill: #333;
|
|
||||||
}
|
}
|
||||||
|
:host{
|
||||||
|
--bes-close-icon: #485362;
|
||||||
|
--hover-bg-clr: #dee3ed;
|
||||||
|
}
|
||||||
.bes-close-btn:hover {
|
.bes-close-btn:hover {
|
||||||
background: #dee3ed;
|
background: var(--hover-bg-clr);
|
||||||
border-radius: 8px
|
border-radius: 4px
|
||||||
}
|
}
|
||||||
:host(.show) .bes-popup-container {
|
:host(.show) .bes-popup-container {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
@ -2819,13 +2822,17 @@ class BesPopup extends HTMLElement {
|
|||||||
background-color: #111213;
|
background-color: #111213;
|
||||||
border: 1px solid #2e3036;
|
border: 1px solid #2e3036;
|
||||||
}
|
}
|
||||||
|
:host{
|
||||||
|
--bes-close-icon: #a4b5c7;
|
||||||
|
--hover-bg-clr:rgba(189, 189, 189, 0.28);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="bes-popup-container">
|
<div class="bes-popup-container">
|
||||||
<div class="bes-toolbar">
|
<div class="bes-toolbar">
|
||||||
<div class="bes-popup-title">Besana</div>
|
<div class="bes-popup-title">Besana</div>
|
||||||
<button class="bes-close-btn" onclick="BesPopup.dismiss()">
|
<button class="bes-close-btn" onclick="BesPopup.dismiss()">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="var(--bes-close-icon)" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user