@ulu/frontend 0.0.17 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/.browserslistrc +2 -0
  2. package/.eslintrc +17 -0
  3. package/.prettierrc +10 -0
  4. package/CHANGELOG.md +2 -0
  5. package/dist/ulu-frontend.min.css +1 -1
  6. package/dist/ulu-frontend.min.js +1 -1
  7. package/package.json +11 -4
  8. package/scss/_button.scss +52 -2
  9. package/scss/_color.scss +4 -2
  10. package/scss/base/_typography.scss +1 -1
  11. package/scss/components/_button.scss +1 -1
  12. package/scss/helpers/_typography.scss +1 -1
  13. package/vite.config.js +36 -0
package/.browserslistrc ADDED
@@ -0,0 +1,2 @@
1
+ last 4 versions
2
+ > 0.2%
package/.eslintrc ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "env": {
3
+ "browser": true,
4
+ "es2021": true
5
+ },
6
+ "extends": ["eslint:recommended"],
7
+ "parserOptions": {
8
+ "ecmaVersion": "latest",
9
+ "sourceType": "module"
10
+ },
11
+ "rules": {
12
+ "indent": ["error", 2],
13
+ "linebreak-style": ["error", "unix"],
14
+ "quotes": ["error", "double"],
15
+ "semi": ["error", "always"]
16
+ }
17
+ }
package/.prettierrc ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "trailingComma": "es5",
3
+ "tabWidth": 2,
4
+ "semi": true,
5
+ "singleQuote": false,
6
+ "quoteProps" : "consistent",
7
+ "bracketSameLine" : false,
8
+ "arrowParens": "avoid",
9
+ "vueIndentScriptAndStyle" : true
10
+ }
package/CHANGELOG.md CHANGED
@@ -17,6 +17,8 @@
17
17
  ### SCSS
18
18
 
19
19
  - Added utils.map-merge($map, $changes, $mode)
20
+ - This is a **breaking change**
21
+ - Update all mixins with merge arguments (button > set-styles, typography > set-sizes, etc), to use a single string argument if a merge strategy is needed. If $deep and $over-write are set you need to choose one, if they are unset or false just remove them, this will use the default map.merge.
20
22
  - This will allow expansion if needed and is simpler for modules to implement
21
23
  - This is to replace utils.map-merge-or-overwrite which is deprecated now
22
24
  - Removed IE "*zoom" clearfix property as we don't support it and it causes errors in CSS minifiers since it's not standard CSS
