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