Refactor #3965 - For Sidebar
Bahadır Sofuoğlu
parent
bae2015e96
commit
661cf73a48
|
|
@ -0,0 +1,261 @@
|
||||||
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
import { useStyle } from 'primevue/usestyle';
|
||||||
|
|
||||||
|
const styles = `
|
||||||
|
.p-sidebar-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: transparent;
|
||||||
|
transition-property: background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-mask.p-component-overlay {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-visible {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
pointer-events: auto;
|
||||||
|
transform: translate3d(0px, 0px, 0px);
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-full .p-sidebar {
|
||||||
|
transition: none;
|
||||||
|
transform: none;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
max-height: 100%;
|
||||||
|
top: 0px !important;
|
||||||
|
left: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation */
|
||||||
|
/* Center */
|
||||||
|
.p-sidebar-left .p-sidebar-enter-from,
|
||||||
|
.p-sidebar-left .p-sidebar-leave-to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
.p-sidebar-right .p-sidebar-enter-from,
|
||||||
|
.p-sidebar-right .p-sidebar-leave-to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
.p-sidebar-top .p-sidebar-enter-from,
|
||||||
|
.p-sidebar-top .p-sidebar-leave-to {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
.p-sidebar-bottom .p-sidebar-enter-from,
|
||||||
|
.p-sidebar-bottom .p-sidebar-leave-to {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
.p-sidebar-full .p-sidebar-enter-from,
|
||||||
|
.p-sidebar-full .p-sidebar-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.p-sidebar-full .p-sidebar-enter-active,
|
||||||
|
.p-sidebar-full .p-sidebar-leave-active {
|
||||||
|
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position */
|
||||||
|
.p-sidebar-left {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-top {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-bottom {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
.p-sidebar-left .p-sidebar {
|
||||||
|
width: 20rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-right .p-sidebar {
|
||||||
|
width: 20rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-top .p-sidebar {
|
||||||
|
height: 10rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-bottom .p-sidebar {
|
||||||
|
height: 10rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-left .p-sidebar-sm,
|
||||||
|
.p-sidebar-right .p-sidebar-sm {
|
||||||
|
width: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-left .p-sidebar-md,
|
||||||
|
.p-sidebar-right .p-sidebar-md {
|
||||||
|
width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-left .p-sidebar-lg,
|
||||||
|
.p-sidebar-right .p-sidebar-lg {
|
||||||
|
width: 60rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-top .p-sidebar-sm,
|
||||||
|
.p-sidebar-bottom .p-sidebar-sm {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-top .p-sidebar-md,
|
||||||
|
.p-sidebar-bottom .p-sidebar-md {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-top .p-sidebar-lg,
|
||||||
|
.p-sidebar-bottom .p-sidebar-lg {
|
||||||
|
height: 30rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sidebar-left .p-sidebar-content,
|
||||||
|
.p-sidebar-right .p-sidebar-content,
|
||||||
|
.p-sidebar-top .p-sidebar-content,
|
||||||
|
.p-sidebar-bottom .p-sidebar-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 64em) {
|
||||||
|
.p-sidebar-left .p-sidebar-lg,
|
||||||
|
.p-sidebar-left .p-sidebar-md,
|
||||||
|
.p-sidebar-right .p-sidebar-lg,
|
||||||
|
.p-sidebar-right .p-sidebar-md {
|
||||||
|
width: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const classes = {
|
||||||
|
mask: ({ instance, props }) => [
|
||||||
|
'p-sidebar-mask',
|
||||||
|
instance.getPositionClass(),
|
||||||
|
{
|
||||||
|
'p-component-overlay p-component-overlay-enter': props.modal,
|
||||||
|
'p-sidebar-mask-scrollblocker': props.blockScroll,
|
||||||
|
'p-sidebar-visible': instance.containerVisible,
|
||||||
|
'p-sidebar-full': instance.fullScreen
|
||||||
|
}
|
||||||
|
],
|
||||||
|
root: ({ instance }) => [
|
||||||
|
'p-sidebar p-component',
|
||||||
|
{
|
||||||
|
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||||
|
'p-ripple-disabled': instance.$primevue.config.ripple === false,
|
||||||
|
'p-sidebar-full': instance.fullScreen
|
||||||
|
}
|
||||||
|
],
|
||||||
|
header: 'p-sidebar-header',
|
||||||
|
headerContent: 'p-sidebar-header-content',
|
||||||
|
closeButton: 'p-sidebar-close p-sidebar-icon p-link',
|
||||||
|
closeIcon: ({ props }) => ['p-sidebar-close-icon ', props.closeIcon],
|
||||||
|
content: 'p-sidebar-content'
|
||||||
|
};
|
||||||
|
|
||||||
|
const { load: loadStyle } = useStyle(styles, { id: 'primevue_sidebar_style', manual: true });
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BaseSidebar',
|
||||||
|
extends: BaseComponent,
|
||||||
|
props: {
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
baseZIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
autoZIndex: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
dismissable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showCloseIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
blockScroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
classes
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isUnstyled: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newValue) {
|
||||||
|
!newValue && loadStyle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -127,6 +127,11 @@ export interface SidebarProps {
|
||||||
* @type {SidebarPassThroughOptions}
|
* @type {SidebarPassThroughOptions}
|
||||||
*/
|
*/
|
||||||
pt?: SidebarPassThroughOptions;
|
pt?: SidebarPassThroughOptions;
|
||||||
|
/**
|
||||||
|
* When enabled, it removes component related styles in the core.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
unstyled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<Portal>
|
<Portal>
|
||||||
<div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick" v-bind="ptm('mask')">
|
<div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" v-bind="ptm('mask')">
|
||||||
<transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
<transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||||
<div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
|
<div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
|
||||||
<div :ref="headerContainerRef" class="p-sidebar-header" v-bind="ptm('header')">
|
<div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
|
||||||
<div v-if="$slots.header" class="p-sidebar-header-content" v-bind="ptm('headerContent')">
|
<div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
</div>
|
</div>
|
||||||
<button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')">
|
<button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')">
|
||||||
<slot name="closeicon">
|
<slot name="closeicon">
|
||||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
|
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')"></component>
|
||||||
</slot>
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div :ref="contentRef" class="p-sidebar-content" v-bind="ptm('content')">
|
<div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseComponent from 'primevue/basecomponent';
|
import BaseSidebar from './BaseSidebar';
|
||||||
import FocusTrap from 'primevue/focustrap';
|
import FocusTrap from 'primevue/focustrap';
|
||||||
import TimesIcon from 'primevue/icons/times';
|
import TimesIcon from 'primevue/icons/times';
|
||||||
import Portal from 'primevue/portal';
|
import Portal from 'primevue/portal';
|
||||||
|
|
@ -32,47 +32,9 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Sidebar',
|
name: 'Sidebar',
|
||||||
extends: BaseComponent,
|
extends: BaseSidebar,
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
emits: ['update:visible', 'show', 'hide', 'after-hide'],
|
emits: ['update:visible', 'show', 'hide', 'after-hide'],
|
||||||
props: {
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
position: {
|
|
||||||
type: String,
|
|
||||||
default: 'left'
|
|
||||||
},
|
|
||||||
baseZIndex: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
autoZIndex: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
dismissable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showCloseIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
closeIcon: {
|
|
||||||
type: String,
|
|
||||||
default: undefined
|
|
||||||
},
|
|
||||||
modal: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
blockScroll: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
containerVisible: this.visible
|
containerVisible: this.visible
|
||||||
|
|
@ -217,33 +179,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
containerClass() {
|
|
||||||
return [
|
|
||||||
'p-sidebar p-component',
|
|
||||||
{
|
|
||||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
|
||||||
'p-ripple-disabled': this.$primevue.config.ripple === false,
|
|
||||||
'p-sidebar-full': this.fullScreen
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
fullScreen() {
|
fullScreen() {
|
||||||
return this.position === 'full';
|
return this.position === 'full';
|
||||||
},
|
},
|
||||||
closeAriaLabel() {
|
closeAriaLabel() {
|
||||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
||||||
},
|
|
||||||
maskClass() {
|
|
||||||
return [
|
|
||||||
'p-sidebar-mask',
|
|
||||||
this.getPositionClass(),
|
|
||||||
{
|
|
||||||
'p-component-overlay p-component-overlay-enter': this.modal,
|
|
||||||
'p-sidebar-mask-scrollblocker': this.blockScroll,
|
|
||||||
'p-sidebar-visible': this.containerVisible,
|
|
||||||
'p-sidebar-full': this.fullScreen
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
|
|
@ -256,178 +196,3 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.p-sidebar-mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
pointer-events: none;
|
|
||||||
background-color: transparent;
|
|
||||||
transition-property: background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-mask.p-component-overlay {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-visible {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
pointer-events: auto;
|
|
||||||
transform: translate3d(0px, 0px, 0px);
|
|
||||||
position: relative;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-content {
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-full .p-sidebar {
|
|
||||||
transition: none;
|
|
||||||
transform: none;
|
|
||||||
width: 100vw !important;
|
|
||||||
height: 100vh !important;
|
|
||||||
max-height: 100%;
|
|
||||||
top: 0px !important;
|
|
||||||
left: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
/* Center */
|
|
||||||
.p-sidebar-left .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-left .p-sidebar-leave-to {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-right .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-right .p-sidebar-leave-to {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-top .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-top .p-sidebar-leave-to {
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-bottom .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-bottom .p-sidebar-leave-to {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-full .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-full .p-sidebar-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.p-sidebar-full .p-sidebar-enter-active,
|
|
||||||
.p-sidebar-full .p-sidebar-leave-active {
|
|
||||||
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position */
|
|
||||||
.p-sidebar-left {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-bottom {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
.p-sidebar-left .p-sidebar {
|
|
||||||
width: 20rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-right .p-sidebar {
|
|
||||||
width: 20rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar {
|
|
||||||
height: 10rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-bottom .p-sidebar {
|
|
||||||
height: 10rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-sm,
|
|
||||||
.p-sidebar-right .p-sidebar-sm {
|
|
||||||
width: 20rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-md,
|
|
||||||
.p-sidebar-right .p-sidebar-md {
|
|
||||||
width: 40rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-lg,
|
|
||||||
.p-sidebar-right .p-sidebar-lg {
|
|
||||||
width: 60rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar-sm,
|
|
||||||
.p-sidebar-bottom .p-sidebar-sm {
|
|
||||||
height: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar-md,
|
|
||||||
.p-sidebar-bottom .p-sidebar-md {
|
|
||||||
height: 20rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar-lg,
|
|
||||||
.p-sidebar-bottom .p-sidebar-lg {
|
|
||||||
height: 30rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-content,
|
|
||||||
.p-sidebar-right .p-sidebar-content,
|
|
||||||
.p-sidebar-top .p-sidebar-content,
|
|
||||||
.p-sidebar-bottom .p-sidebar-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 64em) {
|
|
||||||
.p-sidebar-left .p-sidebar-lg,
|
|
||||||
.p-sidebar-left .p-sidebar-md,
|
|
||||||
.p-sidebar-right .p-sidebar-lg,
|
|
||||||
.p-sidebar-right .p-sidebar-md {
|
|
||||||
width: 20rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue