first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,213 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3 charts
|
||||
*
|
||||
* Styles for C3.js visualization library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-c3 {
|
||||
|
||||
// Base
|
||||
.c3 {
|
||||
|
||||
// Use smaller text
|
||||
svg {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Paths and lines defaults
|
||||
path,
|
||||
line {
|
||||
fill: none;
|
||||
stroke: $gray-600;
|
||||
}
|
||||
path.domain {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Disable text selection
|
||||
text {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
// Default shape rendering style
|
||||
.c3-legend-item-tile,
|
||||
.c3-xgrid-focus,
|
||||
.c3-ygrid,
|
||||
.c3-event-rect,
|
||||
.c3-bars path {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Arcs
|
||||
.c3-chart-arc {
|
||||
path {
|
||||
stroke: $white;
|
||||
}
|
||||
|
||||
text {
|
||||
fill: $white;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.c3-grid {
|
||||
line {
|
||||
stroke: $gray-500;
|
||||
}
|
||||
|
||||
text {
|
||||
fill: $gray-500;
|
||||
}
|
||||
}
|
||||
.c3-xgrid,
|
||||
.c3-ygrid {
|
||||
stroke-dasharray: 3 3;
|
||||
}
|
||||
|
||||
// Text on chart
|
||||
.c3-text {
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&.c3-empty {
|
||||
fill: $gray-700;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Line
|
||||
.c3-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
// Area
|
||||
.c3-area {
|
||||
stroke-width: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// Point
|
||||
.c3-circle._expanded_ {
|
||||
stroke-width: 1.5px;
|
||||
stroke: $white;
|
||||
}
|
||||
.c3-selected-circle {
|
||||
fill: $white;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
// Bar
|
||||
.c3-bar {
|
||||
stroke-width: 0;
|
||||
|
||||
&._expanded_ {
|
||||
fill-opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
// Arc
|
||||
.c3-chart-arcs-title {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
.c3-chart-arcs {
|
||||
.c3-chart-arcs-background {
|
||||
fill: $gray-300;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.c3-chart-arcs-gauge-unit {
|
||||
fill: $body-color;
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
.c3-chart-arcs-gauge-max,
|
||||
.c3-chart-arcs-gauge-min {
|
||||
fill: $gray-200;
|
||||
}
|
||||
}
|
||||
.c3-chart-arc .c3-gauge-value {
|
||||
fill: $body-color;
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
|
||||
// Focus
|
||||
.c3-target {
|
||||
&.c3-focused {
|
||||
opacity: 1;
|
||||
|
||||
path.c3-line,
|
||||
path.c3-step {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.c3-defocused {
|
||||
opacity: 0.3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Region
|
||||
.c3-region {
|
||||
fill: $color-slate-600;
|
||||
fill-opacity: .1;
|
||||
}
|
||||
|
||||
// Brush
|
||||
.c3-brush .extent {
|
||||
fill-opacity: .1;
|
||||
}
|
||||
|
||||
// Legend
|
||||
.c3-legend-item {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
.c3-legend-background {
|
||||
fill: $white;
|
||||
stroke: lightgray;
|
||||
stroke-width: 1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
.c3-tooltip {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background-color: $white;
|
||||
empty-cells: show;
|
||||
opacity: 0.95;
|
||||
|
||||
th {
|
||||
background-color: $gray-900;
|
||||
padding: $table-cell-padding-xs;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
border: $table-border-width solid $gray-900;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $table-cell-padding-xs;
|
||||
background-color: $white;
|
||||
border: $table-border-width solid $border-color;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
margin-right: map-get($spacers, 2);
|
||||
@include size($badge-mark-size);
|
||||
}
|
||||
|
||||
&.value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Chart styling
|
||||
*
|
||||
* Charts base - container and sizing setup
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-charts {
|
||||
|
||||
// Container
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
// Add scroll
|
||||
&.has-scroll {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Add scroll for all charts on mobile to hide overflow
|
||||
@include media-breakpoint-down(sm) {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Chart itself
|
||||
.chart {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@if $direction == 'RTL' {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
// Give chart min width
|
||||
&.has-minimum-width {
|
||||
min-width: $chart-min-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Give chart fixed height
|
||||
.has-fixed-height {
|
||||
height: $chart-container-height;
|
||||
}
|
||||
|
||||
// Pie charts
|
||||
.chart-pie {
|
||||
width: 100%;
|
||||
height: $chart-container-height;
|
||||
min-width: $chart-pie-min-width;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,435 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js library
|
||||
*
|
||||
* Basic styles for D3.js visualization library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-d3 {
|
||||
|
||||
|
||||
// Axis
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.d3-axis {
|
||||
|
||||
// Path
|
||||
path {
|
||||
fill: none;
|
||||
stroke: $gray-600;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Line
|
||||
line {
|
||||
stroke: $gray-200;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.tick {
|
||||
&,
|
||||
text {
|
||||
font-size: $font-size-sm;
|
||||
fill: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Lighter axis text
|
||||
.d3-axis-solid {
|
||||
path,
|
||||
line {
|
||||
stroke: $gray-500;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.tick {
|
||||
fill: $gray-600;
|
||||
|
||||
text {
|
||||
fill: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stronger axis text
|
||||
.d3-axis-strong {
|
||||
path,
|
||||
line {
|
||||
stroke: $gray-500;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.tick {
|
||||
fill: $gray-900;
|
||||
|
||||
text {
|
||||
fill: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent axis
|
||||
.d3-axis-transparent {
|
||||
|
||||
// Hide path
|
||||
path {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
// Hide line
|
||||
line {
|
||||
stroke: $gray-300;
|
||||
}
|
||||
|
||||
// Change tick colors
|
||||
.tick {
|
||||
fill: $gray-600;
|
||||
|
||||
text {
|
||||
fill: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Tooltip
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Basic tooltip
|
||||
//
|
||||
|
||||
// Base
|
||||
.d3-tip {
|
||||
position: absolute;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
background-color: $tooltip-bg;
|
||||
color: $tooltip-color;
|
||||
margin-bottom: -($tooltip-arrow-height);
|
||||
font-size: $tooltip-font-size;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-radius($tooltip-border-radius);
|
||||
|
||||
// Arrow
|
||||
.d3-tip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip positioning
|
||||
.d3-tip {
|
||||
&.n .d3-tip-arrow {
|
||||
bottom: -($tooltip-arrow-height);
|
||||
left: 50%;
|
||||
margin-left: -($tooltip-arrow-height);
|
||||
border-width: $tooltip-arrow-height $tooltip-arrow-height 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.e .d3-tip-arrow {
|
||||
top: 50%;
|
||||
margin-top: -$tooltip-arrow-height;
|
||||
/*rtl:begin:ignore*/
|
||||
left: -($tooltip-arrow-height);
|
||||
border-width: $tooltip-arrow-height $tooltip-arrow-height $tooltip-arrow-height 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
&.w .d3-tip-arrow {
|
||||
top: 50%;
|
||||
margin-top: -$tooltip-arrow-height;
|
||||
/*rtl:begin:ignore*/
|
||||
right: -($tooltip-arrow-height);
|
||||
border-width: $tooltip-arrow-height 0 $tooltip-arrow-height $tooltip-arrow-height;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
&.s .d3-tip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-height;
|
||||
border-width: 0 $tooltip-arrow-height $tooltip-arrow-height;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Venn diagram tooltip
|
||||
//
|
||||
|
||||
// Base
|
||||
.venntooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: $tooltip-bg;
|
||||
color: $tooltip-color;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
display: none;
|
||||
@include border-radius($tooltip-border-radius);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Chart types
|
||||
// ------------------------------
|
||||
|
||||
// Lines
|
||||
.d3-line {
|
||||
fill: none;
|
||||
|
||||
// Thin stroke
|
||||
&-thin {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
// Medium stroke
|
||||
&-medium {
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
// Strong stroke
|
||||
&-strong {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Line circles
|
||||
.d3-line-circle {
|
||||
fill: none;
|
||||
cursor: pointer;
|
||||
|
||||
// Thin stroke
|
||||
&-thin {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
// Medium stroke
|
||||
&-medium {
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
// Strong stroke
|
||||
&-strong {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Grid
|
||||
// ------------------------------
|
||||
|
||||
// Basic grid
|
||||
.d3-grid {
|
||||
.tick {
|
||||
line {
|
||||
stroke-width: 1px;
|
||||
stroke: $gray-300;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
text {
|
||||
fill: $gray-900;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dashed grid
|
||||
.d3-grid-dashed {
|
||||
.tick {
|
||||
stroke-dasharray: 4,2;
|
||||
stroke-width: 1px;
|
||||
stroke: $gray-300;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Components
|
||||
// ------------------------------
|
||||
|
||||
// Crosshair overlay
|
||||
.d3-crosshair-overlay {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Bullets
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
|
||||
// Ticks
|
||||
.bullet-tick {
|
||||
|
||||
// Line styles
|
||||
line {
|
||||
stroke: $gray-600;
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Text styles
|
||||
text {
|
||||
fill: $gray-600;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-marker {
|
||||
stroke-width: 2px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Title
|
||||
.bullet-title {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// Subtitle
|
||||
.bullet-subtitle {
|
||||
fill: $gray-600;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// First bullet
|
||||
//
|
||||
|
||||
// Ranges
|
||||
.bullet-1 .bullet-range-1 {
|
||||
fill: rgba($color-slate-500, 0.8);
|
||||
}
|
||||
.bullet-1 .bullet-range-2 {
|
||||
fill: rgba($color-slate-500, 0.4);
|
||||
}
|
||||
.bullet-1 .bullet-range-3 {
|
||||
fill: $color-slate-500;
|
||||
}
|
||||
|
||||
// Measures
|
||||
.bullet-1 .bullet-measure-1 {
|
||||
fill: rgba($color-slate-600, 0.9);
|
||||
}
|
||||
.bullet-1 .bullet-measure-2 {
|
||||
fill: $white;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-1 .bullet-marker {
|
||||
stroke: $color-slate-800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Second bullet
|
||||
//
|
||||
|
||||
// Ranges
|
||||
.bullet-2 .bullet-range-1 {
|
||||
fill: rgba($color-warning-400, 0.6);
|
||||
}
|
||||
.bullet-2 .bullet-range-2 {
|
||||
fill: rgba($color-warning-400, 0.3);
|
||||
}
|
||||
.bullet-2 .bullet-range-3 {
|
||||
fill: $color-warning-400;
|
||||
}
|
||||
|
||||
// Measures
|
||||
.bullet-2 .bullet-measure-1 {
|
||||
fill: rgba($color-warning-600, 0.9);
|
||||
}
|
||||
.bullet-2 .bullet-measure-2 {
|
||||
fill: $white;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-2 .bullet-marker {
|
||||
stroke: $color-warning-800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Third bullet
|
||||
//
|
||||
|
||||
// Ranges
|
||||
.bullet-3 .bullet-range-1 {
|
||||
fill: rgba($color-success-400, 0.7);
|
||||
}
|
||||
.bullet-3 .bullet-range-2 {
|
||||
fill: rgba($color-success-400, 0.35);
|
||||
}
|
||||
.bullet-3 .bullet-range-3 {
|
||||
fill: $color-success-400;
|
||||
}
|
||||
|
||||
// Measures
|
||||
.bullet-3 .bullet-measure-1 {
|
||||
fill: rgba($color-success-600, 0.9);
|
||||
}
|
||||
.bullet-3 .bullet-measure-2 {
|
||||
fill: $white;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-3 .bullet-marker {
|
||||
stroke: $color-success-800;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Progress counter icon. Styles moved to
|
||||
// CSS, because IE9 drove me crazy...
|
||||
// ------------------------------
|
||||
|
||||
.counter-icon {
|
||||
font-size: ($icon-font-size * 2);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -($icon-font-size);
|
||||
}
|
||||
|
||||
|
||||
// Legend
|
||||
// ------------------------------
|
||||
|
||||
.chart-widget-legend {
|
||||
margin: 0.625rem 0 0 0;
|
||||
padding: 0;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
margin: 0.3125rem 0.625rem 0;
|
||||
padding: 0.4375rem 0.5rem 0.3125rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user