Juergen Kunz
987ae70e7a
- Implemented DeesInputFileupload component with file upload functionality, including drag-and-drop support, file previews, and clear all option. - Developed DeesInputRichtext component featuring a rich text editor with a formatting toolbar, link management, and word count display. - Created demo for DeesInputRichtext showcasing various use cases including basic editing, placeholder text, different heights, and disabled state. - Added styles for both components to ensure a consistent and user-friendly interface. - Introduced types for toolbar buttons in the rich text editor for better type safety and maintainability.
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { css, cssManager } from '@design.estate/dees-element';
|
|
|
|
export const chartAreaStyles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
}
|
|
.mainbox {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chartTitle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 16px 24px;
|
|
z-index: 10;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
|
|
}
|
|
.chartContainer {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
padding: 44px 16px 16px 0px;
|
|
overflow: hidden;
|
|
background: transparent; /* Ensure container doesn't override chart background */
|
|
}
|
|
|
|
/* ApexCharts theme overrides */
|
|
.apexcharts-canvas {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.apexcharts-inner {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.apexcharts-graphical {
|
|
background: transparent !important;
|
|
}
|
|
`,
|
|
];
|
|
|