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
 153         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 154         &:nth-child( 7n ) {
 155                 width: @calendarWidth / 7 - 0.2em;
 156                 margin-right: 0.2em;
 157         }
 158
 159         &:nth-child( 7n+1 ) {
 160                 width: @calendarWidth / 7 - 0.2em;
 161                 margin-left: 0.2em;
 162         }
 163
 164         &:nth-child( 42 ) ~ & {
 165                 line-height: @calendarHeight / 7 - 0.2em;
 166                 margin-bottom: 0.2em;
 167         }
 168 }
 169
 170 .mw-widget-calendarWidget-month {
 171         // 2x6 grid
 172         width: @calendarWidth / 2;
 173         line-height: @calendarHeight / 6;
 174
 175         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 176         &:nth-child( 2n ) {
 177                 width: @calendarWidth / 2 - 0.2em;
 178                 margin-right: 0.2em;
 179         }
 180
 181         &:nth-child( 2n+1 ) {
 182                 width: @calendarWidth / 2 - 0.2em;
 183                 margin-left: 0.2em;
 184         }
 185
 186         &:nth-child( 10 ) ~ & {
 187                 line-height: @calendarHeight / 6 - 0.2em;
 188                 margin-bottom: 0.2em;
 189         }
 190 }
 191
 192 .mw-widget-calendarWidget-year {
 193         // 5x4 grid
 194         width: @calendarWidth / 5;
 195         line-height: @calendarHeight / 4;
 196
 197         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 198         &:nth-child( 5n ) {
 199                 width: @calendarWidth / 5 - 0.2em;
 200                 margin-right: 0.2em;
 201         }
 202
 203         &:nth-child( 5n+1 ) {
 204                 width: @calendarWidth / 5 - 0.2em;
 205                 margin-left: 0.2em;
 206         }
 207
 208         &:nth-child( 15 ) ~ & {
 209                 line-height: @calendarHeight / 4 - 0.2em;
 210                 margin-bottom: 0.2em;
 211         }
 212 }
 213
 214 .mw-widget-calendarWidget-item {
 215         cursor: pointer;
 216 }
 217
 218 /* Theme-specific */
 219 .mw-widget-calendarWidget {
 220         .box-sizing( border-box );
 221         border: 1px solid #a2a9b1;
 222         .transition( ~'border-color 100ms, box-shadow 100ms' );
 223
 224         &:focus {
 225                 border-color: #36c;
 226                 box-shadow: inset 0 0 0 1px #36c;
 227                 outline: 0;
 228         }
 229
 230         &-day {
 231                 color: #222;
 232                 border-radius: 2px;
 233         }
 234
 235         &-day-heading {
 236                 color: #54595d;
 237                 font-weight: bold;
 238         }
 239
 240         &-day-additional {
 241                 color: #a2a9b1;
 242
 243                 &:hover {
 244                         color: #222;
 245                 }
 246         }
 247
 248         &-day-today {
 249                 box-shadow: inset 0 0 0 1px #36c;
 250         }
 251
 252         &-item {
 253                 .transition( ~'background-color 250ms, color 250ms' );
 254
 255                 &:hover {
 256                         background-color: #36c;
 257                         color: #fff;
 258                 }
 259
 260                 &-selected {
 261                         background-color: #2a4b8d;
 262                         color: #fff;
 263                 }
 264         }
 265 }