MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / resources / src / mediawiki.widgets / mw.widgets.DateInputWidget.less

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
new file mode 100644 (file)
index 0000000..47f8045
--- /dev/null
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
@@ -0,0 +1,95 @@
+/*!
+ * MediaWiki Widgets – JS DateInputWidget styles.
+ *
+ * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.oo-ui-unselectable() {
+       -webkit-touch-callout: none;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+}
+
+@indicator-size: unit( 12 / 16 / 0.8, em );
+
+.mw-widget-dateInputWidget {
+       &-handle {
+               .oo-ui-unselectable();
+
+               > .oo-ui-labelElement-label {
+                       padding: 0;
+               }
+
+               > .oo-ui-indicatorElement-indicator {
+                       display: none;
+               }
+       }
+
+       &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
+               display: block;
+               position: absolute;
+               top: 0;
+               right: 0;
+               width: @indicator-size;
+               height: 100%;
+               margin: 0 0.775em;
+       }
+
+       > .oo-ui-textInputWidget {
+               z-index: 2;
+
+               & input {
+                       padding-left: 1em;
+               }
+       }
+
+       &-calendar {
+               background-color: #fff;
+               position: absolute;
+               margin-top: -2px;
+               box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
+               z-index: 1;
+
+               &:focus {
+                       box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
+                       z-index: 3;
+               }
+       }
+
+       &-empty {
+               .mw-widget-dateInputWidget-handle {
+                       color: #54595d;
+                       outline: 0;
+               }
+       }
+
+       &.oo-ui-flaggedElement-invalid {
+               .mw-widget-dateInputWidget-handle {
+                       border-color: #f00;
+                       box-shadow: inset 0 0 0 0 #f00;
+               }
+       }
+
+       &.oo-ui-widget-enabled {
+               .mw-widget-dateInputWidget-handle:hover {
+                       border-color: #72777d;
+               }
+       }
+
+       &.oo-ui-widget-disabled {
+               .mw-widget-dateInputWidget-handle {
+                       background-color: #eaecf0;
+                       color: #72777d;
+                       border-color: #c8ccd1;
+                       text-shadow: 0 1px 1px #fff;
+                       cursor: default;
+
+                       > .oo-ui-indicatorElement-indicator {
+                               opacity: 0.51;
+                       }
+               }
+       }
+}