resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less

   1 /*!
   2  * MediaWiki Widgets – DateInputWidget 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 .oo-ui-box-sizing( @type: border-box ) {
   9         -webkit-box-sizing: @type;
  10         -moz-box-sizing: @type;
  11         box-sizing: @type;
  12 }
  13
  14 .oo-ui-unselectable() {
  15         -webkit-touch-callout: none;
  16         -webkit-user-select: none;
  17         -moz-user-select: none;
  18         -ms-user-select: none;
  19         user-select: none;
  20 }
  21
  22 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
  23         margin-right: @spacing;
  24         &:last-child {
  25                 margin-right: @cancelled-spacing;
  26         }
  27 }
  28
  29 .mw-widget-dateInputWidget {
  30         display: inline-block;
  31         position: relative;
  32
  33         &-handle {
  34                 width: 100%;
  35                 display: inline-block;
  36                 cursor: pointer;
  37
  38                 .oo-ui-unselectable();
  39                 .oo-ui-box-sizing(border-box);
  40         }
  41
  42         &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
  43                 cursor: default;
  44         }
  45
  46         > .mw-widget-calendarWidget {
  47                 position: absolute;
  48                 z-index: 1;
  49         }
  50
  51         // Theme-specific styles
  52         width: 21em;
  53         margin: 0.25em 0;
  54
  55         .oo-ui-inline-spacing(0.5em);
  56
  57         &-handle {
  58                 padding: 0.5em 1em;
  59                 border: 1px solid #ccc;
  60                 border-radius: 0.1em;
  61                 line-height: 1.275em;
  62         }
  63
  64         > .oo-ui-textInputWidget input {
  65                 padding-left: 1em;
  66         }
  67
  68         > .mw-widget-calendarWidget {
  69                 background-color: white;
  70         }
  71
  72         &-active > .mw-widget-calendarWidget {
  73                 margin-top: -2px;
  74                 // Immitate focussed input styles
  75                 // First shadow generates bottom and right "border", second shadow generates bottom and left,
  76                 // resulting in no "border" at the top. Note that this generates a 2px-wide "border", not 1px.
  77                 // It makes sense when you think about it long enough and look up what each value means. Enjoy.
  78                 // (This is symmetrical anyway, and CSSJanus can't flip it correctly. T62805)
  79                 /* @noflip */
  80                 box-shadow: inset -1px -1px 0 1px #347bff, inset 1px -1px 0 1px #347bff;
  81                 border-top: 1px solid #ccc;
  82
  83                 &:focus {
  84                         outline: none;
  85                         // Add border at the top on focus
  86                         margin-top: -3px;
  87                         border-top: 2px solid #347bff;
  88                 }
  89         }
  90
  91         &.oo-ui-widget-enabled {
  92                 .mw-widget-dateInputWidget-handle:hover {
  93                         border-color: #347bff;
  94                 }
  95         }
  96
  97         &.oo-ui-widget-disabled {
  98                 .mw-widget-dateInputWidget-handle {
  99                         color: #ccc;
 100                         text-shadow: 0 1px 1px #fff;
 101                         border-color: #ddd;
 102                         background-color: #f3f3f3;
 103                 }
 104         }
 105
 106         &-empty {
 107                 .mw-widget-dateInputWidget-handle {
 108                         color: #ccc;
 109                 }
 110         }
 111 }