UI bug fix
This commit is contained in:
parent
26ec54cf4e
commit
558ca2f0c0
@ -577,7 +577,7 @@ strong.important {
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
height: 30rem;
|
||||
width: min(16rem, 100%);
|
||||
width: 16rem;
|
||||
border-radius: 1rem;
|
||||
justify-self: center;
|
||||
box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), 0 0 0 0.3rem black;
|
||||
|
||||
2
components/css/main.min.css
vendored
2
components/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -500,7 +500,7 @@ strong.important{
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
height: 30rem;
|
||||
width: min(16rem, 100%);
|
||||
width: 16rem;
|
||||
border-radius: 1rem;
|
||||
justify-self: center;
|
||||
box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0, 0.3),
|
||||
|
||||
@ -628,11 +628,11 @@
|
||||
<h1 class="page__title">Hamburger menu</h1>
|
||||
<section class="grid auto-grid-2 gap-3">
|
||||
<div class="grid gap-1">
|
||||
<img class="screenshot" src="assets/ham-menu-closed.png" alt="Hamburger menu closed">
|
||||
<img class="screenshot" loading="lazy" src="assets/ham-menu-closed.png" alt="Hamburger menu closed">
|
||||
<h4>Hamburger menu closed</h4>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<img class="screenshot" src="assets/ham-menu-open.png" alt="Hamburger menu opened">
|
||||
<img class="screenshot" loading="lazy" src="assets/ham-menu-open.png" alt="Hamburger menu opened">
|
||||
<h4>Hamburger menu open</h4>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<code>
|
||||
<file-input multiple>Select multiple files</file-input>
|
||||
</code>
|
||||
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight"><sm-form></span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><section class="table"><div class="tr"><h4 class="table__heading">Element</h4><h4 class="table__heading">behaviour</h4></div><div class="tr"><div>sm-button <span class="highlight">variant="primary"</span> or <span class="highlight">type="submit"</span></div><p>Whenever enter is pressed inside an active <span class="highlight">sm-input</span>, this will fire click event.<br>This will also change state depending opon validation conditions.</p></div><div class="tr"><div>sm-button <span class="highlight">type="reset"</span></div><p>When clicked, the whole form will reset.</p></div></section></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><section class="grid auto-grid-2 gap-3"><div class="grid gap-1"><img class="screenshot" src="assets/ham-menu-closed.png" alt="Hamburger menu closed"><h4>Hamburger menu closed</h4></div><div class="grid gap-1"><img class="screenshot" src="assets/ham-menu-open.png" alt="Hamburger menu opened"><h4>Hamburger menu open</h4></div></section><h2>Usage</h2><pre>
|
||||
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight"><sm-form></span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><section class="table"><div class="tr"><h4 class="table__heading">Element</h4><h4 class="table__heading">behaviour</h4></div><div class="tr"><div>sm-button <span class="highlight">variant="primary"</span> or <span class="highlight">type="submit"</span></div><p>Whenever enter is pressed inside an active <span class="highlight">sm-input</span>, this will fire click event.<br>This will also change state depending opon validation conditions.</p></div><div class="tr"><div>sm-button <span class="highlight">type="reset"</span></div><p>When clicked, the whole form will reset.</p></div></section></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><section class="grid auto-grid-2 gap-3"><div class="grid gap-1"><img class="screenshot" loading="lazy" src="assets/ham-menu-closed.png" alt="Hamburger menu closed"><h4>Hamburger menu closed</h4></div><div class="grid gap-1"><img class="screenshot" loading="lazy" src="assets/ham-menu-open.png" alt="Hamburger menu opened"><h4>Hamburger menu open</h4></div></section><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<hamburger-menu id="navigation_drawer">
|
||||
<!-- Navigation links -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user