mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 09:22:34 +00:00
Merge branch 'master' into issue-3940
This commit is contained in:
Tuğçe Küçükoğlu
commit
5283d49b98
1063 changed files with 61270 additions and 23347 deletions
255
components/lib/sidebar/BaseSidebar.vue
Normal file
255
components/lib/sidebar/BaseSidebar.vue
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-sidebar-mask {
|
||||
display: none;
|
||||
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);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/* Position */
|
||||
const inlineStyles = {
|
||||
mask: ({ position }) => ({
|
||||
position: 'fixed',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
left: 0,
|
||||
top: 0,
|
||||
display: 'flex',
|
||||
justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
|
||||
alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
|
||||
})
|
||||
};
|
||||
|
||||
const classes = {
|
||||
mask: ({ instance, props }) => {
|
||||
const positions = ['left', 'right', 'top', 'bottom'];
|
||||
const pos = positions.find((item) => item === props.position);
|
||||
|
||||
return [
|
||||
'p-sidebar-mask',
|
||||
{
|
||||
'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
|
||||
},
|
||||
pos ? `p-sidebar-${pos}` : ''
|
||||
];
|
||||
},
|
||||
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: 'p-sidebar-close-icon',
|
||||
content: 'p-sidebar-content'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'sidebar', 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,
|
||||
inlineStyles,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
38
components/lib/sidebar/Sidebar.d.ts
vendored
38
components/lib/sidebar/Sidebar.d.ts
vendored
|
|
@ -7,15 +7,19 @@
|
|||
* @module sidebar
|
||||
*
|
||||
*/
|
||||
import { VNode } from 'vue';
|
||||
import { TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
export declare type SidebarPassThroughOptionType = SidebarPassThroughAttributes | ((options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes) | null | undefined;
|
||||
export declare type SidebarPassThroughOptionType = SidebarPassThroughAttributes | ((options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes | string) | string | null | undefined;
|
||||
|
||||
export declare type SidebarPassThroughTransitionType = TransitionProps | ((options: SidebarPassThroughMethodOptions) => TransitionProps) | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface SidebarPassThroughMethodOptions {
|
||||
instance: any;
|
||||
props: SidebarProps;
|
||||
state: SidebarState;
|
||||
}
|
||||
|
|
@ -26,33 +30,42 @@ export interface SidebarPassThroughMethodOptions {
|
|||
*/
|
||||
export interface SidebarPassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header's DOM element.
|
||||
* Used to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header content's DOM element.
|
||||
* Used to pass attributes to the header content's DOM element.
|
||||
*/
|
||||
headerContent?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close button's DOM element.
|
||||
* Used to pass attributes to the close button's DOM element.
|
||||
*/
|
||||
closeButton?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close icon's DOM element.
|
||||
* Used to pass attributes to the close icon's DOM element.
|
||||
*/
|
||||
closeIcon?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the content's DOM element.
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the mask's DOM element.
|
||||
* Used to pass attributes to the mask's DOM element.
|
||||
*/
|
||||
mask?: SidebarPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
*/
|
||||
hooks?: ComponentHooks;
|
||||
/**
|
||||
* Used to control Vue Transition API.
|
||||
*/
|
||||
transition?: SidebarPassThroughTransitionType;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -123,10 +136,15 @@ export interface SidebarProps {
|
|||
*/
|
||||
blockScroll?: boolean | undefined;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* Used to pass attributes to DOM elements inside the component.
|
||||
* @type {SidebarPassThroughOptions}
|
||||
*/
|
||||
pt?: SidebarPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<Portal>
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick" v-bind="ptm('mask')">
|
||||
<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 :ref="headerContainerRef" class="p-sidebar-header" v-bind="ptm('header')">
|
||||
<div v-if="$slots.header" class="p-sidebar-header-content" v-bind="ptm('headerContent')">
|
||||
<div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
|
||||
<transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
|
||||
<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="cx('header')" v-bind="ptm('header')">
|
||||
<div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">
|
||||
<slot name="header"></slot>
|
||||
</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')" data-pc-group-section="iconcontainer">
|
||||
<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'), closeIcon]" v-bind="ptm('closeIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<div :ref="contentRef" class="p-sidebar-content" v-bind="ptm('content')">
|
||||
<div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -23,56 +23,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
import Portal from 'primevue/portal';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler, ZIndexUtils } from 'primevue/utils';
|
||||
import BaseSidebar from './BaseSidebar.vue';
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
extends: BaseComponent,
|
||||
extends: BaseSidebar,
|
||||
inheritAttrs: false,
|
||||
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() {
|
||||
return {
|
||||
containerVisible: this.visible
|
||||
|
|
@ -116,7 +78,7 @@ export default {
|
|||
},
|
||||
onBeforeLeave() {
|
||||
if (this.modal) {
|
||||
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
||||
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
||||
}
|
||||
},
|
||||
onLeave() {
|
||||
|
|
@ -189,12 +151,6 @@ export default {
|
|||
closeButtonRef(el) {
|
||||
this.closeButton = el;
|
||||
},
|
||||
getPositionClass() {
|
||||
const positions = ['left', 'right', 'top', 'bottom'];
|
||||
const pos = positions.find((item) => item === this.position);
|
||||
|
||||
return pos ? `p-sidebar-${pos}` : '';
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
if (!this.outsideClickListener) {
|
||||
this.outsideClickListener = (event) => {
|
||||
|
|
@ -217,33 +173,11 @@ export default {
|
|||
}
|
||||
},
|
||||
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() {
|
||||
return this.position === 'full';
|
||||
},
|
||||
closeAriaLabel() {
|
||||
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: {
|
||||
|
|
@ -256,178 +190,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</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…
Add table
Add a link
Reference in a new issue