├── .gitignore
├── LICENSE
├── README.md
├── _colors.scss
├── _grid.scss
├── _modals.scss
├── _reset.scss
├── _sliders.scss
├── _spacing.scss
├── _typography.scss
├── _ui.scss
├── _utilities.scss
├── _variables.scss
├── dist
├── spry-slider.min.js
├── spry.min.css
├── spry.min.css.gz
└── spry.min.css.map
├── docs
├── BingSiteAuth.xml
├── favicon.ico
├── google2d33604b802b787a.html
├── highlight.css
├── index.html
├── placeholder-wide.jpg
├── placeholder.jpg
├── prism.css
├── prism.js
├── slider.js
├── spry.min.css
└── spry.min.css.map
├── package-lock.json
├── package.json
└── spry.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | ####### Misc Files #######
2 | .DS_Store
3 | .DS_Store?
4 | ._*
5 | .Spotlight-V100
6 | .Trashes
7 | ehthumbs.db
8 | *[Tt]humbs.db
9 | *.Trashes
10 | *.lock
11 | *.DS_Store
12 | *.swp
13 | *.out
14 | *.log
15 | error_log
16 | access_log
17 | .sass-cache
18 | node_modules
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 GGedde
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SpryCss
2 | A simple and customizable CSS Toolkit while being as lightweight as possible (Only 13kb gzipped)
3 |
4 |  
5 |
6 | ## [View Documentation](https://ggedde.github.io/spry-css)
--------------------------------------------------------------------------------
/_colors.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Colors
3 | */
4 | .dark {
5 | --spry-color-light: #{map-get($colors, 'dark')};
6 | --spry-color-dark : #{map-get($colors, 'light')};
7 | --spry-color-text : #{map-get($colors, 'light')};
8 | }
9 |
10 | @each $color_name,
11 | $color_value in $colors {
12 | .bg-#{$color_name} {
13 | background-color: var(--spry-color-#{$color_name});
14 | }
15 |
16 | .alert-#{$color_name},
17 | .link-color-#{$color_name} a {
18 | color: var(--spry-color-#{$color_name});
19 | }
20 |
21 | .link-color-hover-#{$color_name} a:not(.btn):not([class*="color-hover-"]):hover,
22 | .link-color-hover-#{$color_name} a:not(.btn):not([class*="color-hover-"]):focus {
23 | color: var(--spry-color-#{$color_name});
24 | }
25 |
26 | .alert-#{$color_name},
27 | article.accent-#{$color_name},
28 | .accent-#{$color_name} .border:not([class*="border-"]):hover,
29 | .accent-#{$color_name} .border:not([class*="border-"]),
30 | .alert.border-#{$color_name},
31 | [class*="accent-"].border-#{$color_name} {
32 | border-color: var(--spry-color-#{$color_name});
33 | }
34 |
35 | @if $color_name !=inherit {
36 |
37 | .accent-#{$color_name},
38 | .btn-#{$color_name} {
39 | --spry-btn-color : var(--spry-color-#{$color_name});
40 | --spry-btn-color-rgb : var(--spry-color-#{$color_name}-rgb);
41 | --spry-btn-color-text: #{map-get($colors, 'white')};
42 | }
43 | }
44 |
45 | .btn-outline,
46 | .btn-hazy,
47 | .btn-link {
48 | --spry-btn-color-text: var(--spry-btn-color);
49 | }
50 |
51 | .accent-#{$color_name} {
52 | --spry-accent-color: var(--spry-color-#{$color_name});
53 |
54 | @if $color_name !=light {
55 | --spry-card-accent-text: white;
56 | }
57 |
58 | @if $color_name !=inherit {
59 | tbody tr:hover td {
60 | background-color: rgba($color_value, .04);
61 | }
62 | }
63 | }
64 | }
65 |
66 | article {
67 | --spry-accent-color : var(--spry-color-light);
68 | --spry-btn-color : var(--spry-color-light);
69 | --spry-btn-color-text: #{map-get($colors, 'text')};
70 | }
71 |
72 | .dark {
73 | background-color: darken(map-get($colors, 'dark'), 15%);
74 | color : map-get($colors, 'light');
75 |
76 | article,
77 | .bg-light {
78 | background-color : darken(map-get($colors, 'dark'), 7%);
79 | color : map-get($colors, 'light');
80 | --spry-btn-color-text: #{map-get($colors, 'light')};
81 | }
82 |
83 | .bg-dark {
84 | background-color: darken(map-get($colors, 'dark'), 5%);
85 | color : map-get($colors, 'light');
86 | }
87 |
88 | .btn-dark,
89 | a.btn-dark {
90 | --spry-btn-color : #{darken(map-get($colors, 'dark' ), 5%)};
91 | --spry-btn-color-rgb : #{red(darken(map-get($colors, 'dark' ), 5%)), green(darken(map-get($colors, 'dark' ), 5%)), blue(darken(map-get($colors, 'dark' ), 5%))};
92 | --spry-btn-color-text: #{map-get($colors, 'light' )};
93 | }
94 |
95 | .btn.btn-dark.btn-outline {
96 | border-color: map-get($colors, 'light');
97 | color : map-get($colors, 'light');
98 |
99 | &:hover {
100 | background-color: darken(map-get($colors, 'dark'), 10%);
101 | border-color : map-get($colors, 'light');
102 | color : map-get($colors, 'light');
103 | }
104 | }
105 |
106 | .btn-dark.btn-hazy,
107 | .btn-dark.btn-link {
108 | color: map-get($colors, 'light');
109 | }
110 |
111 | select option {
112 | background: #333;
113 | color : #eee;
114 | }
115 | }
116 |
117 | .btn,
118 | a.btn,
119 | a.btn:hover,
120 | a.btn:focus,
121 | input[type="submit"] {
122 | color: var(--spry-btn-color-text);
123 |
124 | &.btn-outline:not([class*="color-"]),
125 | &.btn-hazy:not([class*="color-"]),
126 | &.btn-link:not([class*="color-"]) {
127 | color: var(--spry-btn-color-text);
128 | }
129 | }
130 |
131 | @each $color_name,
132 | $color_value in $colors {
133 |
134 | .color-#{$color_name},
135 | a.color-#{$color_name},
136 | a.btn.color-#{$color_name},
137 | .color-hover-#{$color_name}:hover,
138 | .color-hover-#{$color_name}:focus,
139 | a.color-hover-#{$color_name}:hover,
140 | a.color-hover-#{$color_name}:focus,
141 | a.btn.color-hover-#{$color_name}:hover,
142 | a.btn.color-hover-#{$color_name}:focus,
143 | button.color-#{$color_name},
144 | button.color-hover-#{$color_name}:hover,
145 | button.color-hover-#{$color_name}:focus {
146 | color: var(--spry-color-#{$color_name});
147 | }
148 | }
--------------------------------------------------------------------------------
/_grid.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Grid
3 | */
4 | .grid {
5 | display: grid;
6 | gap: var(--spry-gap);
7 | }
8 |
9 | .row {
10 | display: flex;
11 | flex-wrap: wrap;
12 | gap: var(--spry-gap);
13 | > * {
14 | flex: 0 100%;
15 | }
16 | &.columns-fixed > *,
17 | > .col-fixed {
18 | flex: 1;
19 | }
20 | &.columns-auto > *{
21 | flex: auto;
22 | min-width: auto;
23 | max-width: none;
24 | }
25 | > .col-auto {
26 | flex: 0 auto;
27 | min-width: auto;
28 | max-width: none;
29 | }
30 | }
31 |
32 | @for $i from 1 through 12 {
33 | .grid.columns-#{$i} {
34 | grid-template-columns: repeat($i, minmax(0, 1fr));
35 | }
36 | .grid-#{$i}00 {
37 | display: grid;
38 | grid-template-columns: repeat( auto-fit, minmax(#{$i}00px, 1fr));
39 | gap: var(--spry-gap);
40 | }
41 | .row.columns-#{$i}>* {
42 | flex: none;
43 | flex-basis: calc(#{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)} - ((var(--spry-gap) * (#{$i} - 1)) / #{$i}));
44 | }
45 |
46 | .row>.col-#{$i} {
47 | flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - var(--spry-gap));
48 | max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - (((var(--spry-gap) * (#{$i} / 12)) - var(--spry-gap)) / (#{$i} / 12)));
49 | }
50 |
51 | .grid>.col-#{$i} {
52 | @if $i > 1 {
53 | grid-column: 1 / span #{$i};
54 | }
55 | }
56 | }
57 |
58 | @each $breakpoint, $breakpoint_width in $breakpoints {
59 |
60 | .#{$breakpoint}-mw {
61 | max-width: $breakpoint_width;
62 | }
63 |
64 | @media screen and (min-width: $breakpoint_width) {
65 |
66 | .row > *,
67 | .row.#{$breakpoint}-columns-fixed > *,
68 | .row > .#{$breakpoint}-col-fixed {
69 | flex: 1;
70 | }
71 | .row.#{$breakpoint}-columns-auto > * {
72 | flex: auto;
73 | min-width: auto;
74 | max-width: none;
75 | }
76 | .row > .#{$breakpoint}-col-auto {
77 | flex: 0 auto;
78 | min-width: auto;
79 | max-width: none;
80 | }
81 |
82 | @for $i from 1 through 12 {
83 | .grid.#{$breakpoint}-columns-#{$i} {
84 | grid-template-columns: repeat($i, minmax(0, 1fr))
85 | }
86 | .row.#{$breakpoint}-columns-#{$i} > * {
87 | flex: none;
88 | flex-basis: calc(#{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)} - ((var(--spry-gap) * (#{$i} - 1)) / #{$i}));
89 | }
90 |
91 | .row > .#{$breakpoint}-col-#{$i} {
92 | flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - var(--spry-gap));
93 | max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - (((var(--spry-gap) * (#{$i} / 12)) - var(--spry-gap)) / (#{$i} / 12)));
94 |
95 | }
96 |
97 | .grid > .#{$breakpoint}-col-#{$i} {
98 | @if $i > 1 {
99 | grid-column: 1 / span #{$i};
100 | }
101 | }
102 | }
103 | }
104 | }
105 | @each $s, $space in $spacing {
106 |
107 | .g-#{$s} {
108 | gap: var(--spry-gap);
109 | --spry-gap: #{$space};
110 | }
111 |
112 | @each $breakpoint, $breakpoint_width in $breakpoints {
113 | @media screen and (min-width: $breakpoint_width) {
114 | .#{$breakpoint}-g-#{$s} {
115 | gap: var(--spry-gap);
116 | --spry-gap: #{$space};
117 | }
118 | }
119 | }
120 | }
--------------------------------------------------------------------------------
/_modals.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Modals
3 | */
4 | @keyframes modalAlert {
5 | 20% {
6 | transform: scale(1.03);
7 | }
8 | 40% {
9 | transform: scale(1);
10 | }
11 | 60% {
12 | transform: scale(1.03);
13 | }
14 | 80% {
15 | transform: none;
16 | }
17 | }
18 | .modal {
19 | align-items: center;
20 | background-color: rgba(0, 0, 0, .7);
21 | justify-content: center;
22 | opacity: 0;
23 | pointer-events: none;
24 | position: fixed;
25 | inset: 0;
26 | transition: opacity .25s cubic-bezier(.25,.8,.25,1);
27 | z-index: 1000;
28 | display: flex;
29 | &.bounce {
30 | animation-name: modalAlert;
31 | animation-duration: .4s;
32 | }
33 | &.show {
34 | opacity: 1;
35 | pointer-events: all;
36 | }
37 | &.blur {
38 | backdrop-filter: blur(2px);
39 | }
40 | &.no-backdrop {
41 | background-color: transparent;
42 | backdrop-filter: none;
43 | min-width: 300px;
44 | }
45 | &.no-backdrop.show {
46 | pointer-events: none;
47 | .modal-content {
48 | pointer-events: all;
49 | }
50 | }
51 | }
52 |
53 | .modal-content {
54 | position: relative;
55 | box-sizing: border-box;
56 | display: block;
57 | overflow: hidden;
58 | transform: scale(.6);
59 | transition: transform .3s cubic-bezier(.25,.8,.25,1);
60 | width: 90%;
61 | .modal.show & {
62 | transform: none;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/_reset.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Reset
3 | */
4 | html {
5 | box-sizing: border-box;
6 | }
7 |
8 | *,
9 | *:before,
10 | *:after {
11 | box-sizing: inherit;
12 | }
13 |
14 | body,
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6,
21 | p,
22 | fieldset,
23 | ol,
24 | ul {
25 | margin: 0;
26 | padding: 0;
27 | }
28 |
29 | ul {
30 | list-style: disc;
31 | }
32 | ul, ol {
33 | li {
34 | margin-top: .5rem;
35 | margin-bottom: .5rem;
36 | }
37 | }
38 |
39 | ol,
40 | ul {
41 | margin-left: 1.5rem;
42 | nav & {
43 | list-style: none;
44 | margin-left: 0;
45 | li {
46 | margin-top: 0;
47 | margin-bottom: 0;
48 | }
49 |
50 | }
51 | }
52 |
53 | img {
54 | display: block;
55 | max-width: 100%;
56 | height: auto;
57 | }
58 |
--------------------------------------------------------------------------------
/_sliders.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Sliders
3 | */
4 | .slider {
5 | position: relative;
6 |
7 | &-slides {
8 | display : flex;
9 | overflow-x : scroll;
10 | scroll-behavior : smooth;
11 | scroll-snap-type : x mandatory;
12 | -ms-overflow-style: none;
13 | flex-wrap : nowrap;
14 |
15 | &::-webkit-scrollbar {
16 | width : 0;
17 | display: none;
18 | }
19 |
20 | &::-webkit-scrollbar-track {
21 | background: transparent;
22 | }
23 |
24 | &::-webkit-scrollbar-thumb {
25 | background: transparent;
26 | border : none;
27 | }
28 |
29 | >* {
30 | display : flex;
31 | flex-direction : column;
32 | position : relative;
33 | flex : 0 0 100%;
34 | width : 100%;
35 | scroll-snap-align: start;
36 | justify-content : center;
37 | }
38 | }
39 | &[data-snap] .slider-slides > * {
40 | scroll-snap-stop: always;
41 | }
42 | .grid img[loading="lazy"],
43 | .row img[loading="lazy"] {
44 | width: 100%;
45 | height: 100%;
46 | }
47 | .slider-prev,
48 | .slider-next {
49 | content : '';
50 | z-index : 1;
51 | position : absolute;
52 | top : 50%;
53 | left : 0;
54 | transform: translateY(-50%);
55 | transition: opacity .2s ease-in-out;
56 | }
57 |
58 | .slider-next {
59 | right: 0;
60 | left : auto;
61 | }
62 | &[data-position="start"] .slider-prev,
63 | &[data-position="end"] .slider-next {
64 | opacity: 0;
65 | }
66 |
67 | .slider-pagination {
68 | display: flex;
69 | justify-content: center;
70 | align-items: center;
71 | gap: 2%;
72 | & > * {
73 | cursor: pointer;
74 | border-radius: 50%;
75 | background-color: var(--spry-accent-color);
76 | width: 1em;
77 | height: 1em;
78 | transition: opacity .2s ease-in-out;
79 | opacity: .4;
80 | &:hover,
81 | &.active {
82 | opacity: 1;
83 | }
84 | }
85 | }
86 | }
--------------------------------------------------------------------------------
/_spacing.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Spacing
3 | */
4 | .m-auto {
5 | margin: auto;
6 | }
7 | .my-auto,
8 | .mt-auto {
9 | margin-top: auto;
10 | }
11 | .my-auto,
12 | .mb-auto {
13 | margin-bottom: auto;
14 | }
15 | .mx-auto,
16 | .ml-auto {
17 | margin-left: auto;
18 | display: block;
19 | }
20 | .mx-auto,
21 | .mr-auto {
22 | margin-right: auto;
23 | display: block;
24 | }
25 | @each $s, $space in $spacing {
26 | @each $prop in (padding, margin) {
27 | .#{str-slice($prop, 0, 1)}-#{$s} {
28 | #{$prop}: #{$space};
29 | }
30 | .#{str-slice($prop, 0, 1)}x-#{$s},
31 | .#{str-slice($prop, 0, 1)}l-#{$s} {
32 | #{$prop}-left: #{$space};
33 | }
34 | .#{str-slice($prop, 0, 1)}x-#{$s},
35 | .#{str-slice($prop, 0, 1)}r-#{$s} {
36 | #{$prop}-right: #{$space};
37 | }
38 | .#{str-slice($prop, 0, 1)}y-#{$s},
39 | .#{str-slice($prop, 0, 1)}t-#{$s} {
40 | #{$prop}-top: #{$space};
41 | }
42 | .#{str-slice($prop, 0, 1)}y-#{$s},
43 | .#{str-slice($prop, 0, 1)}b-#{$s} {
44 | #{$prop}-bottom: #{$space};
45 | }
46 | @if $prop == margin and $s {
47 | .#{str-slice($prop, 0, 1)}x-n#{$s},
48 | .#{str-slice($prop, 0, 1)}l-n#{$s} {
49 | #{$prop}-left: -#{$space};
50 | }
51 | .#{str-slice($prop, 0, 1)}x-n#{$s},
52 | .#{str-slice($prop, 0, 1)}r-n#{$s} {
53 | #{$prop}-right: -#{$space};
54 | }
55 | .#{str-slice($prop, 0, 1)}y-n#{$s},
56 | .#{str-slice($prop, 0, 1)}t-n#{$s} {
57 | #{$prop}-top: -#{$space};
58 | }
59 | .#{str-slice($prop, 0, 1)}y-n#{$s},
60 | .#{str-slice($prop, 0, 1)}b-n#{$s} {
61 | #{$prop}-bottom: -#{$space};
62 | }
63 | }
64 | }
65 | }
66 | @each $breakpoint, $breakpoint_width in $breakpoints {
67 | @media screen and (min-width: $breakpoint_width) {
68 | .#{$breakpoint}-m-auto {
69 | margin: auto;
70 | }
71 | .#{$breakpoint}-my-auto,
72 | .#{$breakpoint}-mt-auto {
73 | margin-top: auto;
74 | }
75 | .#{$breakpoint}-my-auto,
76 | .#{$breakpoint}-mb-auto {
77 | margin-bottom: auto;
78 | }
79 | .#{$breakpoint}-mx-auto,
80 | .#{$breakpoint}-ml-auto {
81 | margin-left: auto;
82 | display: block;
83 | }
84 | .#{$breakpoint}-mx-auto,
85 | .#{$breakpoint}-mr-auto {
86 | margin-right: auto;
87 | display: block;
88 | }
89 | @each $s, $space in $spacing {
90 | @each $prop in (padding, margin) {
91 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}-#{$s} {
92 | #{$prop}: #{$space};
93 | }
94 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}x-#{$s},
95 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}l-#{$s} {
96 | #{$prop}-left: #{$space};
97 | }
98 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}x-#{$s},
99 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}r-#{$s} {
100 | #{$prop}-right: #{$space};
101 | }
102 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}y-#{$s},
103 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}t-#{$s} {
104 | #{$prop}-top: #{$space};
105 | }
106 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}y-#{$s},
107 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}b-#{$s} {
108 | #{$prop}-bottom: #{$space};
109 | }
110 | @if $prop == margin and $s {
111 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}x-n#{$s},
112 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}l-n#{$s} {
113 | #{$prop}-left: -#{$space};
114 | }
115 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}x-n#{$s},
116 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}r-n#{$s} {
117 | #{$prop}-right: -#{$space};
118 | }
119 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}y-n#{$s},
120 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}t-n#{$s} {
121 | #{$prop}-top: -#{$space};
122 | }
123 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}y-n#{$s},
124 | .#{$breakpoint}-#{str-slice($prop, 0, 1)}b-n#{$s} {
125 | #{$prop}-bottom: -#{$space};
126 | }
127 | }
128 | }
129 | }
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/_typography.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Typography
3 | */
4 | input, textarea, select {
5 | font-family: inherit;
6 | font-weight: inherit;
7 | color: inherit;
8 | }
9 |
10 | // Heading Font Sizes and Classes
11 | @each $type_name, $type in $types {
12 | .#{$type_name}, #{$type_name} {
13 | @each $type_field, $type_value in $type {
14 | #{$type_field}: $type_value;
15 | }
16 | p + & {
17 | margin-top: 2rem;
18 | }
19 | }
20 | }
21 |
22 | section {
23 | h1 {
24 | margin-top: -.7rem;
25 | }
26 | h2 {
27 | margin-top: -.6rem;
28 | }
29 | h3 {
30 | margin-top: -.5rem;
31 | }
32 | }
33 |
34 | :not(article) > :is(h1, h2, h3, h4, h5, h6, p) + :is(h2, h3, h4, h5, h6, p, .btn) {
35 | margin-top: 1rem;
36 | }
37 |
38 | a {
39 | cursor: pointer;
40 | color: map-get($colors, 'primary');
41 | text-decoration: none;
42 | transition: color .2s ease-in-out;
43 | &:hover,
44 | &:focus {
45 | text-decoration: none;
46 | // color: lighten(map-get($colors, 'primary'), 10%);
47 | }
48 | }
49 |
50 | blockquote {
51 | margin: 1rem;
52 | &::before {
53 | content: '\201C';
54 | }
55 | &::after {
56 | content: '\201D';
57 | }
58 | p {
59 | font: inherit;
60 | display: inline;
61 | color: inherit;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/_ui.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry UI
3 | */
4 | .btn,
5 | button,
6 | input,
7 | textarea,
8 | select,
9 | .alert,
10 | nav>a,
11 | .toolbar,
12 | nav li>a {
13 | position : relative;
14 | appearance : none;
15 | color : inherit;
16 | background : transparent;
17 | min-height : 2.3em;
18 | min-width : 2.3em;
19 | height : auto;
20 | padding : 0 1em;
21 | width : 100%;
22 | display : inline-flex;
23 | align-items : center;
24 | text-decoration: none;
25 | outline : none;
26 | vertical-align : middle;
27 | border : 0;
28 | font-size : 100%;
29 | }
30 |
31 | button {
32 | width: auto;
33 | }
34 |
35 | input,
36 | textarea,
37 | select {
38 |
39 | &:hover,
40 | &:focus {
41 | border-color: var(--spry-accent-color);
42 | }
43 |
44 | &:focus {
45 | box-shadow: inset 0 0 0 1px var(--spry-accent-color);
46 | }
47 | }
48 |
49 | input,
50 | textarea,
51 | select,
52 | a,
53 | button {
54 | outline: none;
55 |
56 | &:focus-visible:not(:hover) {
57 | outline : 2px solid rgba(140, 140, 140, 0.25);
58 | outline-offset: 2px;
59 | }
60 | }
61 |
62 | label.btn:has(:focus-visible) {
63 | outline : 2px solid rgba(140, 140, 140, 0.25);
64 | outline-offset: 2px;
65 | }
66 |
67 | .btn-menu input[type="checkbox"] {
68 | outline: none;
69 | }
70 |
71 | input[type="checkbox"],
72 | input[type="radio"] {
73 | &:focus-visible:not(:hover) {
74 | outline-width: 4px;
75 | }
76 | }
77 |
78 | .btn,
79 | input,
80 | textarea,
81 | select,
82 | .alert,
83 | article,
84 | .list li>a,
85 | .list li>button {
86 | border : 1px solid map-get($colors, 'medium');
87 | border-radius : 3px;
88 | justify-content: center;
89 | }
90 |
91 | a:not(.btn),
92 | .btn,
93 | input,
94 | textarea,
95 | select,
96 | .alert,
97 | .list li>a,
98 | .list li>button {
99 | transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, filter .2s ease-in-out;
100 | }
101 |
102 | .btn,
103 | input,
104 | textarea,
105 | select,
106 | .list li>a,
107 | .list li>button {
108 | ::placeholder {
109 | color: #999;
110 | }
111 |
112 | &:disabled {
113 | opacity: .6;
114 | cursor : not-allowed;
115 | }
116 | }
117 |
118 | .alert {
119 | justify-content: flex-start;
120 | margin-bottom : 1rem;
121 | padding : .5em 1em;
122 |
123 | svg {
124 | min-width: 1em;
125 | }
126 |
127 | }
128 |
129 | a,
130 | .btn,
131 | button,
132 | input,
133 | textarea,
134 | select,
135 | form {
136 |
137 | &:disabled,
138 | &.disabled {
139 | opacity : .6;
140 | pointer-events: none;
141 | }
142 | }
143 |
144 | input[type="checkbox"],
145 | input[type="radio"] {
146 | width : 1rem;
147 | min-height : 1rem;
148 | padding : 0;
149 | margin : 0 .6rem 0 .4rem;
150 | position : relative;
151 | min-width : 0;
152 | vertical-align: text-bottom;
153 |
154 | &:checked {
155 | border-color: var(--spry-accent-color);
156 |
157 | &::after {
158 | content : '';
159 | position : absolute;
160 | inset : 2px;
161 | background-color: var(--spry-accent-color);
162 | border-radius : 2px;
163 | }
164 | }
165 | }
166 |
167 | input[type="radio"] {
168 |
169 | &,
170 | &:checked::after {
171 | border-radius: 50%;
172 | }
173 | }
174 |
175 | form.disabled,
176 | form:disabled {
177 |
178 | input,
179 | select,
180 | textarea,
181 | label,
182 | button {
183 | pointer-events: none;
184 | opacity : 0.8;
185 | }
186 | }
187 |
188 | .toggle {
189 | cursor: pointer;
190 |
191 | input[type="checkbox"] {
192 | appearance: none;
193 | border : 0;
194 | }
195 |
196 | &:not(.btn-menu) input[type="checkbox"] {
197 | opacity: 0;
198 | width : 0;
199 | height : 0;
200 |
201 | &::after {
202 | display: none;
203 | }
204 | }
205 | }
206 |
207 | .toggle+*,
208 | nav>ul>li>ul {
209 | max-height : 1px;
210 | opacity : 0;
211 | pointer-events : none;
212 | position : relative;
213 | transform : scaleY(.8) translateY(-4px);
214 | transform-origin: top;
215 | transition : transform .1s ease-in-out, opacity .05s ease-in-out, max-height .3s cubic-bezier(0, 1, 0, 1); // Out
216 | transition-delay: .1s;
217 | z-index : 1;
218 | }
219 |
220 | .toggle.has-checked+* {
221 | max-height : 100vh;
222 | opacity : 1;
223 | pointer-events: all;
224 | transform : scaleY(1.000001);
225 | }
226 |
227 | .toggle:has(:checked)+*,
228 | .toggle.hoverable:hover+*,
229 | .toggle+.open,
230 | .hoverable>ul>li:hover>ul,
231 | nav li>ul:focus-within {
232 | max-height : 100vh;
233 | opacity : 1;
234 | pointer-events: all;
235 | transform : scaleY(1.000001);
236 | }
237 |
238 | @each $breakpoint,
239 | $breakpoint_width in $breakpoints {
240 | @media screen and (min-width: $breakpoint_width) {
241 |
242 | .toggle.#{$breakpoint}-hoverable:hover+*,
243 | .toggle+.#{$breakpoint}-open,
244 | .#{$breakpoint}-hoverable>ul>li:hover>ul {
245 | max-height : 100vh;
246 | opacity : 1;
247 | pointer-events: all;
248 | transform : scaleY(1.000001);
249 | }
250 | }
251 | }
252 |
253 | .btn,
254 | input[type="submit"] {
255 | background-color: var(--spry-btn-color);
256 | border-color : var(--spry-btn-color);
257 | }
258 |
259 | a:not(.btn),
260 | .btn,
261 | a.btn,
262 | a.btn:hover,
263 | a.btn:focus,
264 | input[type="submit"] {
265 |
266 | &:hover:not(:active),
267 | &:focus:not(:active),
268 | &:focus-within:not(:active) {
269 | filter: brightness(1.15);
270 | }
271 | }
272 |
273 | .btn,
274 | .list li>a,
275 | .list li>button,
276 | input[type="submit"] {
277 | cursor : pointer;
278 | text-align : center;
279 | text-transform: uppercase;
280 | width : auto;
281 | }
282 |
283 |
284 | .btn svg,
285 | .list li>a svg,
286 | .list li>button svg {
287 | width : 1.5em;
288 | height: 1.5em;
289 | }
290 |
291 | .btn-outline,
292 | .btn-link,
293 | .btn-hazy,
294 | .list li>a,
295 | .list li>button {
296 | background-color: transparent;
297 |
298 | &:active,
299 | &:focus,
300 | &:focus-within,
301 | &:hover {
302 | background-color: rgba(var(--spry-btn-color-rgb), 0.1);
303 | }
304 | }
305 |
306 | .btn.btn-hazy,
307 | a.btn.btn-hazy {
308 | background-color: rgba(var(--spry-btn-color-rgb), 0.1);
309 |
310 | &:hover:not(:active),
311 | &:focus:not(:active),
312 | &:focus-within:not(:active) {
313 | background-color: rgba(var(--spry-btn-color-rgb), 0.2);
314 | }
315 | }
316 |
317 | .btn-link:not(.btn-outline),
318 | .btn-hazy:not(.btn-outline),
319 | .list li>a,
320 | .list li>button {
321 | border-color: transparent;
322 | }
323 |
324 | .btn-link,
325 | .list li>a,
326 | .list li>button {
327 | text-transform: capitalize;
328 | }
329 |
330 | nav {
331 | ul {
332 | min-width: 200px;
333 | }
334 |
335 | li {
336 | position: relative;
337 | width : 100%;
338 | display : block;
339 | border : 0;
340 |
341 | >.btn-toggle::after {
342 | border-width: 1.7px;
343 | }
344 | }
345 |
346 | &.horizontal {
347 | position: relative;
348 |
349 | >ul {
350 | display : flex;
351 | flex-wrap: wrap;
352 | }
353 |
354 | >a,
355 | >ul>li {
356 |
357 | display : inline-flex;
358 | align-items: center;
359 | width : auto;
360 |
361 | >.btn-toggle {
362 | position : relative;
363 | pointer-events: none;
364 | top : auto;
365 | transform : translateY(0);
366 | }
367 |
368 | >ul {
369 | position : absolute;
370 | top : 100%;
371 | max-width: 300px;
372 | }
373 | }
374 | }
375 |
376 | @each $breakpoint,
377 | $breakpoint_width in $breakpoints {
378 | @media screen and (min-width: $breakpoint_width) {
379 | &.#{$breakpoint}-horizontal {
380 | position: relative;
381 |
382 | >ul {
383 | display : flex;
384 | flex-wrap: wrap;
385 | }
386 |
387 | >a,
388 | >ul>li {
389 |
390 | display : inline-flex;
391 | align-items: center;
392 | width : auto;
393 |
394 | >.btn-toggle {
395 | position : relative;
396 | pointer-events: none;
397 | top : auto;
398 | transform : translateY(0);
399 | }
400 |
401 | >ul {
402 | position : absolute;
403 | top : 100%;
404 | min-width: 220px;
405 | max-width: 300px;
406 | }
407 | }
408 | }
409 | }
410 | }
411 |
412 | &.list {
413 |
414 | &,
415 | >a,
416 | >button,
417 | li>a,
418 | li>button {
419 | width : 100%;
420 | text-align : left;
421 | justify-content: flex-start;
422 | }
423 |
424 | >a,
425 | >button,
426 | li>a,
427 | li>button {
428 | padding-top : 0.5rem;
429 | padding-bottom: 0.5rem;
430 | border : 0;
431 | }
432 | }
433 |
434 | li>a,
435 | li>button,
436 | .list li>button,
437 | .list li>a {
438 | line-height: 1.2;
439 |
440 | &.truncate {
441 | display: block;
442 | }
443 | }
444 |
445 | li.sm>a,
446 | li.xs>a {
447 | padding-right: 2rem;
448 | }
449 | }
450 |
451 |
452 |
453 | .btn-menu {
454 | position: relative;
455 | padding : 0;
456 |
457 | input {
458 | background-color: var(--spry-btn-color-text);
459 | width : 1.5em;
460 | position : absolute;
461 | border : 0;
462 | min-height : auto;
463 | pointer-events : none;
464 |
465 | &,
466 | &::before,
467 | &::after {
468 | border-radius: 3px;
469 | bottom : 0;
470 | color : transparent;
471 | display : block;
472 | height : 2px;
473 | margin : auto;
474 | inset : 0;
475 | transition : transform .15s ease-in-out;
476 | }
477 |
478 | &::before,
479 | &::after {
480 | content : '';
481 | position : absolute;
482 | transform : translateY(-.4em);
483 | background-color: inherit;
484 | width : 100%;
485 | }
486 |
487 | &::after {
488 | transform: translateY(.4em);
489 | }
490 |
491 | &:focus {
492 | box-shadow: none;
493 | }
494 | }
495 |
496 | &.btn-link,
497 | &.btn-hazy,
498 | &.btn-outline {
499 | input {
500 | background-color: var(--spry-btn-color);
501 | }
502 | }
503 | }
504 |
505 | .btn-menu.has-checked {
506 | input {
507 | transform: rotate(45deg);
508 |
509 | &::before,
510 | &::after {
511 | transform: rotate(0deg);
512 | }
513 |
514 | &::after {
515 | transform : rotate(-90deg);
516 | background-color: inherit;
517 | inset : 0;
518 | }
519 | }
520 | }
521 |
522 | .btn-menu:has(:checked) {
523 | input {
524 | transform: rotate(45deg);
525 |
526 | &::before,
527 | &::after {
528 | transform: rotate(0deg);
529 | }
530 |
531 | &::after {
532 | transform : rotate(-90deg);
533 | background-color: inherit;
534 | inset : 0;
535 | }
536 | }
537 | }
538 |
539 | .btn-up,
540 | .btn-right,
541 | .btn-down,
542 | .btn-left,
543 | .btn-toggle {
544 | padding: 0;
545 |
546 | input {
547 | border : 0;
548 | pointer-events: none;
549 | opacity : 0;
550 | width : 0;
551 | height : 0;
552 | }
553 |
554 | &::after {
555 | content : '';
556 | display : block;
557 | position : absolute;
558 | inset : 0;
559 | margin : auto;
560 | border : 2px solid var(--spry-btn-color-text);
561 | border-left : 0;
562 | border-bottom: 0;
563 | width : .7em;
564 | height : .7em;
565 | transition : transform .2s ease-in-out;
566 | transform : rotate(135deg) translate(-14%, 16%);
567 | }
568 |
569 | &.btn-link,
570 | &.btn-hazy,
571 | &.btn-outline {
572 | &::after {
573 | border-color: var(--spry-btn-color);
574 | }
575 | }
576 |
577 | nav li>& {
578 | position : absolute;
579 | right : .5em;
580 | top : .25em;
581 | font-size: 80%;
582 | }
583 | }
584 |
585 | .btn-up::after {
586 | transform: rotate(315deg) translate(-14%, 16%);
587 | }
588 |
589 | .btn-right::after {
590 | transform: rotate(45deg) translate(-14%, 16%);
591 | }
592 |
593 | .btn-left::after {
594 | transform: rotate(225deg) translate(-14%, 16%);
595 | }
596 |
597 | .btn-close {
598 | padding: 0;
599 |
600 | &::before,
601 | &::after {
602 | background-color: var(--spry-btn-color-text);
603 | content : '';
604 | height : 60%;
605 | position : absolute;
606 | inset : 0;
607 | margin : auto;
608 | width : 2px;
609 | }
610 |
611 | &::before {
612 | transform: rotate(45deg);
613 | }
614 |
615 | &::after {
616 | transform: rotate(-45deg);
617 | }
618 |
619 | &.btn-link,
620 | &.btn-hazy,
621 | &.btn-outline {
622 |
623 | &::before,
624 | &::after {
625 | background-color: var(--spry-btn-color);
626 | }
627 | }
628 | }
629 |
630 | .btn-close,
631 | .btn-menu,
632 | .btn-toggle,
633 | .btn-down,
634 | .btn-up,
635 | .btn-left,
636 | .btn-right {
637 |
638 | &.text-right input,
639 | &.text-right::before,
640 | &.text-right::after {
641 | right: auto;
642 | left : 18px;
643 | }
644 |
645 | &.text-left input,
646 | &.text-left::before,
647 | &.text-left::after {
648 | right: 18px;
649 | left : auto;
650 | }
651 | }
652 |
653 | .toggle.has-checked.btn-toggle::after,
654 | .btn-toggle.has-checked::after {
655 | transform: rotate(-45deg) translate(-14%, 16%);
656 | }
657 |
658 | .toggle:has(:checked).btn-toggle::after,
659 | .btn-toggle:has(:checked)::after {
660 | transform: rotate(-45deg) translate(-14%, 16%);
661 | }
662 |
663 | select {
664 | background-image : url("data:image/svg+xml;utf8,");
665 | background-repeat : no-repeat;
666 | background-position-x: 95%;
667 | background-position-y: 52%;
668 | line-height : 2.1em;
669 | padding-right : 1.7em;
670 |
671 | option {
672 | background: #eee;
673 | color : #333;
674 | }
675 |
676 | @media (prefers-color-scheme: dark) {
677 | option {
678 | background: #333;
679 | color : #eee;
680 | }
681 | }
682 | }
683 |
684 | textarea {
685 | min-height : 8em;
686 | max-height : 500px;
687 | padding : .75rem;
688 | max-width : 100%;
689 | min-width : 100%;
690 | line-height: 1.2;
691 | }
692 |
693 | label {
694 | position: relative;
695 | display : block;
696 |
697 | sup,
698 | sub {
699 | position : absolute;
700 | transform : translate(10px, -50%);
701 | top : 50%;
702 | transition : all .2s ease-in-out;
703 | transform-origin: left;
704 | animation : none;
705 | opacity : 0.7;
706 | }
707 |
708 | &.has-textarea {
709 |
710 | sup,
711 | sub {
712 | top: 19px;
713 | }
714 | }
715 |
716 | &:has(textarea) {
717 |
718 | sup,
719 | sub {
720 | top: 19px;
721 | }
722 | }
723 |
724 | &:focus-within,
725 | &.active {
726 |
727 | sup,
728 | sub {
729 | transform : translate(3px, -50%) scale(0.85);
730 | top : -12px;
731 | opacity : .8;
732 | font-weight: 500;
733 | }
734 |
735 | sub {
736 | top: calc(100% + 11px);
737 | }
738 | }
739 |
740 | &:focus-within sup,
741 | &:focus-within sub {
742 | color : var(--spry-accent-color);
743 | animation: all .2s forwards ease;
744 | }
745 |
746 | &.has-sup {
747 | margin-top: 1rem;
748 | }
749 |
750 | &.has-sub {
751 | margin-bottom: 1rem;
752 | }
753 |
754 | &:has(sup) {
755 | margin-top: 1rem;
756 | }
757 |
758 | &:has(sub) {
759 | margin-bottom: 1rem;
760 | }
761 | }
762 |
763 | @keyframes labll {
764 | 0% {
765 | opacity: 1,
766 | }
767 |
768 | 50% {
769 | opacity: .4;
770 | }
771 |
772 | 100% {
773 | opacity: .8;
774 | }
775 | }
776 |
777 | @keyframes spinner {
778 | 0% {
779 | transform: rotate(0deg)
780 | }
781 |
782 | 90%,
783 | 100% {
784 | transform: rotate(360deg)
785 | }
786 | }
787 |
788 | .loader {
789 | position: relative;
790 |
791 | &::after {
792 | content : '';
793 | box-sizing : border-box;
794 | position : absolute;
795 | inset : 0;
796 | margin : auto;
797 | width : 1.3em;
798 | height : 1.3em;
799 | border-radius : 50%;
800 | border : 2px solid transparent;
801 | border-color : var(--spry-accent-color) var(--spry-accent-color) transparent transparent;
802 | opacity : 0;
803 | pointer-events: none;
804 | transition : opacity .3s ease-in-out .1s;
805 | }
806 |
807 | &.loading {
808 | pointer-events : none;
809 | user-select : none;
810 | cursor : default;
811 | --spry-btn-color-text: transparent;
812 | color : transparent;
813 |
814 | &::after {
815 | opacity : 1;
816 | animation: spinner .8s ease infinite;
817 | }
818 | }
819 | }
820 |
821 | .btn.loader::after {
822 | border-color: white white transparent transparent;
823 | }
824 |
825 | table {
826 | width : 100%;
827 | margin-top : 1rem;
828 | border-collapse: collapse;
829 |
830 | td,
831 | th {
832 | padding : .6rem .2rem;
833 | text-align: left;
834 | }
835 |
836 | thead th {
837 | font-weight: 500;
838 | }
839 |
840 | tbody tr {
841 | &:hover td {
842 | background-color: rgba(map-get($colors, 'primary'), .04);
843 | }
844 |
845 | td {
846 | border-top: 1px solid map-get($colors, 'light');
847 | }
848 |
849 | &:first-child td {
850 | border-color: darken(map-get($colors, 'light'), 10%);
851 | }
852 | }
853 | }
854 |
855 | hr {
856 | height : 1px;
857 | border : 0;
858 | background-color: map-get($colors, 'medium');
859 | margin : map-get($gaps, 'default');
860 | }
861 |
862 | section {
863 | padding: (map-get($gaps, 'default') * 2) map-get($gaps, 'default');
864 | }
865 |
866 | @each $breakpoint,
867 | $breakpoint_width in $breakpoints {
868 | @if map-get($gaps, $breakpoint) {
869 | @media screen and (min-width: $breakpoint_width) {
870 | hr {
871 | margin: map-get($gaps, $breakpoint);
872 | }
873 |
874 | section {
875 | padding: (map-get($gaps, $breakpoint) * 2) map-get($gaps, $breakpoint);
876 | }
877 | }
878 | }
879 | }
880 |
881 | @each $color_name,
882 | $color_value in $colors {
883 | section.bg-#{$color_name}+section.bg-#{$color_name} {
884 | padding-top: 0;
885 | }
886 | }
887 |
888 | article {
889 | background-color: map-get($colors, 'white');
890 | border-color : var(--spry-accent-color);
891 | display : flex;
892 | flex-direction : column;
893 | align-items : flex-start;
894 | justify-content : flex-start;
895 | gap : 2em;
896 | overflow : hidden;
897 | padding : 2em;
898 | position : relative;
899 |
900 | &:has(>header),
901 | &:has(>footer) {
902 | padding: 0;
903 |
904 | >header,
905 | >footer,
906 | >p,
907 | >div {
908 | padding-left : 2rem;
909 | padding-right: 2rem;
910 | }
911 | }
912 |
913 | >header,
914 | >footer {
915 | background-color: var(--spry-accent-color);
916 | color : var(--spry-accent-color-text);
917 | display : flex;
918 | align-items : center;
919 | padding-top : 1em;
920 | padding-bottom : 1em;
921 | }
922 |
923 | >footer {
924 | margin-top: auto;
925 | }
926 |
927 | >header,
928 | >footer,
929 | >div,
930 | >p,
931 | >h1,
932 | >h2,
933 | >h3,
934 | >h4,
935 | >h5,
936 | >h6 {
937 | width: 100%;
938 | }
939 | }
940 |
941 | .has-tooltip {
942 | position: relative;
943 |
944 | &:hover {
945 | z-index: 2;
946 | }
947 |
948 | .tooltip {
949 | width : 90vw;
950 | position : absolute;
951 | transition: opacity .2s ease-in-out;
952 | cursor : auto;
953 | }
954 |
955 | &:not(:hover) .tooltip {
956 | opacity : 0;
957 | pointer-events: none;
958 | }
959 | }
960 |
961 | :has(>.tooltip) {
962 | position: relative;
963 |
964 | &:hover {
965 | z-index: 2;
966 | }
967 |
968 | .tooltip {
969 | width : 90vw;
970 | position : absolute;
971 | transition: opacity .2s ease-in-out;
972 | cursor : auto;
973 | }
974 |
975 | &:not(:hover) .tooltip {
976 | opacity : 0;
977 | pointer-events: none;
978 | }
979 | }
--------------------------------------------------------------------------------
/_utilities.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Spry Utilities
3 | */
4 | /*************************************
5 | General Utility Classes
6 | **************************************/
7 | .bold{ font-weight: bold }
8 | .normal{ font-weight: normal }
9 | .italic{ font-style: italic }
10 | .uppercase{ text-transform: uppercase }
11 | .lowercase{ text-transform: lowercase }
12 | .capitalize{ text-transform: capitalize }
13 | .pointer { cursor: pointer }
14 | .rounded{ border-radius: 5px; overflow: hidden }
15 | .rounded-bottom{ border-radius: 0 0 5px 5px }
16 | .circle{ border-radius: 50% }
17 | .square{ border-radius: 0 }
18 | .float-left{ float: left }
19 | .float-right{ float: right }
20 | .clear{ clear: both }
21 | .index-1{ z-index: 1 }
22 | .index-2{ z-index: 2 }
23 | .index-3{ z-index: 3 }
24 | .note { font-style: italic; font-size: 90%; opacity: 0.8 }
25 | .truncate{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
26 | .rotate-90 { transform: rotate(90deg) }
27 | .rotate-180 { transform: rotate(180deg) }
28 | .rotate-270 { transform: rotate(270deg) }
29 |
30 | /****************************************************************************
31 | Layout Utility Classes - Can include Grid Prefix Ex. .md-right, etc
32 | ****************************************************************************/
33 | .text-left{ text-align: left }
34 | .text-center{ text-align: center }
35 | .text-right{ text-align: right }
36 | .justify{ text-align: justify }
37 | .no-wrap{ white-space: nowrap; flex-wrap: nowrap; }
38 | .pre-wrap{ white-space: pre-wrap }
39 | .break-word{ word-wrap: break-word }
40 | .inline{ display: inline; width: auto }
41 | .flex{ display: flex }
42 | .block{ display: block; width: 100% }
43 | .none{ display: none }
44 | .inline-block{ display: inline-block; width: auto }
45 | .inline-flex{ display: inline-flex; width: auto }
46 | .table{ display: table }
47 | .table-cell{ display: table-cell }
48 | .ai-start{ align-items: flex-start }
49 | .ai-end{ align-items: flex-end }
50 | .ai-center{ align-items: center }
51 | .ai-stretch{ align-items: stretch }
52 | .jc-start{ justify-content: flex-start }
53 | .jc-end{ justify-content: flex-end }
54 | .jc-center{ justify-content: center }
55 | .jc-between{ justify-content: space-between }
56 | .jc-around{ justify-content: space-around }
57 | .flex-middle{ display: flex; align-items: center }
58 | .flex-center{ display: flex; align-items: center; justify-content: center }
59 | .flex-wrap{ flex-wrap: wrap }
60 | .flex-column{ flex-direction: column }
61 | .relative{ position: relative }
62 | .absolute{ position: absolute }
63 | .collapse{ position: relative }
64 | .collapse > *{ position: absolute }
65 | .sticky{ position: sticky; top: 0 }
66 | .fixed{ position: fixed }
67 | .inset { position: absolute; inset: 0 }
68 | .inset-top { position: absolute; top: 0; bottom: auto }
69 | .inset-right { position: absolute; right: 0; left: auto }
70 | .inset-bottom { position: absolute; bottom: 0 }
71 | .inset-left { position: absolute; left: 0; right: auto }
72 | .outset-top { position: absolute; bottom: 100%; top: auto }
73 | .outset-right { position: absolute; left: 100%; right: auto }
74 | .outset-bottom { position: absolute; top: 100%; bottom: auto }
75 | .outset-left { position: absolute; right: 100%; left: auto }
76 | .pointer-none { pointer-events: none }
77 | .align-baseline{ vertical-align: baseline }
78 | .align-top{ vertical-align: top }
79 | .align-middle{ vertical-align: middle }
80 | .align-bottom{ vertical-align: bottom }
81 | .overflow-hidden{ overflow: hidden }
82 | .overflow-y-hidden{ overflow-y: hidden }
83 | .overflow-x-hidden{ overflow-x: hidden }
84 | .overflow-scroll{ overflow: scroll }
85 | .overflow-auto{ overflow: auto }
86 | .order-first{ order:-1 }
87 | .order-0{ order:0 }
88 | .order-1{ order:1 }
89 | .order-2{ order:2 }
90 | .order-3{ order:3 }
91 | .order-last{ order:99999 }
92 | .border{ border: 1px solid var(--spry-accent-color) }
93 | .border-top{ border-top: 1px solid var(--spry-accent-color) }
94 | .border-right{ border-right: 1px solid var(--spry-accent-color) }
95 | .border-bottom{ border-bottom: 1px solid var(--spry-accent-color) }
96 | .border-left{ border-left: 1px solid var(--spry-accent-color) }
97 | .no-border{ border: 0 }
98 | .shadow{ box-shadow: 1px 3px 4px rgba(0,0,0,.12) }
99 | .no-shadow{ box-shadow: none }
100 | .cover { background-size: cover; object-fit: cover }
101 | .contain { background-size: contain; object-fit: contain }
102 | .h{ height: 100% }
103 | .vh{ height: 100vh }
104 | .w{ width: 100% }
105 | .vw{ width: 100vw }
106 | .h-0{ height: 0 }
107 | .w-0{ width: 0 }
108 | @for $i from 1 through 12 {
109 | .h-#{$i}00{ height: #{$i}00px; min-height: #{$i}00px; max-height: #{$i}00px }
110 | .mh-#{$i}00{ max-height: #{$i}00px }
111 | .vh-#{$i}0{ height: #{$i}0vh }
112 | .mvh-#{$i}0{ max-height: #{$i}0vh }
113 | .w-#{$i}00,.row>.w-#{$i}00{ width: #{$i}00px; min-width: #{$i}00px; max-width: #{$i}00px }
114 | .mw-#{$i}00,.row>.mw-#{$i}00{ max-width: #{$i}00px }
115 | .vw-#{$i}0{ width: #{$i}0vw }
116 | .mvw-#{$i}0,.row>.mvw-#{$i}0{ max-width: #{$i}0vw }
117 | }
118 | .o-0{ opacity: 0 }
119 | @for $i from 1 through 10 {
120 | .o-#{$i}0{ opacity: calc($i / 10) }
121 | }
122 |
123 | @each $size_name,
124 | $size_value in $sizes {
125 | .#{$size_name} {
126 | font-size: $size_value;
127 | }
128 | }
129 |
130 | @each $breakpoint, $breakpoint_width in $breakpoints {
131 | @media screen and (min-width: $breakpoint_width) {
132 |
133 | .#{$breakpoint} {
134 | &-text-left{ text-align: left }
135 | &-text-center{ text-align: center }
136 | &-text-right{ text-align: right }
137 | &-justify{ text-align: justify }
138 | &-no-wrap{ white-space: nowrap; flex-wrap: nowrap; }
139 | &-pre-wrap{ white-space: pre-wrap }
140 | &-break-word{ word-wrap: break-word }
141 | &-inline{ display: inline; width: auto }
142 | &-flex{ display: flex }
143 | &-block{ display: block }
144 | &-none{ display: none }
145 | &-inline-block{ display: inline-block; width: auto }
146 | &-inline-flex{ display: inline-flex; width: auto }
147 | &-table{ display: table }
148 | &-table-cell{ display: table-cell }
149 | &-relative{ position: relative }
150 | &-absolute{ position: absolute }
151 | &-collapse{ position: relative }
152 | &-collapse > *{ position: absolute }
153 | &-sticky{ position: sticky; top: 0 }
154 | &-fixed{ position: fixed }
155 | &-inset { position: absolute; inset: 0 }
156 | &-inset-top { position: absolute; top: 0; bottom: auto }
157 | &-inset-right { position: absolute; right: 0; left: auto }
158 | &-inset-bottom { position: absolute; bottom: 0; top: auto }
159 | &-inset-left { position: absolute; left: 0; right: auto }
160 | &-outset-top { position: absolute; bottom: 100%; top: auto }
161 | &-outset-right { position: absolute; left: 100%; right: auto }
162 | &-outset-bottom { position: absolute; top: 100%; bottom: auto }
163 | &-outset-left { position: absolute; right: 100%; left: auto }
164 | &-pointer-none { pointer-events: none }
165 | &-align-baseline{ vertical-align: baseline }
166 | &-align-top{ vertical-align: top }
167 | &-align-middle{ vertical-align: middle }
168 | &-align-bottom{ vertical-align: bottom }
169 | &-overflow-hidden{ overflow: hidden }
170 | &-overflow-scroll{ overflow: scroll }
171 | &-overflow-auto{ overflow: auto }
172 | &-order-first{ order:-1 }
173 | &-order-0{ order:0 }
174 | &-order-1{ order:1 }
175 | &-order-2{ order:2 }
176 | &-order-3{ order:3 }
177 | &-order-last{ order:99999 }
178 | &-ai-start{ align-items: flex-start }
179 | &-ai-end{ align-items: flex-end }
180 | &-ai-center{ align-items: center }
181 | &-ai-stretch{ align-items: stretch }
182 | &-jc-start{ justify-content: flex-start }
183 | &-jc-end{ justify-content: flex-end }
184 | &-jc-center{ justify-content: center }
185 | &-jc-between{ justify-content: space-between }
186 | &-jc-around{ justify-content: space-around }
187 | &-flex-middle{ display: flex; align-items: center }
188 | &-flex-center{ display: flex; align-items: center; justify-content: center }
189 | &-flex-wrap{ flex-wrap: wrap }
190 | &-flex-column{ flex-direction: column }
191 | &-h{ height: 100% }
192 | &-h-0{ height: 0 }
193 | &-vh{ height: 100vh }
194 | &-w{ width: 100% }
195 | &-w-0{ width: 0 }
196 | &-vw{ width: 100vw }
197 | &-border{ border: 1px solid var(--spry-accent-color) }
198 | &-border-top{ border-top: 1px solid var(--spry-accent-color) }
199 | &-border-right{ border-right: 1px solid var(--spry-accent-color) }
200 | &-border-bottom{ border-bottom: 1px solid var(--spry-accent-color) }
201 | &-border-left{ border-left: 1px solid var(--spry-accent-color) }
202 | &-no-border{ border: 0 }
203 | &-shadow{ box-shadow: 1px 3px 4px rgba(0,0,0,.12) }
204 | &-no-shadow{ box-shadow: none }
205 | &-cover { background-size: cover; object-fit: cover }
206 | &-contain { background-size: contain; object-fit: contain }
207 | @for $i from 1 through 12 {
208 | &-h-#{$i}00{ height: #{$i}00px; min-height: #{$i}00px; max-height: #{$i}00px }
209 | &-mh-#{$i}00{ max-height: #{$i}00px }
210 | &-vh-#{$i}0{ height: #{$i}0vh }
211 | &-mvh-#{$i}0{ max-height: #{$i}0vh }
212 | &-w-#{$i}00,.row>&-w-#{$i}00{ width: #{$i}00px; min-width: #{$i}00px; max-width: #{$i}00px }
213 | &-mw-#{$i}00,.row>&-mw-#{$i}00{ max-width: #{$i}00px }
214 | &-vw-#{$i}0{ width: #{$i}0vw }
215 | &-mvw-#{$i}0,.row>&-mvw-#{$i}0{ max-width: #{$i}0vw }
216 | }
217 | &-o-0{ opacity: 0 }
218 | @for $i from 1 through 10 {
219 | &-o-#{$i}0{ opacity: calc($i / 10) }
220 | }
221 |
222 | @each $size_name,
223 | $size_value in $sizes {
224 | &-#{$size_name} {
225 | font-size: $size_value;
226 | }
227 | }
228 | }
229 | }
230 | }
--------------------------------------------------------------------------------
/_variables.scss:
--------------------------------------------------------------------------------
1 | // Specify each breakpoint size
2 | $breakpoints: (
3 | md: 40em,
4 | lg: 80em,
5 | ) !default;
6 |
7 | // Specify each breakpoint gap size. tags with get padding based on gap size.
8 | // You must include one for each Breakpoint otherwise it will result in a Compile Error.
9 | $gaps: (
10 | default: 1.25em,
11 | md: 2em,
12 | lg: 2.25em,
13 | ) !default;
14 |
15 | // Specify each color used in color-, bg-, border-, btn-
16 | $colors: (
17 | "white": #ffffff,
18 | "light": #efefef,
19 | "medium": #888888,
20 | "dark": #444444,
21 | "primary": #1494df,
22 | "warning": #df8a22,
23 | "error": #d52929,
24 | "success": #09c347,
25 | "text": #566067,
26 | "inherit": inherit,
27 | "transparent": transparent,
28 | ) !default;
29 |
30 | // Specify each type tag and class like and .h3 etc.
31 | $types: (
32 | body: (font-family: Helvetica, font-size: clamp(.9em, 3vw, 1.0em), font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4),
33 | h1: (font-size: 3.4em, font-weight: 400, line-height: 1.20),
34 | h2: (font-size: 2.7em, font-weight: 300, line-height: 1.25),
35 | h3: (font-size: 2.2em, font-weight: 300, line-height: 1.30),
36 | h4: (font-size: 1.6em, font-weight: 300, line-height: 1.35),
37 | h5: (font-size: 1.2em, font-weight: 300, line-height: 1.5),
38 | h6: (font-size: 1.0em, font-weight: 300, line-height: 1.4),
39 | ) !default;
40 |
41 | // Specify each spacing that applies to Margin and Padding. Ex .m-0, .m-1, .mx-3, .pt-3, .mt-n3, etc
42 | $spacing: (
43 | 0: 0em,
44 | 1: .5em,
45 | 2: 1em,
46 | 3: 2em,
47 | 4: 3em,
48 | 5: 4em,
49 | ) !default;
50 |
51 | // Specify each size that applies font-size and all elements using "em".
52 | $sizes: (
53 | xl: 140%,
54 | lg: 120%,
55 | md: 100%,
56 | sm: 90%,
57 | xs: 75%,
58 | ) !default;
59 |
60 | :root {
61 | --spry-btn-color : #{map-get($colors, 'medium')};
62 | --spry-btn-color-rgb : #{red(map-get($colors, 'medium')), green(map-get($colors, 'medium')), blue(map-get($colors, 'medium'))};
63 | --spry-btn-color-text : #{map-get($colors, 'white')};
64 | --spry-accent-color : #{map-get($colors, 'medium')};
65 | --spry-gap : #{map-get($gaps, 'default')};
66 | --spry-card-color : transparent;
67 |
68 | @each $color_name,
69 | $color_value in $colors {
70 | --spry-color-#{$color_name}: #{$color_value};
71 | @if $color_name !=inherit {
72 | --spry-color-#{$color_name}-rgb: #{red($color_value), green($color_value), blue($color_value)};
73 | }
74 | }
75 |
76 | @each $breakpoint,
77 | $breakpoint_width in $breakpoints {
78 | @media screen and (min-width: $breakpoint_width) {
79 | --spry-gap: #{map-get($gaps, $breakpoint)};
80 | }
81 | }
82 | }
--------------------------------------------------------------------------------
/dist/spry-slider.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Spry Slider JS (Minified)
3 | *
4 | * Version: 2.1.6
5 | * Author: gedde.dev
6 | * Github: https://github.com/ggedde/spry-css
7 | */
8 | function spryJsLoadSliders(){document.querySelectorAll(".slider").forEach(l=>{if(!l.hasAttribute("data-loaded")){var e=parseInt(l.getAttribute("data-play")),a=l.hasAttribute("data-loop"),r=l.getAttribute("data-stop"),o=l.querySelector(".slider-slides"),i=o.childElementCount,t=l.querySelector(".slider-next"),n=l.querySelector(".slider-prev"),s=l.querySelector(".slider-pagination"),d=o.scrollWidth,c=o.innerHTML,u=null,v=null,h=!1,f=(e,t)=>{var r=a?i:0;"next"===e?o.scrollBy(l.offsetWidth,0):"prev"===e?o.scrollBy(-o.offsetWidth,0):o.scrollTo({left:o.children[e+r].offsetLeft,behavior:t?"instant":"smooth"})},g=()=>{v&&(clearInterval(v),v=null),e&&(v=setInterval(()=>{var e="action"===r&&(l.querySelector("a:hover")||l.querySelector("button:hover")),t="hover"===r&&l.matches(":hover");e||t||f("next")},e))};if(t&&t.addEventListener("click",()=>{f("next")}),n&&n.addEventListener("click",()=>{f("prev")}),s&&o&&i)for(let t=0;t{f(t),s.childNodes.forEach(e=>{e.classList.remove("active")}),e.classList.add("active")},s.append(e)}o.addEventListener("scroll",()=>{l.setAttribute("data-sliding",""),l.removeAttribute("data-position"),u&&clearTimeout(u),v&&(clearInterval(v),v=null),u=setTimeout(function(){var e;l.removeAttribute("data-sliding"),g(),a?(e=o.scrollWidth/3,o.scrollLeft=2*e&&(r=o.scrollLeft-2*e,o.scrollTo({left:e+r,behavior:"instant"}))):o.scrollLeft?o.scrollLeft+l.offsetWidth>=o.scrollWidth-2&&l.setAttribute("data-position","end"):l.setAttribute("data-position","start"),l.querySelectorAll(".slider-slides > *").forEach(e=>{e.removeAttribute("data-first"),e.removeAttribute("data-last");var t=Math.round(e.getBoundingClientRect().left-l.getBoundingClientRect().left);e.toggleAttribute("data-showing",0<=t&&t{e.classList.remove("active")}),t=Array.from(o.children).indexOf(r[0]),a&&(t=t===2*i?0:t-i),void 0!==t&&s.children[t].classList.add("active")),r[0].setAttribute("data-first",""),r[r.length-1].setAttribute("data-last",""),(t=function(e,t,r){for(var l=0,a=[];e="next"===t?e.nextSibling:e.previousSibling;)r<=l||!e.nodeType||3===e.nodeType||("IMG"===e.tagName&&"lazy"===e.getAttribute("loading").toLowerCase()?a.push(e.src):e.querySelectorAll('img[loading="lazy"]').forEach(e=>{a.push(e.src)}),l++);a.forEach(e=>{(new Image).src=e})})(l.querySelector("[data-last]"),"next",r.length),t(l.querySelector("[data-last]"),"prev",r.length))},100)}),a?(o.innerHTML+=c+c,o.scrollTo({left:d,behavior:"instant"})):(o.dispatchEvent(new CustomEvent("scroll")),l.setAttribute("data-position","start")),g(),e&&("hover"===r&&(l.addEventListener("mouseout",()=>{g()}),l.addEventListener("mouseover",()=>{v&&(clearInterval(v),v=null)})),"action"===r&&(document.addEventListener("selectionchange",()=>{h&&document.getSelection().toString()&&v&&(clearInterval(v),v=null),h||document.getSelection().toString()||v||g()}),l.addEventListener("selectstart",()=>{h=!0}),l.addEventListener("mouseup",()=>{h=!1}))),l.setAttribute("data-loaded","")}})}"complete"===document.readyState||"interactive"===document.readyState?spryJsLoadSliders():document.addEventListener("DOMContentLoaded",spryJsLoadSliders);
--------------------------------------------------------------------------------
/dist/spry.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * SpryCss v2.3.23
3 | * license: MIT
4 | * author: https://github.com/ggedde/spry-css
5 | */:root{--spry-btn-color:#888;--spry-btn-color-rgb:136,136,136;--spry-btn-color-text:#fff;--spry-accent-color:#888;--spry-gap:1.25em;--spry-card-color:transparent;--spry-color-white:#fff;--spry-color-white-rgb:255,255,255;--spry-color-light:#efefef;--spry-color-light-rgb:239,239,239;--spry-color-medium:#888;--spry-color-medium-rgb:136,136,136;--spry-color-dark:#444;--spry-color-dark-rgb:68,68,68;--spry-color-primary:#1494df;--spry-color-primary-rgb:20,148,223;--spry-color-warning:#df8a22;--spry-color-warning-rgb:223,138,34;--spry-color-error:#d52929;--spry-color-error-rgb:213,41,41;--spry-color-success:#09c347;--spry-color-success-rgb:9,195,71;--spry-color-text:#566067;--spry-color-text-rgb:86,96,103;--spry-color-inherit:inherit;--spry-color-transparent:transparent;--spry-color-transparent-rgb:0,0,0}@media screen and (min-width:40em){:root{--spry-gap:2em}}@media screen and (min-width:80em){:root{--spry-gap:2.25em}}/*!
6 | * Spry Reset
7 | */html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body,fieldset,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0;padding:0}ul{list-style:disc}ol li,ul li{margin-bottom:.5rem;margin-top:.5rem}ol,ul{margin-left:1.5rem}nav ol,nav ul{list-style:none;margin-left:0}nav ol li,nav ul li{margin-bottom:0;margin-top:0}img{display:block;height:auto;max-width:100%}/*!
8 | * Spry Typography
9 | */input,select,textarea{color:inherit;font-family:inherit;font-weight:inherit}.body,body{color:#566067;font-family:Helvetica;font-size:clamp(.9em,3vw,1em);font-weight:300;line-height:1.4}p+.body,p+body{margin-top:2rem}.h1,h1{font-size:3.4em;font-weight:400;line-height:1.2}p+.h1,p+h1{margin-top:2rem}.h2,h2{font-size:2.7em;font-weight:300;line-height:1.25}p+.h2,p+h2{margin-top:2rem}.h3,h3{font-size:2.2em;font-weight:300;line-height:1.3}p+.h3,p+h3{margin-top:2rem}.h4,h4{font-size:1.6em;font-weight:300;line-height:1.35}p+.h4,p+h4{margin-top:2rem}.h5,h5{font-size:1.2em;font-weight:300;line-height:1.5}p+.h5,p+h5{margin-top:2rem}.h6,h6{font-size:1em;font-weight:300;line-height:1.4}p+.h6,p+h6{margin-top:2rem}section h1{margin-top:-.7rem}section h2{margin-top:-.6rem}section h3{margin-top:-.5rem}:not(article)>:is(h1,h2,h3,h4,h5,h6,p)+:is(h2,h3,h4,h5,h6,p,.btn){margin-top:1rem}a{color:#1494df;cursor:pointer;transition:color .2s ease-in-out}a,a:focus,a:hover{text-decoration:none}blockquote{margin:1rem}blockquote:before{content:"“"}blockquote:after{content:"”"}blockquote p{color:inherit;display:inline;font:inherit}/*!
10 | * Spry UI
11 | */.alert,.btn,.toolbar,button,input,nav li>a,nav>a,select,textarea{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;display:inline-flex;font-size:100%;height:auto;min-height:2.3em;min-width:2.3em;outline:none;padding:0 1em;position:relative;text-decoration:none;vertical-align:middle;width:100%}button{width:auto}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover{border-color:var(--spry-accent-color)}input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 1px var(--spry-accent-color)}a,button,input,select,textarea{outline:none}a:focus-visible:not(:hover),button:focus-visible:not(:hover),input:focus-visible:not(:hover),select:focus-visible:not(:hover),textarea:focus-visible:not(:hover){outline:2px solid hsla(0,0%,55%,.25);outline-offset:2px}label.btn:has(:focus-visible){outline:2px solid hsla(0,0%,55%,.25);outline-offset:2px}.btn-menu input[type=checkbox]{outline:none}input[type=checkbox]:focus-visible:not(:hover),input[type=radio]:focus-visible:not(:hover){outline-width:4px}.alert,.btn,.list li>a,.list li>button,article,input,select,textarea{border:1px solid #888;border-radius:3px;justify-content:center}.alert,.btn,.list li>a,.list li>button,a:not(.btn),input,select,textarea{transition:color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,filter .2s ease-in-out}.btn ::-moz-placeholder,.list li>a ::-moz-placeholder,.list li>button ::-moz-placeholder,input ::-moz-placeholder,select ::-moz-placeholder,textarea ::-moz-placeholder{color:#999}.btn ::placeholder,.list li>a ::placeholder,.list li>button ::placeholder,input ::placeholder,select ::placeholder,textarea ::placeholder{color:#999}.btn:disabled,.list li>a:disabled,.list li>button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.6}.alert{justify-content:flex-start;margin-bottom:1rem;padding:.5em 1em}.alert svg{min-width:1em}.btn.disabled,.btn:disabled,a.disabled,a:disabled,button.disabled,button:disabled,form.disabled,form:disabled,input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{opacity:.6;pointer-events:none}input[type=checkbox],input[type=radio]{margin:0 .6rem 0 .4rem;min-height:1rem;min-width:0;padding:0;position:relative;vertical-align:text-bottom;width:1rem}input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--spry-accent-color)}input[type=checkbox]:checked:after,input[type=radio]:checked:after{background-color:var(--spry-accent-color);border-radius:2px;content:"";inset:2px;position:absolute}input[type=radio],input[type=radio]:checked:after{border-radius:50%}form.disabled button,form.disabled input,form.disabled label,form.disabled select,form.disabled textarea,form:disabled button,form:disabled input,form:disabled label,form:disabled select,form:disabled textarea{opacity:.8;pointer-events:none}.toggle{cursor:pointer}.toggle input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.toggle:not(.btn-menu) input[type=checkbox]{height:0;opacity:0;width:0}.toggle:not(.btn-menu) input[type=checkbox]:after{display:none}.toggle+*,nav>ul>li>ul{max-height:1px;opacity:0;pointer-events:none;position:relative;transform:scaleY(.8) translateY(-4px);transform-origin:top;transition:transform .1s ease-in-out,opacity .05s ease-in-out,max-height .3s cubic-bezier(0,1,0,1);transition-delay:.1s;z-index:1}.toggle.has-checked+*{max-height:100vh;opacity:1;pointer-events:all;transform:scaleY(1.000001)}.hoverable>ul>li:hover>ul,.toggle+.open,.toggle.hoverable:hover+*,.toggle:has(:checked)+*,nav li>ul:focus-within{max-height:100vh;opacity:1;pointer-events:all;transform:scaleY(1.000001)}@media screen and (min-width:40em){.md-hoverable>ul>li:hover>ul,.toggle+.md-open,.toggle.md-hoverable:hover+*{max-height:100vh;opacity:1;pointer-events:all;transform:scaleY(1.000001)}}@media screen and (min-width:80em){.lg-hoverable>ul>li:hover>ul,.toggle+.lg-open,.toggle.lg-hoverable:hover+*{max-height:100vh;opacity:1;pointer-events:all;transform:scaleY(1.000001)}}.btn,input[type=submit]{background-color:var(--spry-btn-color);border-color:var(--spry-btn-color)}.btn:focus-within:not(:active),.btn:focus:not(:active),.btn:hover:not(:active),a.btn:focus-within:not(:active),a.btn:focus:focus-within:not(:active),a.btn:focus:focus:not(:active),a.btn:focus:hover:not(:active),a.btn:focus:not(:active),a.btn:hover:focus-within:not(:active),a.btn:hover:focus:not(:active),a.btn:hover:hover:not(:active),a.btn:hover:not(:active),a:not(.btn):focus-within:not(:active),a:not(.btn):focus:not(:active),a:not(.btn):hover:not(:active),input[type=submit]:focus-within:not(:active),input[type=submit]:focus:not(:active),input[type=submit]:hover:not(:active){filter:brightness(1.15)}.btn,.list li>a,.list li>button,input[type=submit]{cursor:pointer;text-align:center;text-transform:uppercase;width:auto}.btn svg,.list li>a svg,.list li>button svg{height:1.5em;width:1.5em}.btn-hazy,.btn-link,.btn-outline,.list li>a,.list li>button{background-color:transparent}.btn-hazy:active,.btn-hazy:focus,.btn-hazy:focus-within,.btn-hazy:hover,.btn-link:active,.btn-link:focus,.btn-link:focus-within,.btn-link:hover,.btn-outline:active,.btn-outline:focus,.btn-outline:focus-within,.btn-outline:hover,.list li>a:active,.list li>a:focus,.list li>a:focus-within,.list li>a:hover,.list li>button:active,.list li>button:focus,.list li>button:focus-within,.list li>button:hover{background-color:rgba(var(--spry-btn-color-rgb),.1)}.btn.btn-hazy,a.btn.btn-hazy{background-color:rgba(var(--spry-btn-color-rgb),.1)}.btn.btn-hazy:focus-within:not(:active),.btn.btn-hazy:focus:not(:active),.btn.btn-hazy:hover:not(:active),a.btn.btn-hazy:focus-within:not(:active),a.btn.btn-hazy:focus:not(:active),a.btn.btn-hazy:hover:not(:active){background-color:rgba(var(--spry-btn-color-rgb),.2)}.btn-hazy:not(.btn-outline),.btn-link:not(.btn-outline),.list li>a,.list li>button{border-color:transparent}.btn-link,.list li>a,.list li>button{text-transform:capitalize}nav ul{min-width:200px}nav li{border:0;display:block;position:relative;width:100%}nav li>.btn-toggle:after{border-width:1.7px}nav.horizontal{position:relative}nav.horizontal>ul{display:flex;flex-wrap:wrap}nav.horizontal>a,nav.horizontal>ul>li{align-items:center;display:inline-flex;width:auto}nav.horizontal>a>.btn-toggle,nav.horizontal>ul>li>.btn-toggle{pointer-events:none;position:relative;top:auto;transform:translateY(0)}nav.horizontal>a>ul,nav.horizontal>ul>li>ul{max-width:300px;position:absolute;top:100%}@media screen and (min-width:40em){nav.md-horizontal{position:relative}nav.md-horizontal>ul{display:flex;flex-wrap:wrap}nav.md-horizontal>a,nav.md-horizontal>ul>li{align-items:center;display:inline-flex;width:auto}nav.md-horizontal>a>.btn-toggle,nav.md-horizontal>ul>li>.btn-toggle{pointer-events:none;position:relative;top:auto;transform:translateY(0)}nav.md-horizontal>a>ul,nav.md-horizontal>ul>li>ul{max-width:300px;min-width:220px;position:absolute;top:100%}}@media screen and (min-width:80em){nav.lg-horizontal{position:relative}nav.lg-horizontal>ul{display:flex;flex-wrap:wrap}nav.lg-horizontal>a,nav.lg-horizontal>ul>li{align-items:center;display:inline-flex;width:auto}nav.lg-horizontal>a>.btn-toggle,nav.lg-horizontal>ul>li>.btn-toggle{pointer-events:none;position:relative;top:auto;transform:translateY(0)}nav.lg-horizontal>a>ul,nav.lg-horizontal>ul>li>ul{max-width:300px;min-width:220px;position:absolute;top:100%}}nav.list,nav.list li>a,nav.list li>button,nav.list>a,nav.list>button{justify-content:flex-start;text-align:left;width:100%}nav.list li>a,nav.list li>button,nav.list>a,nav.list>button{border:0;padding-bottom:.5rem;padding-top:.5rem}nav .list li>a,nav .list li>button,nav li>a,nav li>button{line-height:1.2}nav .list li>a.truncate,nav .list li>button.truncate,nav li>a.truncate,nav li>button.truncate{display:block}nav li.sm>a,nav li.xs>a{padding-right:2rem}.btn-menu{padding:0;position:relative}.btn-menu input{background-color:var(--spry-btn-color-text);border:0;min-height:auto;pointer-events:none;position:absolute;width:1.5em}.btn-menu input,.btn-menu input:after,.btn-menu input:before{border-radius:3px;bottom:0;color:transparent;display:block;height:2px;inset:0;margin:auto;transition:transform .15s ease-in-out}.btn-menu input:after,.btn-menu input:before{background-color:inherit;content:"";position:absolute;transform:translateY(-.4em);width:100%}.btn-menu input:after{transform:translateY(.4em)}.btn-menu input:focus{box-shadow:none}.btn-menu.btn-hazy input,.btn-menu.btn-link input,.btn-menu.btn-outline input{background-color:var(--spry-btn-color)}.btn-menu.has-checked input{transform:rotate(45deg)}.btn-menu.has-checked input:after,.btn-menu.has-checked input:before{transform:rotate(0deg)}.btn-menu.has-checked input:after{background-color:inherit;inset:0;transform:rotate(-90deg)}.btn-menu:has(:checked) input{transform:rotate(45deg)}.btn-menu:has(:checked) input:after,.btn-menu:has(:checked) input:before{transform:rotate(0deg)}.btn-menu:has(:checked) input:after{background-color:inherit;inset:0;transform:rotate(-90deg)}.btn-down,.btn-left,.btn-right,.btn-toggle,.btn-up{padding:0}.btn-down input,.btn-left input,.btn-right input,.btn-toggle input,.btn-up input{border:0;height:0;opacity:0;pointer-events:none;width:0}.btn-down:after,.btn-left:after,.btn-right:after,.btn-toggle:after,.btn-up:after{border:2px solid var(--spry-btn-color-text);border-bottom:0;border-left:0;content:"";display:block;height:.7em;inset:0;margin:auto;position:absolute;transform:rotate(135deg) translate(-14%,16%);transition:transform .2s ease-in-out;width:.7em}.btn-down.btn-hazy:after,.btn-down.btn-link:after,.btn-down.btn-outline:after,.btn-left.btn-hazy:after,.btn-left.btn-link:after,.btn-left.btn-outline:after,.btn-right.btn-hazy:after,.btn-right.btn-link:after,.btn-right.btn-outline:after,.btn-toggle.btn-hazy:after,.btn-toggle.btn-link:after,.btn-toggle.btn-outline:after,.btn-up.btn-hazy:after,.btn-up.btn-link:after,.btn-up.btn-outline:after{border-color:var(--spry-btn-color)}nav li>.btn-down,nav li>.btn-left,nav li>.btn-right,nav li>.btn-toggle,nav li>.btn-up{font-size:80%;position:absolute;right:.5em;top:.25em}.btn-up:after{transform:rotate(315deg) translate(-14%,16%)}.btn-right:after{transform:rotate(45deg) translate(-14%,16%)}.btn-left:after{transform:rotate(225deg) translate(-14%,16%)}.btn-close{padding:0}.btn-close:after,.btn-close:before{background-color:var(--spry-btn-color-text);content:"";height:60%;inset:0;margin:auto;position:absolute;width:2px}.btn-close:before{transform:rotate(45deg)}.btn-close:after{transform:rotate(-45deg)}.btn-close.btn-hazy:after,.btn-close.btn-hazy:before,.btn-close.btn-link:after,.btn-close.btn-link:before,.btn-close.btn-outline:after,.btn-close.btn-outline:before{background-color:var(--spry-btn-color)}.btn-close.text-right input,.btn-close.text-right:after,.btn-close.text-right:before,.btn-down.text-right input,.btn-down.text-right:after,.btn-down.text-right:before,.btn-left.text-right input,.btn-left.text-right:after,.btn-left.text-right:before,.btn-menu.text-right input,.btn-menu.text-right:after,.btn-menu.text-right:before,.btn-right.text-right input,.btn-right.text-right:after,.btn-right.text-right:before,.btn-toggle.text-right input,.btn-toggle.text-right:after,.btn-toggle.text-right:before,.btn-up.text-right input,.btn-up.text-right:after,.btn-up.text-right:before{left:18px;right:auto}.btn-close.text-left input,.btn-close.text-left:after,.btn-close.text-left:before,.btn-down.text-left input,.btn-down.text-left:after,.btn-down.text-left:before,.btn-left.text-left input,.btn-left.text-left:after,.btn-left.text-left:before,.btn-menu.text-left input,.btn-menu.text-left:after,.btn-menu.text-left:before,.btn-right.text-left input,.btn-right.text-left:after,.btn-right.text-left:before,.btn-toggle.text-left input,.btn-toggle.text-left:after,.btn-toggle.text-left:before,.btn-up.text-left input,.btn-up.text-left:after,.btn-up.text-left:before{left:auto;right:18px}.btn-toggle.has-checked:after,.toggle.has-checked.btn-toggle:after{transform:rotate(-45deg) translate(-14%,16%)}.btn-toggle:has(:checked):after,.toggle:has(:checked).btn-toggle:after{transform:rotate(-45deg) translate(-14%,16%)}select{background-image:url("data:image/svg+xml;utf8,");background-position-x:95%;background-position-y:52%;background-repeat:no-repeat;line-height:2.1em;padding-right:1.7em}select option{background:#eee;color:#333}@media(prefers-color-scheme:dark){select option{background:#333;color:#eee}}textarea{line-height:1.2;max-height:500px;max-width:100%;min-height:8em;min-width:100%;padding:.75rem}label{display:block;position:relative}label sub,label sup{animation:none;opacity:.7;position:absolute;top:50%;transform:translate(10px,-50%);transform-origin:left;transition:all .2s ease-in-out}label.has-textarea sub,label.has-textarea sup{top:19px}label:has(textarea) sub,label:has(textarea) sup{top:19px}label.active sub,label.active sup,label:focus-within sub,label:focus-within sup{font-weight:500;opacity:.8;top:-12px;transform:translate(3px,-50%) scale(.85)}label.active sub,label:focus-within sub{top:calc(100% + 11px)}label:focus-within sub,label:focus-within sup{animation:all .2s ease forwards;color:var(--spry-accent-color)}label.has-sup{margin-top:1rem}label.has-sub{margin-bottom:1rem}label:has(sup){margin-top:1rem}label:has(sub){margin-bottom:1rem}@keyframes labll{0%{opacity:1}50%{opacity:.4}to{opacity:.8}}@keyframes spinner{0%{transform:rotate(0deg)}90%,to{transform:rotate(1turn)}}.loader{position:relative}.loader:after{border:2px solid transparent;border-color:var(--spry-accent-color) var(--spry-accent-color) transparent transparent;border-radius:50%;box-sizing:border-box;content:"";height:1.3em;inset:0;margin:auto;opacity:0;pointer-events:none;position:absolute;transition:opacity .3s ease-in-out .1s;width:1.3em}.loader.loading{--spry-btn-color-text:transparent;color:transparent;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.loader.loading:after{animation:spinner .8s ease infinite;opacity:1}.btn.loader:after{border-color:#fff #fff transparent transparent}table{border-collapse:collapse;margin-top:1rem;width:100%}table td,table th{padding:.6rem .2rem;text-align:left}table thead th{font-weight:500}table tbody tr:hover td{background-color:rgba(20,148,223,.04)}table tbody tr td{border-top:1px solid #efefef}table tbody tr:first-child td{border-color:#d6d6d6}hr{background-color:#888;border:0;height:1px;margin:1.25em}section{padding:2.5em 1.25em}@media screen and (min-width:40em){hr{margin:2em}section{padding:4em 2em}}@media screen and (min-width:80em){hr{margin:2.25em}section{padding:4.5em 2.25em}}section.bg-dark+section.bg-dark,section.bg-error+section.bg-error,section.bg-inherit+section.bg-inherit,section.bg-light+section.bg-light,section.bg-medium+section.bg-medium,section.bg-primary+section.bg-primary,section.bg-success+section.bg-success,section.bg-text+section.bg-text,section.bg-transparent+section.bg-transparent,section.bg-warning+section.bg-warning,section.bg-white+section.bg-white{padding-top:0}article{align-items:flex-start;background-color:#fff;border-color:var(--spry-accent-color);display:flex;flex-direction:column;gap:2em;justify-content:flex-start;overflow:hidden;padding:2em;position:relative}article:has(>footer),article:has(>header){padding:0}article:has(>footer)>div,article:has(>footer)>footer,article:has(>footer)>header,article:has(>footer)>p,article:has(>header)>div,article:has(>header)>footer,article:has(>header)>header,article:has(>header)>p{padding-left:2rem;padding-right:2rem}article>footer,article>header{align-items:center;background-color:var(--spry-accent-color);color:var(--spry-accent-color-text);display:flex;padding-bottom:1em;padding-top:1em}article>footer{margin-top:auto}article>div,article>footer,article>h1,article>h2,article>h3,article>h4,article>h5,article>h6,article>header,article>p{width:100%}.has-tooltip{position:relative}.has-tooltip:hover{z-index:2}.has-tooltip .tooltip{cursor:auto;position:absolute;transition:opacity .2s ease-in-out;width:90vw}.has-tooltip:not(:hover) .tooltip{opacity:0;pointer-events:none}:has(>.tooltip){position:relative}:has(>.tooltip):hover{z-index:2}:has(>.tooltip) .tooltip{cursor:auto;position:absolute;transition:opacity .2s ease-in-out;width:90vw}:has(>.tooltip):not(:hover) .tooltip{opacity:0;pointer-events:none}/*!
12 | * Spry Modals
13 | */@keyframes modalAlert{20%{transform:scale(1.03)}40%{transform:scale(1)}60%{transform:scale(1.03)}80%{transform:none}}.modal{align-items:center;background-color:rgba(0,0,0,.7);display:flex;inset:0;justify-content:center;opacity:0;pointer-events:none;position:fixed;transition:opacity .25s cubic-bezier(.25,.8,.25,1);z-index:1000}.modal.bounce{animation-duration:.4s;animation-name:modalAlert}.modal.show{opacity:1;pointer-events:all}.modal.blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal.no-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;min-width:300px}.modal.no-backdrop.show{pointer-events:none}.modal.no-backdrop.show .modal-content{pointer-events:all}.modal-content{box-sizing:border-box;display:block;overflow:hidden;position:relative;transform:scale(.6);transition:transform .3s cubic-bezier(.25,.8,.25,1);width:90%}.modal.show .modal-content{transform:none}/*!
14 | * Spry Grid
15 | */.grid{display:grid}.grid,.row{gap:var(--spry-gap)}.row{display:flex;flex-wrap:wrap}.row>*{flex:0 100%}.row.columns-fixed>*,.row>.col-fixed{flex:1}.row.columns-auto>*{flex:auto;max-width:none;min-width:auto}.row>.col-auto{flex:0 auto;max-width:none;min-width:auto}.grid.columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-100{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.row.columns-1>*{flex:none;flex-basis:calc(100% - (var(--spry-gap)*(1 - 1))/1)}.row>.col-1{flex:calc(8.333% - var(--spry-gap));max-width:calc(8.333% - ((var(--spry-gap)*(1/12)) - var(--spry-gap))/.08333)}.grid.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-200{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.row.columns-2>*{flex:none;flex-basis:calc(50% - (var(--spry-gap)*(2 - 1))/2)}.row>.col-2{flex:calc(16.667% - var(--spry-gap));max-width:calc(16.667% - ((var(--spry-gap)*(2/12)) - var(--spry-gap))/.16667)}.grid>.col-2{grid-column:1/span 2}.grid.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-300{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.row.columns-3>*{flex:none;flex-basis:calc(33.333% - (var(--spry-gap)*(3 - 1))/3)}.row>.col-3{flex:calc(25% - var(--spry-gap));max-width:calc(25% - ((var(--spry-gap)*(3/12)) - var(--spry-gap))/.25)}.grid>.col-3{grid-column:1/span 3}.grid.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-400{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.row.columns-4>*{flex:none;flex-basis:calc(25% - (var(--spry-gap)*(4 - 1))/4)}.row>.col-4{flex:calc(33.333% - var(--spry-gap));max-width:calc(33.333% - ((var(--spry-gap)*(4/12)) - var(--spry-gap))/.33333)}.grid>.col-4{grid-column:1/span 4}.grid.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-500{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(500px,1fr))}.row.columns-5>*{flex:none;flex-basis:calc(20% - (var(--spry-gap)*(5 - 1))/5)}.row>.col-5{flex:calc(41.667% - var(--spry-gap));max-width:calc(41.667% - ((var(--spry-gap)*(5/12)) - var(--spry-gap))/.41667)}.grid>.col-5{grid-column:1/span 5}.grid.columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-600{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(600px,1fr))}.row.columns-6>*{flex:none;flex-basis:calc(16.667% - (var(--spry-gap)*(6 - 1))/6)}.row>.col-6{flex:calc(50% - var(--spry-gap));max-width:calc(50% - ((var(--spry-gap)*(6/12)) - var(--spry-gap))/.5)}.grid>.col-6{grid-column:1/span 6}.grid.columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-700{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(700px,1fr))}.row.columns-7>*{flex:none;flex-basis:calc(14.286% - (var(--spry-gap)*(7 - 1))/7)}.row>.col-7{flex:calc(58.333% - var(--spry-gap));max-width:calc(58.333% - ((var(--spry-gap)*(7/12)) - var(--spry-gap))/.58333)}.grid>.col-7{grid-column:1/span 7}.grid.columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-800{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(800px,1fr))}.row.columns-8>*{flex:none;flex-basis:calc(12.5% - (var(--spry-gap)*(8 - 1))/8)}.row>.col-8{flex:calc(66.667% - var(--spry-gap));max-width:calc(66.667% - ((var(--spry-gap)*(8/12)) - var(--spry-gap))/.66667)}.grid>.col-8{grid-column:1/span 8}.grid.columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-900{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(900px,1fr))}.row.columns-9>*{flex:none;flex-basis:calc(11.111% - (var(--spry-gap)*(9 - 1))/9)}.row>.col-9{flex:calc(75% - var(--spry-gap));max-width:calc(75% - ((var(--spry-gap)*(9/12)) - var(--spry-gap))/.75)}.grid>.col-9{grid-column:1/span 9}.grid.columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-1000{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(1000px,1fr))}.row.columns-10>*{flex:none;flex-basis:calc(10% - (var(--spry-gap)*(10 - 1))/10)}.row>.col-10{flex:calc(83.333% - var(--spry-gap));max-width:calc(83.333% - ((var(--spry-gap)*(10/12)) - var(--spry-gap))/.83333)}.grid>.col-10{grid-column:1/span 10}.grid.columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-1100{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(1100px,1fr))}.row.columns-11>*{flex:none;flex-basis:calc(9.091% - (var(--spry-gap)*(11 - 1))/11)}.row>.col-11{flex:calc(91.667% - var(--spry-gap));max-width:calc(91.667% - ((var(--spry-gap)*(11/12)) - var(--spry-gap))/.91667)}.grid>.col-11{grid-column:1/span 11}.grid.columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-1200{display:grid;gap:var(--spry-gap);grid-template-columns:repeat(auto-fit,minmax(1200px,1fr))}.row.columns-12>*{flex:none;flex-basis:calc(8.333% - (var(--spry-gap)*(12 - 1))/12)}.row>.col-12{flex:calc(100% - var(--spry-gap));max-width:calc(100% - ((var(--spry-gap)*(12/12)) - var(--spry-gap))/1)}.grid>.col-12{grid-column:1/span 12}.md-mw{max-width:40em}@media screen and (min-width:40em){.row.md-columns-fixed>*,.row>*,.row>.md-col-fixed{flex:1}.row.md-columns-auto>*{flex:auto;max-width:none;min-width:auto}.row>.md-col-auto{flex:0 auto;max-width:none;min-width:auto}.grid.md-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.row.md-columns-1>*{flex:none;flex-basis:calc(100% - (var(--spry-gap)*(1 - 1))/1)}.row>.md-col-1{flex:calc(8.333% - var(--spry-gap));max-width:calc(8.333% - ((var(--spry-gap)*(1/12)) - var(--spry-gap))/.08333)}.grid.md-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.row.md-columns-2>*{flex:none;flex-basis:calc(50% - (var(--spry-gap)*(2 - 1))/2)}.row>.md-col-2{flex:calc(16.667% - var(--spry-gap));max-width:calc(16.667% - ((var(--spry-gap)*(2/12)) - var(--spry-gap))/.16667)}.grid>.md-col-2{grid-column:1/span 2}.grid.md-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.row.md-columns-3>*{flex:none;flex-basis:calc(33.333% - (var(--spry-gap)*(3 - 1))/3)}.row>.md-col-3{flex:calc(25% - var(--spry-gap));max-width:calc(25% - ((var(--spry-gap)*(3/12)) - var(--spry-gap))/.25)}.grid>.md-col-3{grid-column:1/span 3}.grid.md-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.row.md-columns-4>*{flex:none;flex-basis:calc(25% - (var(--spry-gap)*(4 - 1))/4)}.row>.md-col-4{flex:calc(33.333% - var(--spry-gap));max-width:calc(33.333% - ((var(--spry-gap)*(4/12)) - var(--spry-gap))/.33333)}.grid>.md-col-4{grid-column:1/span 4}.grid.md-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.row.md-columns-5>*{flex:none;flex-basis:calc(20% - (var(--spry-gap)*(5 - 1))/5)}.row>.md-col-5{flex:calc(41.667% - var(--spry-gap));max-width:calc(41.667% - ((var(--spry-gap)*(5/12)) - var(--spry-gap))/.41667)}.grid>.md-col-5{grid-column:1/span 5}.grid.md-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.row.md-columns-6>*{flex:none;flex-basis:calc(16.667% - (var(--spry-gap)*(6 - 1))/6)}.row>.md-col-6{flex:calc(50% - var(--spry-gap));max-width:calc(50% - ((var(--spry-gap)*(6/12)) - var(--spry-gap))/.5)}.grid>.md-col-6{grid-column:1/span 6}.grid.md-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.row.md-columns-7>*{flex:none;flex-basis:calc(14.286% - (var(--spry-gap)*(7 - 1))/7)}.row>.md-col-7{flex:calc(58.333% - var(--spry-gap));max-width:calc(58.333% - ((var(--spry-gap)*(7/12)) - var(--spry-gap))/.58333)}.grid>.md-col-7{grid-column:1/span 7}.grid.md-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.row.md-columns-8>*{flex:none;flex-basis:calc(12.5% - (var(--spry-gap)*(8 - 1))/8)}.row>.md-col-8{flex:calc(66.667% - var(--spry-gap));max-width:calc(66.667% - ((var(--spry-gap)*(8/12)) - var(--spry-gap))/.66667)}.grid>.md-col-8{grid-column:1/span 8}.grid.md-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.row.md-columns-9>*{flex:none;flex-basis:calc(11.111% - (var(--spry-gap)*(9 - 1))/9)}.row>.md-col-9{flex:calc(75% - var(--spry-gap));max-width:calc(75% - ((var(--spry-gap)*(9/12)) - var(--spry-gap))/.75)}.grid>.md-col-9{grid-column:1/span 9}.grid.md-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.row.md-columns-10>*{flex:none;flex-basis:calc(10% - (var(--spry-gap)*(10 - 1))/10)}.row>.md-col-10{flex:calc(83.333% - var(--spry-gap));max-width:calc(83.333% - ((var(--spry-gap)*(10/12)) - var(--spry-gap))/.83333)}.grid>.md-col-10{grid-column:1/span 10}.grid.md-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.row.md-columns-11>*{flex:none;flex-basis:calc(9.091% - (var(--spry-gap)*(11 - 1))/11)}.row>.md-col-11{flex:calc(91.667% - var(--spry-gap));max-width:calc(91.667% - ((var(--spry-gap)*(11/12)) - var(--spry-gap))/.91667)}.grid>.md-col-11{grid-column:1/span 11}.grid.md-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.row.md-columns-12>*{flex:none;flex-basis:calc(8.333% - (var(--spry-gap)*(12 - 1))/12)}.row>.md-col-12{flex:calc(100% - var(--spry-gap));max-width:calc(100% - ((var(--spry-gap)*(12/12)) - var(--spry-gap))/1)}.grid>.md-col-12{grid-column:1/span 12}}.lg-mw{max-width:80em}@media screen and (min-width:80em){.row.lg-columns-fixed>*,.row>*,.row>.lg-col-fixed{flex:1}.row.lg-columns-auto>*{flex:auto;max-width:none;min-width:auto}.row>.lg-col-auto{flex:0 auto;max-width:none;min-width:auto}.grid.lg-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.row.lg-columns-1>*{flex:none;flex-basis:calc(100% - (var(--spry-gap)*(1 - 1))/1)}.row>.lg-col-1{flex:calc(8.333% - var(--spry-gap));max-width:calc(8.333% - ((var(--spry-gap)*(1/12)) - var(--spry-gap))/.08333)}.grid.lg-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.row.lg-columns-2>*{flex:none;flex-basis:calc(50% - (var(--spry-gap)*(2 - 1))/2)}.row>.lg-col-2{flex:calc(16.667% - var(--spry-gap));max-width:calc(16.667% - ((var(--spry-gap)*(2/12)) - var(--spry-gap))/.16667)}.grid>.lg-col-2{grid-column:1/span 2}.grid.lg-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.row.lg-columns-3>*{flex:none;flex-basis:calc(33.333% - (var(--spry-gap)*(3 - 1))/3)}.row>.lg-col-3{flex:calc(25% - var(--spry-gap));max-width:calc(25% - ((var(--spry-gap)*(3/12)) - var(--spry-gap))/.25)}.grid>.lg-col-3{grid-column:1/span 3}.grid.lg-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.row.lg-columns-4>*{flex:none;flex-basis:calc(25% - (var(--spry-gap)*(4 - 1))/4)}.row>.lg-col-4{flex:calc(33.333% - var(--spry-gap));max-width:calc(33.333% - ((var(--spry-gap)*(4/12)) - var(--spry-gap))/.33333)}.grid>.lg-col-4{grid-column:1/span 4}.grid.lg-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.row.lg-columns-5>*{flex:none;flex-basis:calc(20% - (var(--spry-gap)*(5 - 1))/5)}.row>.lg-col-5{flex:calc(41.667% - var(--spry-gap));max-width:calc(41.667% - ((var(--spry-gap)*(5/12)) - var(--spry-gap))/.41667)}.grid>.lg-col-5{grid-column:1/span 5}.grid.lg-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.row.lg-columns-6>*{flex:none;flex-basis:calc(16.667% - (var(--spry-gap)*(6 - 1))/6)}.row>.lg-col-6{flex:calc(50% - var(--spry-gap));max-width:calc(50% - ((var(--spry-gap)*(6/12)) - var(--spry-gap))/.5)}.grid>.lg-col-6{grid-column:1/span 6}.grid.lg-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.row.lg-columns-7>*{flex:none;flex-basis:calc(14.286% - (var(--spry-gap)*(7 - 1))/7)}.row>.lg-col-7{flex:calc(58.333% - var(--spry-gap));max-width:calc(58.333% - ((var(--spry-gap)*(7/12)) - var(--spry-gap))/.58333)}.grid>.lg-col-7{grid-column:1/span 7}.grid.lg-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.row.lg-columns-8>*{flex:none;flex-basis:calc(12.5% - (var(--spry-gap)*(8 - 1))/8)}.row>.lg-col-8{flex:calc(66.667% - var(--spry-gap));max-width:calc(66.667% - ((var(--spry-gap)*(8/12)) - var(--spry-gap))/.66667)}.grid>.lg-col-8{grid-column:1/span 8}.grid.lg-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.row.lg-columns-9>*{flex:none;flex-basis:calc(11.111% - (var(--spry-gap)*(9 - 1))/9)}.row>.lg-col-9{flex:calc(75% - var(--spry-gap));max-width:calc(75% - ((var(--spry-gap)*(9/12)) - var(--spry-gap))/.75)}.grid>.lg-col-9{grid-column:1/span 9}.grid.lg-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.row.lg-columns-10>*{flex:none;flex-basis:calc(10% - (var(--spry-gap)*(10 - 1))/10)}.row>.lg-col-10{flex:calc(83.333% - var(--spry-gap));max-width:calc(83.333% - ((var(--spry-gap)*(10/12)) - var(--spry-gap))/.83333)}.grid>.lg-col-10{grid-column:1/span 10}.grid.lg-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.row.lg-columns-11>*{flex:none;flex-basis:calc(9.091% - (var(--spry-gap)*(11 - 1))/11)}.row>.lg-col-11{flex:calc(91.667% - var(--spry-gap));max-width:calc(91.667% - ((var(--spry-gap)*(11/12)) - var(--spry-gap))/.91667)}.grid>.lg-col-11{grid-column:1/span 11}.grid.lg-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.row.lg-columns-12>*{flex:none;flex-basis:calc(8.333% - (var(--spry-gap)*(12 - 1))/12)}.row>.lg-col-12{flex:calc(100% - var(--spry-gap));max-width:calc(100% - ((var(--spry-gap)*(12/12)) - var(--spry-gap))/1)}.grid>.lg-col-12{grid-column:1/span 12}}.g-0{--spry-gap:0em;gap:var(--spry-gap)}@media screen and (min-width:40em){.md-g-0{--spry-gap:0em;gap:var(--spry-gap)}}@media screen and (min-width:80em){.lg-g-0{--spry-gap:0em;gap:var(--spry-gap)}}.g-1{--spry-gap:0.5em;gap:var(--spry-gap)}@media screen and (min-width:40em){.md-g-1{--spry-gap:0.5em;gap:var(--spry-gap)}}@media screen and (min-width:80em){.lg-g-1{--spry-gap:0.5em;gap:var(--spry-gap)}}.g-2{--spry-gap:1em;gap:var(--spry-gap)}@media screen and (min-width:40em){.md-g-2{--spry-gap:1em;gap:var(--spry-gap)}}@media screen and (min-width:80em){.lg-g-2{--spry-gap:1em;gap:var(--spry-gap)}}.g-3{--spry-gap:2em;gap:var(--spry-gap)}@media screen and (min-width:40em){.md-g-3{--spry-gap:2em;gap:var(--spry-gap)}}@media screen and (min-width:80em){.lg-g-3{--spry-gap:2em;gap:var(--spry-gap)}}.g-4{--spry-gap:3em;gap:var(--spry-gap)}@media screen and (min-width:40em){.md-g-4{--spry-gap:3em;gap:var(--spry-gap)}}@media screen and (min-width:80em){.lg-g-4{--spry-gap:3em;gap:var(--spry-gap)}}.g-5{--spry-gap:4em;gap:var(--spry-gap)}@media screen and (min-width:40em){.md-g-5{--spry-gap:4em;gap:var(--spry-gap)}}@media screen and (min-width:80em){.lg-g-5{--spry-gap:4em;gap:var(--spry-gap)}}/*!
16 | * Spry Sliders
17 | */.slider{position:relative}.slider-slides{-ms-overflow-style:none;display:flex;flex-wrap:nowrap;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory}.slider-slides::-webkit-scrollbar{display:none;width:0}.slider-slides::-webkit-scrollbar-track{background:transparent}.slider-slides::-webkit-scrollbar-thumb{background:transparent;border:none}.slider-slides>*{display:flex;flex:0 0 100%;flex-direction:column;justify-content:center;position:relative;scroll-snap-align:start;width:100%}.slider[data-snap] .slider-slides>*{scroll-snap-stop:always}.slider .grid img[loading=lazy],.slider .row img[loading=lazy]{height:100%;width:100%}.slider .slider-next,.slider .slider-prev{content:"";left:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .2s ease-in-out;z-index:1}.slider .slider-next{left:auto;right:0}.slider[data-position=end] .slider-next,.slider[data-position=start] .slider-prev{opacity:0}.slider .slider-pagination{align-items:center;display:flex;gap:2%;justify-content:center}.slider .slider-pagination>*{background-color:var(--spry-accent-color);border-radius:50%;cursor:pointer;height:1em;opacity:.4;transition:opacity .2s ease-in-out;width:1em}.slider .slider-pagination>.active,.slider .slider-pagination>:hover{opacity:1}/*!
18 | * Spry Utilities
19 | */.bold{font-weight:700}.normal{font-weight:400}.italic{font-style:italic}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.pointer{cursor:pointer}.rounded{border-radius:5px;overflow:hidden}.rounded-bottom{border-radius:0 0 5px 5px}.circle{border-radius:50%}.square{border-radius:0}.float-left{float:left}.float-right{float:right}.clear{clear:both}.index-1{z-index:1}.index-2{z-index:2}.index-3{z-index:3}.note{font-size:90%;font-style:italic;opacity:.8}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}.rotate-270{transform:rotate(270deg)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.justify{text-align:justify}.no-wrap{flex-wrap:nowrap;white-space:nowrap}.pre-wrap{white-space:pre-wrap}.break-word{word-wrap:break-word}.inline{display:inline;width:auto}.flex{display:flex}.block{display:block;width:100%}.none{display:none}.inline-block{display:inline-block;width:auto}.inline-flex{display:inline-flex;width:auto}.table{display:table}.table-cell{display:table-cell}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-center{align-items:center}.ai-stretch{align-items:stretch}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-between{justify-content:space-between}.jc-around{justify-content:space-around}.flex-center,.flex-middle{align-items:center;display:flex}.flex-center{justify-content:center}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.relative{position:relative}.absolute{position:absolute}.collapse{position:relative}.collapse>*{position:absolute}.sticky{position:sticky;top:0}.fixed{position:fixed}.inset{inset:0;position:absolute}.inset-top{bottom:auto;position:absolute;top:0}.inset-right{left:auto;position:absolute;right:0}.inset-bottom{bottom:0;position:absolute}.inset-left{left:0;position:absolute;right:auto}.outset-top{bottom:100%;position:absolute;top:auto}.outset-right{left:100%;position:absolute;right:auto}.outset-bottom{bottom:auto;position:absolute;top:100%}.outset-left{left:auto;position:absolute;right:100%}.pointer-none{pointer-events:none}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.overflow-hidden{overflow:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.order-first{order:-1}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-last{order:99999}.border{border:1px solid var(--spry-accent-color)}.border-top{border-top:1px solid var(--spry-accent-color)}.border-right{border-right:1px solid var(--spry-accent-color)}.border-bottom{border-bottom:1px solid var(--spry-accent-color)}.border-left{border-left:1px solid var(--spry-accent-color)}.no-border{border:0}.shadow{box-shadow:1px 3px 4px rgba(0,0,0,.12)}.no-shadow{box-shadow:none}.cover{background-size:cover;-o-object-fit:cover;object-fit:cover}.contain{background-size:contain;-o-object-fit:contain;object-fit:contain}.h{height:100%}.vh{height:100vh}.w{width:100%}.vw{width:100vw}.h-0{height:0}.w-0{width:0}.h-100{height:100px;min-height:100px}.h-100,.mh-100{max-height:100px}.vh-10{height:10vh}.mvh-10{max-height:10vh}.row>.w-100,.w-100{max-width:100px;min-width:100px;width:100px}.mw-100,.row>.mw-100{max-width:100px}.vw-10{width:10vw}.mvw-10,.row>.mvw-10{max-width:10vw}.h-200{height:200px;min-height:200px}.h-200,.mh-200{max-height:200px}.vh-20{height:20vh}.mvh-20{max-height:20vh}.row>.w-200,.w-200{max-width:200px;min-width:200px;width:200px}.mw-200,.row>.mw-200{max-width:200px}.vw-20{width:20vw}.mvw-20,.row>.mvw-20{max-width:20vw}.h-300{height:300px;min-height:300px}.h-300,.mh-300{max-height:300px}.vh-30{height:30vh}.mvh-30{max-height:30vh}.row>.w-300,.w-300{max-width:300px;min-width:300px;width:300px}.mw-300,.row>.mw-300{max-width:300px}.vw-30{width:30vw}.mvw-30,.row>.mvw-30{max-width:30vw}.h-400{height:400px;min-height:400px}.h-400,.mh-400{max-height:400px}.vh-40{height:40vh}.mvh-40{max-height:40vh}.row>.w-400,.w-400{max-width:400px;min-width:400px;width:400px}.mw-400,.row>.mw-400{max-width:400px}.vw-40{width:40vw}.mvw-40,.row>.mvw-40{max-width:40vw}.h-500{height:500px;min-height:500px}.h-500,.mh-500{max-height:500px}.vh-50{height:50vh}.mvh-50{max-height:50vh}.row>.w-500,.w-500{max-width:500px;min-width:500px;width:500px}.mw-500,.row>.mw-500{max-width:500px}.vw-50{width:50vw}.mvw-50,.row>.mvw-50{max-width:50vw}.h-600{height:600px;min-height:600px}.h-600,.mh-600{max-height:600px}.vh-60{height:60vh}.mvh-60{max-height:60vh}.row>.w-600,.w-600{max-width:600px;min-width:600px;width:600px}.mw-600,.row>.mw-600{max-width:600px}.vw-60{width:60vw}.mvw-60,.row>.mvw-60{max-width:60vw}.h-700{height:700px;min-height:700px}.h-700,.mh-700{max-height:700px}.vh-70{height:70vh}.mvh-70{max-height:70vh}.row>.w-700,.w-700{max-width:700px;min-width:700px;width:700px}.mw-700,.row>.mw-700{max-width:700px}.vw-70{width:70vw}.mvw-70,.row>.mvw-70{max-width:70vw}.h-800{height:800px;min-height:800px}.h-800,.mh-800{max-height:800px}.vh-80{height:80vh}.mvh-80{max-height:80vh}.row>.w-800,.w-800{max-width:800px;min-width:800px;width:800px}.mw-800,.row>.mw-800{max-width:800px}.vw-80{width:80vw}.mvw-80,.row>.mvw-80{max-width:80vw}.h-900{height:900px;min-height:900px}.h-900,.mh-900{max-height:900px}.vh-90{height:90vh}.mvh-90{max-height:90vh}.row>.w-900,.w-900{max-width:900px;min-width:900px;width:900px}.mw-900,.row>.mw-900{max-width:900px}.vw-90{width:90vw}.mvw-90,.row>.mvw-90{max-width:90vw}.h-1000{height:1000px;min-height:1000px}.h-1000,.mh-1000{max-height:1000px}.vh-100{height:100vh}.mvh-100{max-height:100vh}.row>.w-1000,.w-1000{max-width:1000px;min-width:1000px;width:1000px}.mw-1000,.row>.mw-1000{max-width:1000px}.vw-100{width:100vw}.mvw-100,.row>.mvw-100{max-width:100vw}.h-1100{height:1100px;min-height:1100px}.h-1100,.mh-1100{max-height:1100px}.vh-110{height:110vh}.mvh-110{max-height:110vh}.row>.w-1100,.w-1100{max-width:1100px;min-width:1100px;width:1100px}.mw-1100,.row>.mw-1100{max-width:1100px}.vw-110{width:110vw}.mvw-110,.row>.mvw-110{max-width:110vw}.h-1200{height:1200px;min-height:1200px}.h-1200,.mh-1200{max-height:1200px}.vh-120{height:120vh}.mvh-120{max-height:120vh}.row>.w-1200,.w-1200{max-width:1200px;min-width:1200px;width:1200px}.mw-1200,.row>.mw-1200{max-width:1200px}.vw-120{width:120vw}.mvw-120,.row>.mvw-120{max-width:120vw}.o-0{opacity:0}.o-10{opacity:.1}.o-20{opacity:.2}.o-30{opacity:.3}.o-40{opacity:.4}.o-50{opacity:.5}.o-60{opacity:.6}.o-70{opacity:.7}.o-80{opacity:.8}.o-90{opacity:.9}.o-100{opacity:1}.xl{font-size:140%}.lg{font-size:120%}.md{font-size:100%}.sm{font-size:90%}.xs{font-size:75%}@media screen and (min-width:40em){.md-text-left{text-align:left}.md-text-center{text-align:center}.md-text-right{text-align:right}.md-justify{text-align:justify}.md-no-wrap{flex-wrap:nowrap;white-space:nowrap}.md-pre-wrap{white-space:pre-wrap}.md-break-word{word-wrap:break-word}.md-inline{display:inline;width:auto}.md-flex{display:flex}.md-block{display:block}.md-none{display:none}.md-inline-block{display:inline-block;width:auto}.md-inline-flex{display:inline-flex;width:auto}.md-table{display:table}.md-table-cell{display:table-cell}.md-relative{position:relative}.md-absolute{position:absolute}.md-collapse{position:relative}.md-collapse>*{position:absolute}.md-sticky{position:sticky;top:0}.md-fixed{position:fixed}.md-inset{inset:0;position:absolute}.md-inset-top{bottom:auto;position:absolute;top:0}.md-inset-right{left:auto;position:absolute;right:0}.md-inset-bottom{bottom:0;position:absolute;top:auto}.md-inset-left{left:0;position:absolute;right:auto}.md-outset-top{bottom:100%;position:absolute;top:auto}.md-outset-right{left:100%;position:absolute;right:auto}.md-outset-bottom{bottom:auto;position:absolute;top:100%}.md-outset-left{left:auto;position:absolute;right:100%}.md-pointer-none{pointer-events:none}.md-align-baseline{vertical-align:baseline}.md-align-top{vertical-align:top}.md-align-middle{vertical-align:middle}.md-align-bottom{vertical-align:bottom}.md-overflow-hidden{overflow:hidden}.md-overflow-scroll{overflow:scroll}.md-overflow-auto{overflow:auto}.md-order-first{order:-1}.md-order-0{order:0}.md-order-1{order:1}.md-order-2{order:2}.md-order-3{order:3}.md-order-last{order:99999}.md-ai-start{align-items:flex-start}.md-ai-end{align-items:flex-end}.md-ai-center{align-items:center}.md-ai-stretch{align-items:stretch}.md-jc-start{justify-content:flex-start}.md-jc-end{justify-content:flex-end}.md-jc-center{justify-content:center}.md-jc-between{justify-content:space-between}.md-jc-around{justify-content:space-around}.md-flex-center,.md-flex-middle{align-items:center;display:flex}.md-flex-center{justify-content:center}.md-flex-wrap{flex-wrap:wrap}.md-flex-column{flex-direction:column}.md-h{height:100%}.md-h-0{height:0}.md-vh{height:100vh}.md-w{width:100%}.md-w-0{width:0}.md-vw{width:100vw}.md-border{border:1px solid var(--spry-accent-color)}.md-border-top{border-top:1px solid var(--spry-accent-color)}.md-border-right{border-right:1px solid var(--spry-accent-color)}.md-border-bottom{border-bottom:1px solid var(--spry-accent-color)}.md-border-left{border-left:1px solid var(--spry-accent-color)}.md-no-border{border:0}.md-shadow{box-shadow:1px 3px 4px rgba(0,0,0,.12)}.md-no-shadow{box-shadow:none}.md-cover{background-size:cover;-o-object-fit:cover;object-fit:cover}.md-contain{background-size:contain;-o-object-fit:contain;object-fit:contain}.md-h-100{height:100px;min-height:100px}.md-h-100,.md-mh-100{max-height:100px}.md-vh-10{height:10vh}.md-mvh-10{max-height:10vh}.md-w-100,.row>.md-w-100{max-width:100px;min-width:100px;width:100px}.md-mw-100,.row>.md-mw-100{max-width:100px}.md-vw-10{width:10vw}.md-mvw-10,.row>.md-mvw-10{max-width:10vw}.md-h-200{height:200px;min-height:200px}.md-h-200,.md-mh-200{max-height:200px}.md-vh-20{height:20vh}.md-mvh-20{max-height:20vh}.md-w-200,.row>.md-w-200{max-width:200px;min-width:200px;width:200px}.md-mw-200,.row>.md-mw-200{max-width:200px}.md-vw-20{width:20vw}.md-mvw-20,.row>.md-mvw-20{max-width:20vw}.md-h-300{height:300px;min-height:300px}.md-h-300,.md-mh-300{max-height:300px}.md-vh-30{height:30vh}.md-mvh-30{max-height:30vh}.md-w-300,.row>.md-w-300{max-width:300px;min-width:300px;width:300px}.md-mw-300,.row>.md-mw-300{max-width:300px}.md-vw-30{width:30vw}.md-mvw-30,.row>.md-mvw-30{max-width:30vw}.md-h-400{height:400px;min-height:400px}.md-h-400,.md-mh-400{max-height:400px}.md-vh-40{height:40vh}.md-mvh-40{max-height:40vh}.md-w-400,.row>.md-w-400{max-width:400px;min-width:400px;width:400px}.md-mw-400,.row>.md-mw-400{max-width:400px}.md-vw-40{width:40vw}.md-mvw-40,.row>.md-mvw-40{max-width:40vw}.md-h-500{height:500px;min-height:500px}.md-h-500,.md-mh-500{max-height:500px}.md-vh-50{height:50vh}.md-mvh-50{max-height:50vh}.md-w-500,.row>.md-w-500{max-width:500px;min-width:500px;width:500px}.md-mw-500,.row>.md-mw-500{max-width:500px}.md-vw-50{width:50vw}.md-mvw-50,.row>.md-mvw-50{max-width:50vw}.md-h-600{height:600px;min-height:600px}.md-h-600,.md-mh-600{max-height:600px}.md-vh-60{height:60vh}.md-mvh-60{max-height:60vh}.md-w-600,.row>.md-w-600{max-width:600px;min-width:600px;width:600px}.md-mw-600,.row>.md-mw-600{max-width:600px}.md-vw-60{width:60vw}.md-mvw-60,.row>.md-mvw-60{max-width:60vw}.md-h-700{height:700px;min-height:700px}.md-h-700,.md-mh-700{max-height:700px}.md-vh-70{height:70vh}.md-mvh-70{max-height:70vh}.md-w-700,.row>.md-w-700{max-width:700px;min-width:700px;width:700px}.md-mw-700,.row>.md-mw-700{max-width:700px}.md-vw-70{width:70vw}.md-mvw-70,.row>.md-mvw-70{max-width:70vw}.md-h-800{height:800px;min-height:800px}.md-h-800,.md-mh-800{max-height:800px}.md-vh-80{height:80vh}.md-mvh-80{max-height:80vh}.md-w-800,.row>.md-w-800{max-width:800px;min-width:800px;width:800px}.md-mw-800,.row>.md-mw-800{max-width:800px}.md-vw-80{width:80vw}.md-mvw-80,.row>.md-mvw-80{max-width:80vw}.md-h-900{height:900px;min-height:900px}.md-h-900,.md-mh-900{max-height:900px}.md-vh-90{height:90vh}.md-mvh-90{max-height:90vh}.md-w-900,.row>.md-w-900{max-width:900px;min-width:900px;width:900px}.md-mw-900,.row>.md-mw-900{max-width:900px}.md-vw-90{width:90vw}.md-mvw-90,.row>.md-mvw-90{max-width:90vw}.md-h-1000{height:1000px;min-height:1000px}.md-h-1000,.md-mh-1000{max-height:1000px}.md-vh-100{height:100vh}.md-mvh-100{max-height:100vh}.md-w-1000,.row>.md-w-1000{max-width:1000px;min-width:1000px;width:1000px}.md-mw-1000,.row>.md-mw-1000{max-width:1000px}.md-vw-100{width:100vw}.md-mvw-100,.row>.md-mvw-100{max-width:100vw}.md-h-1100{height:1100px;min-height:1100px}.md-h-1100,.md-mh-1100{max-height:1100px}.md-vh-110{height:110vh}.md-mvh-110{max-height:110vh}.md-w-1100,.row>.md-w-1100{max-width:1100px;min-width:1100px;width:1100px}.md-mw-1100,.row>.md-mw-1100{max-width:1100px}.md-vw-110{width:110vw}.md-mvw-110,.row>.md-mvw-110{max-width:110vw}.md-h-1200{height:1200px;min-height:1200px}.md-h-1200,.md-mh-1200{max-height:1200px}.md-vh-120{height:120vh}.md-mvh-120{max-height:120vh}.md-w-1200,.row>.md-w-1200{max-width:1200px;min-width:1200px;width:1200px}.md-mw-1200,.row>.md-mw-1200{max-width:1200px}.md-vw-120{width:120vw}.md-mvw-120,.row>.md-mvw-120{max-width:120vw}.md-o-0{opacity:0}.md-o-10{opacity:.1}.md-o-20{opacity:.2}.md-o-30{opacity:.3}.md-o-40{opacity:.4}.md-o-50{opacity:.5}.md-o-60{opacity:.6}.md-o-70{opacity:.7}.md-o-80{opacity:.8}.md-o-90{opacity:.9}.md-o-100{opacity:1}.md-xl{font-size:140%}.md-lg{font-size:120%}.md-md{font-size:100%}.md-sm{font-size:90%}.md-xs{font-size:75%}}@media screen and (min-width:80em){.lg-text-left{text-align:left}.lg-text-center{text-align:center}.lg-text-right{text-align:right}.lg-justify{text-align:justify}.lg-no-wrap{flex-wrap:nowrap;white-space:nowrap}.lg-pre-wrap{white-space:pre-wrap}.lg-break-word{word-wrap:break-word}.lg-inline{display:inline;width:auto}.lg-flex{display:flex}.lg-block{display:block}.lg-none{display:none}.lg-inline-block{display:inline-block;width:auto}.lg-inline-flex{display:inline-flex;width:auto}.lg-table{display:table}.lg-table-cell{display:table-cell}.lg-relative{position:relative}.lg-absolute{position:absolute}.lg-collapse{position:relative}.lg-collapse>*{position:absolute}.lg-sticky{position:sticky;top:0}.lg-fixed{position:fixed}.lg-inset{inset:0;position:absolute}.lg-inset-top{bottom:auto;position:absolute;top:0}.lg-inset-right{left:auto;position:absolute;right:0}.lg-inset-bottom{bottom:0;position:absolute;top:auto}.lg-inset-left{left:0;position:absolute;right:auto}.lg-outset-top{bottom:100%;position:absolute;top:auto}.lg-outset-right{left:100%;position:absolute;right:auto}.lg-outset-bottom{bottom:auto;position:absolute;top:100%}.lg-outset-left{left:auto;position:absolute;right:100%}.lg-pointer-none{pointer-events:none}.lg-align-baseline{vertical-align:baseline}.lg-align-top{vertical-align:top}.lg-align-middle{vertical-align:middle}.lg-align-bottom{vertical-align:bottom}.lg-overflow-hidden{overflow:hidden}.lg-overflow-scroll{overflow:scroll}.lg-overflow-auto{overflow:auto}.lg-order-first{order:-1}.lg-order-0{order:0}.lg-order-1{order:1}.lg-order-2{order:2}.lg-order-3{order:3}.lg-order-last{order:99999}.lg-ai-start{align-items:flex-start}.lg-ai-end{align-items:flex-end}.lg-ai-center{align-items:center}.lg-ai-stretch{align-items:stretch}.lg-jc-start{justify-content:flex-start}.lg-jc-end{justify-content:flex-end}.lg-jc-center{justify-content:center}.lg-jc-between{justify-content:space-between}.lg-jc-around{justify-content:space-around}.lg-flex-center,.lg-flex-middle{align-items:center;display:flex}.lg-flex-center{justify-content:center}.lg-flex-wrap{flex-wrap:wrap}.lg-flex-column{flex-direction:column}.lg-h{height:100%}.lg-h-0{height:0}.lg-vh{height:100vh}.lg-w{width:100%}.lg-w-0{width:0}.lg-vw{width:100vw}.lg-border{border:1px solid var(--spry-accent-color)}.lg-border-top{border-top:1px solid var(--spry-accent-color)}.lg-border-right{border-right:1px solid var(--spry-accent-color)}.lg-border-bottom{border-bottom:1px solid var(--spry-accent-color)}.lg-border-left{border-left:1px solid var(--spry-accent-color)}.lg-no-border{border:0}.lg-shadow{box-shadow:1px 3px 4px rgba(0,0,0,.12)}.lg-no-shadow{box-shadow:none}.lg-cover{background-size:cover;-o-object-fit:cover;object-fit:cover}.lg-contain{background-size:contain;-o-object-fit:contain;object-fit:contain}.lg-h-100{height:100px;min-height:100px}.lg-h-100,.lg-mh-100{max-height:100px}.lg-vh-10{height:10vh}.lg-mvh-10{max-height:10vh}.lg-w-100,.row>.lg-w-100{max-width:100px;min-width:100px;width:100px}.lg-mw-100,.row>.lg-mw-100{max-width:100px}.lg-vw-10{width:10vw}.lg-mvw-10,.row>.lg-mvw-10{max-width:10vw}.lg-h-200{height:200px;min-height:200px}.lg-h-200,.lg-mh-200{max-height:200px}.lg-vh-20{height:20vh}.lg-mvh-20{max-height:20vh}.lg-w-200,.row>.lg-w-200{max-width:200px;min-width:200px;width:200px}.lg-mw-200,.row>.lg-mw-200{max-width:200px}.lg-vw-20{width:20vw}.lg-mvw-20,.row>.lg-mvw-20{max-width:20vw}.lg-h-300{height:300px;min-height:300px}.lg-h-300,.lg-mh-300{max-height:300px}.lg-vh-30{height:30vh}.lg-mvh-30{max-height:30vh}.lg-w-300,.row>.lg-w-300{max-width:300px;min-width:300px;width:300px}.lg-mw-300,.row>.lg-mw-300{max-width:300px}.lg-vw-30{width:30vw}.lg-mvw-30,.row>.lg-mvw-30{max-width:30vw}.lg-h-400{height:400px;min-height:400px}.lg-h-400,.lg-mh-400{max-height:400px}.lg-vh-40{height:40vh}.lg-mvh-40{max-height:40vh}.lg-w-400,.row>.lg-w-400{max-width:400px;min-width:400px;width:400px}.lg-mw-400,.row>.lg-mw-400{max-width:400px}.lg-vw-40{width:40vw}.lg-mvw-40,.row>.lg-mvw-40{max-width:40vw}.lg-h-500{height:500px;min-height:500px}.lg-h-500,.lg-mh-500{max-height:500px}.lg-vh-50{height:50vh}.lg-mvh-50{max-height:50vh}.lg-w-500,.row>.lg-w-500{max-width:500px;min-width:500px;width:500px}.lg-mw-500,.row>.lg-mw-500{max-width:500px}.lg-vw-50{width:50vw}.lg-mvw-50,.row>.lg-mvw-50{max-width:50vw}.lg-h-600{height:600px;min-height:600px}.lg-h-600,.lg-mh-600{max-height:600px}.lg-vh-60{height:60vh}.lg-mvh-60{max-height:60vh}.lg-w-600,.row>.lg-w-600{max-width:600px;min-width:600px;width:600px}.lg-mw-600,.row>.lg-mw-600{max-width:600px}.lg-vw-60{width:60vw}.lg-mvw-60,.row>.lg-mvw-60{max-width:60vw}.lg-h-700{height:700px;min-height:700px}.lg-h-700,.lg-mh-700{max-height:700px}.lg-vh-70{height:70vh}.lg-mvh-70{max-height:70vh}.lg-w-700,.row>.lg-w-700{max-width:700px;min-width:700px;width:700px}.lg-mw-700,.row>.lg-mw-700{max-width:700px}.lg-vw-70{width:70vw}.lg-mvw-70,.row>.lg-mvw-70{max-width:70vw}.lg-h-800{height:800px;min-height:800px}.lg-h-800,.lg-mh-800{max-height:800px}.lg-vh-80{height:80vh}.lg-mvh-80{max-height:80vh}.lg-w-800,.row>.lg-w-800{max-width:800px;min-width:800px;width:800px}.lg-mw-800,.row>.lg-mw-800{max-width:800px}.lg-vw-80{width:80vw}.lg-mvw-80,.row>.lg-mvw-80{max-width:80vw}.lg-h-900{height:900px;min-height:900px}.lg-h-900,.lg-mh-900{max-height:900px}.lg-vh-90{height:90vh}.lg-mvh-90{max-height:90vh}.lg-w-900,.row>.lg-w-900{max-width:900px;min-width:900px;width:900px}.lg-mw-900,.row>.lg-mw-900{max-width:900px}.lg-vw-90{width:90vw}.lg-mvw-90,.row>.lg-mvw-90{max-width:90vw}.lg-h-1000{height:1000px;min-height:1000px}.lg-h-1000,.lg-mh-1000{max-height:1000px}.lg-vh-100{height:100vh}.lg-mvh-100{max-height:100vh}.lg-w-1000,.row>.lg-w-1000{max-width:1000px;min-width:1000px;width:1000px}.lg-mw-1000,.row>.lg-mw-1000{max-width:1000px}.lg-vw-100{width:100vw}.lg-mvw-100,.row>.lg-mvw-100{max-width:100vw}.lg-h-1100{height:1100px;min-height:1100px}.lg-h-1100,.lg-mh-1100{max-height:1100px}.lg-vh-110{height:110vh}.lg-mvh-110{max-height:110vh}.lg-w-1100,.row>.lg-w-1100{max-width:1100px;min-width:1100px;width:1100px}.lg-mw-1100,.row>.lg-mw-1100{max-width:1100px}.lg-vw-110{width:110vw}.lg-mvw-110,.row>.lg-mvw-110{max-width:110vw}.lg-h-1200{height:1200px;min-height:1200px}.lg-h-1200,.lg-mh-1200{max-height:1200px}.lg-vh-120{height:120vh}.lg-mvh-120{max-height:120vh}.lg-w-1200,.row>.lg-w-1200{max-width:1200px;min-width:1200px;width:1200px}.lg-mw-1200,.row>.lg-mw-1200{max-width:1200px}.lg-vw-120{width:120vw}.lg-mvw-120,.row>.lg-mvw-120{max-width:120vw}.lg-o-0{opacity:0}.lg-o-10{opacity:.1}.lg-o-20{opacity:.2}.lg-o-30{opacity:.3}.lg-o-40{opacity:.4}.lg-o-50{opacity:.5}.lg-o-60{opacity:.6}.lg-o-70{opacity:.7}.lg-o-80{opacity:.8}.lg-o-90{opacity:.9}.lg-o-100{opacity:1}.lg-xl{font-size:140%}.lg-lg{font-size:120%}.lg-md{font-size:100%}.lg-sm{font-size:90%}.lg-xs{font-size:75%}}/*!
20 | * Spry Colors
21 | */.dark{--spry-color-light:#444;--spry-color-dark:#efefef;--spry-color-text:#efefef}.bg-white{background-color:var(--spry-color-white)}.alert-white,.link-color-hover-white a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-white a:not(.btn):not([class*=color-hover-]):hover,.link-color-white a{color:var(--spry-color-white)}.accent-white .border:not([class*=border-]),.accent-white .border:not([class*=border-]):hover,.alert-white,.alert.border-white,[class*=accent-].border-white,article.accent-white{border-color:var(--spry-color-white)}.accent-white,.btn-white{--spry-btn-color:var(--spry-color-white);--spry-btn-color-rgb:var(--spry-color-white-rgb);--spry-btn-color-text:#fff}.accent-white{--spry-accent-color:var(--spry-color-white);--spry-card-accent-text:#fff}.accent-white tbody tr:hover td{background-color:hsla(0,0%,100%,.04)}.bg-light{background-color:var(--spry-color-light)}.alert-light,.link-color-hover-light a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-light a:not(.btn):not([class*=color-hover-]):hover,.link-color-light a{color:var(--spry-color-light)}.accent-light .border:not([class*=border-]),.accent-light .border:not([class*=border-]):hover,.alert-light,.alert.border-light,[class*=accent-].border-light,article.accent-light{border-color:var(--spry-color-light)}.accent-light,.btn-light{--spry-btn-color:var(--spry-color-light);--spry-btn-color-rgb:var(--spry-color-light-rgb);--spry-btn-color-text:#fff}.accent-light{--spry-accent-color:var(--spry-color-light)}.accent-light tbody tr:hover td{background-color:hsla(0,0%,94%,.04)}.bg-medium{background-color:var(--spry-color-medium)}.alert-medium,.link-color-hover-medium a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-medium a:not(.btn):not([class*=color-hover-]):hover,.link-color-medium a{color:var(--spry-color-medium)}.accent-medium .border:not([class*=border-]),.accent-medium .border:not([class*=border-]):hover,.alert-medium,.alert.border-medium,[class*=accent-].border-medium,article.accent-medium{border-color:var(--spry-color-medium)}.accent-medium,.btn-medium{--spry-btn-color:var(--spry-color-medium);--spry-btn-color-rgb:var(--spry-color-medium-rgb);--spry-btn-color-text:#fff}.accent-medium{--spry-accent-color:var(--spry-color-medium);--spry-card-accent-text:#fff}.accent-medium tbody tr:hover td{background-color:hsla(0,0%,53%,.04)}.bg-dark{background-color:var(--spry-color-dark)}.alert-dark,.link-color-dark a,.link-color-hover-dark a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-dark a:not(.btn):not([class*=color-hover-]):hover{color:var(--spry-color-dark)}.accent-dark .border:not([class*=border-]),.accent-dark .border:not([class*=border-]):hover,.alert-dark,.alert.border-dark,[class*=accent-].border-dark,article.accent-dark{border-color:var(--spry-color-dark)}.accent-dark,.btn-dark{--spry-btn-color:var(--spry-color-dark);--spry-btn-color-rgb:var(--spry-color-dark-rgb);--spry-btn-color-text:#fff}.accent-dark{--spry-accent-color:var(--spry-color-dark);--spry-card-accent-text:#fff}.accent-dark tbody tr:hover td{background-color:rgba(68,68,68,.04)}.bg-primary{background-color:var(--spry-color-primary)}.alert-primary,.link-color-hover-primary a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-primary a:not(.btn):not([class*=color-hover-]):hover,.link-color-primary a{color:var(--spry-color-primary)}.accent-primary .border:not([class*=border-]),.accent-primary .border:not([class*=border-]):hover,.alert-primary,.alert.border-primary,[class*=accent-].border-primary,article.accent-primary{border-color:var(--spry-color-primary)}.accent-primary,.btn-primary{--spry-btn-color:var(--spry-color-primary);--spry-btn-color-rgb:var(--spry-color-primary-rgb);--spry-btn-color-text:#fff}.accent-primary{--spry-accent-color:var(--spry-color-primary);--spry-card-accent-text:#fff}.accent-primary tbody tr:hover td{background-color:rgba(20,148,223,.04)}.bg-warning{background-color:var(--spry-color-warning)}.alert-warning,.link-color-hover-warning a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-warning a:not(.btn):not([class*=color-hover-]):hover,.link-color-warning a{color:var(--spry-color-warning)}.accent-warning .border:not([class*=border-]),.accent-warning .border:not([class*=border-]):hover,.alert-warning,.alert.border-warning,[class*=accent-].border-warning,article.accent-warning{border-color:var(--spry-color-warning)}.accent-warning,.btn-warning{--spry-btn-color:var(--spry-color-warning);--spry-btn-color-rgb:var(--spry-color-warning-rgb);--spry-btn-color-text:#fff}.accent-warning{--spry-accent-color:var(--spry-color-warning);--spry-card-accent-text:#fff}.accent-warning tbody tr:hover td{background-color:rgba(223,138,34,.04)}.bg-error{background-color:var(--spry-color-error)}.alert-error,.link-color-error a,.link-color-hover-error a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-error a:not(.btn):not([class*=color-hover-]):hover{color:var(--spry-color-error)}.accent-error .border:not([class*=border-]),.accent-error .border:not([class*=border-]):hover,.alert-error,.alert.border-error,[class*=accent-].border-error,article.accent-error{border-color:var(--spry-color-error)}.accent-error,.btn-error{--spry-btn-color:var(--spry-color-error);--spry-btn-color-rgb:var(--spry-color-error-rgb);--spry-btn-color-text:#fff}.accent-error{--spry-accent-color:var(--spry-color-error);--spry-card-accent-text:#fff}.accent-error tbody tr:hover td{background-color:rgba(213,41,41,.04)}.bg-success{background-color:var(--spry-color-success)}.alert-success,.link-color-hover-success a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-success a:not(.btn):not([class*=color-hover-]):hover,.link-color-success a{color:var(--spry-color-success)}.accent-success .border:not([class*=border-]),.accent-success .border:not([class*=border-]):hover,.alert-success,.alert.border-success,[class*=accent-].border-success,article.accent-success{border-color:var(--spry-color-success)}.accent-success,.btn-success{--spry-btn-color:var(--spry-color-success);--spry-btn-color-rgb:var(--spry-color-success-rgb);--spry-btn-color-text:#fff}.accent-success{--spry-accent-color:var(--spry-color-success);--spry-card-accent-text:#fff}.accent-success tbody tr:hover td{background-color:rgba(9,195,71,.04)}.bg-text{background-color:var(--spry-color-text)}.alert-text,.link-color-hover-text a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-text a:not(.btn):not([class*=color-hover-]):hover,.link-color-text a{color:var(--spry-color-text)}.accent-text .border:not([class*=border-]),.accent-text .border:not([class*=border-]):hover,.alert-text,.alert.border-text,[class*=accent-].border-text,article.accent-text{border-color:var(--spry-color-text)}.accent-text,.btn-text{--spry-btn-color:var(--spry-color-text);--spry-btn-color-rgb:var(--spry-color-text-rgb);--spry-btn-color-text:#fff}.accent-text{--spry-accent-color:var(--spry-color-text);--spry-card-accent-text:#fff}.accent-text tbody tr:hover td{background-color:rgba(86,96,103,.04)}.bg-inherit{background-color:var(--spry-color-inherit)}.alert-inherit,.link-color-hover-inherit a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-inherit a:not(.btn):not([class*=color-hover-]):hover,.link-color-inherit a{color:var(--spry-color-inherit)}.accent-inherit .border:not([class*=border-]),.accent-inherit .border:not([class*=border-]):hover,.alert-inherit,.alert.border-inherit,[class*=accent-].border-inherit,article.accent-inherit{border-color:var(--spry-color-inherit)}.accent-inherit{--spry-accent-color:var(--spry-color-inherit);--spry-card-accent-text:#fff}.bg-transparent{background-color:var(--spry-color-transparent)}.alert-transparent,.link-color-hover-transparent a:not(.btn):not([class*=color-hover-]):focus,.link-color-hover-transparent a:not(.btn):not([class*=color-hover-]):hover,.link-color-transparent a{color:var(--spry-color-transparent)}.accent-transparent .border:not([class*=border-]),.accent-transparent .border:not([class*=border-]):hover,.alert-transparent,.alert.border-transparent,[class*=accent-].border-transparent,article.accent-transparent{border-color:var(--spry-color-transparent)}.accent-transparent,.btn-transparent{--spry-btn-color:var(--spry-color-transparent);--spry-btn-color-rgb:var(--spry-color-transparent-rgb);--spry-btn-color-text:#fff}.btn-hazy,.btn-link,.btn-outline{--spry-btn-color-text:var(--spry-btn-color)}.accent-transparent{--spry-accent-color:var(--spry-color-transparent);--spry-card-accent-text:#fff}.accent-transparent tbody tr:hover td{background-color:rgba(0,0,0,.04)}article{--spry-accent-color:var(--spry-color-light);--spry-btn-color:var(--spry-color-light);--spry-btn-color-text:#566067}.dark{background-color:#1e1e1e;color:#efefef}.dark .bg-light,.dark article{--spry-btn-color-text:#efefef;background-color:#323232;color:#efefef}.dark .bg-dark{background-color:#373737;color:#efefef}.dark .btn-dark,.dark a.btn-dark{--spry-btn-color:#373737;--spry-btn-color-rgb:55,55,55;--spry-btn-color-text:#efefef}.dark .btn.btn-dark.btn-outline{border-color:#efefef;color:#efefef}.dark .btn.btn-dark.btn-outline:hover{background-color:#2b2b2b;border-color:#efefef;color:#efefef}.dark .btn-dark.btn-hazy,.dark .btn-dark.btn-link{color:#efefef}.dark select option{background:#333;color:#eee}.btn,.btn.btn-hazy:not([class*=color-]),.btn.btn-link:not([class*=color-]),.btn.btn-outline:not([class*=color-]),a.btn,a.btn.btn-hazy:not([class*=color-]),a.btn.btn-link:not([class*=color-]),a.btn.btn-outline:not([class*=color-]),a.btn:focus,a.btn:focus.btn-hazy:not([class*=color-]),a.btn:focus.btn-link:not([class*=color-]),a.btn:focus.btn-outline:not([class*=color-]),a.btn:hover,a.btn:hover.btn-hazy:not([class*=color-]),a.btn:hover.btn-link:not([class*=color-]),a.btn:hover.btn-outline:not([class*=color-]),input[type=submit],input[type=submit].btn-hazy:not([class*=color-]),input[type=submit].btn-link:not([class*=color-]),input[type=submit].btn-outline:not([class*=color-]){color:var(--spry-btn-color-text)}.color-hover-white:focus,.color-hover-white:hover,.color-white,a.btn.color-hover-white:focus,a.btn.color-hover-white:hover,a.btn.color-white,a.color-hover-white:focus,a.color-hover-white:hover,a.color-white,button.color-hover-white:focus,button.color-hover-white:hover,button.color-white{color:var(--spry-color-white)}.color-hover-light:focus,.color-hover-light:hover,.color-light,a.btn.color-hover-light:focus,a.btn.color-hover-light:hover,a.btn.color-light,a.color-hover-light:focus,a.color-hover-light:hover,a.color-light,button.color-hover-light:focus,button.color-hover-light:hover,button.color-light{color:var(--spry-color-light)}.color-hover-medium:focus,.color-hover-medium:hover,.color-medium,a.btn.color-hover-medium:focus,a.btn.color-hover-medium:hover,a.btn.color-medium,a.color-hover-medium:focus,a.color-hover-medium:hover,a.color-medium,button.color-hover-medium:focus,button.color-hover-medium:hover,button.color-medium{color:var(--spry-color-medium)}.color-dark,.color-hover-dark:focus,.color-hover-dark:hover,a.btn.color-dark,a.btn.color-hover-dark:focus,a.btn.color-hover-dark:hover,a.color-dark,a.color-hover-dark:focus,a.color-hover-dark:hover,button.color-dark,button.color-hover-dark:focus,button.color-hover-dark:hover{color:var(--spry-color-dark)}.color-hover-primary:focus,.color-hover-primary:hover,.color-primary,a.btn.color-hover-primary:focus,a.btn.color-hover-primary:hover,a.btn.color-primary,a.color-hover-primary:focus,a.color-hover-primary:hover,a.color-primary,button.color-hover-primary:focus,button.color-hover-primary:hover,button.color-primary{color:var(--spry-color-primary)}.color-hover-warning:focus,.color-hover-warning:hover,.color-warning,a.btn.color-hover-warning:focus,a.btn.color-hover-warning:hover,a.btn.color-warning,a.color-hover-warning:focus,a.color-hover-warning:hover,a.color-warning,button.color-hover-warning:focus,button.color-hover-warning:hover,button.color-warning{color:var(--spry-color-warning)}.color-error,.color-hover-error:focus,.color-hover-error:hover,a.btn.color-error,a.btn.color-hover-error:focus,a.btn.color-hover-error:hover,a.color-error,a.color-hover-error:focus,a.color-hover-error:hover,button.color-error,button.color-hover-error:focus,button.color-hover-error:hover{color:var(--spry-color-error)}.color-hover-success:focus,.color-hover-success:hover,.color-success,a.btn.color-hover-success:focus,a.btn.color-hover-success:hover,a.btn.color-success,a.color-hover-success:focus,a.color-hover-success:hover,a.color-success,button.color-hover-success:focus,button.color-hover-success:hover,button.color-success{color:var(--spry-color-success)}.color-hover-text:focus,.color-hover-text:hover,.color-text,a.btn.color-hover-text:focus,a.btn.color-hover-text:hover,a.btn.color-text,a.color-hover-text:focus,a.color-hover-text:hover,a.color-text,button.color-hover-text:focus,button.color-hover-text:hover,button.color-text{color:var(--spry-color-text)}.color-hover-inherit:focus,.color-hover-inherit:hover,.color-inherit,a.btn.color-hover-inherit:focus,a.btn.color-hover-inherit:hover,a.btn.color-inherit,a.color-hover-inherit:focus,a.color-hover-inherit:hover,a.color-inherit,button.color-hover-inherit:focus,button.color-hover-inherit:hover,button.color-inherit{color:var(--spry-color-inherit)}.color-hover-transparent:focus,.color-hover-transparent:hover,.color-transparent,a.btn.color-hover-transparent:focus,a.btn.color-hover-transparent:hover,a.btn.color-transparent,a.color-hover-transparent:focus,a.color-hover-transparent:hover,a.color-transparent,button.color-hover-transparent:focus,button.color-hover-transparent:hover,button.color-transparent{color:var(--spry-color-transparent)}/*!
22 | * Spry Spacing
23 | */.m-auto{margin:auto}.mt-auto,.my-auto{margin-top:auto}.mb-auto,.my-auto{margin-bottom:auto}.ml-auto,.mx-auto{display:block;margin-left:auto}.mr-auto,.mx-auto{display:block;margin-right:auto}.p-0{padding:0}.pl-0,.px-0{padding-left:0}.pr-0,.px-0{padding-right:0}.pt-0,.py-0{padding-top:0}.pb-0,.py-0{padding-bottom:0}.m-0{margin:0}.ml-0,.mx-0{margin-left:0}.mr-0,.mx-0{margin-right:0}.mt-0,.my-0{margin-top:0}.mb-0,.my-0{margin-bottom:0}.ml-n0,.mx-n0{margin-left:0}.mr-n0,.mx-n0{margin-right:0}.mt-n0,.my-n0{margin-top:0}.mb-n0,.my-n0{margin-bottom:0}.p-1{padding:.5em}.pl-1,.px-1{padding-left:.5em}.pr-1,.px-1{padding-right:.5em}.pt-1,.py-1{padding-top:.5em}.pb-1,.py-1{padding-bottom:.5em}.m-1{margin:.5em}.ml-1,.mx-1{margin-left:.5em}.mr-1,.mx-1{margin-right:.5em}.mt-1,.my-1{margin-top:.5em}.mb-1,.my-1{margin-bottom:.5em}.ml-n1,.mx-n1{margin-left:-.5em}.mr-n1,.mx-n1{margin-right:-.5em}.mt-n1,.my-n1{margin-top:-.5em}.mb-n1,.my-n1{margin-bottom:-.5em}.p-2{padding:1em}.pl-2,.px-2{padding-left:1em}.pr-2,.px-2{padding-right:1em}.pt-2,.py-2{padding-top:1em}.pb-2,.py-2{padding-bottom:1em}.m-2{margin:1em}.ml-2,.mx-2{margin-left:1em}.mr-2,.mx-2{margin-right:1em}.mt-2,.my-2{margin-top:1em}.mb-2,.my-2{margin-bottom:1em}.ml-n2,.mx-n2{margin-left:-1em}.mr-n2,.mx-n2{margin-right:-1em}.mt-n2,.my-n2{margin-top:-1em}.mb-n2,.my-n2{margin-bottom:-1em}.p-3{padding:2em}.pl-3,.px-3{padding-left:2em}.pr-3,.px-3{padding-right:2em}.pt-3,.py-3{padding-top:2em}.pb-3,.py-3{padding-bottom:2em}.m-3{margin:2em}.ml-3,.mx-3{margin-left:2em}.mr-3,.mx-3{margin-right:2em}.mt-3,.my-3{margin-top:2em}.mb-3,.my-3{margin-bottom:2em}.ml-n3,.mx-n3{margin-left:-2em}.mr-n3,.mx-n3{margin-right:-2em}.mt-n3,.my-n3{margin-top:-2em}.mb-n3,.my-n3{margin-bottom:-2em}.p-4{padding:3em}.pl-4,.px-4{padding-left:3em}.pr-4,.px-4{padding-right:3em}.pt-4,.py-4{padding-top:3em}.pb-4,.py-4{padding-bottom:3em}.m-4{margin:3em}.ml-4,.mx-4{margin-left:3em}.mr-4,.mx-4{margin-right:3em}.mt-4,.my-4{margin-top:3em}.mb-4,.my-4{margin-bottom:3em}.ml-n4,.mx-n4{margin-left:-3em}.mr-n4,.mx-n4{margin-right:-3em}.mt-n4,.my-n4{margin-top:-3em}.mb-n4,.my-n4{margin-bottom:-3em}.p-5{padding:4em}.pl-5,.px-5{padding-left:4em}.pr-5,.px-5{padding-right:4em}.pt-5,.py-5{padding-top:4em}.pb-5,.py-5{padding-bottom:4em}.m-5{margin:4em}.ml-5,.mx-5{margin-left:4em}.mr-5,.mx-5{margin-right:4em}.mt-5,.my-5{margin-top:4em}.mb-5,.my-5{margin-bottom:4em}.ml-n5,.mx-n5{margin-left:-4em}.mr-n5,.mx-n5{margin-right:-4em}.mt-n5,.my-n5{margin-top:-4em}.mb-n5,.my-n5{margin-bottom:-4em}@media screen and (min-width:40em){.md-m-auto{margin:auto}.md-mt-auto,.md-my-auto{margin-top:auto}.md-mb-auto,.md-my-auto{margin-bottom:auto}.md-ml-auto,.md-mx-auto{display:block;margin-left:auto}.md-mr-auto,.md-mx-auto{display:block;margin-right:auto}.md-p-0{padding:0}.md-pl-0,.md-px-0{padding-left:0}.md-pr-0,.md-px-0{padding-right:0}.md-pt-0,.md-py-0{padding-top:0}.md-pb-0,.md-py-0{padding-bottom:0}.md-m-0{margin:0}.md-ml-0,.md-mx-0{margin-left:0}.md-mr-0,.md-mx-0{margin-right:0}.md-mt-0,.md-my-0{margin-top:0}.md-mb-0,.md-my-0{margin-bottom:0}.md-ml-n0,.md-mx-n0{margin-left:0}.md-mr-n0,.md-mx-n0{margin-right:0}.md-mt-n0,.md-my-n0{margin-top:0}.md-mb-n0,.md-my-n0{margin-bottom:0}.md-p-1{padding:.5em}.md-pl-1,.md-px-1{padding-left:.5em}.md-pr-1,.md-px-1{padding-right:.5em}.md-pt-1,.md-py-1{padding-top:.5em}.md-pb-1,.md-py-1{padding-bottom:.5em}.md-m-1{margin:.5em}.md-ml-1,.md-mx-1{margin-left:.5em}.md-mr-1,.md-mx-1{margin-right:.5em}.md-mt-1,.md-my-1{margin-top:.5em}.md-mb-1,.md-my-1{margin-bottom:.5em}.md-ml-n1,.md-mx-n1{margin-left:-.5em}.md-mr-n1,.md-mx-n1{margin-right:-.5em}.md-mt-n1,.md-my-n1{margin-top:-.5em}.md-mb-n1,.md-my-n1{margin-bottom:-.5em}.md-p-2{padding:1em}.md-pl-2,.md-px-2{padding-left:1em}.md-pr-2,.md-px-2{padding-right:1em}.md-pt-2,.md-py-2{padding-top:1em}.md-pb-2,.md-py-2{padding-bottom:1em}.md-m-2{margin:1em}.md-ml-2,.md-mx-2{margin-left:1em}.md-mr-2,.md-mx-2{margin-right:1em}.md-mt-2,.md-my-2{margin-top:1em}.md-mb-2,.md-my-2{margin-bottom:1em}.md-ml-n2,.md-mx-n2{margin-left:-1em}.md-mr-n2,.md-mx-n2{margin-right:-1em}.md-mt-n2,.md-my-n2{margin-top:-1em}.md-mb-n2,.md-my-n2{margin-bottom:-1em}.md-p-3{padding:2em}.md-pl-3,.md-px-3{padding-left:2em}.md-pr-3,.md-px-3{padding-right:2em}.md-pt-3,.md-py-3{padding-top:2em}.md-pb-3,.md-py-3{padding-bottom:2em}.md-m-3{margin:2em}.md-ml-3,.md-mx-3{margin-left:2em}.md-mr-3,.md-mx-3{margin-right:2em}.md-mt-3,.md-my-3{margin-top:2em}.md-mb-3,.md-my-3{margin-bottom:2em}.md-ml-n3,.md-mx-n3{margin-left:-2em}.md-mr-n3,.md-mx-n3{margin-right:-2em}.md-mt-n3,.md-my-n3{margin-top:-2em}.md-mb-n3,.md-my-n3{margin-bottom:-2em}.md-p-4{padding:3em}.md-pl-4,.md-px-4{padding-left:3em}.md-pr-4,.md-px-4{padding-right:3em}.md-pt-4,.md-py-4{padding-top:3em}.md-pb-4,.md-py-4{padding-bottom:3em}.md-m-4{margin:3em}.md-ml-4,.md-mx-4{margin-left:3em}.md-mr-4,.md-mx-4{margin-right:3em}.md-mt-4,.md-my-4{margin-top:3em}.md-mb-4,.md-my-4{margin-bottom:3em}.md-ml-n4,.md-mx-n4{margin-left:-3em}.md-mr-n4,.md-mx-n4{margin-right:-3em}.md-mt-n4,.md-my-n4{margin-top:-3em}.md-mb-n4,.md-my-n4{margin-bottom:-3em}.md-p-5{padding:4em}.md-pl-5,.md-px-5{padding-left:4em}.md-pr-5,.md-px-5{padding-right:4em}.md-pt-5,.md-py-5{padding-top:4em}.md-pb-5,.md-py-5{padding-bottom:4em}.md-m-5{margin:4em}.md-ml-5,.md-mx-5{margin-left:4em}.md-mr-5,.md-mx-5{margin-right:4em}.md-mt-5,.md-my-5{margin-top:4em}.md-mb-5,.md-my-5{margin-bottom:4em}.md-ml-n5,.md-mx-n5{margin-left:-4em}.md-mr-n5,.md-mx-n5{margin-right:-4em}.md-mt-n5,.md-my-n5{margin-top:-4em}.md-mb-n5,.md-my-n5{margin-bottom:-4em}}@media screen and (min-width:80em){.lg-m-auto{margin:auto}.lg-mt-auto,.lg-my-auto{margin-top:auto}.lg-mb-auto,.lg-my-auto{margin-bottom:auto}.lg-ml-auto,.lg-mx-auto{display:block;margin-left:auto}.lg-mr-auto,.lg-mx-auto{display:block;margin-right:auto}.lg-p-0{padding:0}.lg-pl-0,.lg-px-0{padding-left:0}.lg-pr-0,.lg-px-0{padding-right:0}.lg-pt-0,.lg-py-0{padding-top:0}.lg-pb-0,.lg-py-0{padding-bottom:0}.lg-m-0{margin:0}.lg-ml-0,.lg-mx-0{margin-left:0}.lg-mr-0,.lg-mx-0{margin-right:0}.lg-mt-0,.lg-my-0{margin-top:0}.lg-mb-0,.lg-my-0{margin-bottom:0}.lg-ml-n0,.lg-mx-n0{margin-left:0}.lg-mr-n0,.lg-mx-n0{margin-right:0}.lg-mt-n0,.lg-my-n0{margin-top:0}.lg-mb-n0,.lg-my-n0{margin-bottom:0}.lg-p-1{padding:.5em}.lg-pl-1,.lg-px-1{padding-left:.5em}.lg-pr-1,.lg-px-1{padding-right:.5em}.lg-pt-1,.lg-py-1{padding-top:.5em}.lg-pb-1,.lg-py-1{padding-bottom:.5em}.lg-m-1{margin:.5em}.lg-ml-1,.lg-mx-1{margin-left:.5em}.lg-mr-1,.lg-mx-1{margin-right:.5em}.lg-mt-1,.lg-my-1{margin-top:.5em}.lg-mb-1,.lg-my-1{margin-bottom:.5em}.lg-ml-n1,.lg-mx-n1{margin-left:-.5em}.lg-mr-n1,.lg-mx-n1{margin-right:-.5em}.lg-mt-n1,.lg-my-n1{margin-top:-.5em}.lg-mb-n1,.lg-my-n1{margin-bottom:-.5em}.lg-p-2{padding:1em}.lg-pl-2,.lg-px-2{padding-left:1em}.lg-pr-2,.lg-px-2{padding-right:1em}.lg-pt-2,.lg-py-2{padding-top:1em}.lg-pb-2,.lg-py-2{padding-bottom:1em}.lg-m-2{margin:1em}.lg-ml-2,.lg-mx-2{margin-left:1em}.lg-mr-2,.lg-mx-2{margin-right:1em}.lg-mt-2,.lg-my-2{margin-top:1em}.lg-mb-2,.lg-my-2{margin-bottom:1em}.lg-ml-n2,.lg-mx-n2{margin-left:-1em}.lg-mr-n2,.lg-mx-n2{margin-right:-1em}.lg-mt-n2,.lg-my-n2{margin-top:-1em}.lg-mb-n2,.lg-my-n2{margin-bottom:-1em}.lg-p-3{padding:2em}.lg-pl-3,.lg-px-3{padding-left:2em}.lg-pr-3,.lg-px-3{padding-right:2em}.lg-pt-3,.lg-py-3{padding-top:2em}.lg-pb-3,.lg-py-3{padding-bottom:2em}.lg-m-3{margin:2em}.lg-ml-3,.lg-mx-3{margin-left:2em}.lg-mr-3,.lg-mx-3{margin-right:2em}.lg-mt-3,.lg-my-3{margin-top:2em}.lg-mb-3,.lg-my-3{margin-bottom:2em}.lg-ml-n3,.lg-mx-n3{margin-left:-2em}.lg-mr-n3,.lg-mx-n3{margin-right:-2em}.lg-mt-n3,.lg-my-n3{margin-top:-2em}.lg-mb-n3,.lg-my-n3{margin-bottom:-2em}.lg-p-4{padding:3em}.lg-pl-4,.lg-px-4{padding-left:3em}.lg-pr-4,.lg-px-4{padding-right:3em}.lg-pt-4,.lg-py-4{padding-top:3em}.lg-pb-4,.lg-py-4{padding-bottom:3em}.lg-m-4{margin:3em}.lg-ml-4,.lg-mx-4{margin-left:3em}.lg-mr-4,.lg-mx-4{margin-right:3em}.lg-mt-4,.lg-my-4{margin-top:3em}.lg-mb-4,.lg-my-4{margin-bottom:3em}.lg-ml-n4,.lg-mx-n4{margin-left:-3em}.lg-mr-n4,.lg-mx-n4{margin-right:-3em}.lg-mt-n4,.lg-my-n4{margin-top:-3em}.lg-mb-n4,.lg-my-n4{margin-bottom:-3em}.lg-p-5{padding:4em}.lg-pl-5,.lg-px-5{padding-left:4em}.lg-pr-5,.lg-px-5{padding-right:4em}.lg-pt-5,.lg-py-5{padding-top:4em}.lg-pb-5,.lg-py-5{padding-bottom:4em}.lg-m-5{margin:4em}.lg-ml-5,.lg-mx-5{margin-left:4em}.lg-mr-5,.lg-mx-5{margin-right:4em}.lg-mt-5,.lg-my-5{margin-top:4em}.lg-mb-5,.lg-my-5{margin-bottom:4em}.lg-ml-n5,.lg-mx-n5{margin-left:-4em}.lg-mr-n5,.lg-mx-n5{margin-right:-4em}.lg-mt-n5,.lg-my-n5{margin-top:-4em}.lg-mb-n5,.lg-my-n5{margin-bottom:-4em}}
24 | /*# sourceMappingURL=spry.min.css.map */
--------------------------------------------------------------------------------
/dist/spry.min.css.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggedde/spry-css/9555f971c6d408dac5d2a1960ca7ca77942a3220/dist/spry.min.css.gz
--------------------------------------------------------------------------------
/docs/BingSiteAuth.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | 2F8C8C67B96F71DC688B9666257C59AA
4 |
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggedde/spry-css/9555f971c6d408dac5d2a1960ca7ca77942a3220/docs/favicon.ico
--------------------------------------------------------------------------------
/docs/google2d33604b802b787a.html:
--------------------------------------------------------------------------------
1 | google-site-verification: google2d33604b802b787a.html
--------------------------------------------------------------------------------
/docs/highlight.css:
--------------------------------------------------------------------------------
1 | .highlight table td { padding: 5px; }
2 | .highlight table pre { margin: 0; }
3 | .highlight .cm {
4 | color: #999988;
5 | font-style: italic;
6 | }
7 | .highlight .cp {
8 | color: #999999;
9 | font-weight: bold;
10 | }
11 | .highlight .c1 {
12 | color: #999988;
13 | font-style: italic;
14 | }
15 | .highlight .cs {
16 | color: #999999;
17 | font-weight: bold;
18 | font-style: italic;
19 | }
20 | .highlight .c, .highlight .cd {
21 | color: #999988;
22 | font-style: italic;
23 | }
24 | .highlight .err {
25 | color: #a61717;
26 | background-color: #e3d2d2;
27 | }
28 | .highlight .gd {
29 | color: #000000;
30 | background-color: #ffdddd;
31 | }
32 | .highlight .ge {
33 | color: #000000;
34 | font-style: italic;
35 | }
36 | .highlight .gr {
37 | color: #aa0000;
38 | }
39 | .highlight .gh {
40 | color: #999999;
41 | }
42 | .highlight .gi {
43 | color: #000000;
44 | background-color: #ddffdd;
45 | }
46 | .highlight .go {
47 | color: #888888;
48 | }
49 | .highlight .gp {
50 | color: #555555;
51 | }
52 | .highlight .gs {
53 | font-weight: bold;
54 | }
55 | .highlight .gu {
56 | color: #aaaaaa;
57 | }
58 | .highlight .gt {
59 | color: #aa0000;
60 | }
61 | .highlight .kc {
62 | color: #000000;
63 | font-weight: bold;
64 | }
65 | .highlight .kd {
66 | color: #000000;
67 | font-weight: bold;
68 | }
69 | .highlight .kn {
70 | color: #000000;
71 | font-weight: bold;
72 | }
73 | .highlight .kp {
74 | color: #000000;
75 | font-weight: bold;
76 | }
77 | .highlight .kr {
78 | color: #000000;
79 | font-weight: bold;
80 | }
81 | .highlight .kt {
82 | color: #445588;
83 | font-weight: bold;
84 | }
85 | .highlight .k, .highlight .kv {
86 | color: #000000;
87 | font-weight: bold;
88 | }
89 | .highlight .mf {
90 | color: #009999;
91 | }
92 | .highlight .mh {
93 | color: #009999;
94 | }
95 | .highlight .il {
96 | color: #009999;
97 | }
98 | .highlight .mi {
99 | color: #009999;
100 | }
101 | .highlight .mo {
102 | color: #009999;
103 | }
104 | .highlight .m, .highlight .mb, .highlight .mx {
105 | color: #009999;
106 | }
107 | .highlight .sb {
108 | color: #d14;
109 | }
110 | .highlight .sc {
111 | color: #d14;
112 | }
113 | .highlight .sd {
114 | color: #d14;
115 | }
116 | .highlight .s2 {
117 | color: #d14;
118 | }
119 | .highlight .se {
120 | color: #d14;
121 | }
122 | .highlight .sh {
123 | color: #d14;
124 | }
125 | .highlight .si {
126 | color: #d14;
127 | }
128 | .highlight .sx {
129 | color: #d14;
130 | }
131 | .highlight .sr {
132 | color: #009926;
133 | }
134 | .highlight .s1 {
135 | color: #d14;
136 | }
137 | .highlight .ss {
138 | color: #990073;
139 | }
140 | .highlight .s {
141 | color: #d14;
142 | }
143 | .highlight .na {
144 | color: #008080;
145 | }
146 | .highlight .bp {
147 | color: #999999;
148 | }
149 | .highlight .nb {
150 | color: #0086B3;
151 | }
152 | .highlight .nc {
153 | color: #445588;
154 | font-weight: bold;
155 | }
156 | .highlight .no {
157 | color: #008080;
158 | }
159 | .highlight .nd {
160 | color: #3c5d5d;
161 | font-weight: bold;
162 | }
163 | .highlight .ni {
164 | color: #800080;
165 | }
166 | .highlight .ne {
167 | color: #990000;
168 | font-weight: bold;
169 | }
170 | .highlight .nf {
171 | color: #990000;
172 | font-weight: bold;
173 | }
174 | .highlight .nl {
175 | color: #990000;
176 | font-weight: bold;
177 | }
178 | .highlight .nn {
179 | color: #555555;
180 | }
181 | .highlight .nt {
182 | color: #000080;
183 | }
184 | .highlight .vc {
185 | color: #008080;
186 | }
187 | .highlight .vg {
188 | color: #008080;
189 | }
190 | .highlight .vi {
191 | color: #008080;
192 | }
193 | .highlight .nv {
194 | color: #008080;
195 | }
196 | .highlight .ow {
197 | color: #000000;
198 | font-weight: bold;
199 | }
200 | .highlight .o {
201 | color: #000000;
202 | font-weight: bold;
203 | }
204 | .highlight .w {
205 | color: #bbbbbb;
206 | }
207 | .highlight {
208 | background-color: #f8f8f8;
209 | }
--------------------------------------------------------------------------------
/docs/placeholder-wide.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggedde/spry-css/9555f971c6d408dac5d2a1960ca7ca77942a3220/docs/placeholder-wide.jpg
--------------------------------------------------------------------------------
/docs/placeholder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggedde/spry-css/9555f971c6d408dac5d2a1960ca7ca77942a3220/docs/placeholder.jpg
--------------------------------------------------------------------------------
/docs/prism.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.23.0
2 | https://prismjs.com/download.html#themes=prism&languages=css+scss&plugins=toolbar+copy-to-clipboard */
3 | /**
4 | * prism.js default theme for JavaScript, CSS and HTML
5 | * Based on dabblet (http://dabblet.com)
6 | * @author Lea Verou
7 | */
8 |
9 | .show-code,
10 | div.code-toolbar {
11 | max-width: calc(100vw - 60px);
12 | }
13 | @media screen and (min-width: 620px) {
14 | .show-code,
15 | div.code-toolbar {
16 | max-width: calc(100vw - 285px);
17 | }
18 | }
19 |
20 | @media screen and (min-width: 1250px) {
21 | .show-code,
22 | div.code-toolbar {
23 | max-width: calc(100vw - 300px);
24 | }
25 | }
26 |
27 | code[class*="language-"],
28 | pre[class*="language-"] {
29 | color: black;
30 | background: none;
31 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
32 | font-size: 0.9em;
33 | text-align: left;
34 | white-space: pre;
35 | word-spacing: normal;
36 | word-break: normal;
37 | word-wrap: normal;
38 | line-height: 1.5;
39 | margin-top: 0;
40 |
41 | -moz-tab-size: 4;
42 | -o-tab-size: 4;
43 | tab-size: 4;
44 |
45 | -webkit-hyphens: none;
46 | -moz-hyphens: none;
47 | -ms-hyphens: none;
48 | hyphens: none;
49 | }
50 |
51 | code[class*="language-"].pre-wrap,
52 | pre[class*="language-"].pre-wrap {
53 | white-space: pre-wrap;
54 | }
55 |
56 | .dark code[class*="language-"],
57 | .dark pre[class*="language-"] {
58 | color: white;
59 | }
60 |
61 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
62 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
63 | text-shadow: none;
64 | background: #b3d4fc;
65 | }
66 |
67 | .dark pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
68 | .dark code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
69 | text-shadow: none;
70 | background: rgba(150,150,150,0.2);
71 | }
72 |
73 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
74 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
75 | text-shadow: none;
76 | background: #b3d4fc;
77 | }
78 |
79 | .dark pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
80 | .dark code[class*="language-"]::selection, code[class*="language-"] ::selection {
81 | text-shadow: none;
82 | background: rgba(150,150,150,0.2);
83 | }
84 |
85 | @media print {
86 | code[class*="language-"],
87 | pre[class*="language-"] {
88 | text-shadow: none;
89 | }
90 | }
91 |
92 | :not(pre) > code[class*="language-"],
93 | pre[class*="language-"] {
94 | background: #f5f2f0;
95 | }
96 |
97 | .dark :not(pre) > code[class*="language-"],
98 | .dark pre[class*="language-"] {
99 | background: #111111;
100 | }
101 |
102 | /* Inline code */
103 | :not(pre) > code[class*="language-"] {
104 | padding: .1em;
105 | border-radius: .3em;
106 | white-space: normal;
107 | }
108 | code[class*="language-"] {
109 | border-left: 3px solid #0D7FBF;
110 | overflow: scroll;
111 | display: block;
112 | padding: 1rem 1.5rem;
113 | }
114 |
115 |
116 | .token.comment,
117 | .token.prolog,
118 | .token.doctype,
119 | .token.cdata {
120 | color: slategray;
121 | }
122 |
123 | .token.punctuation {
124 | color: #999;
125 | }
126 |
127 | .token.namespace {
128 | opacity: .7;
129 | }
130 |
131 | .token.property,
132 | .token.tag,
133 | .token.boolean,
134 | .token.number,
135 | .token.constant,
136 | .token.symbol,
137 | .token.deleted {
138 | color: rgb(184, 4, 103);
139 | }
140 |
141 | .token.selector,
142 | .token.attr-name,
143 | .token.string,
144 | .token.char,
145 | .token.builtin,
146 | .token.inserted {
147 | color: #690;
148 | }
149 |
150 | .token.operator,
151 | .token.entity,
152 | .token.url,
153 | .language-css .token.string,
154 | .style .token.string {
155 | color: #9a6e3a;
156 | }
157 |
158 | .token.atrule,
159 | .token.attr-value,
160 | .token.keyword {
161 | color: #07a;
162 | }
163 |
164 | .token.function,
165 | .token.class-name {
166 | color: #DD4A68;
167 | }
168 |
169 | .token.regex,
170 | .token.important,
171 | .token.variable {
172 | color: #e90;
173 | }
174 |
175 | .token.important,
176 | .token.bold {
177 | font-weight: bold;
178 | }
179 | .token.italic {
180 | font-style: italic;
181 | }
182 |
183 | .token.entity {
184 | cursor: help;
185 | }
186 | div.code-toolbar {
187 | position: relative;
188 | }
189 | div.code-toolbar::after {
190 | content: '';
191 | display: block;
192 | width: 100%;
193 | height: 100%;
194 | position: absolute;
195 | top: 0;
196 | left: 0;
197 | /* box-shadow: inset -10px 0px 10px rgba(245, 242, 240, 1); */
198 | pointer-events: none;
199 | }
200 |
201 | div.code-toolbar > .toolbar {
202 | position: absolute;
203 | top: .3em;
204 | right: .2em;
205 | transition: opacity 0.3s ease-in-out;
206 | opacity: 0;
207 | justify-content: flex-end;
208 | height: 20px;
209 | width: 40px;
210 | min-height: 20px;
211 | }
212 | div.code-toolbar > .toolbar button {
213 | height: 20px;
214 | min-height: 20px;
215 | }
216 |
217 | div.code-toolbar:hover > .toolbar {
218 | opacity: 1;
219 | }
220 |
221 | /* Separate line b/c rules are thrown out if selector is invalid.
222 | IE11 and old Edge versions don't support :focus-within. */
223 | div.code-toolbar:focus-within > .toolbar {
224 | opacity: 1;
225 | }
226 |
227 | div.code-toolbar > .toolbar .toolbar-item {
228 | display: inline-block;
229 | margin-right: 1rem;
230 | }
231 |
232 | div.code-toolbar > .toolbar a {
233 | cursor: pointer;
234 | }
235 |
236 | div.code-toolbar > .toolbar button {
237 | background: none;
238 | border: 0;
239 | color: inherit;
240 | font: inherit;
241 | line-height: normal;
242 | overflow: visible;
243 | padding: 0;
244 | }
245 |
246 | div.code-toolbar > .toolbar a,
247 | div.code-toolbar > .toolbar button {
248 | color: #eee;
249 | font-size: .7em;
250 | padding: .2em .7em .4em;
251 | background: #777 !important;
252 | border-radius: .5em;
253 | cursor: pointer;
254 | -webkit-user-select: none; /* for button */
255 | -moz-user-select: none;
256 | -ms-user-select: none;
257 | user-select: none;
258 | }
259 |
260 | div.code-toolbar > .toolbar a:hover,
261 | div.code-toolbar > .toolbar a:focus,
262 | div.code-toolbar > .toolbar button:hover,
263 | div.code-toolbar > .toolbar button:focus {
264 | text-decoration: none;
265 | background: #555 !important;
266 | }
267 |
268 | div.code-toolbar > .toolbar a:active,
269 | div.code-toolbar > .toolbar button:active {
270 | text-decoration: none;
271 | background: #777 !important;
272 | }
273 |
274 | .code-container {
275 | overflow-x: hidden;
276 | }
--------------------------------------------------------------------------------
/docs/prism.js:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.23.0
2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+scss&plugins=toolbar+copy-to-clipboard */
3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,e={},M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=l.reach);y+=m.value.length,m=m.next){var b=m.value;if(t.length>n.length)return;if(!(b instanceof W)){var k,x=1;if(h){if(!(k=z(v,y,n,f)))break;var w=k.index,A=k.index+k[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof W)continue;for(var E=m;E!==t.tail&&(Pl.reach&&(l.reach=N);var j=m.prev;O&&(j=I(t,j,O),y+=O.length),q(t,j,x);var C=new W(o,g?M.tokenize(S,g):S,d,S);if(m=I(t,j,C),L&&I(t,m,L),1l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a"+a.content+""+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()},!1)),M;var t=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(t&&(M.filename=t.src,t.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var a=document.readyState;"loading"===a||"interactive"===a&&t&&t.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
5 | !function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
6 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|forward|for|each|while|import|use|extend|debug|warn|mixin|include|function|return|content)\b/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|with|show|hide)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss;
7 | !function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var i=[],l={},d=function(){};Prism.plugins.toolbar={};var e=Prism.plugins.toolbar.registerButton=function(e,n){var t;t="function"==typeof n?n:function(e){var t;return"function"==typeof n.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",function(){n.onClick.call(this,e)})):"string"==typeof n.url?(t=document.createElement("a")).href=n.url:t=document.createElement("span"),n.className&&t.classList.add(n.className),t.textContent=n.text,t},e in l?console.warn('There is a button with the key "'+e+'" registered already.'):i.push(l[e]=t)},t=Prism.plugins.toolbar.hook=function(a){var e=a.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&!e.parentNode.classList.contains("code-toolbar")){var t=document.createElement("div");t.classList.add("code-toolbar"),e.parentNode.insertBefore(t,e),t.appendChild(e);var r=document.createElement("div");r.classList.add("toolbar");var n=i,o=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);o&&(n=o.map(function(e){return l[e]||d})),n.forEach(function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),r.appendChild(n)}}),t.appendChild(r)}};e("label",function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}}),Prism.hooks.add("complete",t)}}();
8 | !function(){function u(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,function(){o(t)}):o(t)}(e)})}function o(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(e),n=document.createElement("button");n.className="copy-to-clipboard-button",n.setAttribute("type","button");var c=document.createElement("span");return n.appendChild(c),i("copy"),u(n,{getText:function(){return e.textContent},success:function(){i("copy-success"),r()},error:function(){i("copy-error"),setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),r()}}),n;function r(){setTimeout(function(){i("copy")},o["copy-timeout"])}function i(t){c.textContent=o[t],n.setAttribute("data-copy-state",t)}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
9 |
--------------------------------------------------------------------------------
/docs/slider.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Spry Slider JS
3 | *
4 | * Version: 2.1.6
5 | * Author: gedde.dev
6 | * Github: https://github.com/ggedde/spry-css
7 | */
8 | function spryJsLoadSliders() {
9 | document.querySelectorAll('.slider').forEach(slider => {
10 | if(slider.hasAttribute('data-loaded')) return;
11 | var play = parseInt(slider.getAttribute('data-play'));
12 | var loop = slider.hasAttribute('data-loop');
13 | var stop = slider.getAttribute('data-stop');
14 | var slides = slider.querySelector('.slider-slides');
15 | var slideCount = slides.childElementCount;
16 | var next = slider.querySelector('.slider-next');
17 | var prev = slider.querySelector('.slider-prev');
18 | var pagination = slider.querySelector('.slider-pagination');
19 | var slidesWidth = slides.scrollWidth;
20 | var block = slides.innerHTML;
21 | var scrollTimer = null;
22 | var playTimer = null;
23 | var isSelecting = false;
24 | var goTo = (to, instant) => {
25 | var offsetSlides = loop ? slideCount : 0;
26 | if (to === 'next') {
27 | slides.scrollBy(slider.offsetWidth, 0);
28 | } else if (to === 'prev') {
29 | slides.scrollBy(-(slides.offsetWidth), 0);
30 | } else {
31 | slides.scrollTo({left: slides.children[(to+offsetSlides)].offsetLeft, behavior: instant ? 'instant' : 'smooth'});
32 | }
33 | };
34 | var resetPlay = () => {
35 | if (playTimer) {
36 | clearInterval(playTimer);
37 | playTimer = null;
38 | }
39 | if (play) {
40 | playTimer = setInterval(() => {
41 | var hasAction = stop === 'action' && (slider.querySelector('a:hover') || slider.querySelector('button:hover'));
42 | var hasHover = stop === 'hover' && slider.matches(':hover');
43 | if (!hasAction && !hasHover) {
44 | goTo('next');
45 | }
46 | }, play);
47 | }
48 | }
49 | if(next) {
50 | next.addEventListener('click', () => {
51 | goTo('next');
52 | });
53 | }
54 | if(prev) {
55 | prev.addEventListener('click', () => {
56 | goTo('prev');
57 | });
58 | }
59 | if ( pagination && slides && slideCount ) {
60 | for (let index = 0; index < slideCount; index++) {
61 | let div = document.createElement("div");
62 | if (index === 0) div.classList.add('active');
63 | div.onclick = () => {
64 | goTo(index);
65 | pagination.childNodes.forEach(pagination => {
66 | pagination.classList.remove('active');
67 | });
68 | div.classList.add('active');
69 | }
70 | pagination.append(div);
71 | }
72 | }
73 | slides.addEventListener('scroll', () => {
74 | slider.setAttribute('data-sliding', '');
75 | slider.removeAttribute('data-position');
76 | if (scrollTimer) clearTimeout(scrollTimer);
77 | if (playTimer) {
78 | clearInterval(playTimer);
79 | playTimer = null;
80 | }
81 | scrollTimer = setTimeout(function(){
82 | slider.removeAttribute('data-sliding');
83 | resetPlay();
84 | if (loop) {
85 | var blockWidth = (slides.scrollWidth/3);
86 | if (slides.scrollLeft < blockWidth) {
87 | var offset = blockWidth - slides.scrollLeft;
88 | slides.scrollTo({left: (((blockWidth*2) - offset)), behavior: 'instant'});
89 | }
90 | if (slides.scrollLeft >= (blockWidth*2)) {
91 | var offset = slides.scrollLeft - (blockWidth*2);
92 | slides.scrollTo({left: blockWidth + offset, behavior: 'instant'});
93 | }
94 |
95 | } else {
96 | if(!slides.scrollLeft) {
97 | slider.setAttribute('data-position', 'start');
98 | } else if (slides.scrollLeft + slider.offsetWidth >= (slides.scrollWidth - 2)) {
99 | slider.setAttribute('data-position', 'end');
100 | }
101 | }
102 | slider.querySelectorAll('.slider-slides > *').forEach(element => {
103 | element.removeAttribute('data-first');
104 | element.removeAttribute('data-last');
105 | var left = Math.round(element.getBoundingClientRect().left - slider.getBoundingClientRect().left);
106 | element.toggleAttribute('data-showing', (left >= 0 && left < slider.clientWidth));
107 | });
108 | var showing = slider.querySelectorAll('[data-showing]');
109 | if (showing.length) {
110 | if (pagination) {
111 | pagination.querySelectorAll('.active').forEach(active => {
112 | active.classList.remove('active');
113 | });
114 | var childIndex = Array.from(slides.children).indexOf(showing[0]);
115 | if (loop) {
116 | childIndex = (childIndex === slideCount*2) ? 0 : (childIndex - slideCount);
117 | }
118 | if (childIndex !== undefined) {
119 | pagination.children[childIndex].classList.add('active');
120 | }
121 | }
122 | showing[0].setAttribute('data-first', '');
123 | showing[showing.length-1].setAttribute('data-last', '');
124 | var preLoadImages = function(elem, type, total) {
125 | var i = 0;
126 | var imageSrcs = [];
127 | while (elem = (type === 'next' ? elem.nextSibling : elem.previousSibling)) {
128 | if (i >= total || !elem.nodeType || elem.nodeType === 3) continue; // text node
129 | if (elem.tagName === 'IMG' && elem.getAttribute('loading').toLowerCase() === 'lazy' ) {
130 | imageSrcs.push(elem.src);
131 | } else {
132 | elem.querySelectorAll('img[loading="lazy"]').forEach(img => {
133 | imageSrcs.push(img.src);
134 | });
135 | }
136 | i++;
137 | }
138 | imageSrcs.forEach(imageSrc => {
139 | var newImg = new Image();
140 | newImg.src = imageSrc;
141 | });
142 | }
143 | preLoadImages(slider.querySelector('[data-last]'), 'next', showing.length);
144 | preLoadImages(slider.querySelector('[data-last]'), 'prev', showing.length);
145 | }
146 | },100);
147 | });
148 | if (loop) {
149 | slides.innerHTML += block + block;
150 | slides.scrollTo({left: slidesWidth, behavior: 'instant'});
151 | } else {
152 | slides.dispatchEvent(new CustomEvent('scroll'));
153 | slider.setAttribute('data-position', 'start');
154 | }
155 | resetPlay();
156 | if (play) {
157 | if (stop === 'hover') {
158 | slider.addEventListener('mouseout', () => {
159 | resetPlay();
160 | });
161 | slider.addEventListener('mouseover', () => {
162 | if (playTimer) {
163 | clearInterval(playTimer);
164 | playTimer = null;
165 | }
166 | });
167 | }
168 | if (stop === 'action') {
169 | document.addEventListener('selectionchange', () => {
170 | if (isSelecting && document.getSelection().toString()) {
171 | if (playTimer) {
172 | clearInterval(playTimer);
173 | playTimer = null;
174 | }
175 | }
176 | if (!isSelecting && !document.getSelection().toString() && !playTimer) {
177 | resetPlay();
178 | }
179 | });
180 | slider.addEventListener('selectstart', () => {
181 | isSelecting = true;
182 | });
183 | slider.addEventListener('mouseup', () => {
184 | isSelecting = false;
185 | });
186 | }
187 | }
188 | slider.setAttribute('data-loaded', '');
189 | });
190 | }
191 | if (document.readyState === 'complete' || document.readyState === 'interactive') {
192 | spryJsLoadSliders();
193 | } else {
194 | document.addEventListener('DOMContentLoaded', spryJsLoadSliders);
195 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@ggedde/spry-css",
3 | "version": "2.3.23",
4 | "description": "A simple and customizable CSS Toolkit while being as lightweight as possible",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+ssh://git@github.com/ggedde/spry-css.git"
8 | },
9 | "keywords": [
10 | "CSS",
11 | "Utilities"
12 | ],
13 | "author": "ggedde",
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/ggedde/spry-css/issues"
17 | },
18 | "homepage": "https://github.com/ggedde/spry-css#readme",
19 | "scripts": {
20 | "dev": "node_modules/.bin/chokidar *.scss -c 'npm run build'",
21 | "build": "node_modules/.bin/sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use cssnano -o ./dist/spry.min.css; sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use cssnano -o ./docs/spry.min.css; gzip -c ./dist/spry.min.css > ./dist/spry.min.css.gz"
22 | },
23 | "dependencies": {
24 | "autoprefixer": "^10.4.1",
25 | "chokidar-cli": "^3.0.0",
26 | "cssnano": "^5.1.14",
27 | "postcss": "^8.4.5",
28 | "postcss-cli": "^9.1.0",
29 | "sass": "^1.56.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/spry.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * SpryCss v2.3.23
3 | * license: MIT
4 | * author: https://github.com/ggedde/spry-css
5 | */
6 |
7 | @import "variables";
8 | @import "reset";
9 | @import "typography";
10 | @import "ui";
11 | @import "modals";
12 | @import "grid";
13 | @import "sliders";
14 | @import "utilities";
15 | @import "colors";
16 | @import "spacing";
--------------------------------------------------------------------------------