pico-rails 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/README.md +53 -0
- data/app/assets/stylesheets/pico.classless.scss +13 -0
- data/app/assets/stylesheets/pico.fluid.classless.scss +16 -0
- data/app/assets/stylesheets/pico.scss +42 -0
- data/app/assets/stylesheets/pico.slim.scss +47 -0
- data/app/assets/stylesheets/scss/_variables.scss +66 -0
- data/app/assets/stylesheets/scss/components/_accordion.scss +90 -0
- data/app/assets/stylesheets/scss/components/_card.scss +33 -0
- data/app/assets/stylesheets/scss/components/_modal.scss +175 -0
- data/app/assets/stylesheets/scss/components/_nav.scss +73 -0
- data/app/assets/stylesheets/scss/components/_progress.scss +81 -0
- data/app/assets/stylesheets/scss/content/_button.scss +227 -0
- data/app/assets/stylesheets/scss/content/_code.scss +91 -0
- data/app/assets/stylesheets/scss/content/_embedded.scss +53 -0
- data/app/assets/stylesheets/scss/content/_form-alt-input-types.scss +258 -0
- data/app/assets/stylesheets/scss/content/_form-checkbox-radio.scss +138 -0
- data/app/assets/stylesheets/scss/content/_form.scss +361 -0
- data/app/assets/stylesheets/scss/content/_miscs.scss +33 -0
- data/app/assets/stylesheets/scss/content/_table.scss +52 -0
- data/app/assets/stylesheets/scss/content/_typography.scss +292 -0
- data/app/assets/stylesheets/scss/layout/_container.scss +42 -0
- data/app/assets/stylesheets/scss/layout/_document.scss +45 -0
- data/app/assets/stylesheets/scss/layout/_grid.scss +24 -0
- data/app/assets/stylesheets/scss/layout/_scroller.scss +16 -0
- data/app/assets/stylesheets/scss/layout/_section.scss +8 -0
- data/app/assets/stylesheets/scss/layout/_sectioning.scss +69 -0
- data/app/assets/stylesheets/scss/themes/default/_colors.scss +65 -0
- data/app/assets/stylesheets/scss/themes/default/_dark.scss +139 -0
- data/app/assets/stylesheets/scss/themes/default/_light.scss +139 -0
- data/app/assets/stylesheets/scss/themes/default/_styles.scss +238 -0
- data/app/assets/stylesheets/scss/themes/default.scss +29 -0
- data/app/assets/stylesheets/scss/utilities/_accessibility.scss +54 -0
- data/app/assets/stylesheets/scss/utilities/_loading.scss +58 -0
- data/app/assets/stylesheets/scss/utilities/_reduce-motion.scss +29 -0
- data/app/assets/stylesheets/scss/utilities/_tooltip.scss +105 -0
- data/lib/pico/engine.rb +4 -0
- data/lib/pico/version.rb +3 -0
- data/lib/pico-rails.rb +5 -0
- data/pico-rails.gemspec +16 -0
- 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/)
|
|
@@ -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";
|
|
@@ -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";
|
|
@@ -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
|
|
@@ -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
|
|
@@ -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;
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|