1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-08 12:22:23 +04:00

Fix signature component with styling and update canvas dimensions

This commit is contained in:
codecalm
2025-03-01 13:46:18 +01:00
parent f7d5b6a05e
commit 16a42ba330
3 changed files with 16 additions and 2 deletions
+1
View File
@@ -63,6 +63,7 @@
@import "ui/charts";
@import "ui/offcanvas";
@import "ui/chat";
@import "ui/signature";
@import "utils/background";
@import "utils/colors";
+13
View File
@@ -0,0 +1,13 @@
.signature {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
padding: var(--#{$prefix}spacer-1);
border-radius: var(--#{$prefix}border-radius);
}
.signature-canvas {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius-sm);
display: block;
cursor: crosshair;
width: 100%;
}
+2 -2
View File
@@ -1,6 +1,6 @@
{% assign id = include.id | default: 'default' %}
<div class="form-control p-0 position-relative{% if include.class %} {{ include.class }}{% endif %}">
<div class="signature position-relative{% if include.class %} {{ include.class }}{% endif %}">
{% if include.clear %}
<div class="position-absolute top-0 end-0 p-2">
<div class="btn btn-icon" id="signature-{{ id }}-clear" title="Clear signature" data-bs-toggle="tooltip">
@@ -8,7 +8,7 @@
</div>
</div>
{% endif %}
<canvas id="signature-{{ id }}" width="{{ include.width | default: 400 }}" height="{{ include.height | default: 200 }}" class="rounded d-block w-100 cursor-crosshair"></canvas>
<canvas id="signature-{{ id }}" width="{{ include.width | default: 400 }}" height="{{ include.height | default: 400 }}" class="signature-canvas"></canvas>
</div>
{% capture_script %}