@ulu/frontend 0.0.18 → 0.0.21
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/CHANGELOG.md +16 -0
- package/README.dev.md +22 -0
- package/README.md +4 -5
- package/dist/ulu-frontend.min.css +1 -1
- package/package.json +2 -2
- package/project.todo +17 -0
- package/scss/_button.scss +3 -1
- package/scss/_typography.scss +1 -0
- package/scss/components/_badge.scss +127 -0
- package/scss/components/_index.scss +6 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## Version 0.1.0 | @in-progress
|
|
4
|
+
|
|
5
|
+
- Add in other common component modules
|
|
6
|
+
- Users using these modules locally will need to remove and update configuration to pull modules from library instead. Or alternatively they will need to not output/use these new component modules
|
|
7
|
+
- List of component modules added:
|
|
8
|
+
- badge
|
|
9
|
+
|
|
10
|
+
## Version 0.0.21
|
|
11
|
+
|
|
12
|
+
- Core/button Remove 'background-clip: padding-box' on buttons, affects buttons with borders (rendering between bg and border)
|
|
13
|
+
|
|
14
|
+
## Version 0.0.18
|
|
15
|
+
|
|
16
|
+
- Fix docs issue with JS broken from Markdown Attrs
|
|
17
|
+
- Fix missing arguments in typography module sassdocs comments
|
|
18
|
+
|
|
3
19
|
## Version 0.0.17
|
|
4
20
|
|
|
5
21
|
### SCSS
|
package/README.dev.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# Development
|
|
2
|
+
|
|
3
|
+
## Dist
|
|
4
|
+
|
|
5
|
+
- Dist can be used standalone (browser, etc) (stylesheet with everything currently)
|
|
6
|
+
- Used for examples in docs
|
|
7
|
+
- Rebuild by running `npm run build`
|
|
8
|
+
|
|
9
|
+
## Docs
|
|
10
|
+
|
|
11
|
+
## Updatiing SCSS
|
|
12
|
+
|
|
13
|
+
- Udpate sassdocs markdown by `npm run docs:update:scss`
|
|
14
|
+
|
|
15
|
+
## Updating JS Docs
|
|
16
|
+
|
|
17
|
+
- Run `npm run docs:build:js` to update jsdoc markdown
|
|
18
|
+
- Run `npm run types` to update Typescript declarations (extracted from JS docs)
|
|
19
|
+
|
|
20
|
+
## Building/Deploying
|
|
21
|
+
|
|
22
|
+
- Use `npm run docs:build`
|
package/README.md
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
# Frontend Library
|
|
2
2
|
|
|
3
|
-
Front end development library (SCSS, JS
|
|
3
|
+
Front end development library (SCSS, JS)
|
|
4
4
|
|
|
5
|
-
[Documentation](https://jscherbe.github.io/frontend/)
|
|
5
|
+
- [Documentation](https://jscherbe.github.io/frontend/)
|
|
6
|
+
- [Change Log](CHANGELOG.md)
|
|
7
|
+
- [Development Notes](README.dev.md)
|
|
6
8
|
|
|
7
|
-
[Change Log](CHANGELOG.md)
|
|
8
9
|
|
|
9
|
-
## SCSS Library
|
|
10
10
|
|
|
11
|
-
This is the sass library. Set up for packaged use (under on namespace) and individual module use (importing modules directly
|
|
@@ -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: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}
|
|
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;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}.badge{display:block;width:10rem;max-width:100%;-webkit-box-flex:0;-ms-flex:0 0 10rem;flex:0 0 10rem;font-size:1.3rem;font-weight:700}.badge__inner{display:block;padding-bottom:100%;width:100%;position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center center;text-align:center;border-radius:50%;-webkit-transition:-webkit-transform .1s ease-in-out;transition:-webkit-transform .1s ease-in-out;transition:transform .1s ease-in-out;transition:transform .1s ease-in-out,-webkit-transform .1s ease-in-out}.badge__inner,.badge__inner:hover,.badge__inner:focus,.badge__inner:visited{background-color:gray;color:#000}.badge--clickable:hover .badge__inner,.badge--clickable:focus .badge__inner{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.badge__inner>*{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.badge__inner>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.badge--large{width:6rem;font-size:2.75rem;-ms-flex-preferred-size:6rem;flex-basis:6rem}.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ulu/frontend",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "Modular Sass Theming Library",
|
|
5
5
|
"browser": "js/index.js",
|
|
6
6
|
"main": "index.js",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"homepage": "https://github.com/Jscherbe/frontend#readme",
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@ulu/vitepress-auto-menus": "^0.0.3",
|
|
58
|
-
"@ulu/vitepress-sassdoc": "^0.0.
|
|
58
|
+
"@ulu/vitepress-sassdoc": "^0.0.8",
|
|
59
59
|
"clean-jsdoc-theme": "^4.2.17",
|
|
60
60
|
"fs-extra": "^11.2.0",
|
|
61
61
|
"jsdoc": "^4.0.2",
|
package/project.todo
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
Bring in Vue components as a separate package:
|
|
2
|
+
☐ Decided that vue stuff should stay seperate as we wouldn't want to udpate this library to make changes to vue components (as vue changes over time)
|
|
3
|
+
☐ This other module may use peer deps or something to limit which version of ulu it works with
|
|
4
|
+
Todos:
|
|
5
|
+
☐ Need to add guide about how you can use the modules (ie by chaining or individually)
|
|
6
|
+
☐ Need to add guide about configuration
|
|
7
|
+
☐ Bring in common components
|
|
8
|
+
* Only what we would want to support in the core library!
|
|
9
|
+
* More specific modules should probably be handled like the vue components
|
|
10
|
+
* Any module added should likely stay in the library indefinetly, so modules that are more opionated or used as infrequently should probably be made into their own package. Or if they don't seem like they have a future omitted
|
|
11
|
+
☐ badge
|
|
12
|
+
☐ tag
|
|
13
|
+
☐ card
|
|
14
|
+
☐ card grid
|
|
15
|
+
☐ spinner
|
|
16
|
+
Ideas:
|
|
17
|
+
☐ Add scaffolding @idea
|
package/scss/_button.scss
CHANGED
|
@@ -163,7 +163,9 @@ $styles: (
|
|
|
163
163
|
@include typography.size($font-size, null, true);
|
|
164
164
|
}
|
|
165
165
|
border-radius: get("border-radius");
|
|
166
|
-
|
|
166
|
+
// Removed not sure why it was needed, effects buttons with
|
|
167
|
+
// borders (rendering between bg and border)
|
|
168
|
+
// background-clip: padding-box;
|
|
167
169
|
padding: get("padding");
|
|
168
170
|
line-height: get("line-height");
|
|
169
171
|
letter-spacing: get("letter-spacing");
|
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;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// @group badge
|
|
3
|
+
////
|
|
4
|
+
|
|
5
|
+
@use "sass:map";
|
|
6
|
+
@use "../utils";
|
|
7
|
+
@use "../selector";
|
|
8
|
+
|
|
9
|
+
/// Module Settings
|
|
10
|
+
/// @type Map
|
|
11
|
+
/// @prop {Number} $config.font-size Font size (basic ie. 1.3rem) for badge
|
|
12
|
+
/// @prop {Number} $config.border-radius Border radius of badge
|
|
13
|
+
/// @prop {Number} $config.width Width of badge (default size)
|
|
14
|
+
/// @prop {Number} $config.font-weight Font weight
|
|
15
|
+
/// @prop {Number} $config.background-color Background color (if no image)
|
|
16
|
+
/// @prop {Number} $config.color Type color
|
|
17
|
+
/// @prop {List} $config.sizes List of other sizes (large by defualt), each size is a map of (width, font-size)
|
|
18
|
+
|
|
19
|
+
$config: (
|
|
20
|
+
"font-size": 1.3rem,
|
|
21
|
+
"border-radius": 50%,
|
|
22
|
+
"width": 10rem,
|
|
23
|
+
"font-weight": bold,
|
|
24
|
+
"background-color": gray,
|
|
25
|
+
"color": black,
|
|
26
|
+
"sizes" : (
|
|
27
|
+
"large" : (
|
|
28
|
+
"font-size" : 2.75rem,
|
|
29
|
+
"width" : 6rem
|
|
30
|
+
)
|
|
31
|
+
)
|
|
32
|
+
) !default;
|
|
33
|
+
|
|
34
|
+
/// Change modules $config
|
|
35
|
+
/// @param {Map} $changes Map of changes
|
|
36
|
+
/// @include module-name.set(( "property" : value ));
|
|
37
|
+
|
|
38
|
+
@mixin set($changes) {
|
|
39
|
+
$config: map.merge($config, $changes) !global;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/// Get a config option
|
|
43
|
+
/// @param {Map} $name Name of property
|
|
44
|
+
/// @include module-name.get("property");
|
|
45
|
+
|
|
46
|
+
@function get($name) {
|
|
47
|
+
@return utils.require-map-get($config, $name, "badge [config]");
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/// Prints badge component styles
|
|
51
|
+
/// @example scss
|
|
52
|
+
/// @include ulu.component-badge-styles();
|
|
53
|
+
/// @example html {preview}
|
|
54
|
+
/// <div class="badge">
|
|
55
|
+
/// <div class="badge__inner">
|
|
56
|
+
/// <img src="..." alt="...">
|
|
57
|
+
/// </div>
|
|
58
|
+
/// </div>
|
|
59
|
+
///
|
|
60
|
+
/// <div class="badge">
|
|
61
|
+
/// <div class="badge__inner">
|
|
62
|
+
/// <span>JS</span>
|
|
63
|
+
/// </div>
|
|
64
|
+
/// </div>
|
|
65
|
+
|
|
66
|
+
@mixin styles {
|
|
67
|
+
$prefix: selector.class("badge");
|
|
68
|
+
// Badge content can be text, image, icon, or background-image
|
|
69
|
+
#{ $prefix } {
|
|
70
|
+
display: block;
|
|
71
|
+
width: get("width");
|
|
72
|
+
max-width: 100%;
|
|
73
|
+
flex: 0 0 get("width");
|
|
74
|
+
font-size: get("font-size");
|
|
75
|
+
font-weight: get("font-weight");
|
|
76
|
+
}
|
|
77
|
+
#{ $prefix }__inner {
|
|
78
|
+
display: block;
|
|
79
|
+
padding-bottom: 100%;
|
|
80
|
+
width: 100%;
|
|
81
|
+
position: relative;
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
background-repeat: no-repeat;
|
|
84
|
+
background-size: cover;
|
|
85
|
+
background-position: center center;
|
|
86
|
+
text-align: center;
|
|
87
|
+
border-radius: get("border-radius");
|
|
88
|
+
transition: transform 100ms ease-in-out;
|
|
89
|
+
// Incase this is used as a link or router-link
|
|
90
|
+
&,
|
|
91
|
+
&:hover,
|
|
92
|
+
&:focus,
|
|
93
|
+
&:visited {
|
|
94
|
+
background-color: get("background-color");
|
|
95
|
+
color: get("color");
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
#{ $prefix }--clickable {
|
|
99
|
+
&:hover,
|
|
100
|
+
&:focus {
|
|
101
|
+
#{ $prefix }__inner {
|
|
102
|
+
transform: scale(1.2);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
#{ $prefix }__inner > * {
|
|
107
|
+
display: block;
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 50%;
|
|
110
|
+
left: 50%;
|
|
111
|
+
transform: translate(-50%, -50%);
|
|
112
|
+
}
|
|
113
|
+
#{ $prefix }__inner > img {
|
|
114
|
+
width: 100%;
|
|
115
|
+
height: 100%;
|
|
116
|
+
object-fit: cover;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@each $name, $props in get("sizes") {
|
|
120
|
+
#{ $prefix }--#{ $name } {
|
|
121
|
+
width: map.get($props, "width");
|
|
122
|
+
font-size: map.get($props, "font-size");
|
|
123
|
+
flex-basis: map.get($props, "width");
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
@forward "links" as links-*;
|
|
6
6
|
@forward "button" as button-*;
|
|
7
|
+
@forward "badge" as badge-*;
|
|
7
8
|
@forward "rule" as rule-*;
|
|
8
9
|
@forward "list-lines" as list-lines-*;
|
|
9
10
|
@forward "list-unordered" as list-unordered-*;
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
@use "../utils";
|
|
15
16
|
@use "links";
|
|
16
17
|
@use "button";
|
|
18
|
+
@use "badge";
|
|
17
19
|
@use "rule";
|
|
18
20
|
@use "list-lines";
|
|
19
21
|
@use "list-unordered";
|
|
@@ -24,6 +26,7 @@
|
|
|
24
26
|
$-all-includes: (
|
|
25
27
|
"links" : true,
|
|
26
28
|
"button" : true,
|
|
29
|
+
"badge" : true,
|
|
27
30
|
"rule" : true,
|
|
28
31
|
"list-lines" : true,
|
|
29
32
|
"list-unordered" : true,
|
|
@@ -48,6 +51,9 @@ $-all-includes: (
|
|
|
48
51
|
@if (map.get($-all-includes, "button")) {
|
|
49
52
|
@include button.styles;
|
|
50
53
|
}
|
|
54
|
+
@if (map.get($-all-includes, "badge")) {
|
|
55
|
+
@include badge.styles;
|
|
56
|
+
}
|
|
51
57
|
@if (map.get($-all-includes, "rule")) {
|
|
52
58
|
@include rule.styles;
|
|
53
59
|
}
|