diff options
Diffstat (limited to 'docs/src/contents')
| -rw-r--r-- | docs/src/contents/_ad-c.pug | 2 | ||||
| -rw-r--r-- | docs/src/contents/_ad-g.pug | 2 | ||||
| -rw-r--r-- | docs/src/contents/cursors.pug (renamed from docs/src/contents/cursor.pug) | 0 | ||||
| -rw-r--r-- | docs/src/contents/forms.pug | 35 | ||||
| -rw-r--r-- | docs/src/contents/shapes.pug | 12 |
5 files changed, 34 insertions, 17 deletions
diff --git a/docs/src/contents/_ad-c.pug b/docs/src/contents/_ad-c.pug index f331444..79b3e2c 100644 --- a/docs/src/contents/_ad-c.pug +++ b/docs/src/contents/_ad-c.pug @@ -1,3 +1,3 @@ block ad-carbons .docs-ad.docs-ad-sidebar.text-center - script#_carbonads_js(async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file + script#_carbonads_js(async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file diff --git a/docs/src/contents/_ad-g.pug b/docs/src/contents/_ad-g.pug index 675430b..c227ea8 100644 --- a/docs/src/contents/_ad-g.pug +++ b/docs/src/contents/_ad-g.pug @@ -1,7 +1,7 @@ block ad-adsense .docs-ad .hide-md.text-center - script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') + script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') // GitHub-lg ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784') script. diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursors.pug index ed290b8..ed290b8 100644 --- a/docs/src/contents/cursor.pug +++ b/docs/src/contents/cursors.pug diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug index 630a528..838b9e4 100644 --- a/docs/src/contents/forms.pug +++ b/docs/src/contents/forms.pug @@ -143,7 +143,7 @@ pre.code(data-lang='HTML') .docs-demo.columns .column .form-group - label.form-checkbox.is-error + label.form-checkbox input#docs-demo-checkbox(type="checkbox") i.form-icon | Select all @@ -458,10 +458,6 @@ pre.code(data-lang='HTML') +docs-subheading('forms-validation', 'Form validation styles') -p - | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. - | Use the #[code form-input-hint] class to provide form validation success and error messages. - .docs-demo.columns .column.col-9.col-sm-12 fieldset @@ -474,10 +470,6 @@ p label.form-label(for="input-example-18") Password input#input-example-18.form-input(type="password" placeholder="Password") p.form-input-hint Passwords must have at least 8 characters. - .form-group - label.form-label(for="input-example-21") Email - input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$") - p.form-input-hint The Email address is unavailable. fieldset legend Select .form-group @@ -516,6 +508,10 @@ p i.form-icon | Send me emails with news and tips +p + | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. + | Use the #[code form-input-hint] class to provide form validation success and error messages. + pre.code(data-lang='HTML') code :highlight(lang="html") @@ -543,6 +539,27 @@ pre.code(data-lang='HTML') </div> </form> +.docs-demo.columns + .column.col-9.col-sm-12 + .form-group + label.form-label(for="input-example-21") Email + input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$") + .form-group + label.form-label(for="input-example-22") Password + input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$") + +p + | You can use input #[code pattern] attribute to validate the value as well. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- pattern validation example for Email --> + <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"> + + <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --> + <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"> + +docs-subheading('forms-disabled', 'Form disabled styles') p diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug index 7abf513..c6afe85 100644 --- a/docs/src/contents/shapes.pug +++ b/docs/src/contents/shapes.pug @@ -2,16 +2,16 @@ p Shape utilities are used for change element shapes. .docs-demo.columns .column.col-6.text-center - .bg-primary.text-light.docs-shape.rounded.centered - | rounded + .bg-primary.text-light.docs-shape.s-rounded.centered + | s-rounded .column.col-6.text-center - .bg-primary.text-light.docs-shape.circle.centered - | circle + .bg-primary.text-light.docs-shape.s-circle.centered + | s-circle pre.code(data-lang='HTML') code :highlight(lang="html") <!-- rounded element --> - <div class="rounded"></div> + <div class="s-rounded"></div> <!-- circle element --> - <div class="circle"></div>
\ No newline at end of file + <div class="s-circle"></div>
\ No newline at end of file |