chore: use dataviz/layout to import layout from theme-default
This commit is contained in:
joneff
Родитель
c1ac373e6d
Коммит
183fd49564
|
|
@ -7,5 +7,5 @@
|
|||
|
||||
|
||||
// Component
|
||||
@import "../node_modules/@progress/kendo-theme-default/scss/dataviz/layout";
|
||||
@import "dataviz/layout";
|
||||
@import "dataviz/theme";
|
||||
|
|
@ -1,349 +1 @@
|
|||
// TODO: line-height variables
|
||||
$line-height-em: $line-height * 1em;
|
||||
|
||||
$chart-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
$chart-selection-background: rgba(255, 255, 255, .01);
|
||||
|
||||
$chart-font-size: $base-font-size !default;
|
||||
$chart-tooltip-font-size: .929em !default;
|
||||
$chart-label-font-size: .857em !default;
|
||||
$chart-title-font-size: 1.143em !default;
|
||||
|
||||
|
||||
@include exports("dataviz/charts/layout") {
|
||||
// Exported variables
|
||||
.k-var--chart-font {
|
||||
font-size: $chart-font-size;
|
||||
}
|
||||
|
||||
.k-var--chart-title-font {
|
||||
font-size: $chart-title-font-size;
|
||||
}
|
||||
|
||||
.k-var--chart-label-font {
|
||||
font-size: $chart-label-font-size;
|
||||
}
|
||||
|
||||
// Elements
|
||||
.k-chart,
|
||||
.k-sparkline,
|
||||
.k-stockchart {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: $chart-tap-highlight-color;
|
||||
}
|
||||
|
||||
.k-chart,
|
||||
.k-stockchart {
|
||||
font-size: $chart-font-size;
|
||||
font-family: $base-font-family;
|
||||
display: block;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.k-chart-surface {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.k-chart-tooltip table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.k-chart-tooltip {
|
||||
font-size: $chart-tooltip-font-size;
|
||||
line-height: 1.154em;
|
||||
padding: .308em .692em;
|
||||
}
|
||||
|
||||
.k-chart-tooltip th {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.k-chart-tooltip td {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
padding: .1em .308em;
|
||||
line-height: 1.538em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.k-chart-crosshair-tooltip,
|
||||
.k-chart-shared-tooltip {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.k-chart-shared-tooltip {
|
||||
padding: 1em;
|
||||
line-height: 1.538em;
|
||||
}
|
||||
|
||||
.k-chart-shared-tooltip-marker {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.k-selector {
|
||||
position: absolute;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.k-selection {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.k-selection-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $chart-selection-background;
|
||||
}
|
||||
|
||||
.k-handle {
|
||||
width: 7px;
|
||||
height: 26px;
|
||||
z-index: 1;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.k-handle div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.k-leftHandle {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.k-rightHandle {
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
.k-leftHandle div {
|
||||
margin: -20px 0 0 -15px;
|
||||
padding: 40px 30px 0 0;
|
||||
}
|
||||
|
||||
.k-leftHandle.k-handle-active div {
|
||||
margin-left: -40px;
|
||||
padding-right: 55px;
|
||||
}
|
||||
|
||||
.k-rightHandle div {
|
||||
margin: -20px 0 0 -15px;
|
||||
padding: 40px 0 0 30px;
|
||||
}
|
||||
|
||||
.k-rightHandle.k-handle-active div {
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.k-mask {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.k-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Navigator hint */
|
||||
.k-navigator-hint div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.k-navigator-hint .k-scroll {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.k-navigator-hint .k-tooltip {
|
||||
margin-top: 20px;
|
||||
min-width: 160px;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Sparklines */
|
||||
.k-sparkline,
|
||||
.k-sparkline span {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.k-sparkline span {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.k-chart-dragging {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@include exports("dataviz/diagram/layout") {
|
||||
|
||||
.k-diagram {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.k-diagram .km-scroll-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.k-diagram .km-scroll-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.k-canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* IE8- */
|
||||
.k-diagram img {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include exports("dataviz/treemap/layout") {
|
||||
|
||||
// Base
|
||||
.k-treemap {
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
// Tile
|
||||
.k-treemap-tile {
|
||||
margin: -1px 0 0 -1px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
> .k-treemap-tile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Title
|
||||
.k-treemap-title {
|
||||
padding: $padding-y-sm $padding-x-sm;
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.k-treemap-title-vertical {
|
||||
padding: $padding-x-sm $padding-y-sm;
|
||||
width: $line-height-em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
> div {
|
||||
transform-origin: right;
|
||||
transform: rotate(-90deg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Wrap
|
||||
.k-treemap-wrap {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.k-treemap-title + .k-treemap-wrap {
|
||||
top: calc( #{($padding-y-sm*2) + $line-height} + 1px);
|
||||
}
|
||||
.k-treemap-title-vertical + .k-treemap-wrap {
|
||||
left: calc( #{($padding-y-sm*2) + $line-height} + 1px);
|
||||
}
|
||||
|
||||
|
||||
// Leaf
|
||||
.k-leaf {
|
||||
padding: $padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// export variables to allow use in scripts
|
||||
$exported: (
|
||||
accent: $accent,
|
||||
base: $base,
|
||||
background: $widget-bg,
|
||||
|
||||
border-radius: $border-radius,
|
||||
|
||||
normal-background: $normal-background,
|
||||
normal-text-color: $base-text,
|
||||
hover-background: $hover-background,
|
||||
hover-text-color: $hover-text-color,
|
||||
selected-background: $selected-background,
|
||||
selected-text-color: $selected-text-color,
|
||||
|
||||
error: $error,
|
||||
warning: $warning,
|
||||
success: $success,
|
||||
info: $info,
|
||||
|
||||
series-a: $series-a,
|
||||
series-b: $series-b,
|
||||
series-c: $series-c,
|
||||
series-d: $series-d,
|
||||
series-e: $series-e,
|
||||
series-f: $series-f
|
||||
);
|
||||
|
||||
@each $name, $value in $exported {
|
||||
$type: type-of($value);
|
||||
|
||||
.k-var--#{$name} {
|
||||
@if $type == "color" {
|
||||
// background-color can store any color
|
||||
background-color: $value;
|
||||
} @else if $type == "number" {
|
||||
// margin-top can store positive & negative values
|
||||
margin-top: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "../../node_modules/@progress/kendo-theme-default/scss/dataviz/layout";
|
||||
Загрузка…
Ссылка в новой задаче