feat(signature): add signature component styles

telerik · Jul 15, 2022 · a71e6d6 · a71e6d6
1 parent 32a3716
commit a71e6d6
Show file tree

Hide file tree

Showing 23 changed files with 332 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/index.scss b/packages/bootstrap/scss/index.scss
@@ -157,3 +157,4 @@
 @import "dataviz/_index.scss";
 @import "map/_index.scss";
 @import "orgchart/_index.scss";
+@import "signature/_index.scss";
diff --git a/packages/bootstrap/scss/signature/_index.scss b/packages/bootstrap/scss/signature/_index.scss
@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../input/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/bootstrap/scss/signature/_layout.scss b/packages/bootstrap/scss/signature/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/signature/_layout.scss";
diff --git a/packages/bootstrap/scss/signature/_theme.scss b/packages/bootstrap/scss/signature/_theme.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/signature/_theme.scss";
diff --git a/packages/bootstrap/scss/signature/_variables.scss b/packages/bootstrap/scss/signature/_variables.scss
@@ -0,0 +1,45 @@
+$kendo-signature-width: 246px !default;
+$kendo-signature-height: 108px !default;
+
+$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-height: 252px !default;
+
+$kendo-signature-padding: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-signature-padding-sm: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-md: $kendo-signature-padding !default;
+$kendo-signature-padding-lg: map-get( $spacing, 2 ) !default;
+
+$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-color: rgba( $info, .24 ) !default;
+
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-sizes: (
+    sm: (
+        padding: $kendo-signature-padding-sm,
+        line-size: $kendo-signature-line-size-sm,
+        line-offset: $kendo-signature-line-bottom-offset-sm
+    ),
+    md: (
+        padding: $kendo-signature-padding-md,
+        line-size: $kendo-signature-line-size-md,
+        line-offset: $kendo-signature-line-bottom-offset-md
+    ),
+    lg: (
+        padding: $kendo-signature-padding-lg,
+        line-size: $kendo-signature-line-size-lg,
+        line-offset: $kendo-signature-line-bottom-offset-lg
+    )
+) !default;
+
+$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
diff --git a/packages/classic/scss/index.scss b/packages/classic/scss/index.scss
@@ -157,3 +157,4 @@
 @import "dataviz/_index.scss";
 @import "map/_index.scss";
 @import "orgchart/_index.scss";
+@import "signature/_index.scss";
diff --git a/packages/classic/scss/signature/_index.scss b/packages/classic/scss/signature/_index.scss
@@ -0,0 +1,9 @@
+@import "../core/_index.scss";
+
+// Dependencies
+@import "../button/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/classic/scss/signature/_layout.scss b/packages/classic/scss/signature/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/signature/_layout.scss";
diff --git a/packages/classic/scss/signature/_theme.scss b/packages/classic/scss/signature/_theme.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/signature/_theme.scss";
diff --git a/packages/classic/scss/signature/_variables.scss b/packages/classic/scss/signature/_variables.scss
@@ -0,0 +1,45 @@
+$kendo-signature-width: 250px !default;
+$kendo-signature-height: 84px !default;
+
+$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-height: 252px !default;
+
+$kendo-signature-padding: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-signature-padding-md: $kendo-signature-padding !default;
+$kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-color: rgba( $info, .24 ) !default;
+
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-sizes: (
+    sm: (
+        padding: $kendo-signature-padding-sm,
+        line-size: $kendo-signature-line-size-sm,
+        line-offset: $kendo-signature-line-bottom-offset-sm
+    ),
+    md: (
+        padding: $kendo-signature-padding-md,
+        line-size: $kendo-signature-line-size-md,
+        line-offset: $kendo-signature-line-bottom-offset-md
+    ),
+    lg: (
+        padding: $kendo-signature-padding-lg,
+        line-size: $kendo-signature-line-size-lg,
+        line-offset: $kendo-signature-line-bottom-offset-lg
+    )
+) !default;
+
+$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss
@@ -142,7 +142,8 @@
 
         .k-multiselect,
         .k-floating-label-container,
-        .k-daterangepicker .k-dateinput {
+        .k-daterangepicker .k-dateinput,
+        .k-signature {
             display: inline-flex;
             width: 100%;
         }

diff --git a/packages/default/scss/index.scss b/packages/default/scss/index.scss
@@ -157,3 +157,4 @@
 @import "dataviz/_index.scss";
 @import "map/_index.scss";
 @import "orgchart/_index.scss";
+@import "signature/_index.scss";
diff --git a/packages/default/scss/signature/_index.scss b/packages/default/scss/signature/_index.scss
@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../input/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/default/scss/signature/_layout.scss b/packages/default/scss/signature/_layout.scss
@@ -0,0 +1,63 @@
+@include exports("signature/layout") {
+
+    .k-signature {
+        width: $kendo-signature-width;
+        height: $kendo-signature-height;
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &.k-signature-maximized {
+            width: $kendo-signature-maximized-width;
+            height: $kendo-signature-maximized-height;
+
+            > .k-signature-line {
+                border-bottom-width: $kendo-signature-maximized-line-width;
+            }
+        }
+    }
+
+    .k-signature-actions {
+        display: flex;
+        width: min-content;
+        margin-inline-start: auto;
+        gap: $kendo-signature-actions-gap;
+        z-index: 2;
+    }
+
+    .k-signature-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+    }
+
+    .k-signature-line {
+        position: absolute;
+        z-index: 0;
+        border-bottom-width: $kendo-signature-line-width;
+        border-bottom-style: $kendo-signature-line-style;
+    }
+
+    // Sizes
+    @each $size, $size-props in $kendo-signature-sizes {
+        $_padding: map-get($size-props, padding);
+        $_line-size: map-get($size-props, line-size);
+        $_line-offset: map-get($size-props, line-offset);
+
+        .k-signature-#{$size} {
+            padding: $_padding;
+
+            .k-signature-line {
+                width: $_line-size;
+                bottom: $_line-offset;
+            }
+        }
+
+    }
+}
diff --git a/packages/default/scss/signature/_theme.scss b/packages/default/scss/signature/_theme.scss
@@ -0,0 +1,12 @@
+@include exports("signature/theme") {
+
+    // Solid signature
+    .k-signature {
+
+        .k-signature-line {
+            border-bottom-color: $kendo-signature-line-color;
+        }
+    }
+
+
+}
diff --git a/packages/default/scss/signature/_variables.scss b/packages/default/scss/signature/_variables.scss
@@ -0,0 +1,45 @@
+$kendo-signature-width: 250px !default;
+$kendo-signature-height: 84px !default;
+
+$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-height: 252px !default;
+
+$kendo-signature-padding: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
+$kendo-signature-padding-md: $kendo-signature-padding !default;
+$kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get($spacing, thin) !default;
+
+$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-color: rgba( $info, .24 ) !default;
+
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-sizes: (
+    sm: (
+        padding: $kendo-signature-padding-sm,
+        line-size: $kendo-signature-line-size-sm,
+        line-offset: $kendo-signature-line-bottom-offset-sm
+    ),
+    md: (
+        padding: $kendo-signature-padding-md,
+        line-size: $kendo-signature-line-size-md,
+        line-offset: $kendo-signature-line-bottom-offset-md
+    ),
+    lg: (
+        padding: $kendo-signature-padding-lg,
+        line-size: $kendo-signature-line-size-lg,
+        line-offset: $kendo-signature-line-bottom-offset-lg
+    )
+) !default;
+
+$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
diff --git a/packages/html/src/signature/tests/signature-flat.html b/packages/html/src/signature/tests/signature-flat.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>Signature Flat</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/signature/tests/signature-flat.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/signature/tests/signature-outline.html b/packages/html/src/signature/tests/signature-outline.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>Signature Outline</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/signature/tests/signature-outline.js"></script>
+</body>
+</html>
diff --git a/packages/material/scss/index.scss b/packages/material/scss/index.scss
@@ -157,3 +157,4 @@
 @import "dataviz/_index.scss";
 @import "map/_index.scss";
 @import "orgchart/_index.scss";
+@import "signature/_index.scss";
diff --git a/packages/material/scss/signature/_index.scss b/packages/material/scss/signature/_index.scss
@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../input/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/material/scss/signature/_layout.scss b/packages/material/scss/signature/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/signature/_layout.scss";
diff --git a/packages/material/scss/signature/_theme.scss b/packages/material/scss/signature/_theme.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/signature/_theme.scss";
diff --git a/packages/material/scss/signature/_variables.scss b/packages/material/scss/signature/_variables.scss
@@ -0,0 +1,45 @@
+$kendo-signature-width: 246px !default;
+$kendo-signature-height: 108px !default;
+
+$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-height: 252px !default;
+
+$kendo-signature-padding: map-get( $spacing, 2 ) !default;
+$kendo-signature-padding-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-signature-padding-md: $kendo-signature-padding !default;
+$kendo-signature-padding-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+
+$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-color: rgba( $info, .24 ) !default;
+
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-sizes: (
+    sm: (
+        padding: $kendo-signature-padding-sm,
+        line-size: $kendo-signature-line-size-sm,
+        line-offset: $kendo-signature-line-bottom-offset-sm
+    ),
+    md: (
+        padding: $kendo-signature-padding-md,
+        line-size: $kendo-signature-line-size-md,
+        line-offset: $kendo-signature-line-bottom-offset-md
+    ),
+    lg: (
+        padding: $kendo-signature-padding-lg,
+        line-size: $kendo-signature-line-size-lg,
+        line-offset: $kendo-signature-line-bottom-offset-lg
+    )
+) !default;
+
+$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;