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

Reduced tool size

Browse Source 
Moved tool size buttons on the right, started lasso tool
This commit is contained in:
Nicola
2021-12-27 19:11:59 +01:00
parent 8ee0214fad
commit a52fc647e3
4 changed files with 98 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/_canvas.scss
View File

@ -85,7 +85,7 @@
#canvas-view {
bottom: 0px;
left: 64px;
left: 48px;
right: 48px;
top: 48px;
cursor: default;
@ -97,7 +97,7 @@
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 0px;
left: 64px;
left: 48px;
right: 48px;
top: 48px;
display: block;

79
css/_tools-menu.scss
View File

@ -1,7 +1,7 @@
#tools-menu {
left: 0;
width: 64px;
width: 48px;
list-style-type: none;
top: 48px;
bottom: 0;
@ -13,14 +13,10 @@
z-index: 1120;
}
#tools-menu li {
position: relative;
}
#tools-menu li button:first-child {
text-align: center;
border: none;
@ -28,7 +24,8 @@
width: 100%;
padding: 0;
cursor: pointer;
height: 64px;
height: 48px;
z-index:0;
}
#tools-menu li button path {
@ -48,23 +45,17 @@
fill: $baseselectedicon;
}
#tools-menu li.selected.expanded {
padding-bottom: 10px;
}
.tools-menu-sub-button {
text-align: center;
border: none;
background: none;
cursor: pointer;
width: 50%;
height: 22px;
display: none;
width: 22px !important;
height:24px !important;
display: inline-block;
line-height: 0;
overflow: hidden;
position: absolute;
bottom: 0;
position: relative;
path {
fill: $baseselectedicon !important;
@ -77,37 +68,39 @@
}
}
#tools-menu li button#brush-bigger-button,
#tools-menu li button#zoom-in-button,
#tools-menu li button#eraser-bigger-button,
#tools-menu li button#rectangle-bigger-button,
#tools-menu li button#ellipse-bigger-button,
#tools-menu li button#line-bigger-button {
left: 0;
#tools-menu .size-buttons {
position:absolute;
display: none;
height:48px;
left:8px;
z-index:-1;
background-color: $basecolor !important;
}
#tools-menu li button#brush-smaller-button,
#tools-menu li button#zoom-out-button,
#tools-menu li button#eraser-smaller-button,
#tools-menu li button#rectangle-smaller-button,
#tools-menu li button#ellipse-smaller-button,
#tools-menu li button#line-smaller-button {
right: 0;
#tools-menu .size-buttons button {
text-align: center;
border: none;
padding: 0;
position: relative;
height:24px;
background-color: $baseselected !important;
cursor: pointer;
display:inline-block;
line-height: 0;
overflow: hidden;
width:22px;
}
#tools-menu li.selected button#brush-bigger-button,
#tools-menu li.selected button#brush-smaller-button,
#tools-menu li.selected button#zoom-in-button,
#tools-menu li.selected button#zoom-out-button,
#tools-menu li.selected button#eraser-bigger-button,
#tools-menu li.selected button#eraser-smaller-button,
#tools-menu li.selected button#rectangle-bigger-button,
#tools-menu li.selected button#rectangle-smaller-button,
#tools-menu li.selected button#ellipse-bigger-button,
#tools-menu li.selected button#ellipse-smaller-button,
#tools-menu li.selected button#line-bigger-button,
#tools-menu li.selected button#line-smaller-button {
display: block;
#tools-menu .size-buttons button:hover {
background:$baseselected !important;
}
#tools-menu .size-buttons button:active {
background:$basehovericon !important;
}
#tools-menu li.selected .size-buttons {
display:inline-block;
}