-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
WIP - Form row component evolved #18130
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Changes from 18 commits
359e019
fb1a894
96cc2c9
be344c4
08609d4
d968444
6d5f515
affee0a
8ce3fe0
53716cb
d2edc77
3d675d3
9232ee7
6f3ee19
e6c49da
4812e25
03130f0
1e85c7b
7161d56
80e4e4a
7c58fb9
448f4b9
6f233bc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +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,.27),0 0 40px rgba(0,0,0,.08) inset;border-radius:4px}.m-signature-pad:after,.m-signature-pad:before{position:absolute;z-index:-1;content:"";width:40%;height:10px;left:20px;bottom:10px;background:0 0;-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,.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:#fff}.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,.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}} | ||
|
|
||
| #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; | ||
| } | ||
| } |
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I definitely need to check this and make sure it won't introduce XSS issues, etc.