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

Initial quick design for right settings drawer

Browse Source
This commit is contained in:
Vince 2013-06-16 10:36:05 +02:00
parent 3ac2c5e922
commit 3d67be94a1
3 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/style.css
View File

@ -47,7 +47,7 @@ body {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 1000;
} }
.sticky-section .wrap, .sticky-section .wrap,
@ -75,8 +75,8 @@ body {
transition: all 200ms ease-out; transition: all 200ms ease-out;
} }
.right-sticky-section.expanded { .right-sticky-section .tool-icon {
right: 300px; float: right;
} }
.drawer { .drawer {
@ -84,13 +84,52 @@ body {
} }
.drawer-content { .drawer-content {
background-color: red; overflow: hidden;
height: 600px; background-color: #444;
width: 300px; height: 550px;
max-height: 100%;
width: 280px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
} }
.right-sticky-section .tool-icon { /** Righty sticky drawer expanded state. */
float: right;
.right-sticky-section.expanded {
right: 280px;
}
.right-sticky-section .tool-icon.has-expanded-drawer {
position: relative;
background-color: #444;
}
.right-sticky-section .tool-icon.has-expanded-drawer:before {
content: " ";
position: absolute;
background-color: #444;
top: 0;
bottom: 0;
right: -5px;
width: 10px;
z-index: -1;
}
.settings-title {
margin: 10px 20px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
color: #eee;
border-bottom: 1px #aaa solid;
padding-bottom: 5px;
}
.settings-item {
margin: 10px 20px;
color: #eee;
font-size: 13px;
cursor: pointer;
} }
/** /**

2
css/tools.css
View File

@ -10,7 +10,7 @@
width: 46px; width: 46px;
height: 46px; height: 46px;
margin: 1px; margin: 1px;
background-color: rgba(200,200,200, .1); background-color: #3a3a3a;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 12px 12px; background-position: 12px 12px;
background-size: 24px 24px; background-size: 24px 24px;

14
index.html
View File

@ -48,9 +48,12 @@
</div> </div>
<div class="drawer"> <div class="drawer">
<div class="drawer-content"> <div class="drawer-content">
<div> <div class="settings-title">
Canvas background: Canvas settings:
<select id="canvas-picker" style="width:100px;"> </div>
<div class="settings-item">
<label>Background:</label>
<select id="canvas-picker">
<option value="light-canvas-background">Light</option> <option value="light-canvas-background">Light</option>
<option value="lowcont-medium-canvas-background">Medium - low contrast</option> <option value="lowcont-medium-canvas-background">Medium - low contrast</option>
<option value="medium-canvas-background" selected="selected">Medium - high contrast</option> <option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
@ -58,9 +61,8 @@
</select> </select>
</div> </div>
<div class="tool-grid"> <div class="settings-item">
<input id="show-grid" type="checkbox"/> <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
<label for="show-grid">Show grid</label>
</div> </div>
</div> </div>
</div> </div>