package/dist/ulu-frontend.min.css CHANGED
@@ -1 +1 @@
1
- /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}table{text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;line-height:inherit;font-size:inherit;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{text-transform:none;text-align:inherit;background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);border-radius:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*,::before,::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{color:#000;background-color:#fff;font-family:ui-sans-serif,"Open Sans",Helvetica,Arial,sans-serif;margin:0;font-size:1rem;font-size:calc(1rem + 0.05vw);line-height:1.5}body:before{display:none;content:"none"}@media screen and (min-width: 43.5em){body:before{content:"small"}}@media screen and (min-width: 76em){body:before{content:"medium"}}@media screen and (min-width: 94.75em){body:before{content:"large"}}h1,h2,h3,h4,h5,h6,ul,ol,li,pre,code,p{margin:0;padding:0;font-size:inherit;font-family:inherit;border-width:0;border-style:solid;font-weight:inherit}p{margin-top:0;margin-bottom:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}small{font-size:.8705505633rem;font-size:calc(0.8705505633rem + 0.05vw);line-height:1.3}sub{bottom:-0.25em}sup{top:-0.5em}b,strong{font-weight:bold}form{width:100%}code,kbd,samp,pre{font-family:Menlo,Consolas,Monaco,monospace}hr{height:0;border:0;box-sizing:content-box;overflow:visible;margin:1em 0;border-bottom:1px solid gray}iframe{border:0;outline:0}figure{margin:0}img{display:block;width:auto;height:auto;max-width:100%;border-style:none}ul{list-style:none}ol{list-style:none}a{color:blue;text-decoration:none}a:hover{color:#00008b}[role=tab]{cursor:pointer}dt{font-weight:bold}[hidden],template{display:none}blockquote{margin:0}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes FadeDownIn{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translatex(-10px)}100%{opacity:1;transform:translatex(0)}}@keyframes fadeInZoom{0%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}.h1{font-size:2.29739671rem;font-size:calc(2.29739671rem + 0.05vw);font-weight:bold;line-height:1.4461633138}.h2{font-size:2rem;font-size:calc(2rem + 0.05vw);font-weight:bold;line-height:1.455}.h3{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + 0.05vw);font-weight:bold;line-height:1.4638906822}.h4{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + 0.05vw);font-weight:bold;line-height:1.4728356903}.h5{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + 0.05vw);font-weight:bold;line-height:1.4818353563}.h6{font-size:1.148698355rem;font-size:calc(1.148698355rem + 0.05vw);font-weight:bold;line-height:1.4908900142}.color-context-dark{background-color:#000;color:#fff}.color-context-light{background-color:#fff;color:#000}.container{display:block;margin-left:auto;margin-right:auto;width:100%;max-width:90rem;padding-left:2rem;padding-right:2rem;padding-top:2rem;padding-bottom:2rem}.layout-flex{display:flex}.layout-flex-justified{display:flex;justify-content:space-between}.layout-flex-center{display:flex;align-items:center}.layout-flex-center-all{display:flex;align-items:center;justify-content:center}.layout-flex-justify-end{display:flex;justify-content:flex-end}.layout-flex-baseline{display:flex;align-items:baseline}.layout-flex-end{display:flex;align-items:flex-end}.layout-flex-column{display:flex;flex-direction:column}.layout-flex-column-center{display:flex;flex-direction:column;justify-content:center}.links:not(.links--no-visited) a,.link:not(.link--no-visited){color:blue;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links:not(.links--no-visited) a:hover,.link:not(.link--no-visited):hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links:not(.links--no-visited) a:visited,.link:not(.link--no-visited):visited{color:purple}.links:not(.links--no-visited) a:active,.link:not(.link--no-visited):active{color:#00008b}.links--no-visited a,.link--no-visited{color:blue;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links--no-visited a:hover,.link--no-visited:hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links.links--no-underline a,.link.link--no-underline{text-decoration:none}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;text-transform:none;text-align:center;text-shadow:none;vertical-align:middle;font-family:inherit;font-weight:bold;font-size:1rem;font-size:calc(1rem + 0.05vw);border-radius:2rem;background-clip:padding-box;padding:.75em 1.5em;line-height:1.1;letter-spacing:.02em;box-shadow:0 1px 5px rgba(0,0,0,.349);margin:.45em .5em .45em 0;min-width:9rem;white-space:nowrap;max-width:100%;flex-shrink:0}.button,.button:visited{color:#fff;border:0 solid rgba(0,0,0,0);background-color:#4d4d4d;text-decoration:none}.button:last-child{margin-right:0}.button:hover,.button:focus{color:#fff;background-color:#000;border-color:rgba(0,0,0,0);text-decoration:none}.button__icon:first-child{margin-right:1em}.button__icon:last-child{margin-left:1em}.button--small{padding:.35em 1.5em;min-width:0}.button--large{padding:1em 2em;min-width:11rem}.button--transparent,.button--transparent:visited{background-color:rgba(0,0,0,0);color:#000;border-color:rgba(0,0,0,0);box-shadow:none}.button--transparent:hover,.button--transparent:focus{background-color:#fff;color:inherit;border-color:rgba(0,0,0,0);box-shadow:none}.button--outline,.button--outline:visited{background-color:rgba(0,0,0,0);color:#000;border-color:gray;box-shadow:none}.button--outline:hover,.button--outline:focus{background-color:#fff;color:#000;border-color:gray;box-shadow:none}.button--icon{display:inline-flex;align-items:center;justify-content:center;min-width:0;max-width:none;border-radius:50%;font-size:1.38rem;width:2.5rem;height:2.5rem;padding:0 !important}.button--small.button--icon{width:2rem;height:2rem;font-size:1rem}.button--large.button--icon{width:3.5rem;height:3.5rem}.rule{border-bottom:1px solid gray;margin-top:1em;margin-bottom:1em}.rule--content-on-top{position:relative}.rule--content-on-top>*{background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:100%;padding:.5em;margin:0}.rule--default{border-bottom:1px solid gray}.rule--light{border-bottom:1px solid #d3d3d3}.rule--margin-smallest{margin-top:.5rem;margin-bottom:.5rem}.rule--margin-small{margin-top:1rem;margin-bottom:1rem}.rule--margin-medium{margin-top:2rem;margin-bottom:2rem}.rule--margin-large{margin-top:3rem;margin-bottom:3rem}.rule--short{width:2.75rem;max-width:100%;border-bottom-width:4px}.list-lines{list-style:none;margin:0 0 1em 0;padding:0;border-top:1px solid #d3d3d3}.list-lines>li{border-bottom:1px solid #d3d3d3;padding:1em 0}.list-lines>li>*:last-child{margin-bottom:0}.list-lines--dense>li{padding:.5em 0;line-height:1.3}.list-unordered{list-style:disc outside}.list-unordered li{margin-left:1.5em;margin-bottom:.65em}.list-unordered li::marker{color:inherit}.list-unordered ul{list-style-type:circle}.list-unordered ul ul{list-style-type:square}.list-unordered ul,.list-unordered ol{margin-top:.65em;margin-bottom:.65em}.list-unordered li::marker{color:inherit}.list-ordered{margin-bottom:1em;list-style:decimal outside}.list-ordered li{margin-bottom:.65em;margin-left:1.5em}.list-ordered>li::marker{color:inherit}.list-ordered ol{list-style-type:lower-alpha}.list-ordered ol ol{list-style-type:lower-roman}.list-ordered ul,.list-ordered ol{margin-top:.65em;margin-bottom:.65em}.type-small-x{font-size:.7578582833rem;font-size:calc(0.7578582833rem + 0.05vw);line-height:1.5}.type-small{font-size:.8705505633rem;font-size:calc(0.8705505633rem + 0.05vw);line-height:1.5}.type-base{font-size:1rem;font-size:calc(1rem + 0.05vw);line-height:1.5}.type-large{font-size:1.148698355rem;font-size:calc(1.148698355rem + 0.05vw);line-height:1.4908900142}.type-large-x{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + 0.05vw);line-height:1.4818353563}.type-large-xx{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + 0.05vw);line-height:1.4728356903}.type-large-xxx{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + 0.05vw);line-height:1.4638906822}.type-inherit{font-size:inherit;line-height:inherit}.type-light{font-weight:300}.type-normal{font-weight:normal}.type-semibold{font-weight:600}.type-bold{font-weight:bold}.type-truncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.type-italic{font-style:italic}.type-center{text-align:center}.type-left{text-align:left}.type-right{text-align:right}.type-upper{text-transform:uppercase;letter-spacing:.04em}.type-lower{text-transform:lowercase}.type-title{text-transform:capitalize}.type-family{font-family:ui-sans-serif,"Open Sans",Helvetica,Arial,sans-serif}.type-family-sans{font-family:ui-sans-serif,"Open Sans",Helvetica,Arial,sans-serif}.type-family-serif{font-family:Cambria,Georgia,serif}.type-family-mono{font-family:Menlo,Consolas,Monaco,monospace}.type-word-break{word-break:normal;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.type-word-break-all{word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.type-max-width{max-width:60rem}.type-max-width-small{max-width:50rem}.line-height-dense{line-height:1.3}.line-height-spaced{line-height:1.75}.margin{margin:1rem}.margin-auto{margin:auto}.margin-small-x{margin:.5rem}.margin-small{margin:.75rem}.margin-default{margin:1rem}.margin-large{margin:2rem}.margin-large-x{margin:3rem}.margin-large-xx{margin:4rem}.margin-top{margin-top:1rem}.margin-top-auto{margin-top:auto}.margin-top-small-x{margin-top:.5rem}.margin-top-small{margin-top:.75rem}.margin-top-default{margin-top:1rem}.margin-top-large{margin-top:2rem}.margin-top-large-x{margin-top:3rem}.margin-top-large-xx{margin-top:4rem}.margin-bottom{margin-bottom:1rem}.margin-bottom-auto{margin-bottom:auto}.margin-bottom-small-x{margin-bottom:.5rem}.margin-bottom-small{margin-bottom:.75rem}.margin-bottom-default{margin-bottom:1rem}.margin-bottom-large{margin-bottom:2rem}.margin-bottom-large-x{margin-bottom:3rem}.margin-bottom-large-xx{margin-bottom:4rem}.margin-left{margin-left:1rem}.margin-left-auto{margin-left:auto}.margin-left-small-x{margin-left:.5rem}.margin-left-small{margin-left:.75rem}.margin-left-default{margin-left:1rem}.margin-left-large{margin-left:2rem}.margin-left-large-x{margin-left:3rem}.margin-left-large-xx{margin-left:4rem}.margin-right{margin-right:1rem}.margin-right-auto{margin-right:auto}.margin-right-small-x{margin-right:.5rem}.margin-right-small{margin-right:.75rem}.margin-right-default{margin-right:1rem}.margin-right-large{margin-right:2rem}.margin-right-large-x{margin-right:3rem}.margin-right-large-xx{margin-right:4rem}.padding{padding:1rem}.padding-small-x{padding:.5rem}.padding-small{padding:.75rem}.padding-default{padding:1rem}.padding-large{padding:2rem}.padding-large-x{padding:3rem}.padding-large-xx{padding:4rem}.padding-top{padding-top:1rem}.padding-top-small-x{padding-top:.5rem}.padding-top-small{padding-top:.75rem}.padding-top-default{padding-top:1rem}.padding-top-large{padding-top:2rem}.padding-top-large-x{padding-top:3rem}.padding-top-large-xx{padding-top:4rem}.padding-bottom{padding-bottom:1rem}.padding-bottom-small-x{padding-bottom:.5rem}.padding-bottom-small{padding-bottom:.75rem}.padding-bottom-default{padding-bottom:1rem}.padding-bottom-large{padding-bottom:2rem}.padding-bottom-large-x{padding-bottom:3rem}.padding-bottom-large-xx{padding-bottom:4rem}.padding-left{padding-left:1rem}.padding-left-small-x{padding-left:.5rem}.padding-left-small{padding-left:.75rem}.padding-left-default{padding-left:1rem}.padding-left-large{padding-left:2rem}.padding-left-large-x{padding-left:3rem}.padding-left-large-xx{padding-left:4rem}.padding-right{padding-right:1rem}.padding-right-small-x{padding-right:.5rem}.padding-right-small{padding-right:.75rem}.padding-right-default{padding-right:1rem}.padding-right-large{padding-right:2rem}.padding-right-large-x{padding-right:3rem}.padding-right-large-xx{padding-right:4rem}.hidden-visually{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.hidden-visually-focusable:not(:active):not(:focus){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.clearfix,.cf{*zoom:1}.clearfix:before,.clearfix:after,.cf:before,.cf:after{content:"";display:table;flex-basis:0;order:1}.clearfix:after,.cf:after{clear:both}.display-block{display:block}.display-flex{display:flex}.display-inline-flex{display:inline-flex}.display-inline{display:inline}.display-inline-all *{display:inline}.display-inline-block{display:inline-block}.hidden,.display-none{display:none}@media screen and (min-width: 43.5em){.hidden-min-small{display:none}}@media screen and (max-width: 43.49em){.hidden-max-small{display:none}}@media screen and (min-width: 76em){.hidden-min-medium{display:none}}@media screen and (max-width: 75.99em){.hidden-max-medium{display:none}}@media screen and (min-width: 94.75em){.hidden-min-large{display:none}}@media screen and (max-width: 94.74em){.hidden-max-large{display:none}}.no-scroll-y{overflow-y:hidden}.no-scroll-x{overflow-x:hidden}.full-height{height:100%}.full-width{width:100%}.flex-basis-full{flex-basis:100%}.full-min-height{min-height:100%}.image-fill{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.image-full-width img,.image-full-width{width:100%;height:auto}.margin-auto,.center{margin-left:auto;margin-right:auto}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.no-margin{margin:0}.no-margin-top{margin-top:0}.no-margin-bottom{margin-bottom:0}.no-margin-left{margin-left:0}.no-margin-right{margin-right:0}.no-padding{padding:0}.no-padding-top{padding-top:0}.no-padding-bottom{padding-bottom:0}.no-padding-left{padding-left:0}.no-padding-right{padding-right:0}.align-self-start{align-self:start}.align-self-center{align-self:center}.align-self-end{align-self:end}.align-self-baseline{align-self:baseline}@media(print){.no-print{display:none}*{background:rgba(0,0,0,0) !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;filter:none !important}a,a:visited{text-decoration:underline}pre,blockquote{border:1px solid #999;page-break-inside:avoid}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.color-black{color:#000}.color-white{color:#fff}.color-type{color:#000}
1
+ /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}table{text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;line-height:inherit;font-size:inherit;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{text-transform:none;text-align:inherit;background-color:transparent;border:transparent;border-radius:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-text-size-adjust:100%}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{color:#000;background-color:#fff;font-family:ui-sans-serif,Open Sans,Helvetica,Arial,sans-serif;margin:0;font-size:1rem;font-size:calc(1rem + .05vw);line-height:1.5}body:before{display:none;content:"none"}@media screen and (min-width: 43.5em){body:before{content:"small"}}@media screen and (min-width: 76em){body:before{content:"medium"}}@media screen and (min-width: 94.75em){body:before{content:"large"}}h1,h2,h3,h4,h5,h6,ul,ol,li,pre,code,p{margin:0;padding:0;font-size:inherit;font-family:inherit;border-width:0;border-style:solid;font-weight:inherit}p{margin-top:0;margin-bottom:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}small{font-size:.8705505633rem;font-size:calc(.8705505633rem + .05vw);line-height:1.3}sub{bottom:-.25em}sup{top:-.5em}b,strong{font-weight:700}form{width:100%}code,kbd,samp,pre{font-family:Menlo,Consolas,Monaco,monospace}hr{height:0;border:0;-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible;margin:1em 0;border-bottom:1px solid gray}iframe{border:0;outline:0}figure{margin:0}img{display:block;width:auto;height:auto;max-width:100%;border-style:none}ul,ol{list-style:none}a{color:#00f;text-decoration:none}a:hover{color:#00008b}[role=tab]{cursor:pointer}dt{font-weight:700}[hidden],template{display:none}blockquote{margin:0}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes FadeDownIn{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes FadeDownIn{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translatex(0);transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translatex(0);transform:translate(0)}}@-webkit-keyframes fadeInZoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes fadeInZoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.h1{font-size:2.29739671rem;font-size:calc(2.29739671rem + .05vw);font-weight:700;line-height:1.4461633138}.h2{font-size:2rem;font-size:calc(2rem + .05vw);font-weight:700;line-height:1.455}.h3{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + .05vw);font-weight:700;line-height:1.4638906822}.h4{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + .05vw);font-weight:700;line-height:1.4728356903}.h5{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + .05vw);font-weight:700;line-height:1.4818353563}.h6{font-size:1.148698355rem;font-size:calc(1.148698355rem + .05vw);font-weight:700;line-height:1.4908900142}.color-context-dark{background-color:#000;color:#fff}.color-context-light{background-color:#fff;color:#000}.container{display:block;margin-left:auto;margin-right:auto;width:100%;max-width:90rem;padding:2rem}.layout-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.layout-flex-justified{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.layout-flex-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.layout-flex-center-all{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.layout-flex-justify-end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.layout-flex-baseline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.layout-flex-end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.layout-flex-column{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.layout-flex-column-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.links:not(.links--no-visited) a,.link:not(.link--no-visited){color:#00f;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links:not(.links--no-visited) a:hover,.link:not(.link--no-visited):hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links:not(.links--no-visited) a:visited,.link:not(.link--no-visited):visited{color:purple}.links:not(.links--no-visited) a:active,.link:not(.link--no-visited):active{color:#00008b}.links--no-visited a,.link--no-visited{color:#00f;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links--no-visited a:hover,.link--no-visited:hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links.links--no-underline a,.link.link--no-underline{text-decoration:none}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;text-transform:none;text-align:center;text-shadow:none;vertical-align:middle;font-family:inherit;font-weight:700;font-size:1rem;font-size:calc(1rem + .05vw);border-radius:2rem;background-clip:padding-box;padding:.75em 1.5em;line-height:1.1;letter-spacing:.02em;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.349);box-shadow:0 1px 5px #00000059;margin:.45em .5em .45em 0;min-width:9rem;white-space:nowrap;max-width:100%;-ms-flex-negative:0;flex-shrink:0}.button,.button:visited{color:#fff;border:0 solid transparent;background-color:#4d4d4d;text-decoration:none}.button:last-child{margin-right:0}.button:hover,.button:focus{color:#fff;background-color:#000;border-color:transparent;text-decoration:none}.button__icon:first-child{margin-right:1em}.button__icon:last-child{margin-left:1em}.button--small{padding:.35em 1.5em;min-width:0}.button--large{padding:1em 2em;min-width:11rem}.button--transparent,.button--transparent:visited{background-color:transparent;color:#000;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button--transparent:hover,.button--transparent:focus{background-color:#fff;color:inherit;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button--outline,.button--outline:visited{background-color:transparent;color:#000;border-color:gray;-webkit-box-shadow:none;box-shadow:none}.button--outline:hover,.button--outline:focus{background-color:#fff;color:#000;border-color:gray;-webkit-box-shadow:none;box-shadow:none}.button--icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:0;max-width:none;border-radius:50%;font-size:1.38rem;width:2.5rem;height:2.5rem;padding:0!important}.button--small.button--icon{width:2rem;height:2rem;font-size:1rem}.button--large.button--icon{width:3.5rem;height:3.5rem}.rule{border-bottom:1px solid gray;margin-top:1em;margin-bottom:1em}.rule--content-on-top{position:relative}.rule--content-on-top>*{background-color:#fff;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:100%;padding:.5em;margin:0}.rule--default{border-bottom:1px solid gray}.rule--light{border-bottom:1px solid lightgray}.rule--margin-smallest{margin-top:.5rem;margin-bottom:.5rem}.rule--margin-small{margin-top:1rem;margin-bottom:1rem}.rule--margin-medium{margin-top:2rem;margin-bottom:2rem}.rule--margin-large{margin-top:3rem;margin-bottom:3rem}.rule--short{width:2.75rem;max-width:100%;border-bottom-width:4px}.list-lines{list-style:none;margin:0 0 1em;padding:0;border-top:1px solid lightgray}.list-lines>li{border-bottom:1px solid lightgray;padding:1em 0}.list-lines>li>*:last-child{margin-bottom:0}.list-lines--dense>li{padding:.5em 0;line-height:1.3}.list-unordered{list-style:disc outside}.list-unordered li{margin-left:1.5em;margin-bottom:.65em}.list-unordered ul{list-style-type:circle}.list-unordered ul ul{list-style-type:square}.list-unordered ul,.list-unordered ol{margin-top:.65em;margin-bottom:.65em}.list-unordered li::marker{color:inherit}.list-ordered{margin-bottom:1em;list-style:decimal outside}.list-ordered li{margin-bottom:.65em;margin-left:1.5em}.list-ordered>li::marker{color:inherit}.list-ordered ol{list-style-type:lower-alpha}.list-ordered ol ol{list-style-type:lower-roman}.list-ordered ul,.list-ordered ol{margin-top:.65em;margin-bottom:.65em}.type-small-x{font-size:.7578582833rem;font-size:calc(.7578582833rem + .05vw);line-height:1.5}.type-small{font-size:.8705505633rem;font-size:calc(.8705505633rem + .05vw);line-height:1.5}.type-base{font-size:1rem;font-size:calc(1rem + .05vw);line-height:1.5}.type-large{font-size:1.148698355rem;font-size:calc(1.148698355rem + .05vw);line-height:1.4908900142}.type-large-x{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + .05vw);line-height:1.4818353563}.type-large-xx{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + .05vw);line-height:1.4728356903}.type-large-xxx{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + .05vw);line-height:1.4638906822}.type-inherit{font-size:inherit;line-height:inherit}.type-light{font-weight:300}.type-normal{font-weight:400}.type-semibold{font-weight:600}.type-bold{font-weight:700}.type-truncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.type-italic{font-style:italic}.type-center{text-align:center}.type-left{text-align:left}.type-right{text-align:right}.type-upper{text-transform:uppercase;letter-spacing:.04em}.type-lower{text-transform:lowercase}.type-title{text-transform:capitalize}.type-family,.type-family-sans{font-family:ui-sans-serif,Open Sans,Helvetica,Arial,sans-serif}.type-family-serif{font-family:Cambria,Georgia,serif}.type-family-mono{font-family:Menlo,Consolas,Monaco,monospace}.type-word-break{word-break:normal;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.type-word-break-all{word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.type-max-width{max-width:60rem}.type-max-width-small{max-width:50rem}.line-height-dense{line-height:1.3}.line-height-spaced{line-height:1.75}.margin{margin:1rem}.margin-small-x{margin:.5rem}.margin-small{margin:.75rem}.margin-default{margin:1rem}.margin-large{margin:2rem}.margin-large-x{margin:3rem}.margin-large-xx{margin:4rem}.margin-top{margin-top:1rem}.margin-top-small-x{margin-top:.5rem}.margin-top-small{margin-top:.75rem}.margin-top-default{margin-top:1rem}.margin-top-large{margin-top:2rem}.margin-top-large-x{margin-top:3rem}.margin-top-large-xx{margin-top:4rem}.margin-bottom{margin-bottom:1rem}.margin-bottom-small-x{margin-bottom:.5rem}.margin-bottom-small{margin-bottom:.75rem}.margin-bottom-default{margin-bottom:1rem}.margin-bottom-large{margin-bottom:2rem}.margin-bottom-large-x{margin-bottom:3rem}.margin-bottom-large-xx{margin-bottom:4rem}.margin-left{margin-left:1rem}.margin-left-small-x{margin-left:.5rem}.margin-left-small{margin-left:.75rem}.margin-left-default{margin-left:1rem}.margin-left-large{margin-left:2rem}.margin-left-large-x{margin-left:3rem}.margin-left-large-xx{margin-left:4rem}.margin-right{margin-right:1rem}.margin-right-small-x{margin-right:.5rem}.margin-right-small{margin-right:.75rem}.margin-right-default{margin-right:1rem}.margin-right-large{margin-right:2rem}.margin-right-large-x{margin-right:3rem}.margin-right-large-xx{margin-right:4rem}.padding{padding:1rem}.padding-small-x{padding:.5rem}.padding-small{padding:.75rem}.padding-default{padding:1rem}.padding-large{padding:2rem}.padding-large-x{padding:3rem}.padding-large-xx{padding:4rem}.padding-top{padding-top:1rem}.padding-top-small-x{padding-top:.5rem}.padding-top-small{padding-top:.75rem}.padding-top-default{padding-top:1rem}.padding-top-large{padding-top:2rem}.padding-top-large-x{padding-top:3rem}.padding-top-large-xx{padding-top:4rem}.padding-bottom{padding-bottom:1rem}.padding-bottom-small-x{padding-bottom:.5rem}.padding-bottom-small{padding-bottom:.75rem}.padding-bottom-default{padding-bottom:1rem}.padding-bottom-large{padding-bottom:2rem}.padding-bottom-large-x{padding-bottom:3rem}.padding-bottom-large-xx{padding-bottom:4rem}.padding-left{padding-left:1rem}.padding-left-small-x{padding-left:.5rem}.padding-left-small{padding-left:.75rem}.padding-left-default{padding-left:1rem}.padding-left-large{padding-left:2rem}.padding-left-large-x{padding-left:3rem}.padding-left-large-xx{padding-left:4rem}.padding-right{padding-right:1rem}.padding-right-small-x{padding-right:.5rem}.padding-right-small{padding-right:.75rem}.padding-right-default{padding-right:1rem}.padding-right-large{padding-right:2rem}.padding-right-large-x{padding-right:3rem}.padding-right-large-xx{padding-right:4rem}.hidden-visually{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.hidden-visually-focusable:not(:active):not(:focus){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.clearfix:before,.clearfix:after,.cf:before,.cf:after{content:"";display:table;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clearfix:after,.cf:after{clear:both}.display-block{display:block}.display-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.display-inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.display-inline,.display-inline-all *{display:inline}.display-inline-block{display:inline-block}.hidden,.display-none{display:none!important}@media screen and (min-width: 43.5em){.hidden-min-small{display:none!important}}@media screen and (max-width: 43.49em){.hidden-max-small{display:none!important}}@media screen and (min-width: 76em){.hidden-min-medium{display:none!important}}@media screen and (max-width: 75.99em){.hidden-max-medium{display:none!important}}@media screen and (min-width: 94.75em){.hidden-min-large{display:none!important}}@media screen and (max-width: 94.74em){.hidden-max-large{display:none!important}}.no-scroll-y{overflow-y:hidden}.no-scroll-x{overflow-x:hidden}.full-height{height:100%}.full-width{width:100%}.flex-basis-full{-ms-flex-preferred-size:100%;flex-basis:100%}.full-min-height{min-height:100%}.image-fill{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.image-full-width img,.image-full-width{width:100%;height:auto}.margin-auto,.center{margin-left:auto;margin-right:auto}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.no-margin{margin:0}.no-margin-top{margin-top:0}.no-margin-bottom{margin-bottom:0}.no-margin-left{margin-left:0}.no-margin-right{margin-right:0}.no-padding{padding:0}.no-padding-top{padding-top:0}.no-padding-bottom{padding-bottom:0}.no-padding-left{padding-left:0}.no-padding-right{padding-right:0}.align-self-start{-ms-flex-item-align:start;align-self:start}.align-self-center{-ms-flex-item-align:center;align-self:center}.align-self-end{-ms-flex-item-align:end;align-self:end}.align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}@media (print){.no-print{display:none}*{background:transparent!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important;-webkit-filter:none!important;filter:none!important}a,a:visited{text-decoration:underline}pre,blockquote{border:1px solid #999;page-break-inside:avoid}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.color-black{color:#000}.color-white{color:#fff}.color-type{color:#000}
package/dist/ulu-frontend.min.js CHANGED
@@ -1 +1 @@
1
- !function(){var t={398:function(){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(t){var e=this;do{if(Element.prototype.matches.call(e,t))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType);return null})}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,n),r.exports}!function(){"use strict";n(398);var t,e,i,o,r,a={pageModified:function(t){t.dispatchEvent(new Event(s("pageModified"),{bubbles:!0}))},pageResized:function(t){t.dispatchEvent(new Event(s("pageResized"),{bubbles:!0}))}};function s(t){return"ulu:"+t}function u(t,e){var n=t.indexOf(e);n>-1&&t.splice(n,1)}function c(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function l(t){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},l(t)}window.addEventListener("resize",(t=function(){return t="pageResized",e=document,void(a[t]?a[t](e):console.warn("Unable to dispatch site event: ".concat(t," in context:"),e));var t,e},e=250,function(){var n=o||this,a=arguments,s=i&&!r;clearTimeout(r),r=setTimeout((function(){r=null,i||t.apply(n,a)}),e),s&&t.apply(n,a)}));var f={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1},h="console"in window;function p(t){return h&&f.debug&&((null==t?void 0:t.debug)||null==t)}function d(t,e,n){var i,o,r=function(t){var e;return"object"===l(t)&&(null==t||null===(e=t.constructor)||void 0===e?void 0:e.name)}(e)||"Logger";(i=console)[t].apply(i,[r].concat(function(t){if(Array.isArray(t))return c(t)}(o=n)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(o)||function(t,e){if(t){if("string"==typeof t)return c(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(t,e):void 0}}(o)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())),f.outputContext&&console.log("Context:\n",e)}function y(t){if(p(t)){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];d("log",t,n)}}function m(t){if(f.errorsAlways||p(t)){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];d("error",t,n)}}function v(t){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},v(t)}function b(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function g(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,(void 0,o=function(t,e){if("object"!==v(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,"string");if("object"!==v(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(i.key),"symbol"===v(o)?o:String(o)),i)}var o}function w(t,e,n){return e&&g(t.prototype,e),n&&g(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}window.addEventListener(s("pageResized"),(function(){k.instances.forEach((function(t){return t.update()}))}));var k=function(){function t(e){var n=this;b(this,t),e.order||m(this,"Missing order (required)!"),Object.assign(this,t.defaults,e),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.order.forEach((function(t){return n.breakpoints[t]=new x(t,n)})),y(this,this),this.update(),t.instances.push(this)}return w(t,[{key:"getBreakpoint",value:function(){return window.getComputedStyle(this.element,this.psuedoSelector).content.replace(/^"|"$/g,"")}},{key:"update",value:function(){var t=this,e=this.getBreakpoint();if(e!==this.active){this.previous=this.active,this.previousIndex=this.activeIndex;var n=this.order.indexOf(e);this.active=e,this.activeIndex=n;var i=this.at(this.active),o=function(e){return t.at(e)},r=this.order.slice(n).map(o),a=this.order.slice(0,n).map(o),s=this.order.slice(0,n+1).map(o),u=this.order.slice(n+1).map(o),c=this.order.slice().map(o);c.splice(n,1),y(this,"max:",r.map((function(t){return t.name})).join()),y(this,"min:",s.map((function(t){return t.name})).join()),r.forEach((function(t){return t._setDirection("max",!0)})),s.forEach((function(t){return t._setDirection("min",!0)})),i._setDirection("only",!0),a.forEach((function(t){return t._setDirection("max",!1)})),u.forEach((function(t){return t._setDirection("min",!1)})),c.forEach((function(t){return t._setDirection("only",!1)})),null!==this.previousIndex&&(this.resizeDirection=this.previousIndex<n?"up":"down")}}},{key:"at",value:function(t){var e=this.breakpoints[t];return t||m(this,"Unable to find breakpoint for:",e),e}}]),t}();k.instances=[],k.defaults={element:document.body,psuedoSelector:":before",debug:!1};var E=function(){function t(e,n){b(this,t),this.direction=e,this.active=!1,this.on=[],this.off=[],this.breakpoint=n}return w(t,[{key:"change",value:function(t){this.active!==t&&(t?this._call(!0):this.active&&this._call(!1),this.active=t)}},{key:"_call",value:function(t){(t?this.on:this.off).forEach((function(t){return t()})),y(this.breakpoint._manager,"Handlers called (".concat(t?"on":"off","): ").concat(this.direction))}},{key:"getHandlers",value:function(t){return"object"!==v(t)?{on:t}:t}},{key:"add",value:function(t){var e=this.getHandlers(t);e.on&&this.on.push(e.on),e.off&&this.off.push(e.off),this.active&&e.on&&(e.on(),y(this.breakpoint._manager,"Handler called immediately: ".concat(this.direction),e.on))}},{key:"remove",value:function(t){var e=this.getHandlers(t);e.on&&u(this.on,e.on),e.off&&u(this.off,e.off)}}]),t}(),x=function(){function t(e,n){b(this,t),this.directions={max:new E("max",this),min:new E("min",this),only:new E("only",this)},this._manager=n,this.name=e}return w(t,[{key:"_setDirection",value:function(t,e){this.directions[t].change(e)}},{key:"max",value:function(t){this.directions.max.add(t)}},{key:"min",value:function(t){this.directions.min.add(t)}},{key:"only",value:function(t){this.directions.only.add(t)}},{key:"remove",value:function(t,e){(e?[e]:["max","min","only"]).forEach((function(e){return e.remove(t)}))}},{key:"log",value:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];e.unshift("Breakpoint (".concat(this.name,"):")),this._manager.log.apply(this._manager,e)}}]),t}()}()}();
1
+ var w=Object.defineProperty;var E=(i,e,t)=>e in i?w(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var f=(i,e,t)=>(E(i,typeof e!="symbol"?e+"":e,t),t);function m(i,e){var t=i.indexOf(e);t>-1&&i.splice(t,1)}function x(i,e,t,o){var s;return function(){var h=o||this,a=arguments,d=function(){s=null,t||i.apply(h,a)},l=t&&!s;clearTimeout(s),s=setTimeout(d,e),l&&i.apply(h,a)}}const b={pageModified(i){i.dispatchEvent(new Event(g("pageModified"),{bubbles:!0}))},pageResized(i){i.dispatchEvent(new Event(g("pageResized"),{bubbles:!0}))}};window.addEventListener("resize",x(()=>C("pageResized",document),250));function C(i,e){b[i]?b[i](e):console.warn(`Unable to dispatch site event: ${i} in context:`,e)}function g(i){return"ulu:"+i}const I={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1},_="console"in window;function D(i){return _&&I.debug&&((i==null?void 0:i.debug)||i==null)}function B(i){var e;return typeof i=="object"&&((e=i==null?void 0:i.constructor)==null?void 0:e.name)}function y(i,e,t){const o=B(e)||"Logger";console[i](o,...t)}function c(i,...e){D(i)&&y("log",i,e)}function k(i,...e){y("error",i,e)}window.addEventListener(g("pageResized"),()=>{v.instances.forEach(i=>i.update())});const r=class r{constructor(e){Object.assign(this,r.defaults,e),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.onChangeCallbacks=[],this.order.forEach(t=>this.breakpoints[t]=new P(t,this)),c(this,this),this.update(),r.instances.push(this)}onChange(e){this.onChangeCallbacks.push(e)}removeOnChange(e){m(this.onChangeCallbacks,e)}getBreakpointInPsuedo(){return window.getComputedStyle(this.element,this.psuedoSelector).content.replace(/^"|"$/g,"")}getBreakpointInProperty(){return getComputedStyle(this.element).getPropertyValue(this.customProperty)}getBreakpoint(){return this.valueFromPsuedo?this.getBreakpointInPsuedo():this.getBreakpointInProperty()}update(){const e=this.getBreakpoint();if(!e){k(this,"Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");return}if(e===this.active)return;this.previous=this.active,this.previousIndex=this.activeIndex;const t=this.order.indexOf(e);this.active=e,this.activeIndex=t;const o=this.at(this.active),s=n=>this.at(n),u=this.order.slice(t).map(s),h=this.order.slice(0,t).map(s),a=this.order.slice(0,t+1).map(s),d=this.order.slice(t+1).map(s),l=this.order.slice().map(s);l.splice(t,1),c(this,"max:",u.map(n=>n.name).join()),c(this,"min:",a.map(n=>n.name).join()),u.forEach(n=>n._setDirection("max",!0)),a.forEach(n=>n._setDirection("min",!0)),o._setDirection("only",!0),h.forEach(n=>n._setDirection("max",!1)),d.forEach(n=>n._setDirection("min",!1)),l.forEach(n=>n._setDirection("only",!1)),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<t?"up":"down"),this.onChangeCallbacks.forEach(n=>n(this))}at(e){const t=this.breakpoints[e];return e||k(this,"Unable to find breakpoint for:",t),t}};f(r,"instances",[]),f(r,"defaults",{element:document.documentElement,valueFromPsuedo:!1,customProperty:"--breakpoint",psuedoSelector:":before",order:["none","small","medium","large"],debug:!1});let v=r;class p{constructor(e,t){this.direction=e,this.active=!1,this.on=[],this.off=[],this.breakpoint=t}change(e){this.active!==e&&(e?this._call(!0):this.active&&this._call(!1),this.active=e)}_call(e){(e?this.on:this.off).forEach(o=>o()),c(this.breakpoint._manager,`Handlers called (${e?"on":"off"}): ${this.direction}`)}getHandlers(e){return typeof e!="object"?{on:e}:e}add(e){const t=this.getHandlers(e);t.on&&this.on.push(t.on),t.off&&this.off.push(t.off),this.active&&t.on&&(t.on(),c(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,t.on))}remove(e){const t=this.getHandlers(e);t.on&&m(this.on,t.on),t.off&&m(this.off,t.off)}}class P{constructor(e,t){this.directions={max:new p("max",this),min:new p("min",this),only:new p("only",this)},this._manager=t,this.name=e}_setDirection(e,t){this.directions[e].change(t)}max(e){this.directions.max.add(e)}min(e){this.directions.min.add(e)}only(e){this.directions.only.add(e)}remove(e,t){(t?[t]:["max","min","only"]).forEach(s=>s.remove(e))}log(...e){e.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,e)}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ulu/frontend",
3
- "version": "0.0.17",
4
- "description": "Theming library",
3
+ "version": "0.0.18",
4
+ "description": "Modular Sass Theming Library",
5
5
  "browser": "js/index.js",
6
6
  "main": "index.js",
7
7
  "exports": {
@@ -21,6 +21,7 @@
21
21
  },
22
22
  "type": "module",
23
23
  "scripts": {
24
+ "build" : "vite build",
24
25
  "docs:dev": "vitepress dev docs-src",
25
26
  "docs:build": "vitepress build docs-src",
26
27
  "docs:preview": "vitepress preview docs-src",
@@ -35,6 +36,10 @@
35
36
  },
36
37
  "keywords": [
37
38
  "SCSS",
39
+ "sass",
40
+ "breakpoints",
41
+ "theme",
42
+ "modules",
38
43
  "javascript",
39
44
  "framework",
40
45
  "mixin"
@@ -50,7 +55,7 @@
50
55
  "homepage": "https://github.com/Jscherbe/frontend#readme",
51
56
  "devDependencies": {
52
57
  "@ulu/vitepress-auto-menus": "^0.0.3",
53
- "@ulu/vitepress-sassdoc": "^0.0.6",
58
+ "@ulu/vitepress-sassdoc": "^0.0.7",
54
59
  "clean-jsdoc-theme": "^4.2.17",
55
60
  "fs-extra": "^11.2.0",
56
61
  "jsdoc": "^4.0.2",
@@ -60,6 +65,8 @@
60
65
  "vitepress": "^1.0.0-rc.27"
61
66
  },
62
67
  "dependencies": {
63
- "@ulu/utils": "^0.0.6"
68
+ "@ulu/utils": "^0.0.6",
69
+ "autoprefixer": "^10.4.16",
70
+ "vite": "^5.0.10"
64
71
  }
65
72
  }
package/scss/_button.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  /// @group button
3
3
  ////
4
4
 
5
- /// Version: 1.0.3
5
+ /// This is the core button module. It handles the styling, sizes and other styling attributes of buttons. You can include the "component" button to print the button styles/sizes or you can use the mixins from the core module.
6
6
 
7
7
  @use "sass:map";
8
8
  @use "sass:meta";
@@ -107,19 +107,29 @@ $styles: (
107
107
  /// @example scss - General example, replace module-name with module's name
108
108
  /// @include module-name.get("property");
109
109
 
110
-
111
110
  @function get($name) {
112
111
  $value: utils.require-map-get($config, $name, "button [config]");
113
112
  @return utils.function-fallback($name, $value, $-fallbacks);
114
113
  }
115
114
 
115
+ /// Set button styles
116
+ /// @param {Map} $changes Map of changes
117
+ /// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
118
+
116
119
  @mixin set-styles($changes, $merge-mode: null) {
117
120
  $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
118
121
  }
122
+
123
+ /// Set Button Sizes
124
+ /// @param {Map} $changes Map of changes
125
+ /// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
126
+
119
127
  @mixin set-sizes($changes, $merge-mode: null) {
120
128
  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
121
129
  }
122
130
 
131
+ /// Print styles to reset browser button style
132
+
123
133
  @mixin reset() {
124
134
  text-transform: none;
125
135
  text-align: inherit;
@@ -132,6 +142,10 @@ $styles: (
132
142
  color: inherit;
133
143
  cursor: pointer;
134
144
  }
145
+
146
+ /// Print default button styles
147
+ /// @param {Boolean} $with-reset [false] Include button.reset()
148
+
135
149
  @mixin default($with-reset: false) {
136
150
  $font-size: get("font-size");
137
151
  @if ($with-reset) {
@@ -179,6 +193,11 @@ $styles: (
179
193
  }
180
194
  }
181
195
 
196
+ /// Print button size styles for a specifc size
197
+ /// @param {String} $name Name of size from $sizes
198
+ /// @see $sizes
199
+ /// @see set-sizes
200
+
182
201
  @mixin size($name) {
183
202
  $size: utils.require-map-get($sizes, $name, 'button [size]');
184
203
  $font-size: map.get($size, "font-size");
@@ -191,6 +210,12 @@ $styles: (
191
210
  }
192
211
  }
193
212
 
213
+ /// Get a value from a button style
214
+ /// @param {String} $name Name of style from $styles
215
+ /// @see {variable} $styles
216
+ /// @see set-styles
217
+ /// @return {*} The property you were trying to get
218
+
194
219
  @function get-style-value($name, $prop, $for-hover: false) {
195
220
  $is-color-prop: string.index($prop, "color");
196
221
  $style: utils.require-map-get($styles, $name, 'button [color value]');
@@ -207,6 +232,13 @@ $styles: (
207
232
  }
208
233
  }
209
234
 
235
+ /// Print a button style's base styles (not hover)
236
+ /// - In most cases you want the style() mixin
237
+ /// - This is used mainly for trying to match a buttons base styles without including the other state (hover, etc) styles
238
+ /// @param {String} $name Name of style from $styles
239
+ /// @see {variable} $styles
240
+ /// @see set-styles
241
+
210
242
  @mixin style-styles($name) {
211
243
  background-color: get-style-value($name, "background-color", false);
212
244
  color: get-style-value($name, "color", false);
@@ -217,6 +249,13 @@ $styles: (
217
249
  font-weight: get-style-value($name, "font-weight", false);
218
250
  }
219
251
 
252
+ /// Print a button style's base styles (hover styles only)
253
+ /// - In most cases you want the style() mixin
254
+ /// - This is used mainly for trying to match a buttons hover styles without including the base styling
255
+ /// @param {String} $name Name of style from $styles
256
+ /// @see {variable} $styles
257
+ /// @see set-styles
258
+
220
259
  @mixin style-styles-hover($name) {
221
260
  background-color: get-style-value($name, "background-color", true);
222
261
  color: get-style-value($name, "color", true);
@@ -225,6 +264,17 @@ $styles: (
225
264
  text-decoration: get-style-value($name, "text-decoration", true);
226
265
  }
227
266
 
267
+ /// Print a button style
268
+ /// - Includes base/visited styling, and hover/focus state styles
269
+ /// - To print only one of those states, use style-styles or style-styles-hover
270
+ /// - By default this mixin prints the buttons base styles along with :visited state.
271
+ /// This is to avoid link visted states effecting the button styles (if used in editor areas
272
+ /// or other areas that apply automatic links styling for example. (param below to override behavior)
273
+ /// @param {String} $name Name of style from $styles
274
+ /// @param {String} $no-visited [false] Do not include :visited selector for button base styles
275
+ /// @see {variable} $styles
276
+ /// @see set-styles
277
+
228
278
  @mixin style($name, $no-visited: false) {
229
279
  @if ($no-visited) {
230
280
  @include style-styles($name);
package/scss/_color.scss CHANGED
@@ -179,10 +179,11 @@ $color-classes: (
179
179
  /// @param {String} $with-prop Checks the specific context for a certain prop (has to be truthy)(used for output in helper/base color modules)
180
180
  /// @example scss
181
181
  /// @include ulu.all-context-styles();
182
- /// @example raw Example of a color-context
182
+ /// @example html {preview} Example of a color-context
183
183
  /// <div class="color-context-dark" style="padding: 1rem">
184
184
  //// Some text in dark context
185
185
  //// </div>
186
+
186
187
  @mixin all-context-styles($with-prop: null) {
187
188
  $prefix: selector.class("color-context");
188
189
  @each $name, $context in $contexts {
@@ -197,8 +198,9 @@ $color-classes: (
197
198
  /// Outputs all color classes
198
199
  /// @example scss
199
200
  /// @include ulu.all-color-class-styles();
200
- /// @example raw Example of a color-context
201
+ /// @example html {preview} Example of a color-context
201
202
  /// <span class="color-name">Some text</span>
203
+
202
204
  @mixin all-color-class-styles() {
203
205
  $prefix: selector.class("color");
204
206
  @each $name, $output in $color-classes {
package/scss/base/_typography.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  /// Prints elements base styles
11
11
  /// @example scss
12
12
  /// @include ulu.base-typography-styles();
13
- /// @example raw Example of type size as base unprefixed
13
+ /// @example html {preview} Example of type size as base unprefixed
14
14
  /// <span class="h1">A</span>
15
15
  /// <span class="h2">A</span>
16
16
  /// <span class="h3">A</span>
package/scss/components/_button.scss CHANGED
@@ -32,7 +32,7 @@ $config: (
32
32
  /// Prints button component styles
33
33
  /// @example scss
34
34
  /// @include ulu.component-button-styles();
35
- /// @example raw
35
+ /// @example html {preview}
36
36
  /// <a class="button" href="#">Button Default</a>
37
37
 
38
38
  @mixin styles {
package/scss/helpers/_typography.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  /// Prints Typography Helper styles
11
11
  /// @example scss
12
12
  /// @include ulu.helper-typography-styles();
13
- /// @example raw Example of type size as helper prefixed
13
+ /// @example html {preview} Example of type size as helper prefixed
14
14
  /// <span class="type-large-xxx">A</span>
15
15
  /// <span class="type-large-xx">A</span>
16
16
  /// <span class="type-large-x">A</span>
package/vite.config.js ADDED
@@ -0,0 +1,36 @@
1
+ import { dirname, resolve } from "path";
2
+ import { fileURLToPath } from "url";
3
+ import { defineConfig } from "vite";
4
+ import autoprefixer from "autoprefixer";
5
+
6
+ const __dirname = dirname(fileURLToPath(import.meta.url));
7
+
8
+ export default defineConfig({
9
+ build: {
10
+ // target: "es2015",
11
+ // manifest: true,
12
+ minify: true,
13
+ cssMinify: true,
14
+ cssCodeSplit: false,
15
+ outDir: "dist",
16
+ rollupOptions: {
17
+ input: "dist-src/main.js",
18
+ output: {
19
+ entryFileNames: `ulu-frontend.min.js`,
20
+ assetFileNames: `ulu-frontend.min.[ext]`,
21
+ },
22
+ },
23
+ },
24
+ css: {
25
+ postcss: {
26
+ plugins: [
27
+ autoprefixer()
28
+ ],
29
+ },
30
+ preprocessorOptions: {
31
+ scss: {
32
+ includePaths: [resolve(__dirname, `./scss`)],
33
+ },
34
+ },
35
+ },
36
+ });