/** * @class Ext.mixin.Toolable */ /** * Toolable components need special handling for their padding. When there are no tools * (which usually means no dock wrapper) the padding on all sides is placed on the body-el, * However, when the component has tools, the horizontal padding needs to be removed * from the body-el and placed on the innermost dock wrapper so that the horizontal padding * is between the outermost tools and the left/right edges of the component. In this * configuration the space between the body and the tools is provided by the tools * themselves via $tool-spacing. * * The vertical padding remains on the body-el so that the height of the toolable component * when auto-heighted is determined by the body-el's line-height + padding + the element * borders. The tools gain an additional advantage from this arrangement because it means * they can be taller than the component's line-height and not cause the component's height * to increase since they are not "inside" of the vertical padding. * @private */@mixin toolable-ui( $ui: null, $xtype: null, $padding: null, $padding-big: null, $anchor: body-el) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix}-#{$anchor} { padding: $padding; @if $enable-big { .#{$prefix}big & { padding: $padding-big; } } } .#{$prefix}#{$xtype}#{$ui-suffix}-tool-dock { padding: box(0 right($padding) 0 left($padding)); @if $enable-big { .#{$prefix}big & { padding: box(0 right($padding-big) 0 left($padding-big)); } } > .#{$prefix}#{$anchor} { padding: box(top($padding) 0 bottom($padding) 0); @if $enable-big { .#{$prefix}big & { padding: box(top($padding-big) 0 bottom($padding-big) 0); } } } }}