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; display:none;
} }
#resize-canvas {
display:flex;
position:relative;
flex-wrap:wrap;
}
#pivot-menu { #pivot-menu {
position: relative; position: relative;
display:inline-flex; display:inline-flex;
@ -939,7 +945,7 @@ svg {
path { path {
fill:color(menu, foreground); fill:color(menu, foreground);
} }
transition: background 250ms ease-in-out, transition: background 150ms ease-in-out,
transform 150ms ease; transform 150ms ease;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -947,6 +953,7 @@ svg {
button:hover, button:hover,
button:focus { button:focus {
cursor:pointer;
background-color: color(base, foreground); background-color: color(base, foreground);
path { path {
fill:color(base, foreground, bold); fill:color(base, foreground, bold);
@ -962,14 +969,50 @@ svg {
display:flex; display:flex;
position:relative; position:relative;
flex-wrap: wrap; flex-wrap: wrap;
width:200px; width:250px;
padding:5px; float:right;
vertical-align:middle; vertical-align:middle;
font-size:15px;
left:10px;
text-align:center;
input { input {
position:relative;
margin-left:10px;
width:10px; width:10px;
height: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 { #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/bottom.svg" width="20" height="20"}}</button>
<button>{{svg "arrows/bottomright.svg" width="20" height="20"}}</button> <button>{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
</span> </span>
<!--BORDERS--> <!--BORDERS-->
<h2>Borders</h2>
<span id = "borders-menu"> <span id = "borders-menu">
<span> <span>
Left: Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span> </span>
<input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span> <span>
Right: Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span> </span>
<input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span> <span>
Top: Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span> </span>
<input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
<span> <span>
Bottom: Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
</span> </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>
<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>