github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update button styles to adapt to new icons

Browse Source
This commit is contained in:
mathieucura
2021-01-10 00:37:25 +01:00
parent 6f27687af3
commit c71d938ed9
3 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/editor/components/seButton.js
View File

@@ -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;

17
src/editor/components/seExplorerButton.js
View File

@@ -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

14
src/editor/components/seFlyingButton.js
View File

@@ -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