vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Restyle layout to use transforms in main docs

old
Javi Velasco 2015-11-18 22:33:22 +01:00
parent a24cad012d
commit b8941e172d
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/app/components/layout/main/style.scss
View File

@ -19,7 +19,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
transition: all $animation-duration $animation-curve-default; z-index: $z-index-normal;
transition: padding $animation-duration $animation-curve-default;
} }
.navigation { .navigation {
@ -29,24 +30,25 @@
left: 0; left: 0;
z-index: $z-index-high; z-index: $z-index-high;
box-shadow: $documentation-left-shadow; box-shadow: $documentation-left-shadow;
transition: all $animation-duration $animation-curve-default; transition: transform $animation-duration $animation-curve-default;
} }
.playground { .playground {
position: fixed; position: fixed;
top: $appbar-height; top: $appbar-height;
right: 0;
bottom: 0; bottom: 0;
z-index: $z-index-high; z-index: $z-index-high;
width: $playground-width; width: $playground-width;
background: $color-background; background: $color-background;
box-shadow: $documentation-right-shadow; box-shadow: $documentation-right-shadow;
transition: right $animation-duration $animation-curve-default; transition: transform $animation-duration $animation-curve-default;
} }
.root { .root {
&:not(.with-playground) { &:not(.with-playground) {
> .playground { > .playground {
right: - ($playground-width * 1.1); transform: translateX(100%);
} }
> .documentation { > .documentation {
padding-right: 0; padding-right: 0;
@ -58,7 +60,7 @@
} }
&.with-playground { &.with-playground {
> .playground { > .playground {
right: 0; transform: translateY(0);
} }
> .documentation { > .documentation {
padding-right: $playground-width; padding-right: $playground-width;