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