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