mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Styled pivots, started styling borders menu

Browse Source
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; 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 { #compatibility-warning {
display: flex; display: flex;
justify-content: center; 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> <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Resize canvas</h1> <h1>Resize canvas</h1>
<!--PIVOT--> <!--PIVOTS-->
<h2>Choose pivot:</h2> <span id = "pivot-menu">
<button id = "open-pivot-button" class = "dropdown-button">Choose a pivot...</button> <button>{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
<div id = "pivot-menu" class = "dropdown-menu"> <button>{{svg "arrows/top.svg" width="20" height="20"}}</button>
<button>Top-left</button> <button>{{svg "arrows/topright.svg" width="20" height="20"}}</button>
<button>Top-center</button> <button>{{svg "arrows/left.svg" width="20" height="20"}}</button>
<button>Top-right</button> <button>{{svg "arrows/middle.svg" width="20" height="20"}}</button>
<button>Middle-left</button> <button>{{svg "arrows/right.svg" width="20" height="20"}}</button>
<button>Middle-center</button> <button>{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
<button>Middle-right</button> <button>{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
<button>Bottom-left</button> <button>{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
<button>Bottom-center</button> </span>
<button>Bottom-right</button>
</div>
<input id="pivot" value="{{#if pivot}}{{pivot}}{{else}}'Center'{{/if}}" autocomplete="off" />
<!--BORDERS--> <!--BORDERS-->
<h2>Borders</h2> <h2>Borders</h2>
Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> <span id = "borders-menu">
Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> <span>
Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> Left:
Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> </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>
<div id="help"> <div id="help">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button> <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>