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:
|
||||
|
||||
|
|
@ -184,4 +184,4 @@ Website and docs:
|
|||
Pico Library:
|
||||
- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
||||
- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
||||
- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))
|
||||
- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.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
|
|
@ -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]),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
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
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,24 +1,25 @@
|
|||
<!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>
|
||||
${require('./_nav.html')}
|
||||
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="typography-link"}
|
||||
|
||||
|
||||
<div role="document">
|
||||
<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>>
|
||||
<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>>
|
||||
<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,44 +166,46 @@
|
|||
</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>>
|
||||
<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>>
|
||||
<pre><code><<b>blockquote</b>>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
<<b>footer</b>>
|
||||
<<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
|
|
@ -100,4 +100,4 @@
|
|||
"last 2 major versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -195,13 +195,12 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
// Button [disabled]
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
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,18 +181,38 @@ ul {
|
|||
}
|
||||
|
||||
// Heading group
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
@if $enable-classes == false {
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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,9 +152,11 @@ a {
|
|||
--text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
@if $enable-classes {
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue