├── .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 | ![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/ggedde/spry-css?include_prereleases)   ![GitHub](https://img.shields.io/github/license/ggedde/spry-css?label=license) 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+""},!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"},/&#x?[\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"; --------------------------------------------------------------------------------