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

   1 /*!
   2  * MediaWiki Widgets – CalendarWidget styles.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7
   8 /* stylelint-disable no-duplicate-selectors */
   9 @import 'mediawiki.mixins';
  10
  11 @calendarWidth: 21em;
  12 @calendarHeight: 14em;
  13
  14 .mw-widget-calendarWidget {
  15         width: @calendarWidth;
  16 }
  17
  18 .mw-widget-calendarWidget-header {
  19         position: relative;
  20         line-height: 2.5;
  21 }
  22
  23 // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
  24 .mw-widget-calendarWidget-header .oo-ui-buttonWidget.oo-ui-iconElement {
  25         margin-left: 0;
  26         margin-right: 0;
  27 }
  28
  29 .mw-widget-calendarWidget-header .mw-widget-calendarWidget-labelButton {
  30         margin: 0 auto;
  31         display: block;
  32         width: @calendarWidth - 2 * 3em;
  33
  34         .oo-ui-buttonElement-button {
  35                 width: @calendarWidth - 2 * 3em;
  36                 text-align: center;
  37         }
  38 }
  39
  40 .mw-widget-calendarWidget-upButton {
  41         position: absolute;
  42         right: 3em;
  43 }
  44
  45 .mw-widget-calendarWidget-prevButton {
  46         float: left;
  47 }
  48
  49 .mw-widget-calendarWidget-nextButton {
  50         float: right;
  51 }
  52
  53 .mw-widget-calendarWidget-body-outer-wrapper {
  54         clear: both;
  55         position: relative;
  56         overflow: hidden;
  57         // Fit 7 days, 3em each
  58         width: @calendarWidth;
  59         // Fit 6 weeks + heading line, 2em each
  60         height: @calendarHeight;
  61 }
  62
  63 .mw-widget-calendarWidget-body-wrapper {
  64         .mw-widget-calendarWidget-body {
  65                 display: inline-block;
  66                 // Fit 7 days, 3em each
  67                 width: @calendarWidth;
  68                 // Fit 6 weeks + heading line, 2em each
  69                 height: @calendarHeight;
  70         }
  71
  72         .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
  73                 margin-top: -@calendarHeight; /* stylelint-disable-line value-keyword-case */
  74                 margin-left: -@calendarWidth; /* stylelint-disable-line value-keyword-case */
  75         }
  76
  77         .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
  78                 margin-top: 0;
  79                 margin-left: 0;
  80         }
  81 }
  82
  83 .mw-widget-calendarWidget-body-wrapper-fade-previous {
  84         width: @calendarWidth * 2;
  85         height: @calendarHeight;
  86
  87         .mw-widget-calendarWidget-body:first-child {
  88                 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
  89                 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  90                 .transition( margin-left 500ms );
  91         }
  92 }
  93
  94 .mw-widget-calendarWidget-body-wrapper-fade-next {
  95         width: @calendarWidth * 2;
  96         height: @calendarHeight;
  97
  98         .mw-widget-calendarWidget-body:first-child {
  99                 margin-left: -@calendarWidth !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
 100                 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 101                 .transition( margin-left 500ms );
 102         }
 103 }
 104
 105 .mw-widget-calendarWidget-body-wrapper-fade-up {
 106         width: @calendarWidth;
 107         height: @calendarHeight * 2;
 108
 109         .mw-widget-calendarWidget-body {
 110                 display: block;
 111         }
 112
 113         .mw-widget-calendarWidget-body:first-child {
 114                 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 115                 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 116                 .transition( margin-top 500ms );
 117         }
 118 }
 119
 120 .mw-widget-calendarWidget-body-wrapper-fade-down {
 121         width: @calendarWidth;
 122         height: @calendarHeight * 2;
 123
 124         .mw-widget-calendarWidget-body {
 125                 display: block;
 126         }
 127
 128         .mw-widget-calendarWidget-body:first-child {
 129                 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 130                 margin-top: -@calendarHeight !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
 131                 .transition( margin-top 500ms );
 132         }
 133 }
 134
 135 .mw-widget-calendarWidget-day,
 136 .mw-widget-calendarWidget-day-heading,
 137 .mw-widget-calendarWidget-month,
 138 .mw-widget-calendarWidget-year {
 139         display: inline-block;
 140         vertical-align: middle;
 141         white-space: nowrap;
 142         overflow: hidden;
 143         text-overflow: ellipsis;
 144         text-align: center;
 145 }
 146
 147 .mw-widget-calendarWidget-day,
 148 .mw-widget-calendarWidget-day-heading {
 149         // 7x7 grid
 150         width: @calendarWidth / 7;
 151         line-height: @calendarHeight / 7;
 152         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 153         &:nth-child( 7n ) {
 154                 width: @calendarWidth / 7 - 0.2em;
 155                 margin-right: 0.2em;
 156         }
 157         &:nth-child( 7n+1 ) {
 158                 width: @calendarWidth / 7 - 0.2em;
 159                 margin-left: 0.2em;
 160         }
 161         &:nth-child( 42 ) ~ & {
 162                 line-height: @calendarHeight / 7 - 0.2em;
 163                 margin-bottom: 0.2em;
 164         }
 165 }
 166
 167 .mw-widget-calendarWidget-month {
 168         // 2x6 grid
 169         width: @calendarWidth / 2;
 170         line-height: @calendarHeight / 6;
 171         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 172         &:nth-child( 2n ) {
 173                 width: @calendarWidth / 2 - 0.2em;
 174                 margin-right: 0.2em;
 175         }
 176         &:nth-child( 2n+1 ) {
 177                 width: @calendarWidth / 2 - 0.2em;
 178                 margin-left: 0.2em;
 179         }
 180         &:nth-child( 10 ) ~ & {
 181                 line-height: @calendarHeight / 6 - 0.2em;
 182                 margin-bottom: 0.2em;
 183         }
 184 }
 185
 186 .mw-widget-calendarWidget-year {
 187         // 5x4 grid
 188         width: @calendarWidth / 5;
 189         line-height: @calendarHeight / 4;
 190         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 191         &:nth-child( 5n ) {
 192                 width: @calendarWidth / 5 - 0.2em;
 193                 margin-right: 0.2em;
 194         }
 195         &:nth-child( 5n+1 ) {
 196                 width: @calendarWidth / 5 - 0.2em;
 197                 margin-left: 0.2em;
 198         }
 199         &:nth-child( 15 ) ~ & {
 200                 line-height: @calendarHeight / 4 - 0.2em;
 201                 margin-bottom: 0.2em;
 202         }
 203 }
 204
 205 .mw-widget-calendarWidget-item {
 206         cursor: pointer;
 207 }
 208
 209 /* Theme-specific */
 210 .mw-widget-calendarWidget {
 211         .box-sizing( border-box );
 212         border: 1px solid #a2a9b1;
 213         .transition( ~'border-color 100ms, box-shadow 100ms' );
 214
 215         &:focus {
 216                 border-color: #36c;
 217                 box-shadow: inset 0 0 0 1px #36c;
 218                 outline: 0;
 219         }
 220
 221         &-day {
 222                 color: #222;
 223                 border-radius: 2px;
 224         }
 225
 226         &-day-heading {
 227                 color: #54595d;
 228                 font-weight: bold;
 229         }
 230
 231         &-day-additional {
 232                 color: #a2a9b1;
 233
 234                 &:hover {
 235                         color: #222;
 236                 }
 237         }
 238
 239         &-day-today {
 240                 box-shadow: inset 0 0 0 1px #36c;
 241         }
 242
 243         &-item {
 244                 .transition( ~'background-color 250ms, color 250ms' );
 245
 246                 &:hover {
 247                         background-color: #36c;
 248                         color: #fff;
 249                 }
 250
 251                 &-selected {
 252                         background-color: #2a4b8d;
 253                         color: #fff;
 254                 }
 255         }
 256 }