56 lines
1.0 KiB
JavaScript
56 lines
1.0 KiB
JavaScript
const rulersTemplate = document.createElement('template');
|
|
|
|
rulersTemplate.innerHTML = `
|
|
<style>
|
|
|
|
/* Rulers
|
|
——————————————————————————————————————*/
|
|
|
|
#ruler_corner {
|
|
background: var(--ruler-color);
|
|
grid-area: corner;
|
|
width: 15px;
|
|
height: 15px;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#ruler_x {
|
|
background: var(--ruler-color);
|
|
grid-area: rulerX;
|
|
height: 15px;
|
|
border-bottom: 1px solid;
|
|
border-left: 1px solid #777;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#ruler_y {
|
|
background: var(--ruler-color);
|
|
grid-area: rulerY;
|
|
width: 15px;
|
|
border-right: 1px solid;
|
|
border-top: 1px solid #777;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#ruler_x canvas {
|
|
float: left;
|
|
}
|
|
</style>
|
|
<div id="ruler_corner"></div>
|
|
<div id="ruler_x">
|
|
<div>
|
|
<canvas height="15"></canvas>
|
|
</div>
|
|
</div>
|
|
<div id="ruler_y">
|
|
<div>
|
|
<canvas width="15"></canvas>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
export default rulersTemplate;
|