@ulu/frontend 0.0.17 → 0.0.19
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.
- package/.browserslistrc +2 -0
- package/.eslintrc +17 -0
- package/.prettierrc +10 -0
- package/CHANGELOG.md +7 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/dist/ulu-frontend.min.js +1 -1
- package/package.json +11 -4
- package/scss/_button.scss +52 -2
- package/scss/_color.scss +4 -2
- package/scss/_typography.scss +1 -0
- package/scss/base/_typography.scss +1 -1
- package/scss/components/_button.scss +1 -1
- package/scss/helpers/_typography.scss +1 -1
- package/vite.config.js +36 -0
package/.browserslistrc
ADDED
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
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## Version 0.0.18
|
|
4
|
+
|
|
5
|
+
- Fix docs issue with JS broken from Markdown Attrs
|
|
6
|
+
- Fix missing arguments in typography module sassdocs comments
|
|
7
|
+
|
|
3
8
|
## Version 0.0.17
|
|
4
9
|
|
|
5
10
|
### SCSS
|
|
@@ -17,6 +22,8 @@
|
|
|
17
22
|
### SCSS
|
|
18
23
|
|
|
19
24
|
- Added utils.map-merge($map, $changes, $mode)
|
|
25
|
+
- This is a **breaking change**
|
|
26
|
+
- 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
27
|
- This will allow expansion if needed and is simpler for modules to implement
|
|
21
28
|
- This is to replace utils.map-merge-or-overwrite which is deprecated now
|
|
22
29
|
- Removed IE "*zoom" clearfix property as we don't support it and it causes errors in CSS minifiers since it's not standard CSS
|
|
@@ -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
|
-
|
|
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.
|
|
4
|
-
"description": "Theming
|
|
3
|
+
"version": "0.0.19",
|
|
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.
|
|
58
|
+
"@ulu/vitepress-sassdoc": "^0.0.8",
|
|
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
|
-
///
|
|
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
|
|
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
|
|
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/_typography.scss
CHANGED
|
@@ -275,6 +275,7 @@ $sizes: (
|
|
|
275
275
|
/// Print a typography size (font-size, line-height)
|
|
276
276
|
/// @param {String} $nameOrMap Name to retrieve from sizes map or a unique size map that follows the API
|
|
277
277
|
/// @param {Map} $changes Modifications to be merged into size before using
|
|
278
|
+
/// @param {Boolean} $only-font-size Only print the font size
|
|
278
279
|
|
|
279
280
|
@mixin size($name, $changes: false, $only-font-size: null) {
|
|
280
281
|
$size: $name;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
/// Prints elements base styles
|
|
11
11
|
/// @example scss
|
|
12
12
|
/// @include ulu.base-typography-styles();
|
|
13
|
-
/// @example
|
|
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>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
/// Prints Typography Helper styles
|
|
11
11
|
/// @example scss
|
|
12
12
|
/// @include ulu.helper-typography-styles();
|
|
13
|
-
/// @example
|
|
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
|
+
});
|