Compare commits
3 Commits
93bbf20580
...
f9731d90d4
| Author | SHA1 | Date |
|---|---|---|
Ed Wilde
|
f9731d90d4 | |
|
Ed Wilde
|
64b9dfb70e | |
|
Ed Wilde
|
e95946d5f8 |
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
{"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"}
|
||||
BIN
images/demo.png
BIN
images/demo.png
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 113 KiB |
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<section id="BetterNavigator" class="collapsed $CssClass" aria-label="Better navigator - $ViewingTitle page">
|
||||
|
||||
<h2 id="BetterNavigatorStatus" class="$Viewing" tabindex="-1">
|
||||
<button id="BetterNavigatorStatusButton" aria-expanded="false" aria-controls="BetterNavigator" aria-label="<%t JonoM\BetterNavigator.ARIA_MENU_LABEL 'Tool menu' %>">
|
||||
<span id="BetterNavigatorStatusIcon" class="bn-icon-cog"></span>
|
||||
</button>
|
||||
$ViewingTitle
|
||||
</h2>
|
||||
<button id="BetterNavigatorStatus" class="$Viewing" aria-expanded="false" aria-controls="BetterNavigatorContent" aria-label="<%t JonoM\BetterNavigator.ARIA_MENU_LABEL 'Tool menu' %>">
|
||||
<span id="BetterNavigatorStatusIcon" class="bn-icon-cog"></span>
|
||||
<span class="status-text" aria-hidden="true">$ViewingTitle</span>
|
||||
</button>
|
||||
|
||||
<div id="BetterNavigatorContent">
|
||||
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
<% if $LiveLink.Link %>
|
||||
<a href="$LiveLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_LIVE_LABEL 'View live' %></a>
|
||||
<% else %>
|
||||
<a href="$LiveLink.Link" aria-disabled="true" class="bn-disabled"><span class="bn-icon-view"></a><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></a>
|
||||
<a href="$LiveLink.Link" aria-disabled="true" class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></a>
|
||||
<% end_if %>
|
||||
<% end_if %>
|
||||
<% if not $StageLink.Active %>
|
||||
|
|
@ -44,7 +42,7 @@
|
|||
|
||||
<% if $Mode == 'dev' || $IsDeveloper %>
|
||||
|
||||
<h3 class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></h2>
|
||||
<h2 class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></h2>
|
||||
|
||||
<ul class="bn-links">
|
||||
|
||||
|
|
@ -79,7 +77,7 @@
|
|||
|
||||
<% if $Mode == 'dev' %>
|
||||
|
||||
<h3 class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></h2>
|
||||
<h2 class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></h2>
|
||||
|
||||
<ul class="bn-links">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue