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