/** * @class Ext.panel.Resizer */ /** * @var {number} * Panel resizer handle size. */$panelresizer-handle-size: dynamic(10px); /** * @var {number} * Panel resizer handle size in the {@link Global_CSS#$enable-big big} sizing scheme. */$panelresizer-handle-size-big: dynamic(15px); /** * @var {color} * Panel resizer handle background color. */$panelresizer-handle-background-color: dynamic(transparent); /** * @var {color} * Panel resizer handle proxy background color. */$panelresizer-handle-proxy-background-color: dynamic(null); /** * @var {number} * Panel resizer handle proxy opacity. */$panelresizer-handle-proxy-opacity: dynamic(null); /** * @var {number/list} * Panel resizer handle proxy border width. */$panelresizer-handle-proxy-border-width: dynamic(1px); /** * @var {string} * Panel resizer handle proxy border style. */$panelresizer-handle-proxy-border-style: dynamic(dashed); /** * @var {color} * Panel resizer handle proxy border color. */$panelresizer-handle-proxy-border-color: dynamic(darken($panel-header-background-color, 15%)); /** * @var {number} * Panel resizer splitter size. */$panelresizer-splitter-size: dynamic(10px); /** * @var {number} * Panel resizer splitter size in the {@link Global_CSS#$enable-big big} sizing scheme. */$panelresizer-splitter-size-big: dynamic(15px); /** * @var {color} * Panel resizer splitter background color. */$panelresizer-splitter-background-color: dynamic($neutral-color); /** * @var {number/list} * Panel resizer splitter border width. */$panelresizer-splitter-border-width: dynamic(null); /** * @var {string} * Panel resizer splitter border style. */$panelresizer-splitter-border-style: dynamic(null); /** * @var {color} * Panel resizer splitter border color. */$panelresizer-splitter-border-color: dynamic(null); /** * @var {color} * Panel resizer splitter proxy background color. */$panelresizer-splitter-proxy-background-color: dynamic($neutral-dark-color); /** * @var {color} * Panel resizer splitter proxy opacity. */$panelresizer-splitter-proxy-opacity: dynamic(null); /** * @var {number/list} * Panel resizer splitter proxy border width. */$panelresizer-splitter-proxy-border-width: dynamic($panelresizer-splitter-border-width); /** * @var {string} * Panel resizer splitter proxy border style. */$panelresizer-splitter-proxy-border-style: dynamic($panelresizer-splitter-border-style); /** * @var {color} * Panel resizer splitter proxy border color. */$panelresizer-splitter-proxy-border-color: dynamic($panelresizer-splitter-border-color); /** * Creates a visual theme for a Panel Resizer * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {string} [$xtype=panelresizer] (protected) The base UI class to be used. * * @param {number} $handle-size * Panel resizer handle size. * * @param {number} $handle-size-big * Panel resizer handle size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $handle-background-color * Panel resizer handle background color. * * @param {color} $handle-proxy-background-color * Panel resizer handle proxy background color. * * @param {number} $handle-proxy-opacity * Panel resizer handle proxy opacity. * * @param {number/list} $handle-proxy-border-width * Panel resizer handle proxy border width. * * @param {string} $handle-proxy-border-style * Panel resizer handle proxy border style. * * @param {color} $handle-proxy-border-color * Panel resizer handle proxy border color. * * @param {number} $splitter-size * Panel resizer splitter size. * * @param {number} $splitter-size-big * Panel resizer splitter size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $splitter-background-color * Panel resizer splitter background color. * * @param {number/list} $splitter-border-width * Panel resizer splitter border width. * * @param {string} $splitter-border-style * Panel resizer splitter border style. * * @param {color} $splitter-border-color * Panel resizer splitter border color. * * @param {color} $splitter-proxy-background-color * Panel resizer splitter proxy background color. * * @param {number} $splitter-proxy-opacity * Panel resizer splitter proxy opacity. * * @param {number/list} $splitter-proxy-border-width * Panel resizer splitter proxy border width. * * @param {string} $splitter-proxy-border-style * Panel resizer splitter proxy border style. * * @param {color} $splitter-proxy-border-color * Panel resizer splitter proxy border color. */@mixin panelresizer-ui( $ui: null, $xtype: panelresizer, $handle-size: null, $handle-size-big: null, $handle-background-color: null, $handle-proxy-background-color: null, $handle-proxy-opacity: null, $handle-proxy-border-width: null, $handle-proxy-border-style: null, $handle-proxy-border-color: null, $splitter-size: null, $splitter-size-big: null, $splitter-background-color: null, $splitter-border-width: null, $splitter-border-style: null, $splitter-border-color: null, $splitter-proxy-background-color: null, $splitter-proxy-opacity: null, $splitter-proxy-border-width: null, $splitter-proxy-border-style: null, $splitter-proxy-border-color: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { &.#{$prefix}north, &.#{$prefix}northeast, &.#{$prefix}southeast, &.#{$prefix}south, &.#{$prefix}southwest, &.#{$prefix}northwest { &.#{$prefix}handle { height: $handle-size; @if $enable-big { .#{$prefix}big & { height: $handle-size-big; } } } &.#{$prefix}splitter { height: $splitter-size; @if $enable-big { .#{$prefix}big & { height: $splitter-size-big; } } } } &.#{$prefix}northeast, &.#{$prefix}east, &.#{$prefix}southeast, &.#{$prefix}southwest, &.#{$prefix}west, &.#{$prefix}northwest { &.#{$prefix}handle { width: $handle-size; @if $enable-big { .#{$prefix}big & { width: $handle-size-big; } } } &.#{$prefix}splitter { width: $splitter-size; @if $enable-big { .#{$prefix}big & { width: $splitter-size-big; } } } } &.#{$prefix}handle { background-color: $handle-background-color; } &.#{$prefix}splitter { background-color: $splitter-background-color; @include border($splitter-border-width, $splitter-border-style, $splitter-border-color); } } .#{$prefix}#{$xtype}#{$ui-suffix}-proxy { &.#{$prefix}handle { @include border($handle-proxy-border-width, $handle-proxy-border-style, $handle-proxy-border-color); background-color: $handle-proxy-background-color; opacity: $handle-proxy-opacity; } &.#{$prefix}splitter { @include border($splitter-proxy-border-width, $splitter-proxy-border-style, $splitter-proxy-border-color); background-color: $splitter-proxy-background-color; opacity: $splitter-proxy-opacity; &.#{$prefix}horizontal { width: $splitter-size; } &.#{$prefix}vertical { height: $splitter-size; } } } .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-north { padding-top: $splitter-size; @if $enable-big { .#{$prefix}big & { padding-top: $splitter-size-big; } } } .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-east { padding-right: $splitter-size; @if $enable-big { .#{$prefix}big & { padding-right: $splitter-size-big; } } } .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-south { padding-bottom: $splitter-size; @if $enable-big { .#{$prefix}big & { padding-bottom: $splitter-size-big; } } } .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-west { padding-left: $splitter-size; @if $enable-big { .#{$prefix}big & { padding-left: $splitter-size-big; } } }}