diff --git a/css/betternavigator.css b/css/betternavigator.css index c7d2ad7..1d6b25b 100644 --- a/css/betternavigator.css +++ b/css/betternavigator.css @@ -1 +1 @@ -.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-982681f2.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{margin:-4px -6px 0 0;transform:scale(1.1)}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.7)}.bn-icon-tick{transform:scale(0.7)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;z-index:99999;max-height:100%;overflow:auto;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:16px;text-align:left}#BetterNavigator a{text-decoration:none}#BetterNavigator form{display:none}#BetterNavigator.collapsed{box-shadow:0px 0px 3px rgba(0,0,0,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px;padding:10px 15px 8px 35px}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{display:block;color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out;font-size:14px;line-height:1.2;margin:0}#BetterNavigatorStatus #BetterNavigatorStatusButton{appearance:none;width:100%;height:38px;position:absolute;top:0;left:0;border:0;background:rgba(0,0,0,0);text-align:left;padding:2px 14px 0}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -2px -4px}#BetterNavigatorStatus .bn-icon-close{float:right}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatus:hover,#BetterNavigatorStatus:focus-visible{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close,#BetterNavigatorStatus:focus-visible .bn-icon-cog,#BetterNavigatorStatus:focus-visible .bn-icon-close{opacity:1}#BetterNavigatorStatus.Live{background:#06ad18;border-color:#059c16}#BetterNavigatorStatus.Live:hover{background:#06a417}#BetterNavigatorStatus.Draft{background:#e6674b;border-color:#cf5d44}#BetterNavigatorStatus.Draft:hover{background:#db6247}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{display:block;text-transform:uppercase;font-size:11px;line-height:1.2;color:#595d61;margin:8px 0 4px 0;padding:0;font-weight:normal}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent .bn-disabled{display:block;background:#eceff2;color:#313639;font-family:Helvetica,Arial,sans-serif;font-size:12px;border-radius:5px;border-bottom:1px solid #a3aaaf;margin:0 0 4px 0;padding:6px 10px 5px 10px;line-height:16px;font-weight:bold}#BetterNavigatorContent a .light,#BetterNavigatorContent .bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus-visible,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent .bn-disabled{background:#c6d3da;color:#51565a;cursor:default;pointer-events:none}#BetterNavigatorContent .bn-links{display:block;margin:0;padding:0;list-style-type:none}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}body>p.message{text-align:left;background:#fff;color:#222;padding:10px 20px;margin:0;border-bottom:1px solid #ccc;border-left:5px solid #1d8aff}/*# sourceMappingURL=betternavigator.css.map */ +.svg-images--bn-icon--view,#BetterNavigator .bn-icon-view,.svg-images--bn-icon--user,#BetterNavigator .bn-icon-user,.svg-images--bn-icon--tools,#BetterNavigator .bn-icon-tools,.svg-images--bn-icon--tick,#BetterNavigator .bn-icon-tick,.svg-images--bn-icon--info,#BetterNavigator .bn-icon-info,.svg-images--bn-icon--flush,#BetterNavigator .bn-icon-flush,.svg-images--bn-icon--edit,#BetterNavigator .bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,#BetterNavigator .bn-icon-db,.svg-images--bn-icon--cog,#BetterNavigator .bn-icon-cog,.svg-images--bn-icon--close,#BetterNavigator .bn-icon-close{background:url("svg/sprite.css-982681f2.svg") no-repeat}.svg-images--bn-icon--close,#BetterNavigator .bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,#BetterNavigator .bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,#BetterNavigator .bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,#BetterNavigator .bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,#BetterNavigator .bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,#BetterNavigator .bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,#BetterNavigator .bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,#BetterNavigator .bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,#BetterNavigator .bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,#BetterNavigator .bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,#BetterNavigator .bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,#BetterNavigator .bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,#BetterNavigator .bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,#BetterNavigator .bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,#BetterNavigator .bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,#BetterNavigator .bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,#BetterNavigator .bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,#BetterNavigator .bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,#BetterNavigator .bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,#BetterNavigator .bn-icon-view{width:16px;height:16px}#BetterNavigator{position:fixed;z-index:99999;max-height:100%;text-align:left}#BetterNavigator *{all:initial;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:1.2}#BetterNavigator a{text-decoration:none}#BetterNavigator form{display:none}#BetterNavigator.collapsed{box-shadow:0px 0px 3px rgba(0,0,0,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px;padding:0 14px}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigator span[class^=bn-icon],#BetterNavigator span[class*=" bn-icon"]{display:inline-block}#BetterNavigator .bn-icon-close{transform:scale(1.3)}#BetterNavigator .bn-icon-db{transform:scale(0.8)}#BetterNavigator .bn-icon-edit{transform:scale(0.9)}#BetterNavigator .bn-icon-flush{transform:scale(0.8)}#BetterNavigator .bn-icon-info{transform:scale(0.7)}#BetterNavigator .bn-icon-tick{transform:scale(0.7)}#BetterNavigator .bn-icon-tools{transform:scale(0.9)}#BetterNavigator .bn-icon-view{transform:scale(0.95)}#BetterNavigatorStatus{display:block;width:calc(100% - 15px - 15px);height:30px;appearance:none;background:#6f6f6f;border:1px solid #646464;cursor:pointer;padding:0 15px;margin:0;transition:100ms background-color ease-in-out;white-space:nowrap}#BetterNavigatorStatus .status-text{display:inline-block;text-align:left;color:#fff;text-transform:uppercase;font-family:inherit;font-weight:bold;font-size:18.5px;line-height:1.2;letter-spacing:.1px}#BetterNavigatorStatus:hover,#BetterNavigatorStatus:focus-visible{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close,#BetterNavigatorStatus:focus-visible .bn-icon-cog,#BetterNavigatorStatus:focus-visible .bn-icon-close{opacity:1}#BetterNavigatorStatus:focus-visible{outline:3px solid #646464;outline-offset:2px}#BetterNavigatorStatus.Live{background:#06ad18;border-color:#059c16}#BetterNavigatorStatus.Live:hover{background:#06a417}#BetterNavigatorStatus.Live:focus-visible{outline:3px solid #059c16}#BetterNavigatorStatus.Draft{background:#e6674b;border-color:#cf5d44}#BetterNavigatorStatus.Draft:hover{background:#db6247}#BetterNavigatorStatus.Draft:focus-visible{outline:3px solid #cf5d44}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -1px -4px}#BetterNavigatorStatus .bn-icon-close{float:right;margin:3px -6px 0}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatusIcon{display:inline-block;cursor:inherit;transition:100ms opacity ease-in-out}#BetterNavigatorContent{display:block;padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;overflow:auto}#BetterNavigatorContent .bn-heading{display:block;text-transform:uppercase;font-size:11px;line-height:1.2;color:#595d61;margin:8px 0 4px 0;padding:0;font-weight:normal}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{cursor:inherit;margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent .bn-disabled{display:block;background:#eceff2;color:#313639;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:1.4;border-radius:5px;border-bottom:1px solid #a3aaaf;margin:0 0 4px 0;padding:6px 10px 5px 10px;font-weight:bold;cursor:pointer;transition:100ms background-color ease-in-out}#BetterNavigatorContent a .light,#BetterNavigatorContent .bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus-visible,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:focus-visible{border-bottom:1px solid rgba(0,0,0,0);outline:2px solid #93999e;outline-offset:1px}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent .bn-disabled{background:#c6d3da;color:#51565a;cursor:default;pointer-events:none}#BetterNavigatorContent .bn-links{display:block;margin:0;padding:0;list-style-type:none}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}body>p.message{text-align:left;background:#fff;color:#222;padding:10px 20px;margin:0;border-bottom:1px solid #ccc;border-left:5px solid #1d8aff}/*# sourceMappingURL=betternavigator.css.map */ diff --git a/css/betternavigator.css.map b/css/betternavigator.css.map index e424638..74223fb 100644 --- a/css/betternavigator.css.map +++ b/css/betternavigator.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBACA,2BAGJ,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,cACA,MAxKI,KAyKJ,WA7JW,QA8JX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CACA,eACA,gBACA,SAEA,oDACI,gBACA,WACA,YACA,kBACA,MACA,OACA,SACA,yBACA,gBACA,mBAGJ,oCACE,0BAGF,sCACE,YAGF,0EAEE,WAGF,kEAEI,mBAEA,4LAEE,UAIN,4BACI,WAhNI,QAiNJ,qBAEA,kCACI,mBAIR,6BACI,WAxNK,QAyNL,qBAEA,mCACI,mBAOZ,wBACI,YACA,MA7OW,QA8OX,WA7OgB,QA8OhB,yBACA,yBACA,gBACA,8CAEA,oCACI,cACA,yBACA,eACA,gBACA,MAzPO,QA0PP,mBACA,UACA,mBAGJ,6FAEE,0BAGF,+DAEI,cACA,WAnQW,QAoQX,MAtQM,QAuQN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,6EACI,mBAIR,wEAEI,WA5RA,KA6RA,MA9RA,KAiSJ,iCACI,mBACA,qBAGJ,qCACI,WA9RmB,QA+RnB,MAjSc,QAkSd,eACA,oBAGJ,kCACI,cACA,SACA,UACA,qBAEA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,kmBACI,wDAGJ,4DAEI,wBAGJ,iEACI,WACA,YAGJ,wDAEI,qCAGJ,6DACI,WACA,YAGJ,sDAEI,0BAGJ,2DACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,0DAEI,qCAGJ,+DACI,WACA,YAGJ,4DAEI,uCAGJ,iEACI,WACA,YAGJ,0DAEI,2BAGJ,+DACI,WACA,YAGJ,0DAEI,wCAGJ,+DACI,WACA,YAGJ,4DAEI,wCAGJ,iEACI,WACA,YAGJ,0DAEI,2BAGJ,+DACI,WACA,YAGJ,0DAEI,6BAGJ,+DACI,WACA,YCtFJ,iBACI,eACA,cACA,gBACA,gBAEA,mBAGI,YACA,uCACA,eACA,gBAGJ,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBACA,eAGJ,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAKR,+EAEI,qBAGJ,gCAGI,qBAQJ,6BAGI,qBAGJ,+BAGI,qBAGJ,gCAGI,qBAGJ,+BAGI,qBAGJ,+BAGI,qBAGJ,gCAGI,qBAQJ,+BAGI,sBAMR,uBACI,cACA,+BACA,YACA,gBACA,WAnKW,QAoKX,yBACA,eACA,eACA,SACA,8CACA,mBAEA,oCACI,qBACA,gBACA,MA1LA,KA2LA,yBACA,oBACA,iBACA,iBACA,gBACA,oBAGJ,kEAEI,mBAEA,4LAEI,UAIR,qCACI,0BACA,mBAGJ,4BACI,WAzMI,QA0MJ,qBAEA,kCACI,mBAGJ,0CACI,0BAIR,6BACI,WArNK,QAsNL,qBAEA,mCACI,mBAGJ,2CACI,0BAIR,oCACI,0BAGJ,sCACI,YACA,kBAGJ,0EAEI,WAIR,2BACI,qBACA,eACA,qCAKJ,wBACI,cACA,YACA,MAnQW,QAoQX,WAnQgB,QAoQhB,yBACA,yBACA,gBACA,cAEA,oCACI,cACA,yBACA,eACA,gBACA,MA/QO,QAgRP,mBACA,UACA,mBAGJ,6FAEI,eACA,0BAGJ,+DAEI,cACA,WA1RW,QA2RX,MA7RM,QA8RN,uCACA,eACA,gBACA,kBACA,gCACA,iBACA,0BACA,iBACA,eACA,8CAEA,6EACI,mBAIR,wEAEI,WArTA,KAsTA,MAvTA,KA0TJ,wCACI,sCACA,0BACA,mBAGJ,iCACI,mBACA,qBAGJ,qCACI,WA7TmB,QA8TnB,MAhUc,QAiUd,eACA,oBAGJ,kCACI,cACA,SACA,UACA,qBAEA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"} \ No newline at end of file diff --git a/javascript/betternavigator.js b/javascript/betternavigator.js index 2681a82..65e8b55 100755 --- a/javascript/betternavigator.js +++ b/javascript/betternavigator.js @@ -18,7 +18,6 @@ function initialiseBetterNavigator() { // Dom elements var BetterNavigator = document.getElementById("BetterNavigator"); var BetterNavigatorStatus = document.getElementById("BetterNavigatorStatus"); - var BetterNavigatorStatusButton = document.getElementById("BetterNavigatorStatusButton"); var BetterNavigatorStatusIcon = document.getElementById("BetterNavigatorStatusIcon"); var BetterNavigatorLogoutLink = document.getElementById("BetterNavigatorLogoutLink"); var BetterNavigatorLogoutForm = document.getElementById("LogoutForm_BetterNavigatorLogoutForm"); @@ -30,7 +29,7 @@ function initialiseBetterNavigator() { BetterNavigator.classList.remove('collapsed'); // update the button state - BetterNavigatorStatusButton.setAttribute('aria-expanded', 'true'); + BetterNavigatorStatus.setAttribute('aria-expanded', 'true'); BetterNavigatorStatusIcon.classList.remove('bn-icon-cog'); BetterNavigatorStatusIcon.classList.add('bn-icon-close'); @@ -40,7 +39,7 @@ function initialiseBetterNavigator() { BetterNavigator.classList.remove('open'); // update the button state - BetterNavigatorStatusButton.setAttribute('aria-expanded', 'false'); + BetterNavigatorStatus.setAttribute('aria-expanded', 'false'); BetterNavigatorStatusIcon.classList.remove('bn-icon-close'); BetterNavigatorStatusIcon.classList.add('bn-icon-cog'); @@ -54,7 +53,7 @@ function initialiseBetterNavigator() { BetterNavigator.classList.remove('collapsed'); // update the button state - BetterNavigatorStatusButton.setAttribute('aria-expanded', 'true'); + BetterNavigatorStatus.setAttribute('aria-expanded', 'true'); BetterNavigatorStatusIcon.classList.remove('bn-icon-cog'); BetterNavigatorStatusIcon.classList.add('bn-icon-close'); } diff --git a/scss/betternavigator.scss b/scss/betternavigator.scss index cba24d2..a299e1d 100644 --- a/scss/betternavigator.scss +++ b/scss/betternavigator.scss @@ -21,83 +21,23 @@ $liveColor: #06AD18; $stageColor: #E6674B; $archiveColor: #6F6F6F; -// Icons -span[class^='bn-icon'], -span[class*=' bn-icon']{ - display: inline-block; -} - -.bn-icon-close { - @extend .svg-images--bn-icon--close; - @extend .svg-images--bn-icon--close-dims; - margin: -4px -6px 0 0; - transform: scale(1.1); -} - -.bn-icon-cog { - @extend .svg-images--bn-icon--cog; - @extend .svg-images--bn-icon--cog-dims; -} - -.bn-icon-db { - @extend .svg-images--bn-icon--db; - @extend .svg-images--bn-icon--db-dims; - transform: scale(0.8); -} - -.bn-icon-edit { - @extend .svg-images--bn-icon--edit; - @extend .svg-images--bn-icon--edit-dims; - transform: scale(0.9); -} - -.bn-icon-flush { - @extend .svg-images--bn-icon--flush; - @extend .svg-images--bn-icon--flush-dims; - transform: scale(0.8); -} - -.bn-icon-info { - @extend .svg-images--bn-icon--info; - @extend .svg-images--bn-icon--info-dims; - transform: scale(0.7); -} - -.bn-icon-tick { - @extend .svg-images--bn-icon--tick; - @extend .svg-images--bn-icon--tick-dims; - transform: scale(0.7); -} - -.bn-icon-tools { - @extend .svg-images--bn-icon--tools; - @extend .svg-images--bn-icon--tools-dims; - transform: scale(0.9); -} - -.bn-icon-user { - @extend .svg-images--bn-icon--user; - @extend .svg-images--bn-icon--user-dims; -} - -.bn-icon-view { - @extend .svg-images--bn-icon--view; - @extend .svg-images--bn-icon--view-dims; - transform: scale(0.95); -} - // Container #BetterNavigator { position: fixed; z-index: 99999; max-height: 100%; - overflow: auto; - font-family: Helvetica, Arial, sans-serif; - font-size: 12px; - line-height: 16px; text-align: left; + * { + // Reset all styles to avoid inheriting from + // the parent page theme + all: initial; + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; + line-height: 1.2; + } + a { text-decoration: none; } @@ -122,7 +62,7 @@ span[class*=' bn-icon']{ #BetterNavigatorStatus { border-width: 1px; - padding: 10px 15px 8px 35px; + padding: 0 14px; } #BetterNavigatorContent { @@ -169,49 +109,97 @@ span[class*=' bn-icon']{ transform: rotate(90deg) translate(0, -100%); } } + + // Icons + span[class^='bn-icon'], + span[class*=' bn-icon']{ + display: inline-block; + } + + .bn-icon-close { + @extend .svg-images--bn-icon--close; + @extend .svg-images--bn-icon--close-dims; + transform: scale(1.3); + } + + .bn-icon-cog { + @extend .svg-images--bn-icon--cog; + @extend .svg-images--bn-icon--cog-dims; + } + + .bn-icon-db { + @extend .svg-images--bn-icon--db; + @extend .svg-images--bn-icon--db-dims; + transform: scale(0.8); + } + + .bn-icon-edit { + @extend .svg-images--bn-icon--edit; + @extend .svg-images--bn-icon--edit-dims; + transform: scale(0.9); + } + + .bn-icon-flush { + @extend .svg-images--bn-icon--flush; + @extend .svg-images--bn-icon--flush-dims; + transform: scale(0.8); + } + + .bn-icon-info { + @extend .svg-images--bn-icon--info; + @extend .svg-images--bn-icon--info-dims; + transform: scale(0.7); + } + + .bn-icon-tick { + @extend .svg-images--bn-icon--tick; + @extend .svg-images--bn-icon--tick-dims; + transform: scale(0.7); + } + + .bn-icon-tools { + @extend .svg-images--bn-icon--tools; + @extend .svg-images--bn-icon--tools-dims; + transform: scale(0.9); + } + + .bn-icon-user { + @extend .svg-images--bn-icon--user; + @extend .svg-images--bn-icon--user-dims; + } + + .bn-icon-view { + @extend .svg-images--bn-icon--view; + @extend .svg-images--bn-icon--view-dims; + transform: scale(0.95); + } } // Status #BetterNavigatorStatus { display: block; - color: $textColor; + width: calc(100% - 15px - 15px); + height: 30px; + appearance: none; background: $archiveColor; border: 1px solid mix($black, $archiveColor, 10%); - border-width: 0; - text-transform: uppercase; cursor: pointer; - padding: 10px 15px 8px; - font-weight: bold; - transition: 100ms background-color ease-in-out; - font-size: 14px; - line-height: 1.2; + padding: 0 15px; margin: 0; + transition: 100ms background-color ease-in-out; + white-space: nowrap; - #BetterNavigatorStatusButton { - appearance: none; - width: 100%; - height: 38px; - position: absolute; - top: 0; - left: 0; - border: 0; - background: transparent; + .status-text { + display: inline-block; text-align: left; - padding: 2px 14px 0; - } - - .bn-icon-cog { - margin: -4px 8px -2px -4px; - } - - .bn-icon-close { - float: right; - } - - .bn-icon-cog, - .bn-icon-close { - opacity: .7; + color: $textColor; + text-transform: uppercase; + font-family: inherit; + font-weight: bold; + font-size: 18.5px; + line-height: 1.2; + letter-spacing: 0.1px; } &:hover, @@ -220,10 +208,15 @@ span[class*=' bn-icon']{ .bn-icon-cog, .bn-icon-close { - opacity: 1; + opacity: 1; } } + &:focus-visible { + outline: 3px solid mix($black, $archiveColor, 10%); + outline-offset: 2px; + } + &.Live { background: $liveColor; border-color: mix($black, $liveColor, 10%); @@ -231,6 +224,10 @@ span[class*=' bn-icon']{ &:hover { background: mix($black, $liveColor, 5%); } + + &:focus-visible { + outline: 3px solid mix($black, $liveColor, 10%); + } } &.Draft { @@ -240,19 +237,44 @@ span[class*=' bn-icon']{ &:hover { background: mix($black, $stageColor, 5%); } + + &:focus-visible { + outline: 3px solid mix($black, $stageColor, 10%); + } } + + .bn-icon-cog { + margin: -4px 8px -1px -4px; + } + + .bn-icon-close { + float: right; + margin: 3px -6px 0; + } + + .bn-icon-cog, + .bn-icon-close { + opacity: .7; + } +} + +#BetterNavigatorStatusIcon { + display: inline-block; + cursor: inherit; + transition: 100ms opacity ease-in-out; } // Content #BetterNavigatorContent { + display: block; padding: 6px; color: $contentColor; background: $contentBackground; border: 1px solid mix($black, $contentBackground, 10%); border-width: 0 0 1px 1px; min-width: 140px; - transition: 100ms background-color ease-in-out; + overflow: auto; .bn-heading { display: block; @@ -267,7 +289,8 @@ span[class*=' bn-icon']{ span[class^='bn-icon'], span[class*=' bn-icon'] { - margin: -2px 5px -3px -2px; + cursor: inherit; + margin: -2px 5px -3px -2px; } a, @@ -277,12 +300,14 @@ span[class*=' bn-icon']{ color: $buttonColor; font-family: Helvetica, Arial, sans-serif; font-size: 12px; + line-height: 1.4; border-radius: 5px; border-bottom: 1px solid $buttonBorder; margin: 0 0 4px 0; padding: 6px 10px 5px 10px; - line-height: 16px; font-weight: bold; + cursor: pointer; + transition: 100ms background-color ease-in-out; .light { font-weight: normal; @@ -295,6 +320,12 @@ span[class*=' bn-icon']{ color: $black; } + a:focus-visible { + border-bottom: 1px solid transparent; + outline: 2px solid mix($black, $buttonBorder, 10%); + outline-offset: 1px; + } + a:active { background: mix($black, $buttonBackground, 10%); border-color: mix($white, $buttonBorder, 10%); diff --git a/templates/JonoM/BetterNavigator/BetterNavigator.ss b/templates/JonoM/BetterNavigator/BetterNavigator.ss index 0410fc4..f8c4152 100644 --- a/templates/JonoM/BetterNavigator/BetterNavigator.ss +++ b/templates/JonoM/BetterNavigator/BetterNavigator.ss @@ -1,11 +1,9 @@