pico-rails 1.4.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +53 -0
  3. data/app/assets/stylesheets/pico.classless.scss +13 -0
  4. data/app/assets/stylesheets/pico.fluid.classless.scss +16 -0
  5. data/app/assets/stylesheets/pico.scss +42 -0
  6. data/app/assets/stylesheets/pico.slim.scss +47 -0
  7. data/app/assets/stylesheets/scss/_variables.scss +66 -0
  8. data/app/assets/stylesheets/scss/components/_accordion.scss +90 -0
  9. data/app/assets/stylesheets/scss/components/_card.scss +33 -0
  10. data/app/assets/stylesheets/scss/components/_modal.scss +175 -0
  11. data/app/assets/stylesheets/scss/components/_nav.scss +73 -0
  12. data/app/assets/stylesheets/scss/components/_progress.scss +81 -0
  13. data/app/assets/stylesheets/scss/content/_button.scss +227 -0
  14. data/app/assets/stylesheets/scss/content/_code.scss +91 -0
  15. data/app/assets/stylesheets/scss/content/_embedded.scss +53 -0
  16. data/app/assets/stylesheets/scss/content/_form-alt-input-types.scss +258 -0
  17. data/app/assets/stylesheets/scss/content/_form-checkbox-radio.scss +138 -0
  18. data/app/assets/stylesheets/scss/content/_form.scss +361 -0
  19. data/app/assets/stylesheets/scss/content/_miscs.scss +33 -0
  20. data/app/assets/stylesheets/scss/content/_table.scss +52 -0
  21. data/app/assets/stylesheets/scss/content/_typography.scss +292 -0
  22. data/app/assets/stylesheets/scss/layout/_container.scss +42 -0
  23. data/app/assets/stylesheets/scss/layout/_document.scss +45 -0
  24. data/app/assets/stylesheets/scss/layout/_grid.scss +24 -0
  25. data/app/assets/stylesheets/scss/layout/_scroller.scss +16 -0
  26. data/app/assets/stylesheets/scss/layout/_section.scss +8 -0
  27. data/app/assets/stylesheets/scss/layout/_sectioning.scss +69 -0
  28. data/app/assets/stylesheets/scss/themes/default/_colors.scss +65 -0
  29. data/app/assets/stylesheets/scss/themes/default/_dark.scss +139 -0
  30. data/app/assets/stylesheets/scss/themes/default/_light.scss +139 -0
  31. data/app/assets/stylesheets/scss/themes/default/_styles.scss +238 -0
  32. data/app/assets/stylesheets/scss/themes/default.scss +29 -0
  33. data/app/assets/stylesheets/scss/utilities/_accessibility.scss +54 -0
  34. data/app/assets/stylesheets/scss/utilities/_loading.scss +58 -0
  35. data/app/assets/stylesheets/scss/utilities/_reduce-motion.scss +29 -0
  36. data/app/assets/stylesheets/scss/utilities/_tooltip.scss +105 -0
  37. data/lib/pico/engine.rb +4 -0
  38. data/lib/pico/version.rb +3 -0
  39. data/lib/pico-rails.rb +5 -0
  40. data/pico-rails.gemspec +16 -0
  41. metadata +97 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: dd0c2c814510196236080602a40a9337d59c861ecaaf910699ffdfed17b99b64
