anycode-components
Version:
anycode-components (RiotJS Tag Library) - A set of common RiotJS tags used by Anycode
2 lines • 55.9 kB
JavaScript
!function(i,t){"function"==typeof define&&define.amd?define(["exports","riot","classlist-polyfill"],function(e,n){t(i.anycodeComponents=e,n)}):"object"==typeof exports?t(exports,require("riot"),require("classlist-polyfill")):t(i.anycodeComponents={},i.riot)}(this,function(i,t){t.tag2("anycode-ga","","","",function(i){this.gaTrackingCode=i.gaTrackingCode||"UA-69299537-1",this.gaId=i.gaId||window.location.host+window.location.pathname+window.location.hash,this.on("mount",function(){"undefined"==typeof ga&&!function(i,t,e,n,o,a,c){i.GoogleAnalyticsObject=o,i[o]=i[o]||function(){(i[o].q=i[o].q||[]).push(arguments)},i[o].l=1*new Date,a=t.createElement(e),c=t.getElementsByTagName(e)[0],a.async=1,a.src=n,c.parentNode.insertBefore(a,c)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create",this.gaTrackingCode,"auto"),ga("send","pageview",this.gaId)})}),t.tag2("iconic-announcement",'<div class="loader"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70px" height="70px" viewbox="0 0 500 500"> <path name="loader" transform="translate(250, 250) scale(4.2)"></path> </svg> </div> <iconic-button class="close" onclick="{hide}">×</iconic-button> <div class="badge"> <i class="{opts.icon}"></i> </div> <div class="content" onclick="{wait}"> <yield></yield> </div>','iconic-announcement,[riot-tag="iconic-announcement"],[data-is="iconic-announcement"]{ display: block; position: fixed; top: -16rem; left: 0; right: 0; height: 8rem; transition: all 300ms ease-in-out; overflow: hidden; z-index: 200; } iconic-announcement.show,[riot-tag="iconic-announcement"].show,[data-is="iconic-announcement"].show{ top: 0rem; } iconic-announcement .close,[riot-tag="iconic-announcement"] .close,[data-is="iconic-announcement"] .close{ color: rgba(255,255,255,0.6); float: right; width: 8rem; height: 8rem; border: none; } iconic-announcement .close:hover,[riot-tag="iconic-announcement"] .close:hover,[data-is="iconic-announcement"] .close:hover{ color: rgba(255,255,255,0.6); } iconic-announcement .close div[name="text"],[riot-tag="iconic-announcement"] .close div[name="text"],[data-is="iconic-announcement"] .close div[name="text"]{ font-weight: 600; font-size: 10rem; line-height: 5.5rem; } iconic-announcement .badge,[riot-tag="iconic-announcement"] .badge,[data-is="iconic-announcement"] .badge{ padding: 1rem; position: relative; height: 6rem; width: 6rem; font-size: 6rem; line-height: 5rem; } iconic-announcement .content,[riot-tag="iconic-announcement"] .content,[data-is="iconic-announcement"] .content{ position: absolute; height: 6rem; top: 0rem; left: 8rem; width: auto; right: 8rem; font-size: 1.8rem; font-weight: bolder; padding:1rem; display: table-cell; vertical-align: middle; } iconic-announcement .loader,[riot-tag="iconic-announcement"] .loader,[data-is="iconic-announcement"] .loader{ padding: 0.5rem; position: absolute; top: 0; right: 0; height: 7rem; width: 7rem; } iconic-announcement path[name="loader"],[riot-tag="iconic-announcement"] path[name="loader"],[data-is="iconic-announcement"] path[name="loader"]{ fill: rgba(0, 0, 0, 0.5); }',"",function(i){function t(){r=0,c.setAttribute("d","M 0 0 v -250 A 250 250 1 0 1 0 -250 z")}function e(){r++,r%=360;var i=r*Math.PI/180,t=250*Math.sin(i),n=Math.cos(i)*-250,s=r>180?1:0,d="M 0 0 v -250 A 250 250 1 "+s+" 1 "+t+" "+n+" z";c.setAttribute("d",d),0!=r&&(o=setTimeout(e,a))}var n,o,a,c,s=1e4,r=0;this.wait=function(){t(),clearTimeout(o),clearTimeout(n)},this.on("mount",function(){c=this.loader,border=this.border}),this.show=function(i){this.hide(),a=Math.floor((parseInt(i-250,10)||s-250)/360),this.root.classList.add("show"),i?(this.loader.style.display="block",t(),clearTimeout(o),clearTimeout(n),e(),n=setTimeout(function(){this.hide()}.bind(this),i||s)):this.loader.style.display="none"}.bind(this),this.hide=function(){t(),clearTimeout(o),clearTimeout(n),this.root.classList.remove("show")}.bind(this)}),t.tag2("iconic-button",'<div name="container" class="inner"> <div name="text"><yield></yield></div> <div name="hotkey">{keyHelp[0]}</div> </div>','iconic-button,[riot-tag="iconic-button"],[data-is="iconic-button"]{ display: inline-block; position: relative; cursor: pointer; } iconic-button .inner,[riot-tag="iconic-button"] .inner,[data-is="iconic-button"] .inner{ line-height: 2.6rem; } iconic-button .inner i,[riot-tag="iconic-button"] .inner i,[data-is="iconic-button"] .inner i{ vertical-align: middle; } iconic-button div[name="hotkey"],[riot-tag="iconic-button"] div[name="hotkey"],[data-is="iconic-button"] div[name="hotkey"]{ position: absolute; display: block; opacity: 0; background: rgba(255,255,255,1); border: 1px solid rgba(0,0,0,0.2); line-height: 2.6rem; position: absolute; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; color: rgba(0,0,0,0.8); font-weight: 600; text-align: center; vertical-align: center; transition: all 200ms ease-in-out; transition-delay: 0ms; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 0%; font-size: 100%; } iconic-button div[name="hotkey"].help,[riot-tag="iconic-button"] div[name="hotkey"].help,[data-is="iconic-button"] div[name="hotkey"].help{ opacity: 1; }',"",function(i){this.on("mount",function(){this.root.classList.add("button"),this.root.classList.add("icon-extra-small"),this.keyHelp=[],document.body.addEventListener("keypress",function(i){i=i||window.event;var t=i.which,e=i.target.nodeName.toUpperCase();return 0===t||"TRUE"===i.target.contentEditable.toUpperCase()||"TEXTAREA"===e||"INPUT"===e||(this.keyHelp&&this.keyHelp.indexOf(String.fromCharCode(t))>-1?(this.activated=t,!1):void 0)}.bind(this)),document.body.addEventListener("keyup",function(i){i=i||window.event;var t=i.which,e=i.target.nodeName.toUpperCase();if(0===t||"TRUE"===i.target.contentEditable.toUpperCase()||"TEXTAREA"===e||"INPUT"===e)return!0;var n=function(){this.activated&&(this.activated=!1,this.container.classList.add("activated"),this.root.click(),setTimeout(function(){this.container.classList.remove("activated")}.bind(this),600))}.bind(this);this.hotkey.classList.contains("help")?(n(),setTimeout(function(){this.hotkey.classList.remove("help")}.bind(this),200)):n()}.bind(this)),document.body.addEventListener("keydown",function(i){i=i||window.event;var t=i.which,e=i.target.nodeName.toUpperCase();return 0===t||"TRUE"===i.target.contentEditable.toUpperCase()||"TEXTAREA"===e||"INPUT"===e||(i.shiftKey&&i.ctrlKey&&this.keyHelp?this.hotkey.classList.add("help"):this.hotkey.classList.remove("help"),!0)}.bind(this))}),this.on("mount update",function(){this.keyHelp=i.hotkey||void 0})}),t.tag2("iconic-dropdown",'<div name="dd" class="dd"> <div name="ddTrigger" onclick="{onTriggerClick}" class="dd-trigger opener u-nd"><yield from="trigger"></yield></div> <div name="ddContent" class="dd-content"> <yield from="links"></yield> </div> </div>','iconic-dropdown,[riot-tag="iconic-dropdown"],[data-is="iconic-dropdown"]{ display: inline-block; } iconic-dropdown .dd,[riot-tag="iconic-dropdown"] .dd,[data-is="iconic-dropdown"] .dd{ position: relative; display: inline-block; } iconic-dropdown .dd-trigger,[riot-tag="iconic-dropdown"] .dd-trigger,[data-is="iconic-dropdown"] .dd-trigger{ border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; cursor: pointer; font-size: 1.2rem; height: auto; letter-spacing: 0; line-height: 2.8rem; min-width: 3rem; padding:0; text-align: center; vertical-align: top; } iconic-dropdown .dd-trigger i,[riot-tag="iconic-dropdown"] .dd-trigger i,[data-is="iconic-dropdown"] .dd-trigger i{ padding-left: 0.8rem; } iconic-dropdown .dd-trigger span,[riot-tag="iconic-dropdown"] .dd-trigger span,[data-is="iconic-dropdown"] .dd-trigger span{ padding-left: 0.8rem; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } iconic-dropdown .dd-trigger i:only-child,[riot-tag="iconic-dropdown"] .dd-trigger i:only-child,[data-is="iconic-dropdown"] .dd-trigger i:only-child{ padding: 0; line-height: 2.4rem; top: 0.2rem; left: -0.05rem; position: relative; } iconic-dropdown .dd-trigger i + span,[riot-tag="iconic-dropdown"] .dd-trigger i + span,[data-is="iconic-dropdown"] .dd-trigger i + span{ padding-left: 0.5rem; padding-right: 0.8rem } iconic-dropdown .dd-trigger span + i,[riot-tag="iconic-dropdown"] .dd-trigger span + i,[data-is="iconic-dropdown"] .dd-trigger span + i{ padding-right: 0.8rem } iconic-dropdown .dd-content input[type="checkbox"],[riot-tag="iconic-dropdown"] .dd-content input[type="checkbox"],[data-is="iconic-dropdown"] .dd-content input[type="checkbox"],iconic-dropdown .dd-content input[type="radio"],[riot-tag="iconic-dropdown"] .dd-content input[type="radio"],[data-is="iconic-dropdown"] .dd-content input[type="radio"]{ display: inline-block; margin-top:0.5rem; margin-bottom: 0; padding-bottom: 0; } iconic-dropdown .dd-content .interactive,[riot-tag="iconic-dropdown"] .dd-content .interactive,[data-is="iconic-dropdown"] .dd-content .interactive{ padding-top:0.5rem; padding-bottom:0.5rem; } iconic-dropdown .dd-content label,[riot-tag="iconic-dropdown"] .dd-content label,[data-is="iconic-dropdown"] .dd-content label{ display: inline-block; position: absolute; padding: 0.6rem 1rem 0.5rem 2.7rem; font-size: 1.2rem; text-transform: uppercase; font-weight: 300; margin-top: -0.4rem; width: auto; left: 0; right: 0; white-space: normal; height: auto; clear: both; } iconic-dropdown .dd-content a,[riot-tag="iconic-dropdown"] .dd-content a,[data-is="iconic-dropdown"] .dd-content a{ padding-left:2.7rem; } iconic-dropdown .dd-content a,[riot-tag="iconic-dropdown"] .dd-content a,[data-is="iconic-dropdown"] .dd-content a,iconic-dropdown .dd-content item,[riot-tag="iconic-dropdown"] .dd-content item,[data-is="iconic-dropdown"] .dd-content item{ display: block; padding: 0.7rem 1rem; font-size: 1.2rem; text-transform: uppercase; } iconic-dropdown .dd-content .interactive label,[riot-tag="iconic-dropdown"] .dd-content .interactive label,[data-is="iconic-dropdown"] .dd-content .interactive label,iconic-dropdown .dd-content .interactive span,[riot-tag="iconic-dropdown"] .dd-content .interactive span,[data-is="iconic-dropdown"] .dd-content .interactive span{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } iconic-dropdown .dd-content,[riot-tag="iconic-dropdown"] .dd-content,[data-is="iconic-dropdown"] .dd-content{ display: none; } iconic-dropdown .open .dd-content,[riot-tag="iconic-dropdown"] .open .dd-content,[data-is="iconic-dropdown"] .open .dd-content{ display:block; }',"",function(i){this.contentClickable=!!i.contentClickable,this.onTriggerClick=function(i){this.ddContent.style.minWidth=this.ddTrigger.clientWidth+"px",this.dd.classList.toggle("open"),this.ddTrigger.clientWidth<this.ddContent.clientWidth?this.dd.classList.add("oversize"):this.dd.classList.remove("oversize")}.bind(this),this.onWindowClick=function(i){for(var t=i.target,e=i.target;t&&!t.classList.contains("dd-trigger");)t=t.parentElement;for(;e&&!e.classList.contains("interactive");)e=e.parentElement;t&&t==this.ddTrigger||e||this.dd.classList.remove("open")},this.on("mount",function(){window.addEventListener("click",this.onWindowClick.bind(this),!1)}),this.on("unmount",function(){window.removeEventListener("click",this.onWindowClick.bind(this),!1)})}),t.tag2("iconic-footer",'<article class="{\'u-pn\': pageHasNavigation}"> <div class="container"> <div class="row"> <div class="twelve columns links"> <i class="f-brand icon-anycode-badge"></i> <p class="f-tagline u-center-text">Create, Inspire, Be Anything.</p> <yield></yield> <div class="copy u-center-text"> copyright © 2015-{year} <em>{opts.product}</em> is a product of Anycode </div> </div> </div> <div class="row"> <div class="columns twelve"> <div class="tested-with u-center-text"> <a class="browser-stack" href="https://www.browserstack.com/" target="_blank"><span>Tested with</span> <img src="https://d3but80xmlhqzj.cloudfront.net/production/images/static/header/header-logo.svg?1451465607"></a> </div> </div> </div> </div> <anycode-ga ga-tracking-code="{opts.gaTrackingCode}"></anycode-ga> <article>','iconic-footer,[riot-tag="iconic-footer"],[data-is="iconic-footer"]{ display: block; margin: 0; height: auto; padding: 0; position: relative; transition: all 200ms ease-in-out; } iconic-footer .container,[riot-tag="iconic-footer"] .container,[data-is="iconic-footer"] .container{ padding: 0 1rem; } iconic-footer .f-brand,[riot-tag="iconic-footer"] .f-brand,[data-is="iconic-footer"] .f-brand{ display: inline-block; line-height: 10rem; position: relative; text-align: center; width: 100%; } iconic-footer .links ul,[riot-tag="iconic-footer"] .links ul,[data-is="iconic-footer"] .links ul{ text-align: center; display: block; padding: 0; } iconic-footer .links ul li,[riot-tag="iconic-footer"] .links ul li,[data-is="iconic-footer"] .links ul li{ text-align: center; display: block; padding: 0; margin: 0 0 0.2rem 0; } iconic-footer .links ul li a,[riot-tag="iconic-footer"] .links ul li a,[data-is="iconic-footer"] .links ul li a{ font-size: 1.1rem; font-weight: 300; text-transform: uppercase; text-align: center; display: block; padding: 0.4rem; transition: all 80ms ease-in-out; text-decoration: none; } iconic-footer .copy,[riot-tag="iconic-footer"] .copy,[data-is="iconic-footer"] .copy{ font-size: 0.9rem; font-weight: 400; padding-top: 1.5rem; } iconic-footer .copy em,[riot-tag="iconic-footer"] .copy em,[data-is="iconic-footer"] .copy em{ font-weight: 700; } iconic-footer .tested-with,[riot-tag="iconic-footer"] .tested-with,[data-is="iconic-footer"] .tested-with{ margin: 0.2rem auto; font-weight: 300; text-align: center; border-radius: 1rem; margin-bottom: 3rem; } iconic-footer .tested-with a,[riot-tag="iconic-footer"] .tested-with a,[data-is="iconic-footer"] .tested-with a{ color: #FFF; text-decoration: none; } iconic-footer .tested-with img,[riot-tag="iconic-footer"] .tested-with img,[data-is="iconic-footer"] .tested-with img{ height: 1.5rem; vertical-align: middle; margin-top: -0.3rem; } @media (min-width: 400px) { iconic-footer .links > ul li,[riot-tag="iconic-footer"] .links > ul li,[data-is="iconic-footer"] .links > ul li{ display: inline-block; } iconic-footer .links > ul li a,[riot-tag="iconic-footer"] .links > ul li a,[data-is="iconic-footer"] .links > ul li a{ font-size: 1.1rem; padding: 0.8rem; } iconic-footer .copy,[riot-tag="iconic-footer"] .copy,[data-is="iconic-footer"] .copy{ font-size: 1.1rem; padding-top: 3rem; } }','class="{shrink: shrink}"',function(i){this.year=(new Date).getFullYear()}),t.tag2("iconic-header","<div> <yield></yield> <div>",'iconic-header,[riot-tag="iconic-header"],[data-is="iconic-header"]{ display: block; height: 4.2rem; padding: 0; transition: all 200ms ease-in-out; } iconic-header .brand,[riot-tag="iconic-header"] .brand,[data-is="iconic-header"] .brand{ float: left; display: block; margin-top: 0.8rem; margin-left:1rem; } iconic-header .brand i,[riot-tag="iconic-header"] .brand i,[data-is="iconic-header"] .brand i{ font-size: 1.8rem; vertical-align: middle; } iconic-header .brand span,[riot-tag="iconic-header"] .brand span,[data-is="iconic-header"] .brand span{ font-size: 1.2rem; font-weight: 300; line-height: 1rem; vertical-align: middle; } iconic-header .brand span b,[riot-tag="iconic-header"] .brand span b,[data-is="iconic-header"] .brand span b{ font-weight: 700; } iconic-header div > ul,[riot-tag="iconic-header"] div > ul,[data-is="iconic-header"] div > ul{ margin: 0 0.8rem; padding: 0; float: right; } iconic-header div > ul li,[riot-tag="iconic-header"] div > ul li,[data-is="iconic-header"] div > ul li{ list-style: none; margin: 0; padding: 0.6rem 0; vertical-align: top; } iconic-header div > ul li a,[riot-tag="iconic-header"] div > ul li a,[data-is="iconic-header"] div > ul li a{ display: block; font-size: 1.4rem; padding: 0rem 0.8rem 0 0rem; text-align: left; text-decoration: none; transition: all 80ms ease-in-out; } iconic-header div > ul li a.button,[riot-tag="iconic-header"] div > ul li a.button,[data-is="iconic-header"] div > ul li a.button{ margin-top: -2px; } iconic-header div > ul li.separator,[riot-tag="iconic-header"] div > ul li.separator,[data-is="iconic-header"] div > ul li.separator{ width: 0.6rem; }',"",function(i){}),t.tag2("iconic-links","<div> <yield></yield> <div>",'iconic-links,[riot-tag="iconic-links"],[data-is="iconic-links"]{ display: block; position: fixed; margin: 0; padding: 0; height: auto; transition: all 200ms ease-in-out; left: 0; right: 0; top:0; height: 4.2rem; z-index:1; background: #FFF; white-space: nowrap; } iconic-links.shrink,[riot-tag="iconic-links"].shrink,[data-is="iconic-links"].shrink{ padding: 0 1rem 0 4rem; height: auto; position: relative; clear: both; } iconic-links.shrink ul,[riot-tag="iconic-links"].shrink ul,[data-is="iconic-links"].shrink ul{ text-align: center; } iconic-links div > ul,[riot-tag="iconic-links"] div > ul,[data-is="iconic-links"] div > ul{ margin: 0; padding: 0; text-align: center; } iconic-links div > ul li,[riot-tag="iconic-links"] div > ul li,[data-is="iconic-links"] div > ul li{ padding: 0; margin: 0; list-style: none; display: inline-block; padding-right: 0.5rem; } iconic-links.shrink div > ul li,[riot-tag="iconic-links"].shrink div > ul li,[data-is="iconic-links"].shrink div > ul li{ display: block; padding-left:1rem; padding-right: 1rem; } iconic-links.shrink div > ul li a,[riot-tag="iconic-links"].shrink div > ul li a,[data-is="iconic-links"].shrink div > ul li a{ padding-left:1rem; } iconic-links.shrink div > ul li a.button,[riot-tag="iconic-links"].shrink div > ul li a.button,[data-is="iconic-links"].shrink div > ul li a.button{ display: block; margin: 1rem 0 0 1rem; } iconic-links div > ul li a,[riot-tag="iconic-links"] div > ul li a,[data-is="iconic-links"] div > ul li a{ font-size: 1.5rem; color: rgba(0, 0, 0, 0.7); text-align: left; display: block; padding: 0.8rem; transition: all 80ms ease-in-out; text-decoration: none; } iconic-links div > ul li a.button,[riot-tag="iconic-links"] div > ul li a.button,[data-is="iconic-links"] div > ul li a.button{ vertical-align: middle; } iconic-links div > ul li.separator,[riot-tag="iconic-links"] div > ul li.separator,[data-is="iconic-links"] div > ul li.separator{ height: 0; border-left: 6px solid white; } iconic-links div > ul li ul,[riot-tag="iconic-links"] div > ul li ul,[data-is="iconic-links"] div > ul li ul{ padding: 0; margin: 0; } iconic-links div > ul li ul li,[riot-tag="iconic-links"] div > ul li ul li,[data-is="iconic-links"] div > ul li ul li{ padding: 0; margin: 0; list-style: none; } iconic-links div > ul li ul li a,[riot-tag="iconic-links"] div > ul li ul li a,[data-is="iconic-links"] div > ul li ul li a{ font-size: 1rem; display: block; padding: 0.1rem 0.1rem 0.1rem 2rem; -webkit-transition: .5s all ease-out; -moz-transition: .5s all ease-out; transition: .5s all ease-out; text-decoration: none; }','class="{shrink: shrink}"',function(i){this.viewing=void 0,this.shrink=!1,this.measured=!1,this.on("mount",function(){this.measured=this.root.scrollWidth,this.update({shrink:this.root.clientWidth<this.root.scrollWidth})}),window.addEventListener("resize",function(){this.update({shrink:!1}),this.update({measured:this.root.scrollWidth}),this.update({shrink:this.root.clientWidth<this.root.scrollWidth})}.bind(this))}),t.tag2("iconic-menu",'<div name="left" class="arrow-left"></div> <div name="right" class="arrow-right"></div> <div name="content"> <yield></yield> </div>','iconic-menu,[riot-tag="iconic-menu"],[data-is="iconic-menu"]{ position: absolute; display: block; box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.6); background: #222; padding: 0.3rem 0.2rem 0.2rem 0.3rem; font-size: 1.5rem; border-radius: 0.3rem; color: #FFF; opacity: 0; margin: 0 auto; z-index: -1; transition: z-index 1ms step-end 0ms, opacity 200ms ease-in-out 0ms; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } iconic-menu.navigation-tip,[riot-tag="iconic-menu"].navigation-tip,[data-is="iconic-menu"].navigation-tip{ padding: 0.2rem 1rem 0.2rem 0.2rem; border-radius: 0.4rem; } iconic-menu.navigation-tip iconic-button,[riot-tag="iconic-menu"].navigation-tip iconic-button,[data-is="iconic-menu"].navigation-tip iconic-button,iconic-menu .navigation-icon,[riot-tag="iconic-menu"] .navigation-icon,[data-is="iconic-menu"] .navigation-icon{ vertical-align: middle; padding: 0; margin-top: 0; top: -0.1rem; } iconic-menu.navigation-tip .arrow-right,[riot-tag="iconic-menu"].navigation-tip .arrow-right,[data-is="iconic-menu"].navigation-tip .arrow-right{ top: 0.78rem; } iconic-menu.fixed,[riot-tag="iconic-menu"].fixed,[data-is="iconic-menu"].fixed{ z-index: 9999; position: fixed!important; } iconic-menu.active,[riot-tag="iconic-menu"].active,[data-is="iconic-menu"].active{ pointer-events: auto; } iconic-menu .content,[riot-tag="iconic-menu"] .content,[data-is="iconic-menu"] .content{ padding: 0; margin: 0; } iconic-menu .arrow-left,[riot-tag="iconic-menu"] .arrow-left,[data-is="iconic-menu"] .arrow-left{ position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #222; right: -10px; transition: opacity 200ms ease-in-out; } iconic-menu .arrow-right,[riot-tag="iconic-menu"] .arrow-right,[data-is="iconic-menu"] .arrow-right{ position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #222; left: -10px; transition: opacity 200ms ease-in-out; } iconic-menu.show,[riot-tag="iconic-menu"].show,[data-is="iconic-menu"].show{ opacity: 0.95; z-index: 9999; } iconic-menu ul,[riot-tag="iconic-menu"] ul,[data-is="iconic-menu"] ul{ list-style: none; padding: 0; margin: 0; } iconic-menu ul li,[riot-tag="iconic-menu"] ul li,[data-is="iconic-menu"] ul li{ padding: 0; margin: 0; display: block; position: relative; } iconic-menu div.form,[riot-tag="iconic-menu"] div.form,[data-is="iconic-menu"] div.form{ margin: 0; padding: 1rem; } iconic-menu div.form *,[riot-tag="iconic-menu"] div.form *,[data-is="iconic-menu"] div.form *{ margin: 0; padding: 0; } iconic-menu a,[riot-tag="iconic-menu"] a,[data-is="iconic-menu"] a{ padding: 0; margin: 0; color: #FFF; cursor: pointer; display: block; position: relative; padding-top: 0rem; padding-bottom: 0rem; padding-right: 2rem; height: 3rem; line-height: 3rem; margin: 0.2rem 0.2rem 0.3rem 0.1rem; border: 0.1rem solid rgba(0,0,0,0); }',"",function(i){var t=200;this.timed=[],this.queue=[],this.on("mount",function(){this._initializeTriggers(),this.root.addEventListener("mouseover",this.cancelHideHandler,!0)}),this._showTip=function(i){var t=this._findTarget(i),e=this._getPosition(i),n=this._measure(t,"Top"),o=this.root.clientHeight+n>window.innerHeight;this.root.style.zIndex=9999,this.left.style.display="none",this.right.style.display="none",t.clientHeight>20?o?(this.left.style.top=""+this.root.clientHeight-8-t.clientHeight/2+"px",this.right.style.top=""+this.root.clientHeight-8-t.clientHeight/2+"px"):(this.left.style.top=""+(t.clientHeight/2-8)+"px",this.right.style.top=""+(t.clientHeight/2-8)+"px"):o?(this.left.style.top=""+this.root.clientHeight-20-t.clientHeight/2+"px",this.right.style.top=""+this.root.clientHeight-20-t.clientHeight/2+"px"):(this.left.style.top=""+((20-t.clientHeight)/2+10)+"px",this.right.style.top=""+((20-t.clientHeight)/2+10)+"px"),this[e].style.display="block","right"==e&&(this.root.style.left=""+(this._measure(t,"Left")+t.clientWidth+10)+"px"),"left"==e&&(this.root.style.left=""+(this._measure(t,"Left")-this.root.clientWidth-10)+"px"),t.clientHeight>20?this.root.style.top=""+(this.root.clientHeight+n>window.innerHeight?this._measure(t,"Top")-(this.root.clientHeight-t.clientHeight-2):this._measure(t,"Top"))+"px":o?this.root.style.top=""+(this._measure(t,"Top")-this.root.clientHeight+t.clientHeight+12)+"px":this.root.style.top=""+(this._measure(t,"Top")-10)+"px",this.root.style.zIndex=9999,this.root.classList.add("fixed"),this.root.classList.add("active"),this.root.classList.add("show")},this._measure=function(i,t,e){return void 0===e&&(e=0),null==i?e:(e+=i["offset"+t]-i["scroll"+t],this._measure(i.offsetParent,t,e))},this._findTarget=function(i){do{if(i.__tip_target)return i;i=i.parentElement}while(null!==i);return i},this._getPosition=function(i){var i=this._findTarget(i),t=this._measure(i,"Left"),e="right";return t>.75*window.innerWidth&&window.innerWidth>this.root.clientWidth&&(e="left"),e}.bind(this),this.cancelHideHandler=function(){this.timed.map(clearTimeout),this.timed=[]}.bind(this),this._hide=function(i){this.timed.push(setTimeout(function(){this.documentClickUnbinder(),this.cancelHideHandler(),this.root.classList.remove("show"),this._sendToBack(),this.trigger("hide")}.bind(this),i?1:t))},this.documentClickHandler=function(i){this.cancelHideHandler(),this.documentClickUnbinder(),this._hide(!0)}.bind(this),this.documentClickBinder=function(){document.addEventListener("click",this.documentClickHandler,!0)}.bind(this),this.documentClickUnbinder=function(){document.removeEventListener("click",this.documentClickHandler,!0)}.bind(this),this.hide=function(){this._hide(!1)}.bind(this),this.on("show",function(){}),this.show=function(i){this.cancelHideHandler();var t=i.target.__off||"mouseout",e=i.target.__on||"mouseover";if(this.root.removeEventListener("mouseout",this.hide,!0),this.documentClickUnbinder(),"mouseout"==t&&this.root.addEventListener("mouseout",this.hide,!0),"mouseover"==e?this.root.addEventListener("click",this.documentClickHandler,!0):this.documentClickBinder(),"mouseover"==e&&this.root.addEventListener("click",this.documentClickHandler,!0),"focus"==e&&(i.target.addEventListener("click",this.cancelHideHandler,!0),this.documentClickBinder()),this.childFocusableClick=function(){this.cancelHideHandler(),this.documentClickBinder()}.bind(this),"blur"==t){var n=this.root.querySelectorAll("input, select, textarea"),o=Array.prototype.slice.call(n,0);this.root.removeEventListener("click",this.childFocusableClick,!0),this.root.addEventListener("click",this.childFocusableClick,!0),o.forEach(function(t){t.tabIndex=i.target.tabIndex,t.removeEventListener("focus",this.cancelHideHandler,!0),t.removeEventListener("click",this.childFocusableClick,!0),t.addEventListener("click",this.childFocusableClick,!0),"checkbox"!==t.getAttribute("type")&&t.addEventListener("focus",this.cancelHideHandler,!0)}.bind(this)),o.length>0&&(o[o.length-1].addEventListener("keydown",function(t){t=t||window.event;var e=t.which;9!=e||t.shiftKey||i.target.focus()}),o[0].addEventListener("keydown",function(t){t=t||window.event;var e=t.which;if(9==e&&t.shiftKey)return i.target.focus(),t.stopPropagation(),t.preventDefault(),!1}),i.target.addEventListener("keydown",function(i){i=i||window.event;var t=i.which;if(9==t&&!i.shiftKey)return o[0].focus(),i.stopPropagation(),i.preventDefault(),!1}.bind(this)))}this._showTip.call(this,i.target),this.trigger("show")}.bind(this),this.mouseover=function(i){this.cancelHideHandler()}.bind(this),this._sendToBack=function(){this.cancelHideHandler(),this.timed.push(setTimeout(function(){this.root.style.zIndex=-1,this.root.classList.remove("active"),this.root.style.top="-10000px"}.bind(this),t))},this._initializeTriggers=function(){var t=this.root.parentElement.querySelectorAll('*[data-menu="'+i.name+'"]');this.triggers=Array.prototype.slice.call(t,0),this.triggers.forEach(function(i){i.__on=i.getAttribute("data-menu-show")?i.getAttribute("data-menu-show"):"mouseover",i.__off=i.getAttribute("data-menu-hide")?i.getAttribute("data-menu-hide"):"mouseout",i.__tip_target=!0,i.addEventListener("mouseover",this.cancelHideHandler,!0),i.addEventListener(i.__on,this.show,!0),"click"!==i.__off&&i.addEventListener(i.__off,this.hide,!0)}.bind(this))}}),t.tag2("iconic-navigation",'<iconic-tip position="right" delay="1" name="navigation-tip" class="navigation-tip"></iconic-tip> <iconic-button class="icon-extra-small burger" name="menuButton" onclick="{expand}" hotkey="~`" data-menu="{opts.dataOverflow}"><i class="icon-burger"></i></iconic-button> <yield></yield>','iconic-navigation,[riot-tag="iconic-navigation"],[data-is="iconic-navigation"]{ height: auto; margin: 0; overflow: hidden; padding: 0; position: relative; transition: all 200ms ease-in-out; width: 4.2rem; z-index: 2; } iconic-navigation.fixed-left,[riot-tag="iconic-navigation"].fixed-left,[data-is="iconic-navigation"].fixed-left{ position: fixed; z-index: 3; bottom: 0rem; left: 0; right: auto; top: 0; } iconic-navigation.fixed-right,[riot-tag="iconic-navigation"].fixed-right,[data-is="iconic-navigation"].fixed-right{ position: fixed; z-index: 3; bottom: 0rem; left: auto; right: 0; top: 0; } iconic-navigation .brand,[riot-tag="iconic-navigation"] .brand,[data-is="iconic-navigation"] .brand{ display: block; position: absolute; margin-top: 0.8rem; margin-left:5.2rem; top:0; } iconic-navigation[class^="fixed"].expand .brand,[riot-tag="iconic-navigation"][class^="fixed"].expand .brand,[data-is="iconic-navigation"][class^="fixed"].expand .brand{ display: block; margin-left:5.2rem; } iconic-navigation .brand i,[riot-tag="iconic-navigation"] .brand i,[data-is="iconic-navigation"] .brand i{ font-size: 1.8rem; vertical-align: middle; } iconic-navigation .brand span,[riot-tag="iconic-navigation"] .brand span,[data-is="iconic-navigation"] .brand span{ font-size: 1.2rem; font-weight: 300; line-height: 1rem; vertical-align: middle; } iconic-navigation .brand span b,[riot-tag="iconic-navigation"] .brand span b,[data-is="iconic-navigation"] .brand span b{ font-weight: 700; } iconic-navigation iconic-button[name="menuButton"],[riot-tag="iconic-navigation"] iconic-button[name="menuButton"],[data-is="iconic-navigation"] iconic-button[name="menuButton"]{ display: none; margin: 0.6rem; } iconic-navigation[class^="fixed"] iconic-button[name="menuButton"],[riot-tag="iconic-navigation"][class^="fixed"] iconic-button[name="menuButton"],[data-is="iconic-navigation"][class^="fixed"] iconic-button[name="menuButton"]{ display: block; } iconic-navigation > ul,[riot-tag="iconic-navigation"] > ul,[data-is="iconic-navigation"] > ul{ position: relative; bottom: 0rem; height: auto; left: 0; list-style: none; margin: 0; padding: 0; right: auto; top: 0rem; width: 4.2rem; overflow: hidden; white-space: nowrap; transition: all 200ms ease-in-out; } iconic-navigation:not([class^="fixed"]),[riot-tag="iconic-navigation"]:not([class^="fixed"]),[data-is="iconic-navigation"]:not([class^="fixed"]){ width: auto; } iconic-navigation:not([class^="fixed"]) ul,[riot-tag="iconic-navigation"]:not([class^="fixed"]) ul,[data-is="iconic-navigation"]:not([class^="fixed"]) ul{ width: auto; } iconic-navigation[class^="fixed"] > ul,[riot-tag="iconic-navigation"][class^="fixed"] > ul,[data-is="iconic-navigation"][class^="fixed"] > ul{ top: 4.2rem; } iconic-navigation[class^="fixed"] > ul,[riot-tag="iconic-navigation"][class^="fixed"] > ul,[data-is="iconic-navigation"][class^="fixed"] > ul{ position: absolute; } iconic-navigation.expand,[riot-tag="iconic-navigation"].expand,[data-is="iconic-navigation"].expand{ width: 25rem; } iconic-navigation.expand.slide,[riot-tag="iconic-navigation"].expand.slide,[data-is="iconic-navigation"].expand.slide{ box-shadow: none; } iconic-navigation > ul li,[riot-tag="iconic-navigation"] > ul li,[data-is="iconic-navigation"] > ul li{ padding: 0; margin: 0; list-style: none; } iconic-navigation > ul li a,[riot-tag="iconic-navigation"] > ul li a,[data-is="iconic-navigation"] > ul li a{ font-size: 2rem; text-align: left; display: block; padding: 0.4rem 0.5rem 0.5rem 0.5rem; transition: all 80ms ease-in-out; border-top: 1px solid white; text-decoration: none; vertical-align:middle; } iconic-navigation > ul > li > a > iconic-button,[riot-tag="iconic-navigation"] > ul > li > a > iconic-button,[data-is="iconic-navigation"] > ul > li > a > iconic-button{ margin-right: 0.2rem; line-height: 0; } iconic-navigation > ul li ul,[riot-tag="iconic-navigation"] > ul li ul,[data-is="iconic-navigation"] > ul li ul{ padding: 0; margin: 0; } iconic-navigation > ul li ul li,[riot-tag="iconic-navigation"] > ul li ul li,[data-is="iconic-navigation"] > ul li ul li{ padding: 0; margin: 0; list-style: none; } iconic-navigation > ul li ul li a,[riot-tag="iconic-navigation"] > ul li ul li a,[data-is="iconic-navigation"] > ul li ul li a{ font-size: 1rem; display: block; padding: 0.1rem 0.1rem 0.1rem 2rem; -webkit-transition: .5s all ease-out; -moz-transition: .5s all ease-out; transition: .5s all ease-out; text-decoration: none; } iconic-navigation.expand > ul,[riot-tag="iconic-navigation"].expand > ul,[data-is="iconic-navigation"].expand > ul{ z-index: 500; width: 25rem; } @media (min-width: 750px) { iconic-navigation[class^="fixed"].auto .brand,[riot-tag="iconic-navigation"][class^="fixed"].auto .brand,[data-is="iconic-navigation"][class^="fixed"].auto .brand{ margin-left: 1rem; } iconic-navigation[class^="fixed"].auto > .burger,[riot-tag="iconic-navigation"][class^="fixed"].auto > .burger,[data-is="iconic-navigation"][class^="fixed"].auto > .burger{ top: -4.2rem; } iconic-navigation.auto.expand,[riot-tag="iconic-navigation"].auto.expand,[data-is="iconic-navigation"].auto.expand{ box-shadow: none; } iconic-navigation.auto,[riot-tag="iconic-navigation"].auto,[data-is="iconic-navigation"].auto{ width: 25rem; } iconic-navigation.auto > ul,[riot-tag="iconic-navigation"].auto > ul,[data-is="iconic-navigation"].auto > ul{ top: 4.2rem; width: 25rem;} }',"",function(i){
this.viewing=void 0,this._mapLinkToAnchor=function(i){return this._elFromHref(i.href)}.bind(this),this._elFromHref=function(i){return document.getElementById(this._hashFromHref(i))},this._hashFromHref=function(i){return i.slice(i.indexOf("#")+1)},this.getVisible=function(i,t){var e=i[0];return i.forEach(function(i){i&&i.offsetTop-20<t&&(e=i)}),e}.bind(this),this.on("update-visible-anchor",function(i){this.viewing=i,this.links.forEach(function(i){i.classList.remove("active"),this.viewing&&this.viewing.id===this._hashFromHref(i.href)&&(history.pushState(null,null,"#"+this.viewing.id),i.classList.add("active"))}.bind(this))}),this._scroll=function(){var i=this.getVisible(this.anchors,document.scrollTop||window.pageYOffset);this.viewing!==i&&this.trigger("update-visible-anchor",i)}.bind(this),this.initializeReferences=function(){this.navigation=this.root.getElementsByTagName("UL")[0],void 0!==this.navigation&&(this.links=Array.prototype.slice.call(this.navigation.getElementsByTagName("A"),0),this.links.length>0&&(this.getFromHash()||this.links[0].classList.add("active"),this.anchors=this.links.map(this._mapLinkToAnchor),this.initializeScrollListener()))},this.initializeScrollListener=function(){this.anchors&&this.anchors.length>0&&window.addEventListener("scroll",this._scroll)},this.on("mount",function(){i.dataFixed&&this.root.classList.add("fixed-"+i.dataFixed),i.dataEffect&&this.root.classList.add(i.dataEffect),this.tags["navigation-tip"].beforeShow=function(){var i=this.navigation.querySelector("li:hover"),t=i&&i.textContent?"textContent":"innerText";return 42===this.navigation.clientWidth&&null!==i&&0!==i[t].trim().length&&(this.tags["navigation-tip"].content.innerHTML=this.navigation.querySelector("li:hover").innerHTML,!0)}.bind(this),this.initializeReferences(),this.tip="iconic-navigation";var t=this.tags["navigation-tip"].content.textContent?"textContent":"innerText";this.tags["navigation-tip"].content[t]=this.tip,this.tags["navigation-tip"].update(),function(i){document.body.classList.add("navigation-margin"),window.addEventListener("hashchange",i.getFromHash)}(this)}),this.on("unmount",function(){document.body.classList.remove("navigation-margin")}),this.getFromHash=function(){var i=!1;return this.links.forEach(function(t){t.classList.remove("active"),window.location.hash.slice(1).match(new RegExp("^"+this._hashFromHref(t.href)))&&(t.classList.add("active"),i=!0)}.bind(this)),i}.bind(this),this.cancelExpander=function(){this.root.classList.remove("expand"),document.removeEventListener("click",this.cancelExpander)}.bind(this),this.expand=function(){document.removeEventListener("click",this.cancelExpander),this.root.classList.contains("expand")?this.root.classList.remove("expand"):(this.root.classList.add("expand"),setTimeout(function(){document.addEventListener("click",this.cancelExpander)}.bind(this),0))}.bind(this)}),t.tag2("iconic-select",'<div name="dd" class="dd"> <div name="ddTrigger" onclick="{onTriggerClick}" class="dd-trigger opener u-nd"> <selected-item name="selectedNode">{selected}</selected-item> <placeholder if="{placeholder}">{placeholder}</placeholder> <i class="{opts.icon} opener"></i> </div> <div name="ddContent" onclick="{onItemClick}" class="dd-content"> <item each="{item, index in opts.items}" class="{selected: item === parent.selected}">{item}</item> </div> </div>','iconic-select,[riot-tag="iconic-select"],[data-is="iconic-select"]{ display: inline-block; text-transform: uppercase; } iconic-select placeholder,[riot-tag="iconic-select"] placeholder,[data-is="iconic-select"] placeholder,iconic-select selected-item,[riot-tag="iconic-select"] selected-item,[data-is="iconic-select"] selected-item{ line-height: 2.4rem; padding: 0 0 0 0.8rem; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } iconic-select selected-item,[riot-tag="iconic-select"] selected-item,[data-is="iconic-select"] selected-item{ display: inline-block; line-height: 2.4rem; } iconic-select .dd,[riot-tag="iconic-select"] .dd,[data-is="iconic-select"] .dd{ position: relative; display: inline-block; } iconic-select .dd-trigger,[riot-tag="iconic-select"] .dd-trigger,[data-is="iconic-select"] .dd-trigger{ border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; cursor: pointer; font-size: 1.2rem; height: auto; letter-spacing: 0; line-height: 2.8rem; min-width: 3rem; padding:0; text-align: center; vertical-align: top; } iconic-select .dd-trigger i,[riot-tag="iconic-select"] .dd-trigger i,[data-is="iconic-select"] .dd-trigger i{ padding-left: 0.8rem; } iconic-select .dd-trigger span,[riot-tag="iconic-select"] .dd-trigger span,[data-is="iconic-select"] .dd-trigger span{ padding-left: 0.8rem; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } iconic-select .dd-trigger i:only-child,[riot-tag="iconic-select"] .dd-trigger i:only-child,[data-is="iconic-select"] .dd-trigger i:only-child{ padding: 0; } iconic-select .dd-trigger placeholder + i,[riot-tag="iconic-select"] .dd-trigger placeholder + i,[data-is="iconic-select"] .dd-trigger placeholder + i,iconic-select selected-item + i,[riot-tag="iconic-select"] selected-item + i,[data-is="iconic-select"] selected-item + i{ padding-right: 0.8rem } iconic-select .dd-content item,[riot-tag="iconic-select"] .dd-content item,[data-is="iconic-select"] .dd-content item{ cursor: pointer; display: block; padding: 0.7rem 1rem; font-size: 1.2rem; text-transform: uppercase; } iconic-select .dd-content,[riot-tag="iconic-select"] .dd-content,[data-is="iconic-select"] .dd-content{ display: none; } iconic-select .open .dd-content,[riot-tag="iconic-select"] .open .dd-content,[data-is="iconic-select"] .open .dd-content{ display:block; }',"",function(i){this.contentClickable=!!i.contentClickable,this.selected=i.selected||!1,this._placeholder=i.placeholder||"Select...",this.placeholder=!this.selected&&this._placeholder,this.setValue=function(){this.root.value=this.selected,this.trigger("change",this.root.value)},this.onItemClick=function(i){for(var t=i.target;t&&"ITEM"!=t.tagName.toUpperCase();)t=t.parentElement;t&&(this.selected=t.textContent,this.update({placeholder:!this.selected&&this._placeholder}),this.setValue())},this.onTriggerClick=function(i){this.ddContent.style.minWidth=this.ddTrigger.clientWidth+"px",this.dd.classList.toggle("open"),this.ddTrigger.clientWidth<this.ddContent.clientWidth?this.dd.classList.add("oversize"):this.dd.classList.remove("oversize")}.bind(this),this.onWindowClick=function(i){for(var t=i.target,e=i.target;t&&!t.classList.contains("dd-trigger");)t=t.parentElement;for(;e&&!e.classList.contains("interactive");)e=e.parentElement;t&&t==this.ddTrigger||e||this.dd.classList.remove("open")},this.on("mount",function(){window.addEventListener("click",this.onWindowClick.bind(this),!1)}),this.on("unmount",function(){window.removeEventListener("click",this.onWindowClick.bind(this),!1)})}),t.tag2("iconic-tagger",'<div name="dd" class="dd"> <div name="ddTrigger" onclick="{onTriggerClick}" class="dd-trigger opener u-nd"> <items name="selectedNode"> <span each="{item, index in selected}">{item}</span> </items> <placeholder if="{placeholder}">{placeholder}</placeholder> <i class="{opts.icon} opener"></i> </div> <div name="ddContent" onclick="{onItemClick}" class="dd-content"> <item class="interactive" each="{item, index in unselected}">{item}</item> </div> </div>','iconic-tagger,[riot-tag="iconic-tagger"],[data-is="iconic-tagger"]{ display: inline-block; text-transform: uppercase; } iconic-tagger placeholder,[riot-tag="iconic-tagger"] placeholder,[data-is="iconic-tagger"] placeholder{ padding: 0 0 0 0.8rem; line-height: 2.4rem; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } iconic-tagger .dd-trigger items,[riot-tag="iconic-tagger"] .dd-trigger items,[data-is="iconic-tagger"] .dd-trigger items{ max-width: 26rem; white-space: normal; display: inline-block; position: relative; text-align: left; line-height: 2.4rem; } iconic-tagger .dd,[riot-tag="iconic-tagger"] .dd,[data-is="iconic-tagger"] .dd{ position: relative; display: inline-block; } iconic-tagger .dd-trigger,[riot-tag="iconic-tagger"] .dd-trigger,[data-is="iconic-tagger"] .dd-trigger{ border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; cursor: pointer; font-size: 1.2rem; height: auto; letter-spacing: 0; line-height: 2.8rem; min-width: 3rem; padding:0; text-align: center; vertical-align: top; } iconic-tagger .dd-trigger i,[riot-tag="iconic-tagger"] .dd-trigger i,[data-is="iconic-tagger"] .dd-trigger i{ padding-left: 0.8rem; line-height: 0; } iconic-tagger .dd-trigger span,[riot-tag="iconic-tagger"] .dd-trigger span,[data-is="iconic-tagger"] .dd-trigger span{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 0.3rem; white-space: nowrap; margin: 0.2rem; padding: 0rem 0.4rem; display: inline-block; line-height: 1.8rem; } iconic-tagger .dd-trigger span:after,[riot-tag="iconic-tagger"] .dd-trigger span:after,[data-is="iconic-tagger"] .dd-trigger span:after{ content: "\\00D7"; font-size: 1.8rem; margin-left: 0.3rem; display: inline-block; line-height: 0;} iconic-tagger .dd-trigger i:only-child,[riot-tag="iconic-tagger"] .dd-trigger i:only-child,[data-is="iconic-tagger"] .dd-trigger i:only-child{ padding: 0; } iconic-tagger .dd-trigger i + span,[riot-tag="iconic-tagger"] .dd-trigger i + span,[data-is="iconic-tagger"] .dd-trigger i + span{ padding-left: 0.5rem; padding-right: 0.8rem } iconic-tagger .dd-trigger items + i,[riot-tag="iconic-tagger"] .dd-trigger items + i,[data-is="iconic-tagger"] .dd-trigger items + i{ padding-right: 0.8rem } iconic-tagger .dd-trigger placeholder + i,[riot-tag="iconic-tagger"] .dd-trigger placeholder + i,[data-is="iconic-tagger"] .dd-trigger placeholder + i{ padding-right: 0.8rem } iconic-tagger .dd-content item,[riot-tag="iconic-tagger"] .dd-content item,[data-is="iconic-tagger"] .dd-content item{ cursor: pointer; display: block; padding: 0.7rem 1rem; font-size: 1.2rem; text-transform: uppercase; white-space: nowrap; padding-top:0.5rem; padding-bottom:0.5rem; } iconic-tagger .dd-content,[riot-tag="iconic-tagger"] .dd-content,[data-is="iconic-tagger"] .dd-content{ display: none; } iconic-tagger .open .dd-content,[riot-tag="iconic-tagger"] .open .dd-content,[data-is="iconic-tagger"] .open .dd-content{ display:block; }',"",function(i){function t(i,t){return i>t?1:-1}function e(i){return i>-1}function n(i){return i===-1}function o(i,e,n){if(!i)return e;var o=[];return e.forEach(function(t){n(i.indexOf(t))&&o.push(t)}),o.sort(t),o}function a(i,e,n){var o=n&&"string"==typeof n?[n]:n;return o.forEach(function(t){var n=i.indexOf(t);n>-1&&i.splice(n,1),e.indexOf(t)===-1&&e.push(t)}),i.sort(t),e.sort(t),e}this.setSelected=function(i){var t=[].concat(this.selected,this.unselected);i=i||[],this.update({selected:a([],[],o(i,t,e)),unselected:a([],[],o(i,t,n))}),this.draw(),this.setValue()},this.setItems=function(i){i=i||[],this.update({selected:a([],[],o(this.selected,i,e)),unselected:a([],[],o(this.selected,i,n))}),this.draw(),this.setValue()},this.on("set-selected",this.setSelected),this.on("set-items",this.setItems),this.onItemClick=function(i){for(var t=i.target;t&&"ITEM"!=t.tagName.toUpperCase();)t=t.parentElement;t&&(a(this.unselected,this.selected,t.textContent),this.draw(),this.setValue(),this.update({placeholder:0===this.selected.length&&this._placeholder}))},this.setValue=function(){this.root.value=this.selected,this.trigger("change",this.root.value)},this.onSelectedTagClick=function(i){return"SPAN"==i.target.tagName.toUpperCase()&&(a(this.selected,this.unselected,i.target.textContent),this.draw(),this.setValue(),!0)},this.draw=function(){0===this.unselected.length?(this.ddTrigger.classList.add("disabled"),this.dd.classList.remove("open")):this.ddTrigger.classList.remove("disabled"),this.update({placeholder:0===this.selected.length&&this._placeholder})},this.onTriggerClick=function(i){this.onSelectedTagClick(i)||0==this.unselected.length||(this.ddContent.style.minWidth=this.ddTrigger.clientWidth+"px",this.dd.classList.toggle("open"),this.ddTrigger.clientWidth<this.ddContent.clientWidth?this.dd.classList.add("oversize"):this.dd.classList.remove("oversize"))}.bind(this),this.onWindowClick=function(i){for(var t=i.target,e=i.target;t&&!t.classList.contains("dd-trigger");)t=t.parentElement;for(;e&&!e.classList.contains("interactive");)e=e.parentElement;t&&t==this.ddTrigger||e||this.dd.classList.remove("open")},this.on("mount",function(){window.addEventListener("click",this.onWindowClick.bind(this),!1);var t=i.selected||[],c=i.items&&"string"==typeof i.items?i.items.split(","):i.items;c||(c=[]),this.update({selected:a([],[],o(t,c,e)),unselected:a([],[],o(t,c,n))}),this._placeholder=i.placeholder||"All...",this.draw()}),this.on("unmount",function(){window.removeEventListener("click",this.onWindowClick.bind(this),!1)})}),t.tag2("iconic-tip",'<div name="left" class="arrow-left"></div> <div name="right" class="arrow-right"></div> <div name="up" class="arrow-up"></div> <div name="down" class="arrow-down"></div> <div name="content"> <yield></yield> </div>','iconic-tip,[riot-tag="iconic-tip"],[data-is="iconic-tip"]{ position: absolute; display: block; box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.6); background: #222; padding: 1rem; font-size: 1.5rem; border-radius: 0.3rem; color: #FFF; opacity: 0; margin: 0 auto; z-index: -1; transition: opacity 200ms ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } iconic-tip.navigation-tip,[riot-tag="iconic-tip"].navigation-tip,[data-is="iconic-tip"].navigation-tip{ padding: 0.2rem 1rem 0.2rem 0.2rem; border-radius: 0.4rem; } iconic-tip.navigation-tip iconic-button,[riot-tag="iconic-tip"].navigation-tip iconic-button,[data-is="iconic-tip"].navigation-tip iconic-button{ vertical-align: middle; margin: 0; } iconic-tip.navigation-tip .arrow-right,[riot-tag="iconic-tip"].navigation-tip .arrow-right,[data-is="iconic-tip"].navigation-tip .arrow-right{ top: 0.78rem; } iconic-tip.fixed,[riot-tag="iconic-tip"].fixed,[data-is="iconic-tip"].fixed{ position: fixed!important; } iconic-tip.active,[riot-tag="iconic-tip"].active,[data-is="iconic-tip"].active{ pointer-events: auto; } iconic-tip .content,[riot-tag="iconic-tip"] .content,[data-is="iconic-tip"] .content{ padding: 0; margin: 0; } iconic-tip .arrow-up,[riot-tag="iconic-tip"] .arrow-up,[data-is="iconic-tip"] .arrow-up{ position: absolute; width: auto; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #222; margin: 0 auto; top: -10px; transition: opacity 200ms ease-in-out; } iconic-tip .arrow-down,[riot-tag="iconic-tip"] .arrow-down,[data-is="iconic-tip"] .arrow-down{ position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #222; bottom: -10px; margin: 0 auto; transition: opacity 200ms ease-in-out; } iconic-tip .arrow-left,[riot-tag="iconic-tip"] .arrow-left,[data-is="iconic-tip"] .arrow-left{ position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #222; right: -10px; transition: opacity 200ms ease-in-out; } iconic-tip .arrow-right,[riot-tag="iconic-tip"] .arrow-right,[data-is="iconic-tip"] .arrow-right{ position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #222; left: -10px; transition: opacity 200ms ease-in-out; } iconic-tip.active,[riot-tag="iconic-tip"].active,[data-is="iconic-tip"].active{ z-index: 9999; } iconic-tip.show,[riot-tag="iconic-tip"].show,[data-is="iconic-tip"].show{ opacity: 0.95; }',"",function(i){var t=200;this.timed=[],this.on("mount",function(){this.root.addEventListener("mouseover",this.clearTimed),this.root.addEventListener("mouseout",this.hide),this._initializeElements()}),this.moveright=funct