tonyair/silverstripe-betternavigator
1
0
Fork 0
mirror of https://github.com/jonom/silverstripe-betternavigator.git synced 2024-10-22 14:05:51 +02:00
Code Issues Projects Releases Wiki Activity

Simplified transform css

Browse Source
This commit is contained in:
Jono Menz 2014-10-26 12:05:37 +10:30
parent 3b53e7b36a
commit 8329322693
2 changed files with 23 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/betternavigator.css
View File

@ -89,23 +89,14 @@ span[class^='bn-icon'], span[class*=' bn-icon'] {
text-align: left;
}
#BetterNavigator.collapsed {
right: auto;
left: 100%;
width: auto;
overflow: visible;
}
#BetterNavigator.collapsed #BetterNavigatorStatus {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
white-space: nowrap;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #fff;
-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);
border-width: 0 1px 1px 0;
}
#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-close {

35
scss/betternavigator.scss
View File

@ -16,6 +16,8 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
top: 0;
right: 0;
z-index: 99999;
max-height: 100%;
overflow: auto;
background: #cfd8de;
border: 1px solid #ecf0f2;
border-width: 0 0 1px 1px;
@ -27,30 +29,23 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
//Toggle states
&.collapsed {
right: auto;
left: 100%;
width: auto;
overflow: visible;
}
&.collapsed #BetterNavigatorStatus {
@include rotate(90deg);
@include transform-origin(0,0);
white-space: nowrap;
box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
border: 1px solid #fff;
@include transform-origin(right,top);
@include transform(rotate(90deg) translate(100%,0));
border-width: 0 1px 1px 0;
.bn-icon-close {
#BetterNavigatorStatus {
.bn-icon-close {
display: none;
}
.bn-icon-cog {
display: inline-block;
}
}
#BetterNavigatorContent {
display: none;
}
.bn-icon-cog {
display: inline-block;
}
}
&.collapsed #BetterNavigatorStatus {
}
&.collapsed #BetterNavigatorContent {
display: none;
}
}