resources/src/mediawiki.widgets.datetime/CalendarWidget.less

   1 @import "mediawiki.widgets.datetime.definitions";
   2
   3 .mw-widgets-datetime-calendarWidget {
   4         display: inline-block;
   5         position: relative;
   6         vertical-align: middle;
   7         padding: .5em;
   8
   9         &.mw-widgets-datetime-calendarWidget-dependent {
  10                 display: block;
  11                 position: absolute;
  12                 z-index: 4;
  13         }
  14
  15         &-grid {
  16                 table-layout: fixed;
  17
  18                 .mw-widgets-datetime-calendarWidget-cell {
  19                         display: table-cell;
  20                         white-space: nowrap;
  21                 }
  22         }
  23
  24         background-color: #fff;
  25         border: 1px solid #ccc;
  26
  27         &.mw-widgets-datetime-calendarWidget-dependent {
  28                 margin-top: -1px;
  29                 border-top: 1px solid #fff;
  30         }
  31
  32         &-heading {
  33                 text-align: center;
  34                 vertical-align: middle;
  35                 font-weight: bold;
  36                 white-space: nowrap;
  37
  38                 .mw-widgets-datetime-calendarWidget-previous {
  39                         float: left;
  40                 }
  41                 .mw-widgets-datetime-calendarWidget-next {
  42                         float: right;
  43                 }
  44         }
  45
  46         &-grid {
  47                 margin: 0 auto;
  48
  49                 .mw-widgets-datetime-calendarWidget-cell {
  50                         text-align: center;
  51
  52                         .oo-ui-buttonElement-button {
  53                                 width: 100%;
  54                                 border: 1px dotted rgba( 255, 255, 255, 0.0 );
  55                                 .oo-ui-box-sizing( border-box );
  56                         }
  57
  58                         &.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button .oo-ui-labelElement-label {
  59                                 color: #bbb;
  60                         }
  61
  62                         &.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button {
  63                                 background-color: #def;
  64                                 .oo-ui-labelElement-label {
  65                                         color: #38f;
  66                                 }
  67                         }
  68                 }
  69         }
  70
  71         &:focus &-grid &-cell&-focused .oo-ui-buttonElement-button {
  72                 border-color: rgba( 0, 0, 0, 0.3 );
  73         }
  74 }