website-utilities 1.0.436 → 1.0.438

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.compiled.css +1 -1
  2. package/index.scss +87 -92
  3. package/package.json +1 -1
package/index.compiled.css CHANGED
@@ -1 +1 @@
1
- :root{--w-default-space:20px;--w-extra-extra-small-width:360px;--w-extra-small-width:500px;--w-small-width:768px;--w-medium-width:992px;--w-large-width:1200px;--w-theme-background:#fff;--w-theme-primary:#76b82a;--w-theme-on-primary:#f0f6fc;--w-theme-secondary:#238636;--w-theme-on-secondary:#d6e9da;--w-theme-error:#723637;--w-theme-on-error:#fff;--w-theme-surface:#21262d;--w-theme-on-surface:#bbc2ca;--w-typography-font-family:Open Sans,open-sans,sans-serif;--w-typography-font-family-headline:Open Sans Condensed,open-sans-condensed,sans-serif;--w-toggle-mobile-menu-animation-duration:0.25s}website-utilities h1,website-utilities h2,website-utilities h3,website-utilities h4,website-utilities h5,website-utilities h6{font-family:var(--w-typography-font-family,"Open Sans",open-sans,sans-serif);line-height:1.1}website-utilities h1,website-utilities h2{font-family:var(--w-typography-font-family-headline,"Open Sans Condensed",open-sans-condensed,sans-serif);font-weight:400;font-size:3em}website-utilities h2{font-size:2em}website-utilities a,website-utilities a:focus,website-utilities a:hover,website-utilities a:visited{outline:none;-webkit-text-decoration:none;text-decoration:none}website-utilities .wu-action{cursor:pointer}website-utilities .wu-disable-scrolling{height:100%!important;overflow:hidden!important}website-utilities .wu-section-active{display:block}website-utilities .wu-section-inactive{display:none}website-utilities .wu-select{position:relative}website-utilities .wu-select__arrow{position:absolute;top:3px;right:15px;pointer-events:none}website-utilities .wu-select__arrow span{vertical-align:bottom;font-size:10px}website-utilities .wu-select select{position:static!important;padding-left:7px!important;padding-right:25px!important}website-utilities .wu-select select::-ms-expand{display:none}website-utilities .wu-checkbox{margin-top:2px;padding-top:3px}website-utilities .wu-checkbox label{padding-left:40px}website-utilities .wu-checkbox label .wu-checkbox__wrapper{margin-top:-2px;margin-left:-40px;position:absolute}website-utilities .wu-checkbox label .wu-checkbox__wrapper .wu-checkbox__wrapper__styled{border-radius:4px;border:2px solid var(--w-theme-primary,#76b82a);cursor:pointer;float:right;height:25px;padding:0;width:25px}website-utilities .wu-checkbox label .wu-checkbox__wrapper .wu-checkbox__wrapper__styled .wu-checkbox__wrapper__styled__checked{background:transparent;border:3px solid var(--w-theme-on-primary,#f0f6fc);border-top:none;border-right:none;height:8px;left:4px;opacity:0;position:absolute;top:5px;transform:rotate(-45deg);width:13px}website-utilities .wu-checkbox label .wu-checkbox__wrapper input[type=checkbox]{display:none}website-utilities .wu-checkbox label .wu-checkbox__wrapper input[type=checkbox]:checked~.wu-checkbox-styled>.wu-checkbox-styled-checked{opacity:1}website-utilities .wu-checkbox label .wu-checkbox__wrapper input[type=checkbox]:disabled~.wu-checkbox-styled{background-color:var(--w-theme-surface,#21262d)}website-utilities .wu-scroll-to-top{display:block;transition-property:bottom,opacity;transition-duration:.5s;position:fixed;right:var(--w-default-space,20px)}website-utilities .wu-scroll-to-top.wu-scroll-up{bottom:calc(var(--w-default-space, 20px)*3);opacity:0}website-utilities .wu-scroll-to-top.wu-scroll-down{bottom:var(--w-default-space,20px);opacity:1}website-utilities .wu-scroll-to-top.wu-top-settled{display:none}website-utilities .wu-priority-navigation{position:relative;overflow:visible}website-utilities .wu-priority-navigation.wu-priority-navigation--resizing{overflow:hidden}website-utilities .wu-priority-navigation .wu-priority-navigation__list,website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list li{position:relative}website-utilities .wu-priority-navigation .wu-priority-navigation__link{display:inline-block}website-utilities .wu-priority-navigation .wu-priority-navigation__link:after{content:" ";position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box}website-utilities .wu-priority-navigation .wu-priority-navigation__list{list-style:none}website-utilities .wu-priority-navigation .wu-priority-navigation__list li{display:inline-block;position:relative}website-utilities .wu-priority-navigation .wu-priority-navigation__list li.wu-priority-navigation__list__overflow-indicator{display:none}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator{cursor:pointer;width:2rem;height:2rem;position:absolute!important;padding-top:1rem}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title{transition:all var(--w-toggle-mobile-menu-animation-duration);position:absolute;width:2rem;height:2rem}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon{transition:all var(--w-toggle-mobile-menu-animation-duration);position:relative;transform:rotate(0deg);width:30px;height:1px}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after,website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{position:absolute;transition:all var(--w-toggle-mobile-menu-animation-duration);content:"";transform:rotate(0deg);width:30px;height:1px}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{top:-10px}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after{top:10px}website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__overflow-list{height:100%;max-height:400px}website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon{transform:rotate(180deg);background-color:transparent!important}website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after,website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{top:0}website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{transform:rotate(45deg)}website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after{transform:rotate(-45deg)}website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list{transition:all var(--w-toggle-mobile-menu-animation-duration);height:0;max-height:0;width:-moz-max-content;width:max-content;list-style:none;overflow:hidden}website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list ul{list-style:none;padding:0;letter-spacing:.4em}website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list li:first-child{margin-top:0}website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list li{transition:all var(--w-toggle-mobile-menu-animation-duration);margin-top:20px;padding:5px 0;color:#fff}website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list a{padding:8px;cursor:pointer}website-utilities .wu-priority-navigation.wu-priority-navigation--overflow-open .wu-priority-navigation__overflow-list{width:100%}website-utilities .wu-priority-navigation .wu-priority-navigation__list__item--hide{display:none!important}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__list__overflow-indicator{display:inline-block!important}.wu-window-loading-cover{background-color:var(--w-surface-color,#21262d);top:0;left:0;position:fixed;height:100%;width:100%;z-index:1002!important}.wu-window-loading-cover .loading-text{position:absolute;inset:0;margin:auto;text-align:center;width:100%;height:100px;line-height:100px}.wu-window-loading-cover .loading-text span{display:inline-block;margin:0 5px;color:var(--w-on-surface-color,#bbc2ca)}.wu-window-loading-cover .loading-text span:first-child{filter:blur(0);animation:blur-text 1.5s linear 0s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(2){filter:blur(0);animation:blur-text 1.5s linear .2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(3){filter:blur(0);animation:blur-text 1.5s linear .4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(4){filter:blur(0);animation:blur-text 1.5s linear .6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(5){filter:blur(0);animation:blur-text 1.5s linear .8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(6){filter:blur(0);animation:blur-text 1.5s linear 1s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(7){filter:blur(0);animation:blur-text 1.5s linear 1.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(8){filter:blur(0);animation:blur-text 1.5s linear 1.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(9){filter:blur(0);animation:blur-text 1.5s linear 1.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(10){filter:blur(0);animation:blur-text 1.5s linear 1.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(11){filter:blur(0);animation:blur-text 1.5s linear 2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(12){filter:blur(0);animation:blur-text 1.5s linear 2.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(13){filter:blur(0);animation:blur-text 1.5s linear 2.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(14){filter:blur(0);animation:blur-text 1.5s linear 2.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(15){filter:blur(0);animation:blur-text 1.5s linear 2.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(16){filter:blur(0);animation:blur-text 1.5s linear 3s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(17){filter:blur(0);animation:blur-text 1.5s linear 3.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(18){filter:blur(0);animation:blur-text 1.5s linear 3.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(19){filter:blur(0);animation:blur-text 1.5s linear 3.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(20){filter:blur(0);animation:blur-text 1.5s linear 3.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(21){filter:blur(0);animation:blur-text 1.5s linear 4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(22){filter:blur(0);animation:blur-text 1.5s linear 4.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(23){filter:blur(0);animation:blur-text 1.5s linear 4.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(24){filter:blur(0);animation:blur-text 1.5s linear 4.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(25){filter:blur(0);animation:blur-text 1.5s linear 4.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(26){filter:blur(0);animation:blur-text 1.5s linear 5s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(27){filter:blur(0);animation:blur-text 1.5s linear 5.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(28){filter:blur(0);animation:blur-text 1.5s linear 5.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(29){filter:blur(0);animation:blur-text 1.5s linear 5.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(30){filter:blur(0);animation:blur-text 1.5s linear 5.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(31){filter:blur(0);animation:blur-text 1.5s linear 6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(32){filter:blur(0);animation:blur-text 1.5s linear 6.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(33){filter:blur(0);animation:blur-text 1.5s linear 6.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(34){filter:blur(0);animation:blur-text 1.5s linear 6.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(35){filter:blur(0);animation:blur-text 1.5s linear 6.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(36){filter:blur(0);animation:blur-text 1.5s linear 7s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(37){filter:blur(0);animation:blur-text 1.5s linear 7.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(38){filter:blur(0);animation:blur-text 1.5s linear 7.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(39){filter:blur(0);animation:blur-text 1.5s linear 7.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(40){filter:blur(0);animation:blur-text 1.5s linear 7.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(41){filter:blur(0);animation:blur-text 1.5s linear 8s infinite alternate}::view-transition-old(wu-menu-highlight){height:100%}::view-transition-new(wu-menu-highlight){height:100%}@keyframes blur-text{0%{filter:blur(0)}to{filter:blur(4px)}}
1
+ :root{--wu-default-space:20px;--wu-overflow-navigation-height-estimation:400px;--wu-extra-extra-small-width:360px;--wu-extra-small-width:500px;--wu-small-width:768px;--wu-medium-width:992px;--wu-large-width:1200px;--wu-theme-background:#fff;--wu-theme-primary:#76b82a;--wu-theme-on-primary:#f0f6fc;--wu-theme-secondary:#238636;--wu-theme-on-secondary:#d6e9da;--wu-theme-error:#723637;--wu-theme-on-error:#fff;--wu-theme-surface:#21262d;--wu-theme-on-surface:#bbc2ca;--wu-typography-font-family:Open Sans,open-sans,sans-serif;--wu-typography-font-family-headline:Open Sans Condensed,open-sans-condensed,sans-serif;--wu-toggle-mobile-menu-animation-duration:0.25s}website-utilities h1,website-utilities h2,website-utilities h3,website-utilities h4,website-utilities h5,website-utilities h6{font-family:var(--wu-typography-font-family,"Open Sans",open-sans,sans-serif);line-height:1.1}website-utilities h1,website-utilities h2{font-family:var(--wu-typography-font-family-headline,"Open Sans Condensed",open-sans-condensed,sans-serif);font-weight:400;font-size:3em}website-utilities h2{font-size:2em}website-utilities a,website-utilities a:focus,website-utilities a:hover,website-utilities a:visited{outline:none;-webkit-text-decoration:none;text-decoration:none}website-utilities .wu-action{cursor:pointer}website-utilities .wu-disable-scrolling{height:100%!important;overflow:hidden!important}website-utilities .wu-section-active{display:block}website-utilities .wu-section-inactive{display:none}website-utilities .wu-select{position:relative}website-utilities .wu-select__arrow{position:absolute;top:3px;right:15px;pointer-events:none}website-utilities .wu-select__arrow span{vertical-align:bottom;font-size:10px}website-utilities .wu-select select{position:static!important;padding-left:7px!important;padding-right:25px!important}website-utilities .wu-select select::-ms-expand{display:none}website-utilities .wu-checkbox{margin-top:2px;padding-top:3px}website-utilities .wu-checkbox label{padding-left:40px}website-utilities .wu-checkbox label .wu-checkbox__wrapper{margin-top:-2px;margin-left:-40px;position:absolute}website-utilities .wu-checkbox label .wu-checkbox__wrapper .wu-checkbox__wrapper__styled{border-radius:4px;border:2px solid var(--wu-theme-primary,#76b82a);cursor:pointer;float:right;height:25px;padding:0;width:25px}website-utilities .wu-checkbox label .wu-checkbox__wrapper .wu-checkbox__wrapper__styled .wu-checkbox__wrapper__styled__checked{background:transparent;border:3px solid var(--wu-theme-on-primary,#f0f6fc);border-top:none;border-right:none;height:8px;left:4px;opacity:0;position:absolute;top:5px;transform:rotate(-45deg);width:13px}website-utilities .wu-checkbox label .wu-checkbox__wrapper input[type=checkbox]{display:none}website-utilities .wu-checkbox label .wu-checkbox__wrapper input[type=checkbox]:checked~.wu-checkbox-styled>.wu-checkbox-styled-checked{opacity:1}website-utilities .wu-checkbox label .wu-checkbox__wrapper input[type=checkbox]:disabled~.wu-checkbox-styled{background-color:var(--wu-theme-surface,#21262d)}website-utilities .wu-scroll-to-top{display:block;transition-property:bottom,opacity;transition-duration:.5s;position:fixed;right:var(--wu-default-space,20px)}website-utilities .wu-scroll-to-top.wu-scroll-up{bottom:calc(var(--wu-default-space, 20px)*3);opacity:0}website-utilities .wu-scroll-to-top.wu-scroll-down{bottom:var(--wu-default-space,20px);opacity:1}website-utilities .wu-scroll-to-top.wu-top-settled{display:none}website-utilities .wu-priority-navigation{position:relative;overflow:visible}website-utilities .wu-priority-navigation.wu-priority-navigation--resizing{overflow:hidden}website-utilities .wu-priority-navigation .wu-priority-navigation__list,website-utilities .wu-priority-navigation .wu-priority-navigation__overflow-list li{position:relative}website-utilities .wu-priority-navigation .wu-priority-navigation__link{display:inline-block}website-utilities .wu-priority-navigation .wu-priority-navigation__link:after{content:" ";position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box}website-utilities .wu-priority-navigation .wu-priority-navigation__list{list-style:none}website-utilities .wu-priority-navigation .wu-priority-navigation__list li{display:inline-block;position:relative}website-utilities .wu-priority-navigation .wu-priority-navigation__list li.wu-priority-navigation__list__overflow-indicator{display:none}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator{cursor:pointer;width:2rem;height:2rem;position:absolute!important;padding-top:1rem}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title{transition:all var(--wu-toggle-mobile-menu-animation-duration);position:absolute;width:2rem;height:2rem}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon{transition:all var(--wu-toggle-mobile-menu-animation-duration);position:relative;transform:rotate(0deg);width:30px;height:1px}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after,website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{position:absolute;transition:all var(--wu-toggle-mobile-menu-animation-duration);content:"";transform:rotate(0deg);width:30px;height:1px}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{top:-10px}website-utilities .wu-priority-navigation .wu-priority-navigation__list .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after{top:10px}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__overflow-list{transition:all var(--wu-toggle-mobile-menu-animation-duration);height:0;max-height:0;width:-moz-max-content;width:max-content;list-style:none;overflow:hidden}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__overflow-list ul{list-style:none;padding:0;letter-spacing:.4em}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__overflow-list li:first-child{margin-top:0}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__overflow-list li{transition:all var(--wu-toggle-mobile-menu-animation-duration);color:#fff}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__overflow-list a{cursor:pointer}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator .wu-priority-navigation__list__overflow-indicator{display:inline-block!important}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator.wu-priority-navigation--overflow-open .wu-priority-navigation__overflow-list{height:100%;width:100%;max-height:var(--wu-overflow-navigation-height-estimation)}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon{transform:rotate(180deg);background-color:transparent!important}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after,website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{top:0}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:before{transform:rotate(45deg)}website-utilities .wu-priority-navigation.wu-priority-navigation--show-overflow-indicator.wu-priority-navigation--overflow-open .wu-priority-navigation__list__overflow-indicator .wu-priority-navigation__list__overflow-indicator__title .wu-priority-navigation__list__overflow-indicator__title__icon:after{transform:rotate(-45deg)}website-utilities .wu-priority-navigation .wu-priority-navigation__list__item--hide{display:none!important}.wu-window-loading-cover{background-color:var(--wu-surface-color,#21262d);top:0;left:0;position:fixed;height:100%;width:100%;z-index:1002!important}.wu-window-loading-cover .loading-text{position:absolute;inset:0;margin:auto;text-align:center;width:100%;height:100px;line-height:100px}.wu-window-loading-cover .loading-text span{display:inline-block;margin:0 5px;color:var(--wu-on-surface-color,#bbc2ca)}.wu-window-loading-cover .loading-text span:first-child{filter:blur(0);animation:blur-text 1.5s linear 0s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(2){filter:blur(0);animation:blur-text 1.5s linear .2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(3){filter:blur(0);animation:blur-text 1.5s linear .4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(4){filter:blur(0);animation:blur-text 1.5s linear .6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(5){filter:blur(0);animation:blur-text 1.5s linear .8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(6){filter:blur(0);animation:blur-text 1.5s linear 1s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(7){filter:blur(0);animation:blur-text 1.5s linear 1.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(8){filter:blur(0);animation:blur-text 1.5s linear 1.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(9){filter:blur(0);animation:blur-text 1.5s linear 1.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(10){filter:blur(0);animation:blur-text 1.5s linear 1.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(11){filter:blur(0);animation:blur-text 1.5s linear 2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(12){filter:blur(0);animation:blur-text 1.5s linear 2.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(13){filter:blur(0);animation:blur-text 1.5s linear 2.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(14){filter:blur(0);animation:blur-text 1.5s linear 2.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(15){filter:blur(0);animation:blur-text 1.5s linear 2.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(16){filter:blur(0);animation:blur-text 1.5s linear 3s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(17){filter:blur(0);animation:blur-text 1.5s linear 3.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(18){filter:blur(0);animation:blur-text 1.5s linear 3.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(19){filter:blur(0);animation:blur-text 1.5s linear 3.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(20){filter:blur(0);animation:blur-text 1.5s linear 3.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(21){filter:blur(0);animation:blur-text 1.5s linear 4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(22){filter:blur(0);animation:blur-text 1.5s linear 4.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(23){filter:blur(0);animation:blur-text 1.5s linear 4.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(24){filter:blur(0);animation:blur-text 1.5s linear 4.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(25){filter:blur(0);animation:blur-text 1.5s linear 4.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(26){filter:blur(0);animation:blur-text 1.5s linear 5s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(27){filter:blur(0);animation:blur-text 1.5s linear 5.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(28){filter:blur(0);animation:blur-text 1.5s linear 5.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(29){filter:blur(0);animation:blur-text 1.5s linear 5.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(30){filter:blur(0);animation:blur-text 1.5s linear 5.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(31){filter:blur(0);animation:blur-text 1.5s linear 6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(32){filter:blur(0);animation:blur-text 1.5s linear 6.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(33){filter:blur(0);animation:blur-text 1.5s linear 6.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(34){filter:blur(0);animation:blur-text 1.5s linear 6.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(35){filter:blur(0);animation:blur-text 1.5s linear 6.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(36){filter:blur(0);animation:blur-text 1.5s linear 7s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(37){filter:blur(0);animation:blur-text 1.5s linear 7.2s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(38){filter:blur(0);animation:blur-text 1.5s linear 7.4s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(39){filter:blur(0);animation:blur-text 1.5s linear 7.6s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(40){filter:blur(0);animation:blur-text 1.5s linear 7.8s infinite alternate}.wu-window-loading-cover .loading-text span:nth-child(41){filter:blur(0);animation:blur-text 1.5s linear 8s infinite alternate}::view-transition-old(wu-menu-highlight){height:100%}::view-transition-new(wu-menu-highlight){height:100%}@keyframes blur-text{0%{filter:blur(0)}to{filter:blur(4px)}}
package/index.scss CHANGED
@@ -15,41 +15,42 @@ endregion
15
15
 
16
16
  :root {
17
17
  /* region custom-properties */
18
- --w-default-space: #{v.$default-space};
18
+ --wu-default-space: #{v.$default-space};
19
+ --wu-overflow-navigation-height-estimation: 400px;
19
20
  /** region dimensions */
20
- --w-extra-extra-small-width: #{v.$extra-extra-small-width};
21
- --w-extra-small-width: #{v.$extra-small-width};
22
- --w-small-width: #{v.$small-width};
23
- --w-medium-width: #{v.$medium-width};
24
- --w-large-width: #{v.$large-width};
21
+ --wu-extra-extra-small-width: #{v.$extra-extra-small-width};
22
+ --wu-extra-small-width: #{v.$extra-small-width};
23
+ --wu-small-width: #{v.$small-width};
24
+ --wu-medium-width: #{v.$medium-width};
25
+ --wu-large-width: #{v.$large-width};
25
26
  /*** region extra small dimension */
26
- @custom-media --w-extra-extra-small
27
+ @custom-media --wu-extra-extra-small
27
28
  (min-width: #{v.$extra-extra-small-width});
28
- @custom-media --w-extra-small (min-width: #{v.$extra-small-width});
29
+ @custom-media --wu-extra-small (min-width: #{v.$extra-small-width});
29
30
  /*** endregion */
30
31
  /*** region default media query dimensions */
31
- @custom-media --w-small (min-width: #{v.$small-width});
32
- @custom-media --w-medium (min-width: #{v.$medium-width});
33
- @custom-media --w-large (min-width: #{v.$large-width});
32
+ @custom-media --wu-small (min-width: #{v.$small-width});
33
+ @custom-media --wu-medium (min-width: #{v.$medium-width});
34
+ @custom-media --wu-large (min-width: #{v.$large-width});
34
35
  /*** endregion */
35
36
  /** endregion */
36
37
  /** region color */
37
- --w-theme-background: #{v.$theme-background};
38
- --w-theme-primary: #{v.$theme-primary};
39
- --w-theme-on-primary: #{v.$theme-on-primary};
40
- --w-theme-secondary: #{v.$theme-secondary};
41
- --w-theme-on-secondary: #{v.$theme-on-secondary};
42
- --w-theme-error: #{v.$theme-error};
43
- --w-theme-on-error: #{v.$theme-on-error};
44
- --w-theme-surface: #{v.$theme-surface};
45
- --w-theme-on-surface: #{v.$theme-on-surface};
38
+ --wu-theme-background: #{v.$theme-background};
39
+ --wu-theme-primary: #{v.$theme-primary};
40
+ --wu-theme-on-primary: #{v.$theme-on-primary};
41
+ --wu-theme-secondary: #{v.$theme-secondary};
42
+ --wu-theme-on-secondary: #{v.$theme-on-secondary};
43
+ --wu-theme-error: #{v.$theme-error};
44
+ --wu-theme-on-error: #{v.$theme-on-error};
45
+ --wu-theme-surface: #{v.$theme-surface};
46
+ --wu-theme-on-surface: #{v.$theme-on-surface};
46
47
  /** endregion */
47
48
  /** region font */
48
- --w-typography-font-family: #{v.$typography-font-family};
49
- --w-typography-font-family-headline: #{v.$typography-font-family-headline};
49
+ --wu-typography-font-family: #{v.$typography-font-family};
50
+ --wu-typography-font-family-headline: #{v.$typography-font-family-headline};
50
51
  /** endregion */
51
52
  /** region animation */
52
- --w-toggle-mobile-menu-animation-duration: 0.25s;
53
+ --wu-toggle-mobile-menu-animation-duration: 0.25s;
53
54
  /** endregion */
54
55
  /* endregion */
55
56
  }
@@ -63,14 +64,14 @@ website-utilities {
63
64
  h4,
64
65
  h5,
65
66
  h6 {
66
- font-family: var(--w-typography-font-family, v.$typography-font-family);
67
+ font-family: var(--wu-typography-font-family, v.$typography-font-family);
67
68
  line-height: 1.1;
68
69
  }
69
70
 
70
71
  h1,
71
72
  h2 {
72
73
  font-family: var(
73
- --w-typography-font-family-headline,
74
+ --wu-typography-font-family-headline,
74
75
  v.$typography-font-family-headline
75
76
  );
76
77
  font-weight: normal;
@@ -152,7 +153,7 @@ website-utilities {
152
153
 
153
154
  .wu-checkbox__wrapper__styled {
154
155
  border-radius: 4px;
155
- border: 2px solid var(--w-theme-primary, v.$theme-primary);
156
+ border: 2px solid var(--wu-theme-primary, v.$theme-primary);
156
157
  cursor: pointer;
157
158
  float: right;
158
159
  height: 25px;
@@ -161,7 +162,7 @@ website-utilities {
161
162
 
162
163
  .wu-checkbox__wrapper__styled__checked {
163
164
  background: transparent;
164
- border: 3px solid var(--w-theme-on-primary, v.$theme-on-primary);
165
+ border: 3px solid var(--wu-theme-on-primary, v.$theme-on-primary);
165
166
  border-top: none;
166
167
  border-right: none;
167
168
  height: 8px;
@@ -182,7 +183,7 @@ website-utilities {
182
183
  }
183
184
 
184
185
  &:disabled ~ .wu-checkbox-styled {
185
- background-color: var(--w-theme-surface, v.$theme-surface);
186
+ background-color: var(--wu-theme-surface, v.$theme-surface);
186
187
  }
187
188
  }
188
189
  }
@@ -200,16 +201,16 @@ website-utilities {
200
201
 
201
202
  position: fixed;
202
203
 
203
- right: var(--w-default-space, #{v.$default-space});
204
+ right: var(--wu-default-space, #{v.$default-space});
204
205
  }
205
206
 
206
207
  .wu-scroll-to-top.wu-scroll-up {
207
- bottom: calc(3 * var(--w-default-space, #{v.$default-space}));
208
+ bottom: calc(3 * var(--wu-default-space, #{v.$default-space}));
208
209
  opacity: 0;
209
210
  }
210
211
 
211
212
  .wu-scroll-to-top.wu-scroll-down {
212
- bottom: var(--w-default-space, #{v.$default-space});
213
+ bottom: var(--wu-default-space, #{v.$default-space});
213
214
  opacity: 1;
214
215
  }
215
216
 
@@ -276,7 +277,7 @@ website-utilities {
276
277
  padding-top: 1rem;
277
278
 
278
279
  .wu-priority-navigation__list__overflow-indicator__title {
279
- transition: all var(--w-toggle-mobile-menu-animation-duration);
280
+ transition: all var(--wu-toggle-mobile-menu-animation-duration);
280
281
 
281
282
  position: absolute;
282
283
 
@@ -284,7 +285,7 @@ website-utilities {
284
285
  height: 2rem;
285
286
 
286
287
  .wu-priority-navigation__list__overflow-indicator__title__icon {
287
- transition: all var(--w-toggle-mobile-menu-animation-duration);
288
+ transition: all var(--wu-toggle-mobile-menu-animation-duration);
288
289
 
289
290
  position: relative;
290
291
  transform: rotate(0deg);
@@ -295,7 +296,7 @@ website-utilities {
295
296
  &::before,
296
297
  &::after {
297
298
  position: absolute;
298
- transition: all var(--w-toggle-mobile-menu-animation-duration);
299
+ transition: all var(--wu-toggle-mobile-menu-animation-duration);
299
300
  content: '';
300
301
 
301
302
  transform: rotate(0deg);
@@ -316,89 +317,83 @@ website-utilities {
316
317
  }
317
318
  }
318
319
 
319
- &.wu-priority-navigation--overflow-open {
320
+ &.wu-priority-navigation--show-overflow-indicator {
320
321
  .wu-priority-navigation__overflow-list {
321
- height: 100%;
322
- /*
323
- NOTE: Workaround to enable transition. This value should
324
- represent an upper bound for the maximum overflow menu
325
- height.
326
- */
327
- max-height: 400px;
328
- }
322
+ transition: all var(--wu-toggle-mobile-menu-animation-duration);
323
+ height: 0;
324
+ max-height: 0;
325
+ width: max-content;
329
326
 
330
- .wu-priority-navigation__list__overflow-indicator
331
- .wu-priority-navigation__list__overflow-indicator__title
332
- .wu-priority-navigation__list__overflow-indicator__title__icon {
333
- transform: rotate(180deg);
334
- background-color: transparent !important;
327
+ list-style: none;
328
+ overflow: hidden;
335
329
 
336
- &::before,
337
- &::after {
338
- top: 0;
330
+ ul {
331
+ list-style: none;
332
+ padding: 0;
333
+ letter-spacing: 0.4em;
339
334
  }
340
335
 
341
- &::before {
342
- transform: rotate(45deg);
336
+ li:first-child {
337
+ margin-top: 0;
343
338
  }
344
339
 
345
- &::after {
346
- transform: rotate(-45deg);
340
+ li {
341
+ transition: all var(--wu-toggle-mobile-menu-animation-duration);
342
+ color: white;
343
+ }
344
+
345
+ a {
346
+ cursor: pointer;
347
347
  }
348
348
  }
349
- }
350
349
 
351
- .wu-priority-navigation__overflow-list {
352
- transition: all var(--w-toggle-mobile-menu-animation-duration);
353
- height: 0;
354
- max-height: 0;
355
- width: max-content;
350
+ .wu-priority-navigation__list__overflow-indicator {
351
+ display: inline-block !important;
352
+ }
356
353
 
357
- list-style: none;
358
- overflow: hidden;
354
+ &.wu-priority-navigation--overflow-open {
355
+ .wu-priority-navigation__overflow-list {
356
+ height: 100%;
357
+ width: 100%;
358
+ /*
359
+ NOTE: Workaround to enable transition. This value should
360
+ represent an upper bound for the maximum overflow menu
361
+ height.
362
+ */
363
+ max-height: var(--wu-overflow-navigation-height-estimation);
364
+ }
359
365
 
360
- & ul {
361
- list-style: none;
362
- padding: 0;
363
- letter-spacing: 0.4em;
364
- }
366
+ .wu-priority-navigation__list__overflow-indicator
367
+ .wu-priority-navigation__list__overflow-indicator__title
368
+ .wu-priority-navigation__list__overflow-indicator__title__icon {
369
+ transform: rotate(180deg);
370
+ background-color: transparent !important;
365
371
 
366
- & li:first-child {
367
- margin-top: 0;
368
- }
372
+ &::before,
373
+ &::after {
374
+ top: 0;
375
+ }
369
376
 
370
- & li {
371
- transition: all var(--w-toggle-mobile-menu-animation-duration);
372
- margin-top: 20px;
373
- padding: 5px 0;
374
- color: white;
375
- }
377
+ &::before {
378
+ transform: rotate(45deg);
379
+ }
376
380
 
377
- & a {
378
- padding: 8px;
379
- cursor: pointer;
381
+ &::after {
382
+ transform: rotate(-45deg);
383
+ }
384
+ }
380
385
  }
381
386
  }
382
387
 
383
- &.wu-priority-navigation--overflow-open
384
- .wu-priority-navigation__overflow-list {
385
- width: 100%;
386
- }
387
-
388
388
  .wu-priority-navigation__list__item--hide {
389
389
  display: none !important;
390
390
  }
391
-
392
- &.wu-priority-navigation--show-overflow-indicator
393
- .wu-priority-navigation__list__overflow-indicator {
394
- display: inline-block !important;
395
- }
396
391
  }
397
392
  /* endregion */
398
393
  }
399
394
  /* Overlay the whole page till everything is loaded completely. */
400
395
  .wu-window-loading-cover {
401
- background-color: var(--w-surface-color, v.$theme-surface);
396
+ background-color: var(--wu-surface-color, v.$theme-surface);
402
397
  top: 0;
403
398
  left: 0;
404
399
  /* always cover full viewport */
@@ -420,7 +415,7 @@ website-utilities {
420
415
  span {
421
416
  display: inline-block;
422
417
  margin: 0 5px;
423
- color: var(--w-on-surface-color, v.$theme-on-surface);
418
+ color: var(--wu-on-surface-color, v.$theme-on-surface);
424
419
 
425
420
  @for $i from 0 through 40 {
426
421
  &:nth-child(#{$i + 1}) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "website-utilities",
3
- "version": "1.0.436",
3
+ "version": "1.0.438",
4
4
  "description": "extend your web app",
5
5
  "keywords": [
6
6
  "website",