mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 02:36:15 -04:00
Merge branch 'dev' into gridless
This commit is contained in:
Lucas Larroche
GitHub
commit
2efc9ada25
34 changed files with 3346 additions and 116 deletions
|
|
@ -28,7 +28,7 @@ Pico uses simple native HTML tags as much as possible. Less than 10 .classes are
|
|||
No dependencies, package manager, external files, or JavaScript.
|
||||
|
||||
**Responsive everything**
|
||||
Elegant and consistent adaptative spacings and typography on all devices.
|
||||
Elegant and consistent adaptive spacings and typography on all devices.
|
||||
|
||||
**Light or Dark mode**
|
||||
Shipped with two beautiful color themes, automatically enabled according to the user preference.
|
||||
|
|
@ -70,9 +70,9 @@ npm install @picocss/pico
|
|||
|
||||
## Class-less version
|
||||
|
||||
Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
|
||||
Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
|
||||
|
||||
In this version, `header`, `main` and `footer` act as container.
|
||||
In this version, `header`, `main` and `footer` act as containers.
|
||||
|
||||
Use the default `.classless` version if you need centered viewports:
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
--block-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -118,9 +119,6 @@ dialog > article {
|
|||
a {
|
||||
--text-decoration: none;
|
||||
}
|
||||
a.secondary, a.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
--font-size: 0.875em;
|
||||
|
|
@ -796,7 +794,7 @@ mark {
|
|||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -982,6 +980,7 @@ button[disabled],
|
|||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
a[role=button][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
|
@ -1082,6 +1081,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
@ -1735,7 +1735,7 @@ code em {
|
|||
kbd {
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
16
css/pico.css
16
css/pico.css
|
|
@ -23,6 +23,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -798,13 +799,16 @@ ul ~ h6 {
|
|||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
hgroup {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
hgroup > * {
|
||||
hgroup > *,
|
||||
.headings > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
hgroup > *:last-child {
|
||||
hgroup > *:last-child,
|
||||
.headings > *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
|
|
@ -841,7 +845,7 @@ mark {
|
|||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -1163,6 +1167,7 @@ button[disabled],
|
|||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
a[role=button][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
|
@ -1263,6 +1268,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
@ -1916,7 +1922,7 @@ code em {
|
|||
kbd {
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
--block-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -118,9 +119,6 @@ dialog > article {
|
|||
a {
|
||||
--text-decoration: none;
|
||||
}
|
||||
a.secondary, a.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
--font-size: 0.875em;
|
||||
|
|
@ -766,7 +764,7 @@ mark {
|
|||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -952,6 +950,7 @@ button[disabled],
|
|||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
a[role=button][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
|
@ -1052,6 +1051,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
@ -1705,7 +1705,7 @@ code em {
|
|||
kbd {
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -26,6 +26,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -727,13 +728,16 @@ ul ~ h6 {
|
|||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
hgroup {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
hgroup > * {
|
||||
hgroup > *,
|
||||
.headings > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
hgroup > *:last-child {
|
||||
hgroup > *:last-child,
|
||||
.headings > *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
|
|
@ -770,7 +774,7 @@ mark {
|
|||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -1091,6 +1095,7 @@ button[disabled],
|
|||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
a[role=button][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
|
@ -1191,6 +1196,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
|
|||
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -19,6 +19,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
|
|||
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -90,14 +90,13 @@ svg {
|
|||
*/
|
||||
main > aside nav {
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||
padding-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
max-height: calc(100vh - 5.5rem);
|
||||
margin-bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside nav.closed-on-mobile {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,7 +27,7 @@
|
|||
</<b>form</b>></code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre></footer></article><p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label></fieldset><footer class="code"><pre><code><em><!-- Select --></em>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre></footer></article><p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label> <label for="extralarge"><input type="radio" id="extralarge" name="size" value="extralarge" disabled="disabled"> Extra Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label> <label for="terms_sharing"><input type="checkbox" id="terms_sharing" name="terms_sharing" disabled="disabled" checked="checked"> I agree to share my information with partners</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label> <label for="switch_disabled"><input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled="disabled" checked="checked"> Publish on my profile my accomplishments</label></fieldset><footer class="code"><pre><code><em><!-- Select --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
||||
<<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>>
|
||||
<<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>>Select a fruit…</<b>option</b>>
|
||||
|
|
@ -49,22 +49,35 @@
|
|||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>>
|
||||
Large
|
||||
</<b>label</b>>
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"extralarge"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>>
|
||||
Extra Large
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<em><!-- Checkbox --></em>
|
||||
<em><!-- Checkboxes --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
||||
I agree to the Terms and Conditions
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms_sharing"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>>
|
||||
I agree to share my information with partners
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<em><!-- Switch --></em>
|
||||
<em><!-- Switches --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
||||
Publish on my profile
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||
Publish on my profile my accomplishments
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>></code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code><<b>script</b>>
|
||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||
</<b>script</b>></code></pre></footer></article><p>Others input types:</p><article aria-label="File browser, range slider, date, time, color examples"><label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em><!-- File browser --></em>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</<b>dialog</b>></code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em><!-- Button to trigger the modal --></em>
|
||||
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Launch demo modal
|
||||
</<b>button</b>>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<i>aria-label</i>=<u>"Close"</u>>
|
||||
<i>class</i>=<u>"close"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
<i>role</i>=<u>"button"</u>>
|
||||
<i>class</i>=<u>"secondary"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Cancel
|
||||
</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Confirm
|
||||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@ main > aside {
|
|||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||
padding-bottom: var(--block-spacing-vertical);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
max-height: calc(100vh - 5.5rem);
|
||||
margin-bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -35,7 +34,6 @@ main > aside {
|
|||
}
|
||||
|
||||
&.closed-on-mobile {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
|
||||
a#toggle-docs-navigation {
|
||||
svg.collapse {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</table>
|
||||
</figure>
|
||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||
<p><code><<b>section</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||
<p><code><<b>section</b>></code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
|
|
|||
|
|
@ -114,18 +114,30 @@
|
|||
<input type="radio" id="large" name="size" value="large">
|
||||
Large
|
||||
</label>
|
||||
<label for="extralarge">
|
||||
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
|
||||
Extra Large
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="terms">
|
||||
<input type="checkbox" id="terms" name="terms">
|
||||
I agree to the Terms and Conditions
|
||||
</label>
|
||||
<label for="terms_sharing">
|
||||
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
|
||||
I agree to share my information with partners
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="switch">
|
||||
<input type="checkbox" id="switch" name="switch" role="switch">
|
||||
Publish on my profile
|
||||
</label>
|
||||
<label for="switch_disabled">
|
||||
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
||||
Publish on my profile my accomplishments
|
||||
</label>
|
||||
</fieldset>
|
||||
<footer class="code">
|
||||
|
||||
|
|
@ -151,22 +163,35 @@
|
|||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>>
|
||||
Large
|
||||
</<b>label</b>>
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"extralarge"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>>
|
||||
Extra Large
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<em><!-- Checkbox --></em>
|
||||
<em><!-- Checkboxes --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
||||
I agree to the Terms and Conditions
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms_sharing"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>>
|
||||
I agree to share my information with partners
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<em><!-- Switch --></em>
|
||||
<em><!-- Switches --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
||||
Publish on my profile
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||
Publish on my profile my accomplishments
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
<pre><code><em><!-- Button to trigger the modal --></em>
|
||||
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Launch demo modal
|
||||
</<b>button</b>>
|
||||
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
<i>aria-label</i>=<u>"Close"</u>>
|
||||
<i>class</i>=<u>"close"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
|
|
@ -122,13 +122,13 @@
|
|||
<i>role</i>=<u>"button"</u>>
|
||||
<i>class</i>=<u>"secondary"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Cancel
|
||||
</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Confirm
|
||||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Typography"
|
||||
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
|
||||
canonical="typography.html"
|
||||
}
|
||||
${require('./_head.html') title="Typography" description="All typographic
|
||||
elements are responsive, allowing text to scale gracefully across devices
|
||||
and viewports." canonical="typography.html" }
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -18,7 +16,10 @@
|
|||
<section id="typography">
|
||||
<hgroup>
|
||||
<h1>Typography</h1>
|
||||
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
|
||||
<h2>
|
||||
All typographic elements are responsive, allowing text to scale
|
||||
gracefully across devices and viewports.
|
||||
</h2>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
|
|
@ -109,38 +110,48 @@
|
|||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||||
<p>
|
||||
Inside a <code><<b>hgroup</b>></code> or a
|
||||
<code><<b>div</b> <i>class</i>=<u>"headings"</u>></code> all
|
||||
<code><i>margin-bottom</i></code> are collapsed and the
|
||||
<code>:last-child</code> is muted.
|
||||
</p>
|
||||
<article aria-label="Hgroup example">
|
||||
<hgroup>
|
||||
<div class="headings">
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Subtitle for heading 2</h3>
|
||||
</hgroup>
|
||||
</div>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>hgroup</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
</<b>hgroup</b>></code></pre>
|
||||
|
||||
<pre><code><<b>div</b> <i>class</i>=<u>"headings</u>">
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
</<b>div</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>Inline text elements:</p>
|
||||
<article aria-label="Inline text examples">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
|
||||
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
|
||||
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
|
||||
<p>
|
||||
<em>Italic</em> <code>i</code> <code>em</code>
|
||||
<code>cite</code>
|
||||
</p>
|
||||
<p><del>Deleted</del> <code>del</code></p>
|
||||
<p><ins>Inserted</ins> <code>ins</code></p>
|
||||
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
|
||||
|
|
@ -155,30 +166,34 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<p>
|
||||
Links come with <code>.secondary</code> and
|
||||
<code>.contrast</code> styles.
|
||||
</p>
|
||||
<article aria-label="Links examples">
|
||||
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
||||
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
|
||||
<a href="#" onclick="event.preventDefault()">Primary</a><br />
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary"
|
||||
>Secondary</a
|
||||
><br />
|
||||
<a href="#" onclick="event.preventDefault()" class="contrast"
|
||||
>Contrast</a
|
||||
><br />
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Blockquote:</p>
|
||||
<article aria-label="Blockquote example">
|
||||
<blockquote>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit
|
||||
non. Nam at dui sit amet ipsum cursus ornare."
|
||||
<footer>
|
||||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>blockquote</b>>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
|
|
@ -186,13 +201,11 @@
|
|||
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>blockquote</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -195,13 +195,12 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
// Button [disabled]
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
&[disabled] {
|
||||
button[disabled],
|
||||
input[type="submit"][disabled],
|
||||
input[type="button"][disabled],
|
||||
input[type="reset"][disabled],
|
||||
a[role="button"]:not([href]),
|
||||
a[role="button"][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,5 +87,5 @@ code {
|
|||
kbd {
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
|
|
|
|||
|
|
@ -181,6 +181,7 @@ ul {
|
|||
}
|
||||
|
||||
// Heading group
|
||||
@if $enable-classes == false {
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
|
|
@ -195,6 +196,25 @@ hgroup {
|
|||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
|
|
@ -228,7 +248,7 @@ mark {
|
|||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@
|
|||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
|
||||
// Transitions
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -149,11 +152,13 @@ a {
|
|||
--text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
@if $enable-classes {
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue