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
Thibaud Colas eac5e0bc2c Finish re-implementing form styles based on design feedback & code review
Co-authored-by: LB Johnston <mail@lb.ee>
2022-08-05 10:36:52 +02:00

51 lines
887 B
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-z-[90]
w-right-0
w-top-full
w-w-full
w-h-[calc(100vh-100%)]
sm:w-max-w-[500px]
w-transform
w-translate-x-full
w-px-6
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;
&--open {
@apply w-translate-x-0;
}
&__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;
}
}