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

Finished styling canvas resize menu

Browse Source
This commit is contained in:
unsettledgames 2020-09-12 11:04:00 +02:00
parent f6104c514c
commit 2da7e192e8
2 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/pixel-editor.scss
View File

@ -919,6 +919,12 @@ svg {
display:none;
}
#resize-canvas {
display:flex;
position:relative;
flex-wrap:wrap;
}
#pivot-menu {
position: relative;
display:inline-flex;
@ -939,7 +945,7 @@ svg {
path {
fill:color(menu, foreground);
}
transition: background 250ms ease-in-out,
transition: background 150ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
@ -947,6 +953,7 @@ svg {
button:hover,
button:focus {
cursor:pointer;
background-color: color(base, foreground);
path {
fill:color(base, foreground, bold);
@ -962,14 +969,50 @@ svg {
display:flex;
position:relative;
flex-wrap: wrap;
width:200px;
padding:5px;
width:250px;
float:right;
vertical-align:middle;
font-size:15px;
left:10px;
text-align:center;
input {
position:relative;
margin-left:10px;
width:10px;
height:10px;
}
h2 {
position:relative;
display:inline-block;
}
span {
padding-right:10px;
float:left;
position:relative;
display: flex;
vertical-align:middle;
height:40px;
}
}
#resize-canvas-confirm {
background: color(button);
border: none;
font-size:18px;
border-radius: 4px;
color: color(button, foreground);
padding: 10px 20px;
cursor: pointer;
margin: 0 auto;
position:relative;
top:10px;
display: block;
&:hover {
background: color(button, background, hover);
}
}
#compatibility-warning {

21
views/pixel-editor.hbs
View File

@ -266,27 +266,26 @@
<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>
<span id = "borders-menu">
<span>
Left:
Left: <input id="border-left" 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:
Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span>
<input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span>
Top:
Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span>
<input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span>
Bottom:
Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span>
<input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span>
<button id = "resize-canvas-confirm">Resize canvas</button>
</span>
</div>
<div id="help">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>