/** * @class Ext.calendar.view.Days */ /** * @var {color} * The background color. */$calendar-days-background-color: dynamic($calendar-background-color); /** * @var {number} * The height for a single hour in the view. */$calendar-days-hour-height: dynamic(42px); /** * @var {number} * The width for the day gutter. */$calendar-days-day-gutter-width: dynamic(15px); /** * @var {number} * The width for the day gutter when in compact mode. */$calendar-days-compact-day-gutter-width: dynamic(0); /** * @var {number} * The start margin for the day container. */$calendar-days-day-start-margin: dynamic(5px); /** * @var {number} * The start margin for the day container when in compact mode. */$calendar-days-compact-day-start-margin: dynamic(0); /** * @var {number} * The border width for hour markers. */$calendar-days-marker-border-width: dynamic(1px); /** * @var {string} * The border style for hour markers. */$calendar-days-marker-border-style: dynamic(solid); /** * @var {color} * The border color for hour markers. */$calendar-days-marker-border-color: dynamic($calendar-border-color); /** * @var {number} * The border width for half hour markers. */$calendar-days-marker-alt-border-width: dynamic(1px); /** * @var {string} * The border style for half hour markers. */$calendar-days-marker-alt-border-style: dynamic(dotted); /** * @var {color} * The border color for half hour markers. */$calendar-days-marker-alt-border-color: dynamic($calendar-border-color); /** * @var {number} * The border width for days. */$calendar-days-day-border-width: dynamic($calendar-days-marker-border-width); /** * @var {string} * The border style for days. */$calendar-days-day-border-style: dynamic($calendar-days-marker-border-style); /** * @var {color} * The border color for days. */$calendar-days-day-border-color: dynamic($calendar-days-marker-border-color); /** * @var {number} * The opacity for the current time marker. */$calendar-days-now-marker-opacity: dynamic(0.7); /** * @var {number/list} * The margin for the current time marker. */$calendar-days-now-marker-margin: dynamic(0 5px); /** * @var {number} * The height for the current time marker. */$calendar-days-now-marker-border-width: dynamic(2px 0 0 0); /** * @var {string} * The style for the current time marker. */$calendar-days-now-marker-border-style: dynamic(solid); /** * @var {color} * The color for the current time marker. */$calendar-days-now-marker-border-color: dynamic(#a94442); /** * @var {number} * The width for the time display. */$calendar-days-time-width: dynamic(4em); /** * @var {number} * The width for the time display when in compact mode. */$calendar-days-compact-time-width: dynamic(2em); /** * @var {number/list} * The padding for the time display. */$calendar-days-time-padding: dynamic(2px 2px 0 0); /** * @var {number/list} * The padding for the time display when in compact mode. */$calendar-days-compact-time-padding: dynamic(2px 2px 0 0); /** * @var {number} * The font size for the time display. */$calendar-days-time-font-size: dynamic($calendar-font-size); /** * @var {number} * The font size for the time display when in compact mode. */$calendar-days-compact-time-font-size: dynamic($calendar-small-font-size); /** * @var {string} * The font family for the time display. */$calendar-days-time-font-family: dynamic($calendar-font-family); /** * @var {string} * The color for the time display. */$calendar-days-time-color: dynamic(#666); /** * @var {string} * The background color for the time display. */$calendar-days-time-background-color: dynamic(#F7F9FD); /** * @var {string} * The text align for the time display. */$calendar-days-time-text-align: dynamic(right); /** * @var {number} * The line height for the am/pm text when used in the time gutter. */$calendar-days-time-ampm-line-height: dynamic(1em); /** * @var {number} * The height for the empty all day row to allow creation. */$calendar-days-allday-empty-height: dynamic(10px); /** * @var {color} * The background color for a selection. */$calendar-days-selection-background-color: dynamic($calendar-selection-color); /** * @var {number} * The opacity for a selection. */$calendar-days-selection-opacity: dynamic(0.3); /** * Creates a visual theme for the calendar days 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. * * @param {number} [$hour-height] * The height for a single hour in the view. * * @param {number} [$day-gutter-width] * The width for the day gutter. * * @param {number} [$day-start-margin] * The start margin for the day container. * * @param {number} [$marker-border-width] * The border width for hour markers. * * @param {string} [$marker-border-style] * The border style for hour markers. * * @param {color} [$marker-border-color] * The border color for hour markers. * * @param {number} [$marker-alt-border-width] * The border width for half hour markers. * * @param {string} [$marker-alt-border-style] * The border style for half hour markers. * * @param {color} [$marker-alt-border-color] * The border color for half hour markers. * * @param {number} [$day-border-width] * The border width for days. * * @param {string} [$day-border-style] * The border style for days. * * @param {color} [$day-border-color] * The border color for days. * * @param {number} [$now-marker-opacity] * The opacity for the current time marker. * * @param {number/list} [$now-marker-margin] * The margin for the current time marker. * * @param {number/list} [$now-marker-border-width] * The border width for the current time marker. * * @param {String} [$now-marker-border-style] * The border style for the current time marker. * * @param {color} [$now-marker-border-color] * The border color for the current time marker. * * @param {Number} [$time-width] * The width of the current time * * @param {color} [$time-background-color] * The background color for the current time * * @param {color} [$time-color] * The color for the current time * * @param {String} [$time-font-family] * The font family for the current time * * @param {Number} [$time-font-size] * The font size for the current time * * @param {String} [$time-text-align] * The font alignment for the current time * * @param {Number} [$time-padding] * The padding for the current time * * @param {String} [$time-ampm-line-height] * The line height for the current time * * @param {Number} [$allday-empty-height] * The height for the empty all day row to allow creation. * * @param {color} [$selection-background-color] * The background color for a selection. * * @param {number} [$selection-opacity] * The background color for a selection. */@mixin calendar-days-ui( $ui: null, $background-color: null, $hour-height: null, $day-gutter-width: null, $day-start-margin: null, $marker-border-width: null, $marker-border-style: null, $marker-border-color: null, $marker-alt-border-width: null, $marker-alt-border-style: null, $marker-alt-border-color: null, $day-border-width: null, $day-border-style: null, $day-border-color: null, $now-marker-opacity: null, $now-marker-margin: null, $now-marker-border-width: null, $now-marker-border-style: null, $now-marker-border-color: null, $time-width: null, $time-background-color: null, $time-color: null, $time-font-family: null, $time-font-size: null, $time-text-align: null, $time-padding: null, $time-ampm-line-height: null, $allday-empty-height: $calendar-days-allday-empty-height, $selection-background-color: null, $selection-opacity: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}calendar-days#{$ui-suffix} { background-color: $background-color; .#{$prefix}calendar-days-day-event-container { margin-right: $day-gutter-width; margin-left: $day-start-margin; } .#{$prefix}calendar-days-header-gutter { width: $time-width; background-color: $time-background-color; @include border($day-border-width, $day-border-style, $day-border-color); } .#{$prefix}calendar-days-allday-background-cell { @if $day-border-width != null { border-right: $day-border-width $day-border-style $day-border-color; border-top: $day-border-width $day-border-style $day-border-color; } } .#{$prefix}calendar-days-time-ct { background-color: $time-background-color; width: $time-width; @if $day-border-width != null { border-left: $day-border-width $day-border-style $day-border-color; border-right: $day-border-width $day-border-style $day-border-color; } } .#{$prefix}calendar-days-time { height: $hour-height; color: $time-color; padding: $time-padding; text-align: $time-text-align; font-family: $time-font-family; font-size: $time-font-size; @if $marker-border-width != null { border-bottom: $marker-border-width $marker-border-style $marker-border-color; } } .#{$prefix}calendar-days-time-ampm { line-height: $time-ampm-line-height; } .#{$prefix}calendar-days-day-column { @if $day-border-width != null { border-right: $day-border-width $day-border-style $day-border-color; } } .#{$prefix}calendar-days-marker { height: $hour-height; @if $marker-border-width != null { border-bottom: $marker-border-width $marker-border-style $marker-border-color; } } .#{$prefix}calendar-days-marker-alt { height: $hour-height / 2; @if $marker-alt-border-width != null { border-bottom: $marker-alt-border-width $marker-alt-border-style $marker-alt-border-color; } } .#{$prefix}calendar-days-now-marker { margin: $now-marker-margin; @if $now-marker-opacity != null { @include opacity($now-marker-opacity); } @include border($now-marker-border-width, $now-marker-border-style, $now-marker-border-color); } .#{$prefix}calendar-days-allday-empty-cell { line-height: $allday-empty-height; @if $day-border-width != null { border-bottom: $day-border-width $day-border-style $day-border-color; } } .#{$prefix}calendar-days-selection { background-color: $selection-background-color; @if $selection-opacity != null { @include opacity($selection-opacity); } } }} @mixin calendar-days-default-ui { @include calendar-days-ui( $ui: null, $background-color: $calendar-days-background-color, $hour-height: $calendar-days-hour-height, $marker-border-width: $calendar-days-marker-border-width, $marker-border-style: $calendar-days-marker-border-style, $marker-border-color: $calendar-days-marker-border-color, $marker-alt-border-width: $calendar-days-marker-alt-border-width, $marker-alt-border-style: $calendar-days-marker-alt-border-style, $marker-alt-border-color: $calendar-days-marker-alt-border-color, $day-border-width: $calendar-days-day-border-width, $day-border-style: $calendar-days-day-border-style, $day-border-color: $calendar-days-day-border-color, $now-marker-opacity: $calendar-days-now-marker-opacity, $now-marker-margin: $calendar-days-now-marker-margin, $now-marker-border-width: $calendar-days-now-marker-border-width, $now-marker-border-style: $calendar-days-now-marker-border-style, $now-marker-border-color: $calendar-days-now-marker-border-color, $time-background-color: $calendar-days-time-background-color, $time-color: $calendar-days-time-color, $time-font-family: $calendar-days-time-font-family, $time-text-align: $calendar-days-time-text-align, $time-ampm-line-height: $calendar-days-time-ampm-line-height, $allday-empty-height: $calendar-days-allday-empty-height, $selection-background-color: $calendar-days-selection-background-color, $selection-opacity: $calendar-days-selection-opacity );} @mixin calendar-days-large-ui { @include calendar-days-ui( $ui: 'large', $time-width: $calendar-days-time-width, $time-font-size: $calendar-days-time-font-size, $time-padding: $calendar-days-time-padding, $day-gutter-width: $calendar-days-day-gutter-width, $day-start-margin: $calendar-days-day-start-margin );} @mixin calendar-days-compact-ui { @include calendar-days-ui( $ui: 'compact', $time-width: $calendar-days-compact-time-width, $time-font-size: $calendar-days-compact-time-font-size, $time-padding: $calendar-days-compact-time-padding, $day-gutter-width: $calendar-days-compact-day-gutter-width, $day-start-margin: $calendar-days-compact-day-start-margin );}