@esportsplus/ui 0.0.29 → 0.0.30

package/build/css/components.css

@@ -1,3 +1,4 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-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}
 .accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
 .alert{max-width:calc(100% - var(--margin-horizontal)*2);width:var(--width)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{animation:alert-close var(--transition-duration) ease-in-out;bottom:0;position:absolute;right:100%;top:0;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-25%)}.alert-message.--active{opacity:1}.alert-timer{height:var(--height);transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.alert-timer-bg,.alert-timer-meter{fill:none;stroke-width:var(--border-width);stroke:var(--border-color)}.alert-timer-meter{stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:0;animation:alert-timer var(--animation-duration) ease-in-out;transform:rotate(-90deg);transform-origin:50% 50%}@keyframes alert-close{0%{transform:translateX(150%)}to{transform:translateX(0)}}@keyframes alert-timer{0%{stroke-dashoffset:360}to{stroke-dashoffset:0}}
 .anchor{max-height:calc(100% - var(--margin-vertical)*2);max-width:calc(100% - var(--margin-horizontal)*2);pointer-events:auto;position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}

package/build/css/components.scss

@@ -0,0 +1,26 @@
+.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
+.alert{max-width:calc(100% - var(--margin-horizontal)*2);width:var(--width)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{animation:alert-close var(--transition-duration) ease-in-out;bottom:0;position:absolute;right:100%;top:0;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-25%)}.alert-message.--active{opacity:1}.alert-timer{height:var(--height);transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.alert-timer-bg,.alert-timer-meter{fill:none;stroke-width:var(--border-width);stroke:var(--border-color)}.alert-timer-meter{stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:0;animation:alert-timer var(--animation-duration) ease-in-out;transform:rotate(-90deg);transform-origin:50% 50%}@keyframes alert-close{0%{transform:translateX(150%)}to{transform:translateX(0)}}@keyframes alert-timer{0%{stroke-dashoffset:360}to{stroke-dashoffset:0}}
+.anchor{max-height:calc(100% - var(--margin-vertical)*2);max-width:calc(100% - var(--margin-horizontal)*2);pointer-events:auto;position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
+.banner{background-position:50%;background-size:cover;bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.banner--fixed{position:fixed}
+.border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}
+.bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
+.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);min-width:var(--min-width);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat:after{display:none}.button--processing{color:transparent;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;bottom:50%;content:"";height:var(--size);position:absolute;right:50%;transform:translate(50%,50%);width:var(--size)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%) rotate(0deg)}to{transform:translate(50%,50%) rotate(359deg)}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
+.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat:after{display:none}
+.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;width:100%}
+.ellipsis-dot:first-child{animation:ellipsis-dot-one var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(2){animation:ellipsis-dot-two var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(3){animation:ellipsis-dot-three var(--animation-duration) linear infinite}@keyframes ellipsis-dot-one{0%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-two{0%{opacity:0}21%{opacity:0}22%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-three{0%{opacity:0}43%{opacity:0}44%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}
+button,input,select,textarea{background:transparent;border:0;border-radius:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{word-wrap:break-word;color:var(--color);font-size:var(--font-size);position:relative;width:100%}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:field-error .32s linear 1}@keyframes field-error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat:after{display:none}.field-mask--outline:before{border-radius:var(--border-radius);bottom:0;box-shadow:0 0 0 var(--outline-width) var(--border-color);content:"";left:0;opacity:var(--outline-opacity);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:0}.field-mask--checkbox:before,.field-mask--radio:before{bottom:50%;position:absolute;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox:before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch:before{left:var(--padding-horizontal);position:absolute;top:var(--padding-vertical)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;min-width:0;padding:var(--padding-vertical) var(--padding-horizontal)}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}
+.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller .group-item:first-child{margin-left:0}.group--scroller .group-item:last-child{margin-right:0}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
+.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);pointer-events:none;position:relative;transform:rotate(var(--rotate));width:var(--width)}.icon svg{fill:currentColor;color:currentColor;height:100%;width:100%}
+.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
+.loading{animation:loading var(--animation-duration) infinite linear;animation-delay:var(--animation-delay);border:var(--border-width) var(--border-style) var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;box-shadow:var(--box-shadow);height:var(--height);pointer-events:none;position:relative;transition:border-color var(--transition-duration) ease-in-out;width:var(--width);z-index:0}@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.overlay{bottom:0;height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;width:100vw;z-index:9}
+.page{min-height:var(--min-height);position:relative;width:var(--width)}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}
+.processing{animation:processing var(--animation-duration) linear infinite;height:var(--size);position:relative;width:var(--size)}.processing-ring{clip:rect(calc(var(--size)/2),var(--size),var(--size),0)}.processing-ring,.processing-ring:after,.processing-ring:before{bottom:0;left:0;position:absolute;right:0;top:0}.processing-ring,.processing-ring:before{animation:processing calc(var(--animation-duration)/2) cubic-bezier(.77,0,.175,1) infinite}.processing-ring:after,.processing-ring:before{border-radius:50%;content:""}.processing-ring:after{border:var(--border-width) var(--border-style) var(--border-color-secondary);opacity:var(--opacity)}.processing-ring:before{border-top:var(--border-width) var(--border-style) var(--border-color-primary)}@keyframes processing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+body,html{height:100%;overflow-x:hidden;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility}*,:after,:before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{word-wrap:break-word;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{cursor:pointer;outline:none;text-decoration:none}a,b,strong{color:var(--color,inherit)}b,strong{font-weight:var(--font-weight)}p{word-wrap:break-word}p,pre{margin:0;padding:0;width:100%}pre{overflow-wrap:break-word;white-space:break-spaces}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}
+.row{display:flex;flex-wrap:wrap;justify-content:flex-start;min-height:var(--min-height);position:relative;width:100%}
+::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive,::-webkit-scrollbar-track{background:transparent;box-shadow:unset}.--scrollbar{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar:before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar:before{background:var(--background-default);border-radius:var(--border-radius);content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}
+.sidebar{bottom:var(--position-vertical);cursor:default;max-width:var(--width);overflow:hidden;pointer-events:auto;position:absolute;top:var(--position-vertical);transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:calc(100% - var(--position-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--position-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--position-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width)*-1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
+.site{z-index:0}
+.text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);position:relative;transition:color var(--transition-duration) ease-in-out;width:var(--width)}
+.thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height);position:relative;width:var(--width)}
+.tooltip{cursor:pointer;position:relative;z-index:8}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box:before{bottom:50%;content:"";height:calc(100% + var(--spacer)*2.5);position:absolute;right:50%;transform:translate(50%,50%);width:calc(100% + var(--spacer)*2.5);z-index:-1}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(-90deg)}.tooltip-arrow{margin:0 -1px;transform:rotate(90deg)}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width);z-index:9}.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-message,.tooltip.--active>.tooltip-content,.tooltip.--active>.tooltip-message{opacity:1}.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *,.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{bottom:50%;position:absolute;right:50%;transform:translate(50%,50%) scale(var(--scaleX),var(--scaleY));transform-origin:center center}.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c,.tooltip.--active>.tooltip-content--c,.tooltip.--active>.tooltip-message--c{transform:translate(50%,50%) scale(1)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--es,.tooltip.--active>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active>.tooltip-message--es{transform:translateX(calc(var(--spacer)*2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));position:absolute;transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center left}.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e,.tooltip.--active>.tooltip-content--e,.tooltip.--active>.tooltip-message--e{transform:translate(calc(var(--spacer)*2),50%) scale(1)}.tooltip-content--en,.tooltip-message--en{top:0;transform-origin:top left}.tooltip-content--es,.tooltip-message--es{bottom:0;transform-origin:bottom left}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--nw,.tooltip.--active>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw{transform:translateY(calc(var(--spacer)*-2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));position:absolute;right:50%;transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center bottom}.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n,.tooltip.--active>.tooltip-content--n,.tooltip.--active>.tooltip-message--n{transform:translate(50%,calc(var(--spacer)*-2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{right:0;transform-origin:bottom right}.tooltip-content--nw,.tooltip-message--nw{left:0;transform-origin:bottom left}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{position:absolute;top:calc(100% - var(--spacer));transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--sw,.tooltip.--active>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw{transform:translateY(calc(var(--spacer)*2))}.tooltip-content--s,.tooltip-message--s{position:absolute;right:50%;top:calc(100% - var(--spacer));transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center top}.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s,.tooltip.--active>.tooltip-content--s,.tooltip.--active>.tooltip-message--s{transform:translate(50%,calc(var(--spacer)*2)) scale(1)}.tooltip-content--se,.tooltip-message--se{right:0;transform-origin:top right}.tooltip-content--sw,.tooltip-message--sw{left:0;transform-origin:top left}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{position:absolute;right:calc(100% - var(--spacer));transform:scale(var(--scale))}.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--ws,.tooltip.--active>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws{transform:translateX(calc(var(--spacer)*-2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;position:absolute;right:calc(100% - var(--spacer));transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center right}.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w,.tooltip.--active>.tooltip-content--w,.tooltip.--active>.tooltip-message--w{transform:translate(calc(var(--spacer)*-2),50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{top:0;transform-origin:top right}.tooltip-content--ws,.tooltip-message--ws{bottom:0;transform-origin:bottom right}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);line-height:normal;padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}

package/build/css/css-utilities.scss

@@ -0,0 +1,11 @@
+.--background-state{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--background-state.--active{--background:var(--background-active)}.--background-state:not(.--active):hover{--background:var(--background-hover)}.--background-state:not(.--active):active{--background:var(--background-pressed)}
+.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-color:var(--border-color-default);--border-style:solid;--border-width:var(--border-width-400)}.--border-dashed{--border-style:dashed}.--border-dotted{--border-style:dotted}.--border-radius{--border-radius:var(--border-radius-400)}.--border-radius-0px{--border-radius:var(--border-radius-0px)}.--border-radius-circle{--border-radius:var(--border-radius-circle)}.--border-radius-curved{--border-radius:var(--border-radius-curved)}.--border-radius-100{--border-radius:var(--border-radius-100)}.--border-radius-200{--border-radius:var(--border-radius-200)}.--border-radius-300{--border-radius:var(--border-radius-300)}.--border-radius-400{--border-radius:var(--border-radius-400)}.--border-radius-500{--border-radius:var(--border-radius-500)}.--border-radius-600{--border-radius:var(--border-radius-600)}.--border-state{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-state.--active{--border-color:var(--border-color-active)}.--border-state:not(.--active):hover{--border-color:var(--border-color-hover)}.--border-state:not(.--active):active{--border-color:var(--border-color-pressed)}.--border-width,.--border-width-400{--border-width:var(--border-width-400)}.--border-width-500{--border-width:var(--border-width-500)}.--border-width-600{--border-width:var(--border-width-600)}.--border-width-700{--border-width:var(--border-width-700)}
+.--color-inherit{--color:inherit}.--color-state{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--color-state.--active{--color:var(--color-active)}.--color-state:not(.--active):hover{--color:var(--color-hover)}.--color-state:not(.--active):active{--color:var(--color-pressed)}
+.--disabled{--opacity:0.64}
+.--line-height-100{--line-height:var(--line-height-100)}.--line-height-200{--line-height:var(--line-height-200)}.--line-height-300{--line-height:var(--line-height-300)}.--line-height-400{--line-height:var(--line-height-400)}
+.--size{--size:var(--size-400)}.--size-0px{--size:var(--size-0px)}.--size-100{--size:var(--size-100)}.--size-200{--size:var(--size-200)}.--size-300{--size:var(--size-300)}.--size-400{--size:var(--size-400)}.--size-500{--size:var(--size-500)}.--size-600{--size:var(--size-600)}.--size-700{--size:var(--size-700)}.--size-800{--size:var(--size-800)}.--size-900{--size:var(--size-900)}
+.--slide-in{--transition-duration:var(--transition-duration-400);--translateY:var(--size-400)}
+.--text-100{--font-size:var(--font-size-100)}.--text-200{--font-size:var(--font-size-200)}.--text-300{--font-size:var(--font-size-300)}.--text-400{--font-size:var(--font-size-400)}.--text-500{--font-size:var(--font-size-500)}.--text-600{--font-size:var(--font-size-600)}.--text-700{--font-size:var(--font-size-700)}.--text-800{--font-size:var(--font-size-800)}.--text-outline{--color:inherit}.--text-outline,.--text-outline-400{--stroke-width:var(--border-width-400)}.--text-outline-500{--stroke-width:var(--border-width-500)}.--text-outline-600{--stroke-width:var(--border-width-600)}.--text-outline-700{--stroke-width:var(--border-width-700)}.--text-strike-through,.--text-strike-through-400{--line-width:var(--border-width-400)}.--text-strike-through-500{--line-width:var(--border-width-500)}.--text-strike-through-600{--line-width:var(--border-width-600)}.--text-strike-through-700{--line-width:var(--border-width-700)}
+.--width-full{--width:100%}.--width-half{--width:50%}
+.--margin-border-width,.--margin-border-width-400,.--margin-border-width-horizontal-400{--margin-horizontal:var(--border-width-400)}.--margin-border-width-500,.--margin-border-width-horizontal-500{--margin-horizontal:var(--border-width-500)}.--margin-border-width-600,.--margin-border-width-horizontal-600{--margin-horizontal:var(--border-width-600)}.--margin-border-width-700,.--margin-border-width-horizontal-700{--margin-horizontal:var(--border-width-700)}.--margin-0px,.--margin-horizontal-0px{--margin-horizontal:var(--size-0px)}.--margin-100,.--margin-horizontal-100{--margin-horizontal:var(--size-100)}.--margin-200,.--margin-horizontal-200{--margin-horizontal:var(--size-200)}.--margin-300,.--margin-horizontal-300{--margin-horizontal:var(--size-300)}.--margin-400,.--margin-horizontal-400{--margin-horizontal:var(--size-400)}.--margin-500,.--margin-horizontal-500{--margin-horizontal:var(--size-500)}.--margin-600,.--margin-horizontal-600{--margin-horizontal:var(--size-600)}.--margin-700,.--margin-horizontal-700{--margin-horizontal:var(--size-700)}.--margin-800,.--margin-horizontal-800{--margin-horizontal:var(--size-800)}.--margin-900,.--margin-horizontal-900{--margin-horizontal:var(--size-900)}.--margin-horizontal-inherit,.--margin-inherit{--margin-horizontal:inherit}.--margin-border-width,.--margin-border-width-400,.--margin-border-width-vertical-400{--margin-vertical:var(--border-width-400)}.--margin-border-width-500,.--margin-border-width-vertical-500{--margin-vertical:var(--border-width-500)}.--margin-border-width-600,.--margin-border-width-vertical-600{--margin-vertical:var(--border-width-600)}.--margin-border-width-700,.--margin-border-width-vertical-700{--margin-vertical:var(--border-width-700)}.--margin-0px,.--margin-vertical-0px{--margin-vertical:var(--size-0px)}.--margin-100,.--margin-vertical-100{--margin-vertical:var(--size-100)}.--margin-200,.--margin-vertical-200{--margin-vertical:var(--size-200)}.--margin-300,.--margin-vertical-300{--margin-vertical:var(--size-300)}.--margin-400,.--margin-vertical-400{--margin-vertical:var(--size-400)}.--margin-500,.--margin-vertical-500{--margin-vertical:var(--size-500)}.--margin-600,.--margin-vertical-600{--margin-vertical:var(--size-600)}.--margin-700,.--margin-vertical-700{--margin-vertical:var(--size-700)}.--margin-800,.--margin-vertical-800{--margin-vertical:var(--size-800)}.--margin-900,.--margin-vertical-900{--margin-vertical:var(--size-900)}.--margin-inherit,.--margin-vertical-inherit{--margin-vertical:inherit}.--padding-border-width,.--padding-border-width-400,.--padding-border-width-horizontal-400{--padding-horizontal:var(--border-width-400)}.--padding-border-width-500,.--padding-border-width-horizontal-500{--padding-horizontal:var(--border-width-500)}.--padding-border-width-600,.--padding-border-width-horizontal-600{--padding-horizontal:var(--border-width-600)}.--padding-border-width-700,.--padding-border-width-horizontal-700{--padding-horizontal:var(--border-width-700)}.--padding-0px,.--padding-horizontal-0px{--padding-horizontal:var(--size-0px)}.--padding-100,.--padding-horizontal-100{--padding-horizontal:var(--size-100)}.--padding-200,.--padding-horizontal-200{--padding-horizontal:var(--size-200)}.--padding-300,.--padding-horizontal-300{--padding-horizontal:var(--size-300)}.--padding-400,.--padding-horizontal-400{--padding-horizontal:var(--size-400)}.--padding-500,.--padding-horizontal-500{--padding-horizontal:var(--size-500)}.--padding-600,.--padding-horizontal-600{--padding-horizontal:var(--size-600)}.--padding-700,.--padding-horizontal-700{--padding-horizontal:var(--size-700)}.--padding-800,.--padding-horizontal-800{--padding-horizontal:var(--size-800)}.--padding-900,.--padding-horizontal-900{--padding-horizontal:var(--size-900)}.--padding-horizontal-inherit,.--padding-inherit{--padding-horizontal:inherit}.--padding-border-width,.--padding-border-width-400,.--padding-border-width-vertical-400{--padding-vertical:var(--border-width-400)}.--padding-border-width-500,.--padding-border-width-vertical-500{--padding-vertical:var(--border-width-500)}.--padding-border-width-600,.--padding-border-width-vertical-600{--padding-vertical:var(--border-width-600)}.--padding-border-width-700,.--padding-border-width-vertical-700{--padding-vertical:var(--border-width-700)}.--padding-0px,.--padding-vertical-0px{--padding-vertical:var(--size-0px)}.--padding-100,.--padding-vertical-100{--padding-vertical:var(--size-100)}.--padding-200,.--padding-vertical-200{--padding-vertical:var(--size-200)}.--padding-300,.--padding-vertical-300{--padding-vertical:var(--size-300)}.--padding-400,.--padding-vertical-400{--padding-vertical:var(--size-400)}.--padding-500,.--padding-vertical-500{--padding-vertical:var(--size-500)}.--padding-600,.--padding-vertical-600{--padding-vertical:var(--size-600)}.--padding-700,.--padding-vertical-700{--padding-vertical:var(--size-700)}.--padding-800,.--padding-vertical-800{--padding-vertical:var(--size-800)}.--padding-900,.--padding-vertical-900{--padding-vertical:var(--size-900)}.--padding-inherit,.--padding-vertical-inherit{--padding-vertical:inherit}.--margin-auto,.--margin-horizontal-auto{--margin-horizontal:auto}.--margin-auto,.--margin-vertical-auto{--margin-vertical:auto}
+.--max-height-full{--max-height:100%}.--max-height-viewport{--max-height:100vh}.--max-width-full{--max-width:100%}.--max-width-viewport{--max-width:100vw}.--min-height-full{--min-height:100%}.--min-height-viewport{--min-height:100vh}.--min-width-full{--min-width:100%}.--min-width-viewport{--min-width:100vw}

package/index.scss

@@ -1,5 +1,2 @@
-@forward './build/scss/components';
-@forward './build/scss/css-utilities';
-
 @forward './src/lib';
 @forward './src/tokens';

package/package.json

@@ -30,13 +30,13 @@
     "scripts": {
         "build": "run-p build:css build:ts",
         "build:css": "run-p build:css:components build:css:css-utilities",
-        "build:css:components": "webpack --config webpack.sass.config.js --env=directory=./src/components --env=entry=index --env=filename=components --env=output=./build/css",
+        "build:css:components": "webpack --config webpack.sass.config.js --env=directory=./src/components --env=entry=index --env=filename=components --env=normalizer=true --env=output=./build/css",
         "build:css:css-utilities": "webpack --config webpack.sass.config.js --env=directory=./src/css-utilities --env=entry=variables --env=filename=css-utilities --env=output=./build/css",
         "build:ts": "tsc && tsc-alias",
-        "--": "--",
+        "-": "-",
         "prepare": "npm run build",
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.29"
+    "version": "0.0.30"
 }

package/webpack.sass.config.js

@@ -7,14 +7,17 @@ const path = require('path');
 const sass = require('sass');
 
 
-module.exports = ({ directory, entry, filename, output, production }) => {
-    directory = path.resolve(directory).replace(/\\/g, '/');
+module.exports = ({ directory, entry, filename, normalizer, output, production }) => {
     filename = filename || 'app';
     output = path.resolve(output).replace(/\\/g, '/');
     production = production !== 'false' ? true : false;
 
     if (directory) {
-        entry = glob.sync(`${directory}/**/scss/${entry}.scss`, { nosort: true });
+        entry = glob.sync(`${path.resolve(directory).replace(/\\/g, '/')}/**/scss/${entry}.scss`, { nosort: true });
+
+        if (normalizer == 'true') {
+            entry.unshift('modern-normalize/modern-normalize.css');
+        }
     }
 
     return {