/** * @class Ext.panel.Date */ /** * @var {number/list} * DatePanel pane margin. */$datepanel-pane-margin: dynamic(null); /** * @var {number/list} * DatePanel caption padding. */$datepanel-caption-padding: dynamic(null); /** * @var {number/list} * DatePanel caption padding in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-caption-padding-big: dynamic(null); /** * @var {color} * DatePanel caption color. */$datepanel-caption-color: dynamic(null); /** * @var {color} * DatePanel caption background color. */$datepanel-caption-background-color: dynamic(null); /** * @var {string} * DatePanel caption text-align. */$datepanel-caption-text-align: dynamic(center); /** * @var {string} * DatePanel caption font family. */$datepanel-caption-font-family: dynamic(null); /** * @var {number} * DatePanel caption font size. */$datepanel-caption-font-size: dynamic(null); /** * @var {number} * DatePanel caption font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-caption-font-size-big: dynamic(null); /** * @var {number/string} * DatePanel caption font weight. */$datepanel-caption-font-weight: dynamic(null); /** * @var {number} * DatePanel cell width. */$datepanel-cell-width: dynamic(28px); /** * @var {number} * DatePanel cell width in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-cell-width-big: dynamic(null); /** * @var {number} * DatePanel cell height. */$datepanel-cell-height: dynamic(28px); /** * @var {number} * DatePanel cell height in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-cell-height-big: dynamic(null); /** * @var {number} * DatePanel spacing between cells. */$datepanel-cell-spacing: dynamic(4px); /** * @var {number} * DatePanel spacing between cells in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-cell-spacing-big: dynamic(null); /** * @var {number/list} * DatePanel cell border radius. */$datepanel-cell-border-radius: dynamic(null); /** * @var {number/list} * DatePanel cell border radius in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-cell-border-radius-big: dynamic(null); /** * @var {color} * DatePanel cell color. */$datepanel-cell-color: dynamic(null); /** * @var {color} * DatePanel cell background color. */$datepanel-cell-background-color: dynamic(null); /** * @var {string} * DatePanel cell font family. */$datepanel-cell-font-family: dynamic(null); /** * @var {number} * DatePanel cell font size. */$datepanel-cell-font-size: dynamic(null); /** * @var {number} * DatePanel cell font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-cell-font-size-big: dynamic(null); /** * @var {number/string} * DatePanel cell font weight. */$datepanel-cell-font-weight: dynamic(null); /** * @var {number} * DatePanel day header cell height. */$datepanel-day-cell-height: dynamic(null); /** * @var {number} * DatePanel day header cell height in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-day-cell-height-big: dynamic(null); /** * @var {color} * DatePanel day header cell color. */$datepanel-day-cell-color: dynamic(null); /** * @var {color} * DatePanel day header cell background color. */$datepanel-day-cell-background-color: dynamic(#F5F5F5); /** * @var {string} * DatePanel day header cell font size. */$datepanel-day-cell-font-family: dynamic(null); /** * @var {number} * DatePanel day header font size. */$datepanel-day-cell-font-size: dynamic(null); /** * @var {number} * DatePanel day header font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-day-cell-font-size-big: dynamic(null); /** * @var {number/string} * DatePanel day header font weight. */$datepanel-day-cell-font-weight: dynamic(bold); /** * @var {number} * DatePanel date body cell height. */$datepanel-date-cell-height: dynamic(null); /** * @var {number} * DatePanel date body cell height in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-date-cell-height-big: dynamic(null); /** * @var {color} * DatePanel date body cell color. */$datepanel-date-cell-color: dynamic(null); /** * @var {color} * DatePanel date body cell background color. */$datepanel-date-cell-background-color: dynamic(null); /** * @var {string} * DatePanel date body cell font family. */$datepanel-date-cell-font-family: dynamic(null); /** * @var {number} * DatePanel date body cell font size. */$datepanel-date-cell-font-size: dynamic(null); /** * @var {number} * DatePanel date body cell font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-date-cell-font-size-big: dynamic(null); /** * @var {number/string} * DatePanel date body cell font weight. */$datepanel-date-cell-font-weight: dynamic(null); /** * @var {color/list} * DatePanel date body cell border color. */$datepanel-date-cell-border-color: dynamic(null); /** * @var {string/list} * DatePanel date body cell border style. */$datepanel-date-cell-border-style: dynamic(null); /** * @var {number/list} * DatePanel date body cell border width. */$datepanel-date-cell-border-width: dynamic(null); /** * @var {color} * DatePanel outside the current month cell color. */$datepanel-outside-cell-color: dynamic(#d0d0d0); /** * @var {color} * DatePanel outside the current month cell background color. */$datepanel-outside-cell-background-color: dynamic(null); /** * @var {number/string} * DatePanel outside the current month cell font weight. */$datepanel-outside-cell-font-weight: dynamic(null); /** * @var {color} * DatePanel today cell color. */$datepanel-today-cell-color: dynamic(null); /** * @var {color} * DatePanel today cell background color. */$datepanel-today-cell-background-color: dynamic($base-highlight-color); /** * @var {number/string} * DatePanel today cell font weight. */$datepanel-today-cell-font-weight: dynamic(null); /** * @var {color} * DatePanel special cell color. */$datepanel-special-cell-color: dynamic($base-light-color); /** * @var {color} * DatePanel special cell background color. */$datepanel-special-cell-background-color: dynamic(null); /** * @var {number/string} * DatePanel special cell font weight. */$datepanel-special-cell-font-weight: dynamic(null); /** * @var {color} * DatePanel weekend cell color. */$datepanel-weekend-cell-color: dynamic(null); /** * @var {color} * DatePanel weekend cell background color. */$datepanel-weekend-cell-background-color: dynamic(null); /** * @var {number/string} * DatePanel weekend cell font weight. */$datepanel-weekend-cell-font-weight: dynamic(null); /** * @var {number} * DatePanel weekend column width. */$datepanel-weekend-column-width: dynamic(80%); /** * @var {number} * DatePanel weekend column background color. */$datepanel-weekend-column-background-color: dynamic(null); /** * @var {number} * DatePanel weekend column vertical spacing. */$datepanel-weekend-column-spacing: dynamic(6px); /** * @var {color/list} * DatePanel weekend column border color. */$datepanel-weekend-column-border-color: dynamic($datepanel-weekend-column-background-color); /** * @var {string/list} * DatePanel weekend column border style. */$datepanel-weekend-column-border-style: dynamic(solid); /** * @var {number/list} * DatePanel weekend column border width. */$datepanel-weekend-column-border-width: dynamic(1px); /** * @var {number/list} * DatePanel weekend column border radius. */$datepanel-weekend-column-border-radius: dynamic(null); /** * @var {color} * DatePanel disabled cell color. */$datepanel-disabled-cell-color: dynamic(null); /** * @var {color} * DatePanel disabled cell background color. */$datepanel-disabled-cell-background-color: dynamic(#aaa); /** * @var {string/number} * DatePanel disabled cell font weight. */$datepanel-disabled-cell-font-weight: dynamic(null); /** * @var {color} * DatePanel selected cell color. */$datepanel-selected-cell-color: dynamic($light-color); /** * @var {color} * DatePanel selected cell background color. */$datepanel-selected-cell-background-color: dynamic($base-color); /** * @var {number/string} * DatePanel selected cell font weight. */$datepanel-selected-cell-font-weight: dynamic(null); /** * @var {color} * DatePanel focused cell outline color. */$datepanel-focused-cell-outline-color: dynamic(darken($base-color, 35%)); /** * @var {string} * DatePanel focused cell outline style. */$datepanel-focused-cell-outline-style: dynamic(solid); /** * @var {number} * DatePanel focused cell outline width. */$datepanel-focused-cell-outline-width: dynamic(1px); /** * @var {number} * DatePanel focused cell outline offset. */$datepanel-focused-cell-outline-offset: dynamic(-1px); /** * @var {color} * DatePanel selected focused cell outline color. */$datepanel-selected-focused-cell-outline-color: dynamic(#fff); /** * @var {number/list} * DatePanel split title header padding. */$datepanel-split-title-header-padding: dynamic(null); /** * @var {number/list} * DatePanel split title header padding in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-split-title-header-padding-big: dynamic(null); /** * @var {color} * DatePanel year (with split titles) color. */$datepanel-header-year-color: dynamic(null); /** * @var {number} * DatePanel year (with split titles) opacity. */$datepanel-header-year-opacity: dynamic(null); /** * @var {number} * DatePanel year (with split titles) font size. */$datepanel-header-year-font-size: dynamic(null); /** * @var {number} * DatePanel year (with split titles) font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-header-year-font-size-big: dynamic(null); /** * @var {string} * DatePanel year (with split titles) font family. */$datepanel-header-year-font-family: dynamic(null); /** * @var {string/number} * DatePanel year (with split titles) font weight. */$datepanel-header-year-font-weight: dynamic(500); /** * @var {number} * DatePanel year (with split titles) line height. */$datepanel-header-year-line-height: dynamic(null); /** * @var {number} * DatePanel year (with split titles) line height in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-header-year-line-height-big: dynamic(null); /** * @var {color} * DatePanel year (with split titles) inactive year color. */$datepanel-header-year-inactive-color: dynamic(null); /** * @var {color} * DatePanel year (with split titles) inactive year opacity. */$datepanel-header-year-inactive-opacity: dynamic(null); /** * @var {number} * DatePanel year (with split titles) inactive year font size. */$datepanel-header-year-inactive-font-size: dynamic(null); /** * @var {number} * DatePanel year (with split titles) inactive year font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-header-year-inactive-font-size-big: dynamic(null); /** * @var {color} * DatePanel title (with split titles) inactive color. */$datepanel-header-title-inactive-color: dynamic(null); /** * @var {number} * DatePanel title (with split titles) inactive opacity. */$datepanel-header-title-inactive-opacity: dynamic(null); /** * @var {number} * DatePanel title (with split titles) inactive font size. */$datepanel-header-title-inactive-font-size: dynamic(null); /** * @var {number} * DatePanel title (with split titles) inactive font size in the {@link Global_CSS#$enable-big big} sizing scheme. */$datepanel-header-title-inactive-font-size-big: dynamic(null); /** * @var {list} * DatePanel title (with split titles) inactive transition. */$datepanel-header-inactive-transition: dynamic(null); // Inherited panel styles /** * @var {color/list} * DatePanel border-color */$datepanel-border-color: dynamic(null); /** * @var {number/list} * DatePanel border-width */$datepanel-border-width: dynamic(null); /** * @var {string/list} * DatePanel border-style */$datepanel-border-style: dynamic(null); /** * @var {number/list} * DatePanel border-radius */$datepanel-border-radius: dynamic(null); /** * @var {number/list} * DatePanel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-border-radius-big: dynamic($datepanel-border-radius); /** * @var {color} * DatePanel body background-color */$datepanel-body-background-color: dynamic(null); /** * @var {color} * DatePanel body text color */$datepanel-body-color: dynamic(null); /** * @var {color} * DatePanel body border-color */$datepanel-body-border-color: dynamic($datepanel-border-color); /** * @var {number/list} * DatePanel body border-width */$datepanel-body-border-width: dynamic(null); /** * @var {number/list} * DatePanel body border-style */$datepanel-body-border-style: dynamic(null); /** * @var {string/number} * DatePanel body font-weight */$datepanel-body-font-weight: dynamic(null); /** * @var {number} * DatePanel body font-size */$datepanel-body-font-size: dynamic(null); /** * @var {number} * DatePanel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-body-font-size-big: dynamic(null); /** * @var {number} * DatePanel body line-height */$datepanel-body-line-height: dynamic(null); /** * @var {number} * DatePanel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-body-line-height-big: dynamic(null); /** * @var {string} * DatePanel body font-family */$datepanel-body-font-family: dynamic(null); /** * @var {number/list} * DatePanel body padding */$datepanel-body-padding: dynamic(null); /** * @var {number/list} * DatePanel body padding in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-body-padding-big: dynamic(null); /** * @var {color} * DatePanel Header background-color */$datepanel-header-background-color: dynamic(null); /** * @var {string/list} * DatePanel Header background-gradient. Can be either the name of a gradient defined by * {@link Global_CSS#background-gradient} or a list of color stops. */$datepanel-header-background-gradient: dynamic(null); /** * @var {color} * DatePanel Header text color */$datepanel-header-color: dynamic(null); /** * @var {color/list} * DatePanel Header border-color */$datepanel-header-border-color: dynamic($datepanel-border-color); /** * @var {number/list} * DatePanel Header border-width */$datepanel-header-border-width: dynamic(null); /** * @var {string/list} * DatePanel Header border-style */$datepanel-header-border-style: dynamic(null); /** * @var {string/number} * DatePanel Header font-weight */$datepanel-header-font-weight: dynamic(null); /** * @var {number} * DatePanel Header font-size */$datepanel-header-font-size: dynamic(null); /** * @var {number} * DatePanel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-font-size-big: dynamic(null); /** * @var {number} * DatePanel Header line-height */$datepanel-header-line-height: dynamic(null); /** * @var {number} * DatePanel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-line-height-big: dynamic(null); /** * @var {string} * DatePanel Header font-family */$datepanel-header-font-family: dynamic(null); /** * @var {number/list} * DatePanel Header padding */$datepanel-header-padding: dynamic(null); /** * @var {number/list} * DatePanel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-padding-big: dynamic(null); /** * @var {number/list} * DatePanel Header Title padding */$datepanel-header-title-padding: dynamic(null); /** * @var {number/list} * DatePanel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-title-padding-big: dynamic(null); /** * @var {number} * DatePanel Header Title opacity */$datepanel-header-title-opacity: dynamic(null); /** * @var {shadow} * DatePanel Header Shadow */$datepanel-header-shadow: dynamic(null); /** * @var {number} * Z-Index for the DatePanel Header, should be used with shadows to raise header above content */$datepanel-header-z-index: dynamic(null); /** * @var {number} * DatePanel Header min-height */$datepanel-header-min-height: dynamic(null); /** * @var {number} * DatePanel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-min-height-big: dynamic(null); /** * @var {color} * DatePanel Header icon color. */$datepanel-header-icon-color: dynamic(null); /** * @var {number} * DatePanel Header icon size */$datepanel-header-icon-size: dynamic(null); /** * @var {number} * DatePanel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-icon-size-big: dynamic(null); /** * @var {number} * DatePanel Header icon font-size. Used for configuring the size of font icons */$datepanel-header-icon-font-size: dynamic(null); /** * @var {number} * DatePanel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-icon-font-size-big: dynamic(null); /** * @var {number} * The space between the DatePanel Header icon and text when the icon is horizontally aligned */$datepanel-header-icon-horizontal-spacing: dynamic(null); /** * @var {number} * The space between the DatePanel Header icon and text when the icon is horizontally aligned * in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-icon-horizontal-spacing-big: dynamic(null); /** * @var {number} * The space between the DatePanel Header icon and text when the icon is vertically aligned */$datepanel-header-icon-vertical-spacing: dynamic(null); /** * @var {number} * The space between the DatePanel Header icon and text when the icon is vertically aligned * in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-header-icon-vertical-spacing-big: dynamic(null); /** * @var {number} * DatePanel Header icon opacity */$datepanel-header-icon-opacity: dynamic(null); /** * @var {color} * DatePanel Tool color */$datepanel-tool-color: dynamic(null); /** * @var {number} * DatePanel Tool color when hovered */$datepanel-tool-hovered-color: dynamic(null); /** * @var {number} * DatePanel Tool color when pressed */$datepanel-tool-pressed-color: dynamic(null); /** * @var {number} * DatePanel Tool color when disabled */$datepanel-tool-disabled-color: dynamic(null); /** * @var {color} * DatePanel Tool background-color */$datepanel-tool-background-color: dynamic(null); /** * @var {number} * DatePanel Tool background-color when hovered */$datepanel-tool-hovered-background-color: dynamic(null); /** * @var {number} * DatePanel Tool background-color when pressed */$datepanel-tool-pressed-background-color: dynamic(null); /** * @var {number} * DatePanel Tool background-color when disabled */$datepanel-tool-disabled-background-color: dynamic(null); /** * @var {number} * DatePanel Tool opacity */$datepanel-tool-opacity: dynamic(null); /** * @var {number} * DatePanel Tool opacity when hovered */$datepanel-tool-hovered-opacity: dynamic(null); /** * @var {number} * DatePanel Tool opacity when pressed */$datepanel-tool-pressed-opacity: dynamic(null); /** * @var {number} * DatePanel Tool opacity when disabled */$datepanel-tool-disabled-opacity: dynamic(null); /** * @var {number} * DatePanel Tool border radius */$datepanel-tool-border-radius: dynamic(null); /** * @var {number} * DatePanel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-tool-border-radius-big: dynamic(null); /** * @var {number} * DatePanel Tool size */$datepanel-tool-size: dynamic(null); /** * @var {number} * DatePanel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-tool-size-big: dynamic(null); /** * @var {number} * DatePanel Tool font-size */$datepanel-tool-font-size: dynamic(null); /** * @var {number} * DatePanel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-tool-font-size-big: dynamic(null); /** * @var {number} * The space between DatePanel Tools */$datepanel-tool-spacing: dynamic(null); /** * @var {number} * The space between DatePanel Tools in the {@link Global_CSS#$enable-big big} sizing scheme */$datepanel-tool-spacing-big: dynamic(null); /** * @var {string} * DatePanel Tool cursor */$datepanel-tool-cursor: dynamic(null); /** * @var {string} * DatePanel Tool cursor when disabled */$datepanel-tool-disabled-cursor: dynamic(null); /** * @var {number} * DatePanel Tool outline width when focused */$datepanel-tool-focused-outline-width: dynamic(null); /** * @var {string} * DatePanel Tool outline style when focused */$datepanel-tool-focused-outline-style: dynamic(null); /** * @var {color} * DatePanel Tool outline color when focused */$datepanel-tool-focused-outline-color: dynamic(null); /** * @var {number} * DatePanel Tool outline offset when focused */$datepanel-tool-focused-outline-offset: dynamic(null); /** * @var {color} * DatePanel anchor border-color */$datepanel-anchor-border-color: dynamic(null); /** * @var {color} * DatePanel anchor background-color */$datepanel-anchor-background-color: dynamic(null); /** * @var {number} * The height (in all orientations) of the anchor arrow */$datepanel-anchor-height: dynamic(null); /** * @var {number} * The width (in all orientations) of the anchor arrow. */$datepanel-anchor-width: dynamic(null); /** * @var {number} * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching * the target; */$datepanel-anchor-margin: dynamic(null); /** * @var {string} * `true` to include {@link #manageBorders border management} rules */$datepanel-manage-borders: dynamic($panel-manage-borders); /** * Creates a visual theme for a DatePanel. * * @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=datepanel] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {String} [$header-xtype=dateheader] (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=datetitle] (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=datepaneltool] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors for tools. For use by UI mixins of derived classes. * * @param {number/list} $pane-margin * DatePanel pane margin. * * @param {number/list} $caption-padding * DatePanel caption padding. * * @param {number/list} $caption-padding-big * DatePanel caption padding in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $caption-color * DatePanel caption color. * * @param {color} $caption-background-color * DatePanel caption background color. * * @param {string} $caption-text-align * DatePanel caption text-align. * * @param {string} $caption-font-family * DatePanel caption font family. * * @param {number} $caption-font-size * DatePanel caption font size. * * @param {number} $caption-font-size-big * DatePanel caption font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number/string} $caption-font-weight * DatePanel caption font weight. * * @param {number} $cell-width * DatePanel cell width. * * @param {number} $cell-width-big * DatePanel cell width in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number} $cell-height * DatePanel cell height. * * @param {number} $cell-height-big * DatePanel cell height in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number} $cell-spacing * DatePanel spacing between cells. * * @param {number} $cell-spacing-big * DatePanel spacing between cells in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number/list} $cell-border-radius * DatePanel cell border radius. * * @param {number/list} $cell-border-radius-big * DatePanel cell border radius in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $cell-color * DatePanel cell color. * * @param {color} $cell-background-color * DatePanel cell background color. * * @param {string} $cell-font-family * DatePanel cell font family. * * @param {number} $cell-font-size * DatePanel cell font size. * * @param {number} $cell-font-size-big * DatePanel cell font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number/string} $cell-font-weight * DatePanel cell font weight. * * @param {number} $day-cell-height * DatePanel day header cell height. * * @param {number} $day-cell-height-big * DatePanel day header cell height in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $day-cell-color * DatePanel day header cell color. * * @param {color} $day-cell-background-color * DatePanel day header cell background color. * * @param {string} $day-cell-font-family * DatePanel day header cell font size. * * @param {number} $day-cell-font-size * DatePanel day header font size. * * @param {number} $day-cell-font-size-big * DatePanel day header font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number/string} $day-cell-font-weight * DatePanel day header font weight. * * @param {number} $date-cell-height * DatePanel date body cell height. * * @param {number} $date-cell-height-big * DatePanel date body cell height in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $date-cell-color * DatePanel date body cell color. * * @param {color} $date-cell-background-color * DatePanel date body cell background color. * * @param {string} $date-cell-font-family * DatePanel date body cell font family. * * @param {number} $date-cell-font-size * DatePanel date body cell font size. * * @param {number} $date-cell-font-size-big * DatePanel date body cell font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {number/string} $date-cell-font-weight * DatePanel date body cell font weight. * * @param {color/list} $date-cell-border-color * DatePanel date body cell border color. * * @param {string/list} $date-cell-border-style * DatePanel date body cell border style. * * @param {number/list} $date-cell-border-width * DatePanel date body cell border width. * * @param {color} $outside-cell-color * DatePanel outside the current month cell color. * * @param {color} $outside-cell-background-color * DatePanel outside the current month cell background color. * * @param {number/string} $outside-cell-font-weight * DatePanel outside the current month cell font weight. * * @param {color} $today-cell-color * DatePanel today cell color. * * @param {color} $today-cell-background-color * DatePanel today cell background color. * * @param {number/string} $today-cell-font-weight * DatePanel today cell font weight. * * @param {color} $special-cell-color * DatePanel special cell color. * * @param {color} $special-cell-background-color * DatePanel special cell background color. * * @param {number/string} $special-cell-font-weight * DatePanel special cell font weight. * * @param {color} $weekend-cell-color * DatePanel weekend cell color. * * @param {color} $weekend-cell-background-color * DatePanel weekend cell background color. * * @param {number/string} $weekend-cell-font-weight * DatePanel weekend cell font weight. * * @param {number} $weekend-column-width * DatePanel weekend column width. * * @param {number} $weekend-column-background-color * DatePanel weekend column background color. * * @param {number} $weekend-column-spacing * DatePanel weekend column vertical spacing. * * @param {color/list} $weekend-column-border-color * DatePanel weekend column border color. * * @param {string/list} $weekend-column-border-style * DatePanel weekend column border style. * * @param {number/list} $weekend-column-border-width * DatePanel weekend column border width. * * @param {number/list} $weekend-column-border-radius * DatePanel weekend column border radius. * * @param {color} $disabled-cell-color * DatePanel disabled cell color. * * @param {color} $disabled-cell-background-color * DatePanel disabled cell background color. * * @param {string/number} $disabled-cell-font-weight * DatePanel disabled cell font weight. * * @param {color} $selected-cell-color * DatePanel selected cell color. * * @param {color} $selected-cell-background-color * DatePanel selected cell background color. * * @param {number/string} $selected-cell-font-weight * DatePanel selected cell font weight. * * @param {color} $focused-cell-outline-color * DatePanel focused cell outline color. * * @param {string} $focused-cell-outline-style * DatePanel focused cell outline style. * * @param {number} $focused-cell-outline-width * DatePanel focused cell outline width. * * @param {number} $focused-cell-outline-offset * DatePanel focused cell outline offset. * * @param {color} $selected-focused-cell-outline-color * DatePanel selected focused cell outline color. * * @param {number/list} $split-title-header-padding * DatePanel split title header padding. * * @param {number/list} $split-title-header-padding-big * DatePanel split title header padding in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $header-year-color * DatePanel year (with split titles) color. * * @param {number} $header-year-opacity * DatePanel year (with split titles) opacity. * * @param {number} $header-year-font-size * DatePanel year (with split titles) font size. * * @param {number} $header-year-font-size-big * DatePanel year (with split titles) font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {string} $header-year-font-family * DatePanel year (with split titles) font family. * * @param {string/number} $header-year-font-weight * DatePanel year (with split titles) font weight. * * @param {number} $header-year-line-height * DatePanel year (with split titles) line height. * * @param {number} $header-year-line-height-big * DatePanel year (with split titles) line height in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $header-year-inactive-color * DatePanel year (with split titles) inactive year color. * * @param {color} $header-year-inactive-opacity * DatePanel year (with split titles) inactive year opacity. * * @param {number} $header-year-inactive-font-size * DatePanel year (with split titles) inactive year font size. * * @param {number} $header-year-inactive-font-size-big * DatePanel year (with split titles) inactive year font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {color} $header-title-inactive-color * DatePanel title (with split titles) inactive color. * * @param {number} $header-title-inactive-opacity * DatePanel title (with split titles) inactive opacity. * * @param {number} $header-title-inactive-font-size * DatePanel title (with split titles) inactive font size. * * @param {number} $header-title-inactive-font-size-big * DatePanel title (with split titles) inactive font size in the {@link Global_CSS#$enable-big big} sizing scheme. * * @param {list} $header-inactive-transition * DatePanel title (with split titles) inactive transition. * * * @param {color} $background-color * DatePanel background-color * * @param {color/list} $border-color * DatePanel border-color * * @param {number/list} $border-width * DatePanel border-width * * @param {string/list} $border-style * DatePanel border-style * * @param {number/list} $border-radius * DatePanel border-radius * * @param {number/list} $border-radius-big * DatePanel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $body-background-color * DatePanel body background-color * * @param {color} $body-color * DatePanel body text color * * @param {color} $body-border-color * DatePanel body border-color * * @param {number/list} $body-border-width * DatePanel body border-width * * @param {number/list} $body-border-style * DatePanel body border-style * * @param {string/number} $body-font-weight * DatePanel body font-weight * * @param {number} $body-font-size * DatePanel body font-size * * @param {number} $body-font-size-big * DatePanel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $body-line-height * DatePanel body line-height * * @param {number} $body-line-height-big * DatePanel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $body-font-family * DatePanel body font-family * * @param {number/list} $body-padding * DatePanel body padding * * @param {number/list} $body-padding-big * DatePanel body padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $header-background-color * DatePanel Header background-color * * @param {string/list} $header-background-gradient * DatePanel 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 * DatePanel Header text color * * @param {color/list} $header-border-color * DatePanel Header border-color * * @param {number/list} $header-border-width * DatePanel Header border-width * * @param {string/list} $header-border-style * DatePanel Header border-style * * @param {string/number} $header-font-weight * DatePanel Header font-weight * * @param {number} $header-font-size * DatePanel Header font-size * * @param {number} $header-font-size-big * DatePanel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-line-height * DatePanel Header line-height * * @param {number} $header-line-height-big * DatePanel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $header-font-family * DatePanel Header font-family * * @param {number/list} $header-padding * DatePanel Header padding * * @param {number/list} $header-padding-big * DatePanel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $header-title-padding * DatePanel Header Title padding * * @param {number/list} $header-title-padding-big * DatePanel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-title-opacity * DatePanel Header Title opacity * * @param {shadow} $header-shadow * DatePanel Header Shadow * * @param {number} $header-z-index * Z-Index for the DatePanel Header, should be used with shadows to raise header above content * * @param {number} $header-min-height * DatePanel Header min-height * * @param {number} $header-min-height-big * DatePanel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $header-icon-color * DatePanel Header icon color. * * @param {number} $header-icon-size * DatePanel Header icon size * * @param {number} $header-icon-size-big * DatePanel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-icon-font-size * DatePanel Header icon font-size. Used for configuring the size of font icons * * @param {number} $header-icon-font-size-big * DatePanel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $header-icon-horizontal-spacing * The space between the DatePanel Header icon and text when the icon is horizontally aligned * * @param {number} $header-icon-horizontal-spacing-big * The space between the DatePanel 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 DatePanel Header icon and text when the icon is vertically aligned * * @param {number} $header-icon-vertical-spacing-big * The space between the DatePanel 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 * DatePanel Header icon opacity * * @param {color} $tool-color * DatePanel Tool color * * @param {number} $tool-hovered-color * DatePanel Tool color when hovered * * @param {number} $tool-pressed-color * DatePanel Tool color when pressed * * @param {number} $tool-disabled-color * DatePanel Tool color when disabled * * @param {color} $tool-background-color * DatePanel Tool background-color * * @param {number} $tool-hovered-background-color * DatePanel Tool background-color when hovered * * @param {number} $tool-pressed-background-color * DatePanel Tool background-color when pressed * * @param {number} $tool-disabled-background-color * DatePanel Tool background-color when disabled * * @param {number} $tool-opacity * DatePanel Tool opacity * * @param {number} $tool-hovered-opacity * DatePanel Tool opacity when hovered * * @param {number} $tool-pressed-opacity * DatePanel Tool opacity when pressed * * @param {number} $tool-disabled-opacity * DatePanel Tool opacity when disabled * * @param {number} $tool-border-radius * DatePanel Tool border radius * * @param {number} $tool-border-radius-big * DatePanel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $tool-size * DatePanel Tool size * * @param {number} $tool-size-big * DatePanel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $tool-font-size * DatePanel Tool font-size * * @param {number} $tool-font-size-big * DatePanel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $tool-spacing * The space between DatePanel Tools * * @param {number} $tool-spacing-big * The space between DatePanel Tools in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $tool-cursor * DatePanel Tool cursor * * @param {string} $tool-disabled-cursor * DatePanel Tool cursor when disabled * * @param {number} $tool-focused-outline-width * DatePanel Tool outline width when focused * * @param {string} $tool-focused-outline-style * DatePanel Tool outline style when focused * * @param {color} $tool-focused-outline-color * DatePanel Tool outline color when focused * * @param {number} $tool-focused-outline-offset * DatePanel Tool outline offset when focused * * @param {color} $anchor-border-color * DatePanel anchor border-color * * @param {color} $anchor-background-color * DatePanel 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 datepanel-ui( $ui: null, $xtype: datepanel, $header-xtype: datepanelheader, $title-xtype: datetitle, $tool-xtype: datepaneltool, //DateView styles $pane-margin: null, $caption-padding: null, $caption-padding-big: null, $caption-color: null, $caption-background-color: null, $caption-text-align: null, $caption-font-family: null, $caption-font-size: null, $caption-font-size-big: null, $caption-font-weight: null, $cell-width: null, $cell-width-big: null, $cell-height: null, $cell-height-big: null, $cell-spacing: null, $cell-spacing-big: null, $cell-border-radius: null, $cell-border-radius-big: null, $cell-color: null, $cell-background-color: null, $cell-font-family: null, $cell-font-size: null, $cell-font-size-big: null, $cell-font-weight: null, $day-cell-height: null, $day-cell-height-big: null, $day-cell-color: null, $day-cell-background-color: null, $day-cell-font-family: null, $day-cell-font-size: null, $day-cell-font-size-big: null, $day-cell-font-weight: null, $date-cell-height: null, $date-cell-height-big: null, $date-cell-color: null, $date-cell-background-color: null, $date-cell-font-family: null, $date-cell-font-size: null, $date-cell-font-size-big: null, $date-cell-font-weight: null, $date-cell-border-color: null, $date-cell-border-style: null, $date-cell-border-width: null, $outside-cell-color: null, $outside-cell-background-color: null, $outside-cell-font-weight: null, $today-cell-color: null, $today-cell-background-color: null, $today-cell-font-weight: null, $special-cell-color: null, $special-cell-background-color: null, $special-cell-font-weight: null, $weekend-cell-color: null, $weekend-cell-background-color: null, $weekend-cell-font-weight: null, $weekend-column-width: null, $weekend-column-background-color: null, $weekend-column-spacing: null, $weekend-column-border-color: null, $weekend-column-border-style: null, $weekend-column-border-width: null, $weekend-column-border-radius: null, $disabled-cell-color: null, $disabled-cell-background-color: null, $disabled-cell-font-weight: null, $selected-cell-color: null, $selected-cell-background-color: null, $selected-cell-font-weight: null, $focused-cell-outline-color: null, $focused-cell-outline-style: null, $focused-cell-outline-width: null, $focused-cell-outline-offset: null, $selected-focused-cell-outline-color: null, // DatePanel styles $split-title-header-padding: null, $split-title-header-padding-big: null, $header-year-color: null, $header-year-opacity: null, $header-year-font-size: null, $header-year-font-size-big: null, $header-year-font-family: null, $header-year-font-weight: null, $header-year-line-height: null, $header-year-line-height-big: null, $header-year-inactive-color: null, $header-year-inactive-opacity: null, $header-year-inactive-font-size: null, $header-year-inactive-font-size-big: null, $header-title-inactive-color: null, $header-title-inactive-opacity: null, $header-title-inactive-font-size: null, $header-title-inactive-font-size-big: null, $header-inactive-transition: null, // Inherited panel styles $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: $datepanel-manage-borders ) { $ui-suffix: ui-suffix($ui); $arguments: intersect-arguments(datepanel-ui, panel-ui); @include panel-ui($arguments...); .#{$prefix}#{$xtype}#{$ui-suffix} { .#{$prefix}navigation-tools { @function calcPos($margin) { $sum: ceil($cell-width / 2) + $margin; @if $sum != null { @return calc(#{$sum} - 1em); } @else { @return 1em; } } top: top($pane-margin); right: calcPos(right($pane-margin)); left: calcPos(left($pane-margin)); } .#{$prefix}split { @include padding($split-title-header-padding); @if $enable-big { .#{$prefix}big & { @include padding($split-title-header-padding-big); } } } .#{$prefix}year-el { color: $header-year-color; opacity: $header-year-opacity; @include font( $font-weight: $header-year-font-weight, $font-size: $header-year-font-size, $font-family: $header-year-font-family, $line-height: $header-year-line-height ); @if $enable-big { .#{$prefix}big & { font-size: $header-year-font-size; $line-height: $header-year-line-height-big; } } &.#{$prefix}inactive { color: $header-year-inactive-color; opacity: $header-year-inactive-opacity; font-size: $header-year-inactive-font-size; transition: $header-inactive-transition; @if $enable-big { .#{$prefix}big & { font-size: $header-year-inactive-font-size-big; } } } } .#{$prefix}text-el { &.#{$prefix}inactive { color: $header-title-inactive-color; opacity: $header-title-inactive-opacity; font-size: $header-title-inactive-font-size; transition: $header-inactive-transition; @if $enable-big { .#{$prefix}big & { font-size: $header-title-inactive-font-size-big; } } } } .#{$prefix}dateview { table { margin: $pane-margin; } caption { padding: $caption-padding; color: $caption-color; background-color: $caption-background-color; text-align: $caption-text-align; @include font( $font-weight: $caption-font-weight, $font-size: $caption-font-size, $font-family: $caption-font-family ); @if $enable-big { .#{$prefix}big & { padding: $caption-padding-big; font-size: $caption-font-size-big; } } } .#{$prefix}cell { padding: $cell-spacing; @if $enable-big { .#{$prefix}big & { padding: cell-spacing-big; } } .#{$prefix}inner { width: $cell-width; height: $cell-height; color: $cell-color; background-color: $cell-background-color; @include border-radius($cell-border-radius); @include font( $font-weight: $cell-font-weight, $font-size: $cell-font-size, $font-family: $cell-font-family ); @if $enable-big { .#{$prefix}big & { width: $cell-width-big; font-size: $cell-font-size-big; @include border-radius($cell-border-radius-big); } } } } thead .#{$prefix}cell { background-color: $day-cell-background-color; .#{$prefix}inner { height: coalesce($day-cell-height, $cell-height); color: $day-cell-color; @include font( $font-weight: $day-cell-font-weight, $font-size: $day-cell-font-size, $font-family: $day-cell-font-family ); @if $enable-big { .#{$prefix}big & { height: $day-cell-height-big; font-size: $day-cell-font-size-big; } } } } tbody .#{$prefix}cell { .#{$prefix}inner { height: $date-cell-height; color: $date-cell-color; background-color: $date-cell-background-color; @include font( $font-weight: $date-cell-font-weight, $font-size: $date-cell-font-size, $font-family: $date-cell-font-family ); @include border( $date-cell-border-width, $date-cell-border-style, $date-cell-border-color ); @if $enable-big { .#{$prefix}big & { height: $date-cell-height-big; font-size: $date-cell-font-size-big; } } } &.#{$prefix}outside { .#{$prefix}inner { color: $outside-cell-color; background-color: $outside-cell-background-color; font-weight: $outside-cell-font-weight; } } &.#{$prefix}weekend { .#{$prefix}inner { color: $weekend-cell-color; background-color: $weekend-cell-background-color; font-weight: $weekend-cell-font-weight; } } &.#{$prefix}today { .#{$prefix}inner { color: $today-cell-color; background-color: $today-cell-background-color; font-weight: $today-cell-font-weight; } } &.#{$prefix}special { .#{$prefix}inner { color: $special-cell-color; background-color: $special-cell-background-color; font-weight: $special-cell-font-weight; } } &.#{$prefix}disabled { .#{$prefix}inner { color: $disabled-cell-color; background-color: $disabled-cell-background-color; font-weight: $disabled-cell-font-weight; } } &.#{$prefix}selected { .#{$prefix}inner { color: $selected-cell-color; background-color: $selected-cell-background-color; font-weight: $selected-cell-font-weight; } } @function calcOffset($padding) { $ret: 0; $offset: $focused-cell-outline-offset; @if $offset != null { @if $padding == null { $padding: 0; } $ret: (-$padding - 1) + $offset; } @return $ret; } &:focus:not(.#{$prefix}hide-focus) { .#{$prefix}inner { //.#{$prefix}keyboard-mode & { @include outline( $width: $focused-cell-outline-width, $style: $focused-cell-outline-style, $color: $focused-cell-outline-color, $offset: calcOffset($cell-spacing), $border-radius: $cell-border-radius ); .#{$prefix}big & { @include outline( $width: $focused-cell-outline-width, $style: $focused-cell-outline-style, $color: $focused-cell-outline-color, $offset: calcOffset($cell-spacing-big), $border-radius: $cell-border-radius-big ); } //} } } &:focus.#{$prefix}selected:not(.#{$prefix}hide-focus) { .#{$prefix}inner { //.#{$prefix}keyboard-mode & { @include outline( $width: $focused-cell-outline-width, $style: $focused-cell-outline-style, $color: $selected-focused-cell-outline-color, $offset: calcOffset($cell-spacing), $border-radius: $cell-border-radius ); .#{$prefix}big & { @include outline( $width: $focused-cell-outline-width, $style: $focused-cell-outline-style, $color: $selected-focused-cell-outline-color, $offset: calcOffset($cell-spacing-big), $border-radius: $cell-border-radius-big ); } //} } } } @if $weekend-column-background-color != null { tbody .#{$prefix}weekend { z-index: 0; position: relative; .#{$prefix}inner { z-index: 1; &:before { width: $weekend-column-width; background-color: $weekend-column-background-color; border-color: $weekend-column-border-color; border-style: $weekend-column-border-style; border-left-width: left($weekend-column-border-width); border-right-width: right($weekend-column-border-width); // These are structural styles, but they are controlled by // the theme, which is why they are included here z-index: -1; position: absolute; content: ''; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); } } } tbody { tr:first-child .#{$prefix}weekend { .#{$prefix}inner { &:before { top: $weekend-column-spacing; border-top-width: top($weekend-column-border-width); border-top-left-radius: $weekend-column-border-radius; border-top-right-radius: $weekend-column-border-radius; } } } tr:last-child .#{$prefix}weekend { .#{$prefix}inner { &:before { bottom: $weekend-column-spacing; border-bottom-width: bottom($weekend-column-border-width); border-bottom-left-radius: $weekend-column-border-radius; border-bottom-right-radius: $weekend-column-border-radius; } } } } } } }}