/** * @class Ext.Panel */ /** * @var {color} * Panel background-color */$panel-background-color: dynamic($background-color); /** * @var {color/list} * Panel border-color */$panel-border-color: dynamic($base-color); /** * @var {number/list} * Panel border-width */$panel-border-width: dynamic(1px); /** * @var {string/list} * Panel border-style */$panel-border-style: dynamic(solid); /** * @var {number/list} * Panel border-radius */$panel-border-radius: dynamic(null); /** * @var {number/list} * Panel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-border-radius-big: dynamic($panel-border-radius); /** * @var {color} * Panel body background-color */$panel-body-background-color: dynamic($panel-background-color); /** * @var {color} * Panel body text color */$panel-body-color: dynamic($color); /** * @var {color} * Panel body border-color */$panel-body-border-color: dynamic($neutral-medium-dark-color); /** * @var {number/list} * Panel body border-width */$panel-body-border-width: dynamic(1px); /** * @var {number/list} * Panel body border-style */$panel-body-border-style: dynamic(solid); /** * @var {string/number} * Panel body font-weight */$panel-body-font-weight: dynamic($font-weight-normal); /** * @var {number} * Panel body font-size */$panel-body-font-size: dynamic($font-size); /** * @var {number} * Panel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-body-font-size-big: dynamic($font-size-big); /** * @var {number} * Panel body line-height */$panel-body-line-height: dynamic($line-height); /** * @var {number} * Panel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-body-line-height-big: dynamic($panel-body-line-height); /** * @var {string} * Panel body font-family */$panel-body-font-family: dynamic($font-family); /** * @var {number/list} * Panel body padding */$panel-body-padding: dynamic(null); /** * @var {number/list} * Panel body padding in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-body-padding-big: dynamic(null); /** * @var {color} * Panel Header background-color */$panel-header-background-color: dynamic($base-color); /** * @var {string/list} * Panel Header background-gradient. Can be either the name of a gradient defined by * {@link Global_CSS#background-gradient} or a list of color stops. */$panel-header-background-gradient: dynamic(null); /** * @var {color} * Panel Header text color */$panel-header-color: dynamic(#fff); /** * @var {color/list} * Panel Header border-color */$panel-header-border-color: dynamic($panel-border-color); /** * @var {number/list} * Panel Header border-width */$panel-header-border-width: dynamic($panel-border-width); /** * @var {string/list} * Panel Header border-style */$panel-header-border-style: dynamic(solid); /** * @var {string/number} * Panel Header font-weight */$panel-header-font-weight: dynamic($font-weight-bold); /** * @var {number} * Panel Header font-size */$panel-header-font-size: dynamic($font-size); /** * @var {number} * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-font-size-big: dynamic($font-size-big); /** * @var {number} * Panel Header line-height */$panel-header-line-height: dynamic(16px); /** * @var {number} * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-line-height-big: dynamic(24px); /** * @var {string} * Panel Header font-family */$panel-header-font-family: dynamic($font-family); /** * @var {number/list} * Panel Header padding */$panel-header-padding: dynamic(0 10px); /** * @var {number/list} * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-padding-big: dynamic(0 15px); /** * @var {number/list} * Panel Header Title padding */$panel-header-title-padding: dynamic(7px 0); /** * @var {number/list} * Panel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-title-padding-big: dynamic(9px 0); /** * @var {number} * Panel Header Title opacity. */$panel-header-title-opacity: dynamic(null); /** * @var {shadow} * Panel Header Shadow */$panel-header-shadow: dynamic(null); /** * @var {number} * Z-Index for the Panel Header, should be used with shadows to raise header above content */$panel-header-z-index: dynamic(null); /** * @var {number} * Panel Header min-height */$panel-header-min-height: dynamic(36px); /** * @var {number} * Panel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-min-height-big: dynamic(44px); /** * @var {color} * Panel Header icon color. */$panel-header-icon-color: dynamic(rgba($panel-header-color, .5)); /** * @var {number} * Panel Header icon size */$panel-header-icon-size: dynamic($panel-header-line-height); /** * @var {number} * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-icon-size-big: dynamic($panel-header-line-height-big); /** * @var {number} * Panel Header icon font-size. Used for configuring the size of font icons */$panel-header-icon-font-size: dynamic(null); /** * @var {number} * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-icon-font-size-big: dynamic(null); /** * @var {number} * The space between the Panel Header icon and text when the icon is horizontally aligned */$panel-header-icon-horizontal-spacing: dynamic(6px); /** * @var {number} * The space between the Panel Header icon and text when the icon is horizontally aligned * in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-icon-horizontal-spacing-big: dynamic(8px); /** * @var {number} * The space between the Panel Header icon and text when the icon is vertically aligned */$panel-header-icon-vertical-spacing: dynamic(2px); /** * @var {number} * The space between the Panel Header icon and text when the icon is vertically aligned * in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-icon-vertical-spacing-big: dynamic(2px); /** * @var {number} * Panel Header icon opacity */$panel-header-icon-opacity: dynamic(null); /** * @var {color} * Panel Tool color */$panel-tool-color: dynamic($panel-header-color); /** * @var {number} * Panel Tool color when hovered */$panel-tool-hovered-color: dynamic(null); /** * @var {number} * Panel Tool color when pressed */$panel-tool-pressed-color: dynamic(null); /** * @var {number} * Panel Tool color when disabled */$panel-tool-disabled-color: dynamic(null); /** * @var {color} * Panel Tool background-color */$panel-tool-background-color: dynamic(null); /** * @var {number} * Panel Tool background-color when hovered */$panel-tool-hovered-background-color: dynamic(null); /** * @var {number} * Panel Tool background-color when pressed */$panel-tool-pressed-background-color: dynamic(null); /** * @var {number} * Panel Tool background-color when disabled */$panel-tool-disabled-background-color: dynamic(null); /** * @var {number} * Panel Tool opacity */$panel-tool-opacity: dynamic(.5); /** * @var {number} * Panel Tool opacity when hovered */$panel-tool-hovered-opacity: dynamic(.6); /** * @var {number} * Panel Tool opacity when pressed */$panel-tool-pressed-opacity: dynamic(.7); /** * @var {number} * Panel Tool opacity when disabled */$panel-tool-disabled-opacity: dynamic(null); /** * @var {number} * Panel Tool border radius */$panel-tool-border-radius: dynamic(null); /** * @var {number} * Panel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-tool-border-radius-big: dynamic(null); /** * @var {number} * Panel Tool size */$panel-tool-size: dynamic(null); /** * @var {number} * Panel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-tool-size-big: dynamic(null); /** * @var {number} * Panel Tool font-size */$panel-tool-font-size: dynamic($panel-tool-size); /** * @var {number} * Panel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-tool-font-size-big: dynamic($panel-tool-size-big); /** * @var {number} * The space between Panel Tools */$panel-tool-spacing: dynamic(null); /** * @var {number} * The space between Panel Tools in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-tool-spacing-big: dynamic(null); /** * @var {string} * Panel Tool cursor */$panel-tool-cursor: dynamic(null); /** * @var {string} * Panel Tool cursor when disabled */$panel-tool-disabled-cursor: dynamic(null); /** * @var {number} * Panel Tool outline width when focused */$panel-tool-focused-outline-width: dynamic(null); /** * @var {string} * Panel Tool outline style when focused */$panel-tool-focused-outline-style: dynamic(null); /** * @var {color} * Panel Tool outline color when focused */$panel-tool-focused-outline-color: dynamic($panel-header-color); /** * @var {number} * Panel Tool outline offset when focused */$panel-tool-focused-outline-offset: dynamic(null); /** * @var {color} * Panel anchor border-color */$panel-anchor-border-color: dynamic($panel-border-color); /** * @var {color} * Panel anchor background-color */$panel-anchor-background-color: dynamic($panel-body-background-color); /** * @var {number} * The height (in all orientations) of the anchor arrow */$panel-anchor-height: dynamic(10px); /** * @var {number} * The width (in all orientations) of the anchor arrow. */$panel-anchor-width: dynamic(20px); /** * @var {number} * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching * the target; */$panel-anchor-margin: dynamic(1px); /** * @var {string} * `true` to include {@link #manageBorders border management} rules */$panel-manage-borders: dynamic(true); /** * @var {map} * Parameters for the "light" panel UI. * Set to `null` to eliminate the UI from the CSS output. */$panel-light-ui: dynamic(( background-color: $neutral-light-color, border-color: mix($base-light-color, $neutral-light-color, 30%), body-border-color: mix($base-light-color, $neutral-light-color, 30%), header-background-color: mix($base-light-color, $neutral-light-color, 30%), header-border-color: mix($base-light-color, $neutral-light-color, 30%), header-color: #666, header-icon-color: rgba(#666, .5), tool-color: #666, tool-focused-outline-color: $base-color )); /** * 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 {String} [$xtype=panel] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {String} [$header-xtype=panelheader] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors for the header component. For use by UI mixins of derived classes. * * @param {String} [$title-xtype=paneltitle] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors for the title component. For use by UI mixins of derived classes. * * @param {String} [$tool-xtype=paneltool] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors for tools. For use by UI mixins of derived classes. * * @param {color} $background-color * Panel background-color * * @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 {number/list} $border-radius * Panel border-radius * * @param {number/list} $border-radius-big * Panel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @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 Global_CSS#$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 Global_CSS#$enable-big big} sizing scheme * * @param {string} $body-font-family * Panel body font-family * * @param {number/list} $body-padding * Panel body padding * * @param {number/list} $body-padding-big * Panel body padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $header-background-color * Panel Header background-color * * @param {string/list} $header-background-gradient * Panel Header background-gradient. Can be either the name of a gradient defined by * {@link Global_CSS#background-gradient} or a list of color stops. * * @param {color} $header-color * Panel Header text color * * @param {color/list} $header-border-color * Panel Header border-color * * @param {number/list} $header-border-width * Panel Header border-width * * @param {string/list} $header-border-style * Panel Header border-style * * @param {string/number} $header-font-weight * Panel Header font-weight * * @param {number} $header-font-size * Panel Header font-size * * @param {number} $header-font-size-big * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-line-height * Panel Header line-height * * @param {number} $header-line-height-big * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $header-font-family * Panel Header font-family * * @param {number/list} $header-padding * Panel Header padding * * @param {number/list} $header-padding-big * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $header-title-padding * Panel Header Title padding * * @param {number/list} $header-title-padding-big * Panel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-title-opacity * Panel Header Title opacity * * @param {shadow} $header-shadow * Panel Header Shadow * * @param {number} $header-z-index * Z-Index for the Panel Header, should be used with shadows to raise header above content * * @param {number} $header-min-height * Panel Header min-height * * @param {number} $header-min-height-big * Panel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $header-icon-color * Panel Header icon color. * * @param {number} $header-icon-size * Panel Header icon size * * @param {number} $header-icon-size-big * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-icon-font-size * Panel Header icon font-size. Used for configuring the size of font icons * * @param {number} $header-icon-font-size-big * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-icon-horizontal-spacing * The space between the Panel Header icon and text when the icon is horizontally aligned * * @param {number} $header-icon-horizontal-spacing-big * The space between the Panel Header icon and text when the icon is horizontally aligned * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-icon-vertical-spacing * The space between the Panel Header icon and text when the icon is vertically aligned * * @param {number} $header-icon-vertical-spacing-big * The space between the Panel Header icon and text when the icon is vertically aligned * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-icon-opacity * Panel Header icon opacity * * @param {color} $tool-color * Panel Tool color * * @param {number} $tool-hovered-color * Panel Tool color when hovered * * @param {number} $tool-pressed-color * Panel Tool color when pressed * * @param {number} $tool-disabled-color * Panel Tool color when disabled * * @param {color} $tool-background-color * Panel Tool background-color * * @param {number} $tool-hovered-background-color * Panel Tool background-color when hovered * * @param {number} $tool-pressed-background-color * Panel Tool background-color when pressed * * @param {number} $tool-disabled-background-color * Panel Tool background-color when disabled * * @param {number} $tool-opacity * Panel Tool opacity * * @param {number} $tool-hovered-opacity * Panel Tool opacity when hovered * * @param {number} $tool-pressed-opacity * Panel Tool opacity when pressed * * @param {number} $tool-disabled-opacity * Panel Tool opacity when disabled * * @param {number} $tool-border-radius * Panel Tool border radius * * @param {number} $tool-border-radius-big * Panel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $tool-size * Panel Tool size * * @param {number} $tool-size-big * Panel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $tool-font-size * Panel Tool font-size * * @param {number} $tool-font-size-big * Panel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $tool-spacing * The space between Panel Tools * * @param {number} $tool-spacing-big * The space between Panel Tools in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $tool-cursor * Panel Tool cursor * * @param {string} $tool-disabled-cursor * Panel Tool cursor when disabled * * @param {number} $tool-focused-outline-width * Panel Tool outline width when focused * * @param {string} $tool-focused-outline-style * Panel Tool outline style when focused * * @param {color} $tool-focused-outline-color * Panel Tool outline color when focused * * @param {number} $tool-focused-outline-offset * Panel Tool outline offset when focused * * @param {color} $anchor-border-color * Panel anchor border-color * * @param {color} $anchor-background-color * Panel anchor background-color * * @param {number} $anchor-height * The height (in all orientations) of the anchor arrow * * @param {number} $anchor-width * The width (in all orientations) of the anchor arrow. * * @param {number} $anchor-margin * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching * the target; * * @param {string} $manage-borders * `true` to include {@link #manageBorders border management} rules */@mixin panel-ui( $ui: null, $xtype: panel, $header-xtype: panelheader, $title-xtype: paneltitle, $tool-xtype: paneltool, $background-color: null, $border-color: null, $border-width: null, $border-style: null, $border-radius: null, $border-radius-big: 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, $body-padding: null, $body-padding-big: null, $header-background-color: null, $header-background-gradient: null, $header-color: null, $header-border-color: null, $header-border-width: null, $header-border-style: null, $header-font-weight: null, $header-font-size: null, $header-font-size-big: null, $header-line-height: null, $header-line-height-big: null, $header-font-family: null, $header-padding: null, $header-padding-big: null, $header-title-padding: null, $header-title-padding-big: null, $header-title-opacity: null, $header-shadow: null, $header-z-index: null, $header-min-height: null, $header-min-height-big: null, $header-icon-color: null, $header-icon-size: null, $header-icon-size-big: null, $header-icon-font-size: null, $header-icon-font-size-big: null, $header-icon-horizontal-spacing: null, $header-icon-horizontal-spacing-big: null, $header-icon-vertical-spacing: null, $header-icon-vertical-spacing-big: null, $header-icon-opacity: null, $tool-color: null, $tool-hovered-color: null, $tool-pressed-color: null, $tool-disabled-color: null, $tool-background-color: null, $tool-hovered-background-color: null, $tool-pressed-background-color: null, $tool-disabled-background-color: null, $tool-opacity: null, $tool-hovered-opacity: null, $tool-pressed-opacity: null, $tool-disabled-opacity: null, $tool-border-radius: null, $tool-border-radius-big: null, $tool-size: null, $tool-size-big: null, $tool-font-size: null, $tool-font-size-big: null, $tool-spacing: null, $tool-spacing-big: null, $tool-cursor: null, $tool-disabled-cursor: null, $tool-focused-outline-width: null, $tool-focused-outline-style: null, $tool-focused-outline-color: null, $tool-focused-outline-offset: null, $anchor-border-color: null, $anchor-background-color: null, $anchor-height: null, $anchor-width: null, $anchor-margin: null, $manage-borders: $panel-manage-borders ) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { background-color: $background-color; border-radius: $border-radius; @if $enable-big { .#{$prefix}big { border-radius: $border-radius-big; } } @if not $manage-borders { @include border($border-width, $border-style, $border-color); } @if $anchor-border-color == null { $anchor-border-color: $border-color; } @if $anchor-background-color == null { $anchor-background-color: $body-background-color; } $anchor-border-width: $border-width; > .#{$prefix}anchor-el { // This is read and used as the extra offset between the anchor point // and the target. margin: $anchor-margin; .#{$prefix}pointer-el { fill: $anchor-background-color; stroke-width: $anchor-border-width; stroke: $anchor-border-color; } &.#{$prefix}top { width: $anchor-width; height: $anchor-height; top: -$anchor-height; padding-bottom: $border-width; } &.#{$prefix}bottom { width: $anchor-width; height: $anchor-height; bottom: -$anchor-height; padding-top: $border-width; } &.#{$prefix}left { height: $anchor-width; width: $anchor-height; left: -$anchor-height; padding-right: $border-width; .#{$prefix}pointer-el { transform-origin: ($anchor-width / 2) ($anchor-width / 2); } } &.#{$prefix}right { height: $anchor-width; width: $anchor-height; right: -$anchor-height; padding-left: $border-width; .#{$prefix}pointer-el { transform-origin: ($anchor-height / 2) ($anchor-height / 2); } } } } .#{$prefix}#{$xtype}#{$ui-suffix}-body-el { padding: $body-padding; 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 { .#{$prefix}big & { font-size: $body-font-size-big; line-height: $body-line-height-big; padding: $body-padding-big; } } } // When a boxscroller is present we move the body border to the boxscroller element so // that it surrounds the items and tools .#{$prefix}#{$xtype}#{$ui-suffix}-boxscroller { @include border($body-border-width, $body-border-style, $body-border-color); > .#{$prefix}boxscroller-body > .#{$prefix}body-el { border: 0; } } @if $manage-borders { @include border-management( $parent-cls: #{$xtype}#{$ui-suffix}, $border-width: $border-width, $border-color: $border-color, $border-radius: $border-radius, $border-radius-big $border-radius-big ); } @include panelheader-ui( $ui: $ui, $xtype: $header-xtype, $background-color: $header-background-color, $background-gradient: $header-background-gradient, $border-color: $header-border-color, $border-width: $header-border-width, $border-style: $header-border-style, $padding: $header-padding, $padding-big: $header-padding-big, $shadow: $header-shadow, $z-index: $header-z-index, $min-height: $header-min-height, $min-height-big: $header-min-height-big ); @include paneltitle-ui( $ui: $ui, $xtype: $title-xtype, $color: $header-color, $font-weight: $header-font-weight, $font-size: $header-font-size, $font-size-big: $header-font-size-big, $line-height: $header-line-height, $line-height-big: $header-line-height-big, $font-family: $header-font-family, $padding: $header-title-padding, $padding-big: $header-title-padding-big, $opacity: $header-title-opacity, $icon-color: $header-icon-color, $icon-size: $header-icon-size, $icon-size-big: $header-icon-size-big, $icon-font-size: $header-icon-font-size, $icon-font-size-big: $header-icon-font-size-big, $icon-horizontal-spacing: $header-icon-horizontal-spacing, $icon-horizontal-spacing-big: $header-icon-horizontal-spacing-big, $icon-vertical-spacing: $header-icon-vertical-spacing, $icon-vertical-spacing-big: $header-icon-vertical-spacing-big, $icon-opacity: $header-icon-opacity ); @include tool-ui( $ui: $ui, $xtype: $tool-xtype, $color: $tool-color, $hovered-color: $tool-hovered-color, $pressed-color: $tool-pressed-color, $disabled-color: $tool-disabled-color, $background-color: $tool-background-color, $hovered-background-color: $tool-hovered-background-color, $pressed-background-color: $tool-pressed-background-color, $disabled-background-color: $tool-disabled-background-color, $opacity: $tool-opacity, $hovered-opacity: $tool-hovered-opacity, $pressed-opacity: $tool-pressed-opacity, $disabled-opacity: $tool-disabled-opacity, $border-radius: $tool-border-radius, $border-radius-big: $tool-border-radius-big, $size: $tool-size, $size-big: $tool-size-big, $font-size: $tool-font-size, $font-size-big: $tool-font-size-big, $spacing: $tool-spacing, $spacing-big: $tool-spacing-big, $cursor: $tool-cursor, $disabled-cursor: $tool-disabled-cursor, $focused-outline-width: $tool-focused-outline-width, $focused-outline-style: $tool-focused-outline-style, $focused-outline-color: $tool-focused-outline-color, $focused-outline-offset: $tool-focused-outline-offset );}