/** * @class Ext.Panel */ /** * @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 {color} * Panel body background-color */$panel-body-background-color: dynamic(#fff); /** * @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(1rem); /** * @var {number} * Panel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-body-font-size-big: dynamic($panel-body-font-size); /** * @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 {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(1rem); /** * @var {number} * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-font-size-big: dynamic($panel-header-font-size); /** * @var {number} * Panel Header line-height */$panel-header-line-height: dynamic(1.23em); /** * @var {number} * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-line-height-big: dynamic(1.6em); /** * @var {string} * Panel Header font-family */$panel-header-font-family: dynamic($font-family); /** * @var {number/list} * Panel Header padding */$panel-header-padding: dynamic(.77em); /** * @var {number/list} * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-padding-big: dynamic(.67em); /** * @var {number} * Panel Header icon size. If specified in terms of `em` units, the icon will be sized * relative to {@link #$panel-header-icon-font-size}. */$panel-header-icon-size: dynamic(1em); /** * @var {number} * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme * If specified in terms of `em` units, the icon will be sized * relative to {@link #$panel-header-icon-font-size-big}. */$panel-header-icon-size-big: dynamic(1em); /** * @var {number} * Panel Header icon font-size. Used for configuring the size of font icons */$panel-header-icon-font-size: dynamic($panel-header-line-height); /** * @var {number} * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$panel-header-icon-font-size-big: dynamic($panel-header-line-height-big); /** * @var {number} * The space between the Panel Header icon and text when the icon is horizontally aligned */$panel-header-icon-horizontal-spacing: dynamic(.46em); /** * @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($panel-header-icon-horizontal-spacing); /** * @var {number} * The space between the Panel Header icon and text when the icon is vertically aligned */$panel-header-icon-vertical-spacing: dynamic(.2em); /** * @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($panel-header-icon-vertical-spacing); /** * @var {number} * Panel Header icon opacity */$panel-header-icon-opacity: dynamic(.5); /** * @var {string} * `true` to include {@link #manageBorders border management} rules */$panel-manage-borders: dynamic(true); /** * @var {boolean} * `true` to include the "light" panel UI */$panel-light-ui: dynamic($include-default-uis); /** * 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 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 {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} $header-icon-size * Panel Header icon size. If specified in terms of `em` units, the icon will be sized * relative to {@link #$header-icon-font-size}. * * @param {number} $header-icon-size-big * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme * If specified in terms of `em` units, the icon will be sized * relative to {@link #$header-icon-font-size-big}. * * @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 * * @var {number} $header-icon-opacity * Panel Header icon opacity * * @param {color} $tool-color * Tool icon color * * @param {number} $tool-size * Tool icon size. If specified in terms of `em` units, the icon will be sized * relative to {@link #$tool-font-size}. * * @param {number} $tool-size-big * Tool icon size in the {@link Global_CSS#$enable-big big} sizing scheme * If specified in terms of `em` units, the icon will be sized * relative to {@link #$tool-font-size-big}. * * @param {number} $tool-font-size * Tool icon font-size * * @param {number} $tool-font-size-big * Tool icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @var {number} $tool-spacing * The space between Panel Tools * * @var {number} $tool-spacing-big * The space between Panel Tools in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $tool-cursor * The cursor to display when the mouse cursor is over a Tool * * @param {number} $tool-opacity * Tool opacity * * @param {number} $tool-opacity-over * Tool opacity when hovered * * @param {number} $tool-opacity-pressed * Tool opacity when pressed * * @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, $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-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-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-opacity: null, $tool-opacity-over: null, $tool-opacity-pressed: 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; } } } } .x-panel-header#{$ui-suffix} { @include background-gradient($header-background-color, $header-background-gradient); color: $header-color; padding: $header-padding; @include font($header-font-weight, $header-font-size, $header-line-height, $header-font-family); @include border($header-border-width, $header-border-style, $header-border-color); @if $enable-big { .x-big & { padding: $header-padding-big; font-size: $header-font-size-big; line-height: $header-line-height-big; } } .x-tool { width: $tool-size; height: $tool-size; line-height: $tool-size; font-size: $tool-font-size; opacity: $tool-opacity; cursor: $tool-cursor; margin-left: $tool-spacing; &:hover { opacity: $tool-opacity-over; } &:active { opacity: $tool-opacity-pressed; } @if $enable-big { .x-big & { width: $tool-size-big; height: $tool-size-big; line-height: $tool-size-big; font-size: $tool-font-size-big; } } } } .x-panel-title#{$ui-suffix} { .x-panel-title-icon { width: $header-icon-size; height: $header-icon-size; line-height: $header-icon-size; font-size: $header-icon-font-size; opacity: $header-icon-opacity; @if $enable-big { .x-big & { width: $header-icon-size-big; height: $header-icon-size-big; line-height: $header-icon-size-big; font-size: $header-icon-font-size-big; } } &.x-panel-title-icon-top { margin-bottom: $header-icon-vertical-spacing; @if $enable-big { .x-big & { margin-bottom: $header-icon-vertical-spacing-big; } } } &.x-panel-title-icon-right { margin-left: $header-icon-horizontal-spacing; @if $enable-big { .x-big & { margin-left: $header-icon-horizontal-spacing-big; } } } &.x-panel-title-icon-bottom { margin-top: $header-icon-vertical-spacing; @if $enable-big { .x-big & { margin-top: $header-icon-vertical-spacing-big; } } } &.x-panel-title-icon-left { margin-right: $header-icon-horizontal-spacing; @if $enable-big { .x-big & { margin-right: $header-icon-horizontal-spacing-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, $header-background-color: $panel-header-background-color, $header-background-gradient: $panel-header-background-gradient, $header-color: $panel-header-color, $header-border-color: $panel-header-border-color, $header-border-width: $panel-header-border-width, $header-border-style: $panel-header-border-style, $header-font-weight: $panel-header-font-weight, $header-font-size: $panel-header-font-size, $header-font-size-big: $panel-header-font-size-big, $header-line-height: $panel-header-line-height, $header-line-height-big: $panel-header-line-height-big, $header-font-family: $panel-header-font-family, $header-padding: $panel-header-padding, $header-padding-big: $panel-header-padding-big, $header-icon-size: $panel-header-icon-size, $header-icon-size-big: $panel-header-icon-size-big, $header-icon-font-size: $panel-header-icon-font-size, $header-icon-font-size-big: $panel-header-icon-font-size-big, $header-icon-horizontal-spacing: $panel-header-icon-horizontal-spacing, $header-icon-horizontal-spacing-big: $panel-header-icon-horizontal-spacing-big, $header-icon-vertical-spacing: $panel-header-icon-vertical-spacing, $header-icon-vertical-spacing-big: $panel-header-icon-vertical-spacing-big, $header-icon-opacity: $panel-header-icon-opacity, $tool-color: $panel-tool-color, $tool-size: $panel-tool-size, $tool-size-big: $panel-tool-size-big, $tool-font-size: $panel-tool-font-size, $tool-font-size-big: $panel-tool-font-size-big, $tool-spacing: $panel-tool-spacing, $tool-spacing-big: $panel-tool-spacing-big, $tool-cursor: $panel-tool-cursor, $tool-opacity: $panel-tool-opacity, $tool-opacity-over: $panel-tool-opacity-over, $tool-opacity-pressed: $panel-tool-opacity-pressed ); /** * Generates style rules for the "light" panel UI. This mixin is invoked automatically * when {@link #$panel-light-ui} is `true`. * * Can be overridden in derived themes to customize the look and feel of the "light" UI. * * @member Ext.Button * @protected */@mixin panel-light-ui { $header-bg: mix($base-light-color, $neutral-light-color, 30%); @include panel-ui( $ui: 'light', $header-color: #666, $header-background-color: $header-bg, $border-color: $header-bg, $header-border-color: $header-bg, $body-border-color: $header-bg, $tool-color: #666 );}