@ithinkdt/naive
Version:
iThinkDT Naive UI
241 lines (231 loc) • 9.04 kB
JavaScript
import {
cB,
cM,
cE,
c,
CSS_MOUNT_ANCHOR_META_NAME,
CSS_STYLE_PREFIX as p,
fullWH,
flexAlignCenter,
flexDirCol,
flexCenter,
} from '@ithinkdt/core/cssr'
let style
export function createStyle(cls) {
if (!style) {
style = cB(
'layout',
{
[`--${cls}__topbar-height`]: '56px',
[`--${cls}__sidebar-width`]: '220px',
[`--${cls}__topbar-bg`]: 'unset',
[`--${cls}__sidebar-bg`]: 'unset',
[`--${cls}__tabsbar-height`]: '44px',
[`--${cls}__tabsbar-bg`]: `var(--${cls}__topbar-bg)`,
[`--${cls}__main-body-bg`]: 'rgba(0, 0, 0, 0.03)',
[`--${cls}__topbar-shadow`]:
'0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04), 0 5px 12px rgba(0, 0, 0, 0.02)',
[`--${cls}__sidebar-shadow`]:
'1px 2px 2px -2px rgba(0, 0, 0, 0.04), 3px 6px 6px 0 rgba(0, 0, 0, 0.03), 5px 12px 12px 4px rgba(0, 0, 0, 0.02)',
[`--${cls}__tabsbar-shadow`]:
'0 1px 2px -2px rgba(0, 0, 0, 0.04), 0 3px 6px 0 rgba(0, 0, 0, 0.03), 0 5px 12px 4px rgba(0, 0, 0, 0.02)',
...fullWH,
position: 'absolute',
overflow: 'auto',
top: '0',
left: '0',
display: 'grid',
gridTemplateRows: `auto 1fr`,
gridTemplateColumns: `auto 1fr`,
backgroundColor: `var(--${p}-base-color)`,
},
[
cM('transition', {
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
}),
cE('topbar', {
gridArea: 'header',
height: `var(--${cls}__topbar-height)`,
position: 'sticky',
top: 0,
left: 0,
...flexAlignCenter,
boxSizing: 'border-box',
lineHeight: '1',
fontSize: '14px',
zIndex: '3',
boxShadow: `var(--${cls}__topbar-shadow)`,
background: `var(--${cls}__topbar-bg)`,
}),
cE('topbar-space', {
flex: '1 1 auto',
}),
cE('topbar-logo-wrapper', {
minWidth: `var(--${cls}__sidebar-width)`,
}),
cE('topbar-breadcrumb', {
marginLeft: '12px',
}),
cE('topbar-collpase-btn', {
margin: '0 16px',
lineHeight: '0',
}),
cE('sidebar', {
boxSizing: 'border-box',
gridArea: 'sidebar',
width: `var(--${cls}__sidebar-width)`,
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
overflow: 'auto',
position: 'sticky',
top: 0,
left: 0,
...flexDirCol,
zIndex: '2',
boxShadow: `var(--${cls}__sidebar-shadow)`,
background: `var(--${cls}__sidebar-bg)`,
}),
cE('sidebar-logo-wrapper', {
height: `var(--${cls}__topbar-height)`,
...flexCenter,
flexShrink: '0',
}),
cE('sidebar-collpase-btn', {
position: 'absolute',
zIndex: '2',
bottom: '13px',
right: '18px',
lineHeight: '0',
}),
cE('main', {
gridArea: 'main',
boxSizing: 'border-box',
overflow: 'hidden',
position: 'relative',
...flexDirCol,
}),
cE(
'footer',
{
gridArea: 'footer',
boxSizing: 'border-box',
pointerEvents: 'none',
// backgroundColor: `var(--${cls}__main-body-bg)`,
},
[
cM('float', {
position: 'absolute',
bottom: '0',
width: '100%',
}),
],
),
cE('tabsbar', {
height: `var(--${cls}__tabsbar-height)`,
flexShrink: '0',
boxSizing: 'border-box',
position: 'sticky',
top: 0,
left: 0,
boxShadow: `var(--${cls}__tabsbar-shadow)`,
background: `var(--${cls}__tabsbar-bg)`,
zIndex: '9',
}),
cE('main-body', {
flex: '1 1 auto',
overflow: 'hidden',
background: `var(--${cls}__main-body-bg)`,
position: 'relative',
}),
// cE('main-content', {
// minWidth: `var(--${p}_body-width)`,
// minHeight: `var(--${p}_body-height)`,
// }),
c(`.${cls}__main-content--leave-to`, {
transform: 'translateX(-100%)',
opacity: '0',
}),
c(`.${cls}__main-content--leave-active`, {
transition: 'transform 0.3s, opacity 0.2s',
transitionTimingFunction: 'ease-in-out',
position: 'absolute',
}),
c(`.${cls}__main-content--enter-from`, {
transform: 'scale(0.5)',
opacity: '0',
}),
c(`.${cls}__main-content--enter-active`, {
transition: 'transform 0.3s, opacity 0.2s',
transitionTimingFunction: 'ease-in-out',
position: 'absolute',
}),
cM(
'collpased-sidebar',
{
[`--${cls}__sidebar-width`]: '59px',
[`--${cls}__sidebar-transform`]: 'translate3d(0, 0, 0)',
[`--${cls}__sidebar-collpasebtn-right`]: '29px',
},
[
cE('sidebar', {
transform: `translate3d(0, 0, 0)`,
}),
],
),
cM(
'hide-sidebar',
{
[`--${cls}__sidebar-width`]: '0px',
},
[
cE('topbar-logo-wrapper', {
minWidth: 'unset',
}),
],
),
cM('logo-in-topbar', {
gridTemplateAreas: `
'header header'
'sidebar main'
'sidebar footer'
`,
}),
cM('logo-in-sidebar', {
gridTemplateAreas: `
'sidebar header'
'sidebar main'
'sidebar footer'
`,
}),
cM('full-tab', {
top: `calc(-1 * var(--${cls}__topbar-height))`,
left: `calc(-1 * var(--${cls}__sidebar-width))`,
width: `calc(100% + var(--${cls}__sidebar-width))`,
height: `calc(100% + var(--${cls}__topbar-height))`,
}),
cM('dark', {
[`--${cls}__topbar-bg`]: 'rgb(24, 24, 28)',
[`--${cls}__sidebar-bg`]: `var(--${cls}__topbar-bg)`,
[`--${cls}__main-body-bg`]: 'unset',
[`--${cls}__sidebar-shadow`]: `
0 2px 2px -2px rgba(255, 255, 255, 0.05),
0 6px 6px 0 rgba(255, 255, 255, 0.04)`,
[`--${cls}__tabsbar-shadow`]: '0 1px 2px rgba(255, 255, 255, 0.04)',
[`--${cls}__topbar-shadow`]: '0 1px 2px rgba(255, 255, 255, 0.06)',
}),
],
)
style.mount({
id: cls,
anchorMetaName: CSS_MOUNT_ANCHOR_META_NAME,
})
c('', [
c('html, body, #app', fullWH),
c('body', {
overflow: 'hidden',
}),
]).mount({
id: `${p}-global-style`,
anchorMetaName: CSS_MOUNT_ANCHOR_META_NAME,
})
}
}