mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
Add progress bar
This commit is contained in:
Lucas
parent
fffb32dd7c
commit
c74bb0eabe
11 changed files with 273 additions and 28 deletions
|
|
@ -1545,11 +1545,6 @@ hr {
|
|||
border-top: 1px solid var(--muted-border);
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
|
|
@ -1880,6 +1875,64 @@ aside li a {
|
|||
padding: calc(var(--spacing-gutter) / 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress
|
||||
*/
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
progress:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
progress:indeterminate::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
63
css/pico.css
63
css/pico.css
|
|
@ -1778,11 +1778,6 @@ hr {
|
|||
border-top: 1px solid var(--muted-border);
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
|
|
@ -2113,6 +2108,64 @@ aside li a {
|
|||
padding: calc(var(--spacing-gutter) / 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress
|
||||
*/
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
progress:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
progress:indeterminate::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1541,11 +1541,6 @@ hr {
|
|||
border-top: 1px solid var(--muted-border);
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
|
|
@ -1876,6 +1871,64 @@ aside li a {
|
|||
padding: calc(var(--spacing-gutter) / 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress
|
||||
*/
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
progress:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
progress:indeterminate::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
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
|
|
@ -77,6 +77,7 @@
|
|||
<li><a href="#accordions" class="secondary">Accordions</a></li>
|
||||
<li><a href="#cards" class="secondary">Cards</a></li>
|
||||
<li><a href="#navs" class="secondary">Navs</a></li>
|
||||
<li><a href="#progress" class="secondary">Progress</a></li>
|
||||
<li><a href="#tooltips" class="secondary">Tooltips</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
|
|
@ -1074,6 +1075,22 @@
|
|||
</article>
|
||||
</section><!-- ./ Docs: Nav -->
|
||||
|
||||
<!-- Docs: Progress -->
|
||||
<section id="progress">
|
||||
<hgroup>
|
||||
<h2>Progress</h2>
|
||||
<h3>Progress bar element in pure HTML, without JavaScript.</h3>
|
||||
</hgroup>
|
||||
<article aria-label="Tooltips examples">
|
||||
<progress value="25" max="100"></progress>
|
||||
<progress indeterminate="true"></progress>
|
||||
|
||||
<pre><code><<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>></<b>progress</b>>
|
||||
<<b>progress</b> <i>indeterminate</i>=<u>"true"</u>></<b>progress</b>></code></pre>
|
||||
|
||||
</article>
|
||||
</section><!-- ./ Docs: Progress -->
|
||||
|
||||
<!-- Docs: Tooltips -->
|
||||
<section id="tooltips">
|
||||
<hgroup>
|
||||
|
|
@ -1090,7 +1107,7 @@
|
|||
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
|
||||
|
||||
</article>
|
||||
</section><!-- ./ Docs: Nav -->
|
||||
</section><!-- ./ Docs: Tooltips -->
|
||||
|
||||
<!-- Love -->
|
||||
<section id="love">
|
||||
|
|
|
|||
74
scss/components/_progress.scss
Normal file
74
scss/components/_progress.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* Progress
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||
progress {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
progress {
|
||||
|
||||
// Reset the default appearance
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
// Styles
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(--primary);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
background: transparent;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,13 +18,6 @@ hr {
|
|||
border-top: 1px solid var(--muted-border);
|
||||
}
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||
progress {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
[hidden],
|
||||
template {
|
||||
|
|
|
|||
|
|
@ -28,13 +28,14 @@
|
|||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "content/miscs"; // hr, progress, template, [hidden], dialog, canvas
|
||||
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/card-sectioning"; // article > header, footer, pre
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/tooltip"; // data-tooltip
|
||||
|
||||
// Reduce motion
|
||||
|
|
|
|||
|
|
@ -51,13 +51,14 @@ $enable-important: false;
|
|||
@import "content/table"; // table, tr, td, ...
|
||||
// @import "content/code"; // pre, code, ...
|
||||
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||
// @import "content/miscs"; // hr, progress, template, [hidden], dialog
|
||||
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/progress"; // progress
|
||||
// @import "components/tooltip"; // data-tooltip
|
||||
|
||||
// Reduce motion
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue