mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
104 lines
2.1 KiB
SCSS
104 lines
2.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;
|
|
}
|
|
|
|
.side-panel-resizing {
|
|
@apply w-select-none w-cursor-ew-resize;
|
|
|
|
.form-side {
|
|
@apply w-transition;
|
|
}
|
|
}
|
|
|
|
.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-bg-white
|
|
w-box-border
|
|
w-transition-all
|
|
motion-reduce:w-transition-none
|
|
w-duration-300
|
|
w-border-l
|
|
w-border-grey-100
|
|
w-min-w-full
|
|
md:w-min-w-[22.875rem]
|
|
w-max-w-full
|
|
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;
|
|
}
|
|
|
|
&--preview {
|
|
@apply sm:w-max-w-[70vw];
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
|
|
&__resize-grip-container {
|
|
@apply w-absolute w-place-items-center w-hidden md:w-flex w-z-10 w-left-[-21.5px];
|
|
|
|
height: calc(100% - theme('spacing.8'));
|
|
}
|
|
|
|
&__resize-grip {
|
|
@apply w-text-primary hover:w-text-primary-200 w-border w-border-transparent w-rounded w-bg-white w-p-3 w-hidden w-touch-pinch-zoom w-cursor-ew-resize;
|
|
|
|
.form-side--open & {
|
|
@apply w-flex;
|
|
}
|
|
|
|
&:focus-within:has(:focus-visible) {
|
|
@include focus-outline;
|
|
}
|
|
|
|
@supports not selector(:focus-visible) {
|
|
&:focus-within {
|
|
/* Fallback for browsers without :focus-visible support */
|
|
@include focus-outline;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
@apply w-w-4 w-h-4;
|
|
}
|
|
}
|
|
|
|
&__width-input {
|
|
@apply w-w-0 w-h-0 w-opacity-0 w-absolute w-pointer-events-none;
|
|
}
|
|
|
|
&--open .form-side__close-button,
|
|
&--open .form-side__panel {
|
|
@apply w-block;
|
|
}
|
|
|
|
&__panel {
|
|
@apply w-px-5 xl:w-px-10 w-py-4 w-w-full w-h-full w-overflow-y-auto w-scrollbar-thin w-hidden;
|
|
}
|
|
}
|