/** * Creates a visual theme for a Panel. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color/list} $border-color * Panel border-color * * @param {number/list} $border-width * Panel border-width * * @param {string/list} $border-style * Panel border-style * * @param {color} $body-background-color * Panel body background-color * * @param {color} $body-color * Panel body text color * * @param {color} $body-border-color * Panel body border-color * * @param {number/list} $body-border-width * Panel body border-width * * @param {number/list} $body-border-style * Panel body border-style * * @param {string/number} $body-font-weight * Panel body font-weight * * @param {number} $body-font-size * Panel body font-size * * @param {number} $body-font-size-big * Panel body font-size in the {@link Ext.Component#$enable-big big} sizing scheme * * @param {number} $body-line-height * Panel body line-height * * @param {number} $body-line-height-big * Panel body line-height in the {@link Ext.Component#$enable-big big} sizing scheme * * @param {string} $body-font-family * Panel body font-family * * @param {string} $manage-borders * `true` to include {@link #manageBorders border management} rules * * @member Ext.Panel */@mixin panel-ui( $ui: null, $border-color: null, $border-width: null, $border-style: null, $body-background-color: null, $body-color: null, $body-border-color: null, $body-border-width: null, $body-border-style: null, $body-font-weight: null, $body-font-size: null, $body-font-size-big: null, $body-line-height: null, $body-line-height-big: null, $body-font-family: null, $manage-borders: $panel-manage-borders ) { $ui-suffix: ui-suffix($ui); .x-panel#{$ui-suffix} { @if not $manage-borders { @include border($border-width, $border-style, $border-color) } } .x-panel-inner#{$ui-suffix} { background-color: $body-background-color; color: $body-color; @include border($body-border-width, $body-border-style, $body-border-color); @include font($body-font-weight, $body-font-size, $body-line-height, $body-font-family); @if $enable-big { .x-big & { @if $body-font-size-big != $body-font-size { font-size: $body-font-size-big; } @if $body-line-height-big != $body-line-height { line-height: $body-line-height-big; } } } } @if $manage-borders { @include border-management( $parent-cls: panel#{$ui-suffix}, $border-width: 1px, $border-color: $base-color ); }} @include panel-ui( $border-color: $panel-border-color, $border-width: $panel-border-width, $border-style: $panel-border-style, $body-background-color: $panel-body-background-color, $body-color: $panel-body-color, $body-border-color: $panel-body-border-color, $body-border-width: $panel-body-border-width, $body-border-style: $panel-body-border-style, $body-font-weight: $panel-body-font-weight, $body-font-size: $panel-body-font-size, $body-font-size-big: $panel-body-font-size-big, $body-line-height: $panel-body-line-height, $body-line-height-big: $panel-body-line-height-big, $body-font-family: $panel-body-font-family ); // TODO: UI for floating/anchor styles // Private variables //$anchor-height: .7em; //$anchor-width: $anchor-height*2.33; //.x-webkit .x-anchor { // position: absolute; // overflow: hidden; // // &.x-anchor-top { // margin-top: -$anchor-height + 0.02em; // margin-left: -$anchor-width / 2; // width: $anchor-width; // height: $anchor-height; // -webkit-mask: 0 0 get-image-url('tip_top') no-repeat; // -webkit-mask-size: $anchor-width $anchor-height; // background-color: darken($base-color, 40%); // } // // &.x-anchor-bottom { // margin-left: -$anchor-width / 2; // width: $anchor-width; // height: $anchor-height; // -webkit-mask: 0 0 get-image-url('tip_bottom') no-repeat; // -webkit-mask-size: $anchor-width $anchor-height; // background-color: darken($base-color, 40%); // } // // &.x-anchor-left { // margin-left: -$anchor-width / 2 + 0.15em; // margin-top: -$anchor-height / 2; // height: $anchor-width; // width: $anchor-height; // -webkit-mask: 0 0 get-image-url('tip_left') no-repeat; // -webkit-mask-size: $anchor-height $anchor-width; // background-color: darken($base-color, 40%); // } // // &.x-anchor-right { // margin-top: -$anchor-height / 2; // height: $anchor-width; // width: $anchor-height; // -webkit-mask: 0 0 get-image-url('tip_right') no-repeat; // -webkit-mask-size: $anchor-height $anchor-width; // background-color: darken($base-color, 40%); // } //}