lib/dijit/themes/claro/Calendar.less

   1 /* Calendar
   2  *
   3  * Styling Calendar mainly includes:
   4  *
   5  * 1. Calendar container
   6  *              .dijitCalendar - main container
   7  *              .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
   8  *
   9  * 2. Month
  10  *              .dijitCalendarMonthContainer
  11  *              .dijitCalendarMonthLabel
  12  *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
  13  *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
  14  *
  15  * 3. Date
  16  *              .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
  17  *              .dijitCalendarDateTemplate - date label wrapper
  18  *              .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
  19  *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
  20  *              .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
  21  *              .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
  22  *
  23  * 4. Year
  24  *              .dijitCalendarYearContainer
  25  *              .dijitCalendarYearLabel
  26  *              .dijitCalendarPreviousYear /.dijitCalendarNextYear
  27  *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
  28  *
  29  * 5. Dropdown Month Menu
  30  *              .dijitCalendarMonthMenu - menu container
  31  *              .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
  32  *              .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
  33  */
  34
  35 @import "variables";
  36
  37 .claro .dijitCalendar {
  38         border: solid 1px @border-color;
  39         border-collapse: separate;      // in case user CSS has set border-collapse: collapse for tables
  40         .border-radius(4px);
  41
  42         // Background color and alpha-gradient
  43         background-color: @calendar-background-color;
  44         background-image: url("images/calendar.png");   // fallback for browsers that don't support CSS gradients
  45         background-repeat: repeat-x;    // so bottom of calendar isn't affected by gradient image repeating
  46         .alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%);
  47
  48         text-align:center;
  49         padding:6px 5px 3px 5px;
  50 }
  51 .dj_ie6 .claro .dijitCalendar {
  52         background-image:none;  // because on IE6 background-image overrides background-color
  53 }
  54 .claro .dijitCalendar img {
  55         border:none;
  56 }
  57 .claro .dijitCalendarHover, .claro .dijitCalendar:hover,
  58 .claro .dijitCalendarActive {
  59         /* treat dijitCalendarActive like hover since there's
  60          * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
  61          */
  62         background-color: @hovered-background-color;
  63         border:solid 1px @hovered-border-color;
  64 }
  65 .claro .dijitCalendarMonthContainer th {
  66         text-align:center;
  67         padding-bottom:4px;
  68         vertical-align:middle;
  69 }
  70 .claro .dijitCalendarMonthLabel {
  71         color: @text-color;
  72         font-size: 1.091em;
  73         padding: 0 4px;
  74 }
  75
  76 /* next/previous month arrows */
  77 .claro .dijitCalendarIncrementControl {
  78         width:18px;
  79         height:16px;
  80         background-image: url(@image-calendar-arrows);
  81         background-repeat: no-repeat;
  82 }
  83 .dj_ie6 .claro .dijitCalendarIncrementControl {
  84         background-image: url(@image-calendar-arrows-ie6);
  85 }
  86 .claro .dijitCalendarIncrease {
  87         background-position:-18px 0;
  88 }
  89 .claro .dijitCalendarArrowHover .dijitCalendarDecrease,
  90 .claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
  91         background-position:-36px 0;
  92 }
  93 .claro .dijitCalendarArrowHover .dijitCalendarIncrease,
  94 .claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
  95         background-position:-55px 0;
  96 }
  97 .claro .dijitCalendarArrowActive .dijitCalendarDecrease,
  98 .claro .dijitCalendarArrow:active .dijitCalendarDecrease {
  99         background-position:-72px 0;
 100 }
 101 .claro .dijitCalendarArrowActive .dijitCalendarIncrease,
 102 .claro .dijitCalendarArrow:active .dijitCalendarIncrease {
 103         background-position:-91px 0;
 104 }
 105 .claro .dijitA11ySideArrow {
 106         /* text +/- labels instead of arrow icons, for high contrast mode */
 107         display: none;
 108 }
 109
 110 .claro .dijitCalendarDayLabelTemplate {
 111         padding-bottom:0;
 112         text-align:center;
 113         border-bottom:1px solid @border-color;
 114         padding:0 3px 2px;
 115 }
 116 .claro .dijitCalendarDayLabel {
 117         padding:0 4px 0 4px;
 118         font-weight:bold;
 119         font-size:0.909em;
 120         text-align:center;
 121         color: @text-color;
 122 }
 123 .claro .dijitCalendarDateTemplate {
 124         text-align:center;
 125         background-color:@calendar-currentmonth-background-color;
 126         border-bottom: 1px solid @minor-border-color;
 127         padding-top:0;
 128         font-size:0.909em;
 129         font-family: Arial;
 130         font-weight:bold;
 131         letter-spacing:.05em;
 132         text-align:center;
 133         color: @text-color;
 134 }
 135 .dj_ie6 .claro .dijitCalendarDateTemplate {
 136         background-image: none;
 137 }
 138 .claro .dijitCalendarPreviousMonth,
 139 .claro .dijitCalendarNextMonth {
 140         background-color: @calendar-adjacentmonth-background-color;
 141         background-image:none;
 142         border-bottom:solid 1px @minor-border-color;    /* todo: redundant with above .dijitCalendarDateTemplate rule */
 143 }
 144 .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
 145         text-decoration:none;
 146         display:block;
 147         padding:3px 5px 3px 4px;
 148         border:solid 1px @calendar-currentmonth-background-color;       /* intentionally matches background-color, no visible border until hover/selection */
 149         background-color:rgba(171,212,251,0);   /* transparent causes black-flash animation problem on webkit */
 150         .transition-property(background-color, border);
 151         .transition-duration(.35s);
 152 }
 153 .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
 154 .claro .dijitCalendarNextMonth .dijitCalendarDateLabel{
 155         color: @calendar-adjacentmonth-text-color;
 156         border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
 157 }
 158
 159 .claro .dijitCalendarYearContainer {
 160         vertical-align:middle;
 161 }
 162 .claro .dijitCalendarYearControl {
 163         padding: 1px 2px 2px 2px;
 164 }
 165 .claro .dijitCalendarYearLabel {
 166         padding: 2px 0 0 0;
 167         margin: 0;
 168         font-size: 1.17em;
 169 }
 170 .claro .dijitCalendarYearLabel span {
 171         /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
 172         vertical-align:middle;
 173 }
 174 .claro .dijitCalendarSelectedYear {
 175         padding:0 3px;
 176 }
 177 .claro .dijitCalendarNextYear,
 178 .claro .dijitCalendarPreviousYear {
 179         padding: 1px 6px 1px 6px;
 180         font-size:0.909em;
 181 }
 182 .claro .dijitCalendarSelectedYear {
 183         font-size:1.091em;
 184         color:@selected-text-color;
 185 }
 186 /* End Normal Calendar Style */
 187 /* Hovered Calendar Style */
 188 .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel,
 189 .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
 190         background-color:@hovered-background-color;
 191         border:solid 1px @hovered-border-color;
 192         color:@hovered-text-color;
 193         .transition-duration(.2s);
 194 }
 195 .claro .dijitCalendarNextYearHover, .claro .dijitCalendarNextYear:hover,
 196 .claro .dijitCalendarPreviousYearHover, .claro .dijitCalendarPreviousYear:hover {
 197         color:@hovered-text-color;
 198         border:solid 1px @calendar-button-hovered-border-color;
 199         padding: 0 5px 0 5px;   /* reduced by 1 to make room for border */
 200         background-color: @calendar-button-hovered-background-color;
 201 }
 202 /* End Hovered Calendar Style */
 203 /* Active Calendar Style */
 204 .claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active
 205 .claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active {
 206         border: solid 1px @calendar-button-pressed-border-color;
 207         padding: 0 5px 0 5px;   /* reduced by 1 to make room for border */
 208         background-color:@calendar-button-pressed-background-color;
 209 }
 210 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel,
 211 .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
 212         background-color: @calendar-date-pressed-background-color;
 213         border:solid 1px @calendar-date-pressed-border-color;
 214         .transition-duration(.1s);
 215 }
 216 .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
 217         background-image:none;
 218 }
 219 /* End Active Calendar Style */
 220 /* Selected Calendar Style */
 221 .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
 222         color:@selected-text-color;
 223         background-color: @calendar-date-selected-background-color;
 224         border-color: @calendar-date-selected-border-color;
 225 }
 226 /* End Selected Calendar Style */
 227 /* Disabled Calendar Style*/
 228 .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
 229         color: @disabled-text-color;
 230         text-decoration:line-through;
 231 }
 232
 233 /* End Disabled Calendar Style */
 234
 235 /* Styling for month DropDownButton */
 236
 237 .claro .dijitCalendar .dijitDropDownButton {
 238         margin: 0;
 239 }
 240 .claro .dijitCalendar .dijitButtonText {
 241         padding: 1px 0 3px;
 242         margin-right:-4px;
 243 }
 244 .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
 245         padding: 0 3px 0 2px;
 246         border:solid 1px @border-color;
 247         .box-shadow(0 0 0 rgba(0,0,0,0));
 248
 249     // Override background settings from vanilla .dijitButtonNode.   We want to inherit background of Calendar.
 250         background-color: transparent;
 251         background-image: none;
 252 }
 253 .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
 254 .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
 255         background-color: @calendar-button-hovered-background-color;
 256         border:solid 1px @calendar-button-hovered-border-color;
 257 }
 258
 259 /* Styling for month drop down list */
 260
 261 .claro .dijitCalendarMonthMenu {
 262         border-color: @popup-border-color;
 263         background-color: @menu-background-color;
 264         text-align:center;
 265         background-image: none;
 266 }
 267 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
 268         border-top: solid 1px @menu-background-color;           /* intentionally invisible until hover */
 269         border-bottom: solid 1px @menu-background-color;
 270         padding: 2px 0;
 271 }
 272 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
 273 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
 274         border-color: @hovered-border-color;
 275         border-width:1px 0;
 276         .gradient-and-filter(@hovered-background-color, 70, 0);
 277 }