@import '../global'; @mixin sencha-charts { @include sencha-draw; $legend-border-color: #ccc !default; $legend-border: 1px solid $legend-border-color !default; $legend-background-color: #fff !default; $legend-z-index: 10 !default; $legend-item-border: 1px solid rgba($legend-border-color, .5) !default; $legend-item-background: rgba(#fff, 0) !default; $legend-item-color: #333 !default; $marker-size: .8em !default; .x-legend { .x-legend-inner { .x-legend-container { @include border-radius(5px); border: $legend-border; background: $legend-background-color; //@if (lightness($legend-background-color) > 30) { // @include box-shadow(rgba(#fff, .6) 0 1px 1px); //} @else { // @include box-shadow(rgba(#fff, .2) 0 1px 0); //} .x-legend-item { padding: .8em 1em .8em $marker-size + 1em; color: $legend-item-color; background: $legend-item-background; max-width: 20em; min-width: 0; font-size: 14px; line-height: 14px; font-weight: bold; white-space: nowrap; position: relative; .x-legend-inactive { @include opacity(.3); } .x-legend-item-marker { position: absolute; width: $marker-size; height: $marker-size; @include border-radius($marker-size/2); @include box-shadow(rgba(#fff, .3) 0 1px 0, rgba(#000, .4) 0 1px 0 inset); left: .7em; top: 1em; } } } } &.x-docked-top, &.x-docked-bottom { .x-legend-item { border-right: $legend-item-border; &:last-child { border-right: 0; } } } &.x-docked-left, &.x-docked-right { .x-legend-inner { display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; } } } .x-legend-button-icon { -webkit-mask-image: theme-image('default', 'pictos/list.png'); } .x-panzoom-toggle-icon { -webkit-mask-image: theme-image('default', 'pictos/move.png'); } .x-zooming > .x-panzoom-toggle-icon { -webkit-mask-image: theme-image('default', 'pictos/resize.png'); } .x-chart-toolbar { position: absolute; z-index: 9; @include display-box; padding: .6em; .x-button { margin: .2em; } &[data-side=left], &[data-side=right] { top: 0; @include box-orient(vertical); } &[data-side=left] { left: 0; } &[data-side=right] { right: 0; } &[data-side=top], &[data-side=bottom] { @include box-orient(horizontal); right: 0; } &[data-side=top] { top: 0; } &[data-side=bottom] { bottom: 0; @include box-orient(horizontal); } } @if $include-default-icons { @include pictos-iconmask('bookmarks'); @include pictos-iconmask('download'); @include pictos-iconmask('favorites'); @include pictos-iconmask('info'); @include pictos-iconmask('more'); @include pictos-iconmask('time'); @include pictos-iconmask('user'); @include pictos-iconmask('team'); } }