100 lines
1.9 KiB
SCSS
100 lines
1.9 KiB
SCSS
@import "./config";
|
|
@import "~react-toolbox/app_bar/config";
|
|
@import "~react-toolbox/button/config";
|
|
|
|
hr {
|
|
margin: 4rem 0;
|
|
border-top: 1px solid $color-divider;
|
|
}
|
|
|
|
.appbar {
|
|
padding-right: 8 * $unit;
|
|
}
|
|
|
|
.playground-button {
|
|
position: fixed;
|
|
top: $appbar-height - ($button-floating-height / 2);
|
|
right: $button-floating-height / 2;
|
|
z-index: $z-index-highest;
|
|
}
|
|
|
|
.documentation {
|
|
position: fixed;
|
|
top: $appbar-height;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: $z-index-normal;
|
|
transition: padding $animation-duration $animation-curve-default;
|
|
}
|
|
|
|
.navigation {
|
|
position: fixed;
|
|
top: $appbar-height;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: $z-index-high;
|
|
box-shadow: $documentation-left-shadow;
|
|
transition: transform $animation-duration $animation-curve-default;
|
|
}
|
|
|
|
.playground {
|
|
position: fixed;
|
|
top: $appbar-height;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: $z-index-high;
|
|
width: $playground-width;
|
|
background: $color-background;
|
|
box-shadow: $documentation-right-shadow;
|
|
transition: transform $animation-duration $animation-curve-default;
|
|
}
|
|
|
|
.root {
|
|
&:not(.with-playground) {
|
|
> .playground {
|
|
transform: translateX(100%);
|
|
}
|
|
> .documentation {
|
|
padding-right: 0;
|
|
padding-left: $navigation-width;
|
|
}
|
|
> .navigation {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
&.with-playground {
|
|
> .playground {
|
|
transform: translateY(0);
|
|
}
|
|
> .documentation {
|
|
padding-right: $playground-width;
|
|
padding-left: 0;
|
|
}
|
|
> .navigation {
|
|
transform: translateX(- 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.load-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media(min-width: $media-min-width) {
|
|
.root {
|
|
.playground {
|
|
width: $playground-max-width;
|
|
}
|
|
&.with-playground {
|
|
> .documentation {
|
|
padding-right: $playground-max-width;
|
|
padding-left: $navigation-width;
|
|
}
|
|
> .navigation {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|
|
}
|