Merge "Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme widgets"

[lhc/web/wiklou.git] / resources / src / mediawiki.widgets / mw.widgets.TitleWidget.less

diff --git a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
index 93c4b20..86d4cfe 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
@@ -5,59 +5,75 @@
  * @license The MIT License (MIT); see LICENSE.txt
  */
 
-.mw-widget-titleOptionWidget-description {
-       display: none;
-}
+.mw-widget-titleWidget-menu {
+       .mw-widget-titleOptionWidget {
+               line-height: normal;
+
+               &-description {
+                       color: #888;
+               }
+       }
 
-.mw-widget-titleWidget {
-       &-menu-withImages {
+       &-withImages {
                .mw-widget-titleOptionWidget {
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        min-height: 3.75em;
-                       margin-left: 3.75em;
-               }
+                       padding-left: 4.75em;
 
-               .mw-widget-titleOptionWidget:not(:last-child) {
-                       margin-bottom: 1px;
-               }
+                       &:not( :last-child ) {
+                               margin-bottom: 2px;
+                       }
 
-               .oo-ui-iconElement .oo-ui-iconElement-icon {
-                       display: block;
-                       width: 3.75em;
-                       height: 3.75em;
-                       left: -3.75em;
-                       background-color: #ccc;
-                       opacity: 0.4;
-               }
+                       > .oo-ui-labelElement-label {
+                               line-height: 2.8em;
+                       }
 
-               .oo-ui-iconElement .mw-widget-titleOptionWidget-hasImage {
-                       border: 0;
-                       background-size: cover;
-                       opacity: 1;
-               }
+                       &.oo-ui-iconElement {
+                               > .oo-ui-iconElement-icon {
+                                       display: block;
+                                       width: 3.75em;
+                                       height: 3.75em;
+                                       left: 0;
+                                       &:not( .mw-widget-titleOptionWidget-hasImage ) {
+                                               background-color: #ccc;
+                                               opacity: 0.4;
+                                       }
+                                       &.mw-widget-titleOptionWidget-hasImage {
+                                               border: 0;
+                                               background-size: cover;
+                                               opacity: 0.7;
+                                       }
+                               }
+                       }
 
-               .mw-widget-titleOptionWidget .oo-ui-labelElement-label {
-                       line-height: 2.8em;
+                       &.oo-ui-optionWidget-highlighted, &.oo-ui-optionWidget-selected {
+                               &.oo-ui-iconElement > .mw-widget-titleOptionWidget-hasImage {
+                                       opacity: 1;
+                               }
+                       }
                }
        }
 
-       &-menu-withDescriptions {
-               .mw-widget-titleOptionWidget .oo-ui-labelElement-label {
-                       line-height: 1.5em;
+       &-withDescriptions {
+               .mw-widget-titleOptionWidget {
+                       > .oo-ui-labelElement-label {
+                               line-height: 1.5em;
+                       }
+
+                       &-description {
+                               display: block;
+                               white-space: nowrap;
+                               text-overflow: ellipsis;
+                               overflow: hidden;
+                       }
                }
+       }
 
+       &:not(&-withDescriptions) {
                .mw-widget-titleOptionWidget-description {
-                       display: block;
-                       white-space: nowrap;
-                       text-overflow: ellipsis;
-                       overflow: hidden;
+                       display: none;
                }
        }
 }
-
-.oo-ui-menuOptionWidget:not(.oo-ui-optionWidget-selected) .mw-widget-titleOptionWidget-description,
-.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted .mw-widget-titleOptionWidget-description {
-       color: #888;
-}