4
+ data.tar.gz: f9a203a0560539e546151a7a35d918122c8c4e1474e21109afcd6ace19225627
5
+ SHA512:
6
+ metadata.gz: 5a43f98634b4730eae493fd9b014fd2b70e0914b6ba812ce89a3de433a4770a24ea705217765c961caf72b66b2583450d8cfb1395e1ac570805e58409df33f18
7
+ data.tar.gz: 3df4e21a8a0edc1eae26653bcdf3847a17c2ded98550e4acefd072d5d8e2ca9008a5d62af486184fc2f357b9da543c2903ff88deb80f5643dba51d1ad6456673
data/README.md ADDED
@@ -0,0 +1,53 @@
1
+ # pico-rails
2
+
3
+ Integrates [pico.css](https://picocss.com/) with the rails asset pipeline.
4
+
5
+ A Minimal CSS Framework for semantic HTML.
6
+
7
+ Pico.css provides elegant default styles on all native HTML elements
8
+ (which you can [preview here](https://picocss.com/examples/preview/))
9
+ without the need to add swaths of classes to your markup.
10
+
11
+ ## Installation
12
+
13
+ ```ruby
14
+ gem "pico-rails"
15
+ ```
16
+
17
+ And then execute:
18
+ ```bash
19
+ $ bundle
20
+ ```
21
+
22
+ Or install it yourself as:
23
+ ```bash
24
+ $ gem install pico-rails
25
+ ```
26
+
27
+ ## Usage
28
+
29
+ - To import all assets in your Rails project, add the following line to your application.scss:
30
+ ``` ruby
31
+ @import "pico";
32
+ ```
33
+
34
+ - To import pico.css classless version, then:
35
+
36
+ ``` ruby
37
+ @import "pico.classless";
38
+ ```
39
+
40
+ - To import pico.css fluid classless version, then:
41
+
42
+ ``` ruby
43
+ @import "pico.fluid.classless";
44
+ ```
45
+
46
+ - To import pico.css slim version, then:
47
+
48
+ ``` ruby
49
+ @import "pico.slim";
50
+ ```
51
+
52
+ For information about pico.css,
53
+ see: [https://picocss.com/docs/](https://picocss.com/docs/)
data/app/assets/stylesheets/pico.classless.scss ADDED
@@ -0,0 +1,13 @@
1
+ // Config
2
+ // --------------------
3
+
4
+ // Enable <header>, <main>, <footer> inside <body> as a container
5
+ $enable-semantic-container: true;
6
+
7
+ // Enable .classes
8
+ $enable-classes: false;
9
+
10
+ // Pico Lib
11
+ // --------------------
12
+
13
+ @import "pico";
data/app/assets/stylesheets/pico.fluid.classless.scss ADDED
@@ -0,0 +1,16 @@
1
+ // Config
2
+ // --------------------
3
+
4
+ // Enable <header>, <main>, <footer> inside <body> as a container
5
+ $enable-semantic-container: true;
6
+
7
+ // Enable a centered viewport for <header>, <main>, <footer> inside <body>
8
+ $enable-viewport: false;
9
+
10
+ // Enable .classes
11
+ $enable-classes: false;
12
+
13
+ // Pico Lib
14
+ // --------------------
15
+
16
+ @import "pico";
data/app/assets/stylesheets/pico.scss ADDED
@@ -0,0 +1,42 @@
1
+ /*!
2
+ * Pico.css v1.4.4 (https://picocss.com)
3
+ * Copyright 2019-2021 - Licensed under MIT
4
+ */
5
+
6
+ // Config
7
+ @import "scss/variables";
8
+
9
+ // Theming
10
+ @import "scss/themes/default";
11
+
12
+ // Layout
13
+ @import "scss/layout/document"; // html
14
+ @import "scss/layout/sectioning"; // body, header, main, footer
15
+ @import "scss/layout/container"; // .container, .container-fluid
16
+ @import "scss/layout/section"; // section
17
+ @import "scss/layout/grid"; // .grid
18
+ @import "scss/layout/scroller"; // figure
19
+
20
+ // Content
21
+ @import "scss/content/typography"; // a, headings, p, ul, blockquote, ...
22
+ @import "scss/content/embedded"; // audio, canvas, iframe, img, svg, video
23
+ @import "scss/content/button"; // button, a[role=button], type=button, type=submit ...
24
+ @import "scss/content/form"; // input, select, textarea, label, fieldset, legend
25
+ @import "scss/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
26
+ @import "scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
27
+ @import "scss/content/table"; // table, tr, td, ...
28
+ @import "scss/content/code"; // pre, code, ...
29
+ @import "scss/content/miscs"; // hr, template, [hidden], dialog, canvas
30
+
31
+ // Components
32
+ @import "scss/components/accordion"; // details, summary
33
+ @import "scss/components/card"; // article
34
+ @import "scss/components/modal"; // dialog
35
+ @import "scss/components/nav"; // nav
36
+ @import "scss/components/progress"; // progress
37
+
38
+ // Utilities
39
+ @import "scss/utilities/loading"; // aria-busy=true
40
+ @import "scss/utilities/tooltip"; // data-tooltip
41
+ @import "scss/utilities/accessibility"; // -ms-touch-action, aria-*
42
+ @import "scss/utilities/reduce-motion"; // prefers-reduced-motion
data/app/assets/stylesheets/pico.slim.scss ADDED
@@ -0,0 +1,47 @@
1
+ /*!
2
+ * Pico.css v1.4.4 (https://picocss.com)
3
+ * Copyright 2019-2021 - Licensed under MIT
4
+ *
5
+ * Slim version example
6
+ * You can export only the modules you need
7
+ */
8
+
9
+ // Config
10
+ // --------------------
11
+
12
+ // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
13
+ $enable-responsive-spacings: false;
14
+
15
+ // Enable transitions
16
+ $enable-transitions: false;
17
+
18
+ // Enable overriding with !important
19
+ $enable-important: false;
20
+
21
+ // Pico Lib
22
+ // --------------------
23
+
24
+ // Config
25
+ @import "scss/variables";
26
+
27
+ // Theming
28
+ @import "scss/themes/default";
29
+
30
+ // Layout
31
+ @import "scss/layout/document"; // html
32
+ @import "scss/layout/sectioning"; // body, header, main, footer
33
+ @import "scss/layout/container"; // .container, .container-fluid
34
+ @import "scss/layout/section"; // section
35
+ @import "scss/layout/grid"; // .grid
36
+ @import "scss/layout/scroller"; // figure
37
+
38
+ // Content
39
+ @import "scss/content/typography"; // a, headings, p, ul, blockquote, ...
40
+ @import "scss/content/embedded"; // audio, canvas, iframe, img, svg, video
41
+ @import "scss/content/button"; // button, a[role=button], type=button, type=submit ...
42
+ @import "scss/content/form"; // input, select, textarea, label, fieldset, legend
43
+ @import "scss/content/table"; // table, tr, td, ...
44
+
45
+ // Utilities
46
+ @import "scss/utilities/accessibility"; // -ms-touch-action, aria-*
47
+ @import "scss/utilities/reduce-motion"; // prefers-reduced-motion
data/app/assets/stylesheets/scss/_variables.scss ADDED
@@ -0,0 +1,66 @@
1
+ // Config
2
+ // ––––––––––––––––––––
3
+
4
+ // Enable <header>, <main>, <footer> inside <body> as a container
5
+ $enable-semantic-container: false !default;
6
+
7
+ // Enable .container and .container-fluid
8
+ $enable-class-container: true !default;
9
+
10
+ // Enable a centered viewport for <header>, <main>, <footer> inside <body>
11
+ // Fluid layout if disabled
12
+ $enable-viewport: true !default;
13
+
14
+ // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
15
+ // Fixed spacings if disabled
16
+ $enable-responsive-spacings: true !default;
17
+
18
+ // Enable responsive typography
19
+ // Fixed root element size if disabled
20
+ $enable-responsive-typography: true !default;
21
+
22
+ // Enable .classes
23
+ // .classless version if disabled
24
+ $enable-classes: true !default;
25
+
26
+ // Enable .grid class
27
+ $enable-grid: true !default;
28
+
29
+ // Enable transitions
30
+ $enable-transitions: true !default;
31
+
32
+ // Enable overriding with !important
33
+ $enable-important: true !default;
34
+
35
+ // Responsive
36
+ // ––––––––––––––––––––
37
+
38
+ // xs: Extra small (portrait phones)
39
+ // sm: Small(landscape phones)
40
+ // md: Medium(tablets)
41
+ // lg: Large(desktops)
42
+ // xl: Extra large (large desktops)
43
+
44
+ // NOTE:
45
+ // To provide an easy and fine styling on each breakpoint
46
+ // we didn't use @each, @mixin or @include.
47
+ // That means you need to edit each CSS selector file to add a breakpoint
48
+
49
+ // Breakpoints
50
+ // 'null' disable the breakpoint
51
+ $breakpoints: (
52
+ xs: 0,
53
+ sm: 576px,
54
+ md: 768px,
55
+ lg: 992px,
56
+ xl: 1200px,
57
+ ) !default;
58
+
59
+ // Viewports
60
+ $viewports: (
61
+ // 'null' disable the viewport on a breakpoint
62
+ sm: 510px,
63
+ md: 700px,
64
+ lg: 920px,
65
+ xl: 1130px
66
+ ) !default;
data/app/assets/stylesheets/scss/components/_accordion.scss ADDED
@@ -0,0 +1,90 @@
1
+ /**
2
+ * Accordion (<details>)
3
+ */
4
+
5
+ details {
6
+ display: block;
7
+ margin-bottom: var(--spacing);
8
+ padding-bottom: calc(var(--spacing) * 0.5);
9
+ border-bottom: var(--border-width) solid var(--accordion-border-color);
10
+
11
+ summary {
12
+ color: var(--accordion-close-summary-color);
13
+ line-height: 1rem;
14
+ list-style-type: none;
15
+ cursor: pointer;
16
+
17
+ @if $enable-transitions {
18
+ transition: color var(--transition);
19
+ }
20
+
21
+ // Reset marker
22
+ &::-webkit-details-marker {
23
+ display: none;
24
+ }
25
+
26
+ &::marker {
27
+ display: none;
28
+ }
29
+
30
+ &::-moz-list-bullet {
31
+ list-style-type: none;
32
+ }
33
+
34
+ // Marker
35
+ &::after {
36
+ display: block;
37
+ width: 1rem;
38
+ height: 1rem;
39
+ float: right;
40
+ transform: rotate(-90deg);
41
+ background-image: var(--icon-chevron);
42
+ background-position: center;
43
+ background-size: 1rem auto;
44
+ background-repeat: no-repeat;
45
+ content: "";
46
+
47
+ @if $enable-transitions {
48
+ transition: transform var(--transition);
49
+ }
50
+ }
51
+
52
+ &:focus {
53
+ outline: none;
54
+ color: var(--accordion-active-summary-color);
55
+ }
56
+
57
+ ~ * {
58
+ margin-top: calc(var(--spacing) * 0.5);
59
+
60
+ ~ * {
61
+ margin-top: 0;
62
+ }
63
+ }
64
+ }
65
+
66
+ // Open
67
+ &[open] {
68
+ > summary {
69
+ margin-bottom: calc(var(--spacing) * 0.25);
70
+
71
+ &:not(:focus) {
72
+ color: var(--accordion-open-summary-color);
73
+ }
74
+
75
+ &::after {
76
+ transform: rotate(0);
77
+ }
78
+ }
79
+ }
80
+ }
81
+
82
+ [dir="rtl"] {
83
+ details {
84
+ summary {
85
+ &::after {
86
+ float: left;
87
+ }
88
+ }
89
+ }
90
+ }
data/app/assets/stylesheets/scss/components/_card.scss ADDED
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Card (<article>)
3
+ */
4
+
5
+ article {
6
+ margin: var(--block-spacing-vertical) 0;
7
+ padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
8
+ overflow: hidden;
9
+ border-radius: var(--border-radius);
10
+ background: var(--card-background-color);
11
+ box-shadow: var(--card-box-shadow);
12
+
13
+ > header,
14
+ > footer {
15
+ margin-right: calc(var(--block-spacing-horizontal) * -1);
16
+ margin-left: calc(var(--block-spacing-horizontal) * -1);
17
+ padding: calc(var(--block-spacing-vertical) * 0.66)
18
+ var(--block-spacing-horizontal);
19
+ background-color: var(--card-sectionning-background-color);
20
+ }
21
+
22
+ > header {
23
+ margin-top: calc(var(--block-spacing-vertical) * -1);
24
+ margin-bottom: var(--block-spacing-vertical);
25
+ border-bottom: var(--border-width) solid var(--card-border-color);
26
+ }
27
+
28
+ > footer {
29
+ margin-top: var(--block-spacing-vertical);
30
+ margin-bottom: calc(var(--block-spacing-vertical) * -1);
31
+ border-top: var(--border-width) solid var(--card-border-color);
32
+ }
33
+ }
data/app/assets/stylesheets/scss/components/_modal.scss ADDED
@@ -0,0 +1,175 @@
1
+ /**
2
+ * Modal (<dialog>)
3
+ */
4
+
5
+ :root {
6
+ --scrollbar-width: 0px;
7
+ }
8
+
9
+ dialog {
10
+ display: flex;
11
+ z-index: 999;
12
+ position: fixed;
13
+ top: 0;
14
+ right: 0;
15
+ bottom: 0;
16
+ left: 0;
17
+ align-items: center;
18
+ justify-content: center;
19
+ width: inherit;
20
+ min-width: 100%;
21
+ height: inherit;
22
+ min-height: 100%;
23
+ padding: var(--spacing);
24
+ border: none;
25
+ background-color: var(--modal-overlay-background-color);
26
+
27
+ // Content
28
+ article {
29
+ max-height: calc(100vh - var(--spacing) * 2);
30
+ overflow: auto;
31
+
32
+ @if map-get($breakpoints, 'sm') {
33
+ @media (min-width: map-get($breakpoints, 'sm')) {
34
+ max-width: map-get($viewports, 'sm');
35
+ }
36
+ }
37
+
38
+ @if map-get($breakpoints, 'md') {
39
+ @media (min-width: map-get($breakpoints, 'md')) {
40
+ max-width: map-get($viewports, 'md');
41
+ }
42
+ }
43
+
44
+ > header,
45
+ > footer {
46
+ padding: calc(var(--block-spacing-vertical) * 0.5)
47
+ var(--block-spacing-horizontal);
48
+ }
49
+
50
+ > header {
51
+ .close {
52
+ margin: 0;
53
+ margin-left: var(--spacing);
54
+ float: right;
55
+ }
56
+ }
57
+
58
+ > footer {
59
+ text-align: right;
60
+
61
+ [role='button'] {
62
+ margin-bottom: 0;
63
+
64
+ &:not(:first-of-type) {
65
+ margin-left: calc(var(--spacing) * 0.5);
66
+ }
67
+ }
68
+ }
69
+
70
+ p {
71
+ &:last-of-type {
72
+ margin: 0;
73
+ }
74
+ }
75
+
76
+ // Close icon
77
+ @if $enable-classes {
78
+ .close {
79
+ display: block;
80
+ width: 1rem;
81
+ height: 1rem;
82
+ margin-top: calc(var(--block-spacing-vertical) * -0.5);
83
+ margin-bottom: var(--typography-spacing-vertical);
84
+ margin-left: auto;
85
+ background-image: var(--icon-close);
86
+ background-position: center;
87
+ background-size: auto 1rem;
88
+ background-repeat: no-repeat;
89
+ opacity: 0.5;
90
+
91
+ @if $enable-transitions {
92
+ transition: opacity var(--transition);
93
+ }
94
+
95
+ &:hover,
96
+ &:active,
97
+ &:focus {
98
+ opacity: 1;
99
+ }
100
+ }
101
+ }
102
+ }
103
+
104
+ // Closed state
105
+ &:not([open]),
106
+ &[open='false'] {
107
+ display: none;
108
+ }
109
+ }
110
+
111
+ // Utilities
112
+ @if $enable-classes {
113
+ .modal-is-open {
114
+ padding-right: var(--scrollbar-width, 0px);
115
+ overflow: hidden;
116
+ pointer-events: none;
117
+
118
+ dialog {
119
+ pointer-events: auto;
120
+ }
121
+ }
122
+ }
123
+
124
+ // Animations
125
+ @if ($enable-classes and $enable-transitions) {
126
+ $animation-duration: 0.2s;
127
+
128
+ .modal-is-opening,
129
+ .modal-is-closing {
130
+ dialog,
131
+ dialog > article {
132
+ animation-duration: $animation-duration;
133
+ animation-timing-function: ease-in-out;
134
+ animation-fill-mode: both;
135
+ }
136
+
137
+ dialog {
138
+ animation-duration: ($animation-duration * 4);
139
+ animation-name: fadeIn;
140
+
141
+ > article {
142
+ animation-delay: $animation-duration;
143
+ animation-name: slideInDown;
144
+ }
145
+ }
146
+ }
147
+
148
+ .modal-is-closing {
149
+ dialog,
150
+ dialog > article {
151
+ animation-delay: 0s;
152
+ animation-direction: reverse;
153
+ }
154
+ }
155
+
156
+ @keyframes fadeIn {
157
+ from {
158
+ background-color: transparent;
159
+ }
160
+ to {
161
+ background-color: var(--modal-overlay-background-color);
162
+ }
163
+ }
164
+
165
+ @keyframes slideInDown {
166
+ from {
167
+ transform: translateY(-100%);
168
+ opacity: 0;
169
+ }
170
+ to {
171
+ transform: translateY(0);
172
+ opacity: 1;
173
+ }
174
+ }
175
+ }
data/app/assets/stylesheets/scss/components/_nav.scss ADDED
@@ -0,0 +1,73 @@
1
+ /**
2
+ * Nav
3
+ */
4
+
5
+ // Horizontal Nav
6
+ nav,
7
+ nav ul {
8
+ display: flex;
9
+ }
10
+
11
+ nav {
12
+ justify-content: space-between;
13
+
14
+ ol,
15
+ ul {
16
+ align-items: center;
17
+ margin-bottom: 0;
18
+ padding: 0;
19
+ list-style: none;
20
+
21
+ &:first-of-type {
22
+ margin-left: calc(var(--spacing) * -0.5);
23
+ }
24
+ &:last-of-type {
25
+ margin-right: calc(var(--spacing) * -0.5);
26
+ }
27
+ }
28
+
29
+ li {
30
+ display: inline-block;
31
+ margin: 0;
32
+ padding: var(--spacing) calc(var(--spacing) * 0.5);
33
+
34
+ // HACK: Input & Button inside Nav
35
+ > *,
36
+ > input:not([type="checkbox"]):not([type="radio"]) {
37
+ margin-bottom: 0;
38
+ }
39
+ }
40
+
41
+ a {
42
+ display: block;
43
+ margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
44
+ padding: var(--spacing) calc(var(--spacing) * 0.5);
45
+ border-radius: var(--border-radius);
46
+ text-decoration: none;
47
+
48
+ &:hover,
49
+ &:active,
50
+ &:focus {
51
+ text-decoration: none;
52
+ }
53
+ }
54
+ }
55
+
56
+ // Vertical Nav
57
+ aside {
58
+ nav,
59
+ ol,
60
+ ul,
61
+ li {
62
+ display: block;
63
+ }
64
+
65
+ li {
66
+ padding: calc(var(--spacing) * 0.5);
67
+
68
+ a {
69
+ margin: calc(var(--spacing) * -0.5);
70
+ padding: calc(var(--spacing) * 0.5);
71
+ }
72
+ }
73
+ }
data/app/assets/stylesheets/scss/components/_progress.scss ADDED
@@ -0,0 +1,81 @@
1
+ /**
2
+ * Progress
3
+ */
4
+
5
+ // Reboot based on :
6
+ // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
7
+ // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
8
+ // ––––––––––––––––––––
9
+
10
+ // 1. Add the correct display in Edge 18- and IE
11
+ // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
12
+ progress {
13
+ display: inline-block; // 1
14
+ vertical-align: baseline; // 2
15
+ }
16
+
17
+ // Pico
18
+ // ––––––––––––––––––––
19
+
20
+ progress {
21
+ // Reset the default appearance
22
+ -webkit-appearance: none;
23
+ -moz-appearance: none;
24
+
25
+ // Styles
26
+ display: inline-block;
27
+ appearance: none;
28
+ width: 100%;
29
+ height: 0.5rem;
30
+ margin-bottom: calc(var(--spacing) * 0.5);
31
+ overflow: hidden;
32
+
33
+ // Remove Firefox and Opera border
34
+ border: 0;
35
+ border-radius: var(--border-radius);
36
+ background-color: var(--progress-background-color);
37
+
38
+ // IE10 uses `color` to set the bar background-color
39
+ color: var(--progress-color);
40
+
41
+ &::-webkit-progress-bar {
42
+ border-radius: var(--border-radius);
43
+ background: transparent;
44
+ }
45
+ &[value]::-webkit-progress-value {
46
+ background-color: var(--progress-color);
47
+ }
48
+ &::-moz-progress-bar {
49
+ background-color: var(--progress-color);
50
+ }
51
+
52
+ // Indeterminate state
53
+ @media (prefers-reduced-motion: no-preference) {
54
+ &:indeterminate {
55
+ background: var(--progress-background-color)
56
+ linear-gradient(
57
+ to right,
58
+ var(--progress-color) 30%,
59
+ var(--progress-background-color) 30%
60
+ )
61
+ top left / 150% 150% no-repeat;
62
+ animation: progressIndeterminate 1s linear infinite;
63
+
64
+ &[value]::-webkit-progress-value {
65
+ background-color: transparent;
66
+ }
67
+ &::-moz-progress-bar {
68
+ background-color: transparent;
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ @keyframes progressIndeterminate {
75
+ 0% {
76
+ background-position: 200% 0;
77
+ }
78
+ 100% {
79
+ background-position: -200% 0;
80
+ }
81
+ }