From 410c99da1765e2f21c92cc361e27fb8fbcdbe364 Mon Sep 17 00:00:00 2001 From: snipe Date: Mon, 2 Nov 2020 23:57:39 -0800 Subject: [PATCH] Added signature-pad.min.css to the css directory - should possibly fix #8603 --- public/css/signature-pad.min.css | 135 +++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100755 public/css/signature-pad.min.css diff --git a/public/css/signature-pad.min.css b/public/css/signature-pad.min.css new file mode 100755 index 0000000000..218b9c2365 --- /dev/null +++ b/public/css/signature-pad.min.css @@ -0,0 +1,135 @@ + +#signature-pad { + padding-top: 250px; + margin: auto; +} +.m-signature-pad { + + position: relative; + font-size: 10px; + width: 100%; + height: 300px; + border: 1px solid #e8e8e8; + background-color: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset; + border-radius: 4px; +} + +.m-signature-pad:before, .m-signature-pad:after { + position: absolute; + z-index: -1; + content: ""; + width: 40%; + height: 10px; + left: 20px; + bottom: 10px; + background: transparent; + -webkit-transform: skew(-3deg) rotate(-3deg); + -moz-transform: skew(-3deg) rotate(-3deg); + -ms-transform: skew(-3deg) rotate(-3deg); + -o-transform: skew(-3deg) rotate(-3deg); + transform: skew(-3deg) rotate(-3deg); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); +} + +.m-signature-pad:after { + left: auto; + right: 20px; + -webkit-transform: skew(3deg) rotate(3deg); + -moz-transform: skew(3deg) rotate(3deg); + -ms-transform: skew(3deg) rotate(3deg); + -o-transform: skew(3deg) rotate(3deg); + transform: skew(3deg) rotate(3deg); +} + +.m-signature-pad--body { + position: absolute; + top: 20px; + bottom: 60px; + border: 1px solid #f4f4f4; + background-color: white; +} + +.m-signature-pad--body + canvas { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; + } + +.m-signature-pad--footer { + position: absolute; + left: 20px; + right: 20px; + bottom: 20px; + height: 40px; +} + +.m-signature-pad--footer + .description { + color: #C3C3C3; + text-align: center; + font-size: 1.2em; + margin-top: 1.8em; + } + +.m-signature-pad--footer + .button { + position: absolute; + bottom: 0; + } + +.m-signature-pad--footer + .button.clear { + left: 0; + } + +.m-signature-pad--footer + .button.save { + right: 0; + } + +@media screen and (max-width: 1024px) { + .m-signature-pad { + top: 0; + left: 0; + right: 0; + bottom: 0; + width: auto; + height: auto; + min-width: 250px; + min-height: 140px; + margin: 5%; + } + +} + +@media screen and (min-device-width: 768px) and (max-device-width: 1024px) { + .m-signature-pad { + margin: 10%; + } +} + +@media screen and (max-height: 320px) { + .m-signature-pad--body { + left: 0; + right: 0; + top: 0; + bottom: 32px; + } + .m-signature-pad--footer { + left: 20px; + right: 20px; + bottom: 4px; + height: 28px; + } + .m-signature-pad--footer + .description { + font-size: 1em; + margin-top: 1em; + } +}