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

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.widgets.datetime.definitions';
   3
   4 /* stylelint-disable no-duplicate-selectors */
   5 .mw-widgets-datetime-calendarWidget {
   6         background-color: @background-color-base;
   7         display: inline-block;
   8         position: relative;
   9         border: @border-base;
  10         border-radius: @border-radius-base;
  11         padding: 0.5em;
  12         box-shadow: @box-shadow-drop-medium;
  13         vertical-align: middle;
  14
  15         &:focus {
  16                 border-color: @border-color-progressive--focus;
  17                 outline: @outline-base--focus;
  18                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus, @box-shadow-drop-medium;
  19         }
  20
  21         &.mw-widgets-datetime-calendarWidget-dependent {
  22                 display: block;
  23                 position: absolute;
  24                 z-index: 4;
  25         }
  26
  27         &-grid {
  28                 table-layout: fixed;
  29
  30                 .mw-widgets-datetime-calendarWidget-cell {
  31                         display: table-cell;
  32                         white-space: nowrap;
  33                 }
  34         }
  35
  36         &.mw-widgets-datetime-calendarWidget-dependent {
  37                 margin-top: -1px;
  38         }
  39
  40         &-heading {
  41                 font-weight: bold;
  42                 text-align: center;
  43                 vertical-align: middle;
  44                 white-space: nowrap;
  45
  46                 .mw-widgets-datetime-calendarWidget-previous {
  47                         float: left;
  48
  49                         // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
  50                         &:first-child {
  51                                 margin-left: 0;
  52                         }
  53                 }
  54
  55                 .mw-widgets-datetime-calendarWidget-next {
  56                         float: right;
  57                 }
  58         }
  59
  60         &-grid {
  61                 margin: 0 auto;
  62
  63                 .mw-widgets-datetime-calendarWidget-cell {
  64                         text-align: center;
  65
  66                         .oo-ui-buttonElement-button {
  67                                 width: 100%;
  68                                 border: 1px solid rgba( 255, 255, 255, 0 );
  69                                 transition-property: @transition-property-base;
  70                                 transition-duration: @transition-duration-base;
  71                         }
  72
  73                         &.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button {
  74                                 .oo-ui-labelElement-label {
  75                                         color: @color-subtle;
  76                                 }
  77
  78                                 &:hover .oo-ui-labelElement-label {
  79                                         color: @color-inverted;
  80                                 }
  81                         }
  82
  83                         &.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button {
  84                                 background-color: @background-color-progressive--active;
  85
  86                                 .oo-ui-labelElement-label {
  87                                         color: @color-inverted;
  88                                 }
  89                         }
  90
  91                         &.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
  92                                 background-color: #36c;
  93                                 color: @color-inverted;
  94                                 border-color: #36c;
  95                         }
  96                 }
  97         }
  98
  99         &:focus &-grid &-cell&-focused .oo-ui-buttonElement-button {
 100                 border-color: rgba( 0, 0, 0, 0.3 );
 101         }
 102 }