0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 17:36:49 +01:00
wagtail/client/scss/components/_form-side.scss

61 lines
1.1 KiB
SCSS

@use 'sass:color';
@use 'sass:map';
@use 'sass:math';
.side-panel-open {
@apply w-overflow-y-hidden sm:w-overflow-y-auto;
}
.form-side {
@apply w-absolute
w-right-0
w-top-full
w-w-full
w-h-[calc(100vh-100%)]
md:w-w-1/3
w-transform
w-translate-x-full
w-px-5
xl:w-px-10
w-py-4
w-bg-white
w-box-border
w-transition
w-duration-300
w-border-l
w-border-grey-100
w-overflow-y-auto
w-scrollbar-thin
md:w-min-w-[22.875rem]
sm:w-max-w-[22.5rem]
md:w-max-w-[35.937rem]
lg:w-max-w-[31.25rem]
xl:w-max-w-[46.875rem];
z-index: calc(theme('zIndex.header') - 10);
&--open {
@apply w-translate-x-0;
}
&--initial {
@apply w-transition-none;
}
&__close-button {
@apply w-text-primary w-absolute w-left-3 w-top-3 hover:w-text-primary-200 w-bg-white w-p-3 w-hidden w-transition;
.icon {
@apply w-w-4 w-h-4;
}
}
&--open .form-side__close-button,
&--open .form-side__panel {
@apply w-block;
}
&__panel {
@apply w-hidden w-h-full;
}
}