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