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