/** * @class Ext.calendar.header.Base */ /** * @var {color} * The background color for the headers. */$calendar-header-background-color: dynamic($calendar-background-color); /** * @var {number} * The font size for the headers. */$calendar-header-font-size: dynamic($calendar-font-size); /** * @var {number} * The font size for the headers when in compact mode. */$calendar-header-compact-font-size: dynamic($calendar-font-size); /** * @var {string} * The font family for the headers. */$calendar-header-font-family: dynamic($calendar-font-family); /** * @var {number/string} * The font weight for the headers. */$calendar-header-font-weight: dynamic(normal); /** * @var {color} * The color for the headers. */$calendar-header-color: dynamic($color); /** * @var {number} * The gutter width. Used when the paired view has a gutter. */$calendar-header-gutter-width: dynamic($calendar-days-time-width); /** * @var {number} * The gutter width when in compact mode. Used when the paired view has a gutter. */$calendar-header-compact-gutter-width: dynamic($calendar-days-compact-time-width); /** * @var {color} * The gutter background color. Used when the paired view has a gutter. */$calendar-header-gutter-background-color: dynamic($calendar-days-time-background-color); /** * @var {string} * The horizontal alignment for the headers. */$calendar-header-cell-text-align: dynamic(center); /** * @var {number/list} * The padding for the headers. */$calendar-header-cell-padding: dynamic(8px 2px); /** * @var {number/list} * The padding for the headers when in compact mode. */$calendar-header-compact-cell-padding: dynamic(3px 2px); /** * @var {number} * The border width for the headers. */$calendar-header-cell-border-width: dynamic(1px); /** * @var {color} * The border color for the headers. */$calendar-header-cell-border-color: dynamic($calendar-border-color); /** * @var {string} * The border style for the headers. */$calendar-header-cell-border-style: dynamic(solid); /** * Creates a visual theme for the calendar header view. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color} [$background-color] * The background color for the headers. * * @param {number} [$font-size] * The font size for the headers. * * @param {string} [$font-family] * The font family for the headers. * * @param {number/string} [$font-weight] * The font weight for the headers. * * @param {color} [$color] * The color for the headers. * * @param {number} [$gutter-width] * The width for the header gutter. Used when the paired view has a gutter. * * @param {color} [$gutter-background-color] * The background color for the header gutter. Used when the paired view has a gutter. * * @param {string} [$cell-text-align] * The horizontal alignment for the headers. * * @param {number/list} [$cell-padding] * The padding for the headers. * * @param {number} [$cell-border-width] * The border width for the headers. * * @param {color} [$cell-border-color] * The border color for the headers. * * @param {string} [$cell-border-style] * The border style for the headers. */@mixin calendar-header-ui( $ui: null, $background-color: null, $font-size: null, $font-family: null, $font-weight: null, $color: null, $gutter-width: null, $gutter-background-color: null, $cell-text-align: null, $cell-padding: null, $cell-border-width: null, $cell-border-color: null, $cell-border-style: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}calendar-header#{$ui-suffix} { background-color: $background-color; .#{$prefix}calendar-header-cell { @include font($font-weight, $font-size, $line-height, $font-family); @include border($cell-border-width, $cell-border-style, $cell-border-color); border-bottom-width: 0; text-align: $cell-text-align; color: $color; padding: $cell-padding; } .#{$prefix}calendar-header-gutter { width: $gutter-width; background-color: $gutter-background-color; } }} @mixin calendar-header-default-ui { @include calendar-header-ui( $background-color: $calendar-header-background-color, $font-family: $calendar-header-font-family, $font-weight: $calendar-header-font-weight, $color: $calendar-header-color, $gutter-background-color: $calendar-header-gutter-background-color, $cell-text-align: $calendar-header-cell-text-align, $cell-border-width: $calendar-header-cell-border-width, $cell-border-color: $calendar-header-cell-border-color, $cell-border-style: $calendar-header-cell-border-style );} @mixin calendar-header-large-ui { @include calendar-header-ui( $ui: 'large', $font-size: $calendar-header-font-size, $gutter-width: $calendar-header-gutter-width, $cell-padding: $calendar-header-cell-padding );} @mixin calendar-header-compact-ui { @include calendar-header-ui( $ui: 'compact', $font-size: $calendar-header-compact-font-size, $gutter-width: $calendar-header-compact-gutter-width, $cell-padding: $calendar-header-compact-cell-padding );}