insight.scss

/*-- Insight Theme --*/
@charset "UTF-8";

$font-family: sans-serif, Arial, "nanumgothic", "Dotum";

/*-- Default color pattern --*/
.bb-color-pattern {
    background-image: url("#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;");
}

/*-- Chart --*/
.bb {
    svg {
        font-size: 12px;
        font-family: $font-family;
        line-height: 1;
    }

    path, line {
        fill: none; stroke: #c4c4c4;
    }

    text, .bb-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        fill: #555;
        font-size: 11px;
    }
}

.bb-legend-item-title,
.bb-xgrid-focus,
.bb-ygrid-focus,
.bb-ygrid,
.bb-event-rect,
.bb-bars path {
    shape-rendering: crispEdges;
}

/*-- Axis --*/
.bb-axis {
    shape-rendering: crispEdges;
}

.bb-axis-y text, .bb-axis-y2 text {
    fill: #737373;
}

.bb-event-rects {
    fill-opacity: 1 !important;

    .bb-event-rect {
        fill: transparent;
    }

    .bb-event-rect._active_ {
        fill: rgba(39, 201, 3, 0.05);
    }
}

.tick._active_ text {
    fill: #00c83c !important;
}

/*-- Grid --*/
.bb-grid {
    pointer-events: none;

    line {
        stroke: #f1f1f1;
    }
}

.bb-xgrid-focus line, .bb-ygrid-focus line {
    stroke: #ddd;
}

/*-- Text on Chart --*/
.bb-text {
    &.bb-empty {
        fill: #767676;
    }
}

/*-- Line --*/
.bb-line {
    stroke-width: 1px;
}

/*-- Point --*/
.bb-circle {
    &._expanded_ {
        fill: #fff !important;
        stroke-width: 2px;
        stroke: red;
    }
}

rect.bb-circle, use.bb-circle {
  &._expanded_ {
    stroke-width: 1px;
  }
}

.bb-selected-circle {
    fill: white;
    stroke-width: 2px;
}

/*-- Bar --*/
.bb-bar {
	stroke-width: 0;

	&._expanded_ {
		fill-opacity: 0.75;
	}
}

/*-- Candlestick --*/
.bb-candlestick {
	stroke-width: 1px;

	&._expanded_ {
		fill-opacity: 0.75;
	}
}

/*-- Focus --*/
.bb-target, .bb-circles {
    &.bb-focused {
        opacity: 1;

        path {
            &.bb-line, &.bb-step {
                stroke-width: 2px;
            }
        }
    }

    &.bb-defocused {
        opacity: 0.3 !important;

        .text-overlapping {
            opacity: .05 !important;
        }
    }
}

/*-- Region --*/
.bb-region {
    fill: steelblue;
    fill-opacity: 0.1;

    &.selected rect {
        fill: rgb(39, 201, 3);
    }
}

/*-- Zoom region --*/
.bb-zoom-brush {
    fill-opacity: .1;
}

/*-- Brush --*/
.bb-brush {
    .extent {
        fill-opacity: 0.1;
    }
}

/*-- Select - Drag --*/
/*-- Legend --*/
.bb-legend-item {
    user-select: none;
}

.bb-legend-item-hidden {
    opacity: 0.15;
}

.bb-legend-background {
    opacity: 0.75;
    fill: white;
    stroke: lightgray;
    stroke-width: 1;
}

/*-- Title --*/
.bb-title {
    font-size: 14px;
}

/*-- Tooltip --*/
.bb-tooltip-container {
    z-index: 10;
    font-family: $font-family;
	user-select: none;
}

.bb-tooltip {
    border-collapse: separate;
    border-spacing:0;
    empty-cells:show;
    border: 1px solid #999;
    background-color: #fff;
    text-align: left;
    font-size: 11px;

    th {
        font-size:12px;
        padding:4px 8px;
        text-align:left;
        border-bottom: solid 1px #eee;
    }

    td {
        padding: 4px 6px;
        background-color:#fff;

        &:first-child {
            padding-left: 8px;
        }

        &:last-child {
            padding-right:8px;
        }

        > span, > svg {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 6px;
            border-radius: 5px;
            vertical-align: middle;
        }

        &.value {
            border-left: 1px solid transparent;
        }
    }

    .bb-tooltip-title {
        display: inline-block;
        color: #aaa;
        line-height: 20px;
    }

    .bb-tooltip-detail {
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .bb-tooltip-name, .bb-tooltip-value {
            font-size: 11px;
            line-height: 13px;
            padding: 4px 0 3px;
            color: #444;
            text-align: left;
            font-weight: normal;
        }

        .bb-tooltip-value {
            padding-left: 5px;
            font-weight: 800;
            font-size: 12px;
        }
    }
}

/*-- Area --*/
.bb-area {
    stroke-width: 0;
    opacity: 0.2;
}

/*-- Arc --*/
.bb-chart-arcs-title {
    dominant-baseline: middle;
    font-size: 1.3em;
}

text.bb-chart-arcs-gauge-title {
    dominant-baseline: middle;
    font-size: 2.7em;
}

.bb-chart-arcs {
    .bb-chart-arcs-background {
        fill: #e0e0e0;
        stroke: none;
    }

    .bb-chart-arcs-gauge-unit {
        fill: #000;
        font-size: 16px;
    }

    .bb-chart-arcs-gauge-min, .bb-chart-arcs-gauge-max {
        fill: #777;
    }

    .bb-chart-arcs-title {
        font-size: 16px !important;
        fill: #000;
        font-weight: 600;
    }

    path.empty {
        fill: #eaeaea;
        stroke-width: 0;
    }

	/*-- Polar --*/
	.bb-levels {
		circle {
			fill: none;
			stroke: #848282;
			stroke-width: .5px;
		}

		text {
			fill: #848282;
		}
	}
}

.bb-chart-arc {
    .bb-gauge-value {
        fill: #000;
    }

    path {
        stroke: #fff;
    }

	rect {
		stroke: #fff;
		stroke-width: 1;
	}

    text {
        fill: #fff;
        font-size: 13px;
    }
}

/*-- Radar --*/
.bb-chart-radars {
    .bb-levels {
        polygon {
            fill: none;
            stroke: #848282;
            stroke-width: .5px;
        }

        text {
            fill: #848282;
        }
    }

    .bb-axis {
        line {
            stroke: #848282;
            stroke-width: .5px;
        }

        text {
            font-size: 1.15em;
            cursor: default;
        }
    }

    .bb-shapes {
        polygon {
            fill-opacity: .2;
            stroke-width: 1px;
        }
    }
}

/*-- Button --*/
.bb-button {
    position: absolute;
    top: 10px;
    right: 10px;

    .bb-zoom-reset {
        border: solid 1px #ccc;
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
}