add extjs 6.0.1 sources

[extjs.git] / extjs / packages / charts / sass / src / chart / AbstractChart.scss

/*\r
  Copied from touch/resources/themes/stylesheets/sencha-touch/base/src/chart/_AbstractChart.scss\r
*/\r
\r
// import 'user-interface' to use the 'user-select' mixin\r
@import "compass/css3/user-interface";\r
\r
.#{$prefix}android-3 .#{$prefix}surface-wrap, .#{$prefix}android-3 .#{$prefix}surface-wrap > * {\r
  -webkit-perspective: 1;\r
}\r
\r
.#{$prefix}draw-container {\r
  position: relative;\r
  @include user-select(none);\r
  -ms-user-select: none;\r
  cursor: default;\r
  .#{$prefix}inner {\r
    overflow: hidden;\r
  }\r
}\r
\r
.#{$prefix}surface-canvas {\r
  position: absolute;\r
}\r
\r
.#{$prefix}chart-image {\r
  width: 100%;\r
  height: auto;\r
}\r
\r
.#{$prefix}legend-container {\r
  display: inline-block;\r
  line-height: 0;\r
  @include border-radius($chart-legend-border-radius);\r
  border: $chart-legend-border;\r
  background: $chart-legend-background-color;\r
\r
  @if (lightness($chart-legend-background-color) > 30) {\r
    @include box-shadow(rgba(#fff, .6) 0 1px 1px);\r
  } @else {\r
    @include box-shadow(rgba(#fff, .2) 0 1px 0);\r
  }\r
}\r
\r
.#{$prefix}legend-item {\r
  padding: .8em 1em .8em $chart-marker-size + 1em;\r
  color: $chart-legend-item-color;\r
  background: $chart-legend-item-background;\r
  max-width: 16em;\r
  min-width: 0;\r
  font-size: $font-size;\r
  font-family: $font-family;\r
  line-height: $font-size;\r
  font-weight: $font-weight;\r
  white-space: nowrap;\r
  overflow: hidden;\r
  text-overflow: ellipsis;\r
  position: relative;\r
}\r
\r
.#{$prefix}legend-inactive {\r
  @include opacity(.3);\r
}\r
\r
.#{$prefix}legend-item-marker {\r
  position: absolute;\r
  width: $chart-marker-size;\r
  height: $chart-marker-size;\r
  @if ($chart-legend-border-radius) {\r
    @include border-radius($chart-marker-size / 2);\r
  }\r
  @include box-shadow(rgba(#fff, .3) 0 1px 0, rgba(#000, .4) 0 1px 0 inset);\r
  left: .7em;\r
  top: .85em;\r
}\r
\r
.#{$prefix}rtl > * > .#{$prefix}legend-item {\r
  padding: .8em $chart-marker-size + 1em .8em 1em;\r
}\r
\r
.#{$prefix}rtl > * > * > .#{$prefix}legend-item-marker {\r
  right: .7em;\r
}\r
\r
.#{$prefix}legend, .#{$prefix}legend-panel {\r
  background: $chart-legend-background-color;\r
  outline: none; // hide dotted focus outline in Firefox\r
\r
  &.#{$prefix}docked-top, &.#{$prefix}docked-bottom {\r
    .#{$prefix}legend-item {\r
      border-left: $chart-legend-item-border;\r
      &:first-child {\r
        border-left: none;\r
      }\r
    }\r
    &.#{$prefix}rtl .#{$prefix}legend-item {\r
      &:first-child {\r
        border-left: $chart-legend-item-border;\r
      }\r
      &:last-child {\r
        border-left: none;\r
      }\r
    }\r
  }\r
  \r
  &.#{$prefix}docked-left, &.#{$prefix}docked-right {\r
    .#{$prefix}legend-item {\r
      border-top: $chart-legend-item-border;\r
      &:first-child {\r
        border-top: none;\r
      }\r
    }\r
    .#{$prefix}legend-inner {\r
      display: -webkit-box;\r
      -webkit-box-align: center;\r
      -webkit-box-pack: center;\r
    }\r
  }\r
}\r
\r
.#{$prefix}legend.#{$prefix}horizontal {\r
  white-space: nowrap;\r
  .#{$prefix}legend-item {\r
    display: inline-block;\r
  }\r
}\r
\r
.#{$prefix}chart-toolbar {\r
  position: absolute;\r
  z-index: 9;\r
  @include display-box;\r
  padding: .6em;\r
\r
  .#{$prefix}button {\r
    margin: .2em;\r
  }\r
\r
  &[data-side=left], &[data-side=right] {\r
    top: 0;\r
    @include box-orient(vertical);\r
  }\r
\r
  &[data-side=left] {\r
    left: 0;\r
  }\r
\r
  &[data-side=right] {\r
    right: 0;\r
  }\r
\r
  &[data-side=top], &[data-side=bottom] {\r
    @include box-orient(horizontal);\r
    right: 0;\r
  }\r
\r
  &[data-side=top] {\r
    top: 0;\r
  }\r
\r
  &[data-side=bottom] {\r
    bottom: 0;\r
    @include box-orient(horizontal);\r
  }\r
}\r