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         background-color: @calendar-background-color;
  40         background-image:url("images/calendarContainerImages.png");
  41         background-position:0 -448px;
  42         background-repeat:repeat-x;
  43         text-align:center;
  44         padding:6px 5px 3px 5px;
  45         .border-radius(4px);
  46 }
  47 .dj_ie6 .claro .dijitCalendar {
  48         background-image:none;
  49 }
  50 .claro .dijitCalendar img {
  51         border:none;
  52 }
  53 .claro .dijitCalendarHover,
  54 .claro .dijitCalendarActive {
  55         /* treat dijitCalenderActive like hover since there's
  56          * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
  57          */
  58         background-color: @hovered-background-color;
  59         border:solid 1px @hovered-border-color;
  60 }
  61 .claro .dijitCalendarMonthContainer th {
  62         text-align:center;
  63         padding-bottom:4px;
  64         vertical-align:middle;
  65 }
  66 .claro .dijitCalendarMonthLabel {
  67         color: @text-color;
  68         font-size: 1.091em;
  69         padding: 0 4px;
  70 }
  71
  72 /* next/previous month arrows */
  73 .claro .dijitCalendarIncrementControl {
  74         width:18px;
  75         height:16px;
  76         background-image: url("images/calendarArrows.png");
  77         background-repeat: no-repeat;
  78 }
  79 .dj_ie6 .claro .dijitCalendarIncrementControl {
  80         background-image: url("images/calendarArrows8bit.png");
  81 }
  82 .claro .dijitCalendarIncrease {
  83         background-position:-18px 0;
  84 }
  85 .claro .dijitCalendarArrowHover .dijitCalendarDecrease {
  86         background-position:-36px 0;
  87 }
  88 .claro .dijitCalendarArrowHover .dijitCalendarIncrease {
  89         background-position:-55px 0;
  90 }
  91 .claro .dijitCalendarArrowActive .dijitCalendarDecrease {
  92         background-position:-72px 0;
  93 }
  94 .claro .dijitCalendarArrowActive .dijitCalendarIncrease {
  95         background-position:-91px 0;
  96 }
  97 .claro .dijitA11ySideArrow {
  98         /* text +/- labels instead of arrow icons, for high contrast mode */
  99         display: none;
 100 }
 101
 102
 103 .claro .dijitDayLabels th {
 104         padding:0 4px 0 4px;
 105         font-weight:bold;
 106         text-align:center;
 107 }
 108 .claro .dijitCalendarDayLabelTemplate {
 109         padding-bottom:0;
 110         text-align:center;
 111         border-bottom:1px solid @border-color;
 112         font-size:0.909em;
 113         padding:0 3px 2px;
 114 }
 115 .claro .dijitCalendarDateTemplate {
 116         text-align:center;
 117         background-color:@calendar-currentmonth-background-color;
 118         background-image:url("images/calendarContainerImages.png");
 119         background-position:0 0;
 120         background-repeat:repeat-x;
 121         border-bottom: 1px solid @minor-border-color;
 122         padding-top:0;
 123         font-size:0.909em;
 124         font-family: Arial;
 125         font-weight:bold;
 126         letter-spacing:.05em;
 127         text-align:center;
 128 }
 129 .dj_ie6 .claro .dijitCalendarDateTemplate {
 130         background-image: none;
 131 }
 132 .claro .dijitCalendarPreviousMonth,
 133 .claro .dijitCalendarNextMonth {
 134         background-color: @calendar-adjacentmonth-background-color;
 135         background-image:none;
 136         border-bottom:solid 1px @minor-border-color;    /* todo: redundant with above .dijitCalendarDateTemplate rule */
 137 }
 138 .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
 139         text-decoration:none;
 140         display:block;
 141         padding:3px 5px 3px 4px;
 142         border:solid 1px @calendar-currentmonth-background-color;       /* intentionally matches background-color, no visible border until hover/selection */
 143         background-color:rgba(171,212,251,0);   /* transparent causes black-flash animation problem on webkit */
 144         .transition-property(background-color, border);
 145         .transition-duration(.35s);
 146 }
 147 .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
 148 .claro .dijitCalendarNextMonth .dijitCalendarDateLabel{
 149         color: @calendar-adjacentmonth-text-color;
 150         border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
 151 }
 152
 153 .claro .dijitCalendarYearContainer {
 154         vertical-align:middle;
 155 }
 156 .claro .dijitCalendarYearControl {
 157         padding: 1px 2px 2px 2px;
 158 }
 159 .claro .dijitCalendarYearLabel {
 160         padding:2px 0 0 0;
 161         margin:0;
 162 }
 163 .claro .dijitCalendarYearLabel span {
 164         /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
 165         vertical-align:middle;
 166 }
 167 .claro .dijitCalendarSelectedYear {
 168         padding:0 3px;
 169 }
 170 .claro .dijitCalendarNextYear,
 171 .claro .dijitCalendarPreviousYear {
 172         padding: 1px 6px 1px 6px;
 173         font-size:0.909em;
 174 }
 175 .claro .dijitCalendarSelectedYear {
 176         font-size:1.091em;
 177         color:@selected-text-color;
 178 }
 179 /* End Normal Calendar Style */
 180 /* Hovered Calendar Style */
 181 .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{
 182         background-color:@hovered-background-color;
 183         border:solid 1px @hovered-border-color;
 184         color:@hovered-text-color;
 185         .transition-duration(.2s);
 186 }
 187 .claro .dijitCalendarNextYearHover,
 188 .claro .dijitCalendarPreviousYearHover {
 189         color:@hovered-text-color;
 190         border:solid 1px @calendar-button-hovered-border-color;
 191         padding: 0 5px 0 5px;   /* reduced by 1 to make room for border */
 192         background-color: @calendar-button-hovered-background-color;
 193 }
 194 /* End Hovered Calendar Style */
 195 /* Active Calendar Style */
 196 .claro .dijitCalendarNextYearActive,
 197 .claro .dijitCalendarPreviousYearActive {
 198         border: solid 1px @calendar-button-pressed-border-color;
 199         padding: 0 5px 0 5px;   /* reduced by 1 to make room for border */
 200         background-color:@calendar-button-pressed-background-color;
 201 }
 202 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
 203         background-image:url("images/calendarContainerImages.png");
 204         background-position:0 -300px;
 205         background-color: @calendar-date-pressed-background-color;
 206         border:solid 1px @calendar-date-pressed-border-color;
 207         .transition-duration(.1s);
 208 }
 209 .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
 210         background-image:none;
 211 }
 212 /* End Active Calendar Style */
 213 /* Selected Calendar Style */
 214 .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
 215         color:@selected-text-color;
 216         background-color: @calendar-date-selected-background-color;
 217         border-color: @calendar-date-selected-border-color;
 218 }
 219 /* End Selected Calendar Style */
 220 /* Disabled Calendar Style*/
 221 .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
 222         text-decoration:line-through;
 223
 224         /* override hover effects above, hover and click on disabled date should have no effect */
 225         background-color: transparent;
 226         border-width: 0;
 227         padding: 4px 6px 4px 5px;
 228         color: @disabled-text-color;
 229 }
 230
 231 /* End Disabled Calendar Style */
 232
 233 /* Styling for month DropDownButton */
 234
 235 .claro .dijitCalendar .dijitDropDownButton {
 236         margin: 0;
 237 }
 238 .claro .dijitCalendar .dijitButtonText {
 239         padding: 1px 0 3px;
 240         margin-right:-4px;
 241 }
 242 .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
 243         background-color: transparent;
 244         background-image: none;
 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 .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode {
 250         background-color: @calendar-button-hovered-background-color;
 251         border:solid 1px @calendar-button-hovered-border-color;
 252 }
 253
 254 /* Styling for month drop down list */
 255
 256 .claro .dijitCalendarMonthMenu {
 257         border-color: @popup-border-color;
 258         background-color: @menu-background-color;
 259         text-align:center;
 260         background-image: none;
 261 }
 262 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
 263         border-top: solid 1px @menu-background-color;           /* intentionally invisible until hover */
 264         border-bottom: solid 1px @menu-background-color;
 265         padding: 2px 0;
 266 }
 267 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
 268         background-color: @hovered-background-color;
 269         border-color: @hovered-border-color;
 270         border-width:1px 0;
 271         background-image: url("images/commonHighlight.png");
 272         background-repeat:repeat-x;
 273 }