Update button styles to adapt to new icons
parent
6f27687af3
commit
c71d938ed9
|
@ -6,7 +6,7 @@ template.innerHTML = `
|
|||
<style>
|
||||
:host(:hover) :not(.disabled)
|
||||
{
|
||||
background-color: #ffc;
|
||||
background-color: #2B3C45;
|
||||
}
|
||||
div
|
||||
{
|
||||
|
@ -14,8 +14,7 @@ template.innerHTML = `
|
|||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
padding: 3px;
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
background-color: #72797A;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
@ -31,8 +30,7 @@ template.innerHTML = `
|
|||
height: 100%;
|
||||
}
|
||||
.pressed {
|
||||
background-color: #F4E284;
|
||||
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
|
||||
background-color: #2B3C45;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
|
|
|
@ -4,9 +4,9 @@ template.innerHTML = `
|
|||
:host {
|
||||
position:relative;
|
||||
}
|
||||
.menu-button:hover, se-button:hover, .menu-item:hover
|
||||
.menu-button:hover, se-button:hover, .menu-item:hover
|
||||
{
|
||||
background-color: #ffc;
|
||||
background-color: #2B3C45;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
|
@ -14,13 +14,13 @@ template.innerHTML = `
|
|||
height: 24px;
|
||||
}
|
||||
.overall.pressed .button-icon,
|
||||
.overall.pressed .handle,
|
||||
.overall.pressed,
|
||||
.menu-item.pressed {
|
||||
background-color: #F4E284 !important;
|
||||
background-color: #2B3C45 !important;
|
||||
}
|
||||
.overall.pressed .menu-button {
|
||||
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
|
||||
background-color: #F4E284 !important;
|
||||
background-color: #2B3C45 !important;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
|
@ -31,8 +31,7 @@ template.innerHTML = `
|
|||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
padding: 3px;
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
background-color: #72797A;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
|
@ -83,7 +82,7 @@ template.innerHTML = `
|
|||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="overall">
|
||||
<div class="menu-button">
|
||||
<img class="button-icon" src="./images/logo.svg" alt="icon">
|
||||
|
@ -96,7 +95,7 @@ template.innerHTML = `
|
|||
<div class="menu-item">menu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
`;
|
||||
/**
|
||||
* @class ExplorerButton
|
||||
|
|
|
@ -6,7 +6,7 @@ template.innerHTML = `
|
|||
}
|
||||
.overall:hover *
|
||||
{
|
||||
background-color: #ffc;
|
||||
background-color: #2B3C45;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
|
@ -15,11 +15,10 @@ template.innerHTML = `
|
|||
}
|
||||
.overall.pressed .button-icon,
|
||||
.overall.pressed .handle {
|
||||
background-color: #F4E284 !important;
|
||||
background-color: #2B3C45 !important;
|
||||
}
|
||||
.overall.pressed .menu-button {
|
||||
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
|
||||
background-color: #F4E284 !important;
|
||||
background-color: #2B3C45 !important;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
|
@ -30,8 +29,7 @@ template.innerHTML = `
|
|||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
padding: 3px;
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
background-color: #72797A;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
|
@ -68,7 +66,7 @@ template.innerHTML = `
|
|||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="overall">
|
||||
<div class="menu-button">
|
||||
<img class="button-icon" src="./images/logo.svg" alt="icon">
|
||||
|
@ -78,7 +76,7 @@ template.innerHTML = `
|
|||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
`;
|
||||
/**
|
||||
* @class FlyingButton
|
||||
|
|
Loading…
Reference in New Issue