mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Styled pivots, started styling borders menu

This commit is contained in:
unsettledgames 2020-09-11 13:19:14 +02:00
parent 1e6f719f50
commit f6104c514c
2 changed files with 83 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/pixel-editor.scss
View File

@ -919,6 +919,59 @@ svg {
display:none;
}
#pivot-menu {
position: relative;
display:inline-flex;
flex-wrap:wrap;
vertical-align:middle;
text-align:center;
width:150px;
button {
margin-right:10px;
margin-bottom:10px;
position:relative;
width:40px;
height:40px;
background:color(menu, background);
border:none;
path {
fill:color(menu, foreground);
}
transition: background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
button:hover,
button:focus {
background-color: color(base, foreground);
path {
fill:color(base, foreground, bold);
}
border: 2px solid color(base, foreground);
}
button:active {
transform: scale(0.95);
}
}
#borders-menu {
display:flex;
position:relative;
flex-wrap: wrap;
width:200px;
padding:5px;
vertical-align:middle;
input {
width:10px;
height:10px;
}
}
#compatibility-warning {
display: flex;
justify-content: center;

49
views/pixel-editor.hbs
View File

@ -254,28 +254,39 @@
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Resize canvas</h1>
<!--PIVOT-->
<h2>Choose pivot:</h2>
<button id = "open-pivot-button" class = "dropdown-button">Choose a pivot...</button>
<div id = "pivot-menu" class = "dropdown-menu">
<button>Top-left</button>
<button>Top-center</button>
<button>Top-right</button>
<button>Middle-left</button>
<button>Middle-center</button>
<button>Middle-right</button>
<button>Bottom-left</button>
<button>Bottom-center</button>
<button>Bottom-right</button>
</div>
<input id="pivot" value="{{#if pivot}}{{pivot}}{{else}}'Center'{{/if}}" autocomplete="off" />
<!--PIVOTS-->
<span id = "pivot-menu">
<button>{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/top.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/topright.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/left.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/middle.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/right.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
</span>
<!--BORDERS-->
<h2>Borders</h2>
Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span id = "borders-menu">
<span>
Left:
</span>
<input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span>
Right:
</span>
<input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span>
Top:
</span>
<input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span>
Bottom:
</span>
<input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span>
</div>
<div id="help">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>