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