tonyair
/
silverstripe-betternavigator
mirror of https://github.com/jonom/silverstripe-betternavigator.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixing location styling

This commit is contained in:
Michael Nowina-Krowicki 2020-12-01 13:21:36 +10:30
parent b02ce96761
commit 8854c47dd0
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/betternavigator.css
View File

@ -27,7 +27,7 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; }
.better-navigator { 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; }
.better-navigator a { text-decoration: none; }
.better-navigator form { display: none; }
.better-navigator.collapsed { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -moz-transform-origin: right top; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; -moz-transform: rotate(90deg) translate(100%, 0); -ms-transform: rotate(90deg) translate(100%, 0); -webkit-transform: rotate(90deg) translate(100%, 0); transform: rotate(90deg) translate(100%, 0); }
.better-navigator.collapsed { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }
.better-navigator.collapsed.translucent { opacity: 0.5; transition: opacity 250ms; }
.better-navigator.collapsed.translucent:hover { opacity: 1; }
.better-navigator.collapsed .better-navigator__status { border-width: 1px; }
@ -35,11 +35,13 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; }
.better-navigator.collapsed .better-navigator__status .bn-icon-cog { display: inline-block; }
.better-navigator.collapsed .better-navigator__content { display: none; }
.better-navigator.right-top { right: 0; top: 0; }
.better-navigator.right-top.collapsed { -moz-transform-origin: right top; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; -moz-transform: rotate(90deg) translate(100%, 0); -ms-transform: rotate(90deg) translate(100%, 0); -webkit-transform: rotate(90deg) translate(100%, 0); transform: rotate(90deg) translate(100%, 0); }
.better-navigator.right-bottom { right: 0; bottom: 0; }
.better-navigator.right-bottom.collapsed { bottom: 4rem; }
.better-navigator.right-bottom.collapsed { -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom; -moz-transform: rotate(90deg) translate(0, 100%); -ms-transform: rotate(90deg) translate(0, 100%); -webkit-transform: rotate(90deg) translate(0, 100%); transform: rotate(90deg) translate(0, 100%); }
.better-navigator.left-bottom { left: 0; bottom: 0; }
.better-navigator.left-bottom.collapsed { bottom: 4rem; }
.better-navigator.left-bottom.collapsed { -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; -moz-transform: rotate(90deg) translate(-100%, 0); -ms-transform: rotate(90deg) translate(-100%, 0); -webkit-transform: rotate(90deg) translate(-100%, 0); transform: rotate(90deg) translate(-100%, 0); }
.better-navigator.left-top { left: 0; top: 0; }
.better-navigator.left-top.collapsed { -moz-transform-origin: left top; -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -moz-transform: rotate(90deg) translate(0, -100%); -ms-transform: rotate(90deg) translate(0, -100%); -webkit-transform: rotate(90deg) translate(0, -100%); transform: rotate(90deg) translate(0, -100%); }
.better-navigator__status { color: #fff; background: #6f6f6f; border: 1px solid #646464; border-width: 0; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; font-weight: bold; }
.better-navigator__status .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; }

18
scss/betternavigator.scss
View File

@ -33,8 +33,6 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
&.collapsed {
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
@include transform-origin(right,top);
@include transform(rotate(90deg) translate(100%,0));
&.translucent {
opacity: 0.5;
@ -64,6 +62,11 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
&.right-top {
right: 0;
top: 0;
&.collapsed {
@include transform-origin(right, top);
@include transform(rotate(90deg) translate(100%, 0));
}
}
&.right-bottom {
@ -71,7 +74,8 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
bottom: 0;
&.collapsed {
bottom: 4rem;
@include transform-origin(right, bottom);
@include transform(rotate(90deg) translate(0, 100%));
}
}
@ -80,13 +84,19 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
bottom: 0;
&.collapsed {
bottom: 4rem;
@include transform-origin(left, bottom);
@include transform(rotate(90deg) translate(-100%, 0));
}
}
&.left-top {
left: 0;
top: 0;
&.collapsed {
@include transform-origin(left, top);
@include transform(rotate(90deg) translate(0, -100%));
}
}
}