comindware-gantt-elastic
Version:
Gantt chart. Elastic javascript gantt chart. Vue and standalone gantt. Project manager responsive gantt
342 lines (340 loc) • 8.93 kB
JavaScript
/**
* @fileoverview Styles for gantt-elastic
* @license MIT
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package GanttElastic
*/
export default function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
return {
fontSize,
fontFamily,
'main-view': {
background: '#FFFFFF'
},
'main-container-wrapper': {
overflow: 'hidden',
'border-top': '1px solid #eee',
'border-bottom': '1px solid #eee'
},
'main-container': {
float: 'left',
'max-width': '100%'
},
'main-view-container': {},
container: {
display: 'flex',
'max-width': '100%',
height: '100%'
},
'calendar-wrapper': {
'user-select': 'none',
'min-width': '100%'
},
calendar: {
'min-width': '100%',
background: '#f3f5f7',
display: 'block'
},
'calendar-row': {
display: 'flex',
'justify-content': 'space-evenly',
height: '28px'
},
'calendar-row--month': {},
'calendar-row--day': {},
'calendar-row--hour': {
'border-bottom': '1px solid #eee'
},
'calendar-row-rect': {
background: 'transparent',
display: 'flex'
},
'calendar-row-rect--month': {},
'calendar-row-rect--day': {},
'calendar-row-rect--hour': {},
'calendar-row-rect-child': {
display: 'block',
'border-right-width': '1px', // Calendar
'border-right-color': '#dadada',
'border-right-style': 'solid',
position: 'relative'
},
'calendar-row-rect-child--month': {},
'calendar-row-rect-child--day': { 'text-align': 'center' },
'calendar-row-rect-child--hour': { 'text-align': 'center' },
'calendar-row-text': {
'font-family': fontFamily, // GanttElastic
'font-size': fontSize, //GanttElastic
color: '#606060',
display: 'inline-block',
position: 'relative'
},
'calendar-row-text--month': {},
'calendar-row-text--day': {},
'calendar-row-text--hour': {},
'task-list-wrapper': {},
'task-list': { background: 'transparent', 'border-color': '#eee' },
'task-list-header': {
display: 'flex'
},
'task-list-header-row': {
display: 'flex',
'user-select': 'none',
'vertical-align': 'middle',
'border-left': '1px solid #eee'
},
'task-list-header-column': {
'border-left': '1px solid #00000050',
'box-sizing': 'border-box',
display: 'flex',
background: '#f3f5f7',
'border-color': 'transparent'
},
'task-list-expander-wrapper': {
display: 'inline-flex',
'flex-shrink': '0',
'box-sizing': 'border-box',
margin: '0 0 0 10px'
},
'task-list-expander-content': {
display: 'inline-flex',
cursor: 'pointer',
margin: 'auto 0px',
'box-sizing': 'border-box',
'user-select': 'none'
},
'task-list-expander-line': {
fill: 'transparent',
stroke: '#000000',
'stroke-width': '1',
'stroke-linecap': 'round'
},
'task-list-expander-border': {
fill: '#ffffffa0',
stroke: '#000000A0'
},
'chart-expander-wrapper': {
display: 'block',
'line-height': '1',
'box-sizing': 'border-box',
margin: '0'
},
'chart-expander-content': {
display: 'inline-flex',
cursor: 'pointer',
margin: 'auto 0px',
'box-sizing': 'border-box',
'user-select': 'none'
},
'chart-expander-line': {
fill: 'transparent',
stroke: '#000000',
'stroke-width': '1',
'stroke-linecap': 'round'
},
'chart-expander-border': {
fill: '#ffffffa0',
stroke: '#000000A0'
},
'task-list-container': {},
'task-list-header-label': {
overflow: 'hidden',
'text-overflow': 'ellipsis',
'font-family': fontFamily,
'font-size': fontSize,
'box-sizing': 'border-box',
margin: 'auto 6px',
'flex-grow': '1',
'vertical-align': 'middle'
},
'task-list-header-resizer-wrapper': {
background: 'transparent',
height: '100%',
width: '6px',
cursor: 'col-resize',
display: 'inline-flex',
'vertical-align': 'center'
},
'task-list-header-resizer': { margin: 'auto 0px' },
'task-list-header-resizer-dot': {
width: '3px',
height: '3px',
background: '#ddd',
'border-radius': '100%',
margin: '4px 0px'
},
'task-list-items': {
overflow: 'hidden'
},
'task-list-item': {
'border-top': '1px solid #eee',
'border-right': '1px solid #eee',
'box-sizing': 'border-box',
display: 'flex',
background: 'transparent'
},
'task-list-item-column': {
display: 'inline-flex',
'flex-shrink': '0',
'border-left': '1px solid #00000050',
'box-sizing': 'border-box',
'border-color': '#eee'
},
'task-list-item-value-wrapper': {
overflow: 'hidden',
display: 'flex',
width: '100%'
},
'task-list-item-value-container': {
margin: 'auto 0px',
overflow: 'hidden'
},
'task-list-item-value': {
display: 'block',
'flex-shrink': '100',
'font-family': fontFamily,
'font-size': fontSize,
'margin-top': 'auto',
'margin-bottom': 'auto',
'margin-left': '6px', // TaskList
'margin-right': '6px',
overflow: 'hidden',
'text-overflow': 'ellipsis',
'line-height': '1.5em',
'word-break': 'keep-all',
'white-space': 'nowrap',
color: '#606060',
background: '#FFFFFF'
},
'grid-lines': {},
'grid-line-horizontal': {
stroke: '#00000010',
'stroke-width': 1
},
'grid-line-vertical': {
stroke: '#00000010',
'stroke-width': 1
},
'grid-line-time': {
stroke: '#FF000080',
'stroke-width': 1
},
chart: {
'user-select': 'none',
overflow: 'hidden'
},
'chart-calendar-container': {
'user-select': 'none',
overflow: 'hidden',
'max-width': '100%',
'border-right': '1px solid #eee',
'text-align': 'center'
},
'chart-graph-container': {
'user-select': 'none',
overflow: 'hidden',
'max-width': '100%',
'border-right': '1px solid #eee'
},
'chart-area': {},
'chart-graph': {
overflow: 'hidden'
},
'chart-row-title-wrapper': {
height: '100%',
width: '100%',
},
'chart-row-text': {
background: '#ffffffa0',
'border-radius': '10px',
'font-family': fontFamily,
'font-size': fontSize,
'font-weight': 'normal',
color: '#000000a0',
height: '100%',
display: 'inline-block'
},
'chart-row-text-content': {
padding: '0px 6px'
},
'chart-row-text-content--text': {},
'chart-row-text-content--html': {},
'chart-row-wrapper': {},
'chart-row-bar-wrapper': {},
'chart-row-bar': {},
'chart-row-bar-polygon': {
stroke: '#E74C3C',
'stroke-width': 1,
fill: '#F75C4C'
},
'chart-row-bar-polygon-estimated': {
stroke: '#E74C3C',
'stroke-width': 1,
fill: '#F75C4C'
},
'chart-row-bar-text': {},
'chart-row-bar-text-wrapper': {},
'chart-row-project-wrapper': {},
'chart-row-project': {},
'chart-row-project-polygon': {},
'chart-row-milestone-wrapper': {},
'chart-row-milestone': {},
'chart-row-milestone-polygon': {},
'chart-row-task-wrapper': {},
'chart-row-task': {},
'chart-row-task-planned': {},
'chart-row-task-polygon': {},
'chart-row-progress-bar-wrapper': {},
'chart-row-progress-bar': {},
'chart-row-progress-bar-line': {
stroke: '#ffffff25',
'stroke-width': 20
},
'chart-row-progress-bar-solid': {
fill: '#0EAC51',
height: '100%'
},
'chart-row-progress-bar-pattern': {
fill: 'url(#diagonalHatch)',
transform: 'translateY(0.1) scaleY(0.8)'
},
'chart-row-progress-bar-outline': {
stroke: '#E74C3C',
'stroke-width': 1
},
'chart-dependency-lines-wrapper': {},
'chart-dependency-lines-path': {
fill: 'transparent',
stroke: '#FFa00090',
'stroke-width': 2
},
'chart-scroll-container': {},
'chart-scroll-container--horizontal': {
overflow: 'auto',
'max-width': '100%'
},
'chart-scroll-container--vertical': {
'overflow-y': 'auto',
'overflow-x': 'hidden',
'max-height': '100%',
float: 'right'
},
'chart-days-highlight-rect': {
fill: '#f3f5f780'
},
'slot-header-beforeOptions': {
display: 'inline-block'
},
'emty-view': {
height:'100px',
'border-top': 'none'
},
'emty-view-text': {
'text-align': 'center',
'font-size': '1.1em',
'white-space': 'nowrap',
height:'100px',
border: '1px solid var(--editors-color-border)',
}
};
}