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                 display: inline-grid;
  67                 // Fit 7 days, 3em each
  68                 width: @calendarWidth;
  69                 // Fit 6 weeks + heading line, 2em each
  70                 height: @calendarHeight;
  71         }
  72
  73         .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
  74                 margin-top: -@calendarHeight; /* stylelint-disable-line value-keyword-case */
  75                 margin-left: -@calendarWidth; /* stylelint-disable-line value-keyword-case */
  76         }
  77
  78         .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
  79                 margin-top: 0;
  80                 margin-left: 0;
  81         }
  82 }
  83
  84 .mw-widget-calendarWidget-body-wrapper-fade-previous {
  85         width: @calendarWidth * 2;
  86         height: @calendarHeight;
  87
  88         .mw-widget-calendarWidget-body:first-child {
  89                 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
  90                 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  91                 .transition( margin-left 500ms );
  92         }
  93 }
  94
  95 .mw-widget-calendarWidget-body-wrapper-fade-next {
  96         width: @calendarWidth * 2;
  97         height: @calendarHeight;
  98
  99         .mw-widget-calendarWidget-body:first-child {
 100                 margin-left: -@calendarWidth !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
 101                 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 102                 .transition( margin-left 500ms );
 103         }
 104 }
 105
 106 .mw-widget-calendarWidget-body-wrapper-fade-up {
 107         width: @calendarWidth;
 108         height: @calendarHeight * 2;
 109
 110         .mw-widget-calendarWidget-body {
 111                 display: block;
 112                 display: grid;
 113         }
 114
 115         .mw-widget-calendarWidget-body:first-child {
 116                 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 117                 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 118                 .transition( margin-top 500ms );
 119         }
 120 }
 121
 122 .mw-widget-calendarWidget-body-wrapper-fade-down {
 123         width: @calendarWidth;
 124         height: @calendarHeight * 2;
 125
 126         .mw-widget-calendarWidget-body {
 127                 display: block;
 128                 display: grid;
 129         }
 130
 131         .mw-widget-calendarWidget-body:first-child {
 132                 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 133                 margin-top: -@calendarHeight !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
 134                 .transition( margin-top 500ms );
 135         }
 136 }
 137
 138 // Support: Browsers that render CSS Grid. All others ignore unknown `grid-*` properties.
 139 // This avoids any calculation issues pushing items to next line.
 140 .mw-widget-calendarWidget-body-month {
 141         grid-template-columns: auto auto auto auto auto auto auto;
 142 }
 143
 144 .mw-widget-calendarWidget-body-year {
 145         grid-template-columns: auto auto;
 146 }
 147
 148 .mw-widget-calendarWidget-body-duodecade {
 149         grid-template-columns: auto auto auto auto auto;
 150 }
 151
 152 .mw-widget-calendarWidget-day,
 153 .mw-widget-calendarWidget-day-heading,
 154 .mw-widget-calendarWidget-month,
 155 .mw-widget-calendarWidget-year {
 156         display: inline-block;
 157         vertical-align: middle;
 158         white-space: nowrap;
 159         overflow: hidden;
 160         text-overflow: ellipsis;
 161         text-align: center;
 162 }
 163
 164 .mw-widget-calendarWidget-day,
 165 .mw-widget-calendarWidget-day-heading {
 166         // 7x7 grid
 167         width: @calendarWidth / 7;
 168         line-height: @calendarHeight / 7;
 169
 170         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 171         &:nth-child( 7n ) {
 172                 width: @calendarWidth / 7 - 0.2em;
 173                 margin-right: 0.2em;
 174         }
 175
 176         &:nth-child( 7n+1 ) {
 177                 width: @calendarWidth / 7 - 0.2em;
 178                 margin-left: 0.2em;
 179         }
 180
 181         &:nth-child( 42 ) ~ & {
 182                 line-height: @calendarHeight / 7 - 0.2em;
 183                 margin-bottom: 0.2em;
 184         }
 185 }
 186
 187 .mw-widget-calendarWidget-month {
 188         // 2x6 grid
 189         width: @calendarWidth / 2;
 190         line-height: @calendarHeight / 6;
 191
 192         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 193         &:nth-child( 2n ) {
 194                 width: @calendarWidth / 2 - 0.2em;
 195                 margin-right: 0.2em;
 196         }
 197
 198         &:nth-child( 2n+1 ) {
 199                 width: @calendarWidth / 2 - 0.2em;
 200                 margin-left: 0.2em;
 201         }
 202
 203         &:nth-child( 10 ) ~ & {
 204                 line-height: @calendarHeight / 6 - 0.2em;
 205                 margin-bottom: 0.2em;
 206         }
 207 }
 208
 209 .mw-widget-calendarWidget-year {
 210         // 5x4 grid
 211         width: @calendarWidth / 5;
 212         line-height: @calendarHeight / 4;
 213
 214         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 215         &:nth-child( 5n ) {
 216                 width: @calendarWidth / 5 - 0.2em;
 217                 margin-right: 0.2em;
 218         }
 219
 220         &:nth-child( 5n+1 ) {
 221                 width: @calendarWidth / 5 - 0.2em;
 222                 margin-left: 0.2em;
 223         }
 224
 225         &:nth-child( 15 ) ~ & {
 226                 line-height: @calendarHeight / 4 - 0.2em;
 227                 margin-bottom: 0.2em;
 228         }
 229 }
 230
 231 .mw-widget-calendarWidget-item {
 232         cursor: pointer;
 233 }
 234
 235 /* Theme-specific */
 236 .mw-widget-calendarWidget {
 237         .box-sizing( border-box );
 238         border: 1px solid #a2a9b1;
 239         .transition( ~'border-color 100ms, box-shadow 100ms' );
 240
 241         &:focus {
 242                 border-color: #36c;
 243                 box-shadow: inset 0 0 0 1px #36c;
 244                 outline: 0;
 245         }
 246
 247         &-day {
 248                 color: #222;
 249                 border-radius: 2px;
 250         }
 251
 252         &-day-heading {
 253                 color: #54595d;
 254                 font-weight: bold;
 255         }
 256
 257         &-day-additional {
 258                 color: #a2a9b1;
 259
 260                 &:hover {
 261                         color: #222;
 262                 }
 263         }
 264
 265         &-day-today {
 266                 box-shadow: inset 0 0 0 1px #36c;
 267         }
 268
 269         &-item {
 270                 .transition( ~'background-color 250ms, color 250ms' );
 271
 272                 &:hover {
 273                         background-color: #36c;
 274                         color: #fff;
 275                 }
 276
 277                 &-selected {
 278                         background-color: #2a4b8d;
 279                         color: #fff;
 280                 }
 281         }
 282 }