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

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