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                 background-color: white;
  63         }
  64
  65         > .oo-ui-textInputWidget input {
  66                 padding-left: 1em;
  67         }
  68
  69         > .mw-widget-calendarWidget {
  70                 background-color: white;
  71         }
  72
  73         &-active > .mw-widget-calendarWidget {
  74                 margin-top: -2px;
  75                 // Immitate focussed input styles
  76                 // First shadow generates bottom and right "border", second shadow generates bottom and left,
  77                 // resulting in no "border" at the top. Note that this generates a 2px-wide "border", not 1px.
  78                 // It makes sense when you think about it long enough and look up what each value means. Enjoy.
  79                 // (This is symmetrical anyway, and CSSJanus can't flip it correctly. T62805)
  80                 /* @noflip */
  81                 box-shadow: inset -1px -1px 0 1px #347bff, inset 1px -1px 0 1px #347bff;
  82                 border-top: 1px solid #ccc;
  83
  84                 &:focus {
  85                         outline: none;
  86                         // Add border at the top on focus
  87                         margin-top: -3px;
  88                         border-top: 2px solid #347bff;
  89                 }
  90         }
  91
  92         &.oo-ui-widget-enabled {
  93                 .mw-widget-dateInputWidget-handle:hover {
  94                         border-color: #347bff;
  95                 }
  96         }
  97
  98         &.oo-ui-widget-disabled {
  99                 .mw-widget-dateInputWidget-handle {
 100                         color: #ccc;
 101                         text-shadow: 0 1px 1px #fff;
 102                         border-color: #ddd;
 103                         background-color: #f3f3f3;
 104                 }
 105         }
 106
 107         &.oo-ui-flaggedElement-invalid {
 108                 .mw-widget-dateInputWidget-handle {
 109                         border-color: red;
 110                         box-shadow: inset 0 0 0 0 red;
 111                 }
 112         }
 113
 114         &-empty {
 115                 .mw-widget-dateInputWidget-handle {
 116                         color: #ccc;
 117                 }
 118         }
 119 }